/* ==========================================================================
   AutrePerso DS — 首页迁移层（Light 试点）
   策略：桥接 style.css 的 --apple-* 变量到设计系统令牌；
        收敛过度 Apple 化（大 Hero / pill 按钮 / 重毛玻璃 / 超大字号）；
        明暗交替区块保留为内容节奏，深色区采用 Dark 主题基底色值。
   加载顺序：style.css → design-system.css → 本文件
   ========================================================================== */

/* ---------- 1. 变量桥接：Apple 色板 → DS 令牌 ---------- */
:root {
    --apple-blue: var(--brand);
    --apple-blue-hover: var(--brand-hover);
    --apple-black: var(--text);
    --apple-gray: var(--text-2);
    --apple-light-gray: var(--surface-2);
    --apple-border-gray: var(--border);
    --apple-text-secondary: var(--text-2);
    --apple-red: var(--danger);
    --apple-green: var(--success);
    --apple-yellow: var(--warning);
}

/* ---------- 2. 基础 ---------- */
body.apple-home {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-soft-strong); }

/* ---------- 3. 顶部导航：44px → 60px，重毛玻璃 → 轻玻璃 ---------- */
.apple-nav {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.apple-nav.scrolled {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-sm);
}
.apple-nav-inner {
    height: var(--navbar-h);
    max-width: var(--content-w);
    padding: 0 var(--space-6);
}
.apple-logo {
    color: var(--text);
    font-size: var(--text-md);
    font-weight: 700;
}
.apple-logo svg { fill: var(--brand); }
.apple-nav-links { gap: var(--space-2); }
.apple-nav-links li a {
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 1;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.apple-nav-links li a:hover { color: var(--text); background: var(--surface-hover); }
.apple-nav-btn {
    height: 32px;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    color: var(--text-2);
}
.apple-nav-btn:hover { background: var(--surface-hover); color: var(--text); }
.apple-nav-btn-primary {
    background: var(--brand);
    color: var(--brand-on);
    border-radius: var(--radius-sm);
    height: 32px;
}
.apple-nav-btn-primary:hover { background: var(--brand-hover); }

/* ---------- 4. Hero：72px → 56px，收敛留白节奏 ---------- */
.apple-hero {
    padding: 148px var(--space-6) 96px;
    background: var(--bg);
}
.apple-hero-title {
    font-size: 56px;
    color: var(--text);
    letter-spacing: -0.02em;
}
.apple-hero-subtitle {
    font-size: var(--text-2xl);
    color: var(--text-2);
}
.apple-hero-description {
    font-size: var(--text-md);
    color: var(--text-2);
    line-height: var(--leading);
    /* 水平必须 auto：style.css 给了 max-width:720px，margin 若为 0 整块会靠左 */
    margin: var(--space-6) auto var(--space-8);
    text-align: center;
}
.apple-hero-buttons { gap: var(--space-4); }
.apple-hero-visual { margin-top: var(--space-10); }
.apple-demo-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.apple-demo-card-header { background: var(--surface-2); }
.apple-demo-card-header span { background: var(--border-strong); }
.apple-demo-card-header span:first-child { background: var(--danger); }
.apple-demo-card-header span:nth-child(2) { background: var(--warning); }
.apple-demo-card-body { background: var(--surface); }
.apple-demo-card-footer {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-xs);
}
.apple-demo-status-dot { background: var(--success); }

/* ---------- 5. 按钮体系：pill → radius-md，统一高度 ---------- */
.apple-btn {
    height: 44px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-sans);
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
}
.apple-btn:active { transform: translateY(1px); }
.apple-btn-primary { background: var(--brand); color: var(--brand-on); }
.apple-btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-md); }
.apple-btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.apple-btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.apple-btn-link {
    color: var(--brand);
    font-size: var(--text-base);
    font-weight: 500;
    height: auto;
    padding: var(--space-3) 0;
}
.apple-btn-link:hover { text-decoration: underline; }
.apple-btn-sm {
    height: 36px;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
}

/* ---------- 6. 产品卡片：56px → 38px 标题，深色卡 = Dark 基底 ---------- */
.apple-product-card {
    padding: 96px var(--space-6);
    gap: 64px;
}
.apple-card-light {
    background: var(--surface);
    color: var(--text);
}
.apple-card-dark {
    /* 明暗交替是内容层节奏；深色卡采用 Dark 主题基底（非主题切换） */
    background: #0B0D10;
    color: #F3F4F6;
}
.apple-card-title {
    font-size: var(--text-4xl);
    letter-spacing: -0.02em;
}
.apple-card-subtitle {
    font-size: var(--text-xl);
    margin: var(--space-2) 0 var(--space-5);
    opacity: 1;
    color: var(--text-2);
}
.apple-card-dark .apple-card-subtitle { color: #8B93A1; }
.apple-card-description {
    font-size: var(--text-md);
    line-height: var(--leading);
    opacity: 1;
    color: var(--text-2);
    margin: 0 0 var(--space-8);
}
.apple-card-dark .apple-card-description { color: #A7AEBB; }
.apple-card-buttons { gap: var(--space-4); }
.apple-card-dark .apple-btn-primary { background: var(--brand); color: var(--brand-on); }
.apple-card-dark .apple-btn-link { color: #7B93FF; }

/* 技术标签 */
.apple-card-tag {
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--brand-soft);
    color: var(--brand-text);
    padding: 4px 12px;
}
.apple-card-dark .apple-card-tag {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
}

/* 图片 Mock：统一圆角与深色基底 */
.apple-image-mock,
.apple-webcam-mock {
    border-radius: var(--radius-lg);
    background: #12151A;
    box-shadow: var(--shadow-lg);
}
.apple-card-light .apple-image-mock,
.apple-card-light .apple-video-mock { background: var(--surface-2); }
.apple-video-mock {
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-md);
}
.apple-video-screen { background: #12151A; border-radius: var(--radius-md); }
.apple-video-progress-bar { background: var(--brand); }
.apple-frame-dot.active { background: var(--brand); }

/* ---------- 7. 平台定位 + Tech Pills ---------- */
.apple-intro-section {
    padding: 88px var(--space-6) 64px;
    background: var(--bg);
}
.apple-intro-text {
    font-size: var(--text-lg);
    color: var(--text);
    line-height: 1.7;
    max-width: 720px;
}
.apple-tech-pill {
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
}
.apple-tech-pill:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--border-strong);
}

/* ---------- 8. 模块展示区 ---------- */
.apple-modules-section {
    padding: 96px var(--space-6);
    background: var(--surface);
}
.apple-modules-header { margin-bottom: 56px; }
.apple-modules-grid { gap: var(--space-6); max-width: var(--content-w); }
.apple-module-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    gap: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.apple-module-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.apple-module-icon { border-radius: var(--radius-md); }
.apple-module-info h3 {
    font-size: var(--text-lg);
    color: var(--text);
}
.apple-module-info p {
    font-size: var(--text-sm);
    color: var(--text-2);
    line-height: var(--leading);
}
.apple-module-status span:last-child {
    font-size: var(--text-xs);
    color: var(--text-2);
}
.apple-module-tag {
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    background: var(--brand-soft);
    color: var(--brand-text);
    padding: 2px 8px;
}
.apple-module-enter {
    font-size: var(--text-sm);
    color: var(--brand);
    font-weight: 600;
}
.status-dot.gray { background: var(--text-3); }

/* 骨架屏 */
.skeleton-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.skeleton-icon, .skeleton-line, .skeleton-status { background: var(--surface-2); }

/* ---------- 9. 项目理念 + CTA ---------- */
.apple-about-section {
    padding: 96px var(--space-6);
    background: var(--surface);
}
.apple-about-content h2 {
    font-size: var(--text-3xl);
    color: var(--text);
}
.apple-about-content p {
    font-size: var(--text-md);
    color: var(--text-2);
    line-height: var(--leading);
}
.apple-about-stat-num {
    font-size: var(--text-4xl);
    color: var(--brand);
}
.apple-about-stat-label {
    font-size: var(--text-sm);
    color: var(--text-2);
}
.apple-cta-section {
    padding: 96px var(--space-6);
    background: var(--bg);
}
.apple-cta-title {
    font-size: var(--text-3xl);
    color: var(--text);
}
.apple-cta-subtitle {
    font-size: var(--text-lg);
    color: var(--text-2);
    margin: 0 0 var(--space-8);
}

/* ---------- 11. Footer ---------- */
.apple-footer {
    padding: 56px var(--space-6) var(--space-6);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.apple-footer-col h4 {
    font-size: var(--text-sm);
    color: var(--text);
}
.apple-footer-col a {
    font-size: var(--text-sm);
    color: var(--text-2);
    line-height: var(--leading);
}
.apple-footer-col a:hover { color: var(--brand); }
.apple-footer-bottom {
    font-size: var(--text-sm);
    color: var(--text-2);
}
.apple-footer-links a { color: var(--text-2); font-size: var(--text-sm); }
.apple-footer-links a:hover { color: var(--brand); }

/* ---------- 12. 登录/注册弹窗：pill → radius-md，品牌色统一 ---------- */
.modal-overlay { background: var(--overlay); }
.modal-box-login {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 52px 40px 40px;
}
/* 标志本身是黑白矢量标，不再铺品牌色方块 */
.modal-brand-text { color: var(--text); font-size: var(--text-md); }
.modal-close-btn { color: var(--text-2); border-radius: var(--radius-sm); }
.modal-close-btn:hover { background: var(--surface-hover); color: var(--text); }
.modal-tab {
    font-size: var(--text-base);
    color: var(--text-2);
}
.modal-tab.active { color: var(--brand); }
.modal-tab.active::after { background: var(--brand); }
.form-group-pill {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-5);
}
.form-group-pill:focus-within {
    border-color: var(--brand);
    background: var(--surface);
}
.form-pill-icon {
    color: var(--text-2);
    border-right: 1px solid var(--border);
}
.form-group-pill input {
    font-size: var(--text-base);
    color: var(--text);
}
.form-group-pill input::placeholder { color: var(--text-3); }
.modal-submit-btn {
    background: var(--brand);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: background var(--t-fast);
}
.modal-submit-btn:hover:not(:disabled) { background: var(--brand-hover); }
.modal-agreement { color: var(--text-2); font-size: var(--text-sm); }
.modal-agreement-link { color: var(--brand); }
.modal-error {
    background: var(--danger-soft);
    color: var(--danger);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* ---------- 14. 响应式微调 ---------- */
@media (max-width: 768px) {
    .apple-hero { padding: 120px var(--space-4) 64px; }
    .apple-hero-title { font-size: 40px; }
    .apple-hero-subtitle { font-size: var(--text-lg); }
    .apple-card-title { font-size: var(--text-3xl); }
    .apple-card-subtitle { font-size: var(--text-md); }
    .apple-product-card { padding: 64px var(--space-4); gap: var(--space-6); }
    .apple-modules-section,
    .apple-about-section,
    .apple-cta-section { padding: 64px var(--space-4); }
    .apple-about-content h2,
    .apple-cta-title { font-size: var(--text-2xl); }
    .apple-intro-text { font-size: var(--text-base); }
}