/* ========== 站点共享样式：开放页（index / skills / leaderboard）共用 ========== */
/* 内容：全局重置 + 主题变量（与 base.html 保持一致）+ 顶部导航栏 + 站脚 + 主题按钮 */
/* 各页面专属样式仍写在各自专属 CSS 文件中 */

/* ========== 全局重置 & 基础排版（所有公开页唯一来源） ==========
   此前由 landing.css / skills.html 内联 / leaderboard.css 各自维护，导致跨页不一致：
   - leaderboard 缺全局 *{box-sizing:border-box}，使 .navbar-inner 退化为 content-box，
     实际宽 1128px(1080+padding 48) 大于另两页 1080px，切页时导航栏内容水平跳动；
   - leaderboard 缺全局 a{text-decoration:none}，使"进入系统"按钮(<a>)出现浏览器默认下划线。
   收归至此共享文件后，navbar / 链接跨页字节级一致，消除闪烁与布局移动。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

:root {
    --color-up: #ea3800;            /* 涨红 */
    --color-down: #56b7aa;          /* 跌绿 */
    --accent-blue: #58a6ff;         /* 蓝色强调 */
    --accent-gold: #f0b429;         /* 金色强调 */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

[data-theme="dark"] {
    /* ========== 暗黑模式：低饱和深色面板（参照 GitHub Dark + Financial Dashboard 调和） ==========
       落地页在暗黑模式下不再"白底卡片"，而是用渐进深灰 (#161b22 / #1c2128) 做层级区分，
       保持紧凑/轻量/低饱和的数据密集型看板风格，避免纯黑 OLED 显得刺眼 */
    --bg-primary: #0d1117;          /* 主背景：与原有 GitHub Dark 同系 */
    --bg-secondary: #161b22;        /* 次背景：卡片底色（原为 #ffffff，深色下太刺眼，改深灰） */
    --bg-tertiary: #0d1117;         /* 第三背景：区块底色（与主背景融合，淡化区块边界） */
    --bg-card: #1c2128;             /* 卡片背景：强调卡片（公众号/赞赏），再深一档拉层级 */
    --border-color: #30363d;        /* 边框颜色：在深灰底上保持可见但不喧宾夺主 */
    --text-primary: #e6edf3;        /* 主文字 */
    --text-secondary: #8b949e;      /* 次文字 */
    --text-muted: #6e7681;          /* 弱文字 */
    --shadow-color: rgba(0, 0, 0, 0.5);  /* 阴影略加深，深色背景下浮起感更强 */
    --hover-bg: rgba(88, 166, 255, 0.12);  /* hover 底色略加深，确保在深灰上可见 */
    --hero-glow-up: rgba(234, 56, 0, 0.14);    /* hero 氛围光略提亮，深色背景会"吃掉"低饱和 */
    --hero-glow-down: rgba(86, 183, 170, 0.14);

    /* ========== 新增：场景化 tint token，深色下取代硬编码 rgba ==========
       落地页大量组件用 rgba(88,166,255,0.1) 等浅色 tint，深色背景下几乎不可见；
       统一抽到 token 后，深色模式只需调整一个数值即全站生效 */
    --tint-blue: rgba(88, 166, 255, 0.14);     /* 蓝色徽章/图标底色（原 0.08~0.12） */
    --tint-up: rgba(234, 56, 0, 0.14);         /* 涨红场景底色 */
    --tint-down: rgba(86, 183, 170, 0.14);     /* 跌绿场景底色 */
    --tint-gold: rgba(240, 180, 41, 0.14);     /* 金色场景底色 */
    --tint-purple: rgba(163, 113, 247, 0.14);  /* 紫色场景底色 */
    /* 边框 tint：用在 hero-badge / scene-card 等描边场景，深色下需更亮的描边才能看清 */
    --tint-border-blue: rgba(88, 166, 255, 0.28);
    --tint-border-up: rgba(234, 56, 0, 0.28);
    --tint-border-down: rgba(86, 183, 170, 0.28);
    --tint-border-gold: rgba(240, 180, 41, 0.28);
    --tint-border-purple: rgba(163, 113, 247, 0.28);
}

[data-theme="light"] {
    --bg-primary: #f6f8fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f3f6;
    --bg-card: #ffffff;
    --border-color: #d0d7de;
    --text-primary: #1f2328;
    --text-secondary: #57606a;
    --text-muted: #8c959f;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --hover-bg: rgba(88, 166, 255, 0.1);
    --hero-glow-up: rgba(234, 56, 0, 0.06);
    --hero-glow-down: rgba(86, 183, 170, 0.06);

    /* ========== 浅色模式 tint token（与 dark 同名，深色下统一放大） ========== */
    --tint-blue: rgba(88, 166, 255, 0.10);
    --tint-up: rgba(234, 56, 0, 0.10);
    --tint-down: rgba(86, 183, 170, 0.10);
    --tint-gold: rgba(240, 180, 41, 0.10);
    --tint-purple: rgba(163, 113, 247, 0.10);
    --tint-border-blue: rgba(88, 166, 255, 0.20);
    --tint-border-up: rgba(234, 56, 0, 0.20);
    --tint-border-down: rgba(86, 183, 170, 0.20);
    --tint-border-gold: rgba(240, 180, 41, 0.20);
    --tint-border-purple: rgba(163, 113, 247, 0.20);
}

/* ========== 顶部导航栏（统一品牌入口） ========== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;                /* 品牌可点击回顶 / 跳首页，提供手型提示 */
    /* 防止窄屏 flex 挤压把中文标题宽度压到 0（截图里只看到孤立 brand-dot 的根因） */
    flex-shrink: 0;
    white-space: nowrap;
}
.brand-dot {
    /* 使用站点 favicon（股票折线图 SVG）作为品牌图标；
       尺寸略放大以便 64×64 SVG 在导航栏小尺寸下保持清晰 */
    width: 22px;
    height: 22px;
    display: block;
    /* 呼吸脉冲：极轻装饰；reduced-motion 下自动停（见文末媒体查询） */
    animation: dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--accent-blue); }
.nav-anchor { display: inline-block; }
/* 当前页高亮：桌面端用色条 + 蓝色文字，移动端抽屉内 link 用左侧色条延伸（见 .nav-drawer-link.is-current） */
.nav-anchor.is-current {
    color: var(--accent-blue);
    font-weight: 600;
    position: relative;
}
.nav-anchor.is-current::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--accent-blue);
    border-radius: 1px;
}

/* 汉堡按钮：桌面端默认隐藏，≤680px 才显示 */
.nav-burger {
    display: none;
    width: 32px; height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.nav-burger:hover { color: var(--accent-blue); border-color: var(--accent-blue); background: var(--hover-bg); }
.nav-burger svg { width: 18px; height: 18px; }
/* 汉堡 → 关闭 图标切换 */
.nav-burger .icon-close { display: none; }
.nav-burger.is-open .icon-menu { display: none; }
.nav-burger.is-open .icon-close { display: block; }

/* 抽屉菜单：桌面端完全隐藏，≤680px 才浮现 */
.nav-drawer {
    display: none;
    position: absolute;
    top: 56px;                 /* 紧贴导航栏底边 */
    left: 0; right: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 24px var(--shadow-color);
    /* 默认收起状态：高度 0 + 透明，给展开一个轻动画 */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.nav-drawer.is-open {
    max-height: 360px;
    opacity: 1;
}
.nav-drawer-inner {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 14px;
    gap: 2px;
}
.nav-drawer-link {
    position: relative;
    padding: 12px 14px 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    /* 左侧色条：与项目"标签色条"风格一致 */
}
.nav-drawer-link::before {
    content: '';
    position: absolute;
    left: 6px; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 14px;
    background: var(--accent-blue);
    border-radius: 1px;
    opacity: 0.55;
    transition: opacity 0.15s ease, height 0.2s ease;
}
.nav-drawer-link:hover,
.nav-drawer-link:focus-visible {
    background: var(--hover-bg);
    color: var(--accent-blue);
}
.nav-drawer-link:hover::before,
.nav-drawer-link:focus-visible::before { opacity: 1; height: 18px; }
/* 抽屉内当前页：色条延长 + 字色 + 字重，与桌面端 .nav-anchor.is-current 体验一致 */
.nav-drawer-link.is-current {
    color: var(--accent-blue);
    font-weight: 600;
    background: var(--hover-bg);
}
.nav-drawer-link.is-current::before { opacity: 1; height: 18px; }
.nav-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 4px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-blue), #3b82f6);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-drawer-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(88, 166, 255, 0.35); }

/* 抽屉打开时，给 body 加滚动锁，避免抽屉背后内容跟随手指滚动 */
body.nav-drawer-open { overflow: hidden; }
/* 深色下抽屉需用次背景（更深一档），与主背景形成"浮起"层级 */
[data-theme="dark"] .nav-drawer {
    background: var(--bg-secondary);
}

.theme-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    /* 防止窄屏下被压成椭圆/触发内部 SVG 错位 */
    flex-shrink: 0;
}
.theme-btn:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.theme-btn svg { width: 16px; height: 16px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* 主题按钮 hover：图标旋转 180°（reduced-motion 下自动停） */
.theme-btn:hover svg { transform: rotate(180deg); }

/* ========== 通用按钮组件（导航"进入系统"、落地页 CTA、下载按钮等都基于此） ========== */
/* 从 index.html 迁出：跨页共用一套蓝渐变按钮，避免 skills 等页出现"无样式 a 标签"的回退样式。
   命名沿用 .btn / .btn-primary / .btn-ghost，含义与首页一致：实色主按钮 / 描边次按钮。 */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), #3b82f6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(88, 166, 255, 0.35); }
/* 导航栏内 .nav-links a:hover 优先级 (0,2,1) 会覆盖按钮白字，
   此处用 .nav-links .btn-primary:hover (0,3,0) 强制保证主按钮文字始终为白色 */
.nav-links .btn-primary,
.nav-links .btn-primary:hover { color: #fff; white-space: nowrap; }
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.btn-ghost:hover { background: var(--hover-bg); color: var(--text-primary); }

/* 导航栏：滚动后加深背景（由 JS 切换 .scrolled） */
.navbar.scrolled {
    /* 浅色下用 92% 半透明（隐约透出底色），深色下需 100% 不透明才能真正"加深"，
       否则 color-mix 与主背景同色等于透明。两种模式分别给一个值。 */
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
    box-shadow: 0 1px 12px var(--shadow-color);
}
[data-theme="dark"] .navbar.scrolled {
    background: var(--bg-primary);                  /* 深色下完全不透明，避免与主背景同色"消失" */
}

/* ========== 锚点偏移 ========== */
/* 导航栏 position: fixed 高度 56px，锚点跳转后目标 section 顶部会被遮住。
   scroll-margin-top 给所有带 id 的 section 在锚点定位时预留出导航栏高度 + 8px 呼吸位。
   同步给 .scene 等非 section 元素加一份，覆盖无 id 容器仍以"父 section id"为锚的场景。 */
section[id],
.scene[id] {
    scroll-margin-top: 64px;
}

/* ========== 站脚（统一含品牌 / 免责声明 / 备案号） ========== */
.site-footer {
    border-top: 1px solid var(--border-color);
    padding: 32px 0;
    text-align: center;
}
.site-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}
.site-footer-brand {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
/* 页脚辅助链接：紧凑、低饱和，与品牌/免责声明区隔开 */
.site-footer-links {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 6px;
}
.site-footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
    margin: 0 0.5rem;
}
.site-footer-links a:first-child { margin-left: 0; }
.site-footer-links a:last-child { margin-right: 0; }
.site-footer-links a:hover { color: var(--accent-blue); }
.site-footer-disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
/* 备案号：与免责同字号、同色，左侧盾牌图标（无图标时降级为纯文字） */
.site-footer-beian {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.site-footer-beian a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}
.site-footer-beian a:hover { color: var(--accent-blue); }
.site-footer-beian-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* ========== 通用滚动条 ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ========== 响应式（仅公共 navbar；页面专属布局在各页 CSS 处理） ========== */
@media (max-width: 680px) {
    .navbar-inner { padding: 0 14px; }
    /* 移动端把抽屉外层打开（默认 display:none，桌面端完全不渲染） */
    .nav-drawer { display: block; }
    /* 移动端隐藏桌面锚点（避免挤压），统一收纳进抽屉；保留主题 + 主题按钮 + 汉堡 */
    .navbar-inner .nav-anchor { display: none; }
    .navbar-inner .nav-cta { display: none; }
    .nav-burger { display: inline-flex; }
    .nav-links { gap: 8px; }
    .nav-links > * { flex-shrink: 0; white-space: nowrap; }
}

/* 极窄屏（<380px，小屏安卓机）：再压一点汉堡按钮尺寸 */
@media (max-width: 380px) {
    .nav-burger { width: 30px; height: 30px; }
}

/* ========== 无障碍：尊重 prefers-reduced-motion，关闭导航装饰动效 ==========
   此处仅处理全站共享导航组件（brand-dot 呼吸 / theme-btn 旋转），
   覆盖 skills / leaderboard 等不加载 landing.css 的页面；landing 专属动效在 landing.css 自行处理。 */
@media (prefers-reduced-motion: reduce) {
    .brand-dot,
    .theme-btn svg {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}