/* ==========================================================================
   准派 ZHUNPAI - 全局样式表 (Global Stylesheet)
   严格遵循：
   - 白天模式（白底黑字）：纯正白底、炭黑标题、深灰正文，主操作按钮反显为黑底白字
   - 黑夜模式（黑底白字）：深邃纯黑底、纯白标题、银灰正文，主操作按钮反显为白底黑字
   ========================================================================== */

/* --------------------------------------------------------------------------
   亮色白昼主题 (Light Theme - 白底黑字，素雅纯粹)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    /* 核心背景：纯净白底体系 */
    --color-surface-canvas-rgb: 255 255 255;          /* #ffffff 全局纯白画布 */
    --color-surface-rgb: 250 250 250;                 /* #fafafa 基础背景 */
    --color-surface-container-lowest-rgb: 255 255 255; /* #ffffff 卡片白底 */
    --color-surface-container-low-rgb: 244 245 247;    /* #f4f5f7 次级卡片微灰 */
    --color-surface-container-rgb: 238 239 242;        /* #eeeff2 交互层底色 */
    --color-surface-container-high-rgb: 228 230 235;   /* #e4e6eb 高亮层 */

    /* 核心文字：高对比度黑字体系 */
    --color-primary-rgb: 0 0 0;                       /* #000000 纯黑标题 */
    --color-text-primary-rgb: 17 24 39;               /* #111827 炭黑正文 */
    --color-text-muted-rgb: 75 85 99;                 /* #4b5563 清晰中灰次级文案 */
    --color-on-surface-rgb: 17 24 39;                 /* #111827 表面文字 */
    --color-on-surface-variant-rgb: 75 85 99;         /* #4b5563 辅助文字 */
    /* 边框：彻底去除生硬描边，采用无边框极简设计 (Borderless Minimalist) */
    --color-border-subtle-rgb: 0 0 0;
    --color-border-hairline-rgb: 0 0 0;
    --color-border-subtle: transparent;
    --color-border-hairline: transparent;

    /* Hex / 直用变量 */
    --color-primary: #000000;
    --color-text-primary: #111827;
    --color-text-muted: #4b5563;
    --color-accent-electric: #346BF1;
    --color-surface: #fafafa;
    --color-surface-canvas: #FFFFFF;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f4f5f7;
    --color-surface-container: #eeeff2;
    --color-surface-container-high: #e4e6eb;
    --color-secondary-fixed: #dbe1ff;
    --color-on-secondary-fixed: #00174b;
    --color-error: #ba1a1a;

    /* 主行动按钮：白底环境中的黑底白字按钮 */
    --color-btn-bg: #000000;
    --color-btn-text: #ffffff;

    /* 状态与品牌 */
    --color-brand-android: #16a34a;
    --color-brand-web: #2563eb;
    --color-traffic-red: #ff5f56;
    --color-traffic-yellow: #ffbd2e;
    --color-traffic-green: #27c93f;
}

/* --------------------------------------------------------------------------
   暗黑极夜主题 (Dark Theme - 黑底白字，深邃护眼)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    /* 核心背景：纯粹深黑体系 */
    --color-surface-canvas-rgb: 0 0 0;                /* #000000 极夜纯黑画布 */
    --color-surface-rgb: 9 12 16;                     /* #090c10 深空黑次级表面 */
    --color-surface-container-lowest-rgb: 18 22 28;   /* #12161c 高雅黑调卡片顶层 */
    --color-surface-container-low-rgb: 24 30 40;      /* #181e28 次级卡片深灰 */
    --color-surface-container-rgb: 32 39 52;          /* #202734 交互层底色 */
    --color-surface-container-high-rgb: 40 49 66;     /* #283142 高亮层底色 */

    /* 核心文字：高对比度白字体系 */
    --color-primary-rgb: 255 255 255;                 /* #ffffff 纯白标题 */
    --color-text-primary-rgb: 243 244 246;            /* #f3f4f6 亮白正文 */
    --color-text-muted-rgb: 209 213 219;              /* #d1d5db 明朗银白，黑夜模式清晰通透 */
    --color-on-surface-rgb: 255 255 255;              /* #ffffff 表面文字 */
    --color-on-surface-variant-rgb: 209 213 219;      /* #d1d5db 明朗辅助文字 */
    /* 边框：彻底去除生硬描边，采用无边框极简设计 (Borderless Minimalist) */
    --color-border-subtle-rgb: 255 255 255;
    --color-border-hairline-rgb: 255 255 255;
    --color-border-subtle: transparent;
    --color-border-hairline: transparent;

    /* Hex / 直用变量 */
    --color-primary: #ffffff;
    --color-text-primary: #f3f4f6;
    --color-text-muted: #d1d5db;
    --color-accent-electric: #4d82f8;
    --color-surface: #090c10;
    --color-surface-canvas: #000000;
    --color-surface-container-lowest: #12161c;
    --color-surface-container-low: #181e28;
    --color-surface-container: #202734;
    --color-surface-container-high: #283142;
    --color-secondary-fixed: #1e293b;
    --color-on-secondary-fixed: #93c5fd;
    --color-error: #ef4444;

    /* 主行动按钮：黑底环境中的白底黑字反显按钮（极佳对比焦点） */
    --color-btn-bg: #ffffff;
    --color-btn-text: #000000;

    --color-brand-android: #3ddc84;
    --color-brand-web: #38bdf8;
}

@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 5.5rem;
        transition: background-color 0.25s ease, color 0.25s ease;
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    body {
        overscroll-behavior: none;
        transition: background-color 0.25s ease, color 0.25s ease;
    }
    main > :first-child {
        margin-top: 0 !important;
    }
    main > :last-child {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   核心交互组件与语义化类
   ========================================================================== */

/* 主行动按钮 (Primary Action Button)
   - 白天：黑底白字
   - 黑夜：白底黑字
*/
.btn-primary-action {
    background-color: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary-action:hover {
    opacity: 0.90;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 顶部导航滑动指示器胶囊 */
.nav-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 0;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 头部导航栏毛玻璃与自适应阴影 */
.header-glass-bar {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .header-glass-bar {
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

/* 胶囊按钮细腻阴影 */
.subtle-pill-button {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .subtle-pill-button {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 顶置氛围微光 (Ambient Glow) */
.hero-ambient-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 320px;
    background: radial-gradient(ellipse at top, rgba(219, 225, 255, 0.5) 0%, rgba(243, 244, 245, 0.3) 45%, transparent 75%);
    filter: blur(48px);
    pointer-events: none;
    z-index: -10;
}
[data-theme="dark"] .hero-ambient-glow {
    background: radial-gradient(ellipse at top, rgba(52, 107, 241, 0.28) 0%, rgba(24, 30, 40, 0.35) 45%, transparent 75%);
}

/* 控制台窗口三色红绿灯指示圆点 */
.traffic-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    display: inline-block;
}
.traffic-dot-red { background-color: var(--color-traffic-red); }
.traffic-dot-yellow { background-color: var(--color-traffic-yellow); }
.traffic-dot-green { background-color: var(--color-traffic-green); }

/* 研习者肖像卡片背景渐变 */
.practitioner-cover-1 {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #172554 100%);
}
.practitioner-cover-2 {
    background: linear-gradient(135deg, #0f172a 0%, #064e3b 50%, #022c22 100%);
}
.practitioner-cover-3 {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
}

/* 品牌平台标志色 */
.brand-icon-android {
    color: var(--color-brand-android);
}
.brand-icon-web {
    color: var(--color-brand-web);
}

/* Hero 细腻层级平滑渐显入场动效 */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-hero-1 { animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.animate-hero-2 { animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.animate-hero-3 { animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
.animate-hero-4 { animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }
.animate-hero-5 { animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both; }

/* 标题深曜石微呼吸科技流光动效 (白底深流光 / 黑底冷白流光) */
@keyframes textShimmerLight {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-title-shimmer {
    background: linear-gradient(115deg, #090d16 0%, #1e293b 28%, #2563eb 48%, #1e293b 68%, #090d16 100%);
    background-size: 260% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmerLight 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
[data-theme="dark"] .hero-title-shimmer {
    background: linear-gradient(115deg, #ffffff 0%, #cbd5e1 28%, #60a5fa 48%, #cbd5e1 68%, #ffffff 100%);
    background-size: 260% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 打字机光标闪烁 */
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.typewriter-cursor {
    display: inline-block;
    animation: cursorBlink 0.8s infinite;
}