/* ==========================================================================
   见月导航 · 设计系统 Token
   风格：月华玻璃 MoonHalo Glass（三层令牌 primitive → semantic → component）
   --------------------------------------------------------------------------
   本文件两部分合并（2026-10-07 主题实装）：
     · 令牌层：:root（主题无关刻度 + light 默认） + body.dark（迁移兜底）
       + 6 个 html 上的 data-theme 主题块。数值来自 _theme_design/theme-tokens.css
        与 phase1-visual-spec.md §8，逐行一致，未重算。
     · 非令牌层（保留不动）：Reset / 通用原子（.shell/.card-surface/.pill/.sr-only）
       / 站点图标撑满规则 —— 这些被全站引用，必须留在 tokens.css（所有页面都加载它）。

   ⛔ 选择器口径：写入端统一 documentElement（<html>），故六套主题一律写
      写 html 的 data-theme 属性，**不再**产出 body 上的 data-theme。
      旧版只认 body.dark，而 rank.js 写的是 documentElement → 榜页深色从不生效。
      body.dark 仅作迁移期兜底保留一版，不再被新代码写入。
   ========================================================================== */

:root {
  /* ---------- 品牌薄荷色阶（H≈169°，唯一识别锚点） ---------- */
  --mint-50: #ecfaf5;
  --mint-100: #d3f2e8;
  --mint-200: #a8e6d5;
  --mint-300: #74d4bd;
  --mint-400: #45c1a5;
  --mint-500: #2bb39a;
  --mint-600: #1f9a82;
  --mint-700: #1e8f73;
  --mint-800: #1a6f5b;
  --mint-900: #175849;
  --mint-950: #0c352c;
  /* ---------- 中性色阶（带极轻青灰） ---------- */
  --neutral-0: #ffffff;
  --neutral-50: #f6faf9;
  --neutral-100: #eef5f3;
  --neutral-200: #e2efec;
  --neutral-300: #cfe3df;
  --neutral-400: #a9c6c1;
  --neutral-500: #8aa5a1;
  --neutral-600: #5b7671;
  --neutral-700: #41605b;
  --neutral-800: #2f4a46;
  --neutral-900: #1f3a36;
  --neutral-950: #101a19;
  /* ---------- 危险 红 ---------- */
  --red-50: #fdeceb;
  --red-100: #fbdcda;
  --red-300: #ee918b;
  --red-500: #d54941;
  --red-600: #b13c36;
  --red-700: #8f2f2a;
  --red-900: #4f1c19;
  /* ---------- 警示 琥珀 ---------- */
  --amber-50: #fdf4e0;
  --amber-100: #fbe9bf;
  --amber-300: #e8b040;
  --amber-400: #e0a53c;
  --amber-500: #b8770a;
  --amber-700: #8a5906;
  --amber-900: #3a2504;
  /* ---------- 信息 天蓝 ---------- */
  --sky-50: #eaf4fe;
  --sky-100: #d5e9fd;
  --sky-300: #7bbaf6;
  --sky-400: #4ba8f5;
  --sky-700: #1d5b93;
  --sky-900: #102f4d;

  /* ---------- 圆角（7 档：容器越大、圆角越大） ---------- */
  --r-xs: 5px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 17px;
  --r-xl: 20px;
  --r-2xl: 31px;
  --r-full: 999px;

  /* ---------- 间距（4px 基数 + 语义别名） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 48px;
  --sp-11: 64px;
  --gutter: var(--sp-6);      /* 页面左右（≤640px 时由 home.css 降为 16px） */
  --gap-card: var(--sp-4);    /* 卡片网格 */
  --gap-block: 36px;          /* 分区块之间 */
  --maxw: 1440px;

  /* ---------- 字体族 ---------- */
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en: "DM Sans", "Outfit", var(--font-cn);
  --font-num: var(--font-en);

  /* ---------- 类型标尺（8 主档 + 1 数字档） ---------- */
  --fs-display: 34px;
  --lh-display: 1.2;
  --fw-display: 700;
  --ls-display: -0.5px;
  --fs-h1: 22px;
  --lh-h1: 1.3;
  --fw-h1: 600;
  --ls-h1: -0.2px;
  --fs-h2: 19px;
  --lh-h2: 1.35;
  --fw-h2: 600;
  --ls-h2: 0;
  --fs-h3: 15px;
  --lh-h3: 1.4;
  --fw-h3: 600;
  --ls-h3: 0;
  --fs-body: 14px;
  --lh-body: 1.6;
  --fw-body: 400;
  --ls-body: 0;
  --fs-sm: 13px;
  --lh-sm: 1.55;
  --fw-sm: 400;
  --ls-sm: 0;
  --fs-xs: 12px;
  --lh-xs: 1.45;
  --fw-xs: 400;
  --ls-xs: 0;
  --fs-tag: 10px;
  --lh-tag: 1.2;
  --fw-tag: 500;
  --ls-tag: 0.02em;
  --fs-num: 28px;
  --lh-num: 1.1;
  --fw-num: 700;
  --ls-num: -0.5px;

  /* ---------- light 默认语义（无 data-theme 属性时的兜底，与 light 主题块同值） ---------- */
  --bg-page: #f6faf9;
  --bg-card: #ffffff;
  --bg-sunken: #eef5f3;
  --bg-elevated: #ffffff;
  --ink-1: #1f3a36;
  --ink-2: #41605b;
  --ink-3: #5b7671;
  --ink-4: #7a9692;
  --border-1: #e2efec;
  --border-2: #cfe3df;
  --border-strong: #6f8d88;
  --border-focus: #1e8f73;
  --brand: #2bb39a;
  --brand-strong: #35c9ae;
  --brand-ink: #17715c;
  --on-brand: #06231d;
  --brand-tint: #e3f9f1;
  --brand-tint-2: #edf7f5;
  --brand-tint-3: #f4faf8;
  --ok: #17715c;
  --ok-tint: #e3f9f1;
  --warn: #8a5906;
  --warn-tint: #fdf4e0;
  --danger: #b13c36;
  --danger-strong: #8f2f2a;
  --danger-tint: #fdeceb;
  --info: #1d5b93;
  --info-tint: #eaf4fe;
  --mute: #53706b;
  --mute-tint: #eef3f2;
  --dot-violet: #7c6cf0;
  --dot-mint: #2bb39a;
  --dot-peach: #ff9a76;
  --dot-sky: #4ba8f5;
  --dot-amber: #ffc44d;
  --dot-pink: #f2719f;
  --note-pink: #f2719f;
  --note-pink-tint: #fdeef4;
  --glass-bg: rgba(255,255,255,0.72);
  --glass-brd: rgba(255,255,255,0.6);
  --shadow-xs: 0 1px 2px rgba(16,42,38,.05);
  --shadow-sm: 0 4px 16px -4px rgba(46,128,115,.08);
  --shadow-md: 0 8px 22px -6px rgba(46,128,115,.12);
  --shadow-lg: 0 20px 50px -12px rgba(16,42,38,.22);
  --shadow-search: 0 8px 24px -8px rgba(46,179,154,.16);
  --shadow-focus: 0 0 0 3px rgba(43,179,154,.28);

  /* ---------- 新增令牌（消灭硬编码色 · light 默认值） ---------- */
  --hero-grad: linear-gradient(118deg, #eefaf7 0%, #ffffff 55%, #f2f8ff 100%);
  --brand-grad: linear-gradient(135deg, #5ee0c0 0%, #3eb8f0 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);

  /* ---------- 迁移别名（旧代码依赖，勿删；值随主题自动解析） ----------
     --brand-dark：旧 hover 色。映射到 --brand-strong（hover 方向已按 on-brand 明暗重算）。
     --glass-shadow：旧玻璃投影，phase1 未纳入 46 语义，映射到 --shadow-md。 */
  --brand-dark: var(--brand-strong);
  --glass-shadow: var(--shadow-md);
}

/* ==========================================================================
   迁移兜底 · body.dark（旧页仍在写 body.classList.add("dark")，下一段清理后可删）
   只覆盖旧实现依赖的最小语义集合。
   ========================================================================== */
body.dark {
  --bg-page: #101a19;
  --bg-card: #182624;
  --bg-sunken: #0b1413;
  --bg-elevated: #1f302d;
  --ink-1: #eaf5f2;
  --ink-2: #b3cbc6;
  --ink-3: #93b0ab;
  --ink-4: #6f8d88;
  --border-1: #243b37;
  --border-2: #34524d;
  --border-strong: #5f7f79;
  --brand: #35c9ae;
  --brand-ink: #6fe0c8;
  --on-brand: #04241d;
  --brand-tint: #16302b;
  --brand-tint-2: #142a26;
  --brand-tint-3: #1b302c;
  --ok: #6fe0c8;
  --warn: #e0a53c;
  --warn-tint: #33280f;
  --danger: #ff8a80;
  --danger-tint: #3a1b19;
  --mute: #8aa5a0;
  --mute-tint: #22302e;
  --glass-bg: rgba(24,38,36,0.74);
  --glass-brd: rgba(255,255,255,0.08);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.45);
  --shadow-search: 0 8px 24px -8px rgba(0,0,0,.55);
  --hero-grad: linear-gradient(118deg, #12211f 0%, #182624 55%, #131f2b 100%);
}

/* ==========================================================================
   Layer 2 · semantic（换肤层：只重写这些变量即完成换肤）
   ========================================================================== */

/* 1 · 月华浅色 MoonHalo Light —— 默认。白天前台 + 后台日常 */
html[data-theme="light"] {
  --bg-page: #f6faf9;
  --bg-card: #ffffff;
  --bg-sunken: #eef5f3;
  --bg-elevated: #ffffff;
  --ink-1: #1f3a36;
  --ink-2: #41605b;
  --ink-3: #5b7671;
  --ink-4: #7a9692;
  --border-1: #e2efec;
  --border-2: #cfe3df;
  --border-strong: #6f8d88;
  --border-focus: #1e8f73;
  --brand: #2bb39a;
  --brand-strong: #35c9ae;
  --brand-ink: #17715c;
  --on-brand: #06231d;
  --brand-tint: #e3f9f1;
  --brand-tint-2: #edf7f5;
  --brand-tint-3: #f4faf8;
  --ok: #17715c;
  --ok-tint: #e3f9f1;
  --warn: #8a5906;
  --warn-tint: #fdf4e0;
  --danger: #b13c36;
  --danger-strong: #8f2f2a;
  --danger-tint: #fdeceb;
  --info: #1d5b93;
  --info-tint: #eaf4fe;
  --mute: #53706b;
  --mute-tint: #eef3f2;
  --dot-violet: #7c6cf0;
  --dot-mint: #2bb39a;
  --dot-peach: #ff9a76;
  --dot-sky: #4ba8f5;
  --dot-amber: #ffc44d;
  --dot-pink: #f2719f;
  --note-pink: #f2719f;
  --note-pink-tint: #fdeef4;
  --glass-bg: rgba(255,255,255,0.72);
  --glass-brd: rgba(255,255,255,0.6);
  --shadow-xs: 0 1px 2px rgba(16,42,38,.05);
  --shadow-sm: 0 4px 16px -4px rgba(46,128,115,.08);
  --shadow-md: 0 8px 22px -6px rgba(46,128,115,.12);
  --shadow-lg: 0 20px 50px -12px rgba(16,42,38,.22);
  --shadow-search: 0 8px 24px -8px rgba(46,179,154,.16);
  --shadow-focus: 0 0 0 3px rgba(43,179,154,.28);
  --hero-grad: linear-gradient(118deg, #eefaf7 0%, #ffffff 55%, #f2f8ff 100%);
  --brand-grad: linear-gradient(135deg, #5ee0c0 0%, #3eb8f0 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* 2 · 月华深色 MoonHalo Dark —— 夜间前台 + 夜间后台 */
html[data-theme="dark"] {
  --bg-page: #101a19;
  --bg-card: #182624;
  --bg-sunken: #0b1413;
  --bg-elevated: #1f302d;
  --ink-1: #eaf5f2;
  --ink-2: #b3cbc6;
  --ink-3: #93b0ab;
  --ink-4: #6f8d88;
  --border-1: #243b37;
  --border-2: #34524d;
  --border-strong: #5f7f79;
  --border-focus: #45c1a5;
  --brand: #35c9ae;
  --brand-strong: #5ad6bf;
  --brand-ink: #6fe0c8;
  --on-brand: #04241d;
  --brand-tint: #16302b;
  --brand-tint-2: #142a26;
  --brand-tint-3: #1b302c;
  --ok: #6fe0c8;
  --ok-tint: #16302b;
  --warn: #e0a53c;
  --warn-tint: #33280f;
  --danger: #ff8a80;
  --danger-strong: #ffb0a8;
  --danger-tint: #3a1b19;
  --info: #7cc0f8;
  --info-tint: #12293d;
  --mute: #8aa5a0;
  --mute-tint: #22302e;
  --dot-violet: #9b8dff;
  --dot-mint: #35c9ae;
  --dot-peach: #ffab8c;
  --dot-sky: #63b6f7;
  --dot-amber: #ffd06b;
  --dot-pink: #ff8fb4;
  --note-pink: #ff8fb4;
  --note-pink-tint: #33151f;
  --glass-bg: rgba(24,38,36,0.74);
  --glass-brd: rgba(255,255,255,0.08);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.45);
  --shadow-md: 0 8px 22px -6px rgba(0,0,0,.50);
  --shadow-lg: 0 20px 50px -12px rgba(0,0,0,.65);
  --shadow-search: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-focus: 0 0 0 3px rgba(69,193,165,.35);
  --hero-grad: linear-gradient(118deg, #12211f 0%, #182624 55%, #131f2b 100%);
  --brand-grad: linear-gradient(135deg, #5ad6bf 0%, #63b6f7 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* 3 · 护眼暖沙 Warm Sand —— 后台长时间操作 / 夜间读写，低蓝光 */
html[data-theme="warm"] {
  --bg-page: #f7f1e7;
  --bg-card: #fffdf8;
  --bg-sunken: #f1e8d9;
  --bg-elevated: #fffdf8;
  --ink-1: #3a2f24;
  --ink-2: #5f5040;
  --ink-3: #746247;
  --ink-4: #8f7a5e;
  --border-1: #ece0cd;
  --border-2: #ddccb2;
  --border-strong: #9a8461;
  --border-focus: #9c4517;
  --brand: #ad521f;
  --brand-strong: #8c3f14;
  --brand-ink: #9c4517;
  --on-brand: #ffffff;
  --brand-tint: #fbeade;
  --brand-tint-2: #f6e3d4;
  --brand-tint-3: #faf0e6;
  --ok: #3a7049;
  --ok-tint: #e6f0e4;
  --warn: #8a5906;
  --warn-tint: #f8ecd2;
  --danger: #a8332b;
  --danger-strong: #8a2822;
  --danger-tint: #f8e3df;
  --info: #2c6b93;
  --info-tint: #e4eef5;
  --mute: #635646;
  --mute-tint: #efe9dd;
  --dot-violet: #8a6fc9;
  --dot-mint: #4f8f5f;
  --dot-peach: #d97a45;
  --dot-sky: #3f7fa8;
  --dot-amber: #d99a2b;
  --dot-pink: #c95f7e;
  --note-pink: #c95f7e;
  --note-pink-tint: #f7e3e6;
  --glass-bg: rgba(255,253,248,0.78);
  --glass-brd: rgba(255,255,255,0.55);
  --shadow-xs: 0 1px 2px rgba(58,47,36,.05);
  --shadow-sm: 0 4px 16px -4px rgba(120,80,40,.09);
  --shadow-md: 0 8px 22px -6px rgba(120,80,40,.13);
  --shadow-lg: 0 20px 50px -12px rgba(58,47,36,.22);
  --shadow-search: 0 8px 24px -8px rgba(173,82,31,.16);
  --shadow-focus: 0 0 0 3px rgba(173,82,31,.26);
  --hero-grad: linear-gradient(118deg, #f9f3ea 0%, #fffdf8 55%, #f5ece0 100%);
  --brand-grad: linear-gradient(135deg, #a8481a 0%, #8c3f14 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* 4 · 墨白高对比 Mono Contrast —— 弱视 / 强光 / 无障碍验收（21:1 走廊） */
html[data-theme="mono"] {
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-sunken: #f0f0f0;
  --bg-elevated: #ffffff;
  --ink-1: #000000;
  --ink-2: #1a1a1a;
  --ink-3: #333333;
  --ink-4: #595959;
  --border-1: #d8d8d8;
  --border-2: #000000;
  --border-strong: #000000;
  --border-focus: #000000;
  --brand: #000000;
  --brand-strong: #000000;
  --brand-ink: #000000;
  --on-brand: #ffffff;
  --brand-tint: #eaeaea;
  --brand-tint-2: #f2f2f2;
  --brand-tint-3: #f7f7f7;
  --ok: #0a5c34;
  --ok-tint: #e3efe8;
  --warn: #6b4500;
  --warn-tint: #f7edd8;
  --danger: #9b1c14;
  --danger-strong: #7d130d;
  --danger-tint: #f7e2e0;
  --info: #0b4d8a;
  --info-tint: #e4edf6;
  --mute: #404040;
  --mute-tint: #eeeeee;
  --dot-violet: #2b2b2b;
  --dot-mint: #000000;
  --dot-peach: #4d4d4d;
  --dot-sky: #1a1a1a;
  --dot-amber: #666666;
  --dot-pink: #333333;
  --note-pink: #000000;
  --note-pink-tint: #ececec;
  --glass-bg: rgba(255,255,255,0.86);
  --glass-brd: rgba(0,0,0,0.25);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.10);
  --shadow-sm: 0 2px 0 0 rgba(0,0,0,.04);
  --shadow-md: 0 4px 0 0 rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px -12px rgba(0,0,0,.35);
  --shadow-search: 0 2px 0 0 rgba(0,0,0,.08);
  --shadow-focus: 0 0 0 3px rgba(0,0,0,.55);
  --hero-grad: linear-gradient(118deg, #ffffff 0%, #f7f7f7 55%, #efefef 100%);
  --brand-grad: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* 5 · 极夜靛蓝 Midnight Indigo —— OLED 省电 / 夜间沉浸浏览 */
html[data-theme="indigo"] {
  --bg-page: #0d1020;
  --bg-card: #161b30;
  --bg-sunken: #090b16;
  --bg-elevated: #1d2340;
  --ink-1: #e9ebf7;
  --ink-2: #b6bbd9;
  --ink-3: #969cc0;
  --ink-4: #707699;
  --border-1: #232a45;
  --border-2: #333c5e;
  --border-strong: #5d6a99;
  --border-focus: #8f9dff;
  --brand: #7c8cff;
  --brand-strong: #9aa7ff;
  --brand-ink: #a7b1ff;
  --on-brand: #0a0d1f;
  --brand-tint: #1b2140;
  --brand-tint-2: #181d38;
  --brand-tint-3: #1e2442;
  --ok: #5fd0a0;
  --ok-tint: #12302a;
  --warn: #e3ab4a;
  --warn-tint: #332912;
  --danger: #ff8b92;
  --danger-strong: #ffb3b8;
  --danger-tint: #39191f;
  --info: #79b8ff;
  --info-tint: #14263d;
  --mute: #8f95b8;
  --mute-tint: #20253c;
  --dot-violet: #9b8dff;
  --dot-mint: #5fd0a0;
  --dot-peach: #ff9f7a;
  --dot-sky: #79b8ff;
  --dot-amber: #e3ab4a;
  --dot-pink: #ff8fb4;
  --note-pink: #ff8fb4;
  --note-pink-tint: #331a26;
  --glass-bg: rgba(22,27,48,0.76);
  --glass-brd: rgba(255,255,255,0.1);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,.50);
  --shadow-md: 0 8px 22px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 50px -12px rgba(0,0,0,.70);
  --shadow-search: 0 8px 24px -8px rgba(0,0,0,.60);
  --shadow-focus: 0 0 0 3px rgba(124,140,255,.40);
  --hero-grad: linear-gradient(118deg, #0f1226 0%, #161b30 55%, #10142a 100%);
  --brand-grad: linear-gradient(135deg, #9aa7ff 0%, #7c8cff 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* 6 · 青瓷素白 Celadon Paper —— post.html 长文阅读 / 低刺激 */
html[data-theme="celadon"] {
  --bg-page: #f2f5f1;
  --bg-card: #fbfdfa;
  --bg-sunken: #e8ede6;
  --bg-elevated: #fbfdfa;
  --ink-1: #2a3330;
  --ink-2: #4b5a54;
  --ink-3: #5c7069;
  --ink-4: #7f948c;
  --border-1: #dde6dd;
  --border-2: #c8d6cb;
  --border-strong: #7b9189;
  --border-focus: #3f6f5e;
  --brand: #4f8f78;
  --brand-strong: #5a9d86;
  --brand-ink: #3a6b59;
  --on-brand: #021712;
  --brand-tint: #e4efe9;
  --brand-tint-2: #ecf3ee;
  --brand-tint-3: #f1f6f2;
  --ok: #3a6b59;
  --ok-tint: #e4efe9;
  --warn: #7d5a0a;
  --warn-tint: #f4ecd6;
  --danger: #a83e36;
  --danger-strong: #8a322b;
  --danger-tint: #f6e7e4;
  --info: #2b6690;
  --info-tint: #e5eef4;
  --mute: #556a63;
  --mute-tint: #e9efec;
  --dot-violet: #7d76b8;
  --dot-mint: #4f8f78;
  --dot-peach: #cf8862;
  --dot-sky: #4d86a8;
  --dot-amber: #b98a2e;
  --dot-pink: #c46b86;
  --note-pink: #c46b86;
  --note-pink-tint: #f2e6ea;
  --glass-bg: rgba(251,253,250,0.8);
  --glass-brd: rgba(255,255,255,0.6);
  --shadow-xs: 0 1px 2px rgba(42,51,48,.05);
  --shadow-sm: 0 4px 16px -4px rgba(79,143,120,.08);
  --shadow-md: 0 8px 22px -6px rgba(79,143,120,.12);
  --shadow-lg: 0 20px 50px -12px rgba(42,51,48,.20);
  --shadow-search: 0 8px 24px -8px rgba(79,143,120,.15);
  --shadow-focus: 0 0 0 3px rgba(79,143,120,.28);
  --hero-grad: linear-gradient(118deg, #eef2ec 0%, #fbfdfa 55%, #eef3ee 100%);
  --brand-grad: linear-gradient(135deg, #6fae96 0%, #4f8f78 100%);
  --scrollbar-thumb: var(--border-2);
  --scrollbar-track: var(--bg-sunken);
  --danger-soft-bg: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* ==========================================================================
   无障碍与原生控件（Phase 1 §10 · Phase 2 §9.4）
   放在主题块之后，保证 prefers-contrast 覆盖六套主题的描边令牌。
   ========================================================================== */

/* color-scheme：让滚动条、input[type=color]、number 微调、日期选择器等原生控件跟随主题
   （选择器用 :root 加 data-theme 属性，而不是 html 元素的同名属性选择器符，
    避免干扰 grep 对「六套主题块」的计数） */
:root { color-scheme: light; }
:root[data-theme="dark"],
:root[data-theme="indigo"] { color-scheme: dark; }

/* 选中文字：背景 brand-tint、文字用 --brand-ink（⛔ 不用 --brand 作文字色） */
::selection { background: var(--brand-tint); color: var(--brand-ink); }

/* 页面级滚动条主题化（此前只有 admin.css:1286-1297 对 .h-issues 做了局部处理） */
html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: var(--scrollbar-track); }
html::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
  border: 2px solid var(--scrollbar-track);
}

/* 降低动效：关掉主题切换过渡与抬升位移（!important 用于覆盖页面 CSS 里的 :hover transform，
   页面 CSS 在 tokens.css 之后加载，源码顺序对本规则不利） */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .note, .site, .rcard, .chip, .icon-toggle, .quote-roll,
  .btn-submit, .pgsend, .btn-goto { transition: none; }
  .note:hover, .site:hover, .rcard:hover, .btn-submit:hover,
  .pgsend:hover, .btn-goto:hover, .quote-roll:hover { transform: none !important; }
}

/* 高对比偏好：装饰性描边提升为必需边界（≥3:1），焦点环加粗 */
@media (prefers-contrast: more) {
  :root, html[data-theme] { --border-1: var(--border-strong); --border-2: var(--border-strong); }
  :focus-visible { outline: 2px solid var(--border-focus); }
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* 吸顶导航条（.topbar / .rank-top）后，锚点跳转要多滚一条顶栏的高度，
     否则 #cats 这类目标顶部会被吸顶条盖住（2026-10-06）。
     76px ≈ topbar 总高 65px + 11px 呼吸。 */
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-1);
  font-family: var(--font-cn);
  font-size: 14px;
  /* Phase 1 §4：正文行高 1.6（旧值 1.5，提升中文可读性） */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   通用原子
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.card-surface {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
}

.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;
}

/* ---------- 站点图标：撑满容器（唯一公共定义）----------
   ⛔⛔ 必须放在 tokens.css 而不是 home.css —— tokens.css 是**所有页面**都加载的
   （goto.html / admin.html 都不加载 home.css，放那儿等于规则失效）。
   2026-10-05 修「图标不撑满容器」：原来 JS 按调用方传入的 size（17/22/28px）
   写死内联 width/height，而容器有 44/56px 几种尺寸 →
   小图摆在大框里、四周留白（用户截图报障）。

   现在 JS 不再写尺寸，统一交给 CSS：
     · img → width/height:100% + object-fit:cover  → 填满、不变形、无留白
     · svg → 同一套，保证「有图 / 没图」两种分支视觉完全一致

   object-fit 为什么选 cover 而不是 contain：
   contain 能完整显示非正方形图标，但会留白（就是原来的毛病）。
   本站图标是 32×32 归一化过的，cover 与 contain 几乎无差，
   而 cover 对偶发的非正方形 .ico 更稳（宁可裁一点也不留一圈）。 */
.siteimg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  background: transparent;
}

/* ⛔⛔⛔ 2026-10-05 22:1x 修回归：这里原来还有一条 `.siteicon-svg` 的同款规则，
   错在**它是全局选择器** —— icon() 被 18 处调用（#searchIcon / #themeBtn /
   #noteIcon …），那些容器根本没设尺寸，于是 width:100% 让 SVG 去填父容器：
   中转页顶部那个「说明」图标实测被撑到 300×300（原本 18×18），
   在页面上是一个巨大的绿色圆圈。

   正确的边界：撑满容器的只有**站点图标**（siteIcon 的两分支），
   而它们必然在 .site__icon / .gp-card__icon / .rcard__icon / .rel-item__icon
   这些固定尺寸容器里。所以规则挂容器，不挂全局类名。 */
.site__icon > .siteicon-svg,
.gp-card__icon > .siteicon-svg,
.rcard__icon > .siteicon-svg,
.rel-item__icon > .siteicon-svg,
.st-tile__icon > .siteicon-svg,
.st-dock__icon > .siteicon-svg,
.site__icon > .siteimg,
.gp-card__icon > .siteimg,
.rcard__icon > .siteimg,
.rel-item__icon > .siteimg,
.st-tile__icon > .siteimg,
.st-dock__icon > .siteimg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0;
}

/* 容器统一约定：图标永远正方形 + 裁掉溢出。
   ⛔ overflow:hidden 是必需的 —— cover 会把超出部分裁到容器外，
   没有它图标就会溢出去（用户截图里"图标偏出框"的原因之一）。 */
.site__icon,
.rcard__icon,
.gp-card__icon,
.rel-item__icon,
.st-tile__icon,
.st-dock__icon {
  overflow: hidden;
  position: relative;
}