/* ============================================================
   琉星羽 · 科技化叠加层（Tech / HUD 工业风）
   参照：终末地官网 —— 去饱和暗底 + 单一强调色 + 工业 HUD 图层 + 克制动效
   加载顺序：须置于 components / anim / 3d-language 之后（本层在 <head> 末位链接）
   设计约束（源自门禁 verify_sim）：
     feature-card / cap-col / cap-card / brand-card / open-col 已占用 ::before/::after，
     本层对这五类卡只用 background / border / box-shadow，绝不新增伪元素。
   红线：绝不触碰 --color-up / --color-down（红涨绿跌，价值优先于仓位语义）。
   ============================================================ */

/* ---------- 0) 设计令牌覆写（在 tokens.css 之后生效） ---------- */
:root {
  /* 去饱和、偏冷的近黑底，单一强调色更跳 */
  --color-bg: #06090f;
  --color-bg-2: #0a0e16;
  --color-surface: #0d121c;
  --color-surface-2: #121826;
  --color-text: #e8edf4;
  --color-muted: #8794a8;
  /* 品牌琉璃紫 —— 提亮成更"电"的工业紫，作为全站唯一主强调 */
  --color-accent: #a99cff;
  --color-accent-strong: #7b6cff;
  /* 边框略提亮，HUD 线更清晰 */
  --color-border: rgba(169, 156, 255, 0.16);
  --color-border-strong: rgba(169, 156, 255, 0.34);
  /* 柔润技术面板：科技感来自 HUD 细节 / 扫描线 / 等宽字体 / 终端窗口，
     而非生硬方块 —— 圆角回正，去掉"硬矩形"观感 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* 科技层专用令牌 */
  --tech-line: rgba(169, 156, 255, 0.30);
  --tech-edge: rgba(169, 156, 255, 0.58);
  --tech-grid: rgba(120, 142, 180, 0.045);
  --tech-scan: rgba(169, 156, 255, 0.035);
  --glow-accent: 0 0 40px rgba(123, 108, 255, 0.28);
}

/* ---------- 1) 蓝图网格氛围（覆写 .atmosphere::before，保留其定位/层级） ---------- */
.atmosphere::before {
  background:
    repeating-linear-gradient(0deg, rgba(169, 156, 255, 0.03) 0 1px, transparent 1px 4px),
    linear-gradient(var(--tech-grid) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px) 0 0 / 46px 100%,
    radial-gradient(60rem 40rem at 12% -10%, rgba(169, 156, 255, 0.12), transparent 60%),
    radial-gradient(50rem 42rem at 100% 8%, rgba(217, 180, 92, 0.06), transparent 55%),
    radial-gradient(46rem 36rem at 40% 110%, rgba(169, 156, 255, 0.07), transparent 60%);
}

/* ---------- 2) 章节标题 → HUD 标签 ---------- */
.section-head {
  border-left: 2px solid var(--tech-edge);
  padding-left: var(--space-4);
}
.section-head .kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex; align-items: center;
}
.section-head .kicker::before {
  content: ">";
  margin-right: 0.6ch;
  color: var(--color-accent-strong);
  font-weight: 700;
  letter-spacing: 0;
}
.section-head .kicker::after {
  content: "\258B";
  margin-left: 0.5ch;
  color: var(--color-accent);
  animation: tech-blink 1.1s steps(1, end) infinite;
}

/* ---------- 3) 五类受控卡：仅用 border / box-shadow 做 HUD 框（不动伪元素/背景） ---------- */
.feature-card,
.brand-card,
.open-col,
.cap-col,
.cap-card {
  border: 1px solid var(--tech-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 0 26px rgba(169, 156, 255, 0.05),
    var(--shadow-2);
}
/* 顶部 HUD 高亮边（保留各自特殊配色变体：hero 金边 / paid 金边 / sim·guest 专色） */
.feature-card:not(.hero-card),
.brand-card,
.open-col:not(.paid),
.cap-col,
.cap-card:not(.sim):not(.guest) {
  border-top-color: var(--tech-edge);
}
/* 浅色品牌卡（.light）在暗色科技主题下改为深色面板，避免白卡出戏 */
.brand-card.light {
  background: var(--color-surface);
  border-color: var(--tech-line);
}
.brand-card.light .b-label { color: var(--color-muted); }

/* ---------- 4) 非受控卡 / 面板：可自由加 HUD 边与扫描线 ---------- */
.deck-card {
  border: 1px solid var(--tech-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), var(--shadow-2);
}
.deck-card.top { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), var(--shadow-2), var(--glow-accent); }

.mn-item {
  border: 1px solid var(--tech-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), var(--shadow-1);
}
.mn-item::before {
  background: linear-gradient(180deg, var(--color-accent), rgba(169, 156, 255, 0));
  opacity: 0.5;
}
.mn-item.is-open { box-shadow: inset 0 0 0 1px rgba(169, 156, 255, 0.18), var(--shadow-2); }

.dl-avail-item { border: 1px solid var(--color-border); }
.dl-avail-item.is-ready { border-color: var(--tech-edge); }

/* 手册章节卡扫描线（薄层，叠加在原有渐变之上需保留原背景：此处仅加描边与内辉） */
.mn-panel {
  border: 1px solid var(--color-border);
  border-top-color: var(--tech-line);
}

/* ---------- 5) 按钮：工业面板化（保留既有渐变与扫光，只收角、加 HUD 边与悬停电光） ---------- */
.btn { border-radius: var(--radius-sm); }
.btn-primary {
  border: 1px solid var(--tech-edge);
  box-shadow: 0 0 0 1px rgba(169, 156, 255, 0.18), var(--glow-accent);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 26px rgba(123, 108, 255, 0.42);
}

/* 圆形堆叠控制器 → 工业圆钮 */
.deck-btn {
  border: 1px solid var(--tech-line);
  background: rgba(13, 18, 28, 0.7);
}
.deck-btn:hover {
  background: rgba(123, 108, 255, 0.18);
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 18px rgba(123, 108, 255, 0.3);
}

/* ---------- 6) 顶部导航：更强的 HUD 层次 ---------- */
.site-nav.scrolled {
  background: rgba(6, 9, 15, 0.82);
  border-bottom-color: var(--tech-line);
  box-shadow: 0 10px 30px rgba(3, 5, 10, 0.5);
}
.nav-brand { letter-spacing: 0.1em; }
.nav-links a { letter-spacing: 0.06em; }

/* ---------- 7) 语言切换：分段 HUD 控件 ---------- */
.lang-switch {
  border: 1px solid var(--tech-line);
  background: rgba(13, 18, 28, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.lang-switch a[aria-current="page"] {
  background: linear-gradient(140deg, var(--color-accent), var(--color-accent-strong));
  box-shadow: 0 2px 10px rgba(123, 108, 255, 0.35);
}

/* ---------- 8) 首屏（2D 模式也科技化）：标签 mono + 强调色 ---------- */
.hero-kicker {
  font-family: var(--font-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero-kicker::before { background: var(--color-accent); width: 44px; }
.hero-title .glow {
  background: linear-gradient(120deg, #f2effa 25%, var(--color-accent) 65%, var(--color-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 9) 页脚：HUD 分隔与等宽链接 ---------- */
.footer-bottom { border-top: 1px solid var(--tech-line); }
.footer-links a { letter-spacing: 0.12em; }
.footer-disclaimer { border-top: 1px solid var(--tech-line); }

/* ---------- 10) 市场先生卡（暗标）保持既有金紫质感，仅补一层 HUD 描边 ---------- */
.mm-face { border: 1px solid var(--tech-line); }

/* ---------- 11) 通用：扫描线薄层（用于可安全叠加背景的元素） ---------- */
.brand-card,
.support-wrap {
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--tech-scan) 3px 4px);
}

/* ---------- 12) 克制动效：尊重 reduced-motion（base.css 已处理，这里仅确保扫描线层不闪烁） ---------- */
@media (prefers-reduced-motion: reduce) {
  .atmosphere::before { background-attachment: scroll; }
  .hero-kicker::after,
  .section-head .kicker::after { animation: none; opacity: 1; }
}

/* ---------- 13) 终端风增强 ---------- */
@keyframes tech-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 首屏 kicker 闪烁光标（终端输入感） */
.hero-kicker::after {
  content: "\258B";
  display: inline-block;
  margin-left: 0.5ch;
  color: var(--color-accent);
  animation: tech-blink 1.1s steps(1, end) infinite;
}

/* 导航项 hover 出现终端箭头 */
.nav-links a::before {
  content: "\203A";
  position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--dur-fast) ease-out;
}
.nav-links a:hover::before { opacity: 1; }

/* 按钮：终端取景框角标（四角 L 形），hover 点亮 */
.btn { position: relative; }
.btn::before,
.btn::after {
  content: ""; position: absolute;
  width: 7px; height: 7px;
  border: 1px solid var(--color-accent);
  opacity: 0.45; pointer-events: none;
  transition: opacity var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.btn::before { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.btn::after { bottom: 3px; right: 3px; border-left: 0; border-top: 0; }
.btn:hover::before,
.btn:hover::after { opacity: 1; border-color: var(--color-accent-strong); }

/* 下载按钮：标签前置终端命令提示符（作用于子元素 .btn-lbl，避免与 .btn 角标伪元素冲突） */
.dl-btn .btn-lbl::before {
  content: "$ ";
  font-family: var(--font-mono);
  opacity: 0.7;
  margin-right: 0.15ch;
}

/* 页脚终端状态行 */
.footer-bottom::before {
  content: "user@liuxingyu:~$ status --online";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  opacity: 0.6;
  margin-bottom: 12px;
}

/* ---------- 14) 终端窗口标题栏（仅套在"站点外框容器"，绝不替真实产品窗口外观） ---------- */
/* 演示区：把整段产品演示框成一台终端窗口（内容仍是真实 app，窗口外观不改） */
.sim-root {
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-md);
  background: rgba(6, 9, 15, 0.35);
  padding-top: 36px;
}
.sim-root::before {
  content: "\25CF \25CF \25CF   liuxingyu@sim:~/demo  $";
  position: absolute; top: 0; left: 0; right: 0;
  height: 30px; padding: 0 14px;
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--tech-line);
  background: linear-gradient(180deg, rgba(169, 156, 255, 0.07), transparent);
}

/* 下载区：下载控制台终端窗口 */
.dl-wrap {
  position: relative;
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-md);
  background: rgba(6, 9, 15, 0.35);
  padding: 40px clamp(var(--space-4), 4vw, var(--space-6)) clamp(var(--space-4), 4vw, var(--space-6));
}
.dl-wrap::before {
  content: "\25CF \25CF \25CF   liuxingyu@host:~/download  $";
  position: absolute; top: 0; left: 0; right: 0;
  height: 30px; padding: 0 14px;
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--tech-line);
  background: linear-gradient(180deg, rgba(169, 156, 255, 0.07), transparent);
}

/* ============================================================
   15) 交互精修层（v2 · 2026-09-27）
   目的：把"状态反馈"和"节奏曲线"做成单一来源，更跟手、更自然。
   约束：① 不动语言胶囊（components.css 被 .e2e_nav.js 逐字正则断言）；
         ② 5 类受控卡不新增伪元素；③ 绝不触碰 --color-up / --color-down。
   指针高光走元素自身的 background-image（--mx/--my 由 main.js 写入）⇒ 零伪元素。
   ============================================================ */

/* ---------- 15.0 交互令牌（曲线 + 时长，单源） ---------- */
:root {
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);   /* 按下：干脆到位 */
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);    /* 悬停：顺滑跟随 */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);         /* 离场：快速收束 */
  --dur-press: 110ms;                              /* 按下要快 */
  --dur-hover: 200ms;                              /* 悬停要跟手 */
  --btn-face: rgba(13, 18, 28, 0.72);
  --btn-face-hover: rgba(26, 33, 51, 0.92);
  --btn-sheen: rgba(169, 156, 255, 0.20);
  --btn-ink: #06090f;
  --btn-gold: #e2c178;
  --btn-gold-line: rgba(226, 193, 120, 0.46);
  --btn-gold-sheen: rgba(226, 193, 120, 0.22);
}

/* ---------- 15.1 按钮 · 默认态：石板暗面板 + 指针高光 ---------- */
.btn {
  border-radius: var(--radius-sm);
  border-color: var(--tech-line);
  background-color: var(--btn-face);
  background-image: radial-gradient(130px 64px at var(--mx, 50%) var(--my, 50%), var(--btn-sheen), transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px -12px rgba(0, 0, 0, 0.8);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    filter var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-glide);
}

/* ---------- 15.2 按钮 · 悬停态：抬升 + 边亮 + 柔光 ---------- */
.btn:hover {
  background-color: var(--btn-face-hover);
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 26px -12px rgba(0, 0, 0, 0.8), var(--glow-accent);
  transform: translateY(-2px);
}

/* ---------- 15.3 按钮 · 按下态：明确下沉（快下） ---------- */
.btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px -6px rgba(0, 0, 0, 0.9);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-emphasized);
}

/* ---------- 15.4 按钮 · 键盘焦点：仅在键盘导航时出现 ---------- */
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(123, 108, 255, 0.22), var(--glow-accent);
}

/* ---------- 15.5 按钮 · 禁用态：去光去角标、给出"不可点"的确定性视觉 ---------- */
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35) saturate(0.6);
  transform: none;
  background-color: rgba(13, 18, 28, 0.5);
  background-image: none;
  border-color: rgba(169, 156, 255, 0.10);
  box-shadow: none;
}

/* ---------- 15.6 角标（四角 L 形）：随状态点亮 / 禁用隐去 ---------- */
.btn::before,
.btn::after { transition: opacity var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }
.btn:hover::before,
.btn:hover::after { opacity: 1; }
.btn:active::before,
.btn:active::after { opacity: 1; border-color: #ffffff; }
.btn:disabled::before,
.btn:disabled::after { opacity: 0; }

/* ---------- 15.7 主按钮（电紫渐变）：默认 → 悬停 → 按下 → 禁用 ---------- */
.btn-primary {
  color: var(--btn-ink);
  border-color: rgba(169, 156, 255, 0.55);
  background-color: var(--color-accent-strong);
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.32), transparent 68%),
    linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 58%, #574ad0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -10px 20px -14px rgba(6, 9, 15, 0.9),
    0 10px 26px -12px rgba(123, 108, 255, 0.85),
    var(--glow-accent);
}
.btn-primary:hover {
  border-color: rgba(214, 208, 255, 0.85);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -10px 20px -14px rgba(6, 9, 15, 0.9),
    0 14px 34px -12px rgba(123, 108, 255, 1),
    0 0 34px rgba(123, 108, 255, 0.42);
}
.btn-primary:active {
  filter: brightness(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 2px 10px -4px rgba(6, 9, 15, 0.7),
    0 4px 12px -8px rgba(123, 108, 255, 0.8);
}
.btn-primary::before,
.btn-primary::after { border-color: rgba(255, 255, 255, 0.6); }
.btn-primary:disabled {
  color: rgba(232, 237, 244, 0.6);
  border-color: rgba(169, 156, 255, 0.14);
}

/* ---------- 15.8 金色按钮（赞赏 / 宣传片）：暖金描边 → 悬停点亮 ---------- */
.btn-gold {
  color: var(--btn-gold);
  border-color: var(--btn-gold-line);
  background-color: rgba(226, 193, 120, 0.05);
  background-image: radial-gradient(130px 64px at var(--mx, 50%) var(--my, 50%), var(--btn-gold-sheen), transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px -14px rgba(0, 0, 0, 0.8);
}
.btn-gold:hover {
  color: #f0d79a;
  border-color: var(--btn-gold);
  background-color: rgba(226, 193, 120, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 26px -14px rgba(0, 0, 0, 0.8), var(--glow-gold);
}
.btn-gold:active { color: var(--btn-gold); background-color: rgba(226, 193, 120, 0.16); }
.btn-gold:disabled,
.btn-gold:disabled:hover {
  color: rgba(226, 193, 120, 0.5);
  border-color: rgba(226, 193, 120, 0.16);
  background-color: rgba(13, 18, 28, 0.5);
  background-image: none;
}

/* ---------- 15.9 导航：悬停微光 + 当前版块高亮（滚动触发，见 main.js navspy） ---------- */
.nav-links a { transition: color var(--dur-hover) var(--ease-out); }
.nav-links a.is-current { color: var(--color-text); }
.nav-links a.is-current::after { transform: scaleX(1); }   /* 复用既有下划线 */
.nav-links a.is-current::before { opacity: 0.75; }         /* 复用既有终端箭头 */

/* ---------- 15.10 卡片悬停：仅动边色与内辉（不新增伪元素） ---------- */
.feature-card:hover,
.brand-card:hover,
.open-col:hover,
.cap-col:hover,
.cap-card:hover { border-color: var(--tech-edge); }

/* ---------- 15.11 跨页 View Transition：语言切换由"硬切"改为"软换" ---------- */
/* 导航条已声明 view-transition-name: site-nav ⇒ 保持钉住；这里只让内容层柔和交接。 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--dur-press) var(--ease-exit) both; }
::view-transition-new(root) { animation: vt-in 360ms var(--ease-glide) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 15.12 降级：减少动态时全部静态、零位移 ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-gold {
    transition: color 0.01ms linear, background-color 0.01ms linear, border-color 0.01ms linear,
                box-shadow 0.01ms linear, filter 0.01ms linear, transform 0.01ms linear !important;
    transform: none !important;
  }
  .nav-links a.is-current::after { transform: scaleX(1) !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ---------- 15.13 统一导航主按钮：修正「灰字压在紫底上」的低对比 ---------- */
/* components.css 的 .nav-links > li > a.btn-primary（特异性 0,2,2）压过 .btn-primary（0,1,0），
   导致导航主按钮文字取 .nav-links a 的 muted 色、背景/阴影/过渡也走旧值 ⇒ 观感发灰发淡。
   这里以同等特异性 + 后置（tech.css 在 components.css 之后）统一到新主按钮语言。 */
.nav-links > li > a.btn-primary {
  color: var(--btn-ink);
  border-color: rgba(169, 156, 255, 0.55);
  background-color: var(--color-accent-strong);
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.32), transparent 68%),
    linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 58%, #574ad0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -10px 20px -14px rgba(6, 9, 15, 0.9),
    0 10px 26px -12px rgba(123, 108, 255, 0.85),
    var(--glow-accent);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    filter var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-glide);
}
.nav-links > li > a.btn-primary:hover {
  color: var(--btn-ink);
  border-color: rgba(214, 208, 255, 0.85);
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -10px 20px -14px rgba(6, 9, 15, 0.9),
    0 14px 34px -12px rgba(123, 108, 255, 1),
    0 0 34px rgba(123, 108, 255, 0.42);
}
.nav-links > li > a.btn-primary:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.97);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-emphasized);
}
.nav-links > li > a.btn-primary:disabled,
.nav-links > li > a.btn-primary:disabled:hover {
  color: var(--color-muted);
  filter: grayscale(0.35) saturate(0.6);
  opacity: 0.55;
  transform: none;
  box-shadow: none;
  background-image: none;
  background-color: rgba(13, 18, 28, 0.5);
  border-color: rgba(169, 156, 255, 0.10);
}

/* ---------- 15.14 状态修正 ---------- */
/* hover 的通用底色不得串味到主按钮（.btn:hover 特异性高于 .btn-primary） */
.btn-primary:hover { background-color: var(--color-accent-strong); }
/* 禁用文字中性化：原来的金色/强调色文字在禁用时仍像"可点"，统一压成 muted */
.btn:disabled { color: var(--color-muted); }

/* ============================================================
   16) 配色令牌层（v2 · 2026-09-27）
   背景：全站紫色散落着 9 个"接近但不相等"的字面值（#b7aef8 / #a99cff / #7b6cff /
        #9a8ef5 / #6d5cdd / #574ad0 …），金色也有两个（#d9b45c / #e2c178）
        ⇒ 同一"品牌紫"在不同组件里微妙不一致，长期必然继续漂移。
   做法：把品牌紫（琉璃紫）与星金收敛成两条**有序色阶**；色阶取值 = 现网原值
        ⇒ 视觉零变动，但配色从此单源、可整体调校、可推导 tint/shade。
   红线：不新增/不改动 --color-up / --color-down（红涨绿跌语义）。
   ============================================================ */

:root {
  /* 琉璃紫 · 色阶（400 = 主强调；600 = 强调；800/900 = 按下与深底） */
  --acc-100: #ece7ff;
  --acc-200: #d8cfff;
  --acc-300: #bfb3ff;
  --acc-400: #a99cff;   /* = 现网 --color-accent */
  --acc-500: #8f7dff;
  --acc-600: #7b6cff;   /* = 现网 --color-accent-strong */
  --acc-700: #6353dd;
  --acc-800: #4e40b8;
  --acc-900: #382e8a;

  /* 星金 · 色阶（400 = 品牌金；300 悬停提亮；500 按下压深） */
  --gold-200: #f4e6bd;
  --gold-300: #e9cf90;
  --gold-400: #d9b45c;  /* = 现网 --color-gold */
  --gold-500: #c39a3f;

  /* 品牌别名 → 色阶（值不变，从此单源） */
  --color-accent: var(--acc-400);
  --color-accent-strong: var(--acc-600);
  --color-gold: var(--gold-400);
  --glow-accent: 0 0 40px rgba(123, 108, 255, 0.28);
  --glow-gold: 0 0 48px rgba(217, 180, 92, 0.20);

  /* 按钮 · 取消自造金色与自造紫，全部回到色阶 */
  --btn-gold: var(--gold-400);
  --btn-gold-line: rgba(217, 180, 92, 0.46);
  --btn-gold-sheen: rgba(217, 180, 92, 0.22);
  --btn-ink: #06090f;
  --btn-face: rgba(13, 18, 28, 0.72);
  --btn-face-hover: rgba(26, 33, 51, 0.92);
  --btn-sheen: rgba(169, 156, 255, 0.20);

  /* ★ 主按钮四态色梯：默认(中) → 悬停(提亮) → 按下(压深)，显式可读 */
  /* ★ 亮度区间硬约束：本段所有停靠色与 #06090f 文字对比度必须 ≥4.5:1
     （实测 acc-300=10.5 / acc-400=8.4 / acc-500=6.2 / acc-600=5.2；acc-700 起 3.6 不达标）
     故暗端一律止于 acc-600；"按下变暗"由整段位阶下移 + 内阴影表达，不压暗到读不清。 */
  --pri-rest:   linear-gradient(135deg, var(--acc-300) 0%, var(--acc-500) 58%, var(--acc-600) 100%);
  --pri-hover:  linear-gradient(135deg, var(--acc-200) 0%, var(--acc-300) 58%, var(--acc-500) 100%);
  --pri-active: linear-gradient(135deg, var(--acc-400) 0%, var(--acc-600) 58%, var(--acc-600) 100%);
}

/* ---------- 主按钮：四态色梯（页面内 + 导航内，统一） ---------- */
.btn-primary,
.nav-links > li > a.btn-primary {
  background-color: var(--acc-600);
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 68%),
    var(--pri-rest);
}
.btn-primary:hover,
.nav-links > li > a.btn-primary:hover {
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.20), transparent 68%),
    var(--pri-hover);
}
.btn-primary:active,
.nav-links > li > a.btn-primary:active {
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.10), transparent 68%),
    var(--pri-active);
}
/* 显式色梯接管后，不再需要 filter 改亮度（避免"亮得发白"和不可预期的合成） */
.btn-primary:hover, .btn-primary:active,
.nav-links > li > a.btn-primary:hover, .nav-links > li > a.btn-primary:active { filter: none; }

/* ---------- 金色按钮：统一到星金色阶 ---------- */
.btn-gold {
  color: var(--btn-gold);
  border-color: var(--btn-gold-line);
  background-color: rgba(217, 180, 92, 0.05);
  background-image: radial-gradient(130px 64px at var(--mx, 50%) var(--my, 50%), var(--btn-gold-sheen), transparent 72%);
}
.btn-gold:hover {
  color: var(--gold-300);
  border-color: var(--gold-400);
  background-color: rgba(217, 180, 92, 0.12);
}
.btn-gold:active {
  color: var(--gold-400);
  background-color: rgba(217, 180, 92, 0.17);
  box-shadow: inset 0 2px 8px -4px rgba(6, 9, 15, 0.8), 0 2px 8px -6px rgba(0, 0, 0, 0.9);
}
.btn-gold:disabled,
.btn-gold:disabled:hover {
  color: var(--color-muted);
  border-color: rgba(169, 156, 255, 0.10);
  background-color: rgba(13, 18, 28, 0.5);
  background-image: none;
}

/* ---------- 17) 双强调层次：紫＝交互 / 金＝价值 ---------- */
/* 小节标签（LIVE DEMO / FEATURES / CAPABILITY …）改用星金 ——
   与已有的三处内联金标签（下载/手册/赞赏）统一，形成"金＝标签与价值"的稳定语义；
   品牌紫继续独占交互与结构（卡面/按钮/边线/发光/链接/导航），两层不再互相抢戏。 */
.section-head .kicker { color: var(--gold-300); }          /* #e9cf90 / 深底 13.1:1 AAA */
.section-head .kicker::before { color: var(--gold-400); }  /* 前缀 ">" */
.section-head .kicker::after { color: var(--gold-400); }   /* 终端闪烁光标 */

/* ============================================================
   18) Lens 光学细节层（v1 · 2026-10-14）
   借鉴透镜材质的边缘折射、纸面反光和轻触回弹，沿用本站深色紫金配色。
   只叠加在外框与卡片表面，不改 DOM、组件布局或受控卡伪元素。
   ============================================================ */
html[lang="zh-CN"] {
  --lens-edge: rgba(224, 219, 255, 0.24);
  --lens-edge-hot: rgba(235, 230, 255, 0.42);
  --lens-sheen: rgba(255, 255, 255, 0.055);
  --lens-refraction: rgba(169, 156, 255, 0.09);
  --lens-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 滚动导航成为薄磨砂片；不透明兜底保证旧内核文字仍清晰。 */
html[lang="zh-CN"] #siteNav.scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012) 55%),
    rgba(6, 9, 15, 0.88);
  border-bottom-color: var(--lens-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 34px rgba(3, 5, 10, 0.42);
}

/* 下载与支持区域是主要操作面板，叠一层柔和反光和内沿。 */
html[lang="zh-CN"] .dl-wrap,
html[lang="zh-CN"] .support-wrap {
  border: 1px solid var(--lens-edge);
  border-top-color: var(--lens-edge-hot);
  background-color: rgba(15, 19, 31, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 0 36px rgba(169, 156, 255, 0.035),
    0 22px 56px -38px rgba(0, 0, 0, 0.85);
  transition: border-color var(--dur-hover) var(--lens-ease), box-shadow var(--dur-hover) var(--lens-ease);
}
html[lang="zh-CN"] .dl-wrap::before {
  border-bottom-color: rgba(224, 219, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(169, 156, 255, 0.018));
}
html[lang="zh-CN"] .dl-wrap:focus-within,
html[lang="zh-CN"] .support-wrap:focus-within {
  border-color: var(--lens-edge-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 42px rgba(169, 156, 255, 0.055),
    0 22px 56px -36px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(169, 156, 255, 0.12);
}

/* 卡片只强化顶缘折光，保留每类卡片现有的底色、图层和阴影。 */
html[lang="zh-CN"] .feature-card:not(.hero-card),
html[lang="zh-CN"] .brand-card,
html[lang="zh-CN"] .open-col:not(.paid),
html[lang="zh-CN"] .cap-col,
html[lang="zh-CN"] .cap-card:not(.sim):not(.guest),
html[lang="zh-CN"] .deck-card,
html[lang="zh-CN"] .mn-item {
  border-top-color: var(--lens-edge);
}
html[lang="zh-CN"] .deck-card.top {
  border-top-color: var(--lens-edge-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 28px rgba(169, 156, 255, 0.055),
    var(--shadow-2),
    var(--glow-accent);
}
html[lang="zh-CN"] .mn-item:hover,
html[lang="zh-CN"] .mn-item:focus-within {
  border-color: var(--lens-edge-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 28px rgba(169, 156, 255, 0.04),
    var(--shadow-2);
}

/* 键盘落点像一圈透光的刻线，继续沿用品牌紫作为操作提示。 */
html[lang="zh-CN"] #siteNav a:focus-visible,
html[lang="zh-CN"] .dl-wrap :focus-visible,
html[lang="zh-CN"] .support-wrap :focus-visible,
html[lang="zh-CN"] .mn-head:focus-visible {
  outline: 2px solid var(--acc-300);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(123, 108, 255, 0.16);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[lang="zh-CN"] #siteNav.scrolled {
    background-color: rgba(6, 9, 15, 0.68);
    -webkit-backdrop-filter: blur(20px) saturate(1.22);
    backdrop-filter: blur(20px) saturate(1.22);
  }
  html[lang="zh-CN"] .dl-wrap,
  html[lang="zh-CN"] .support-wrap {
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[lang="zh-CN"] .dl-wrap,
  html[lang="zh-CN"] .support-wrap {
    transition: none;
  }
}

/* 窄屏：保留透镜边缘高光，以不透明表面代替大面积背景模糊。 */
@media (max-width: 900px) {
  html[lang="zh-CN"] #siteNav.scrolled {
    background-color: rgba(6, 9, 15, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[lang="zh-CN"] .dl-wrap,
  html[lang="zh-CN"] .support-wrap {
    background-color: rgba(15, 19, 31, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      inset 0 0 24px rgba(169, 156, 255, 0.03),
      0 14px 36px -30px rgba(0, 0, 0, 0.9);
  }
}

/* 触屏：避免点击后 hover 卡住；保留明确的按压反馈，不触发鼠标磁吸。 */
@media (hover: none) and (pointer: coarse) {
  html[lang="zh-CN"] .btn,
  html[lang="zh-CN"] .nav-links > li > a.btn-primary {
    -webkit-tap-highlight-color: transparent;
  }
  html[lang="zh-CN"] .btn:hover,
  html[lang="zh-CN"] .nav-links > li > a.btn-primary:hover {
    transform: none;
  }
  html[lang="zh-CN"] .btn-primary:hover,
  html[lang="zh-CN"] .nav-links > li > a.btn-primary:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 6px 18px -12px rgba(123, 108, 255, 0.62);
  }
  html[lang="zh-CN"] .btn-gold:hover { box-shadow: none; }
  html[lang="zh-CN"] .btn:active,
  html[lang="zh-CN"] .nav-links > li > a.btn-primary:active {
    transform: scale(0.985);
    transition-duration: 110ms;
  }
}

/* Lens v2：把按钮做成清晰的玻璃控制面，保持紫金配色与现有角标。 */
html[lang="zh-CN"] {
  --lens-control-radius: 10px;
}

html[lang="zh-CN"] .btn,
html[lang="zh-CN"] .nav-links > li > a.btn-primary {
  border-radius: var(--lens-control-radius);
}

html[lang="zh-CN"] .btn:not(.btn-primary):not(.btn-gold) {
  border-color: rgba(224, 219, 255, 0.28);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 62%),
    radial-gradient(130px 64px at var(--mx, 50%) var(--my, 50%), var(--btn-sheen), transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 7px 20px -15px rgba(0, 0, 0, 0.9);
}

html[lang="zh-CN"] .btn:not(.btn-primary):not(.btn-gold):hover {
  border-color: var(--lens-edge-hot);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 9px 24px -15px rgba(0, 0, 0, 0.9),
    0 0 22px -16px rgba(169, 156, 255, 0.85);
}

html[lang="zh-CN"] .btn-primary,
html[lang="zh-CN"] .nav-links > li > a.btn-primary {
  border-color: rgba(235, 230, 255, 0.58);
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 58%),
    var(--pri-rest);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -8px 18px -14px rgba(6, 9, 15, 0.82),
    0 8px 22px -13px rgba(123, 108, 255, 0.78);
}

html[lang="zh-CN"] .btn-primary:hover,
html[lang="zh-CN"] .nav-links > li > a.btn-primary:hover {
  border-color: rgba(245, 242, 255, 0.78);
  transform: translateY(-1px);
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.19), transparent 58%),
    var(--pri-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -8px 18px -14px rgba(6, 9, 15, 0.78),
    0 10px 26px -13px rgba(123, 108, 255, 0.9);
}

html[lang="zh-CN"] .btn-primary:active,
html[lang="zh-CN"] .nav-links > li > a.btn-primary:active {
  transform: translateY(1px) scale(0.985);
  background-image:
    radial-gradient(150px 74px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.10), transparent 68%),
    var(--pri-active);
  box-shadow:
    inset 0 2px 9px -4px rgba(6, 9, 15, 0.72),
    0 3px 10px -8px rgba(123, 108, 255, 0.72);
}

html[lang="zh-CN"] .btn-gold {
  border-top-color: rgba(244, 230, 189, 0.6);
  background-image:
    linear-gradient(180deg, rgba(244, 230, 189, 0.07), transparent 62%),
    radial-gradient(130px 64px at var(--mx, 50%) var(--my, 50%), var(--btn-gold-sheen), transparent 72%);
}

html[lang="zh-CN"] .btn-gold:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(244, 230, 189, 0.16),
    0 8px 22px -15px rgba(0, 0, 0, 0.9),
    0 0 22px -16px rgba(217, 180, 92, 0.8);
}

html[lang="zh-CN"] .btn:focus-visible,
html[lang="zh-CN"] .nav-links > li > a.btn-primary:focus-visible {
  outline: 2px solid var(--acc-200);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(123, 108, 255, 0.18), 0 0 24px -12px rgba(169, 156, 255, 0.8);
}

html[lang="zh-CN"] .btn:disabled,
html[lang="zh-CN"] .btn:disabled:hover,
html[lang="zh-CN"] .btn:disabled:active {
  color: var(--color-muted);
  border-color: rgba(169, 156, 255, 0.10);
  background-color: rgba(13, 18, 28, 0.5);
  background-image: none;
  box-shadow: none;
  filter: grayscale(0.35) saturate(0.6);
  transform: none;
}

html[lang="zh-CN"] #dlBtn:hover .ico { transform: translateY(-1px); }

@media (hover: none) and (pointer: coarse) {
  html[lang="zh-CN"] .btn:not(.btn-primary):not(.btn-gold):not(:disabled):hover {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.075),
      0 7px 20px -15px rgba(0, 0, 0, 0.9);
  }
  html[lang="zh-CN"] .btn-primary:not(:disabled):hover,
  html[lang="zh-CN"] .nav-links > li > a.btn-primary:not(:disabled):hover {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -8px 18px -14px rgba(6, 9, 15, 0.82),
      0 8px 22px -13px rgba(123, 108, 255, 0.78);
  }
  html[lang="zh-CN"] .btn-gold:not(:disabled):hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(244, 230, 189, 0.08);
  }
  html[lang="zh-CN"] .btn:not(:disabled):active,
  html[lang="zh-CN"] .nav-links > li > a.btn-primary:active {
    transform: scale(0.985);
  }
}