/* ============================================================
   base.css · 关键首屏 CSS（第 5 批 T05 自 style.css 拆出）
   ------------------------------------------------------------
   内容 = L0 变量层（暗/亮全量表 + 原始 token）+ reset + 字阶 +
   .container + 导航（含抽屉）/账号菜单 + Hero + .section 骨架 +
   按钮/输入基础 + .reveal + #backTop + 全局 reduce 双通道。
   目标：与 a11y.css 合计 ≤60,000B，作为仅有的 2 个阻塞样式表。
   真值来源：本文件 :root 表为唯一样式真值；theme.js 只覆写
   6 个差异变量（--bg/--bg-alt/--text/--text-dim/--accent/--accent2）。
   高对比度覆写层在 a11y.css（必须在本文之后加载）。
   ============================================================ */

/* ============================================================
   科技风个人站 · 全局样式
   主题：深色霓虹（默认）/ 浅色（可切换，存 localStorage）
   ============================================================ */

/* ============================================================
   L0 变量层（第 5 批 R29 设计 token · 唯一真值来源）
   默认主题 graphite「钢墨」：中性底 + 单一信号色 #37d6a8。
   theme.js 只覆写 6 个差异变量（--bg/--bg-alt/--text/--text-dim/
   --accent/--accent2）；其余全部以本表为准。
   ⚠️ 新增色彩/线/阴影变量必须同步 a11y.css 的 !important 块（R21 红线）。
   ============================================================ */
:root[data-theme="dark"] {
  --bg: #0b0d0e;                       /* 底：去掉蓝调，中性近黑 */
  --bg-alt: #111516;                   /* 交替区块面 */
  --bg2: #14181a;                      /* C2 补齐：原仅 theme.js 注入 */
  --panel: #16191b;                    /* 浮面（不透明，去半透明叠层） */
  --panel-2: #1b1f21;                  /* 内嵌层 */
  --card: rgba(255, 255, 255, 0.03);   /* 卡片底（保留半透明，仅 1 层） */
  --glass: rgba(255, 255, 255, 0.06);  /* C2 补齐；当前无消费点，兼容外部主题 */
  --text: #e7ebec;                     /* 正文，对 #0b0d0e ≈ 14.6:1 */
  --text-dim: #9da7ab;                 /* 次要文字 ≈ 7.7:1 */
  --dim: #9da7ab;                      /* C2 补齐（62 处消费）；值对齐 --text-dim，待后续批次下线 */
  --accent: #37d6a8;                   /* 唯一信号色（U1：青绿） */
  --accent2: #1f6f5c;                  /* 语义降级：仅 active 点/次要标记，禁止渐变 */
  --border: #232a2d;                   /* 控件描边 */
  --card-border: #232a2d;              /* 与 --border 同值（语义合并过渡态） */
  --line: #1e2426;                     /* 1px 分隔线（新主用法，替代阴影分层） */
  --line-strong: #2f3739;              /* 强调分隔线 / 表头 */
  --hairline: #1e2426;                 /* C2 补齐，= --line */
  --nav-bg: rgba(11, 13, 14, 0.92);    /* 导航条：提高不透明度补偿 blur 半径下降 */
  --glow: none;                        /* R29：发光全面退役，使用点逐个处置 */
  --grid-line: #14181a;                /* 刻度网格线：弱化为"纸纹" */
  --code-bg: #14181a;
  --code-text: #cfd6d7;                /* C2 补齐 */
  --hero-grad: none;                   /* R29：Hero 改纯色 */
  --shadow-strong: 0 20px 48px rgba(0, 0, 0, 0.55); /* 仅模态层（L4） */
  --danger: #ff5470;
  --ok: #37d6a8;                       /* U2：与信号色同色 */
  --warn: #e0a33e;                     /* 降饱和，避免与信号色抢眼 */
}
:root[data-theme="light"] {
  --bg: #fbfbfa;
  --bg-alt: #ffffff;
  --bg2: #f5f6f5;                      /* C2 补齐 */
  --panel: #ffffff;
  --panel-2: #f2f4f3;
  --card: rgba(255, 255, 255, 0.9);
  --glass: rgba(255, 255, 255, 0.8);   /* C2 补齐 */
  --text: #14171a;                     /* ≈ 16:1 */
  --text-dim: #55606a;                 /* ≈ 6.4:1 */
  --dim: #55606a;                      /* C2 补齐 */
  --accent: #0a7c60;                   /* 对白底 ≈ 5.2:1（≥4.5） */
  --accent2: #14574a;
  --border: #dfe3e2;
  --card-border: #dfe3e2;
  --line: #eaedec;
  --line-strong: #cbd1d0;
  --hairline: #eaedec;                 /* C2 补齐 */
  --nav-bg: rgba(251, 251, 250, 0.94);
  --glow: none;
  --grid-line: #f0f2f1;
  --code-bg: #f2f4f3;
  --code-text: #2a3134;                /* C2 补齐 */
  --hero-grad: none;
  --shadow-strong: 0 16px 40px rgba(20, 30, 40, 0.14);
  --danger: #d92c4c;
  --ok: #0f9d58;
  --warn: #8a5a00;                     /* 亮底需更深才能过 4.5:1 */
}
/* ---------- 原始层 token（与主题无关，全站通用）---------- */
:root {
  --font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: Consolas, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  /* 字阶 7 档（R29-3，§3.4） */
  --fs-display: clamp(28px, 4.6vw, 44px);
  --fs-h2: clamp(20px, 2.2vw, 26px);
  --fs-h3: 17px;
  --fs-body: clamp(15px, 0.4vw + 14px, 16px);
  --fs-sm: 14px;
  --fs-meta: 13px;
  --fs-micro: 12px;
  /* 字阶（R29-3：7 档，≤8 达标） */
  --fs-display: clamp(28px, 4.6vw, 44px);
  --fs-h2: clamp(20px, 2.2vw, 26px);
  --fs-h3: 17px;
  --fs-body: clamp(15px, 0.4vw + 14px, 16px);
  --fs-sm: 14px;
  --fs-meta: 13px;
  --fs-micro: 12px;
  /* 间距刻度（R29-5：4px 基准） */
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  /* 圆角三级（R29：20 种 → 3 种） */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-pill: 999px;
  /* 动效（R30：120–200ms；reduce 由双通道块压到 0.01ms） */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-modal: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* 阴影两类（R29：119 处 → 只留 hover/modal） */
  --shadow-hover: 0 1px 0 var(--line), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-modal: var(--shadow-strong);
  /* z-index 层级表（R29） */
  --z-bg: -2;
  --z-grid: -1;
  --z-content: 0;
  --z-raised: 20;
  --z-menu: 90;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-reader: 400;
  --z-cmdk: 500;
  --z-fab: 900;
  --z-fab-panel: 901;
  --z-player: 9990;
  --z-toast: 9999;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  /* 第 5 批 R30：主题切换改为同步换变量，0 过渡（原 transition: background .4s, color .4s 已删，
     过渡绘制属性会在切换时触发全页重绘） */
}
a { color: inherit; text-decoration: none; }
time { font-family: var(--font-mono); } /* R29-3：数字/时间戳一律等宽 */
/* R22-4：零横向滚动——长 URL/代码/长文件名可断行，flex/grid 子项可收缩 */
pre, code, kbd, samp, .mono { overflow-wrap: anywhere; min-width: 0; }
img, video, table { max-width: 100%; }
li { list-style: none; }
code {
  font-family: var(--font-mono);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 0.9em;
}

.container { width: min(1120px, 92%); margin: 0 auto; }

/* ---------- 背景层 ---------- */
#particles { position: fixed; inset: 0; z-index: -2; }
.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
}


/* ---------- 导航 ---------- */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
#header.scrolled { border-bottom-color: var(--card-border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-weight: 700; font-size: 18px; letter-spacing: 1px; }
.logo-bracket { color: var(--accent); }
.logo-dot { color: var(--accent2); }
.nav-links { display: flex; gap: 6px; }
.nav-link {
  position: relative; padding: 8px 14px; font-size: 14px;
  color: var(--text-dim); transition: color 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius); cursor: pointer; /* R22-3 命中区 */
  background: var(--card); color: var(--text);
  border: 1px solid var(--card-border);
  font-size: 16px; transition: color 0.3s, border-color 0.3s, transform 0.3s;
}@media (hover: hover) and (pointer: fine) {

.icon-btn:hover{ border-color: var(--accent); color: var(--accent); }
}
.menu-btn { display: none; }

/* ---------- 账号中心下拉：个人中心 / 上传 / 资源 / 后台 / 会话合并为右上角一处 ---------- */
.nav-acct { position: relative; display: flex; }
.acct-trigger { position: relative; overflow: hidden; }
.acct-trigger::after {
  content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 2px var(--bg);
  transition: background .3s;
}
.acct-trigger.logged::after { background: var(--ok); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--ok); }
.acct-trigger[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.acct-trigger[aria-expanded="true"]::before {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px;
  background: var(--accent);
}

.acct-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 90;
  width: min(296px, calc(100vw - 22px)); padding: 12px; border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 26px),
    color-mix(in srgb, var(--bg-alt) 94%, transparent);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-strong);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-acct.open .acct-menu { opacity: 1; visibility: visible; transform: none; }
.acct-corner { position: absolute; width: 11px; height: 11px; pointer-events: none; opacity: .8; }
.acct-corner-tl { top: 6px; left: 6px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); border-top-left-radius: 6px; }
.acct-corner-br { bottom: 6px; right: 6px; border-bottom: 1px solid var(--accent2); border-right: 1px solid var(--accent2); border-bottom-right-radius: 6px; }

.acct-id { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding-bottom: 11px; margin-bottom: 9px; border-bottom: 1px dashed var(--border); }
.acct-orb {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--code-bg); border: 1px solid var(--card-border);
}
.acct-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--accent) 85%, transparent));
  -webkit-mask: radial-gradient(closest-side, transparent 0 76%, #000 79%);
  mask: radial-gradient(closest-side, transparent 0 76%, #000 79%);
  animation: acctSpin 5.5s linear infinite;
}
.acct-letter { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--accent); letter-spacing: -1px; }
.acct-orb img { width: 100%; height: 100%; object-fit: cover; display: none; }
.acct-orb[data-avatar="1"] img { display: block; }
.acct-orb[data-avatar="1"] .acct-letter { display: none; }
.acct-name { display: block; font-size: 13.5px; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.acct-mid { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.acct-led { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); transition: background .3s; }
.acct-led[data-state="on"] { background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 70%, transparent); }
.acct-led[data-state="checking"] { background: var(--warn); animation: acctBlink .9s ease-in-out infinite; }

.acct-row {
  position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px; margin: 2px 0; border-radius: var(--radius); cursor: pointer; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--text); font: inherit;
  transition: background .18s, border-color .18s, transform .18s;
}
.acct-row:hover, .acct-row:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); transform: translateX(2px); outline: none; }
.acct-row b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.acct-row small { display: block; font-size: 11px; color: var(--text-dim); }
.acct-ico { display: grid; place-items: center; width: 22px; font-size: 14px; }
.acct-arrow { color: var(--text-dim); font-size: 15px; transition: color .18s, transform .18s; }
.acct-row:hover .acct-arrow, .acct-row:focus-visible .acct-arrow { color: var(--accent); transform: translateX(2px); }
.acct-row.danger:hover, .acct-row.danger:focus-visible { background: color-mix(in srgb, var(--danger) 11%, transparent); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.acct-row.danger:hover b, .acct-row.danger:focus-visible b, .acct-row.danger:hover .acct-arrow { color: var(--danger); }
.acct-row.primary { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.acct-row[data-busy="1"] { pointer-events: none; opacity: .55; }
.acct-row[data-busy="1"] .acct-arrow { color: var(--accent); animation: acctBlink .8s ease-in-out infinite; }
.acct-div { height: 1px; margin: 8px 4px; background: var(--border); }
.acct-tip { margin-top: 6px; font-size: 11px; color: var(--text-dim); }
.acct-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--text-dim); letter-spacing: .6px; }
@keyframes acctSpin { to { transform: rotate(360deg); } }
@keyframes acctBlink { 50% { opacity: .25; } }
@media (max-width: 768px) {
  .acct-menu { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; }
  .acct-row { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-menu, .acct-row, .acct-arrow { transition: none; }
  .acct-orb::after { animation: none; }
  .acct-led[data-state="checking"], .acct-row[data-busy="1"] .acct-arrow { animation: none; }
}
/* R21 双通道：站内「减少动效」开关开启时等效系统偏好（CSS 无 OR，两通道并列） */
html[data-a11y-motion="0"] .acct-menu, html[data-a11y-motion="0"] .acct-row, html[data-a11y-motion="0"] .acct-arrow { transition: none; }
html[data-a11y-motion="0"] .acct-orb::after { animation: none; }
html[data-a11y-motion="0"] .acct-led[data-state="checking"], html[data-a11y-motion="0"] .acct-row[data-busy="1"] .acct-arrow { animation: none; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: center; position: relative;
  padding-top: 64px;
}
.hero-greet { color: var(--accent); font-family: var(--font-mono); letter-spacing: 2px; }
.hero-name { font-size: var(--fs-display); line-height: 1.15; letter-spacing: -0.02em; margin: 12px 0; }
.hero-en { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--text-dim); }
/* .grad-text 已删除（R29-2：去渐变文字，Hero 改单信号色 + 字阶） */
.hero-type {
  font-family: var(--font-mono);
  font-size: var(--fs-h2); color: var(--text-dim); min-height: 1.6em;
}
#typewriter { color: var(--accent); }
.cursor { animation: blink 1s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.hero-desc { margin: 18px 0 28px; max-width: 560px; color: var(--text-dim); line-height: 1.8; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: clamp(24px, 5vw, 64px); margin-top: 56px; flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 800;
  color: var(--accent); /* R29-2：渐变文字 → 单信号色 */
}
.stat-num::after { content: "+"; font-size: 0.6em; }
.stat-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; padding: 12px 30px; border-radius: var(--radius);
  font-size: var(--fs-body); transition: transform 0.3s, color 0.3s, border-color 0.3s; position: relative; overflow: hidden;
}
.btn-primary {
  background: var(--accent);
  color: #fff; font-weight: 600;
}@media (hover: hover) and (pointer: fine) {

.btn-primary:hover{ transform: translateY(-2px); }
}
.btn-ghost {
  border: 1px solid var(--accent); color: var(--accent);
}@media (hover: hover) and (pointer: fine) {

.btn-ghost:hover{ background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-2px); }
}

/* ---------- 滚动指示 ---------- */
.scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--text-dim); border-radius: var(--radius-pill);
}
.scroll-hint span {
  position: absolute; top: 8px; left: 50%; width: 4px; height: 8px;
  background: var(--accent); border-radius: var(--radius-pill); transform: translateX(-50%);
  animation: hint 1.6s infinite;
}
@keyframes hint { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 24px; } }

/* ---------- 通用 Section ---------- */
.section { padding: var(--space-16) 0; }
.section-alt { border-top: 1px solid var(--line); } /* R29-2：底色分层 → 刻度分隔线 */
.section-title { font-size: var(--fs-h2); margin-bottom: var(--space-8); display: flex; align-items: baseline; gap: 14px; }
.sec-index {
  font-family: var(--font-mono); font-size: 0.6em;
  color: var(--accent); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 4px 10px;
}
.section-title em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--text-dim); }

/* ---------- 玻璃卡片 / 占位卡 ---------- */
.glass {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.todo-card {
  padding: 48px 24px; text-align: center; color: var(--text-dim);
  font-size: 15px; line-height: 2;
}

/* ---------- 关于我 ---------- */
.about-grid {
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start;
}
.about-avatar { text-align: center; }
.avatar-hex {
  width: 200px; height: 200px; margin: 0 auto 24px; position: relative;
  display: grid; place-items: center;
}
.avatar-hex::before {
  content: ""; position: absolute; inset: -6px;
  background: var(--accent); /* R29-2：双色光环 → 单信号色 */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: spin 6s linear infinite; filter: blur(6px); opacity: 0.7;
}
.avatar-inner {
  width: 190px; height: 190px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--bg-alt);
  font-size: 56px; font-weight: 800;
  color: var(--accent); /* R29-2：去渐变底与文字辉光 */
}
.avatar-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.about-text { padding: 36px; line-height: 1.9; }
.about-text p { margin-bottom: 14px; color: var(--text-dim); }
.about-text strong { color: var(--text); }
.about-info { margin: 18px 0 22px; display: grid; gap: 10px; }
.about-info li { display: flex; gap: 16px; align-items: center; font-size: 15px; }
.about-info li span {
  flex: 0 0 64px; text-align: center; font-size: 12px; color: var(--accent);
  border: 1px solid var(--card-border); border-radius: 6px; padding: 2px 0;
}
.dot-online {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 10px #22c55e; animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }
.skill-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

/* ---------- 通用 chip 标签 ---------- */
.chip {
  font-size: 13px; padding: 5px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text-dim);
  transition: color 0.3s, border-color 0.3s, transform 0.3s;
}@media (hover: hover) and (pointer: fine) {

.chip:hover, .chip.glow:hover{
  color: var(--accent); border-color: var(--accent);
  transform: translateY(-2px); cursor: default;
}
}

/* ---------- 资源库占位 ---------- */
.vault-preview { padding: 40px; text-align: center; }
.vault-title { font-size: 18px; margin-bottom: 20px; }
.vault-features { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; }
.vault-note { font-size: 13px; color: var(--text-dim); line-height: 2; }
.vault-cta { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.vault-mini { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.vault-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex: 0 1 280px; text-align: left;
}
.vault-item span { font-size: 28px; }
.vault-item b { font-size: 14px; display: block; }
.vault-item i { font-style: normal; font-size: 11px; color: var(--text-dim); }
.vault-preview .btn { margin-top: 4px; }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--card-border); padding: 32px 0; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text-dim); }@media (hover: hover) and (pointer: fine) {

.footer-links a:hover{ color: var(--accent); }
}

/* ---------- 返回顶部 ---------- */
.back-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: var(--radius); font-size: 18px;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s; background: var(--nav-bg);
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }

/* ---------- 滚动显现动画（第 5 批 R30：28px/0.7s → 8px/180ms 上浮淡入）---------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base, 180ms) var(--ease, ease), transform var(--dur-base, 180ms) var(--ease, ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .menu-btn { display: block; }
  .nav-links {
    position: fixed; top: 64px; right: 0; width: min(320px, 86vw); /* §7.2：9 项导航更宽 */
    height: calc(100vh - 64px);
    flex-direction: column; gap: 0; padding: 20px;
    background: var(--nav-bg); backdrop-filter: blur(8px);
    border-left: 1px solid var(--card-border);
    transform: translateX(100%); transition: transform var(--dur-base) var(--ease);
  }
  /* §7.2：抽屉遮罩（--z-drawer 下层 = header 之下、内容之上）；点击关闭，背景保持可滚 */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
  }
  .nav-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-link { min-height: 44px; } /* R22-3 */
  .nav-links.open { transform: none; }
  .nav-link { display: block; padding: 14px; font-size: 16px; }
  .about-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 28px; }
}


/* 系统开启「减弱动态效果」时全部降级 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* R21 双通道：站内「减少动效」开关开启时同上 */
html[data-a11y-motion="0"] { scroll-behavior: auto; }
html[data-a11y-motion="0"] *, html[data-a11y-motion="0"] *::before, html[data-a11y-motion="0"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}