/* ==========================================================================
   Verity 统一设计系统  ·  verity-design-system.css
   替代：tokens.css + theme-cinema.css + ui-system.css + console-ui.css

   ── 架构说明 ────────────────────────────────────────────────────────────
   本文件是四层 !important 混战（theme-cinema 铺光晕 → ui-system 反向压平
   → console-ui 再压一层）的唯一替代品。核心约定：

     1. 零 !important —— 仅两处规范认可的例外，且均与视觉无关：
          · [hidden]          必须压过 display:flex/grid，否则隐藏失效
          · prefers-reduced-motion  必须压过所有过渡，否则无障碍失效
        除此之外任何地方出现 !important 都视为缺陷。
     2. 令牌双层：原始层（--n-*、--brand-*）→ 语义层（--c-*）。
        页面只允许引用语义层；切暗色时只重定义语义层，原始层不动。
     3. 别名分组用 :where() 把特异性压到 0，页面级微调永远能覆盖。
     4. 组件 API 沿用既有类名（.cfg-card / .btn-primary / .dash-wrap …），
        因此切流不需要改页面标记，只需换样式表。
     5. 末尾两节是「旧代码兼容例外」，专为仍在页面内联 <style> 里的遗留写法而设：
          · §23   .empty 的一物二用（空状态容器 / 「无值」修饰符）
          · §24   页面内联样式的接管层（旧 console-ui.css 的 !important 能力等价物）
        它们用 :not() / body 前缀把特异性提到页面内联之上，因此同样零 !important。
        各页内联块清理完成后，这两节可整段删除。

   ── 切流方式（可回滚）────────────────────────────────────────────────
   五个样式表都位于站点根目录，控制台页以 ../ 相对引用。
   _head.php 原本加载 5 条 <link>，现已收敛为 2 条：

       <link rel="stylesheet" href="../style.css">                 ← 保留（落地页共用，暂不动）
       <link rel="stylesheet" href="../verity-design-system.css">  ← 本文件

   被移除的四条：
       ../tokens.css   ../theme-cinema.css   ../ui-system.css   ../console-ui.css
   这四个文件仍保留在服务器上，回滚即把 <link> 换回。

   注意：style.css 仍在加载，且它引用了 56 个旧令牌名（--bg-base /
   --text-primary / --accent / --shadow-lg …）。本文件 §2.5 的别名层
   负责把这些旧名映射到新语义层，因此别名层不可删除。

   ── 设计依据 ────────────────────────────────────────────────────────────
   见项目根 .impeccable.md：泛用户为主 · 品牌现代感 · 全站统一。
   ========================================================================== */

/* ==========================================================================
   1 · 原始令牌（Primitives）
   中性色刻意带蓝倾向（--n-* 不是纯灰），使整体与品牌蓝同源。
   ========================================================================== */

:root {
  /* 品牌蓝阶 */
  --brand-50:  #eff5fe;
  --brand-100: #dce9fb;
  --brand-200: #bcd4f7;
  --brand-300: #8fb6f4;
  --brand-400: #5b93e8;
  --brand-500: #1f63d6;   /* 品牌主色 */
  --brand-600: #15489b;
  --brand-700: #123f8a;
  --brand-800: #0e356f;
  --brand-900: #0a2b5c;

  /* 中性阶 · 带蓝倾向 */
  --n-0:   #ffffff;
  --n-25:  #fbfcff;
  --n-50:  #f5f8fd;
  --n-100: #eef3fa;
  --n-200: #e3ebf4;
  --n-300: #cbd3e0;
  --n-400: #98a2b3;
  --n-500: #667085;
  --n-600: #475467;
  --n-700: #344054;
  --n-800: #1d2939;
  --n-900: #0a1626;
  --n-950: #0a101c;

  /* 状态阶 */
  --green-50:  #ecfdf3;
  --green-100: #d1fadf;
  --green-500: #079455;
  --green-600: #067647;
  --green-700: #05603a;

  --amber-50:  #fffaeb;
  --amber-100: #fef0c7;
  --amber-500: #b54708;
  --amber-600: #93370d;

  --red-50:  #fef3f2;
  --red-100: #fee4e2;
  --red-500: #d92d20;
  --red-600: #b42318;
  --red-700: #912018;

  /* 品牌装饰色：仅用于图形与光带，禁止承载文字（对比度 1.89:1） */
  --brand-cyan: #2fcbff;

  /* ── 字阶 · 模块化 + 流体 ─────────────────────────────────────────── */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: clamp(14.5px, 0.9rem + 0.08vw, 15.5px);
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   clamp(20px, 1.15rem + 0.35vw, 22px);
  --fs-2xl:  clamp(23px, 1.25rem + 0.85vw, 28px);
  --fs-3xl:  clamp(27px, 1.4rem + 1.5vw, 36px);
  --fs-4xl:  clamp(32px, 1.6rem + 2.6vw, 48px);

  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-base:  1.62;
  --lh-loose: 1.75;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --ls-tight:  -0.015em;
  --ls-normal: 0;
  --ls-wide:   0.06em;

  /* ── 间距阶 · 4px 基准，刻意留出大小跳跃制造节奏 ──────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-section: clamp(40px, 5.5vw, 76px);

  /* ── 圆角 ─────────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-full: 999px;

  /* ── 海拔 · 单色阴影，不带品牌色投影 ──────────────────────────────── */
  --elev-1: 0 1px 2px rgba(16, 24, 40, .06);
  --elev-2: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --elev-3: 0 12px 32px -8px rgba(16, 24, 40, .13), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --elev-4: 0 24px 56px -12px rgba(16, 24, 40, .18), 0 8px 16px -8px rgba(16, 24, 40, .08);

  /* ── 动效 · 指数缓出，不用回弹 ────────────────────────────────────── */
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;

  /* ── 布局 ─────────────────────────────────────────────────────────── */
  --content:        1180px;
  --content-wide:   1320px;
  --content-narrow: 720px;
  --touch:          44px;
  --gutter:         clamp(16px, 4vw, 32px);

  --z-nav:    100;
  --z-drawer: 200;
  --z-toast:  300;

  /* ── 字体栈 · 中文优先，不下载 Web 字体 ───────────────────────────── */
  --font-sans:
    system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
    "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* ==========================================================================
   2 · 语义令牌 · 亮色（默认）
   ========================================================================== */

:root {
  --c-bg:          var(--n-50);
  --c-bg-tint:     var(--brand-50);
  --c-surface:     var(--n-0);
  --c-surface-2:   var(--n-25);
  --c-surface-3:   var(--n-100);
  --c-overlay:     rgba(16, 24, 40, .45);

  --c-border:        var(--n-200);
  --c-border-soft:   var(--n-100);
  --c-border-strong: var(--n-300);

  --c-text:    var(--n-900);
  --c-text-2:  var(--n-600);
  --c-text-3:  var(--n-500);
  --c-text-on: #ffffff;

  --c-brand:      var(--brand-500);
  --c-brand-ink:  var(--brand-600);   /* 浅底文字/链接 5.57:1 */
  --c-brand-deep: var(--brand-700);   /* hover / 白字填充 7.13:1 */
  --c-brand-soft: var(--brand-50);
  --c-brand-line: var(--brand-200);
  --c-brand-grad: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 100%);

  --c-success: var(--green-500);
  --c-success-ink: var(--green-700);
  --c-success-soft: var(--green-50);
  --c-success-line: var(--green-100);

  --c-warning: var(--amber-500);
  --c-warning-ink: var(--amber-600);
  --c-warning-soft: var(--amber-50);
  --c-warning-line: var(--amber-100);

  --c-danger: var(--red-500);
  --c-danger-ink: var(--red-600);
  --c-danger-soft: var(--red-50);
  --c-danger-line: var(--red-100);

  --c-focus: var(--brand-500);
  --ring:    0 0 0 3px rgba(22, 119, 255, .28);
}

/* 语义令牌 · 暗色（可选开关，不跟随系统自动切换） */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:        var(--n-950);
  --c-bg-tint:   #0d1626;
  --c-surface:   #131c2b;
  --c-surface-2: #182233;
  --c-surface-3: #1f2a3d;
  --c-overlay:   rgba(4, 8, 16, .62);

  --c-border:        #26324a;
  --c-border-soft:   #1e2839;
  --c-border-strong: #35435f;

  --c-text:   #e8edf5;
  --c-text-2: #a9b4c7;
  --c-text-3: #7d8aa0;
  --c-text-on: #ffffff;

  --c-brand:      var(--brand-400);
  --c-brand-ink:  var(--brand-300);
  --c-brand-deep: var(--brand-600);
  --c-brand-soft: #12213c;
  --c-brand-line: #1e3a63;
  --c-brand-grad: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 100%);

  --c-success: #4ed08a;
  --c-success-ink: #4ed08a;
  --c-success-soft: #0c2419;
  --c-success-line: #14532d;

  --c-warning: #f2b04a;
  --c-warning-ink: #f2b04a;
  --c-warning-soft: #2a1c07;
  --c-warning-line: #57350c;

  --c-danger: #f78b80;
  --c-danger-ink: #f78b80;
  --c-danger-soft: #2a1210;
  --c-danger-line: #5c211a;

  --c-focus: var(--brand-400);
  --ring: 0 0 0 3px rgba(92, 155, 255, .34);

  --elev-1: 0 1px 2px rgba(0, 0, 0, .4);
  --elev-2: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .3);
  --elev-3: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 4px 8px -4px rgba(0, 0, 0, .4);
  --elev-4: 0 24px 56px -12px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   2.5 · 旧令牌别名（迁移兼容层）
   ──────────────────────────────────────────────────────────────────────────
   style.css（1617 行，落地页组件：.hero / .faq-item / .arch-* / .download-menu）
   大量引用旧令牌名。本文件不重写这些页面组件，而是把旧名字映射到新语义层，
   于是它们无需改一行代码就自动跟随新令牌 —— 换肤、暗色、统一圆角与阴影。

   映射完成后，五个样式表收敛为一个：
       style.css            保留（页面级组件，逐步迁移）
       tokens.css           被本文件替代
       theme-cinema.css     删除（毛玻璃 + 光晕层）
       ui-system.css        删除（反向压平层）
       console-ui.css       删除（控制台第三层）
   ========================================================================== */

:root {
  /* 背景与表面 */
  --bg-base:           var(--c-surface);
  --bg-soft:           var(--c-bg);
  --bg-tint:           var(--c-bg-tint);
  --surface:           var(--c-surface);
  --surface-subtle:    var(--c-surface-3);
  --surface-veil:      var(--c-surface);   /* 原为半透明，改为实色 */
  --glass-bg:          var(--c-surface);
  --glass-bg-strong:   var(--c-surface);

  /* 文字 */
  --text-primary:      var(--c-text);
  --text-secondary:    var(--c-text-2);
  --text-tertiary:     var(--c-text-3);
  --text-decorative:   var(--c-text-3);
  --text-inverse:      var(--c-text-on);

  /* 线条 */
  --line:              var(--c-border);
  --line-soft:         var(--c-border-soft);
  --line-strong:       var(--c-border-strong);
  --border-soft:       var(--c-border-soft);
  /* --border-strong 在旧代码里被 models.php:8 使用但从未定义过（无 fallback），
     导致 .model-item:hover 的 border-color 退化为 currentColor。此处补上。 */
  --border-strong:     var(--c-border-strong);

  /* 品牌 */
  --accent:            var(--c-brand);
  --accent-ink:        var(--c-brand-ink);
  --accent-deep:       var(--c-brand-deep);
  --accent-cyan:       var(--brand-cyan);
  --accent-cyan-soft:  rgba(47, 203, 255, .08);
  --accent-soft:       var(--c-brand-soft);
  --accent-soft-hover: rgba(31, 99, 214, .14);
  --accent-line:       var(--c-brand-line);
  --accent-line-strong: var(--brand-300);
  --accent-grad:       var(--c-brand-grad);
  --accent-grad-ink:   linear-gradient(90deg, var(--brand-700) 0%, var(--brand-600) 100%);
  --accent-grad-deco:  linear-gradient(135deg, var(--brand-500) 0%, var(--brand-cyan) 100%);

  /* 状态 */
  --success:           var(--c-success);
  --success-soft:      var(--c-success-soft);
  --warning:           var(--c-warning);
  --warning-soft:      var(--c-warning-soft);
  --danger:            var(--c-danger);
  --danger-soft:       var(--c-danger-soft);

  /* 圆角（旧 --radius-xl 24px → 14px，收敛到统一节奏） */
  --radius-sm:         var(--r-sm);
  --radius:            var(--r-md);
  --radius-md:         var(--r-md);
  --radius-lg:         var(--r-lg);
  --radius-xl:         var(--r-lg);
  --radius-full:       var(--r-full);

  /* 阴影（旧的彩色投影与 44px 光晕全部改为无彩海拔） */
  --shadow-sm:             var(--elev-1);
  --shadow:                var(--elev-2);
  --shadow-lg:             var(--elev-3);
  --shadow-accent:         var(--elev-2);
  --shadow-accent-strong:  var(--elev-3);

  /* 焦点环与动效 */
  --focus-ring:        var(--ring);
  --focus-ring-soft:   var(--ring);
  --dur-fast:          var(--dur-1);
  --dur:               var(--dur-2);
  --ease:              var(--ease-out);

  /* 旧 ui-system 命名空间 */
  --ui-bg:             var(--c-bg);
  --ui-surface:        var(--c-surface);
  --ui-surface-subtle: var(--c-surface-3);
  --ui-text:           var(--c-text);
  --ui-muted:          var(--c-text-2);
  --ui-faint:          var(--c-text-3);
  --ui-line:           var(--c-border);
  --ui-line-strong:    var(--c-border-strong);
  --ui-accent:         var(--c-brand-ink);
  --ui-accent-hover:   var(--c-brand-deep);
  --ui-danger:         var(--c-danger);
  --ui-success:        var(--c-success);
  --ui-radius:         var(--r-sm);
  --ui-shadow:         var(--elev-1);
  --ui-content:        var(--content);

  /* 旧 cinema 命名空间 */
  --cinema-bg-0:       var(--c-surface);
  --cinema-bg-1:       var(--c-bg-tint);
  --cinema-bg-2:       var(--c-bg-tint);
  --cinema-blue:       var(--c-brand-ink);
  --cinema-blue-soft:  var(--c-brand);
  --cinema-cyan:       var(--brand-cyan);
  --cinema-text:       var(--c-text);
  --cinema-text-soft:  var(--c-text-2);
  --cinema-text-muted: var(--c-text-3);
  --cinema-line:       var(--c-border);
}

/* ==========================================================================
   3 · 基础层
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 旧的极光装饰层彻底移除：装饰必须挣得自己的位置 */
.bg-aurora,
body::before,
body::after { display: none; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-8) 0; }

/* 焦点环：只对键盘用户可见 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-100); color: var(--brand-900); }
[data-theme="dark"] ::selection { background: var(--c-brand-soft); color: var(--c-text); }

/* 滚动条 */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border: 3px solid var(--c-bg);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); }

/* ==========================================================================
   4 · 排版
   差异化来自字阶/字重/字距，不来自换字体。数据一律等宽数字。
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--c-text);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1, .page-title, .admin-title, .doc-title { font-size: var(--fs-3xl); }
h2, .section-title { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p {
  margin: 0 0 var(--sp-4);
  color: var(--c-text-2);
  line-height: var(--lh-base);
}
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-brand-ink);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--c-brand-deep); text-decoration: underline; }

strong, b { color: var(--c-text); font-weight: var(--fw-semi); }
small { font-size: var(--fs-sm); }

/* 金额 / 额度 / 倍率 / 时间：纵向对齐可扫读 */
.stat-num, .money-num, .overview-value, .balance-num, .metric-value,
td.num, .num, time, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: 2px 6px;
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-xs);
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}

kbd {
  border-color: var(--c-border);
  background: var(--c-surface-3);
  color: var(--c-text-2);
  font-size: 11px;
  padding: 2px 5px;
}

pre {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* 眉标 / 面包屑 */
.page-eyebrow, .dash-eyebrow, .section-eyebrow, .doc-eyebrow,
.auth-eyebrow, .admin-eyebrow, .resource-eyebrow, .editor-eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.page-desc, .dash-sub, .section-subtitle, .resource-hero p, .admin-subtitle {
  margin-top: var(--sp-3);
  max-width: 68ch;
  color: var(--c-text-2);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.text-muted, .muted { color: var(--c-text-3); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

/* ==========================================================================
   5 · 布局
   ========================================================================== */

.container, .page-wrap {
  width: min(calc(100% - var(--gutter) * 2), var(--content));
  margin-inline: auto;
}

.page-wrap { padding-block: var(--sp-8) var(--sp-16); }

.dash-wrap, .credits-wrap, .resource-wrap, .voice-wrap, .account-wrap,
.auth-wrap {
  width: min(calc(100% - var(--gutter) * 2), var(--content));
  max-width: var(--content);
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-16);
}

.admin-wrap, .doc-layout {
  width: min(calc(100% - var(--gutter) * 2), var(--content-wide));
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-16);
}

.narrow-wrap { width: min(calc(100% - var(--gutter) * 2), var(--content-narrow)); margin-inline: auto; }

.page-header, .page-hero, .page-hero-compact, .dash-top, .resource-hero {
  margin-bottom: var(--sp-8);
}
.page-header h1, .page-hero h1, .dash-top h1, .resource-hero h1 { margin-bottom: 0; }

/* 通用网格 */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* 分隔 */
.divider { height: 1px; background: var(--c-border); border: 0; margin: var(--sp-6) 0; }
.divider-soft { height: 1px; background: var(--c-border-soft); border: 0; margin: var(--sp-4) 0; }

/* ==========================================================================
   6 · 导航
   ========================================================================== */

.nav, .nav.scrolled {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nav, .nav.scrolled { background: var(--c-surface); }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: min(calc(100% - var(--gutter) * 2), var(--content-wide));
  max-width: var(--content-wide);
  min-height: 60px;
  margin-inline: auto;
}

.nav-logo, .logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-decoration: none;
}
.nav-logo:hover, .logo:hover { text-decoration: none; color: var(--c-text); }

.logo .plus, .logo-mark {
  color: var(--c-brand);
  font-weight: var(--fw-bold);
}

.nav-links { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }

.nav-link, .nav-links a, .docs-link, .nav-back {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.nav-link:hover, .nav-links a:hover, .docs-link:hover, .nav-back:hover {
  color: var(--c-text);
  background: var(--c-surface-3);
  text-decoration: none;
}
.nav-link.active, .nav-links a.active, .docs-link.active {
  color: var(--c-brand-ink);
  background: var(--c-brand-soft);
  font-weight: var(--fw-semi);
}

.nav-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.nav-actions .nav-links + * { margin-inline-start: 0; }

.nav-mobile { display: none; }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  cursor: pointer;
}

/* ==========================================================================
   7 · 页脚
   ========================================================================== */

.footer, footer {
  margin-top: var(--sp-20);
  padding-block: var(--sp-10);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}
.footer-inner {
  width: min(calc(100% - var(--gutter) * 2), var(--content-wide));
  max-width: var(--content-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-links a, .footer a { color: var(--c-text-3); text-decoration: none; }
.footer-links a:hover, .footer a:hover { color: var(--c-brand-ink); text-decoration: none; }

/* ==========================================================================
   8 · 按钮
   ========================================================================== */

.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-sm, .btn-danger,
.btn-red, .btn-purple, .btn-download, .btn-release, .upload-btn,
.auth-btn, .code-btn, .cookie-btn, .ba-save-btn, .ghost-btn,
.logout-btn, .save-btn,
button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  /* 设计方向明确「主按钮：渐变 + 彩色投影 → 实色，hover 加深底色」，
     因此按钮一律无投影。style.css:370/374 仍给 .btn-primary 挂了彩色光晕
     （box-shadow: 0 6px 20px rgba(22,119,255,.3)），旧 console-ui.css 靠
     !important 压掉它；本行以「同特异性 + 源顺序在后」的方式接管。 */
  box-shadow: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover,
.btn-danger:hover, .btn-purple:hover, .upload-btn:hover, .auth-btn:hover,
.cookie-btn:hover, .ba-save-btn:hover { text-decoration: none; }

.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled,
button:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 主按钮 */
.btn-primary, .btn-purple, .upload-btn, .auth-btn, .cookie-btn,
.btn-download, .btn-release, .ba-save-btn, .save-btn, .btn[data-variant="primary"] {
  border-color: var(--c-brand-deep);
  background: var(--c-brand-deep);
  color: var(--c-text-on);
}
.btn-primary:hover, .btn-purple:hover, .upload-btn:hover, .auth-btn:hover,
.cookie-btn:hover, .btn-download:hover, .btn-release:hover, .ba-save-btn:hover,
.save-btn:hover {
  background: var(--brand-800);
  border-color: var(--brand-800);
}

/* 次按钮 */
.btn-secondary, .btn[data-variant="secondary"] {
  border-color: var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
}
.btn-secondary:hover { background: var(--c-surface-3); border-color: var(--c-text-3); }

/* 幽灵按钮
   ⚠️ .btn-sm 必须带 :not() 守卫。它是**尺寸修饰符**，会与变体类同时出现
   （线上有 15 处 class="btn-primary btn-sm"）。若把裸 .btn-sm 放进本组，
   它的颜色声明会覆盖主按钮组（本组在源文件里更靠后），
   把主按钮渲染成白色幽灵按钮。旧 console-ui.css:32 原本就写了
   .btn-sm:not(.btn-primary):not(.btn-purple)，此处补回并扩展。 */
.btn-ghost, .ghost-btn, .logout-btn, .download-link, .verify-btn,
.nav-actions .logout-btn, .btn[data-variant="ghost"],
.btn-sm:not(.btn-primary):not(.btn-purple):not(.btn-red):not(.btn-green):not(.btn-danger) {
  border-color: var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
}
.btn-ghost:hover, .ghost-btn:hover, .logout-btn:hover,
.download-link:hover, .verify-btn:hover, .nav-actions .logout-btn:hover,
.btn-sm:not(.btn-primary):not(.btn-purple):not(.btn-red):not(.btn-green):not(.btn-danger):hover {
  background: var(--c-surface-3);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

/* 危险按钮 */
.btn-danger, .btn-red, .btn-del, .cfg-del {
  border-color: var(--c-danger-line);
  background: var(--c-surface);
  color: var(--c-danger-ink);
}
.btn-danger:hover, .btn-red:hover, .btn-del:hover, .cfg-del:hover {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

/* 尺寸 */
.btn-lg { min-height: var(--touch); padding-inline: var(--sp-6); font-size: var(--fs-base); }
.btn-xs { min-height: 28px; padding-inline: var(--sp-3); font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn-icon { width: 38px; padding: 0; }

/* ==========================================================================
   9 · 表单
   ========================================================================== */

.field { margin-bottom: var(--sp-5); }
.field:last-child { margin-bottom: 0; }

.field label, label, .form-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
select, textarea, .form-control, .price-input {
  width: 100%;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
textarea { min-height: 96px; padding-block: var(--sp-3); resize: vertical; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--c-text-3);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--c-brand);
  box-shadow: var(--ring);
  outline: none;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--c-surface-3);
  color: var(--c-text-3);
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--c-text-3); }
input[aria-invalid="true"], .field.error input, .field.error select, .field.error textarea {
  border-color: var(--c-danger);
}
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .22); }

select {
  appearance: none;
  padding-inline-end: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23667085' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  cursor: pointer;
}
option { background: var(--c-surface); color: var(--c-text); }

/* 复选 / 单选 */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
  vertical-align: -2px;
}
.check-row, .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.check-row label { margin: 0; font-weight: var(--fw-normal); color: var(--c-text-2); }

/* 字段提示与错误 */
.field-hint, .form-hint {
  margin-top: var(--sp-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.field-error, .form-error {
  margin-top: var(--sp-2);
  color: var(--c-danger-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.field-error::before { content: "⚠ "; }

/* 输入组 */
.input-group { display: flex; gap: var(--sp-2); }
.input-group input { flex: 1 1 auto; min-width: 0; }

/* 搜索框 */
.search-box, .search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.search-box:focus-within { border-color: var(--c-brand); box-shadow: var(--ring); }
.search-box input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: var(--fs-sm);
}
.search-box input:focus { box-shadow: none; }
.search-box svg, .search-box .search-icon { flex: none; color: var(--c-text-3); }

/* 内联表单 */
.inline-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { flex: 1 1 180px; margin-bottom: 0; }

/* ==========================================================================
   10 · 卡片 / 面板
   单一边界 + 单一海拔。hover 只换边框色，不做位移、不加彩色投影。
   ========================================================================== */

.card, .panel, .cfg-card, .mp-card, .cloud-card, .note-card, .glass-card,
.auth-card, .step-card, .guide-step, .doc-card, .terms-card, .pricing-card,
.record-summary-card, .record-filters, .admin-head, .admin-panel-card,
.stat-card, .overview-card, .credits-panel, .credits-balance, .account-panel,
.account-sidebar, .account-stat, .account-link-card, .upload-card,
.library-card, .resource-item, .voice-row, .config-section, .grp,
.pair-info, .ba-card, .ba-banner, .ba-tier-col, .key-box, .guide-box,
.provider-chip, .visual-card, .feature, .inline-form {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--elev-1);
  /* 设计方向明确排除「毛玻璃铺满全屏」（见 .impeccable.md 反参照）。
     style.css 与各页内联仍在给卡片挂 backdrop-filter，这里显式复位。
     注意：页面内联的特异性同为 0,1,0 且源顺序在本文件之后，
     该属性对内联值无效，由 §24 接管。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 可交互卡片 */
:where(.cfg-card, .mp-card, .resource-item, .voice-row, .account-link-card,
.guide-step, .provider-chip, .feature, .visual-card, .cloud-card) {
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
:where(.cfg-card, .mp-card, .resource-item, .voice-row, .account-link-card,
.guide-step, .provider-chip, .feature, .visual-card, .cloud-card):hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--elev-2);
}

.card, .panel, .cfg-card, .auth-card, .step-card, .doc-card, .terms-card,
.pricing-card, .admin-panel-card, .stat-card, .overview-card, .credits-panel,
.account-panel, .upload-card, .library-card, .config-section, .grp {
  padding: var(--sp-5);
}
.card-lg, .panel-lg { padding: var(--sp-6); }
.card-flush { padding: 0; overflow: hidden; }

.card-title, .cfg-name, .preview-title, .config-section-title, .grp-title {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
}
.card-desc, .cfg-desc { margin-top: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.card-foot, .cfg-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-soft);
  flex-wrap: wrap;
}
.cfg-actions .btn-primary { margin-inline-end: auto; }

/* 行式配置卡（控制台主形态） */
.cfg {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color var(--dur-2) var(--ease-out);
}
.cfg:hover { border-color: var(--c-border-strong); }
.cfg-main { flex: 1 1 auto; min-width: 0; }
.cfg-side { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* ==========================================================================
   11 · 指标 / 状态条
   ========================================================================== */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.stat {
  padding: var(--sp-4) var(--sp-5);
  border-inline-end: 1px solid var(--c-border-soft);
}
.stat:last-child { border-inline-end: 0; }
.stat-label, .overview-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.stat-value, .overview-value, .balance-num {
  display: block;
  color: var(--c-text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.stat-note {
  display: block;
  margin-top: var(--sp-1);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}
/* 数值色调：用 .tone-* 显式声明，不要用 .is-* ——
   .is-* 是徽章变体，会连带背景色，用在数值上会莫名出现色块 */
.stat-value.tone-brand   { color: var(--c-brand-ink); }
.stat-value.tone-success { color: var(--c-success-ink); }
.stat-value.tone-warning { color: var(--c-warning-ink); }
.stat-value.tone-danger  { color: var(--c-danger-ink); }

.dash-overview, .cfg-list, .account-content, .grid-list {
  display: grid;
  gap: var(--sp-3);
}

/* ==========================================================================
   12 · 表格
   ========================================================================== */

.table-wrap, .record-table-wrap {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  /* style.css:1576 把 .table-wrap 放进「毛玻璃卡片组」，给了
     background:linear-gradient(...) 与 box-shadow:0 24px 80px var(--line-soft)
     —— 一层灰白色 80px 光晕。旧 console-ui.css:9/36 靠 !important 压掉它。
     本行以「同特异性 + 源顺序在后」接管（style.css 在 <link> 里排在本文件之前）。 */
  box-shadow: var(--elev-1);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; border-color: var(--c-border); }
th, td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-soft);
  text-align: left;
  vertical-align: middle;
}
th {
  background: var(--c-surface-2);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
td { color: var(--c-text-2); font-size: var(--fs-sm); }
td strong, td .primary { color: var(--c-text); font-weight: var(--fw-medium); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
tbody tr:hover { background: var(--c-surface-2); }
th.num, td.num, th[align="right"], td[align="right"] { text-align: right; }

.table-empty { padding: var(--sp-12) var(--sp-5); text-align: center; color: var(--c-text-3); }

/* ==========================================================================
   13 · 徽章 / 状态
   ========================================================================== */

.badge, .tag, .chip, .release-badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-surface-3);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.6;
  white-space: nowrap;
}

/* 徽章变体：带底色，仅用于徽章本体。
   注意：不要定义裸的 .is-success / .is-brand —— 那会让「只想改文字颜色」
   的元素意外获得背景色。文字色请用下面的 .tone-* */
.tag-on, .status-success, .record-status.paid, .verify-btn.verified,
.badge-success {
  border-color: var(--c-success-line);
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}
.tag-off, .status-danger, .record-status.failed, .state-error,
.badge-danger {
  border-color: var(--c-danger-line);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}
.status-warn, .tag-admin, .badge-warning {
  border-color: var(--c-warning-line);
  background: var(--c-warning-soft);
  color: var(--c-warning-ink);
}
.badge-brand {
  border-color: var(--c-brand-line);
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}

/* 文字色调：只改颜色，不碰背景。可安全用于任何元素。
   本节位于所有基础组件之后，同特异性下靠源顺序覆盖，
   因此不需要 !important */
.tone-brand   { color: var(--c-brand-ink); }
.tone-success { color: var(--c-success-ink); }
.tone-warning { color: var(--c-warning-ink); }
.tone-danger  { color: var(--c-danger-ink); }
.tone-muted   { color: var(--c-text-3); }

/* 状态点 */
.dot { width: 7px; height: 7px; border-radius: var(--r-full); flex: none; background: var(--c-text-3); }
.dot-success { background: var(--c-success); }
.dot-warning { background: var(--c-warning); }
.dot-danger  { background: var(--c-danger); }

/* ==========================================================================
   14 · 提示条 / 通知
   ========================================================================== */

.alert, .notice, .note, .toast, .guide-note, .cookie-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.alert-brand, .notice-brand {
  border-color: var(--c-brand-line);
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}
.alert-success { border-color: var(--c-success-line); background: var(--c-success-soft); color: var(--c-success-ink); }
.alert-warning { border-color: var(--c-warning-line); background: var(--c-warning-soft); color: var(--c-warning-ink); }
.alert-danger  { border-color: var(--c-danger-line);  background: var(--c-danger-soft);  color: var(--c-danger-ink); }
.alert-title { font-weight: var(--fw-semi); color: inherit; }

.toast {
  box-shadow: var(--elev-3);
  background: var(--c-surface);
  color: var(--c-text);
  z-index: var(--z-toast);
}

/* ==========================================================================
   15 · 空状态（面向泛用户：必须说明「会出现什么 / 为什么有用 / 现在点哪」）
   ========================================================================== */

/* .empty 在旧代码里承担两种互斥角色，必须分开：
     · 空状态容器 <div class="empty"><h3>…</h3><p>…</p></div>（dashboard.php 1700/1705）
     · 「无值」修饰符 .balance-bar-fill.empty / .route-status-value.empty
   这里用 :not() 排除修饰符用法，详见 §23。 */
.empty:not(.balance-bar-fill):not(.route-status-value), .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-5);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  text-align: center;
}
.empty-icon, .empty-state .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
}
.empty-title, .empty-state h3 {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
}
.empty-desc, .empty-state p {
  max-width: 46ch;
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.empty-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.empty-hint { color: var(--c-text-3); font-size: var(--fs-xs); }

/* 加载中 / 状态提示文字
   接管自 style.css:461 的 `.loading{padding:42px 18px;text-align:center}`。
   注意 builtin.php:571/576 复用同一类名展示错误文案（内联 color:var(--danger)
   覆盖颜色），因此这里不加旋转指示器或脉冲动画——否则报错文字会跟着转。
   需要真正的骨架屏请用 .skeleton。 */
.loading {
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   16 · 标签页 / 分段控件
   ========================================================================== */

.tab-bar, .resource-switch, .segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  /* 浅灰轨道 + 白色药丸的 iOS 式分段控件。
     轨道必须比药丸深一档，否则 .tab.active 的白底在白色轨道上看不出来。
     旧 console-ui.css:14 把轨道压成 var(--surface)（纯白），
     那是因为它的 active 是深色药丸；本设计系统反过来，故轨道用 --c-surface-3。 */
  background: var(--c-surface-3);
  margin-bottom: var(--sp-4);
}
.tab, .resource-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.tab:hover, .resource-tab:hover { color: var(--c-text); background: var(--c-surface); }
.tab.active, .resource-tab.active {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: var(--fw-semi);
  box-shadow: var(--elev-1);
}

/* ==========================================================================
   17 · 抽屉 / 弹层
   ========================================================================== */

.drawer, .modal, .dialog {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--elev-4);
  overflow: hidden;
}
.drawer-head, .modal-head, .drawer-foot, .modal-foot {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
}
.drawer-head, .modal-head { border-bottom: 1px solid var(--c-border-soft); }
.drawer-foot, .modal-foot { border-top: 1px solid var(--c-border-soft); display: flex; gap: var(--sp-3); justify-content: flex-end; }
.drawer-form, .drawer-preview, .modal-body { padding: var(--sp-5); background: var(--c-surface); }

/* 遮罩 */
.backdrop, .modal-mask {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--c-overlay);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ==========================================================================
   18 · 进度
   ========================================================================== */

.progress, .progress-bar, .balance-bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  overflow: hidden;
}
.progress-fill, .progress-bar > span, .balance-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--c-brand);
  transition: width var(--dur-3) var(--ease-out);
}
.progress-fill.is-success, .balance-bar-fill.is-success { background: var(--c-success); }
.progress-fill.is-warning, .balance-bar-fill.is-warning { background: var(--c-warning); }
.progress-fill.is-danger,  .balance-bar-fill.is-danger  { background: var(--c-danger); }

/* 骨架屏 */
.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--c-surface-3) 25%, var(--c-surface-2) 37%, var(--c-surface-3) 63%);
  background-size: 400% 100%;
  animation: v-skeleton 1.4s ease infinite;
}
@keyframes v-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================================================
   19 · 分页 / 面包屑 / 工具条
   ========================================================================== */

.pagination { display: flex; align-items: center; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-6); }
.pagination a, .pagination span, .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px; min-height: 34px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.pagination a:hover, .page-btn:hover { border-color: var(--c-border-strong); color: var(--c-text); text-decoration: none; }
.pagination .active, .page-btn.active {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
  font-weight: var(--fw-semi);
}

.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-3); flex-wrap: wrap; }
.breadcrumb a { color: var(--c-text-3); }
.breadcrumb a:hover { color: var(--c-brand-ink); }
.breadcrumb .sep { color: var(--c-border-strong); }
.breadcrumb .current { color: var(--c-text); font-weight: var(--fw-medium); }

.toolbar, .cfg-toolbar, .record-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1 1 auto; }
.toolbar-count, .count { color: var(--c-text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   20 · 工具类
   ========================================================================== */

.hidden, [hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   21 · 响应式
   原则：小屏不隐藏关键功能，只重排；触控目标不小于 44px。
   ========================================================================== */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions { margin-inline-start: auto; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-inline-end: 1px solid var(--c-border-soft); }
  .stat:nth-child(2n) { border-inline-end: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--c-border-soft); }

  .cfg { flex-wrap: wrap; gap: var(--sp-3); }
  .cfg-side {
    width: 100%;
    justify-content: flex-end;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border-soft);
  }

  .toolbar { align-items: stretch; }
  .toolbar .search-box, .toolbar .search { flex: 1 1 100%; }
  .toolbar .spacer { display: none; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }

  .page-header, .page-hero, .dash-top { margin-bottom: var(--sp-6); }

  /* 触控目标放大 */
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-sm,
  .tab, .resource-tab, .page-btn, button:not([class]) { min-height: var(--touch); }
  .nav-link, .nav-links a, .footer a, .nav-back { min-height: var(--touch); }
  input, select, textarea { min-height: var(--touch); }

  .card, .panel, .cfg-card, .admin-panel-card, .credits-panel,
  .account-panel, .upload-card, .library-card { padding: var(--sp-4); }

  .stat { padding: var(--sp-3) var(--sp-4); }
  .stat-value, .overview-value { font-size: var(--fs-lg); }

  .empty:not(.balance-bar-fill):not(.route-status-value), .empty-state { padding: var(--sp-8) var(--sp-4); }
  .empty-actions { width: 100%; }
  .empty-actions .btn, .empty-actions .btn-primary { flex: 1 1 auto; }
}

/* 容器查询：卡片内部按自身宽度自适应，而非视口。
   --------------------------------------------------------------------------
   ⚠️ 这里**不能**给 .cfg-actions 加 flex-direction:column。
   控制台配置卡在 .cfg-list 的 auto-fill 网格里，桌面三列布局下内容盒只有
   约 282px（卡片 322px − padding 40px），会命中任何 ≥282px 的阈值，
   把 6 个操作按钮从「2 行换行」压成「6 行全宽」——
   实测卡片高度 197px → 396px，操作区 95px → 285px。
   而 .cfg-actions 本身已有 flex-wrap:wrap，页面也自带窄屏 @media 网格，
   设计系统不该再干预它的方向。
   阈值取 240px：只有真正挤到放不下两个按钮时才纵向堆叠。 */
@supports (container-type: inline-size) {
  .card, .panel, .cfg-card { container-type: inline-size; }
  @container (max-width: 240px) {
    .card-foot { flex-direction: column; align-items: stretch; }
  }
}

/* ==========================================================================
   22 · 无障碍 · 尊重减弱动效
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .skeleton { animation: none; background: var(--c-surface-3); }
}

/* 高对比度模式下保证边框可见 */
@media (prefers-contrast: more) {
  :root {
    --c-border: var(--n-400);
    --c-border-strong: var(--n-500);
    --c-text-2: var(--n-700);
  }
}

/* 打印 */
@media print {
  .nav, .footer, footer, .toolbar, .pagination, .cookie-bar { display: none; }
  body { background: var(--n-0); }
  .card, .panel, .table-wrap { box-shadow: none; border-color: var(--n-300); }
}

/* ==========================================================================
   23 · 旧代码兼容例外（.empty 的双重身份）
   --------------------------------------------------------------------------
   背景：.empty 在旧代码里被当成两种互斥的角色使用——
     · 空状态容器：<div class="empty"><h3>…</h3><p>…</p><button class="btn-ghost">…</button></div>
       （dashboard.php:1700 / 1705，含标题、说明、行动按钮）
     · 「无值」修饰符：.balance-bar-fill.empty（credits.php:33/543）、
       .route-status-value.empty（dashboard.php:70/1785/1795）

   后果：若把 .empty 一律当空状态大框，4px 高的额度进度条会被
   padding 撑成约 90px 高、并套上虚线边框。

   处理：
     1. §15 的空状态规则已用 :not() 排除两个修饰符用法（见该节注释）。
     2. 本节中和 style.css:461 遗留的 `.empty{padding:42px 18px;text-align:center}`
        —— 该文件仍在加载，且它命中修饰符元素（特异性 0,1,0）。
     3. text-align 一并复位：.route-status-value 位于左对齐的
        .overview-label 下方，居中属于旧规则的渗漏。

   注意：本节**不需要 !important**。.balance-bar-fill.empty 与
   .route-status-value.empty 特异性均为 0,2,0，天然高于 style.css 的 0,1,0。
   旧 console-ui.css:42 之所以用 !important，是因为它当时在同等特异性下互压。
   ========================================================================== */

.balance-bar-fill.empty,
.route-status-value.empty {
  padding: 0;
  border: 0;
  box-shadow: none;
  text-align: left;
}

/* ==========================================================================
   24 · 旧代码兼容例外（页面内联样式的接管层）
   --------------------------------------------------------------------------
   背景：控制台各页在自己的 <style> 块里各写了一套组件样式
   （dashboard.php:10-90、admin.php:10-100、skins.php:20-70、
    builtin.php:10-45、credits.php:20-120、index.php:10-25）。
   这些内联块位于 _head.php 输出的 <link> 之后 —— 同源、同特异性下
   **后出现的必然获胜**，旧 console-ui.css 正是靠 81 个 !important 把它们压回去的。

   本文件取代 console-ui.css 之后，凡「页面内联声明过、而本文件未声明」
   的属性都会回退到内联值，表现为毛玻璃、20px+ 大圆角、980px 胶囊、
   半透明白底、hover 位移。本节按旧层的覆盖范围重新接管。

   ── 实现方式 ─────────────────────────────────────────────────────────────
   给选择器加 `body ` 前缀，把特异性从 0,1,0 提到 0,1,1，高于页面内联的 0,1,0，
   因此**不需要 !important**，符合「零 !important」原则。
   `body` 前缀不表达任何结构含义，只为 +1 元素特异性。
   （纯元素选择器如 input/select 用 `body input` 只有 0,0,2，仍低于 0,1,0，
     必须再借 :is()/:not() 的实参特异性补足，见 24.6。）

   与旧层的两点差异（均为有意收紧）：
     · 旧层用 !important 无条件压平；本节只在令牌别名（§2.5）无法自动收敛时出手。
       凡是 `--glass-bg*` / `--shadow*` / `--radius-*` / `--accent-grad` 已被
       别名映射到新语义层的，本节一律不重复声明 —— 那些内联值会自动跟随新令牌。
     · 旧层只作用于 `html.console-embedded`（非嵌入直访 dashboard.php 时失效）；
       本节作用于 `body`，两种入口外观一致 —— 这一点在本项目里是必需的，
       因为 §6 把 .nav 从 fixed 改成了 sticky，导航占位方式在两种模式下已统一。

   维护约定：各页内联块被清理干净后，本节可整段删除。
   ========================================================================== */

/* ── 24.1 布局容器 · 顶部留白与内容宽度 ──────────────────────────────────
   两件事一起处理，因为它们是同一个成因。

   ① 页面内联的顶部留白是给 `position: fixed` 导航让位的：
        dashboard.php:10  `padding: 110px 24px 100px`
        admin.php:10      `padding: 104px 32px 80px`
        index.php:11      `padding: 120px 24px 80px`
      而 §6 已把 .nav 改为 `position: sticky`（见该节），导航进入文档流、
      自身占位 56px。再叠加 104~120px 就会空出 160px 以上。

   ② 嵌入模式下页面根本没有导航 —— _nav.php:5 开头就是
      `if ($embedded) return;`，导航由 app.php 的外壳提供。
      _head.php 因此把 padding-top 压到 32px，但左右 24px 与底部 100px 残留：
      宽度被 §5 的 width 公式再减一次，内容区比旧版窄 48px、底部多出 44px 空白。

   结论：两种模式统一成「顶部 32px + 底部 64px + 左右交给 width 公式」。
   嵌入模式下 padding-top 会被 _head.php 的 32px !important 覆盖，值相同。 */
body .dash-wrap, body .credits-wrap, body .resource-wrap,
body .voice-wrap, body .account-wrap, body .admin-wrap,
body .page-wrap, body .auth-wrap {
  padding-block: var(--sp-8) var(--sp-16);
  padding-inline: 0;
}

/* ── 24.2 卡片 / 面板 ────────────────────────────────────────────────────
   内联值形如 `rgba(255,255,255,.86)` + `backdrop-filter: blur(20px)` +
   `border-radius: 16~24px`：
     dashboard.php:36 .cfg-card   / :57 .overview-card / :77 .empty
     admin.php:13 .admin-head     / :40 .admin-panel-card / :44 .stat-card
     admin.php:92 .search-box     / :97 .inline-form / :143 .access-denied-card
     admin.php:153 .pricing-card  / :174 .record-summary-card / :177 .record-filters
     skins.php:20 .upload-card/.library-card / :50 .resource-item / :64 .voice-row
     credits.php:117 .terms-card  / index.php:17 .auth-card
     dashboard.php:126 .config-section / :131 .grp / :185 .key-box / :201 .guide-box

   圆角收敛到 --r-md（10px）；背景压成实色；backdrop-filter 一律复位。
   .credits-balance 与 .account-panel **不在**此列：前者的浅蓝底
   （credits.php:21 var(--accent-soft)）是「余额高亮」的有意设计，
   后者内联已是 8px，与 --r-md 只差 2px，不值得接管。 */
body .cfg-card, body .overview-card, body .admin-head, body .admin-panel-card,
body .stat-card, body .pricing-card, body .record-summary-card,
body .record-filters, body .inline-form, body .search-box, body .auth-card,
body .terms-card, body .access-denied-card, body .upload-card,
body .library-card, body .resource-item, body .voice-row,
body .config-section, body .grp, body .key-box, body .guide-box {
  border-radius: var(--r-md);
  background: var(--c-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 交互卡片：内联 hover 是「上浮 2px + 品牌色边框」
   （dashboard.php:39 .cfg-card:hover、theme-cinema.css:283 一组）。
   设计方向是「hover 只换边框色，不做位移」，故复位位移、边框走中性色。
   特异性 0,2,1 > 内联 0,2,0。 */
body .cfg-card:hover, body .overview-card:hover, body .resource-item:hover,
body .voice-row:hover, body .upload-card:hover, body .library-card:hover,
body .stat-card:hover, body .admin-panel-card:hover, body .pricing-card:hover {
  border-color: var(--c-border-strong);
  transform: none;
}

/* 弹层：内联 24px 圆角 + blur(24px) + rgba(255,255,255,.96)
   （dashboard.php:87-91 .drawer）。
   圆角收敛到 --r-lg；≤380px 时内联会切成全屏（dashboard.php:382
   `.drawer{...border-radius:0}`），这里跟随同断点复位，避免全屏抽屉出现圆角。 */
body .drawer {
  border-radius: var(--r-lg);
  background: var(--c-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 380px) {
  body .drawer { border-radius: 0; }
}

/* ── 24.3 表格 ──────────────────────────────────────────────────────────
   admin.php:62 `.table-wrap { border-radius: 18px }`；
   voiceclone.php:37 与 style.css:1576 另有光晕，后者已由 §12 接管。
   这里只处理页面内联的圆角。 */
body .table-wrap, body .record-table-wrap {
  border-radius: var(--r-md);
}

/* ── 24.4 标签页 / 分段控件 ─────────────────────────────────────────────
   admin.php:24-36 内联了整套：18px 圆角 + var(--glass-bg-strong) 轨道
   + .tab.active 用品牌渐变底 + 品牌彩色投影（--shadow-accent）。
   设计方向排除彩色投影，且分段控件的 active 应为中性白药丸。
   注意只接管颜色与圆角，**不接管 display**：内联的 `display:flex`
   配合 `overflow-x:auto` 是标签多到要横滚时的正确形态。 */
body .tab-bar, body .resource-switch, body .segmented {
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  box-shadow: none;
}
body .tab, body .resource-tab {
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-text-2);
  box-shadow: none;
}
body .tab.active, body .resource-tab.active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--elev-1);
}

/* ── 24.5 按钮 ──────────────────────────────────────────────────────────
   最刺眼的一处：dashboard.php:20 给 .btn-primary/.btn-ghost 写死
   `border-radius: 980px`（全宽胶囊），:29 又给主按钮挂 `var(--accent-grad)`
   渐变底、:30 挂 hover 彩色光晕；builtin.php:102 的 .save-btn、
   admin.php:303 的 .ba-save-btn、builtin.php:29 的 .logout-btn 同理。
   旧 console-ui.css:30/32 靠 !important 压成 6px 直角实色按钮。

   这里分三段接管：形状 → 主按钮配色 → 幽灵按钮配色。
   只写 background/border/color，不写 padding —— 内联的
   `padding: 10px 18px`、`.btn-sm{padding:7px 13px}` 是页面自己的尺寸节奏，
   与设计系统不冲突，保留。 */
body .btn-primary, body .btn-purple, body .upload-btn, body .save-btn,
body .ba-save-btn, body .btn-ghost, body .ghost-btn, body .logout-btn,
body .btn-sm, body .cfg-del {
  border-radius: var(--r-sm);
  border-width: 1px;
  border-style: solid;
  background-image: none;
  box-shadow: none;
  transform: none;
}

body .btn-primary, body .btn-purple, body .upload-btn, body .save-btn,
body .ba-save-btn, body .btn[data-variant="primary"] {
  border-color: var(--c-brand-deep);
  background: var(--c-brand-deep);
  color: var(--c-text-on);
}
body .btn-primary:hover, body .btn-purple:hover, body .upload-btn:hover,
body .save-btn:hover, body .ba-save-btn:hover {
  border-color: var(--brand-800);
  background: var(--brand-800);
}
/* 内联把禁用态写成 .save-btn:disabled / .btn-primary:disabled，
   特异性 0,2,0，故这里也用 :disabled 保持同级。 */
body .btn-primary:disabled, body .save-btn:disabled {
  transform: none;
  box-shadow: none;
}

/* 幽灵按钮：内联是「浅蓝底 + 品牌色文字」（dashboard.php:30
   `background: var(--accent-soft); color: var(--accent-ink)`）。
   设计方向要求幽灵按钮是中性白底描边，蓝色底只保留给主按钮。 */
body .btn-ghost, body .ghost-btn, body .logout-btn, body .cfg-del {
  border-color: var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
}
body .btn-ghost:hover, body .ghost-btn:hover, body .logout-btn:hover {
  border-color: var(--c-border-strong);
  background: var(--c-surface-3);
  color: var(--c-text);
}
/* 删除按钮回到危险色：旧 console-ui.css:32 的
   `.btn-sm:not(.btn-primary):not(.btn-purple)` 特异性 0,3,0 意外盖住了
   :33 的 .cfg-del 危险色，使删除按钮在旧版里是灰的。这里显式还原。 */
body .cfg-del {
  border-color: var(--c-danger-line);
  color: var(--c-danger-ink);
}
body .cfg-del:hover {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

/* 角色徽章：内联是 `var(--accent-grad)` 渐变胶囊（builtin.php:22）。
   装饰渐变不在设计方向内，改为实色品牌底；胶囊形状保留（角色标记适用）。 */
body .admin-badge {
  border-radius: var(--r-full);
  background: var(--c-brand-deep);
  color: var(--c-text-on);
}

/* ── 24.6 表单控件 ──────────────────────────────────────────────────────
   dashboard.php:46 `.cfg-search { border-radius: 11px;
   background: rgba(255,255,255,.86) }`、:47 `.cfg-sort` 同款，
   admin.php:93/98/178 的输入是 8px 圆角。

   ⚠️ 这里不能用 `body input` —— 纯元素选择器只有 0,0,2，仍低于内联的 0,1,0。
   借 :is() 取实参（input 等元素，0,0,1）与 :not() 取实参（[type=…]，0,1,0）
   补足到 0,2,2 才能压过内联。 */
body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: none;
}

/* ── 24.7 空状态 / 加载 / 提示条 ────────────────────────────────────────
   .empty 由 §15 的 `.empty:not(.balance-bar-fill):not(.route-status-value)`
   接管 —— 该选择器特异性 0,3,0，已高于内联的 0,1,0，无需在此重复。
   这里补两个 §15 管不到的元素：

   · .loading —— admin.php:140 是 `padding:24px`、builtin.php:170 是
     `padding:60px 0`，两页高度不一致；统一到 §15 的节奏。
   · .toast —— dashboard.php:291 与 builtin.php:158 都写死
     `border-radius: 980px` + `backdrop-filter: blur(18px)`。
     旧 ui-system.css:20 把圆角压成 6px，删掉该文件后胶囊形状会复活。 */
body .loading {
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  color: var(--c-text-3);
}
body .toast {
  border-radius: var(--r-md);
  background: var(--c-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}