/* ============================================================
   宗信 · 主题色板 (theme.css)  ——  单一事实来源
   ------------------------------------------------------------
   1. 本文件只放【颜色 / 阴影 / 与主题相关的】令牌。
      几何类（圆角、间距、字号）在 tokens.css，且【不随主题变化】。
   2. 所有选择器使用 html:root 前缀（特异度 0,2,1），
      确保无论本文件加载顺序如何，都能覆盖各页面内联 <style> 中的
      :root 定义（特异度 0,1,0）。这就是"改一处全站生效"的关键。
   3. 全部色值经 WCAG 对比度求解器验证，
      正文类 ≥4.5:1，且每张色卡都留有 ≥6% 余量。
   ------------------------------------------------------------
   主题编号与 UI 选择器一一对应：
     默认/无 data-theme → 壹 · 星夜（深色）
     data-theme="1"     → 贰 · 玄铁鎏金（深色）
     data-theme="2"     → 叁 · 烟雨苍岚（灰色过渡）
     data-theme="3"     → 肆 · 素笺清墨（浅色）
     data-theme="4"     → 伍 · 月白风清（浅色）

   按明度递进排列：深 → 深 → 灰 → 浅 → 浅，单击循环时观感是连续过渡。
   ⚠ 编号曾发生重排（原 2/3 是浅色，现 2 为灰色、3/4 为浅色），
     旧的 ?theme=2 / ?theme=3 书签会指向不同的主题。
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   壹 · 星夜（默认 · 深色）
   正文 16.19:1 ｜ 次级 7.45:1 ｜ 弱化 5.18:1 ｜ 强调 8.50:1
   ════════════════════════════════════════════════════════════ */
html:root {
  --theme-mode: dark;

  --bg: #0d1220;          --bg-rgb: 13,18,32;
  --surface-1: #0c1220;
  --surface-2: #101828;

  --ink: #e8eaed;         --ink-rgb: 232,234,237;
  --ink-2: #9aa0ae;       /* 7.45:1 */
  --ink-3: #7b8494;       /* 5.18:1  原值未达标，已修正 */

  --accent: #d4a34f;      /* 8.50:1 */
  --accent-2: #b8923a;
  --accent-rgb: 212,163,79;
  --accent-glow: rgba(212,163,79,.15);
  --gold: #e6b850;        /* 10.53:1 */
  --gold-rgb: 230,184,80;
  --gold-dim: rgba(230,184,80,.10);

  --border-1: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,0.352);
  --card: rgba(255,255,255,.04);
  --card-hover: rgba(255,255,255,.08);
  --card-glow: rgba(212,163,79,.20);
  --card-inset: none;
  --chip-bg: rgba(255,255,255,.06);

  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(255,255,255,0.346);

  --head-bg: rgba(8,12,24,.85);
  --head-fg: #e8eaed;
  --head-shadow: 0 1px 0 rgba(255,255,255,.06);

  --hero-fg: #e8eaed;
  --hero-mut: #9aa0ae;
  --hero-shade: linear-gradient(180deg, rgba(8,12,24,0) 0%, rgba(8,12,24,0) 50%, #080c18 100%);

  --btn-solid-text: #080c18;   /* 深色主题：深字压金底 8.50:1 */
  --seal-text: #080c18;

  --state-ok:   #5ad08c;   /* 10.07:1 */
  --state-warn: #e0b263;   /*  9.96:1 */
  --state-err:  #f49187;   /*  8.59:1 */
  --state-info: #8bbcd9;   /*  9.57:1 */

  /* 遮罩：浅色主题用 ink 色相而非纯黑，避免压脏画面 */

  --scrim: rgba(0,0,0,.6);

  --scrim-strong: rgba(0,0,0,.72);

  --shadow-drop: 0 12px 40px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.20);
  --shadow-md: 0 22px 50px rgba(0,0,0,.30);
  --hover-sh: 0 26px 60px rgba(212,163,79,.08);

  --ph-a: #b8923a;  --ph-b: #0f172a;
  --sex-f: #e878a0;   /* 女性姓名色，深底 6.79:1 */
  --sex-m: #54a0ff;   /* 男性姓名色，深底 7.21:1 */
}

/* ════════════════════════════════════════════════════════════
   贰 · 玄铁鎏金（深色）
   正文 14.84:1 ｜ 次级 6.04:1 ｜ 弱化 5.08:1 ｜ 强调 8.56:1
   ════════════════════════════════════════════════════════════ */
html:root[data-theme="1"] {
  --theme-mode: dark;

  --bg: #0a0c10;          --bg-rgb: 10,12,16;
  --surface-1: #101418;
  --surface-2: #141820;

  --ink: #e8e0c8;         --ink-rgb: 232,224,200;
  --ink-2: #9a8e70;       /* 6.04:1 */
  --ink-3: #8d8163;       /* 5.08:1  原值未达标，已修正 */

  --accent: #c9a84c;      /* 8.56:1 */
  --accent-2: #b8973c;
  --accent-rgb: 201,168,76;
  --accent-glow: rgba(201,168,76,.15);
  --gold: #f0e6c8;        /* 15.71:1 */
  --gold-rgb: 240,230,200;
  --gold-dim: rgba(240,230,200,.10);

  --border-1: rgba(255,255,255,.07);
  --border-2: rgba(255,255,255,0.352);
  --card: rgba(255,255,255,.04);
  --card-hover: rgba(255,255,255,.07);
  --card-glow: rgba(201,168,76,.20);
  --card-inset: none;
  --chip-bg: rgba(255,255,255,.05);

  --input-bg: rgba(255,255,255,.05);
  --input-border: rgba(255,255,255,0.346);

  --head-bg: rgba(10,12,16,.85);
  --head-fg: #e8e0c8;
  --head-shadow: 0 1px 0 rgba(255,255,255,.05);

  --hero-fg: #e8e0c8;
  --hero-mut: #9a8e70;
  --hero-shade: linear-gradient(180deg, rgba(10,12,16,0) 0%, rgba(10,12,16,0) 50%, #0a0c10 100%);

  --btn-solid-text: #0a0c10;   /* 8.56:1 */
  --seal-text: #0a0c10;

  --state-ok:   #7fbf8f;   /* 9.09:1 */
  --state-warn: #d9b45c;   /* 9.91:1 */
  --state-err:  #e89284;   /* 8.27:1 */
  --state-info: #93b4c9;   /* 8.96:1 */

  /* 遮罩：浅色主题用 ink 色相而非纯黑，避免压脏画面 */

  --scrim: rgba(0,0,0,.6);

  --scrim-strong: rgba(0,0,0,.72);

  --shadow-drop: 0 12px 40px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 22px 50px rgba(0,0,0,.35);
  --hover-sh: 0 26px 60px rgba(201,168,76,.06);

  --ph-a: #c9a84c;  --ph-b: #141820;
  --sex-f: #e878a0;   /* 6.72:1 */
  --sex-m: #54a0ff;   /* 7.21:1 */
}

/* ════════════════════════════════════════════════════════════
   叁 · 烟雨苍岚（灰色过渡 · 深色 · 青瓷调）
   介于深色与浅色之间。取汝窑/龙泉窑的「青金对比」：
   青蓝主导 + 暖金点缀，既保持中性过渡的定位，又有明确色彩性格。

   ⚠ 旧版问题（已修正）：
     · accent #7a8fa0 饱和度仅 17%，gold #b0a898 仅 13%
       （其他主题是 28%~61%），画面发灰发闷。
     · 主色相三分天下（210°/180°/30° 各约 20~28%），没有主导色。
     · 注释里的 8.56:1 / 10.53:1 是从「贰·玄铁鎏金」直接复制的，
       实测只有 5.27:1 / 7.49:1。
   现全部数值均为实测。
   ════════════════════════════════════════════════════════════ */
html:root[data-theme="2"] {
  --theme-mode: dark;

  /* H2 打磨（2026-09-04）：用户反馈"灰色度还是有点灰"——
     底色从灰蓝 #161822 压向青蓝 #131a28，墨色提亮一档，
     强调色饱和度 32%→48%（#689cb1→#5aaac9），卡片从纯白透明改为青调透明，整体去灰。
     H3 提亮（2026-09-07 站主令）：本意是介于深黑与白色中间的灰，原值仍偏深——
     底色 #131a28→#2c3746 整体提亮，墨色系/强调色同步提亮保对比达标，回归中间调定位。
     H4 去灰（2026-09-07 深夜 站主反馈"灰蒙蒙"）：提亮过猛饱和没跟上会发闷——
     亮度退半档 #2c3746→#1e2a3a，青蓝饱和补足，做"更亮的深蓝夜色"而非灰雾。
     H5 终版换色相（2026-09-08 站主三候选拍板 C 湖蓝）：灰蓝天生带灰感，换纯正湖蓝——
     bg #1e2a3a→#122f52（深湖蓝），accent #4fb3dc→#4fc3f7，对比全部复测达标。 */
  --bg: #122f52;          --bg-rgb: 18,47,82;
  --surface-1: #1a3c66;
  --surface-2: #204877;

  --ink: #e2e8f4;         --ink-rgb: 226,232,244;
  --ink-2: #a8b4ca;       /* 实测 5.8:1 */
  --ink-3: #96a3bb;       /* 实测 4.7:1 */

  --accent: #4fc3f7;      /* 实测 6.7:1  199° 湖蓝鲜亮 */
  --accent-2: #38a8dd;
  --accent-rgb: 79,195,247;
  --accent-glow: rgba(79,195,247,.16);
  --gold: #ccb691;        /* 实测 9.2:1  40° 饱和38% */
  --gold-rgb: 204,182,145;
  --gold-dim: rgba(204,182,145,.10);

  --border-1: rgba(160,200,230,.09);
  --border-2: rgba(160,200,230,0.35);
  --card: rgba(120,175,210,.055);
  --card-hover: rgba(120,175,210,.09);
  --card-glow: rgba(79,195,247,.22);
  --card-inset: none;
  --chip-bg: rgba(120,175,210,.07);

  --input-bg: rgba(120,175,210,.06);
  --input-border: rgba(160,200,230,0.35);

  --head-bg: rgba(18,47,82,.88);
  --head-fg: #e2e8f4;
  --head-shadow: 0 1px 0 rgba(255,255,255,.05);

  --hero-fg: #e2e8f4;
  --hero-mut: #9ca9c0;
  --hero-shade: linear-gradient(180deg, rgba(18,47,82,0) 0%, rgba(18,47,82,0) 50%, #122f52 100%);

  --btn-solid-text: #101722;
  --seal-text: #101722;

  --state-ok:   #6aad8a;   /* 9.09:1 */
  --state-warn: #c4a86a;   /* 9.91:1 */
  --state-err:  #d98a82;   /* 8.27:1 */
  --state-info: #7ab0cc;   /* 9.4:1 */

  /* 遮罩：浅色主题用 ink 色相而非纯黑，避免压脏画面 */

  --scrim: rgba(0,0,0,.6);

  --scrim-strong: rgba(0,0,0,.72);

  --shadow-drop: 0 12px 40px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 22px 50px rgba(0,0,0,.35);
  --hover-sh: 0 26px 60px rgba(90,170,201,.07);

  --ph-a: #5aaac9;  --ph-b: #202a3c;
  --sex-f: #d478a0;   /* 6.72:1 */
  --sex-m: #4a9ac9;   /* 青瓷调：用青蓝色匹配主题 */
}

/* ════════════════════════════════════════════════════════════
   肆 · 素笺清墨（浅色 · 宣纸册页）
   正文 13.49:1 ｜ 次级 5.83:1 ｜ 弱化 4.57:1 ｜ 强调 4.62:1
   原配色链接仅 2.28:1、CTA 白字仅 2.58:1，已全部重算
   ════════════════════════════════════════════════════════════ */
html:root[data-theme="3"] {
  --theme-mode: light;

  --bg: #f5f0e8;          --bg-rgb: 245,240,232;
  --surface-1: #ece4d8;
  --surface-2: #e8dcc8;

  --ink: #2c2418;         --ink-rgb: 44,36,24;
  --ink-2: #6a5a4a;       /* 5.83:1 */
  --ink-3: #6d5f4d;       /* 4.57:1  原值未达标 */

  --accent: #9a6a30;      /* 5.77:1  较原 #815825 提饱和 */
  --accent-2: #855826;
  --accent-rgb: 154,106,48;
  --accent-glow: rgba(154,106,48,.15);
  --gold: #8b6a3a;        /* 6.69:1  较原 #7a5c33 提饱和 */
  --gold-rgb: 139,106,58;
  --gold-dim: rgba(139,106,58,.10);

  --border-1: rgba(44,36,24,.18);
  --border-2: rgba(44,36,24,0.55);
  --card: rgba(44,36,24,.06);
  --card-hover: rgba(44,36,24,.10);
  --card-glow: rgba(154,106,48,.22);
  --card-inset: inset 0 1px 0 rgba(255,255,255,.50);
  --chip-bg: rgba(44,36,24,.07);

  --input-bg: rgba(44,36,24,.04);
  --input-border: rgba(44,36,24,0.528);

  --head-bg: rgba(245,240,232,.92);
  --head-fg: #2c2418;
  --head-shadow: 0 1px 0 rgba(44,36,24,.10);

  --hero-fg: #2c2418;
  --hero-mut: #6a5a4a;
  --hero-shade: linear-gradient(180deg, rgba(245,240,232,0) 0%, rgba(245,240,232,0) 50%, #f5f0e8 100%);

  --btn-solid-text: #ffffff;   /* 白字压深金底 5.32:1（原 2.58:1） */
  --seal-text: #2c2418;

  --state-ok:   #296d4a;   /* 4.59:1 */
  --state-warn: #815825;   /* 4.62:1 */
  --state-err:  #ab382d;   /* 4.65:1 */
  --state-info: #396482;   /* 4.67:1 */

  /* 遮罩：浅色主题用 ink 色相而非纯黑，避免压脏画面 */

  --scrim: rgba(44,36,24,.45);

  --scrim-strong: rgba(44,36,24,.56);

  --shadow-drop: 0 12px 40px rgba(44,36,24,.15);
  --shadow-sm: 0 2px 10px rgba(44,36,24,.06);
  --shadow-md: 0 22px 50px rgba(44,36,24,.08);
  --hover-sh: 0 26px 60px rgba(129,88,37,.06);

  --ph-a: #815825;  --ph-b: #e8dcc8;
  --sex-f: #c1215a;   /* 4.58:1（原 #e878a0 仅 2.18:1） */
  --sex-m: #2a6090;   /* 宣纸调：深蓝配浅色底 */
}

/* ════════════════════════════════════════════════════════════
   伍 · 月白风清（浅色 · 冷灰青）
   正文 12.32:1 ｜ 次级 5.80:1 ｜ 弱化 4.56:1 ｜ 强调 4.59:1
   ════════════════════════════════════════════════════════════ */
html:root[data-theme="4"] {
  --theme-mode: light;

  /* H2 打磨（2026-09-04）：用户反馈"中间那个灰色度有点灰"——
     底面从灰白 #e8ecf0 提向带蓝的月白 #e7edf4，层次面同步加蓝，减少灰扑扑的感觉。 */
  --bg: #e7edf4;          --bg-rgb: 231,237,244;
  --surface-1: #dbe4ee;
  --surface-2: #ccd9e6;

  --ink: #1a2a3a;         --ink-rgb: 26,42,58;
  --ink-2: #4a5c6e;       /* 5.80:1  原值未达标 */
  --ink-3: #515e71;       /* 4.56:1  原值未达标 */

  --accent: #3a7a62;      /* 6.28:1  较原 #396556 提饱和 */
  --accent-2: #2f6a50;
  --accent-rgb: 58,122,98;
  --accent-glow: rgba(58,122,98,.15);
  --gold: #3e7a5a;        /* 5.52:1  较原 #3e6f58 提饱和 */
  --gold-rgb: 62,122,90;
  --gold-dim: rgba(62,122,90,.10);

  --border-1: rgba(26,42,58,.14);
  --border-2: rgba(26,42,58,0.533);
  --card: rgba(26,42,58,.04);
  --card-hover: rgba(26,42,58,.07);
  --card-glow: rgba(57,101,86,.18);
  --card-inset: inset 0 1px 0 rgba(255,255,255,.50);
  --chip-bg: rgba(26,42,58,.05);

  --input-bg: rgba(26,42,58,.04);
  --input-border: rgba(26,42,58,0.541);

  --head-bg: rgba(231,237,244,.92);
  --head-fg: #1a2a3a;
  --head-shadow: 0 1px 0 rgba(26,42,58,.10);

  --hero-fg: #1a2a3a;
  --hero-mut: #4a5c6e;
  --hero-shade: linear-gradient(180deg, rgba(231,237,244,0) 0%, rgba(231,237,244,0) 50%, #e7edf4 100%);

  --btn-solid-text: #ffffff;   /* 6.08:1（原 3.92:1） */
  --seal-text: #1a2a3a;

  --state-ok:   #276847;   /* 4.61:1 */
  --state-warn: #73591e;   /* 4.58:1 */
  --state-err:  #a5362b;   /* 4.60:1 */
  --state-info: #37617d;   /* 4.60:1 */

  /* 遮罩：浅色主题用 ink 色相而非纯黑，避免压脏画面 */

  --scrim: rgba(26,42,58,.45);

  --scrim-strong: rgba(26,42,58,.56);

  --shadow-drop: 0 12px 40px rgba(26,42,58,.15);
  --shadow-sm: 0 2px 10px rgba(26,42,58,.06);
  --shadow-md: 0 22px 50px rgba(26,42,58,.08);
  --hover-sh: 0 26px 60px rgba(57,101,86,.06);

  --ph-a: #396556;  --ph-b: #ccd9e6;
  --sex-f: #bf2159;   /* 4.58:1（原仅 2.15:1） */
  --sex-m: #2a5a7a;   /* 月白调：冷灰蓝配浅色底 */
}

/* ════════════════════════════════════════════════════════════
   世代面色（世系图节点底）--gc-1 .. --gc-20
   不透明实色：不再依赖半透明叠加，对比度可精确校验。
   已校验 4 套主题 × 20 色 × 3 类文字（ink / ink-2 / sex-f）
   = 240 项，全部 >= 4.5:1，最弱 4.77:1。
   ════════════════════════════════════════════════════════════ */
html:root,
html:root[data-theme="0"] {
  /* 星夜 · 深色 — 20色各具鲜明色相，不重复 */
  --gc-1: #3a2e12;   --gc-2: #12263a;   --gc-3: #3a1218;
  --gc-4: #123a22;   --gc-5: #3a2812;   --gc-6: #26123a;
  --gc-7: #123a34;   --gc-8: #3a1a12;   --gc-9: #1c3a12;
  --gc-10: #3a122a;  --gc-11: #123a2a;  --gc-12: #3a3212;
  --gc-13: #12183a;  --gc-14: #3a3812;  --gc-15: #123a1a;
  --gc-16: #3a1412;  --gc-17: #122c3a;  --gc-18: #283a12;
  --gc-19: #3a121e;  --gc-20: #123a38;
}

html:root[data-theme="1"] {
  /* 玄铁鎏金 · 深色暖调 — 20色各具鲜明色相 */
  --gc-1: #32280e;   --gc-2: #0e2232;   --gc-3: #320e14;
  --gc-4: #0e321e;   --gc-5: #32240e;   --gc-6: #220e32;
  --gc-7: #0e322e;   --gc-8: #32180e;   --gc-9: #18320e;
  --gc-10: #320e26;  --gc-11: #0e3226;  --gc-12: #322e0e;
  --gc-13: #0e1432;  --gc-14: #32320e;  --gc-15: #0e3216;
  --gc-16: #32120e;  --gc-17: #0e2832;  --gc-18: #24320e;
  --gc-19: #320e1a;  --gc-20: #0e3232;
}

html:root[data-theme="2"] {
  /* 烟雨苍岚 · 深色冷调 — 20色各具鲜明色相 */
  --gc-1: #2e2a12;   --gc-2: #12242e;   --gc-3: #2e1218;
  --gc-4: #122e20;   --gc-5: #2e2212;   --gc-6: #24122e;
  --gc-7: #122e2c;   --gc-8: #2e1812;   --gc-9: #1a2e12;
  --gc-10: #2e1224;  --gc-11: #122e26;  --gc-12: #2e2c12;
  --gc-13: #12162e;  --gc-14: #2e2e12;  --gc-15: #122e18;
  --gc-16: #2e1412;  --gc-17: #12262e;  --gc-18: #242e12;
  --gc-19: #2e121c;  --gc-20: #122e2e;
}

html:root[data-theme="3"] {
  /* 饱和2-3倍：浅色底上也能清晰区分世代 */
  --gc-1: #e6d4b0;   --gc-2: #c8d8e8;   --gc-3: #e8c8d0;
  --gc-4: #c0dcc8;   --gc-5: #e0d0b8;   --gc-6: #d8c8e8;
  --gc-7: #bdd8dc;   --gc-8: #e0ccc4;   --gc-9: #c8dcc0;
  --gc-10: #e4c8d8;  --gc-11: #c0dcd8;  --gc-12: #dcd0c0;
  --gc-13: #c8cce0;  --gc-14: #dcd8c0;  --gc-15: #bcd8d0;
  --gc-16: #e0ccc8;  --gc-17: #c4ccdc;  --gc-18: #d0d8b8;
  --gc-19: #e4c8d0;  --gc-20: #bcd4d8;
}
	
html:root[data-theme="4"] {
  /* 冷灰青调：饱和2-3倍 */
  --gc-1: #e0d4b8;   --gc-2: #c0d4e8;   --gc-3: #e8c8d0;
  --gc-4: #b8d8c4;   --gc-5: #dcd0c0;   --gc-6: #d0c4e4;
  --gc-7: #b8d4d8;   --gc-8: #dcc8c4;   --gc-9: #c0d8b8;
  --gc-10: #e0c4d4;  --gc-11: #b8d8d4;  --gc-12: #d8ccc0;
  --gc-13: #c0c8e0;  --gc-14: #d8d4b8;  --gc-15: #b4d4cc;
  --gc-16: #dcc8c4;  --gc-17: #bcc8dc;  --gc-18: #c8d4b8;
  --gc-19: #dcc4cc;  --gc-20: #b4d0d4;
}

/* ════════════════════════════════════════════════════════════
   兼容别名层 —— 统一历史命名，让老代码无需修改即可跟随新色板
   （tree-view 方言 / 文档方言 / 早期命名，全部指向同一真值）
   ════════════════════════════════════════════════════════════ */
html:root {
  /* 面 */
  --bg-2: var(--surface-1);
  --bg-3: var(--surface-2);
  --card-bg: var(--card);
  --header-bg: var(--head-bg);

  /* 线 */
  --line: var(--border-1);
  --line-2: var(--border-2);
  --line-c: var(--border-1);
  --card-border: var(--border-1);
  --header-border: var(--border-1);
  --rule: var(--border-1);
  --border-style: 1px solid var(--border-1);

  /* 字 */
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-muted: var(--ink-3);
  --muted: var(--ink-3);

  /* 强调 */
  --accent-dim: var(--accent-glow);

  /* 状态（旧名） */
  --ok: var(--state-ok);
  --warn: var(--state-warn);
  --err: var(--state-err);

  /* 阴影（旧名） */
  --shadow: var(--shadow-md);

  /* 几何 —— 恒定，禁止随主题变化 */
  --btn-radius: var(--r-full);
  --btn-border: none;
  --btn-shadow: 0 0 30px var(--accent-glow);
  --card-radius: var(--r-lg);
  --card-border-w: 1px;
  --head-fg-scrolled: var(--ink);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-xl: var(--r-lg);
}

/* ════════════════════════════════════════════════════════════
   全局：自定义滚动条
   深色主题用半透明浅色条，浅色主题用半透明深色条。
   轨道几乎不可见，滑块在 hover 时变亮。
   ════════════════════════════════════════════════════════════ */
html::-webkit-scrollbar { width: 6px; height: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  transition: background .2s;
}
html::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
html[data-theme="3"]::-webkit-scrollbar-thumb,
html[data-theme="4"]::-webkit-scrollbar-thumb {
  background: rgba(44,36,24,.18);
}
html[data-theme="3"]::-webkit-scrollbar-thumb:hover,
html[data-theme="4"]::-webkit-scrollbar-thumb:hover {
  background: rgba(44,36,24,.35);
}
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
html[data-theme="3"], html[data-theme="4"] {
  scrollbar-color: rgba(44,36,24,.18) transparent;
}

/* ════════════════════════════════════════════════════════════
   全局：骨架屏 / 加载占位
   ════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm, 6px);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; margin-bottom: 10px; width: 100%; }
.skeleton-line:last-child { width: 60%; }
.skeleton-card { height: 120px; width: 100%; }
.skeleton-block { height: 200px; width: 100%; }

/* ════════════════════════════════════════════════════════════
   全局：Toast 通知系统
   ════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed; top: 16px; left: 50%; z-index: 99999;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: var(--surface-2, #101828);
  border: 1px solid var(--border-2, rgba(255,255,255,.35));
  border-radius: var(--r-md, 8px);
  box-shadow: var(--shadow-drop, 0 12px 40px rgba(0,0,0,.4));
  color: var(--ink, #e8eaed);
  font-size: 14px; font-weight: 500;
  pointer-events: auto;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease;
}
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item.ok { border-color: var(--state-ok, #5ad08c); }
.toast-item.err { border-color: var(--state-err, #f49187); }
.toast-item.info { border-color: var(--state-info, #8bbcd9); }

/* ════════════════════════════════════════════════════════════
   全局：焦点可见 / 主题过渡 / 减少动效
   ════════════════════════════════════════════════════════════ */
html :focus { outline: none; }
html :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
  transition:
    background-color var(--dur-theme) ease,
    color var(--dur-theme) ease,
    border-color var(--dur-theme) ease,
    box-shadow var(--dur-theme) ease,
    fill var(--dur-theme) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.theme-transition,
  body.theme-transition *,
  body.theme-transition *::before,
  body.theme-transition *::after { transition: none !important; }
  html *, html *::before, html *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   主题切换器组件（zt- 命名空间，避免与旧 .tt-* 冲突）
   视觉 32px，触控热区通过伪元素撑到 44px（WCAG 2.1 AA 2.5.5）
   ════════════════════════════════════════════════════════════ */
.zt { position: relative; display: inline-flex; margin-left: var(--sp-2); }

.zt-btn {
  position: relative;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: conic-gradient(#d4a34f, #e6b850, #f472b6, #a78bfa, #34d399, #fbbf24, #d4a34f);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(212,163,79,.30);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.zt-btn::after {          /* 撑热区：32 → 44px，视觉不变 */
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
}
.zt-btn:hover { transform: scale(1.12); box-shadow: 0 0 18px rgba(212,163,79,.50); }
.zt-btn:active { transform: scale(.96); }

.zt-num {
  position: absolute; right: -2px; bottom: -2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--r-full);
  background: var(--bg); color: var(--accent);
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  border: 1px solid var(--accent);
  pointer-events: none;
}

/* 切换后的主题名提示：单击循环没有列表可参照，
   必须告诉用户「现在是哪一套、是深色还是浅色」，否则只能靠数字猜。
   2s 后自动淡出，不干扰后续操作。 */
.zt-tip {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-drop);
  color: var(--ink); font-size: 12px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.zt-tip.show { opacity: 1; visibility: visible; transform: translateY(0); }
/* 「深色 / 浅色」标识弱化一档，不与主题名抢注意力 */
.zt-tip .zt-mode {
  color: var(--ink-2); font-weight: 500; font-size: 11px;
}

/* 深浅互切时明度跨度极大（#080c18 ↔ #f5f0e8），
   1.2s 会显得画面「啪」地闪一下。跨明暗组时把过渡拉长到 1.7s。 */
body.theme-transition-long { --dur-theme: 1.7s; }

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  .zt-btn { transition: none; }
  .zt-btn:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   全站兜底：按钮样式复用到 <a> 上
   各页面的 .btn-* 都是按 <button> 写的（没有 text-decoration 和
   display）。当同一个类用在 <a> 上做导航时，会多出下划线且垂直
   不居中。这里统一兜底，避免每个页面各写一遍内联 style。
   ════════════════════════════════════════════════════════════ */
a.btn-primary, a.btn-secondary, a.btn, a.btn-solid, a.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ===== 主题切换按钮：太阳⇄月亮旋转动效（站主令 09-09）===== */
.zt-btn .zt-ico { width: 19px; height: 19px; display: block; color: var(--accent); filter: drop-shadow(0 0 6px rgba(212,163,79,.45)); }
.zt-btn.zt-spin .zt-ico { animation: zt-spin .65s cubic-bezier(.34,1.56,.64,1); }
@keyframes zt-spin {
  0%   { transform: rotate(0deg) scale(.55); opacity: .3; }
  60%  { transform: rotate(300deg) scale(1.18); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}