/* ════════════════════════════════════════════════════════════
   通千算智 · 总官网 v4 —— 八主题系统（右上角切换，localStorage 记忆）
   deep     深空（默认）：对标 Linear —— 深海军黑 + 品牌霓虹渐变 + 光晕
   obsidian  曜黑：对标 Vercel —— 纯黑高对比极简
   raycast   熔岩：对标 Raycast —— 暗底红橙渐变光晕
   github    暗夜：对标 GitHub —— 开发者暗色 #0d1117 + 蓝紫光谱
   supabase  翠夜：对标 Supabase —— 暗底荧光翠绿
   aurora    流光：对标 Stripe —— 亮底彩色 mesh 渐变
   platinum  铂金：对标 Apple —— 苹果官方亮色 + 胶囊按钮
   day       晨白：对标 Notion —— 清爽亮色
   品牌渐变血统：logo.svg 的 #22D3EE → #3B82F6 → #A855F7
   ════════════════════════════════════════════════════════════ */

/* ── 深空 deep（默认主题） ─────────────────────────────── */
:root {
  /* 品牌软底色：随各主题 --brand 自动派生（下载盒/场景 chip/hover 共用） */
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --paper: #070c18;
  --wash: #0a1120;
  --card: rgba(148, 163, 184, 0.05);
  --card-hi: rgba(148, 163, 184, 0.09);
  --line: rgba(148, 163, 184, 0.16);
  --line-hi: rgba(148, 163, 184, 0.34);
  --ink: #e9eef8;
  --body: #b9c5da;
  --muted: #8fa0bc;
  /* R118：小字号说明文字落在 --card / 半透明面板上时，原 #6e7e9c 实测 4.33:1 < 4.5，
     提亮到 4.95:1（仍明显暗于 --muted #8fa0bc 的 6.68:1，层级不变） */
  --dim: #7888a6;  /* #309-matrix */
  --brand: #6ea8ff;
  --brand-strong: #9cc3ff;
  /* R118：小字号「品牌色文字」专用。--brand 是装饰色，部分主题当正文用不够 4.5:1；
     需要文字功能的地方一律用 --brand-text，默认等于 --brand，低对比主题逐个收紧 */
  --brand-text: var(--brand);
  --teal: #22d3ee;
  --violet: #a855f7;
  --live: #34d399;
  --warn: #fbbf24;
  --down: #f87171;
  --grad: linear-gradient(135deg, #22d3ee, #3b82f6 55%, #a855f7);
  --selection: rgba(59, 130, 246, 0.38);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.55);

  --nav-bg: rgba(7, 12, 24, 0.72);
  --nav-solid: rgba(7, 12, 24, 0.95);
  --nav-shadow: 0 1px 0 rgba(148, 163, 184, 0.1), 0 8px 28px rgba(0, 0, 0, 0.35);
  --drawer-bg: rgba(7, 12, 24, 0.97);
  --drawer-line: rgba(148, 163, 184, 0.1);

  --hero-bg:
    radial-gradient(75% 60% at 50% 30%, rgba(59, 130, 246, 0.2), transparent 70%),
    radial-gradient(45% 40% at 15% 22%, rgba(34, 211, 238, 0.1), transparent 70%),
    radial-gradient(45% 40% at 85% 68%, rgba(168, 85, 247, 0.12), transparent 72%),
    linear-gradient(180deg, #0a1224 0%, #081020 55%, #070c18 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(7, 12, 24, 0.55) 82%, #070c18 100%),
    linear-gradient(to top, #070c18 0%, transparent 12%),
    linear-gradient(to bottom, rgba(7, 12, 24, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(7, 12, 24, 0.5);
  --strip-bg: rgba(7, 12, 24, 0.55);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --h1-color: #f2f7ff;
  --h1-grad: linear-gradient(115deg, #f2f7ff 15%, #a8ccff 55%, #c9b8fd 92%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #22d3ee, #3b82f6 55%, #a855f7);
  --btn-solid-ink: #04101c;
  --btn-solid-shadow: 0 4px 24px rgba(59, 130, 246, 0.35);
  --btn-solid-shadow-hov: 0 8px 32px rgba(59, 130, 246, 0.5);
  --btn-line-bg: rgba(148, 163, 184, 0.06);

  --chip-ink: #7dd3fc;
  --chip-line: rgba(34, 211, 238, 0.35);
  --chip-bg: rgba(34, 211, 238, 0.07);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(148, 163, 184, 0.06);

  --ico-bg: linear-gradient(160deg, rgba(34, 211, 238, 0.16), rgba(168, 85, 247, 0.12));
  --ico-line: rgba(148, 163, 184, 0.2);
  --tag-bg: rgba(148, 163, 184, 0.05);
  --flinkp-bg: rgba(34, 211, 238, 0.06);
  --flinkp-line: rgba(34, 211, 238, 0.3);
  --flinkp-line-hov: rgba(34, 211, 238, 0.6);
  --flinkp-ink: #7dd3fc;
  --row-hover: var(--card-hi);

  --sticky-bg: rgba(7, 12, 24, 0.88);
  --pop-bg: #0d1626;
  --pop-line: rgba(148, 163, 184, 0.2);

  --tl-rail: linear-gradient(to bottom, rgba(34, 211, 238, 0.5), rgba(168, 85, 247, 0.25), transparent);
  --tl-dot-halo: 0 0 12px rgba(34, 211, 238, 0.8);
  --target-ring: 0 0 0 1px rgba(34, 211, 238, 0.35);

  --foot-bg: #05080f;
  --foot-brand: #f2f7ff;
  --foot-en: #697a99;
  --foot-link: #8fa0bc;
  --foot-link-hov: #e9eef8;
  --foot-copy: #697a99;

  /* 按钮圆角 token：默认直角风；platinum（Apple）覆盖为胶囊 */
  --btn-radius: 10px;
  --btn-radius-lg: 12px;
  /* 标题展示字体：默认黑体；anthropic（陶土）覆盖为衬线 */
  --font-display: var(--font);
}

/* color-mix 回退 #1（#215）：--brand-soft 是自定义属性，双声明无效（token 流恒合法、
   后者恒胜出），旧浏览器只能靠 @supports not 落到近似静态色（deep 主题 #6ea8ff 的
   12% 透明度）；支持 color-mix 的浏览器继续用上方动态派生值。非默认主题下回退色
   略偏 deep 色相，但 12% 淡底肉眼差异极小（Chrome<111 / Safari<16.2 才会走到）。 */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --brand-soft: rgba(110, 168, 255, 0.12); }
}

/* ── 曜黑 obsidian（对标 Vercel） ──────────────────────── */
[data-theme="obsidian"]{
  --paper: #000001;
  --wash: #0a0a0a;
  --card: #0a0a0a;
  --card-hi: #141414;
  --line: rgba(255, 255, 255, 0.13);
  --line-hi: rgba(255, 255, 255, 0.32);
  --ink: #ededed;
  --body: #b6b6b6;
  --muted: #8f8f8f;
  --dim: #7a7a7a;  /* #309-matrix */
  --brand: #3291ff;
  --brand-strong: #66b2ff;
  --teal: #3291ff;
  --violet: #ffffff;
  --live: #29a383;
  --warn: #f5a623;
  --down: #e5484d;
  --grad: linear-gradient(135deg, #ededed, #8f8f8f);
  --selection: rgba(50, 145, 255, 0.4);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.7);

  --nav-bg: rgba(0, 0, 1, 0.72);
  --nav-solid: rgba(0, 0, 1, 0.95);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 28px rgba(0, 0, 0, 0.5);
  --drawer-bg: rgba(0, 0, 1, 0.97);
  --drawer-line: rgba(255, 255, 255, 0.08);

  --hero-bg:
    radial-gradient(60% 46% at 50% 32%, rgba(50, 145, 255, 0.13), transparent 70%),
    radial-gradient(40% 34% at 82% 12%, rgba(255, 255, 255, 0.05), transparent 70%),
    #000001;
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 42%, rgba(0, 0, 1, 0.6) 84%, #000001 100%),
    linear-gradient(to top, #000001 0%, transparent 12%),
    linear-gradient(to bottom, rgba(0, 0, 1, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(0, 0, 1, 0.6);
  --strip-bg: rgba(255, 255, 255, 0.03);
  --strip-shadow: none;
  --h1-color: #ffffff;
  --h1-grad: linear-gradient(115deg, #ffffff 30%, #b9c6de 90%);
  --h1-fill: transparent;

  --btn-solid-bg: #ffffff;
  --btn-solid-ink: #000001;
  --btn-solid-shadow: none;
  --btn-solid-shadow-hov: 0 0 0 4px rgba(255, 255, 255, 0.12);
  --btn-line-bg: transparent;

  --chip-ink: #a1a1aa;
  --chip-line: rgba(255, 255, 255, 0.18);
  --chip-bg: rgba(255, 255, 255, 0.04);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.03);

  --ico-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  --ico-line: rgba(255, 255, 255, 0.14);
  --tag-bg: rgba(255, 255, 255, 0.03);
  --flinkp-bg: rgba(255, 255, 255, 0.04);
  --flinkp-line: rgba(255, 255, 255, 0.24);
  --flinkp-line-hov: rgba(255, 255, 255, 0.55);
  --flinkp-ink: #ededed;
  --row-hover: #101010;

  --sticky-bg: rgba(0, 0, 1, 0.9);
  --pop-bg: #0a0a0a;
  --pop-line: rgba(255, 255, 255, 0.16);

  --tl-rail: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.14), transparent);
  --tl-dot-halo: 0 0 0 4px rgba(255, 255, 255, 0.12);
  --target-ring: 0 0 0 1px rgba(255, 255, 255, 0.35);

  --foot-bg: #000001;
  --foot-brand: #ededed;
  --foot-en: #797979;
  --foot-link: #8f8f8f;
  --foot-link-hov: #ededed;
  --foot-copy: #797979;
}

/* ── 流光 aurora（对标 Stripe，亮彩渐变） ──────────────── */
[data-theme="aurora"]{
  --paper: #fbfcff;
  --wash: #f3f6fe;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e2e8f6;
  --line-hi: #c6d2ea;
  --ink: #131c3b;
  --body: #3f4c6e;
  --muted: #5a6478;
  --dim: #5f6c80;   /* #309：#94a3b8 在亮底仅 2.9:1（axe serious ×120 主因）；dim 文本多落在 wash #f3f6fe 上，#5f6c80 = 4.93:1 且仍浅于 --muted（层级不倒挂） */
  --brand: #6d28d9;
  --brand-strong: #5b21b6;
  --teal: #0891b2;
  --violet: #db2777;
  --live: #166534;  /* #309：#16a34a 小字号仅 3.3:1，green-800 = 6.3:1 */
  --warn: #b45309;
  --down: #b91c1c;  /* #309：#dc2626 在 wash 底 4.47:1 贴线失败（LH），red-700 = 5.98:1 */
  --grad: linear-gradient(135deg, #2563eb, #7c3aed 55%, #db2777);
  --selection: rgba(124, 58, 237, 0.16);
  --shadow-card: 0 12px 32px rgba(31, 41, 92, 0.1);
  --shadow-pop: 0 16px 48px rgba(31, 41, 92, 0.16);

  --nav-bg: rgba(251, 252, 255, 0.82);
  --nav-solid: rgba(251, 252, 255, 0.97);
  --nav-shadow: 0 1px 0 rgba(226, 232, 246, 0.9), 0 8px 28px rgba(31, 41, 92, 0.08);
  --drawer-bg: rgba(251, 252, 255, 0.98);
  --drawer-line: #edf1fa;

  --hero-bg:
    radial-gradient(50% 42% at 12% 18%, rgba(56, 189, 248, 0.22), transparent 70%),
    radial-gradient(45% 40% at 88% 14%, rgba(167, 139, 250, 0.2), transparent 70%),
    radial-gradient(48% 42% at 80% 84%, rgba(244, 114, 182, 0.16), transparent 72%),
    radial-gradient(60% 50% at 42% 62%, rgba(59, 130, 246, 0.1), transparent 72%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8ff 58%, #fbfcff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(251, 252, 255, 0.65) 82%, #fbfcff 100%),
    linear-gradient(to top, #fbfcff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(251, 252, 255, 0.9) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.75);
  --strip-bg: rgba(255, 255, 255, 0.85);
  --strip-shadow: 0 6px 28px rgba(31, 41, 92, 0.08);
  --h1-color: #131c3b;
  --h1-grad: linear-gradient(115deg, #131c3b 20%, #4338ca 55%, #a21caf 92%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #2563eb, #7c3aed 55%, #db2777);
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 20px rgba(124, 58, 237, 0.32);
  --btn-solid-shadow-hov: 0 8px 28px rgba(124, 58, 237, 0.45);
  --btn-line-bg: #ffffff;

  --chip-ink: #6d28d9;
  --chip-line: #e4d9fb;
  --chip-bg: #f5f1fe;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f3f6fe;

  --ico-bg: linear-gradient(150deg, #cffafe 0%, #e9d5ff 55%, #fbcfe8 100%);
  --ico-line: #e6e2f5;
  --tag-bg: #f6f8fd;
  --flinkp-bg: #f5f1fe;
  --flinkp-line: #e0d2fa;
  --flinkp-line-hov: #a78bfa;
  --flinkp-ink: #6d28d9;
  --row-hover: #f6f3ff;

  --sticky-bg: rgba(251, 252, 255, 0.92);
  --pop-bg: #ffffff;
  --pop-line: #e2e8f6;

  --tl-rail: linear-gradient(to bottom, #a78bfa, #ddd6fe 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(124, 58, 237, 0.14);
  --target-ring: 0 0 0 3px rgba(124, 58, 237, 0.15);

  --foot-bg: #141a3c;
  --foot-brand: #ffffff;
  --foot-en: #7c86b4;
  --foot-link: #a6afd4;
  --foot-link-hov: #ffffff;
  --foot-copy: #7c86b4;
}

/* ── 晨白 day（对标 Notion，清爽亮色·已加深） ──────────── */
[data-theme="day"]{
  --paper: #ffffff;
  --wash: #eef3fa;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #dfe6f1;
  --line-hi: #bccbdf;
  --ink: #0d1b32;
  --body: #35455f;
  --muted: #5b6b85;
  --dim: #606e88;  /* #309-matrix */
  --brand: #1d4ed8;
  --brand-strong: #1e40af;
  --teal: #0e7e96;
  --violet: #6d28d9;
  --live: #157e3c;  /* #309-matrix */
  --warn: #af5109;  /* #309-matrix */
  --down: #d52222;  /* #309-matrix */
  --grad: linear-gradient(135deg, #0ea5c4, #1d4ed8 55%, #7c3aed);
  --selection: rgba(29, 78, 216, 0.14);
  --shadow-card: 0 10px 30px rgba(13, 27, 50, 0.1);
  --shadow-pop: 0 16px 48px rgba(13, 27, 50, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.88);
  --nav-solid: rgba(255, 255, 255, 0.98);
  --nav-shadow: 0 1px 0 #e7ecf4, 0 8px 28px rgba(13, 27, 50, 0.08);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #edf1f7;

  --hero-bg:
    radial-gradient(72% 58% at 50% 32%, rgba(29, 78, 216, 0.1), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(14, 126, 150, 0.07), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(109, 40, 217, 0.06), transparent 72%),
    linear-gradient(180deg, #f9fbfe 0%, #eff5fd 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(13, 27, 50, 0.06);
  --h1-color: #0d1b32;
  --h1-grad: none;
  --h1-fill: currentColor;

  --btn-solid-bg: var(--brand);
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(29, 78, 216, 0.26);
  --btn-solid-shadow-hov: 0 6px 22px rgba(29, 78, 216, 0.36);
  --btn-line-bg: #ffffff;

  --chip-ink: #1e40af;
  --chip-line: #ccd9f4;
  --chip-bg: #eff4fe;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f3f6fb;

  --ico-bg: linear-gradient(150deg, #dcebff 0%, #e8e2ff 100%);
  --ico-line: #dbe3f1;
  --tag-bg: #f5f8fc;
  --flinkp-bg: #eff4fe;
  --flinkp-line: #c6d8f7;
  --flinkp-line-hov: #1d4ed8;
  --flinkp-ink: #1e40af;
  --row-hover: #f0f5fd;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #dfe6f1;

  --tl-rail: linear-gradient(to bottom, #7fa5ef, #cfdaec 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(29, 78, 216, 0.14);
  --target-ring: 0 0 0 3px rgba(29, 78, 216, 0.15);

  --foot-bg: #0d1b33;
  --foot-brand: #ffffff;
  --foot-en: #818a9a;
  --foot-link: #93a6c4;
  --foot-link-hov: #ffffff;
  --foot-copy: #818a9a;
}

/* ── 熔岩 raycast（对标 Raycast，红橙光晕，最炫） ───────── */
[data-theme="raycast"]{
  --paper: #0d0b0e;
  --wash: #140f13;
  --card: rgba(255, 255, 255, 0.04);
  --card-hi: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.12);
  --line-hi: rgba(255, 255, 255, 0.3);
  --ink: #f4f0ef;
  --body: #cfc6c4;
  --muted: #a39a9c;
  --dim: #8d858a;  /* R118: 原 #81797d 在面板底上 4.11:1 < 4.5，提亮至 4.85:1 */
  --brand: #ff7a66;
  --brand-strong: #ffa08c;
  --teal: #fb923c;
  --violet: #f472b6;
  --live: #34d399;
  --warn: #fbbf24;
  --down: #f87171;
  --grad: linear-gradient(135deg, #ff6363, #ff9b61 55%, #fbbf24);
  --selection: rgba(255, 99, 99, 0.38);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(13, 11, 14, 0.72);
  --nav-solid: rgba(13, 11, 14, 0.95);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 28px rgba(0, 0, 0, 0.4);
  --drawer-bg: rgba(13, 11, 14, 0.97);
  --drawer-line: rgba(255, 255, 255, 0.08);

  --hero-bg:
    radial-gradient(58% 46% at 50% 30%, rgba(255, 99, 99, 0.22), transparent 70%),
    radial-gradient(42% 36% at 14% 20%, rgba(251, 146, 60, 0.13), transparent 70%),
    radial-gradient(44% 38% at 86% 70%, rgba(244, 114, 182, 0.11), transparent 72%),
    linear-gradient(180deg, #161014 0%, #100d11 55%, #0d0b0e 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(13, 11, 14, 0.55) 82%, #0d0b0e 100%),
    linear-gradient(to top, #0d0b0e 0%, transparent 12%),
    linear-gradient(to bottom, rgba(13, 11, 14, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(13, 11, 14, 0.5);
  --strip-bg: rgba(13, 11, 14, 0.55);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --h1-color: #fff7f4;
  --h1-grad: linear-gradient(115deg, #fff7f4 25%, #ffc9b0 75%, #fda4af 95%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #ff6363, #ff9b61 55%, #fbbf24);
  --btn-solid-ink: #2a0703;
  --btn-solid-shadow: 0 4px 26px rgba(255, 99, 99, 0.4);
  --btn-solid-shadow-hov: 0 8px 34px rgba(255, 120, 80, 0.55);
  --btn-line-bg: rgba(255, 255, 255, 0.05);

  --chip-ink: #ffa198;
  --chip-line: rgba(255, 99, 99, 0.35);
  --chip-bg: rgba(255, 99, 99, 0.08);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(255, 99, 99, 0.16), rgba(251, 191, 36, 0.1));
  --ico-line: rgba(255, 255, 255, 0.14);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(255, 99, 99, 0.08);
  --flinkp-line: rgba(255, 99, 99, 0.32);
  --flinkp-line-hov: rgba(255, 130, 100, 0.65);
  --flinkp-ink: #ffb4a5;
  --row-hover: rgba(255, 99, 99, 0.07);

  --sticky-bg: rgba(13, 11, 14, 0.88);
  --pop-bg: #171216;
  --pop-line: rgba(255, 255, 255, 0.16);

  --tl-rail: linear-gradient(to bottom, rgba(255, 99, 99, 0.5), rgba(251, 146, 60, 0.25), transparent);
  --tl-dot-halo: 0 0 12px rgba(255, 99, 99, 0.7);
  --target-ring: 0 0 0 1px rgba(255, 99, 99, 0.4);

  --foot-bg: #09080a;
  --foot-brand: #fff7f4;
  --foot-en: #837b80;
  --foot-link: #a39a9c;
  --foot-link-hov: #fff7f4;
  --foot-copy: #837b80;
}

/* ── 暗夜 github（对标 GitHub，开发者暗色） ─────────────── */
[data-theme="github"]{
  --paper: #0d1117;
  --wash: #161b22;
  --card: #161b22;
  --card-hi: #1f2630;
  --line: #30363d;
  --line-hi: #6e7681;
  --ink: #f0f6fc;
  --body: #c9d1d9;
  --muted: #8b949e;
  --dim: #7d8590;  /* #309-matrix */
  --brand: #58a6ff;
  --brand-strong: #79c0ff;
  --teal: #39c5cf;
  --violet: #bc8cff;
  --live: #3fb950;
  --warn: #d29922;
  --down: #f85149;
  --grad: linear-gradient(135deg, #58a6ff, #a371f7 55%, #bc8cff);
  --selection: rgba(56, 139, 253, 0.4);
  --shadow-card: 0 10px 32px rgba(1, 4, 9, 0.6);
  --shadow-pop: 0 16px 48px rgba(1, 4, 9, 0.7);

  --nav-bg: rgba(13, 17, 23, 0.72);
  --nav-solid: rgba(13, 17, 23, 0.95);
  --nav-shadow: 0 1px 0 rgba(240, 246, 252, 0.1), 0 8px 28px rgba(1, 4, 9, 0.5);
  --drawer-bg: rgba(13, 17, 23, 0.97);
  --drawer-line: rgba(240, 246, 252, 0.08);

  --hero-bg:
    radial-gradient(70% 55% at 50% 30%, rgba(31, 111, 235, 0.18), transparent 70%),
    radial-gradient(42% 36% at 15% 22%, rgba(188, 140, 255, 0.09), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(63, 185, 80, 0.07), transparent 72%),
    linear-gradient(180deg, #11171f 0%, #0e1420 55%, #0d1117 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(13, 17, 23, 0.55) 82%, #0d1117 100%),
    linear-gradient(to top, #0d1117 0%, transparent 12%),
    linear-gradient(to bottom, rgba(13, 17, 23, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(13, 17, 23, 0.6);
  --strip-bg: rgba(1, 4, 9, 0.5);
  --strip-shadow: 0 4px 24px rgba(1, 4, 9, 0.3);
  --h1-color: #f0f6fc;
  --h1-grad: linear-gradient(115deg, #f0f6fc 30%, #a5c8ff 75%, #d2a8ff 95%);
  --h1-fill: transparent;

  --btn-solid-bg: #238636;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 20px rgba(35, 134, 54, 0.4);
  --btn-solid-shadow-hov: 0 6px 26px rgba(46, 164, 79, 0.5);
  --btn-line-bg: rgba(240, 246, 252, 0.04);

  --chip-ink: #79c0ff;
  --chip-line: rgba(56, 139, 253, 0.4);
  --chip-bg: rgba(56, 139, 253, 0.1);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(240, 246, 252, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(88, 166, 255, 0.14), rgba(188, 140, 255, 0.1));
  --ico-line: #30363d;
  --tag-bg: rgba(240, 246, 252, 0.04);
  --flinkp-bg: rgba(56, 139, 253, 0.1);
  --flinkp-line: rgba(56, 139, 253, 0.4);
  --flinkp-line-hov: rgba(88, 166, 255, 0.7);
  --flinkp-ink: #79c0ff;
  --row-hover: #1c2129;

  --sticky-bg: rgba(13, 17, 23, 0.9);
  --pop-bg: #161b22;
  --pop-line: #30363d;

  --tl-rail: linear-gradient(to bottom, rgba(88, 166, 255, 0.5), rgba(188, 140, 255, 0.25), transparent);
  --tl-dot-halo: 0 0 12px rgba(88, 166, 255, 0.7);
  --target-ring: 0 0 0 1px rgba(88, 166, 255, 0.4);

  --foot-bg: #010409;
  --foot-brand: #f0f6fc;
  --foot-en: #727b86;
  --foot-link: #8b949e;
  --foot-link-hov: #f0f6fc;
  --foot-copy: #727b86;
}

/* ── 翠夜 supabase（对标 Supabase，暗底荧光绿） ─────────── */
[data-theme="supabase"]{
  --paper: #101214;
  --wash: #17191c;
  --card: #1b1e22;
  --card-hi: #23262b;
  --line: #2e3238;
  --line-hi: #4a5058;
  --ink: #ededee;
  --body: #b2bbc0;
  --muted: #858e95;
  --dim: #7e8890;  /* #309-matrix */
  --brand: #3ecf8e;
  --brand-strong: #7ce0b1;
  --teal: #22d3ee;
  --violet: #a78bfa;
  --live: #3ecf8e;
  --warn: #f0b429;
  --down: #f2555a;
  --grad: linear-gradient(135deg, #3ecf8e, #22d3ee 60%, #4ade80);
  --selection: rgba(62, 207, 142, 0.32);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(16, 18, 20, 0.72);
  --nav-solid: rgba(16, 18, 20, 0.95);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);
  --drawer-bg: rgba(16, 18, 20, 0.97);
  --drawer-line: rgba(255, 255, 255, 0.07);

  --hero-bg:
    radial-gradient(66% 52% at 50% 30%, rgba(62, 207, 142, 0.15), transparent 70%),
    radial-gradient(42% 36% at 15% 22%, rgba(34, 211, 238, 0.08), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(74, 222, 128, 0.07), transparent 72%),
    linear-gradient(180deg, #131718 0%, #111517 55%, #101214 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(16, 18, 20, 0.55) 82%, #101214 100%),
    linear-gradient(to top, #101214 0%, transparent 12%),
    linear-gradient(to bottom, rgba(16, 18, 20, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(16, 18, 20, 0.5);
  --strip-bg: rgba(16, 18, 20, 0.55);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.26);
  --h1-color: #f2fbf6;
  --h1-grad: linear-gradient(115deg, #f2fbf6 28%, #9de5c3 72%, #7dd3fc 95%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #3ecf8e, #22b57d 70%);
  --btn-solid-ink: #04150c;
  --btn-solid-shadow: 0 4px 24px rgba(62, 207, 142, 0.35);
  --btn-solid-shadow-hov: 0 8px 32px rgba(62, 207, 142, 0.5);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #6adaa8;
  --chip-line: rgba(62, 207, 142, 0.35);
  --chip-bg: rgba(62, 207, 142, 0.08);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(62, 207, 142, 0.15), rgba(34, 211, 238, 0.1));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(62, 207, 142, 0.08);
  --flinkp-line: rgba(62, 207, 142, 0.32);
  --flinkp-line-hov: rgba(62, 207, 142, 0.65);
  --flinkp-ink: #7ce0b1;
  --row-hover: rgba(62, 207, 142, 0.07);

  --sticky-bg: rgba(16, 18, 20, 0.88);
  --pop-bg: #1b1e22;
  --pop-line: #2e3238;

  --tl-rail: linear-gradient(to bottom, rgba(62, 207, 142, 0.5), rgba(34, 211, 238, 0.25), transparent);
  --tl-dot-halo: 0 0 12px rgba(62, 207, 142, 0.7);
  --target-ring: 0 0 0 1px rgba(62, 207, 142, 0.4);

  --foot-bg: #0a0c0d;
  --foot-brand: #f2fbf6;
  --foot-en: #747f88;
  --foot-link: #858e95;
  --foot-link-hov: #ededee;
  --foot-copy: #747f88;
}

/* ── 铂金 platinum（对标 Apple，官方亮色 + 胶囊按钮） ───── */
[data-theme="platinum"]{
  --paper: #ffffff;
  --wash: #f5f5f7;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e3e3e8;
  --line-hi: #b9b9c0;
  --ink: #1d1d1f;
  --body: #424245;
  --muted: #6a6a6f;  /* #309-matrix 层级 */
  --dim: #6d6d74;  /* #309-matrix */
  --brand: #0071e3;
  --brand-strong: #005bb8;
  --brand-text: color-mix(in srgb, var(--brand) 80%, var(--ink));  /* R118: 原 3.78:1 */
  --teal: #30b0c7;
  --violet: #bf5af2;
  --live: #1e7e34;  /* #309-matrix */
  --warn: #966400;  /* #309-matrix */
  --down: #e00000;  /* #309-matrix */
  --grad: linear-gradient(135deg, #0071e3, #7d56f3 60%, #bf5af2);
  --selection: rgba(0, 113, 227, 0.16);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e8e8ed, 0 8px 28px rgba(0, 0, 0, 0.06);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #ececf0;

  --hero-bg:
    radial-gradient(70% 56% at 50% 30%, rgba(0, 113, 227, 0.06), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(48, 176, 199, 0.05), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(191, 90, 242, 0.04), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #f8f8fa 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.6) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.85);
  --strip-bg: rgba(255, 255, 255, 0.9);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --h1-color: #1d1d1f;
  --h1-grad: none;
  --h1-fill: currentColor;

  --btn-solid-bg: #0071e3;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: none;
  --btn-solid-shadow-hov: 0 4px 18px rgba(0, 113, 227, 0.32);
  --btn-line-bg: #ffffff;

  --chip-ink: #0066cc;
  --chip-line: #cfe3fb;
  --chip-bg: #eaf3ff;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f5f5f7;

  --ico-bg: linear-gradient(150deg, #e8f1ff 0%, #f0e9ff 100%);
  --ico-line: #e5e5ea;
  --tag-bg: #f5f5f7;
  --flinkp-bg: #eaf3ff;
  --flinkp-line: #c7ddf8;
  --flinkp-line-hov: #0071e3;
  --flinkp-ink: #0066cc;
  --row-hover: #f2f7fe;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e3e3e8;

  --tl-rail: linear-gradient(to bottom, #8fc3f5, #d6e2f0 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(0, 113, 227, 0.12);
  --target-ring: 0 0 0 3px rgba(0, 113, 227, 0.15);

  --foot-bg: #f5f5f7;
  --foot-brand: #1d1d1f;
  --foot-en: #6b6b71;
  --foot-link: #424245;
  --foot-link-hov: #000000;
  --foot-copy: #6b6b70;

  --btn-radius: 980px;
  --btn-radius-lg: 980px;
}

/* ── 幻紫 discord（对标 Discord，中性暗 + Blurple 电紫） ── */
[data-theme="discord"]{
  --paper: #1e1f22;
  --wash: #26272b;
  --card: #2b2d31;
  --card-hi: #35373c;
  --line: #3f4147;
  --line-hi: #80848e;
  --ink: #f2f3f5;
  --body: #dbdee1;
  --muted: #b5bac1;
  --dim: #92959e;  /* #309-matrix */
  --brand: #7983f5;
  --brand-strong: #98a4f8;
  --brand-text: color-mix(in srgb, var(--brand) 82%, var(--ink));  /* R118: 原 4.18:1 */
  --teal: #57f287;
  --violet: #eb459e;
  --live: #24ab5d;  /* #309-matrix */
  --warn: #f0b232;
  --down: #f5686b;  /* #309-matrix */
  --grad: linear-gradient(135deg, #5865f2, #8855f0 55%, #eb459e);
  --selection: rgba(88, 101, 242, 0.4);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(30, 31, 34, 0.72);
  --nav-solid: rgba(30, 31, 34, 0.95);
  --nav-shadow: 0 1px 0 rgba(242, 243, 245, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);
  --drawer-bg: rgba(30, 31, 34, 0.97);
  --drawer-line: rgba(242, 243, 245, 0.07);

  --hero-bg:
    radial-gradient(68% 54% at 50% 30%, rgba(88, 101, 242, 0.2), transparent 70%),
    radial-gradient(42% 36% at 15% 22%, rgba(235, 69, 158, 0.08), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(87, 242, 135, 0.05), transparent 72%),
    linear-gradient(180deg, #232428 0%, #202125 55%, #1e1f22 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(30, 31, 34, 0.55) 82%, #1e1f22 100%),
    linear-gradient(to top, #1e1f22 0%, transparent 12%),
    linear-gradient(to bottom, rgba(30, 31, 34, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(30, 31, 34, 0.5);
  --strip-bg: rgba(30, 31, 34, 0.55);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --h1-color: #f2f3f5;
  --h1-grad: linear-gradient(115deg, #f2f3f5 28%, #aab2fc 65%, #f492c8 95%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #5865f2, #7c3aed 70%);
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 22px rgba(88, 101, 242, 0.4);
  --btn-solid-shadow-hov: 0 8px 30px rgba(88, 101, 242, 0.55);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #a5adfa;
  --chip-line: rgba(88, 101, 242, 0.4);
  --chip-bg: rgba(88, 101, 242, 0.1);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(88, 101, 242, 0.16), rgba(235, 69, 158, 0.1));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(88, 101, 242, 0.1);
  --flinkp-line: rgba(88, 101, 242, 0.4);
  --flinkp-line-hov: rgba(121, 131, 245, 0.7);
  --flinkp-ink: #a5adfa;
  --row-hover: rgba(88, 101, 242, 0.08);

  --sticky-bg: rgba(30, 31, 34, 0.88);
  --pop-bg: #2b2d31;
  --pop-line: #3f4147;

  --tl-rail: linear-gradient(to bottom, rgba(88, 101, 242, 0.5), rgba(235, 69, 158, 0.25), transparent);
  --tl-dot-halo: 0 0 12px rgba(88, 101, 242, 0.7);
  --target-ring: 0 0 0 1px rgba(88, 101, 242, 0.4);

  --foot-bg: #141517;
  --foot-brand: #f2f3f5;
  --foot-en: #80848e;
  --foot-link: #b5bac1;
  --foot-link-hov: #f2f3f5;
  --foot-copy: #80848e;
}

/* ── 极光 solana（对标 Solana，纯黑 + 紫绿双色渐变，最炫渐变） ── */
[data-theme="solana"]{
  --paper: #000000;
  --wash: #0b0b0f;
  --card: #101014;
  --card-hi: #18181e;
  --line: #232329;
  --line-hi: #4a4a55;
  --ink: #f5f5fa;
  --body: #c8c8d2;
  --muted: #9494a2;
  --dim: #7c7c8d;  /* #309-matrix */
  --brand: #a163ff;
  --brand-strong: #b06bff;
  --teal: #14f195;
  --violet: #9945ff;
  --live: #14f195;
  --warn: #fbbf24;
  --down: #fb7185;
  --grad: linear-gradient(135deg, #9945ff, #7c5cff 45%, #14f195);
  --selection: rgba(153, 69, 255, 0.4);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65);

  --nav-bg: rgba(0, 0, 0, 0.72);
  --nav-solid: rgba(0, 0, 0, 0.95);
  --nav-shadow: 0 1px 0 rgba(245, 245, 250, 0.09), 0 8px 28px rgba(0, 0, 0, 0.5);
  --drawer-bg: rgba(0, 0, 0, 0.97);
  --drawer-line: rgba(245, 245, 250, 0.07);

  --hero-bg:
    radial-gradient(52% 44% at 18% 24%, rgba(153, 69, 255, 0.22), transparent 70%),
    radial-gradient(48% 40% at 84% 66%, rgba(20, 241, 149, 0.1), transparent 72%),
    radial-gradient(40% 34% at 78% 14%, rgba(56, 189, 248, 0.07), transparent 70%),
    linear-gradient(180deg, #08070c 0%, #050508 55%, #000000 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(0, 0, 0, 0.55) 82%, #000000 100%),
    linear-gradient(to top, #000000 0%, transparent 12%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(0, 0, 0, 0.5);
  --strip-bg: rgba(255, 255, 255, 0.03);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --h1-color: #f5f5fa;
  --h1-grad: linear-gradient(115deg, #f5f5fa 30%, #c084fc 62%, #5eead4 95%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #9945ff, #7c5cff 45%, #14f195);
  --btn-solid-ink: #0a0a14;
  --btn-solid-shadow: 0 4px 26px rgba(153, 69, 255, 0.38);
  --btn-solid-shadow-hov: 0 8px 34px rgba(20, 241, 149, 0.3);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #c9a5ff;
  --chip-line: rgba(153, 69, 255, 0.4);
  --chip-bg: rgba(153, 69, 255, 0.1);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(153, 69, 255, 0.16), rgba(20, 241, 149, 0.1));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(153, 69, 255, 0.1);
  --flinkp-line: rgba(153, 69, 255, 0.4);
  --flinkp-line-hov: rgba(161, 99, 255, 0.7);
  --flinkp-ink: #c9a5ff;
  --row-hover: rgba(153, 69, 255, 0.08);

  --sticky-bg: rgba(0, 0, 0, 0.9);
  --pop-bg: #101014;
  --pop-line: #232329;

  --tl-rail: linear-gradient(to bottom, rgba(153, 69, 255, 0.55), rgba(20, 241, 149, 0.3), transparent);
  --tl-dot-halo: 0 0 12px rgba(153, 69, 255, 0.7);
  --target-ring: 0 0 0 1px rgba(153, 69, 255, 0.45);

  --foot-bg: #000000;
  --foot-brand: #f5f5fa;
  --foot-en: #78788a;
  --foot-link: #9494a2;
  --foot-link-hov: #f5f5fa;
  --foot-copy: #78788a;
}

/* ── 陶土 anthropic（对标 Anthropic/Claude，暖米色 + 陶土橙 + 衬线标题） ── */
[data-theme="anthropic"]{
  --paper: #f0eee6;
  --wash: #e8e5da;
  --card: #faf9f4;
  --card-hi: #ffffff;
  --line: #dedbcd;
  --line-hi: #b8b4a2;
  --ink: #1f1e1b;
  --body: #3d3d3a;
  --muted: #65655f;  /* #309-matrix */
  --dim: #65645b;  /* #309-matrix */
  --brand: #c96442;
  --brand-strong: #9c4a2a;
  --brand-text: color-mix(in srgb, var(--brand) 62%, var(--ink));  /* R118: 原 3.69:1 */
  --teal: #5e8c61;
  --violet: #8a6db1;
  --live: #4a6d4c;  /* #309-matrix */
  --warn: #905806;  /* #309-matrix */
  --down: #aa433a;  /* #309-matrix */
  --grad: linear-gradient(135deg, #d97757, #c96442 55%, #8f6b4a);
  --selection: rgba(201, 100, 66, 0.2);
  --shadow-card: 0 10px 30px rgba(80, 70, 50, 0.12);
  --shadow-pop: 0 16px 48px rgba(80, 70, 50, 0.18);

  --nav-bg: rgba(240, 238, 230, 0.85);
  --nav-solid: rgba(240, 238, 230, 0.97);
  --nav-shadow: 0 1px 0 #dedbcd, 0 8px 28px rgba(80, 70, 50, 0.08);
  --drawer-bg: rgba(240, 238, 230, 0.98);
  --drawer-line: #e2dfd3;

  --hero-bg:
    radial-gradient(68% 54% at 50% 30%, rgba(217, 119, 87, 0.1), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(94, 140, 97, 0.06), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(184, 134, 75, 0.07), transparent 72%),
    linear-gradient(180deg, #f4f2ea 0%, #eeebe1 58%, #f0eee6 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(240, 238, 230, 0.65) 82%, #f0eee6 100%),
    linear-gradient(to top, #f0eee6 0%, transparent 12%),
    linear-gradient(to bottom, rgba(240, 238, 230, 0.9) 0%, transparent 16%);
  --kicker-bg: rgba(250, 249, 244, 0.8);
  --strip-bg: rgba(250, 249, 244, 0.85);
  --strip-shadow: 0 4px 24px rgba(80, 70, 50, 0.08);
  --h1-color: #1f1e1b;
  --h1-grad: none;
  --h1-fill: currentColor;

  --btn-solid-bg: #1f1e1b;
  --btn-solid-ink: #f5f4ef;
  --btn-solid-shadow: 0 2px 12px rgba(31, 30, 27, 0.2);
  --btn-solid-shadow-hov: 0 6px 22px rgba(31, 30, 27, 0.28);
  --btn-line-bg: rgba(255, 255, 255, 0.5);

  --chip-ink: #9c4a2a;
  --chip-line: #e6cdb8;
  --chip-bg: #f7ece2;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #eceade;

  --ico-bg: linear-gradient(150deg, #f2e3d9 0%, #e9e7d8 100%);
  --ico-line: #e0dcc8;
  --tag-bg: #eceade;
  --flinkp-bg: #f7ece2;
  --flinkp-line: #e6cdb8;
  --flinkp-line-hov: #c96442;
  --flinkp-ink: #a44d2c;
  --row-hover: #f1ece0;

  --sticky-bg: rgba(240, 238, 230, 0.94);
  --pop-bg: #faf9f4;
  --pop-line: #dedbcd;

  --tl-rail: linear-gradient(to bottom, #d9a288, #e5ddc9 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(201, 100, 66, 0.16);
  --target-ring: 0 0 0 3px rgba(201, 100, 66, 0.16);

  --foot-bg: #262521;
  --foot-brand: #f5f4ef;
  --foot-en: #91908a;
  --foot-link: #b8b5a6;
  --foot-link-hov: #f5f4ef;
  --foot-copy: #91908a;

  --font-display: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun",
    "Noto Serif SC", "Source Han Serif SC", serif;
}

/* ── 湖境 perplexity（对标 Perplexity，暖白 + 湖水青） ──── */
[data-theme="perplexity"]{
  --paper: #fcfcf9;
  --wash: #eef3f2;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e2e8e6;
  --line-hi: #b9cbc7;
  --ink: #13343b;
  --body: #3d5459;
  --muted: #5a6d75;
  --dim: #5c6f75;  /* #309-matrix */
  --brand: #20808d;
  --brand-strong: #176570;
  --brand-text: color-mix(in srgb, var(--brand) 72%, var(--ink));  /* R118: 原 3.67:1 */
  --teal: #2fa6b5;
  --violet: #6d5fa8;
  --live: #2d7958;  /* #309-matrix */
  --warn: #af5109;  /* #309-matrix */
  --down: #c73a2d;  /* #309-matrix */
  --grad: linear-gradient(135deg, #20808d, #2fa6b5 55%, #6bc4c9);
  --selection: rgba(32, 128, 141, 0.16);
  --shadow-card: 0 10px 30px rgba(19, 52, 59, 0.09);
  --shadow-pop: 0 16px 48px rgba(19, 52, 59, 0.14);

  --nav-bg: rgba(252, 252, 249, 0.86);
  --nav-solid: rgba(252, 252, 249, 0.97);
  --nav-shadow: 0 1px 0 #e2e8e6, 0 8px 28px rgba(19, 52, 59, 0.07);
  --drawer-bg: rgba(252, 252, 249, 0.98);
  --drawer-line: #e8eeec;

  --hero-bg:
    radial-gradient(70% 56% at 50% 30%, rgba(32, 128, 141, 0.09), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(47, 166, 181, 0.06), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(109, 95, 168, 0.05), transparent 72%),
    linear-gradient(180deg, #fbfcfa 0%, #f2f7f6 58%, #fcfcf9 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(252, 252, 249, 0.62) 82%, #fcfcf9 100%),
    linear-gradient(to top, #fcfcf9 0%, transparent 12%),
    linear-gradient(to bottom, rgba(252, 252, 249, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(19, 52, 59, 0.06);
  --h1-color: #13343b;
  --h1-grad: none;
  --h1-fill: currentColor;

  --btn-solid-bg: #20808d;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(32, 128, 141, 0.26);
  --btn-solid-shadow-hov: 0 6px 22px rgba(32, 128, 141, 0.36);
  --btn-line-bg: #ffffff;

  --chip-ink: #176570;
  --chip-line: #c8e2e4;
  --chip-bg: #e9f4f4;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f0f4f3;

  --ico-bg: linear-gradient(150deg, #ddf0f0 0%, #e7f0e4 100%);
  --ico-line: #d8e6e2;
  --tag-bg: #f0f4f3;
  --flinkp-bg: #e9f4f4;
  --flinkp-line: #c2dfdf;
  --flinkp-line-hov: #20808d;
  --flinkp-ink: #176570;
  --row-hover: #eff5f4;

  --sticky-bg: rgba(252, 252, 249, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e2e8e6;

  --tl-rail: linear-gradient(to bottom, #7fb9c0, #d2e2e0 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(32, 128, 141, 0.14);
  --target-ring: 0 0 0 3px rgba(32, 128, 141, 0.15);

  --foot-bg: #13343b;
  --foot-brand: #ffffff;
  --foot-en: #929da0;
  --foot-link: #b9ced2;
  --foot-link-hov: #ffffff;
  --foot-copy: #929da0;
}

/* ── 音浪 douyin（对标抖音/TikTok，纯黑 + 青红双色调） ──── */
[data-theme="douyin"]{
  --paper: #000000;
  --wash: #0d0d10;
  --card: #141418;
  --card-hi: #1d1d23;
  --line: #26262c;
  --line-hi: #4a4a52;
  --ink: #f5f5f7;
  --body: #c9c9d1;
  --muted: #94949e;
  --dim: #80808c;  /* #309-matrix */
  --brand: #ff5c7a;
  --brand-strong: #ff8ca0;
  --teal: #25f4ee;
  --violet: #e9012e;
  --live: #2ecc8f;
  --warn: #fbbf24;
  --down: #fe0334;  /* #309-matrix */
  --grad: linear-gradient(135deg, #25f4ee, #e9012e);
  --selection: rgba(254, 44, 85, 0.35);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65);

  --nav-bg: rgba(0, 0, 0, 0.72);
  --nav-solid: rgba(0, 0, 0, 0.95);
  --nav-shadow: 0 1px 0 rgba(245, 245, 247, 0.08), 0 8px 28px rgba(0, 0, 0, 0.5);
  --drawer-bg: rgba(0, 0, 0, 0.97);
  --drawer-line: rgba(245, 245, 247, 0.07);

  --hero-bg:
    radial-gradient(46% 40% at 16% 22%, rgba(37, 244, 238, 0.13), transparent 70%),
    radial-gradient(50% 44% at 84% 68%, rgba(254, 44, 85, 0.16), transparent 72%),
    radial-gradient(36% 32% at 78% 14%, rgba(254, 44, 85, 0.07), transparent 70%),
    linear-gradient(180deg, #060608 0%, #030304 55%, #000000 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(0, 0, 0, 0.55) 82%, #000000 100%),
    linear-gradient(to top, #000000 0%, transparent 12%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(0, 0, 0, 0.5);
  --strip-bg: rgba(255, 255, 255, 0.03);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --h1-color: #f5f5f7;
  --h1-grad: linear-gradient(115deg, #f5f5f7 38%, #25f4ee 68%, #e9012e 96%);
  --h1-fill: transparent;

  --btn-solid-bg: #e9012e;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 24px rgba(254, 44, 85, 0.4);
  --btn-solid-shadow-hov: 0 8px 32px rgba(254, 44, 85, 0.55);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #ff8ca0;
  --chip-line: rgba(254, 44, 85, 0.38);
  --chip-bg: rgba(254, 44, 85, 0.09);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(37, 244, 238, 0.14), rgba(254, 44, 85, 0.12));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(254, 44, 85, 0.09);
  --flinkp-line: rgba(254, 44, 85, 0.38);
  --flinkp-line-hov: rgba(255, 92, 122, 0.7);
  --flinkp-ink: #ff8ca0;
  --row-hover: rgba(254, 44, 85, 0.07);

  --sticky-bg: rgba(0, 0, 0, 0.9);
  --pop-bg: #141418;
  --pop-line: #26262c;

  --tl-rail: linear-gradient(to bottom, rgba(37, 244, 238, 0.5), rgba(254, 44, 85, 0.35), transparent);
  --tl-dot-halo: 0 0 12px rgba(254, 44, 85, 0.65);
  --target-ring: 0 0 0 1px rgba(254, 44, 85, 0.45);

  --foot-bg: #000000;
  --foot-brand: #f5f5f7;
  --foot-en: #777784;
  --foot-link: #94949e;
  --foot-link-hov: #f5f5f7;
  --foot-copy: #777784;
}

/* ── 核力 nvidia（对标 NVIDIA，纯黑 + 荧光绿，工业硬核） ── */
[data-theme="nvidia"]{
  --paper: #000000;
  --wash: #111111;
  --card: #161616;
  --card-hi: #1f1f1f;
  --line: #2a2a2a;
  --line-hi: #555555;
  --ink: #ffffff;
  --body: #d1d1d1;
  --muted: #9a9a9a;
  --dim: #818181;  /* #309-matrix */
  --brand: #76b900;
  --brand-strong: #9be24d;
  --teal: #00b140;
  --violet: #76b900;
  --live: #76b900;
  --warn: #f5a623;
  --down: #e5484d;
  --grad: linear-gradient(135deg, #76b900, #00b140);
  --selection: rgba(118, 185, 0, 0.32);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65);

  --nav-bg: rgba(0, 0, 0, 0.72);
  --nav-solid: rgba(0, 0, 0, 0.95);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 28px rgba(0, 0, 0, 0.5);
  --drawer-bg: rgba(0, 0, 0, 0.97);
  --drawer-line: rgba(255, 255, 255, 0.07);

  --hero-bg:
    radial-gradient(62% 50% at 50% 30%, rgba(118, 185, 0, 0.14), transparent 70%),
    radial-gradient(42% 36% at 15% 22%, rgba(0, 177, 64, 0.08), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(118, 185, 0, 0.06), transparent 72%),
    linear-gradient(180deg, #0a0f04 0%, #050704 55%, #000000 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(0, 0, 0, 0.55) 82%, #000000 100%),
    linear-gradient(to top, #000000 0%, transparent 12%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(0, 0, 0, 0.5);
  --strip-bg: rgba(255, 255, 255, 0.03);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --h1-color: #ffffff;
  --h1-grad: linear-gradient(115deg, #ffffff 38%, #b7e26b 88%);
  --h1-fill: transparent;

  --btn-solid-bg: #76b900;
  --btn-solid-ink: #000000;
  --btn-solid-shadow: 0 4px 24px rgba(118, 185, 0, 0.35);
  --btn-solid-shadow-hov: 0 8px 32px rgba(118, 185, 0, 0.5);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #a4d65e;
  --chip-line: rgba(118, 185, 0, 0.4);
  --chip-bg: rgba(118, 185, 0, 0.09);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(118, 185, 0, 0.16), rgba(0, 177, 64, 0.1));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(118, 185, 0, 0.09);
  --flinkp-line: rgba(118, 185, 0, 0.4);
  --flinkp-line-hov: rgba(118, 185, 0, 0.7);
  --flinkp-ink: #a4d65e;
  --row-hover: rgba(118, 185, 0, 0.07);

  --sticky-bg: rgba(0, 0, 0, 0.9);
  --pop-bg: #161616;
  --pop-line: #2a2a2a;

  --tl-rail: linear-gradient(to bottom, rgba(118, 185, 0, 0.5), rgba(0, 177, 64, 0.3), transparent);
  --tl-dot-halo: 0 0 12px rgba(118, 185, 0, 0.65);
  --target-ring: 0 0 0 1px rgba(118, 185, 0, 0.45);

  --foot-bg: #000000;
  --foot-brand: #ffffff;
  --foot-en: #797979;
  --foot-link: #9a9a9a;
  --foot-link-hov: #ffffff;
  --foot-copy: #797979;
}

/* ── 幻青 canva（对标 Canva，白底 + 青紫渐变） ──────────── */
[data-theme="canva"]{
  --paper: #ffffff;
  --wash: #f4f6fd;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e2e7f5;
  --line-hi: #c3cdee;
  --ink: #141b33;
  --body: #3f4a66;
  --muted: #656f89;  /* #309-matrix */
  --dim: #616f8c;  /* #309-matrix */
  --brand: #7d2ae8;
  --brand-strong: #6b1fd0;
  --teal: #00a8b8;
  --violet: #7d2ae8;
  --live: #107d6f;  /* #309-matrix */
  --warn: #b45309;
  --down: #d12e48;  /* #309-matrix */
  --grad: linear-gradient(135deg, #00c4cc, #5b4be8 55%, #7d2ae8);
  --selection: rgba(125, 42, 232, 0.14);
  --shadow-card: 0 10px 30px rgba(20, 27, 51, 0.09);
  --shadow-pop: 0 16px 48px rgba(20, 27, 51, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e2e7f5, 0 8px 28px rgba(20, 27, 51, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #ecf0fa;

  --hero-bg:
    radial-gradient(48% 40% at 14% 20%, rgba(0, 196, 204, 0.1), transparent 70%),
    radial-gradient(46% 40% at 86% 66%, rgba(125, 42, 232, 0.09), transparent 72%),
    radial-gradient(40% 34% at 70% 12%, rgba(91, 75, 232, 0.05), transparent 70%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7ff 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(20, 27, 51, 0.06);
  --h1-color: #141b33;
  --h1-grad: linear-gradient(115deg, #141b33 25%, #00a8b8 60%, #7d2ae8 92%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #007a80, #7d2ae8);
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 20px rgba(125, 42, 232, 0.3);
  --btn-solid-shadow-hov: 0 8px 28px rgba(125, 42, 232, 0.42);
  --btn-line-bg: #ffffff;

  --chip-ink: #6b21d6;
  --chip-line: #e3d4fb;
  --chip-bg: #f5effe;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f4f6fd;

  --ico-bg: linear-gradient(150deg, #d9f6f6 0%, #ece1fd 100%);
  --ico-line: #e2e6f4;
  --tag-bg: #f4f6fd;
  --flinkp-bg: #f5effe;
  --flinkp-line: #e3d4fb;
  --flinkp-line-hov: #7d2ae8;
  --flinkp-ink: #6b21d6;
  --row-hover: #f6f2fe;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e2e7f5;

  --tl-rail: linear-gradient(to bottom, #7ac9cf, #d8cdf6 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(125, 42, 232, 0.13);
  --target-ring: 0 0 0 3px rgba(125, 42, 232, 0.15);

  --foot-bg: #141b33;
  --foot-brand: #ffffff;
  --foot-en: #7d88a5;
  --foot-link: #aab3ca;
  --foot-link-hov: #ffffff;
  --foot-copy: #7d88a5;
}

/* ── 深索 deepseek（对标 DeepSeek，白底靛蓝） ───────────── */
[data-theme="deepseek"]{
  --paper: #ffffff;
  --wash: #eef1fb;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e1e6f5;
  --line-hi: #b9c4ee;
  --ink: #1b1f3a;
  --body: #3e4562;
  --muted: #646b87;  /* #309-matrix */
  --dim: #616b92;  /* #309-matrix */
  --brand: #3456fe;
  --brand-strong: #3a55e0;
  --brand-text: color-mix(in srgb, var(--brand) 86%, var(--ink));  /* R118: 原 4.16:1 */
  --teal: #14a0c0;
  --violet: #7c5cff;
  --live: #187b54;  /* #309-matrix */
  --warn: #af5109;  /* #309-matrix */
  --down: #cb2d46;  /* #309-matrix */
  --grad: linear-gradient(135deg, #4d6bfe, #7c5cff);
  --selection: rgba(77, 107, 254, 0.14);
  --shadow-card: 0 10px 30px rgba(27, 31, 58, 0.09);
  --shadow-pop: 0 16px 48px rgba(27, 31, 58, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e1e6f5, 0 8px 28px rgba(27, 31, 58, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #edf0f9;

  --hero-bg:
    radial-gradient(68% 54% at 50% 30%, rgba(77, 107, 254, 0.09), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(124, 92, 255, 0.06), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(20, 160, 192, 0.05), transparent 72%),
    linear-gradient(180deg, #fafbff 0%, #f1f4fe 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(27, 31, 58, 0.06);
  --h1-color: #1b1f3a;
  --h1-grad: linear-gradient(115deg, #1b1f3a 30%, #4d6bfe 92%);
  --h1-fill: transparent;

  --btn-solid-bg: #4060fe;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(77, 107, 254, 0.28);
  --btn-solid-shadow-hov: 0 6px 22px rgba(77, 107, 254, 0.38);
  --btn-line-bg: #ffffff;

  --chip-ink: #3a55e0;
  --chip-line: #d4dcfa;
  --chip-bg: #eef2ff;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f1f4fc;

  --ico-bg: linear-gradient(150deg, #e3eaff 0%, #ece5fe 100%);
  --ico-line: #dde3f4;
  --tag-bg: #f1f4fc;
  --flinkp-bg: #eef2ff;
  --flinkp-line: #d4dcfa;
  --flinkp-line-hov: #4d6bfe;
  --flinkp-ink: #3a55e0;
  --row-hover: #f1f5fe;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e1e6f5;

  --tl-rail: linear-gradient(to bottom, #8fa5f0, #d8def0 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(77, 107, 254, 0.13);
  --target-ring: 0 0 0 3px rgba(77, 107, 254, 0.15);

  --foot-bg: #1b1f3a;
  --foot-brand: #ffffff;
  --foot-en: #8b91ad;
  --foot-link: #b3bad2;
  --foot-link-hov: #ffffff;
  --foot-copy: #8b91ad;
}

/* ── 青柠 wechat（对标微信，白底 + 微信绿） ─────────────── */
[data-theme="wechat"]{
  --paper: #ffffff;
  --wash: #eff7f1;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e0ebe3;
  --line-hi: #b5cfbc;
  --ink: #142a1e;
  --body: #3d5147;
  --muted: #607268;
  --dim: #617368;  /* #309-matrix */
  --brand: #04773c;
  --brand-strong: #04763a;
  --brand-text: color-mix(in srgb, var(--brand) 94%, var(--ink));  /* R118: 原 4.40:1 */
  --teal: #10b3a3;
  --violet: #6a5acd;
  --live: #057f3f;  /* #309-matrix */
  --warn: #b45309;
  --down: #cf2e47;  /* #309-matrix */
  --grad: linear-gradient(135deg, #07c160, #02b340 60%, #00a254);
  --selection: rgba(7, 193, 96, 0.16);
  --shadow-card: 0 10px 30px rgba(20, 42, 30, 0.09);
  --shadow-pop: 0 16px 48px rgba(20, 42, 30, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e0ebe3, 0 8px 28px rgba(20, 42, 30, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #ecf4ee;

  --hero-bg:
    radial-gradient(68% 54% at 50% 30%, rgba(7, 193, 96, 0.08), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(16, 179, 163, 0.05), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(53, 192, 125, 0.05), transparent 72%),
    linear-gradient(180deg, #fafdfa 0%, #f0f8f2 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(20, 42, 30, 0.06);
  --h1-color: #142a1e;
  --h1-grad: linear-gradient(115deg, #142a1e 30%, #059048 92%);
  --h1-fill: transparent;

  --btn-solid-bg: #058341;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(7, 193, 96, 0.3);
  --btn-solid-shadow-hov: 0 6px 22px rgba(7, 193, 96, 0.4);
  --btn-line-bg: #ffffff;

  --chip-ink: #04773c;
  --chip-line: #bfe8cf;
  --chip-bg: #e6f7ee;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f0f7f1;

  --ico-bg: linear-gradient(150deg, #dcf5e4 0%, #e2f2ea 100%);
  --ico-line: #d5e8da;
  --tag-bg: #f0f7f1;
  --flinkp-bg: #e6f7ee;
  --flinkp-line: #bfe8cf;
  --flinkp-line-hov: #07c160;
  --flinkp-ink: #047239;
  --row-hover: #f0f8f2;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e0ebe3;

  --tl-rail: linear-gradient(to bottom, #7fd6a4, #d2e8d8 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(7, 193, 96, 0.14);
  --target-ring: 0 0 0 3px rgba(7, 193, 96, 0.15);

  --foot-bg: #0f241a;
  --foot-brand: #ffffff;
  --foot-en: #7d968a;
  --foot-link: #b3c6ba;
  --foot-link-hov: #ffffff;
  --foot-copy: #7d968a;
}

/* ── 哔哩 bilibili（对标 B 站，白底蓝粉双色） ───────────── */
[data-theme="bilibili"]{
  --paper: #ffffff;
  --wash: #f0f6fb;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e0e9f2;
  --line-hi: #b7c9db;
  --ink: #18191c;
  --body: #4a5056;
  --muted: #656d73;
  --dim: #65707c;  /* #309-matrix */
  --brand: #006b92;
  --brand-strong: #006b92;
  --teal: #00aeec;
  --violet: #fb7299;
  --live: #1b7e3f;  /* #309-matrix */
  --warn: #996414;  /* #309-matrix */
  --down: #dc1212;  /* #309-matrix */
  --grad: linear-gradient(135deg, #00aeec, #fb7299);
  --selection: rgba(0, 174, 236, 0.15);
  --shadow-card: 0 10px 30px rgba(24, 25, 28, 0.09);
  --shadow-pop: 0 16px 48px rgba(24, 25, 28, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e0e9f2, 0 8px 28px rgba(24, 25, 28, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #edf3f9;

  --hero-bg:
    radial-gradient(48% 40% at 14% 20%, rgba(0, 174, 236, 0.09), transparent 70%),
    radial-gradient(46% 40% at 86% 66%, rgba(251, 114, 153, 0.09), transparent 72%),
    radial-gradient(40% 34% at 70% 12%, rgba(255, 176, 39, 0.05), transparent 70%),
    linear-gradient(180deg, #fafcff 0%, #f1f7fc 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(24, 25, 28, 0.06);
  --h1-color: #18191c;
  --h1-grad: linear-gradient(115deg, #18191c 28%, #00aeec 68%, #fb7299 95%);
  --h1-fill: transparent;

  --btn-solid-bg: #e70746;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 20px rgba(251, 114, 153, 0.35);
  --btn-solid-shadow-hov: 0 8px 28px rgba(251, 114, 153, 0.48);
  --btn-line-bg: #ffffff;

  --chip-ink: #006b92;
  --chip-line: #c8e8f6;
  --chip-bg: #e5f5fc;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f0f6fb;

  --ico-bg: linear-gradient(150deg, #dff2fc 0%, #fdeaf1 100%);
  --ico-line: #dde7f0;
  --tag-bg: #f0f6fb;
  --flinkp-bg: #e5f5fc;
  --flinkp-line: #c8e8f6;
  --flinkp-line-hov: #00aeec;
  --flinkp-ink: #007199;
  --row-hover: #f0f7fc;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e0e9f2;

  --tl-rail: linear-gradient(to bottom, #7fc9e8, #f3c6d7 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(0, 174, 236, 0.14);
  --target-ring: 0 0 0 3px rgba(0, 174, 236, 0.15);

  --foot-bg: #182430;
  --foot-brand: #ffffff;
  --foot-en: #889098;
  --foot-link: #b0bfcc;
  --foot-link-hov: #ffffff;
  --foot-copy: #889098;
}

/* ── 淘橙 taobao（对标淘宝，白底活力橙） ───────────────── */
[data-theme="taobao"]{
  --paper: #ffffff;
  --wash: #fff5ef;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #f2e4da;
  --line-hi: #d9bfa9;
  --ink: #2b1a0e;
  --body: #57493d;
  --muted: #786a5d;
  --dim: #7c6d5b;  /* #309-matrix */
  --brand: #bc3b00;
  --brand-strong: #b83a00;
  --brand-text: color-mix(in srgb, var(--brand) 92%, var(--ink));  /* R118: 原 4.47:1 */
  --teal: #0aa870;
  --violet: #8b5cf6;
  --live: #11813b;  /* #309-matrix */
  --warn: #a75c05;  /* #309-matrix */
  --down: #db1f25;  /* #309-matrix */
  --grad: linear-gradient(135deg, #ff6a00, #ff5000 60%, #e8380d);
  --selection: rgba(255, 80, 0, 0.14);
  --shadow-card: 0 10px 30px rgba(43, 26, 14, 0.09);
  --shadow-pop: 0 16px 48px rgba(43, 26, 14, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #f2e4da, 0 8px 28px rgba(43, 26, 14, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #f6ede6;

  --hero-bg:
    radial-gradient(66% 52% at 50% 30%, rgba(255, 106, 0, 0.08), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(255, 177, 0, 0.07), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(232, 56, 13, 0.05), transparent 72%),
    linear-gradient(180deg, #fffcf9 0%, #fff4ec 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(43, 26, 14, 0.06);
  --h1-color: #2b1a0e;
  --h1-grad: linear-gradient(115deg, #2b1a0e 32%, #ff5000 90%);
  --h1-fill: transparent;

  --btn-solid-bg: #cc4000;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(255, 80, 0, 0.3);
  --btn-solid-shadow-hov: 0 6px 22px rgba(255, 80, 0, 0.42);
  --btn-line-bg: #ffffff;

  --chip-ink: #bc3b00;
  --chip-line: #ffd2b8;
  --chip-bg: #ffefe4;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #fff5ef;

  --ico-bg: linear-gradient(150deg, #ffe8d6 0%, #ffeccb 100%);
  --ico-line: #f2e0d2;
  --tag-bg: #fff5ef;
  --flinkp-bg: #ffefe4;
  --flinkp-line: #ffd2b8;
  --flinkp-line-hov: #ff5000;
  --flinkp-ink: #b73900;
  --row-hover: #fff6f0;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #f2e4da;

  --tl-rail: linear-gradient(to bottom, #ffa873, #f4dcca 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(255, 80, 0, 0.14);
  --target-ring: 0 0 0 3px rgba(255, 80, 0, 0.15);

  --foot-bg: #2b1a0e;
  --foot-brand: #ffffff;
  --foot-en: #90887f;
  --foot-link: #c4b3a0;
  --foot-link-hov: #ffffff;
  --foot-copy: #90887f;
}

/* ── 芒黄 meituan（对标美团，白底芒果黄 + 黑字按钮） ────── */
[data-theme="meituan"]{
  --paper: #ffffff;
  --wash: #fffbea;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #f0ebd4;
  --line-hi: #d4cb9c;
  --ink: #221f0f;
  --body: #4a4738;
  --muted: #716e5b;
  --dim: #78735a;  /* #309-matrix */
  --brand: #7d6100;
  --brand-strong: #7d6100;
  --teal: #36cfc9;
  --violet: #9254de;
  --live: #1c8348;  /* #309-matrix */
  --warn: #9b6514;  /* #309-matrix */
  --down: #df2026;  /* #309-matrix */
  --grad: linear-gradient(135deg, #ffd100, #ffb800 60%, #ff9500);
  --selection: rgba(255, 209, 0, 0.22);
  --shadow-card: 0 10px 30px rgba(34, 31, 15, 0.08);
  --shadow-pop: 0 16px 48px rgba(34, 31, 15, 0.13);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #f0ebd4, 0 8px 28px rgba(34, 31, 15, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #f4f0dc;

  --hero-bg:
    radial-gradient(66% 52% at 50% 30%, rgba(255, 209, 0, 0.12), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(255, 169, 64, 0.07), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(54, 207, 201, 0.05), transparent 72%),
    linear-gradient(180deg, #fffdf4 0%, #fff8e2 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.84);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(34, 31, 15, 0.06);
  --h1-color: #221f0f;
  --h1-grad: linear-gradient(115deg, #221f0f 32%, #b08900 92%);
  --h1-fill: transparent;

  --btn-solid-bg: #ffd100;
  --btn-solid-ink: #1f1f1f;
  --btn-solid-shadow: 0 2px 12px rgba(255, 209, 0, 0.35);
  --btn-solid-shadow-hov: 0 6px 22px rgba(255, 184, 0, 0.45);
  --btn-line-bg: #ffffff;

  --chip-ink: #7d6300;
  --chip-line: #f2e3a1;
  --chip-bg: #fff7d6;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #fffbea;

  --ico-bg: linear-gradient(150deg, #fff3c2 0%, #ffe9c7 100%);
  --ico-line: #efe6c2;
  --tag-bg: #fffbea;
  --flinkp-bg: #fff7d6;
  --flinkp-line: #f2e3a1;
  --flinkp-line-hov: #b08900;
  --flinkp-ink: #7b6100;
  --row-hover: #fffceb;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #f0ebd4;

  --tl-rail: linear-gradient(to bottom, #e8cf62, #efe8c8 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(255, 209, 0, 0.18);
  --target-ring: 0 0 0 3px rgba(255, 209, 0, 0.2);

  --foot-bg: #221f0f;
  --foot-brand: #ffffff;
  --foot-en: #8f8b74;
  --foot-link: #c2bda4;
  --foot-link-hov: #ffffff;
  --foot-copy: #8f8b74;
}

/* ── 缤纷 figma（对标 Figma，白底三色系统 + 黑色按钮） ──── */
[data-theme="figma"]{
  --paper: #ffffff;
  --wash: #f5f6f8;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e5e6ea;
  --line-hi: #bfc2c9;
  --ink: #1e1e1e;
  --body: #454549;
  --muted: #6e6e76;
  --dim: #6e6e77;  /* #309-matrix */
  --brand: #8334e7;
  --brand-strong: #7332c9;
  --teal: #1abcfe;
  --violet: #a259ff;
  --live: #067f50;  /* #309-matrix */
  --warn: #a75c05;  /* #309-matrix */
  --down: #cc370c;  /* #309-matrix */
  --grad: linear-gradient(135deg, #0acf83, #1abcfe 50%, #a259ff);
  --selection: rgba(162, 89, 255, 0.16);
  --shadow-card: 0 10px 30px rgba(30, 30, 30, 0.08);
  --shadow-pop: 0 16px 48px rgba(30, 30, 30, 0.13);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e5e6ea, 0 8px 28px rgba(30, 30, 30, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #eef0f2;

  --hero-bg:
    radial-gradient(46% 40% at 14% 20%, rgba(10, 207, 131, 0.08), transparent 70%),
    radial-gradient(46% 40% at 86% 20%, rgba(26, 188, 254, 0.08), transparent 70%),
    radial-gradient(48% 42% at 50% 78%, rgba(162, 89, 255, 0.07), transparent 72%),
    linear-gradient(180deg, #fbfcfd 0%, #f4f6f9 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(30, 30, 30, 0.06);
  --h1-color: #1e1e1e;
  --h1-grad: linear-gradient(115deg, #1e1e1e 30%, #1abcfe 66%, #a259ff 95%);
  --h1-fill: transparent;

  --btn-solid-bg: #1e1e1e;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(30, 30, 30, 0.22);
  --btn-solid-shadow-hov: 0 6px 22px rgba(30, 30, 30, 0.3);
  --btn-line-bg: #ffffff;

  --chip-ink: #7b3fe4;
  --chip-line: #e2d2fb;
  --chip-bg: #f4ecfe;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f5f6f8;

  --ico-bg: linear-gradient(150deg, #d9f5e5 0%, #ddf0fe 55%, #ece0fe 100%);
  --ico-line: #e2e4e8;
  --tag-bg: #f5f6f8;
  --flinkp-bg: #f4ecfe;
  --flinkp-line: #e2d2fb;
  --flinkp-line-hov: #8a3fe8;
  --flinkp-ink: #7b3fe4;
  --row-hover: #f6f2fe;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e5e6ea;

  --tl-rail: linear-gradient(to bottom, #8fdcc0, #9bd0f9 55%, #d5c2fa 90%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(162, 89, 255, 0.13);
  --target-ring: 0 0 0 3px rgba(162, 89, 255, 0.15);

  --foot-bg: #1e1e1e;
  --foot-brand: #ffffff;
  --foot-en: #8a8a92;
  --foot-link: #b9b9c0;
  --foot-link-hov: #ffffff;
  --foot-copy: #8a8a92;
}

/* ── 珊瑚 xhs（对标小红书，白底珊瑚红） ────────────────── */
[data-theme="xhs"]{
  --paper: #ffffff;
  --wash: #fff2f3;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #f5e2e4;
  --line-hi: #e0b3b8;
  --ink: #291510;
  --body: #54423c;
  --muted: #7d6962;
  --dim: #81695f;  /* #309-matrix */
  --brand: #c01c38;
  --brand-strong: #b91b36;
  --teal: #12b3a8;
  --violet: #8b5cf6;
  --live: #117f3a;  /* #309-matrix */
  --warn: #a75c05;  /* #309-matrix */
  --down: #de001e;  /* #309-matrix */
  --grad: linear-gradient(135deg, #ff2442, #ff7398);
  --selection: rgba(255, 36, 66, 0.14);
  --shadow-card: 0 10px 30px rgba(41, 21, 16, 0.09);
  --shadow-pop: 0 16px 48px rgba(41, 21, 16, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #f5e2e4, 0 8px 28px rgba(41, 21, 16, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #f8ecee;

  --hero-bg:
    radial-gradient(66% 52% at 50% 30%, rgba(255, 36, 66, 0.07), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(255, 115, 152, 0.06), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(255, 197, 61, 0.05), transparent 72%),
    linear-gradient(180deg, #fffbfb 0%, #fff1f2 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(41, 21, 16, 0.06);
  --h1-color: #291510;
  --h1-grad: linear-gradient(115deg, #291510 32%, #ff2442 90%);
  --h1-fill: transparent;

  --btn-solid-bg: #e3001f;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(255, 36, 66, 0.32);
  --btn-solid-shadow-hov: 0 6px 22px rgba(255, 36, 66, 0.44);
  --btn-line-bg: #ffffff;

  --chip-ink: #c01c38;
  --chip-line: #ffc9d2;
  --chip-bg: #ffe9ed;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #fff2f3;

  --ico-bg: linear-gradient(150deg, #ffe2e6 0%, #fff0d9 100%);
  --ico-line: #f2dcda;
  --tag-bg: #fff2f3;
  --flinkp-bg: #ffe9ed;
  --flinkp-line: #ffc9d2;
  --flinkp-line-hov: #ff2442;
  --flinkp-ink: #c91d3a;
  --row-hover: #fff4f5;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #f5e2e4;

  --tl-rail: linear-gradient(to bottom, #fb93a5, #f6d8dd 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(255, 36, 66, 0.14);
  --target-ring: 0 0 0 3px rgba(255, 36, 66, 0.15);

  --foot-bg: #2a1714;
  --foot-brand: #ffffff;
  --foot-en: #908582;
  --foot-link: #c9b2ab;
  --foot-link-hov: #ffffff;
  --foot-copy: #908582;
}

/* ── 蒸汽 steam（对标 Steam，钢蓝双深色 + 冰蓝） ────────── */
[data-theme="steam"]{
  --paper: #171a21;
  --wash: #1b2838;
  --card: #16202d;
  --card-hi: #1f2c3d;
  --line: #2a3b4d;
  --line-hi: #66c0f4;
  --ink: #e8f4fb;
  --body: #a3b2c0;
  --muted: #8f98a0;
  --dim: #8291a1;  /* #309-matrix */
  --brand: #66c0f4;
  --brand-strong: #8fd2f8;
  --teal: #90ba3e;
  --violet: #7c5cff;
  --live: #6dc36d;
  --warn: #e0c341;
  --down: #e96569;  /* #309-matrix */
  --grad: linear-gradient(135deg, #66c0f4, #1a9fff 60%, #2a475e);
  --selection: rgba(102, 192, 244, 0.3);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(23, 26, 33, 0.72);
  --nav-solid: rgba(23, 26, 33, 0.95);
  --nav-shadow: 0 1px 0 rgba(232, 244, 251, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);
  --drawer-bg: rgba(23, 26, 33, 0.97);
  --drawer-line: rgba(232, 244, 251, 0.07);

  --hero-bg:
    radial-gradient(64% 52% at 50% 30%, rgba(102, 192, 244, 0.13), transparent 70%),
    radial-gradient(42% 36% at 15% 22%, rgba(26, 159, 255, 0.08), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(144, 186, 62, 0.05), transparent 72%),
    linear-gradient(180deg, #1d2938 0%, #1b2838 55%, #171a21 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(23, 26, 33, 0.55) 82%, #171a21 100%),
    linear-gradient(to top, #171a21 0%, transparent 12%),
    linear-gradient(to bottom, rgba(23, 26, 33, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(23, 26, 33, 0.55);
  --strip-bg: rgba(27, 40, 56, 0.6);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --h1-color: #e8f4fb;
  --h1-grad: linear-gradient(115deg, #e8f4fb 32%, #66c0f4 88%);
  --h1-fill: transparent;

  --btn-solid-bg: #66c0f4;
  --btn-solid-ink: #0e1822;
  --btn-solid-shadow: 0 4px 22px rgba(102, 192, 244, 0.32);
  --btn-solid-shadow-hov: 0 8px 30px rgba(102, 192, 244, 0.46);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #8fd2f8;
  --chip-line: rgba(102, 192, 244, 0.38);
  --chip-bg: rgba(102, 192, 244, 0.09);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(102, 192, 244, 0.15), rgba(27, 40, 56, 0.6));
  --ico-line: rgba(102, 192, 244, 0.25);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(102, 192, 244, 0.09);
  --flinkp-line: rgba(102, 192, 244, 0.38);
  --flinkp-line-hov: rgba(102, 192, 244, 0.7);
  --flinkp-ink: #8fd2f8;
  --row-hover: rgba(102, 192, 244, 0.07);

  --sticky-bg: rgba(23, 26, 33, 0.9);
  --pop-bg: #16202d;
  --pop-line: #2a3b4d;

  --tl-rail: linear-gradient(to bottom, rgba(102, 192, 244, 0.5), rgba(42, 71, 78, 0.4), transparent);
  --tl-dot-halo: 0 0 12px rgba(102, 192, 244, 0.6);
  --target-ring: 0 0 0 1px rgba(102, 192, 244, 0.45);

  --foot-bg: #12161d;
  --foot-brand: #e8f4fb;
  --foot-en: #7b848d;
  --foot-link: #8f98a0;
  --foot-link-hov: #e8f4fb;
  --foot-copy: #7b848d;
}

/* ── 无畏 valorant（对标 VALORANT，海军黑 + 战术红 + 荧光青） ── */
[data-theme="valorant"]{
  --paper: #0f1923;
  --wash: #14202b;
  --card: #1a2733;
  --card-hi: #233240;
  --line: #24394a;
  --line-hi: #5a7c8f;
  --ink: #ece8e1;
  --body: #b8c2cc;
  --muted: #909ba4;
  --dim: #80909d;  /* #309-matrix */
  --brand: #ff6b78;
  --brand-strong: #ff8a93;
  --teal: #00806f;
  --violet: #a259ff;
  --live: #18e0c8;
  --warn: #ffcc4d;
  --down: #ff4b5a;  /* #309-matrix */
  --grad: linear-gradient(135deg, #e22c3d, #d13c49 60%, #18e0c8);
  --selection: rgba(255, 70, 85, 0.32);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.62);

  --nav-bg: rgba(15, 25, 35, 0.72);
  --nav-solid: rgba(15, 25, 35, 0.95);
  --nav-shadow: 0 1px 0 rgba(236, 232, 225, 0.08), 0 8px 28px rgba(0, 0, 0, 0.45);
  --drawer-bg: rgba(15, 25, 35, 0.97);
  --drawer-line: rgba(236, 232, 225, 0.07);

  --hero-bg:
    radial-gradient(52% 44% at 20% 24%, rgba(255, 70, 85, 0.15), transparent 70%),
    radial-gradient(44% 38% at 84% 66%, rgba(24, 224, 200, 0.07), transparent 72%),
    radial-gradient(40% 34% at 78% 12%, rgba(255, 70, 85, 0.06), transparent 70%),
    linear-gradient(180deg, #131f2b 0%, #111c26 55%, #0f1923 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(15, 25, 35, 0.55) 82%, #0f1923 100%),
    linear-gradient(to top, #0f1923 0%, transparent 12%),
    linear-gradient(to bottom, rgba(15, 25, 35, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(15, 25, 35, 0.5);
  --strip-bg: rgba(15, 25, 35, 0.55);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --h1-color: #ece8e1;
  --h1-grad: linear-gradient(115deg, #ece8e1 34%, #ff8a93 64%, #18e0c8 95%);
  --h1-fill: transparent;

  --btn-solid-bg: #e22c3d;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 24px rgba(255, 70, 85, 0.38);
  --btn-solid-shadow-hov: 0 8px 32px rgba(255, 70, 85, 0.52);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #ff8a93;
  --chip-line: rgba(255, 70, 85, 0.38);
  --chip-bg: rgba(255, 70, 85, 0.09);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(255, 70, 85, 0.15), rgba(24, 224, 200, 0.1));
  --ico-line: rgba(236, 232, 225, 0.14);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(255, 70, 85, 0.09);
  --flinkp-line: rgba(255, 70, 85, 0.38);
  --flinkp-line-hov: rgba(255, 107, 120, 0.7);
  --flinkp-ink: #ff8a93;
  --row-hover: rgba(255, 70, 85, 0.07);

  --sticky-bg: rgba(15, 25, 35, 0.9);
  --pop-bg: #1a2733;
  --pop-line: #24394a;

  --tl-rail: linear-gradient(to bottom, rgba(255, 70, 85, 0.5), rgba(24, 224, 200, 0.3), transparent);
  --tl-dot-halo: 0 0 12px rgba(255, 70, 85, 0.7);
  --target-ring: 0 0 0 1px rgba(255, 70, 85, 0.45);

  --foot-bg: #0a1118;
  --foot-brand: #ece8e1;
  --foot-en: #6f8291;
  --foot-link: #7e8b96;
  --foot-link-hov: #ece8e1;
  --foot-copy: #6f8291;
}

/* ── 奈影 netflix（对标 Netflix，纯黑 + 影院红单色） ────── */
[data-theme="netflix"]{
  --paper: #000000;
  --wash: #0b0b0f;
  --card: #141414;
  --card-hi: #1e1e1e;
  --line: #262626;
  --line-hi: #4d4d4d;
  --ink: #f5f5f1;
  --body: #b3b3b3;
  --muted: #8a8a8a;
  --dim: #7f7f7f;  /* #309-matrix */
  --brand: #ff4d57;
  --brand-strong: #ff757d;
  --teal: #22d3ee;
  --violet: #e50914;
  --live: #46d369;
  --warn: #f5b83d;
  --down: #f72832;  /* #309-matrix */
  --grad: linear-gradient(135deg, #e50914, #b1060f);
  --selection: rgba(229, 9, 20, 0.4);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65);

  --nav-bg: rgba(0, 0, 0, 0.72);
  --nav-solid: rgba(0, 0, 0, 0.95);
  --nav-shadow: 0 1px 0 rgba(245, 245, 241, 0.08), 0 8px 28px rgba(0, 0, 0, 0.5);
  --drawer-bg: rgba(0, 0, 0, 0.97);
  --drawer-line: rgba(245, 245, 241, 0.07);

  --hero-bg:
    radial-gradient(64% 52% at 50% 30%, rgba(229, 9, 20, 0.16), transparent 70%),
    radial-gradient(40% 34% at 82% 16%, rgba(229, 9, 20, 0.07), transparent 70%),
    linear-gradient(180deg, #0d0506 0%, #060303 55%, #000000 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(0, 0, 0, 0.55) 82%, #000000 100%),
    linear-gradient(to top, #000000 0%, transparent 12%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(0, 0, 0, 0.55);
  --strip-bg: rgba(20, 20, 20, 0.6);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --h1-color: #f5f5f1;
  --h1-grad: linear-gradient(115deg, #f5f5f1 42%, #ff4d57 88%, #e50914 98%);
  --h1-fill: transparent;

  --btn-solid-bg: #e50914;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 24px rgba(229, 9, 20, 0.42);
  --btn-solid-shadow-hov: 0 8px 32px rgba(229, 9, 20, 0.58);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #ff525f;
  --chip-line: rgba(229, 9, 20, 0.42);
  --chip-bg: rgba(229, 9, 20, 0.1);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(229, 9, 20, 0.16), rgba(255, 255, 255, 0.04));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(229, 9, 20, 0.1);
  --flinkp-line: rgba(229, 9, 20, 0.42);
  --flinkp-line-hov: rgba(255, 82, 95, 0.7);
  --flinkp-ink: #ff525f;
  --row-hover: rgba(229, 9, 20, 0.08);

  --sticky-bg: rgba(0, 0, 0, 0.9);
  --pop-bg: #141414;
  --pop-line: #262626;

  --tl-rail: linear-gradient(to bottom, rgba(229, 9, 20, 0.55), rgba(229, 9, 20, 0.2), transparent);
  --tl-dot-halo: 0 0 12px rgba(229, 9, 20, 0.7);
  --target-ring: 0 0 0 1px rgba(229, 9, 20, 0.5);

  --foot-bg: #000000;
  --foot-brand: #f5f5f1;
  --foot-en: #797979;
  --foot-link: #808080;
  --foot-link-hov: #f5f5f1;
  --foot-copy: #797979;
}

/* ── 极焰 vite（对标 Vite，炭黑 + 蓝紫闪电黄三色渐变） ──── */
[data-theme="vite"]{
  --paper: #101014;
  --wash: #16161c;
  --card: #1b1b22;
  --card-hi: #24242d;
  --line: #2d2d36;
  --line-hi: #565663;
  --ink: #f1f1f5;
  --body: #bcbcc6;
  --muted: #8e8e9a;
  --dim: #848492;  /* #309-matrix */
  --brand: #d06cff;
  --brand-strong: #e095ff;
  --teal: #41d1ff;
  --violet: #bd34fe;
  --live: #4ade80;
  --warn: #ffd62e;
  --down: #fb7185;
  --grad: linear-gradient(135deg, #41d1ff, #bd34fe 55%, #ffd62e);
  --selection: rgba(189, 52, 254, 0.35);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(16, 16, 20, 0.72);
  --nav-solid: rgba(16, 16, 20, 0.95);
  --nav-shadow: 0 1px 0 rgba(241, 241, 245, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);
  --drawer-bg: rgba(16, 16, 20, 0.97);
  --drawer-line: rgba(241, 241, 245, 0.07);

  --hero-bg:
    radial-gradient(48% 42% at 18% 22%, rgba(65, 209, 255, 0.12), transparent 70%),
    radial-gradient(48% 42% at 80% 30%, rgba(189, 52, 254, 0.15), transparent 70%),
    radial-gradient(40% 34% at 60% 80%, rgba(255, 214, 46, 0.06), transparent 72%),
    linear-gradient(180deg, #14131a 0%, #121118 55%, #101014 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(16, 16, 20, 0.55) 82%, #101014 100%),
    linear-gradient(to top, #101014 0%, transparent 12%),
    linear-gradient(to bottom, rgba(16, 16, 20, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(16, 16, 20, 0.5);
  --strip-bg: rgba(27, 27, 34, 0.6);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --h1-color: #f1f1f5;
  --h1-grad: linear-gradient(115deg, #f1f1f5 35%, #bd34fe 66%, #ffd62e 95%);
  --h1-fill: transparent;

  --btn-solid-bg: linear-gradient(135deg, #41d1ff, #bd34fe);
  --btn-solid-ink: #0f0f14;
  --btn-solid-shadow: 0 4px 24px rgba(189, 52, 254, 0.4);
  --btn-solid-shadow-hov: 0 8px 32px rgba(65, 209, 255, 0.35);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #d06cff;
  --chip-line: rgba(189, 52, 254, 0.4);
  --chip-bg: rgba(189, 52, 254, 0.1);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(65, 209, 255, 0.14), rgba(189, 52, 254, 0.12));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(189, 52, 254, 0.1);
  --flinkp-line: rgba(189, 52, 254, 0.4);
  --flinkp-line-hov: rgba(208, 108, 255, 0.7);
  --flinkp-ink: #d06cff;
  --row-hover: rgba(189, 52, 254, 0.08);

  --sticky-bg: rgba(16, 16, 20, 0.9);
  --pop-bg: #1b1b22;
  --pop-line: #2d2d36;

  --tl-rail: linear-gradient(to bottom, rgba(65, 209, 255, 0.5), rgba(189, 52, 254, 0.35), transparent);
  --tl-dot-halo: 0 0 12px rgba(189, 52, 254, 0.7);
  --target-ring: 0 0 0 1px rgba(189, 52, 254, 0.45);

  --foot-bg: #0b0b0e;
  --foot-brand: #f1f1f5;
  --foot-en: #7e7e86;
  --foot-link: #8e8e9a;
  --foot-link-hov: #f1f1f5;
  --foot-copy: #7e7e86;
}

/* ── 紫电 twitch（对标 Twitch，纯黑 + 直播紫单色系） ────── */
[data-theme="twitch"]{
  --paper: #0e0e10;
  --wash: #16161a;
  --card: #1f1f23;
  --card-hi: #29292e;
  --line: #323239;
  --line-hi: #53535f;
  --ink: #efeff1;
  --body: #c8c8ce;
  --muted: #9d9da5;
  --dim: #878790;  /* #309-matrix */
  --brand: #a970ff;
  --brand-strong: #c9a6ff;
  --teal: #00c7b5;
  --violet: #9146ff;
  --live: #22c55e;
  --warn: #f0a83c;
  --down: #ff5c5c;
  --grad: linear-gradient(135deg, #9146ff, #772cea);
  --selection: rgba(145, 70, 255, 0.35);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(14, 14, 16, 0.72);
  --nav-solid: rgba(14, 14, 16, 0.95);
  --nav-shadow: 0 1px 0 rgba(239, 239, 241, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);
  --drawer-bg: rgba(14, 14, 16, 0.97);
  --drawer-line: rgba(239, 239, 241, 0.07);

  --hero-bg:
    radial-gradient(62% 50% at 50% 30%, rgba(145, 70, 255, 0.17), transparent 70%),
    radial-gradient(40% 34% at 16% 22%, rgba(169, 112, 255, 0.08), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(0, 199, 181, 0.05), transparent 72%),
    linear-gradient(180deg, #131317 0%, #101014 55%, #0e0e10 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(14, 14, 16, 0.55) 82%, #0e0e10 100%),
    linear-gradient(to top, #0e0e10 0%, transparent 12%),
    linear-gradient(to bottom, rgba(14, 14, 16, 0.85) 0%, transparent 16%);
  --kicker-bg: rgba(14, 14, 16, 0.5);
  --strip-bg: rgba(31, 31, 35, 0.6);
  --strip-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --h1-color: #efeff1;
  --h1-grad: linear-gradient(115deg, #efeff1 40%, #bf94ff 90%);
  --h1-fill: transparent;

  --btn-solid-bg: #9146ff;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 4px 24px rgba(145, 70, 255, 0.4);
  --btn-solid-shadow-hov: 0 8px 32px rgba(145, 70, 255, 0.55);
  --btn-line-bg: rgba(255, 255, 255, 0.04);

  --chip-ink: #bf94ff;
  --chip-line: rgba(145, 70, 255, 0.4);
  --chip-bg: rgba(145, 70, 255, 0.1);
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: rgba(255, 255, 255, 0.04);

  --ico-bg: linear-gradient(160deg, rgba(145, 70, 255, 0.16), rgba(0, 199, 181, 0.08));
  --ico-line: rgba(255, 255, 255, 0.12);
  --tag-bg: rgba(255, 255, 255, 0.04);
  --flinkp-bg: rgba(145, 70, 255, 0.1);
  --flinkp-line: rgba(145, 70, 255, 0.4);
  --flinkp-line-hov: rgba(169, 112, 255, 0.7);
  --flinkp-ink: #bf94ff;
  --row-hover: rgba(145, 70, 255, 0.08);

  --sticky-bg: rgba(14, 14, 16, 0.9);
  --pop-bg: #1f1f23;
  --pop-line: #323239;

  --tl-rail: linear-gradient(to bottom, rgba(145, 70, 255, 0.5), rgba(145, 70, 255, 0.2), transparent);
  --tl-dot-halo: 0 0 12px rgba(145, 70, 255, 0.7);
  --target-ring: 0 0 0 1px rgba(145, 70, 255, 0.45);

  --foot-bg: #0a0a0c;
  --foot-brand: #efeff1;
  --foot-en: #7d7d86;
  --foot-link: #9d9da5;
  --foot-link-hov: #efeff1;
  --foot-copy: #7d7d86;
}

/* ── 茄紫 slack（对标 Slack，白底茄紫 + 四色点缀） ──────── */
[data-theme="slack"]{
  --paper: #ffffff;
  --wash: #f6f4f8;
  --card: #ffffff;
  --card-hi: #ffffff;
  --line: #e8e4ec;
  --line-hi: #c5b6cf;
  --ink: #1d1c1d;
  --body: #454245;
  --muted: #69676b;
  --dim: #706f6b;  /* #309-matrix */
  --brand: #611f69;
  --brand-strong: #4a154b;
  --teal: #36c5f0;
  --violet: #e01e5a;
  --live: #207d56;  /* #309-matrix */
  --warn: #90680d;  /* #309-matrix */
  --down: #d51c55;  /* #309-matrix */
  --grad: linear-gradient(135deg, #611f69, #86255f 55%, #e01e5a);
  --selection: rgba(97, 31, 105, 0.14);
  --shadow-card: 0 10px 30px rgba(29, 28, 29, 0.09);
  --shadow-pop: 0 16px 48px rgba(29, 28, 29, 0.14);

  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-solid: rgba(255, 255, 255, 0.97);
  --nav-shadow: 0 1px 0 #e8e4ec, 0 8px 28px rgba(29, 28, 29, 0.07);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-line: #f0edf3;

  --hero-bg:
    radial-gradient(64% 52% at 50% 30%, rgba(97, 31, 105, 0.07), transparent 70%),
    radial-gradient(42% 36% at 15% 20%, rgba(54, 197, 240, 0.06), transparent 70%),
    radial-gradient(44% 38% at 85% 68%, rgba(224, 30, 90, 0.05), transparent 72%),
    linear-gradient(180deg, #fdfcfe 0%, #f6f3f9 58%, #ffffff 100%);
  --hero-vignette:
    radial-gradient(ellipse 92% 64% at 50% 44%, transparent 40%, rgba(255, 255, 255, 0.62) 82%, #ffffff 100%),
    linear-gradient(to top, #ffffff 0%, transparent 12%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, transparent 16%);
  --kicker-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.86);
  --strip-shadow: 0 4px 24px rgba(29, 28, 29, 0.06);
  --h1-color: #1d1c1d;
  --h1-grad: linear-gradient(115deg, #1d1c1d 30%, #611f69 70%, #e01e5a 95%);
  --h1-fill: transparent;

  --btn-solid-bg: #4a154b;
  --btn-solid-ink: #ffffff;
  --btn-solid-shadow: 0 2px 12px rgba(74, 21, 75, 0.26);
  --btn-solid-shadow-hov: 0 6px 22px rgba(74, 21, 75, 0.36);
  --btn-line-bg: #ffffff;

  --chip-ink: #611f69;
  --chip-line: #dcc8e4;
  --chip-bg: #f3ecf7;
  --chipsoft-ink: var(--muted);
  --chipsoft-line: var(--line);
  --chipsoft-bg: #f6f4f8;

  --ico-bg: linear-gradient(150deg, #ddf1fc 0%, #dff5ea 55%, #fcebd3 100%);
  --ico-line: #e4e0e6;
  --tag-bg: #f6f4f8;
  --flinkp-bg: #f3ecf7;
  --flinkp-line: #dcc8e4;
  --flinkp-line-hov: #611f69;
  --flinkp-ink: #611f69;
  --row-hover: #f8f5fa;

  --sticky-bg: rgba(255, 255, 255, 0.94);
  --pop-bg: #ffffff;
  --pop-line: #e8e4ec;

  --tl-rail: linear-gradient(to bottom, #b48cc0, #e2d6e8 70%, transparent);
  --tl-dot-halo: 0 0 0 4px rgba(97, 31, 105, 0.13);
  --target-ring: 0 0 0 3px rgba(97, 31, 105, 0.15);

  --foot-bg: #1d1c1d;
  --foot-brand: #ffffff;
  --foot-en: #8f8d90;
  --foot-link: #b9b7bb;
  --foot-link-hov: #ffffff;
  --foot-copy: #8f8d90;
}

/* ════════════════ 组件（全部吃 token） ════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h, 64px) + 12px); }
:root { --nav-h: 64px; --maxw: 1240px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
    "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace; }
body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
b { font-weight: 600; color: var(--ink); }
::selection { background: var(--selection); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── 顶部导航 ─────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.nav.scrolled { background: var(--nav-solid); box-shadow: var(--nav-shadow); }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  padding: 0 20px;
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; font-family: var(--font-display); flex-shrink: 0; transition: opacity 0.2s var(--ease); }
.brand:hover { opacity: 0.85; }
.brand img { width: 26px; height: 26px; }
.brand-name {
  background: linear-gradient(135deg, var(--ink) 0%, var(--brand) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 18px; margin-left: 10px; }
.nav-links a {
  position: relative; color: var(--muted); font-size: 14px; font-weight: 500;
  transition: color 0.2s var(--ease); padding: 4px 0;
  /* R114：中文标签默认会在 1240 容器里被挤成两行（实测 1920 宽也照样折：
     9 项 max-content 554px > 可用 510px）——「项目矩 / 阵」这种断字必须禁掉。
     同时把 gap 从 22 收到 18，为 9 项省下 32px，折行与溢出都不再出现。 */
  white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
  background: var(--brand); border-radius: 2px; transition: width 0.25s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* R114：导航右侧的「搜索 / Ctrl K / 风格」也是中文标签，同样会被逐字折断
   （1280 宽实测「搜 索」「风 格」各占两行）。整条导航一律不许折行。 */
.nav-inner .k-trigger, .nav-inner .theme-btn, .nav-inner .theme-name,
.nav-inner .btn, .nav-inner .nav-brain { white-space: nowrap; }

/* ── 通千算智智脑入口（R120：占用原探活徽标 .sys-pill 的位置）──────────────
   为什么换掉探活徽标：它不是内容入口，文案还会随探活结果膨胀成
   「4 个站点待检（4 个无法连接）」，既挤压导航、自己的尾巴被省略号截断，
   又和主导航的「状态」一项重复。探活明细照旧在 /status/ 与首页 #status。

   R120c 科技感皮肤（用户否掉粉色：太糖果）。设计语言是「设备端子 / HUD 指示灯」：
     · 冷色青蓝 —— 取站点 logo 血统 #22D3EE，和右侧蓝紫主 CTA 同族但更冷更克制；
     · 方角 6px 端子外形（原来是全圆角胶囊，圆角=软，方角=硬件）；
     · 1px 精确描边 + 顶部 inset 高光 + 小半径 halo —— 不用大团 blur，
       模糊光晕显「柔」，锐利描边才显「精密」；
     · 3px 间隔的极淡横向扫描线打底（repeating-linear-gradient），近看有纹理；
     · 底部一条渐隐扫描光（::after），像接口底部的状态灯带。
   配色仍旧按深/浅两组给（浅色 14 主题用深青墨 #0c4a5e，否则冷色压浅底会糊）。 */
:root {
  --brain-ink: #a5f3fc;        /* 文字 / 图标：cyan-200 */
  --brain-line: #22d3ee;       /* 描边：cyan-400 */
  --brain-line-hov: #67e8f9;   /* hover 描边：cyan-300 */
  --brain-bg-1: rgba(9, 38, 54, 0.9);
  --brain-bg-2: rgba(6, 24, 36, 0.9);
  --brain-grid: rgba(34, 211, 238, 0.075);
  --brain-hi: rgba(255, 255, 255, 0.15);   /* 顶部 1px 内高光 */
  --brain-ring: rgba(34, 211, 238, 0.3);   /* 外扩 1px 环（把描边读成 2px） */
  --brain-halo: rgba(34, 211, 238, 0.32);
}
/* 浅色主题（按 --paper 亮度分组的 14 个）：青色压亮底会发灰，改用深青墨 + 实心浅青端面 */
[data-theme="aurora"], [data-theme="day"], [data-theme="platinum"],
[data-theme="anthropic"], [data-theme="perplexity"], [data-theme="canva"],
[data-theme="deepseek"], [data-theme="wechat"], [data-theme="bilibili"],
[data-theme="taobao"], [data-theme="meituan"], [data-theme="figma"],
[data-theme="xhs"], [data-theme="slack"] {
  --brain-ink: #0c4a5e;
  --brain-line: #0e7490;
  --brain-line-hov: #0891b2;
  --brain-bg-1: rgba(240, 253, 255, 0.94);
  --brain-bg-2: rgba(207, 250, 254, 0.94);
  --brain-grid: rgba(14, 116, 144, 0.1);
  --brain-hi: rgba(255, 255, 255, 0.9);
  --brain-ring: rgba(14, 116, 144, 0.26);
  --brain-halo: rgba(14, 116, 144, 0.2);
}

.nav-brain {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; line-height: 1; border-radius: 6px;
  border: 1px solid var(--brain-line);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--brain-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, var(--brain-grid) 3px 4px),
    linear-gradient(180deg, var(--brain-bg-1), var(--brain-bg-2));
  /* 三层：顶部 1px 内高光（金属感）+ 外扩 1px 环（把 1px 描边读成 2px，硬一点）+ 小半径 halo */
  box-shadow:
    inset 0 1px 0 var(--brain-hi),
    0 0 0 1px var(--brain-ring),
    0 0 14px -3px var(--brain-halo);
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.2s var(--ease);
}
/* 外侧取景框角标（左上 + 右下各一个 7px 的 L）：HUD 目标框语言，不占内部空间 */
.nav-brain::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background:
    linear-gradient(var(--brain-line), var(--brain-line)) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--brain-line), var(--brain-line)) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--brain-line), var(--brain-line)) 100% 100% / 7px 1px no-repeat,
    linear-gradient(var(--brain-line), var(--brain-line)) 100% 100% / 1px 7px no-repeat;
  opacity: 0.55;
  transition: opacity 0.25s var(--ease);
}
/* 底部状态灯带：两端渐隐，类 HUD 的下沿光条（不参与布局、不挡文字） */
.nav-brain::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brain-line), transparent);
  opacity: 0.6;
  transition: opacity 0.25s var(--ease);
}
.nav-brain .nb-ico { display: block; flex: none; }
.nav-brain .nb-txt { white-space: nowrap; }
.nav-brain:hover {
  border-color: var(--brain-line-hov);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--brain-hi),
    0 0 0 1px var(--brain-ring),
    0 0 22px -2px var(--brain-halo);
}
.nav-brain:hover::before { opacity: 1; }
.nav-brain:hover::after { opacity: 1; }
.nav-brain:hover .nb-ico { animation: nb-beat 1.6s var(--ease) infinite; }
.nav-brain:active { transform: none; }
.nav-brain:focus-visible { outline: 2px solid var(--brain-ink); outline-offset: 4px; }
/* 呼吸是「越来越亮」而不是「忽明忽暗」：hover 代表激活，不能看起来像在消失 */
@keyframes nb-beat {
  0%, 100% { filter: drop-shadow(0 0 3px var(--brain-halo)); }
  50% { filter: drop-shadow(0 0 9px var(--brain-line)); }
}

/* 探活状态点（JS 按 /status.json 上色） */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim); flex: none; display: inline-block;
}
/* color-mix 回退 #2/#3（#215）：脉冲起始环 spread=0 本就不可见，回退 transparent 视觉等价 */
.dot-live { background: var(--live); box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 35%, transparent); animation: pulse 2.4s infinite; }
.dot-warn { background: var(--warn); }
.dot-down { background: var(--down); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 32%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── 主题切换器 ───────────────────────────────── */
.theme-menu { position: relative; }
.theme-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); line-height: 1;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; background: transparent;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.theme-btn:hover { border-color: var(--line-hi); color: var(--ink); }
.theme-btn svg { width: 14px; height: 14px; display: block; }
.theme-drop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 212px;
  max-height: min(600px, calc(100vh - var(--nav-h) - 24px));
  overflow-y: auto;
  background: var(--pop-bg);
  border: 1px solid var(--pop-line);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: none;
}
.theme-drop.open { display: block;; visibility: visible; }
.theme-cap {
  font-size: 11px; font-weight: 600; color: var(--dim);
  letter-spacing: 0.14em;
  padding: 9px 10px 5px;
}
.theme-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  color: var(--body); font-size: 13.5px;
  padding: 8px 10px; border-radius: 9px;
  transition: background-color 0.15s var(--ease);
}
.theme-opt:hover { background: var(--row-hover); }
.theme-opt .sw { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid var(--line-hi); }
.theme-opt .tn { font-weight: 600; color: var(--ink); }
.theme-opt .td { font-size: 11.5px; color: var(--dim); margin-left: auto; }
.theme-opt .ck { width: 15px; height: 15px; color: var(--brand); flex: none; visibility: hidden; }
.theme-opt.on .ck { visibility: visible; }

/* ── 按钮 ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; line-height: 1;
  padding: 11px 20px; border-radius: var(--btn-radius);
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), filter 0.18s var(--ease);
  white-space: nowrap;
}
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--btn-radius-lg); }
.btn-block { width: 100%; }
.btn-solid {
  background: var(--btn-solid-bg); color: var(--btn-solid-ink);
  box-shadow: var(--btn-solid-shadow);
}
.btn-solid:hover { transform: translateY(-1px); box-shadow: var(--btn-solid-shadow-hov); filter: brightness(1.06); }
.btn-line { border-color: var(--line-hi); color: var(--ink); background: var(--btn-line-bg); }
.btn-line:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { border-color: var(--line); color: var(--muted); padding: 10px 16px; }
.btn-ghost:hover { color: var(--ink); border-color: var(--line-hi); }

.nav-burger {
  display: none; margin-left: auto; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: 20px; line-height: 1;
  width: 40px; height: 40px; cursor: pointer;
}
.nav-drawer {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--drawer-bg);
  padding: 10px 24px 18px;
}
.nav-drawer a { padding: 12px 2px; color: var(--muted); border-bottom: 1px solid var(--drawer-line); }
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer.open { display: flex; }

/* ── 首屏：项目星图 ───────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--hero-bg);
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* #hero-flux 与 #hero-canvas 同为装饰层，必须一起脱离文档流。
   漏了这条时它是普通 block：JS 按 DPR 设置 canvas.width/height 会让它从 300×150
   长成视口大小，把 .hero-inner 整体往下推 —— 实测移动端 CLS 0.725（偏移源
   canvas + div.hero-inner）。 */
#hero-flux { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--hero-vignette);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 24px 96px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 30px;
  background: var(--kicker-bg);
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 800; line-height: 1.12; letter-spacing: 0.01em;
  color: var(--h1-color);
  background: var(--h1-grad);
}
/* 炫酷算力口号：流光渐变 + 梯度移动 + 漂浮 + 微光呼吸 */
.hero-h1-grad {
  background: linear-gradient(135deg, var(--teal) 0%, var(--brand) 40%, var(--violet) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.3));
  animation: heroGlow 4s ease-in-out infinite alternate, heroGradient 7s ease infinite, heroFloat 5s ease-in-out infinite;
}
@keyframes heroGlow {
  0% { filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.25)); }
  100% { filter: drop-shadow(0 0 32px rgba(168, 85, 247, 0.4)); }
}
@keyframes heroGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes h1flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-sub {
  margin-top: 22px; max-width: 620px;
  font-size: clamp(15.5px, 1.6vw, 18px); color: var(--muted);
  text-wrap: pretty;
}
.hero-sub b { color: var(--ink); }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.hero-cta .mono { font-size: 0.85em; opacity: 0.85; }

.hero-strip {
  display: flex; gap: 0; margin-top: 58px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--strip-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--strip-shadow);
  overflow: hidden;
}
.hero-strip > div {
  padding: 16px 30px; text-align: center;
  border-left: 1px solid var(--line);
}
.hero-strip > div:first-child { border-left: none; }
.hero-strip dt { font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-strip dd { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hero-scroll {
  margin-top: 42px; font-size: 12px; color: var(--dim);
  letter-spacing: 0.14em;
}

/* 首屏入场：只做一次编排好的序列 */
.hero-kicker, .hero-h1, .hero-sub, .hero-cta, .hero-strip, .hero-scroll {
  opacity: 0; transform: translateY(16px);
  animation: rise 0.9s var(--ease) forwards;
}
.hero-h1 { animation-delay: 0.08s; }
.hero-sub { animation-delay: 0.18s; }
.hero-cta { animation-delay: 0.28s; }
.hero-strip { animation-delay: 0.42s; }
.hero-scroll { animation-delay: 0.6s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── 通用区块 ─────────────────────────────────── */
main { position: relative; z-index: 1; background: var(--paper); transition: background-color 0.25s ease; }
.sec { max-width: var(--maxw); margin: 0 auto; padding: 104px 24px 40px; }
.sec-alt { max-width: none; padding: 0; border-top: 1px solid var(--line); background: var(--wash); }
.sec-alt .sec-head, .sec-alt .row-list { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sec-alt { padding: 76px 0; }
.sec-head { margin-bottom: 40px; }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: 0.01em;
  color: var(--ink);
}
.sec-head p { color: var(--muted); margin-top: 10px; font-size: 16px; }

/* ── 版本徽片（签名细节：等宽字票签） ─────────── */
.vchip {
  font-family: var(--mono); font-size: 12px; line-height: 1;
  color: var(--chip-ink);
  border: 1px solid var(--chip-line);
  background: var(--chip-bg);
  border-radius: 999px; padding: 5px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vchip-lg { font-size: 15px; padding: 8px 16px; }
.vchip-soft { color: var(--chipsoft-ink); border-color: var(--chipsoft-line); background: var(--chipsoft-bg); }

/* ── 旗舰产品 ─────────────────────────────────── */
.flag-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.flag-card {
  position: relative;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.flag-card:hover {
  /* color-mix 回退 #4/#5（#215）：旧浏览器退到普通高亮描边+卡片阴影（无品牌光晕） */
  border-color: var(--line-hi);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-hi));
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  box-shadow: var(--shadow-card), 0 0 36px color-mix(in srgb, var(--brand) 16%, transparent);
}
.flag-top { display: flex; align-items: center; justify-content: space-between; }
.flag-ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  background: var(--ico-bg);
  border: 1px solid var(--ico-line);
}
.flag-card h3 { font-size: 21px; font-weight: 700; color: var(--ink); }
.flag-sum { color: var(--muted); font-size: 14.5px; flex: 1; }
.flag-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.flag-tags span {
  font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px;
  background: var(--tag-bg);
}
.flag-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.flink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 14px; color: var(--body);
  background: transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.flink:hover { color: var(--ink); border-color: var(--line-hi); }
.flink-p { color: var(--flinkp-ink); border-color: var(--flinkp-line); background: var(--flinkp-bg); }
.flink-p:hover { border-color: var(--flinkp-line-hov); color: var(--flinkp-ink); }
.flink .dot { width: 7px; height: 7px; }

/* ── 项目行：开放式清单，发丝线分隔 ───────────── */
.row-list { display: flex; flex-direction: column; }
.prow {
  display: grid;
  grid-template-columns: 14px 240px 1fr auto 20px;
  align-items: center; gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 17px 12px;
  border-radius: 0;
  transition: background-color 0.16s var(--ease);
}
.row-list .prow:first-child { border-top: 1px solid var(--line); }
.prow:hover { background: var(--row-hover); }
.prow .dot { justify-self: center; }
.pname { font-weight: 700; font-size: 16px; color: var(--ink); }
.palt { font-style: normal; font-weight: 500; color: var(--dim); font-size: 13px; margin-left: 6px; }
.pdesc {
  color: var(--muted); font-size: 14px; line-height: 1.5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.parr { color: var(--dim); transition: color 0.18s var(--ease), transform 0.18s var(--ease); }
.prow:hover .parr { color: var(--brand); transform: translateX(3px); }
.row-list-compact .prow { grid-template-columns: 14px 220px 1fr auto 20px; }
/* 箭头永远钉在最后一列：行内有无版本芯片都不影响列数，避免芯片把箭头挤到第二行 */
.prow .parr { grid-column: 5; }
.row-list-compact .pdesc { -webkit-line-clamp: 1; }

/* ── 版本与更新 ───────────────────────────────── */
.ver-grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 18px;
  align-items: stretch;
}
.dl-card {
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.dl-head { display: flex; align-items: center; justify-content: space-between; }
.dl-head h3 { font-size: 20px; font-weight: 700; color: var(--ink); }
.dl-sum { color: var(--muted); font-size: 14px; }
.dl-meta { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.dl-meta li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding-bottom: 9px; }
.dl-meta li:last-child { border-bottom: none; padding-bottom: 0; }
.dl-meta span { color: var(--muted); flex: none; }
.dl-meta b { font-weight: 500; color: var(--body); text-align: right; overflow-wrap: anywhere; }
.dl-sha { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; font-family: var(--mono); font-size: 12.5px; color: var(--brand-strong);
  background: none; border: 1px solid var(--line-hi); border-radius: 8px; padding: 5px 9px;
  min-height: 30px; cursor: pointer; text-align: left;
  /* 窄视口（≤360）：min-width:0 允许收缩为省略号，否则 nowrap 文本撑破卡片/轨道（2026-10-10 溢出批次） */
  min-width: 0; }
.dl-sha:hover:not(:disabled) { border-color: var(--brand); background: var(--chip-bg); }
.dl-sha:disabled { color: var(--dim); cursor: default; }
@media (max-width: 640px) { .dl-sha { min-height: 40px; padding: 8px 12px; } }
.dl-foot { display: flex; gap: 20px; font-size: 13.5px; margin-top: 6px; }
.dl-foot a { color: var(--brand); }
.dl-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 对比度（2026-10-10）：--brand 在 anthropic（3.70/3.36）与 discord（4.19）主题下不足 4.5:1，这两主题改用 --brand-strong（5.8/5.9） */
[data-theme="anthropic"] .dl-foot a, [data-theme="discord"] .dl-foot a { color: var(--brand-strong); }

.tl-card {
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card);
  padding: 28px;
}
.tl-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.timeline { list-style: none; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--tl-rail);
}
.tl-item { position: relative; padding: 0 0 22px 28px; }
.tl-item:last-child { padding-bottom: 4px; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--brand);
}
.tl-item:first-child::before { background: var(--brand); box-shadow: var(--tl-dot-halo); }
.tl-v { font-size: 14.5px; font-weight: 700; color: var(--chip-ink); }
.tl-date { font-size: 12px; color: var(--dim); margin-left: 10px; white-space: nowrap; }
.tl-body b { display: block; font-size: 14.5px; margin-top: 3px; font-weight: 600; color: var(--ink); }
.tl-body p {
  color: var(--muted); font-size: 13.5px; margin-top: 4px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.tl-link { font-size: 12.5px; color: var(--brand); }
/* [r11-20261113 A-6] 移动端可点击目标不小于 44px，避免 26×40/17px 的误触。 */
.pr-detail, .tl-link { min-height: 44px; display: inline-flex; align-items: center; }
.tl-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-more { margin-top: 18px; font-size: 13.5px; }
.tl-more a { color: var(--brand); }
.tl-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 页脚 ─────────────────────────────────────── */
.foot { margin-top: 60px; background: var(--foot-bg); color: var(--foot-link); }
.foot-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 42px 24px 48px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px;
}
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--foot-brand); font-family: var(--font-display); }
.foot-en { font-family: var(--mono); font-size: 11px; color: var(--foot-link); letter-spacing: 0.24em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.foot-nav a { color: var(--foot-link); font-size: 13.5px; transition: color 0.18s var(--ease); }
.foot-nav a:hover { color: var(--foot-link-hov); }
.foot-copy { width: 100%; color: var(--foot-link); font-size: 12.5px; }

/* ── 响应式 ───────────────────────────────────── */
@media (max-width: 960px) {
  .flag-grid, .ver-grid { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 14px 1fr auto; grid-template-areas: "dot name arr" ". desc desc" ". chip chip"; row-gap: 6px; padding: 16px 12px; }
  .prow .dot { grid-area: dot; }
  .pname { grid-area: name; }
  .pdesc { grid-area: desc; -webkit-line-clamp: 2; }
  .vchip { grid-area: chip; justify-self: start; }
  .parr { grid-area: arr; }
  .row-list-compact .prow { grid-template-columns: 14px 1fr 20px; grid-template-areas: "dot name arr" ". desc desc"; }
  .row-list-compact .prow .vchip { display: none; }
  .hero-strip { flex-wrap: wrap; }
  .hero-strip > div { flex: 1 1 40%; border-top: 1px solid var(--line); }
  .hero-strip > div:nth-child(-n+2) { border-top: none; }
  .hero-strip > div:nth-child(odd) { border-left: none; }
}
/* ≤1120：全量导航在 861-1100 实测挤到品牌名换行（#58 附注 5 复核发现）
   → 提前折叠为汉堡；只重复导航相关规则，不影响 ≤860 块内其余版式。
   R120：智脑入口不隐藏，只收起文字留图标 —— 它是内容入口，不该在平板上消失 */
@media (max-width: 1120px) {
  .nav-links, .nav-right .btn-ghost { display: none; }
  .nav-brain .nb-txt { display: none; }
  .nav-brain { padding: 7px 9px; gap: 0; }
  .nav-burger { display: block; }
  .nav-right { gap: 8px; }
  .theme-btn .theme-name { display: none; }
  .theme-btn { padding: 8px 10px; }
  .nav-right .btn-solid { padding: 9px 14px; font-size: 13.5px; }
}
@media (max-width: 860px) {
  .nav-links, .nav-right .btn-ghost { display: none; }
  .nav-brain .nb-txt { display: none; }
  .nav-brain { padding: 7px 9px; gap: 0; }
  .nav-burger { display: block; }
  .nav-right { gap: 8px; }
  .theme-btn .theme-name { display: none; }
  .theme-btn { padding: 8px 10px; }
  .nav-right .btn-solid { padding: 9px 14px; font-size: 13.5px; }
  .sec { padding: 60px 20px 20px; }
  .sec-alt { padding: 46px 0; }
  .sec-alt .sec-head, .sec-alt .row-list, .sec-alt .apps-tabs, .sec-alt .group-cap { padding-left: 20px; padding-right: 20px; }
  .hero-inner { padding-bottom: 72px; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* ── 动效减免 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-kicker, .hero-h1, .hero-sub, .hero-cta, .hero-strip, .hero-scroll { opacity: 1; transform: none; }
}

/* ── 移动端首屏：位移入场，不淡入（O07）──────────────────────
   实测（390×844、CPU 4×、Slow 4G）：首屏的 h1 因为是渐变文字
   （background-clip:text）本就不被 Chrome 计入 LCP，副标题又因为
   opacity 从 0 起步被排除，结果 LCP 只剩「9 秒后才出现的助手气泡」，
   报出 8792ms —— 而用户其实 1 秒内就看到了文字。
   位移保留（观感几乎不变），opacity 首帧即为 1，让最大内容元素能被计入。
   桌面端不动，淡入仍在。 */
@keyframes rise-move { from { transform: translateY(16px); } to { transform: none; } }
@media (max-width: 860px) {
  .hero-kicker, .hero-h1, .hero-sub, .hero-cta, .hero-strip, .hero-scroll {
    opacity: 1;
    animation-name: rise-move;
  }
}

/* ── QA 渲染钩子：?flat=1 整页验收模式 ── */
.flat .hero { min-height: 0; }
.flat .hero-inner { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 40px; }

/* ── 下载卡版本速览（卡片当前 .tq-hidden，保留样式备恢复） ── */
.dl-versions { margin-top: auto; border-top: 1px dashed var(--line); padding-top: 14px; }
.dl-versions h4 { font-size: 13px; font-weight: 600; color: var(--muted); }
.dl-versions h4 span { font-weight: 400; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.dl-versions ul { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.dl-versions li { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13px; }
.dl-versions li span { color: var(--muted); }
.dl-versions li b { color: var(--chip-ink); font-weight: 500; }

/* ── 全项目更新动态 / 最新上线 ── */
.tl-title .tl-sub { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.tl-proj { font-size: 14px; font-weight: 600; margin-left: 10px; color: var(--ink); }
.tl-prov { opacity: 0.62; }
.tl-prov .tl-proj::after { content: "· 建档"; font-size: 11px; color: var(--dim); font-weight: 400; margin-left: 6px; }
.new-sites {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  border: 1px dashed var(--flinkp-line); border-radius: 12px;
  background: var(--flinkp-bg);
  padding: 12px 16px; margin-bottom: 18px;
}
.ns-label { font-size: 13px; font-weight: 700; color: var(--flinkp-ink); flex: none; }
.ns-chip {
  font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; background: var(--card);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.ns-chip:hover { border-color: var(--flinkp-line-hov); color: var(--flinkp-ink); }
.new-sites[hidden] { display: none; }

/* ── 首页矩阵区引导链接 ── */
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sec-more { color: var(--brand); font-size: 14px; white-space: nowrap; padding-bottom: 6px; }
.sec-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-links a.active { color: var(--ink); font-weight: 600; }


/* ════════════════ v3 结构升级组件（跑马灯 / Bento / Tabs / 引擎 / CTA） ════════════════ */

/* ── 项目跑马灯 ── */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--wash);
  overflow: hidden;
  position: relative;
}
.ticker-track { display: flex; width: max-content; animation: tickerscroll 64s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px;
  font-size: 13.5px; color: var(--body); white-space: nowrap;
}
.ticker-item i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); opacity: 0.55; flex: none;
}
@keyframes tickerscroll { to { transform: translateX(-50%); } }

/* ── 旗舰产品 Bento 网格 ── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento .flag-card { margin: 0; }
.bento-lg { grid-column: span 7; }
.bento-md { grid-column: span 5; }
@media (max-width: 960px) {
  .bento-lg, .bento-md { grid-column: span 12; }
}

/* ── 产品全景 Tabs ── */
.apps-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.apps-tab {
  font-family: var(--font); font-size: 13.5px; color: var(--muted); line-height: 1;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; background: var(--card);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.apps-tab:hover { color: var(--brand); border-color: var(--brand-line, var(--line-hi)); }
.apps-tab.on {
  color: var(--btn-solid-ink); background: var(--btn-solid-bg);
  border-color: transparent; font-weight: 600;
}
.app-group[hidden] { display: none; }
.app-group + .app-group { margin-top: 34px; }
.group-cap { font-size: 13.5px; color: var(--dim); margin-bottom: 12px; }

/* ── AI 引擎 ── */
.sec-dots {
  /* color-mix 回退 #6（#215）：点阵纹理用中性灰近似（--ink 深浅主题差异大，取中间值 8%） */
  background-image: radial-gradient(rgba(127, 127, 127, 0.08) 1px, transparent 1px);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.engine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.engine-tile {
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.engine-tile:hover {
  /* color-mix 回退 #7/#8（#215）：同 flag-card，退到普通高亮描边+卡片阴影 */
  border-color: var(--line-hi);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-hi));
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  box-shadow: var(--shadow-card), 0 0 36px color-mix(in srgb, var(--brand) 14%, transparent);
}
.et-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--ico-bg);
  border: 1px solid var(--ico-line);
}
.engine-tile h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.engine-tile p { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
@media (max-width: 1080px) { .engine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .engine-grid { grid-template-columns: 1fr; } }

/* ── CTA 收尾行动区 ── */
.cta-sec { padding-bottom: 110px; }
.cta-band {
  position: relative; overflow: hidden;
  /* color-mix 回退 #9/#10（#215）：边框退到 --line；顶部品牌色晕退到纯 --card 底 */
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: 26px;
  background: var(--card);
  background:
    radial-gradient(60% 90% at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    var(--card);
  padding: 76px 32px 72px;
  text-align: center;
}
.cta-cap { font-size: 13px; color: var(--brand); font-weight: 600; margin-bottom: 16px; }
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px); font-weight: 800;
  color: var(--ink); letter-spacing: 0.01em;
}
.cta-sub { color: var(--muted); font-size: 16px; margin-top: 14px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* sec-alt 内所有内容统一容器宽度（与行列表对齐，窄视口留页边距） */
.sec-alt .sec-head, .sec-alt .apps-tabs, .sec-alt .app-group, .sec-alt .engine-grid {
  max-width: var(--maxw);
  margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
}

@media (max-width: 860px) {
  .sec { padding: 72px 20px 28px; }
  .sec-alt { padding: 56px 0; }
  .sec-alt .sec-head, .sec-alt .apps-tabs, .sec-alt .engine-grid, .sec-alt .group-cap { padding-left: 20px; padding-right: 20px; }
  .sec-alt .app-group { padding-left: 0; padding-right: 0; }
  .cta-band { padding: 56px 22px 52px; }
  .apps-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .apps-tab { flex: none; }
}

/* ── 临时隐藏（2026-10-05：桌面客户端下载通道与团队门户入口，恢复时删掉本段与 .tq-hidden 类即可） ── */
.tq-hidden { display: none !important; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.ver-grid-single { grid-template-columns: minmax(0, 1fr); } /* minmax(0,·)：防卡片 min-content 撑破 1fr 轨道（2026-10-10 溢出批次） */

/* ── v3.1 动效细节：SVG 图标 / 滚动进度 / 流动渐变 / 滚动显现 ── */
.ico-svg { width: 22px; height: 22px; color: var(--brand); }
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 2px;
  background: var(--grad);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
.grad-flow {
  color: var(--h1-color) !important;
  background: var(--h1-grad) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: var(--h1-fill) !important;
  animation: h1flow 9s ease-in-out infinite;
}
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.bento .flag-card.reveal:nth-child(2), .engine-grid .engine-tile.reveal:nth-child(2) { transition-delay: 0.08s; }
.bento .flag-card.reveal:nth-child(3), .engine-grid .engine-tile.reveal:nth-child(3) { transition-delay: 0.14s; }
.bento .flag-card.reveal:nth-child(4), .engine-grid .engine-tile.reveal:nth-child(4) { transition-delay: 0.2s; }

/* ── 旗舰卡真实产品截图 ── */
.flag-shot {
  margin: 0 0 2px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--wash);
}
.flag-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
  transition: transform 0.5s var(--ease);
}
.flag-card:hover .flag-shot img { transform: scale(1.035); }

/* ── 问小通 · AI 导购助手（三页共用） ───── */
.tqa-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 90; font-family: inherit; }
.tqa-fab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--grad); color: #fff;
  font-size: 14.5px; font-weight: 700; font-family: inherit;
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.28);
  transition: transform .18s, box-shadow .18s;
}
.tqa-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(34, 211, 238, 0.4); }
.tqa-fab-ico { font-size: 17px; }

/* 首访引导气泡（挂在问小通浮层 wrap 内，FAB 上方） */
.tqa-bubble {
  position: absolute; right: 0; bottom: 64px;
  width: 235px; max-width: calc(100vw - 48px);
  padding: 11px 30px 11px 14px;
  background: var(--card-hi, rgba(148, 163, 184, 0.09));
  border: 1px solid var(--line, rgba(148, 163, 184, 0.16));
  border-radius: 12px 12px 3px 12px;
  color: var(--ink, #e9eef8); font-size: 13px; line-height: 1.5;
  box-shadow: var(--shadow-pop, 0 16px 48px rgba(0, 0, 0, 0.55));
  cursor: pointer;
  animation: tqa-bubble-in .26s var(--ease, ease);
}
.tqa-bubble.out { opacity: 0; transform: translateY(6px); transition: opacity .24s, transform .24s; }
.tqa-bubble-x {
  position: absolute; top: 4px; right: 6px;
  border: none; background: none; cursor: pointer;
  color: var(--muted, #8fa0bc); font-size: 15px; line-height: 1; font-family: inherit;
  padding: 3px;
}
.tqa-bubble-x:hover { color: var(--ink, #e9eef8); }
@keyframes tqa-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tqa-panel {
  position: fixed; right: 18px; bottom: 18px;
  width: min(400px, calc(100vw - 24px)); height: min(580px, calc(100dvh - 36px));
  display: flex; flex-direction: column;
  background: var(--card, #101a36); color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-pop, 0 24px 64px rgba(0,0,0,.4));
  overflow: hidden;
}
.tqa-hidden { display: none !important; }
.tqa-hide { display: none !important; }
.tqa-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--wash, rgba(255,255,255,.03));
}
.tqa-head-t b { font-size: 15.5px; color: var(--ink); }
.tqa-head-t span { margin-left: 8px; font-size: 12px; color: var(--dim); }
.tqa-x {
  width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 19px; line-height: 1;
}
.tqa-x:hover { background: var(--wash); color: var(--ink); }
.tqa-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.tqa-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.tqa-me { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 5px; }
.tqa-ai { align-self: flex-start; background: var(--wash); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.tqa-typing { color: var(--dim); font-style: normal; }
.tqa-recs { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.tqa-rec {
  display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--line); background: var(--paper, transparent);
  transition: border-color .15s, transform .15s;
}
.tqa-rec:hover { border-color: var(--brand); transform: translateY(-1px); }
.tqa-rec b { display: block; font-size: 13.5px; color: var(--brand); }
.tqa-rec span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tqa-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tqa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tqa-chip {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 12.5px; font-family: inherit;
  transition: color .15s, border-color .15s;
}
.tqa-chip:hover { color: var(--brand); border-color: var(--brand); }
.tqa-inrow { display: flex; gap: 8px; }
.tqa-in {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper, transparent);
  color: var(--ink); font-size: 13.5px; font-family: inherit; outline: none;
}
.tqa-in:focus { border-color: var(--brand); }
.tqa-send {
  padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--grad); color: #fff; font-size: 13.5px; font-weight: 700; font-family: inherit;
}
.tqa-send:disabled { opacity: .55; cursor: default; }
.tqa-fblink {
  align-self: center; border: none; background: transparent; cursor: pointer;
  color: var(--dim); font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
  font-family: inherit;
}
.tqa-fblink:hover { color: var(--brand); }
.tqa-fb { display: flex; flex-direction: column; gap: 8px; }
.tqa-fb-t { font-size: 13px; color: var(--muted); }
.tqa-ta {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper, transparent); color: var(--ink); font-size: 13.5px;
  font-family: inherit; resize: vertical; outline: none;
}
.tqa-ta:focus { border-color: var(--brand); }
.tqa-fb-done { font-size: 13.5px; color: var(--brand); }
@media (max-width: 560px) {
  .tqa-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(72dvh, 560px); }
  .tqa-wrap { right: 12px; bottom: 12px; }
}

/* ── 移动端抽屉穿透修复：双层同色底 + 全屏遮罩 ───── */
.nav-drawer.open { background-image: linear-gradient(var(--drawer-bg), var(--drawer-bg)); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 12, 24, 0.45);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }

/* ── 站内搜索（首页产品全景 + 总览页共用风格） ───── */
.apps-searchbar { max-width: var(--maxw); margin: 0 auto 18px; padding: 0 24px; }
.home-search {
  width: 100%; box-sizing: border-box;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.home-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--selection, rgba(34,211,238,.15)); }
.home-search-note { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }

/* ── 项目卡价格徽章 ───── */
.pj-price {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; font-weight: 600; flex-shrink: 0;
}
.pj-price-free { color: var(--ink); background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.45); }
.pj-price-usage { color: var(--ink); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.45); }
.pj-price-org { color: var(--body); background: var(--wash); border: 1px solid var(--line); }
.tqa-qr { width: min(216px, 58vw); height: auto; border-radius: 12px; background: #fff; padding: 6px; align-self: center; box-sizing: border-box; display: block; }

/* ── 首页产品行价格小字 ───── */
.pprice {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; font-weight: 600; flex-shrink: 0;
}
.pprice-free { color: var(--ink); background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.32); }
.pprice-usage { color: var(--ink); background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.32); }
.pprice-org { color: var(--body); background: var(--wash, rgba(255,255,255,.05)); border: 1px solid var(--line, rgba(255,255,255,.12)); }
.tqa-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pdesc .pprice { display: inline-block; margin-right: 9px; transform: translateY(-1px); }

/* 「最多人问」热门角标（问小通推荐点击 ≥5 次） */
/* color-mix 回退 #11/#12（#215）：琥珀角标回退取默认 --warn（#fbbf24）的 16%/45% 静态透明色 */
.pj-hot { font-size: 10.5px; color: var(--ink); background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.45); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pj-hot { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* ════════════════════════════════════════════════════════════
   2026-10-09 新增组件（全部走主题变量，28 套主题自动适配）
   ① ⌘K 命令面板（cmdk.js） ② 系统状态明细浮层（theme.js）
   ③ 回到顶部（theme.js）   ④ 首页「按场景逛」chips（portal.js）
   ════════════════════════════════════════════════════════════ */

/* ── ① ⌘K 命令面板 ── */
.k-overlay { position: fixed; inset: 0; z-index: 300; display: none;
  /* color-mix 回退 #13（#215）：遮罩回退取默认 --paper（#070c18）的 62% 透明色 */
  background: rgba(7, 12, 24, 0.62);
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.k-overlay.k-open { display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(48px, 12vh, 140px) 16px 16px; }
.k-panel { width: min(640px, 100%); max-height: min(560px, 76vh); display: flex; flex-direction: column;
  background: var(--nav-solid); border: 1px solid var(--line-hi); border-radius: 16px;
  box-shadow: var(--shadow-pop); overflow: hidden;
  animation: k-in .16s ease-out; }
@keyframes k-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.k-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.k-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 13px;
  background: var(--brand-soft); color: var(--brand-strong); border: 1px solid var(--line); flex: none; }
.k-in { flex: 1; min-width: 0; background: none; border: none; outline: none;
  font: inherit; font-size: 15.5px; color: var(--ink); }
.k-in::placeholder { color: var(--dim); }
.k-hint { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; flex: none; }
.k-list { overflow-y: auto; padding: 8px; flex: 1; }
.k-group { font-size: 11px; letter-spacing: .08em; color: var(--dim); padding: 10px 10px 5px; text-transform: uppercase; }
.k-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent; }
.k-item.k-sel { background: var(--brand-soft); border-color: var(--line-hi); }
.k-item-ico { width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 7px; flex: none; }
.k-item-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.k-item-main b { color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-item-sub { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-item-tag { font-size: 10.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; flex: none; }
.k-item-arr { font-size: 11px; color: var(--dim); opacity: 0; flex: none; }
.k-item.k-sel .k-item-sub { color: var(--muted); }
.k-item.k-sel .k-item-arr { opacity: 1; color: var(--brand-strong); }
.k-empty { text-align: center; color: var(--dim); font-size: 13px; padding: 34px 10px; }
.k-foot { padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
/* 导航触发按钮 */
.k-trigger { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px;
  color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: color .15s, border-color .15s; }
.k-trigger:hover { color: var(--ink); border-color: var(--line-hi); }
.k-trigger-key { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
.k-drawer-btn { display: block; padding: 9px 4px; color: var(--brand-strong); font-size: 14px; text-decoration: none;
  border-bottom: 1px solid var(--drawer-line); margin-bottom: 6px; }
@media (max-width: 860px) {
  .k-trigger-key { display: none; }
  .k-overlay.k-open { padding: 40px 10px 10px; }
}

/* ── ② 系统状态明细浮层 ── */
.sys-pop { position: fixed; top: calc(var(--nav-h) + 8px); right: clamp(10px, 3vw, 28px); z-index: 260;
  width: min(340px, calc(100vw - 20px)); max-height: min(480px, 70vh); overflow-y: auto;
  background: var(--nav-solid); border: 1px solid var(--line-hi); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 10px;
  opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.sys-pop.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.sys-pop-cap { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--muted);
  padding: 6px 8px 10px; border-bottom: 1px solid var(--line); }
.sys-pop-cap b { color: var(--ink); font-size: 13.5px; }
.sys-pop-time { margin-left: auto; font-size: 10.5px; color: var(--dim); }
.sys-pop-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; font-size: 13px; }
.sys-pop-row:hover { background: var(--card); }
.sys-pop-row .dot { flex: none; }
.sys-pop-name { flex: 1; min-width: 0; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-pop-ms { color: var(--dim); font-size: 11px; }
.sys-pop-more { display: block; text-align: center; margin-top: 8px; padding: 9px; font-size: 12.5px;
  color: var(--brand-strong); text-decoration: none; border-top: 1px solid var(--line); }
.sys-pop-more:hover { text-decoration: underline; }

/* ── ③ 回到顶部 ── */
.k-top { position: fixed; right: clamp(12px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 180;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nav-solid); color: var(--muted); border: 1px solid var(--line-hi);
  box-shadow: var(--shadow-card); cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, color .15s; }
.k-top.show { opacity: 1; transform: none; pointer-events: auto; }
.k-top:hover { color: var(--brand-strong); border-color: var(--brand); }
/* 与问小通 FAB 共存时上移避让（FAB 高约 46px）；性能（2026-10-10）：
   body:has() 会放大全树样式重算，改由 assist.js 开合时切换 body class */
body.tqa-present .k-top { bottom: calc(clamp(14px, 3vw, 26px) + 54px); }
/* 助手面板展开时会盖住右下角：直接让回顶部按钮退场，避免「发送」被压住点不到 */
body.tqa-open .k-top { opacity: 0; transform: translateY(12px);
  pointer-events: none; visibility: hidden; }

/* ── ④ 首页「按场景逛」chips ── */
.home-scenes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 18px; }
.home-scenes-tip { font-size: 12.5px; color: var(--muted); }
.home-scene { font: inherit; font-size: 12.8px; color: var(--muted); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  transition: color .15s, border-color .15s, background .15s; }
.home-scene:hover { color: var(--ink); border-color: var(--line-hi); }
.home-scene.on { color: var(--chip-ink); background: var(--chip-bg); border-color: var(--chip-line); }
@media (max-width: 640px) { .home-scenes-tip { display: none; } }

/* ── 状态浮层 · 近 7 天在线率（2026-10-09，probe.py 每日归档） ── */
.sys-pop-uptime { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted);
  padding: 9px 8px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.sys-pop-uptime b { color: var(--ink); font-size: 13px; }
.sys-pop-days { display: inline-flex; gap: 3px; margin-left: auto; }
.sys-pop-days i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sys-pop-days i.up-ok { background: var(--live); opacity: .85; }
.sys-pop-days i.up-bad { background: var(--warn); opacity: .9; }
.tqa-qr-link { align-self: center; line-height: 0; }

/* ── 键盘无障碍（2026-10-09 第六轮）：跳到主内容链接 + ⌘K 搜索条焦点指示 ── */
.skip-link { position: fixed; top: -48px; left: 16px; z-index: 400; padding: 9px 16px;
  background: var(--nav-solid); color: var(--ink); font-size: 13.5px; text-decoration: none;
  border: 1px solid var(--line-hi); border-radius: 10px; transition: top .15s ease; }
.skip-link:focus { top: 10px; }
.k-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--selection, rgba(59,130,246,.25)); }

/* ── 动效守卫（2026-10-09 第七轮）：系统「减少动态」偏好下关闭装饰动画与过渡 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none !important; }
}

button.k-drawer-btn { width: 100%; text-align: left; background: none; cursor: pointer; font-size: 14px; }

/* ── CLS 微修（2026-10-09 第八轮）：探活文案改写时徽标不再左右跳 ── */
#sys-text { display: inline-block; min-width: 5.5em; }

.dot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12.5px; color: var(--dim); }
.dot-legend .dot { margin-right: 2px; }
.dot-legend a { margin-left: auto; color: var(--brand-strong); text-decoration: none; }
.dot-legend a:hover { text-decoration: underline; }

/* ── 移动端触控目标（2026-10-09 审计）：手指点在 20 多 px 的芯片上极易误触，
      统一抬到 40px；输入框字号 16px 起，避免 iOS 聚焦时整页放大。 ── */
@media (max-width: 640px) {
  .home-scene, .pj-scene, .apps-tab, .toc-chip, .rl-chip, .tqa-chip {
    min-height: 40px; display: inline-flex; align-items: center; padding: 9px 15px; font-size: 14px; }
  .tqa-chip { white-space: normal; line-height: 1.35; }
  .home-search, .pj-search, .tqa-in, .tqa-send, .k-in { min-height: 44px; font-size: 16px; }
  .k-item { min-height: 44px; }
  .pj-tags > span { padding: 5px 11px; font-size: 12.5px; }
  .tqa-x, .tqa-bubble-x { min-width: 40px; min-height: 40px; }
  .k-top { width: 44px; height: 44px; }
  .rl-more { min-height: 42px; display: inline-flex; align-items: center; }
  .prow .vchip { font-size: 11.5px; padding: 4px 8px; }
  /* 窄屏导航：搜索入口在抽屉顶部已有（cmdk 注入），按钮让位防挤压（#58 附注 5 复核修复） */
  .k-trigger { display: none; }
  .nav-inner { gap: 12px; }
}

/* 超窄屏（<=380）：再让出下载按钮，保证品牌与汉堡不挤出（下载入口抽屉/页面内均有） */
@media (max-width: 380px) {
  .nav-right .btn-solid { display: none; }
}

/* ── 打印样式（2026-10-11 #212，全站此前 0 条 @media print）：
   纸面只留正文——隐藏交互层（导航/FAB/⌘K/回顶/跳链）与装饰层（canvas 星图、
   项目卡截图、跑马灯）；折叠 FAQ 打印时露出答案（本条 ::details-content 规则
   覆盖 Chromium 131+ 及打印模拟，旧引擎由 assist.js 的 beforeprint/matchMedia
   兜底展开）；卡片/下载盒不跨页截断。pricing 等页同样受益，无需改其文件。 ── */
@media print {
  .nav, .nav-backdrop, .skip-link,
  .tqa-wrap, .tqa-bubble,
  .k-overlay, .k-trigger, .k-drawer-btn, .k-top,
  canvas, .pj-shot, .ticker { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; }
  .pj-card, .pj-dl, .dl-main, .dl-sub, .faq div, .hp-sec, .hp-faq details { break-inside: avoid; }
  .pj-sec { break-inside: auto; }
  details:not([open])::details-content { content-visibility: visible; display: block; }
}

/* #229：[hidden] 被 .btn{display:inline-flex} 等覆盖导致「加载更多」隐藏失效——HTML 语义兜底 */
[hidden]{display:none !important;}

/* ── 微愉悦交互（2026 趋势）：卡片 hover 弹性反馈 ── */
.flag-card, .engine-tile, .tl-card {
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 200ms ease;
}
.flag-card:hover, .engine-tile:hover, .tl-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 按钮点击微反馈 */
.btn-solid:active, .btn-line:active, .btn-ghost:active {
  transform: scale(0.98);
  transition: transform 80ms ease;
}

/* 问小通推荐卡片 hover 提升 */
.tqa-rec:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.4);
}


/* ═══ R47 教程页专属样式（走主题变量，8 主题自动适配对比度）═══ */
.tut-wrap { max-width: 860px; margin: 0 auto; padding: 40px 20px 60px; }
.tut-crumb { margin-bottom: 24px; font-size: 14px; color: var(--muted); }
.tut-crumb a { color: var(--muted); text-decoration: none; }
.tut-crumb a:hover { color: var(--brand-strong); text-decoration: underline; }
.tut-article h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.25; margin: 0 0 12px; }
.tut-meta { color: var(--muted); font-size: 14px; margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.tut-meta a { color: var(--brand-strong); }
.tut-sec { margin-top: 36px; }
.tut-sec h2 { font-size: 21px; margin: 0 0 14px; }
.tut-sec p { color: var(--body); line-height: 1.8; margin: 0 0 12px; }
.tut-steps { padding-left: 22px; line-height: 1.8; color: var(--body); }
.tut-steps li { margin-bottom: 18px; }
.tut-steps strong { color: var(--ink); display: block; margin-bottom: 4px; }
.tut-steps p { margin: 0; color: var(--body); }
.tut-steps a { color: var(--brand-strong); }
.tut-faq { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--card); }
.tut-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.tut-faq p { margin: 10px 0 0; color: var(--body); line-height: 1.75; }
.tut-cta { margin-top: 40px; padding: 24px; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 14px; }
.tut-cta h3 { margin: 0 0 8px; font-size: 19px; }
.tut-cta p { color: var(--body); margin: 0 0 4px; }
.tut-cta-btn { display: inline-block; margin-top: 12px; }
.tut-more { margin-top: 32px; font-size: 14px; color: var(--muted); }
.tut-more a { color: var(--brand-strong); }
.tut-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.tut-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color .18s, background .18s, transform .18s; }
.tut-card:hover { border-color: var(--line-hi); background: var(--card-hi); transform: translateY(-2px); }
.tut-card-a { display: block; padding: 20px 22px; text-decoration: none; color: inherit; }
.tut-card-prod { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: 10px; }
.tut-card h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); line-height: 1.4; }
.tut-card p { margin: 0 0 10px; color: var(--body); font-size: 14px; line-height: 1.7; }
.tut-card-meta { font-size: 13px; color: var(--muted); }
.foot-nav-wrap { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); margin-top: 40px; }
.foot-nav-wrap a { color: var(--muted); text-decoration: none; margin: 0 2px; }
.foot-nav-wrap a:hover { color: var(--brand-strong); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tut-card { transition: none; } .tut-card:hover { transform: none; } }

/* ═══ R49 hero-cta-alt：次级 CTA 降级为文字链，降低与主 CTA 的视觉竞争 ═══ */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-cta-alt { color: var(--muted); font-size: 15px; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .18s, border-color .18s; }
.hero-cta-alt:hover { color: var(--brand-strong); border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .hero-cta-alt { transition: none; } }

/* ═══ 角色分流器（建议5）═══ */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.role-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.role-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}
.role-ico {
  font-size: 32px;
  margin-bottom: 10px;
}
.role-card h3 {
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 6px;
}
.role-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.6;
}
.role-products {
  font-size: 11.5px;
  color: var(--brand-text);
  font-weight: 600;
  margin: 0 0 14px;
}

/* ═══ 角色分流器（建议5）═══ */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.role-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.role-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}
.role-ico {
  font-size: 32px;
  margin-bottom: 10px;
}
.role-card h3 {
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 6px;
}
.role-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.6;
}
.role-products {
  font-size: 11.5px;
  color: var(--brand-text);
  font-weight: 600;
  margin: 0 0 14px;
}

/* ═══ 社交分享按钮 ═══ */
.share-section {
  margin-top: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.share-section h2 {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 16px;
  text-align: center;
}
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.share-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-3px);
}

/* ═══ 客户见证（建议 R62）═══ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.testimonial-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 20px 18px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.testimonial-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}
.t-stars {
  font-size: 18px;
  color: var(--warn);
  margin-bottom: 10px;
}
.t-text {
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 12px;
}
.t-author {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* ═══ 新闻通讯订阅（建议 R62）═══ */
.newsletter-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 32px 24px;
  text-align: center;
}
.newsletter-card h2 {
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
}
.newsletter-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.6;
}
.newsletter-input-wrap {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.newsletter-input:focus {
  border-color: var(--brand);
}
.newsletter-tip {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}

/* ── 正文内联链接的可识别性（B11 / A02，2026-10-24）─────────────────────
   axe 规则 link-in-text-block：链接只用颜色与周围正文区分、且对比度不足 3:1 时，
   色弱/低视力用户看不出这是链接。本站品牌色与正文色的亮度差在多数主题下不够，
   所以正文里的裸链接一律加下划线（不依赖颜色）。
   作用域只到 p / li / dd 的直接子链接：卡片标题链接有整块可点区域与边框，
   按钮走 .btn 自己的样式，都不需要再加下划线。 */
p > a:not(.btn),
li > a:not(.btn),
dd > a:not(.btn),
dd > a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
p > a:not(.btn):hover,
li > a:not(.btn):hover,
dd > a:hover {
  text-decoration-thickness: 2px;
}