/**
 * 521 · 多主题变量与氛围层覆写
 * 全站须加载 theme.js + 本文件；切换时 html[data-theme="…"]
 */

/* 默认霁雪初晴 · 全站 design token（首页无 style.css 时也生效） */
:root {
  --bg-night: #f6faff;
  --bg-wine: #eef4fa;
  --bg-plum: #e4ecf4;
  --gold: #5088a8;
  --gold-dim: #407080;
  --gold-glow: rgba(80, 136, 168, 0.28);
  --pink: #b8d8e8;
  --blush: #d8ecf4;
  --rose: #3888a8;
  --rose-deep: #286880;
  --champagne: #1a4058;
  --accent: #58a0c0;
  --paper: #fcfeff;
  --ink: #1a3040;
  --seal: #286880;
  --glass: rgba(246, 250, 255, 0.88);
  --glass-light: rgba(255, 249, 246, 0.08);
  --glass-border: rgba(80, 136, 168, 0.25);
  --text: #1a3040;
  --text-soft: rgba(26, 48, 64, 0.82);
  --text-muted: rgba(64, 96, 120, 0.55);
}

/* —— 碧玉镜湖 —— */
[data-theme='jade-lake'] {
  --bg-night: #061418;
  --bg-wine: #0a201c;
  --bg-plum: #123028;
  --gold: #d4e8c8;
  --gold-dim: #8ab89a;
  --gold-glow: rgba(212, 232, 200, 0.4);
  --pink: #7ec8b8;
  --blush: #b8e8d8;
  --rose: #3a9a88;
  --rose-deep: #2a7a6a;
  --champagne: #e8f4e0;
  --accent: #5ab8a0;
  --paper: #f4faf6;
  --ink: #0a2820;
  --seal: #2a8a7a;
  --glass: rgba(18, 48, 40, 0.65);
  --glass-border: rgba(180, 220, 200, 0.32);
  --text: #f0faf4;
  --text-soft: rgba(232, 248, 240, 0.78);
  --text-muted: rgba(200, 230, 220, 0.52);
  --aurora-rose-a: rgba(90, 184, 160, 0.55);
  --aurora-rose-b: rgba(42, 138, 122, 0.22);
  --aurora-gold-a: rgba(180, 220, 200, 0.35);
  --aurora-gold-b: rgba(120, 180, 150, 0.12);
  --heart-stroke: rgba(90, 184, 160, 0.08);
  --vignette-base: #061418;
}

/* —— 星河夜宴 —— */
[data-theme='starry-night'] {
  --bg-night: #0a0818;
  --bg-wine: #12102a;
  --bg-plum: #1a1840;
  --gold: #c8d4f0;
  --gold-dim: #8898c8;
  --gold-glow: rgba(200, 212, 240, 0.42);
  --pink: #a8b8f0;
  --blush: #d0d8f8;
  --rose: #8b7cf0;
  --rose-deep: #6b5ce6;
  --champagne: #e8ecff;
  --accent: #9b8cf8;
  --paper: #f4f6ff;
  --ink: #181430;
  --seal: #6b5ce6;
  --glass: rgba(26, 24, 64, 0.68);
  --glass-border: rgba(180, 190, 240, 0.28);
  --text: #f4f6ff;
  --text-soft: rgba(228, 232, 255, 0.8);
  --text-muted: rgba(180, 190, 230, 0.5);
  --aurora-rose-a: rgba(139, 124, 240, 0.5);
  --aurora-rose-b: rgba(107, 92, 230, 0.22);
  --aurora-gold-a: rgba(160, 180, 240, 0.32);
  --aurora-gold-b: rgba(100, 120, 200, 0.1);
  --heart-stroke: rgba(139, 124, 240, 0.07);
  --vignette-base: #0a0818;
}

/* —— 桃夭春色 —— */
[data-theme='peach-blossom'] {
  --bg-night: #1a1014;
  --bg-wine: #281820;
  --bg-plum: #382428;
  --gold: #ffe8e0;
  --gold-dim: #f0c0b0;
  --gold-glow: rgba(255, 232, 224, 0.45);
  --pink: #ffc8d8;
  --blush: #ffe0e8;
  --rose: #f0a0b0;
  --rose-deep: #e07898;
  --champagne: #fff4f0;
  --accent: #f8b8c8;
  --paper: #fff9f6;
  --ink: #482830;
  --seal: #e07898;
  --glass: rgba(56, 36, 40, 0.58);
  --glass-border: rgba(255, 220, 210, 0.35);
  --text: #fff8f6;
  --text-soft: rgba(255, 244, 240, 0.82);
  --text-muted: rgba(255, 220, 210, 0.55);
  --aurora-rose-a: rgba(255, 180, 200, 0.5);
  --aurora-rose-b: rgba(240, 140, 170, 0.2);
  --aurora-gold-a: rgba(255, 232, 220, 0.38);
  --aurora-gold-b: rgba(240, 200, 180, 0.14);
  --heart-stroke: rgba(255, 180, 200, 0.07);
  --vignette-base: #1a1014;
}

/* —— 宫灯绛焰 —— */
[data-theme='lantern-red'] {
  --bg-night: #100505;
  --bg-wine: #1c0808;
  --bg-plum: #280e0e;
  --gold: #e8c878;
  --gold-dim: #c8a050;
  --gold-glow: rgba(232, 200, 120, 0.42);
  --pink: #f0b0a0;
  --blush: #f8d0c8;
  --rose: #d84848;
  --rose-deep: #b03030;
  --champagne: #ffe8c8;
  --accent: #e87058;
  --paper: #fffaf4;
  --ink: #3a1010;
  --seal: #b03030;
  --glass: rgba(40, 12, 12, 0.75);
  --glass-border: rgba(232, 200, 120, 0.32);
  --text: #fff6f0;
  --text-soft: rgba(255, 240, 232, 0.82);
  --text-muted: rgba(240, 200, 180, 0.55);
  --aurora-rose-a: rgba(216, 72, 72, 0.48);
  --aurora-rose-b: rgba(176, 48, 48, 0.22);
  --aurora-gold-a: rgba(232, 200, 120, 0.38);
  --aurora-gold-b: rgba(200, 160, 80, 0.14);
  --heart-stroke: rgba(216, 72, 72, 0.08);
  --vignette-base: #100505;
}

/* —— 月华银霜 —— */
[data-theme='moonlit-silver'] {
  --bg-night: #060a12;
  --bg-wine: #0c1420;
  --bg-plum: #141c2c;
  --gold: #c8d8e8;
  --gold-dim: #90a8c0;
  --gold-glow: rgba(200, 216, 232, 0.38);
  --pink: #a8b8d8;
  --blush: #c8d4e8;
  --rose: #78a0c8;
  --rose-deep: #5888b0;
  --champagne: #e8f2fc;
  --accent: #98b8d8;
  --paper: #f4f8fc;
  --ink: #142030;
  --seal: #5888b0;
  --glass: rgba(20, 28, 44, 0.72);
  --glass-border: rgba(200, 216, 232, 0.28);
  --text: #f0f6fc;
  --text-soft: rgba(220, 232, 248, 0.82);
  --text-muted: rgba(168, 188, 216, 0.55);
  --aurora-rose-a: rgba(120, 160, 200, 0.42);
  --aurora-rose-b: rgba(88, 136, 176, 0.2);
  --aurora-gold-a: rgba(200, 216, 232, 0.32);
  --aurora-gold-b: rgba(144, 168, 192, 0.12);
  --heart-stroke: rgba(152, 184, 216, 0.07);
  --vignette-base: #060a12;
}

/* —— 落日余晖 —— */
[data-theme='sunset-glow'] {
  --bg-night: #100818;
  --bg-wine: #1a1020;
  --bg-plum: #281828;
  --gold: #f0c088;
  --gold-dim: #d09858;
  --gold-glow: rgba(240, 192, 136, 0.42);
  --pink: #f0b8a0;
  --blush: #ffd8c0;
  --rose: #f07050;
  --rose-deep: #d05038;
  --champagne: #fff0e4;
  --accent: #e8a058;
  --paper: #fff8f4;
  --ink: #382018;
  --seal: #d05038;
  --glass: rgba(40, 24, 36, 0.68);
  --glass-border: rgba(240, 192, 136, 0.3);
  --text: #fff8f2;
  --text-soft: rgba(255, 244, 236, 0.82);
  --text-muted: rgba(240, 200, 176, 0.55);
  --aurora-rose-a: rgba(240, 112, 80, 0.48);
  --aurora-rose-b: rgba(208, 80, 56, 0.22);
  --aurora-gold-a: rgba(240, 192, 136, 0.38);
  --aurora-gold-b: rgba(208, 152, 88, 0.14);
  --heart-stroke: rgba(240, 112, 80, 0.08);
  --vignette-base: #100818;
}

/* —— 水墨丹青 —— */
[data-theme='ink-wash'] {
  --bg-night: #0c0c0a;
  --bg-wine: #141412;
  --bg-plum: #1c1c18;
  --gold: #e8dcc8;
  --gold-dim: #c8b8a0;
  --gold-glow: rgba(232, 220, 200, 0.38);
  --pink: #d8c8b0;
  --blush: #e8dcc8;
  --rose: #d05050;
  --rose-deep: #b03840;
  --champagne: #f0e8dc;
  --accent: #c0a070;
  --paper: #faf8f4;
  --ink: #242018;
  --seal: #b03840;
  --glass: rgba(28, 28, 24, 0.78);
  --glass-border: rgba(210, 200, 180, 0.32);
  --text: #f8f4ec;
  --text-soft: rgba(240, 236, 226, 0.86);
  --text-muted: rgba(210, 198, 178, 0.74);
  --aurora-rose-a: rgba(208, 80, 80, 0.38);
  --aurora-rose-b: rgba(176, 56, 64, 0.16);
  --aurora-gold-a: rgba(210, 200, 180, 0.28);
  --aurora-gold-b: rgba(160, 148, 128, 0.1);
  --heart-stroke: rgba(208, 80, 80, 0.06);
  --vignette-base: #0c0c0a;
}

/* —— 紫宸夜宴 —— */
[data-theme='palace-purple'] {
  --bg-night: #0a0610;
  --bg-wine: #120c1a;
  --bg-plum: #1a1224;
  --gold: #f0e0c0;
  --gold-dim: #d0b080;
  --gold-glow: rgba(240, 224, 192, 0.42);
  --pink: #e0c0f0;
  --blush: #f0e0f8;
  --rose: #c080d8;
  --rose-deep: #9858b0;
  --champagne: #f4e8d8;
  --accent: #d8a8e8;
  --paper: #faf6fc;
  --ink: #281830;
  --seal: #9858b0;
  --glass: rgba(26, 18, 36, 0.72);
  --glass-border: rgba(240, 224, 192, 0.34);
  --text: #faf6fc;
  --text-soft: rgba(244, 238, 252, 0.86);
  --text-muted: rgba(228, 212, 188, 0.74);
  --aurora-rose-a: rgba(192, 128, 216, 0.45);
  --aurora-rose-b: rgba(152, 88, 176, 0.2);
  --aurora-gold-a: rgba(240, 224, 192, 0.34);
  --aurora-gold-b: rgba(208, 176, 128, 0.12);
  --heart-stroke: rgba(192, 128, 216, 0.07);
  --vignette-base: #0a0610;
}

/* —— 竹海听风 —— */
[data-theme='bamboo-mist'] {
  --bg-night: #061410;
  --bg-wine: #0a1c18;
  --bg-plum: #102820;
  --gold: #dce8d4;
  --gold-dim: #b0d0a8;
  --gold-glow: rgba(220, 232, 212, 0.4);
  --pink: #b8dcc0;
  --blush: #d0ecd8;
  --rose: #58b080;
  --rose-deep: #409068;
  --champagne: #e8f4e8;
  --accent: #70c090;
  --paper: #f4faf6;
  --ink: #102820;
  --seal: #409068;
  --glass: rgba(16, 40, 32, 0.68);
  --glass-border: rgba(200, 228, 196, 0.32);
  --text: #f2faf4;
  --text-soft: rgba(230, 246, 236, 0.86);
  --text-muted: rgba(198, 218, 200, 0.76);
  --aurora-rose-a: rgba(88, 176, 128, 0.42);
  --aurora-rose-b: rgba(64, 144, 104, 0.2);
  --aurora-gold-a: rgba(210, 228, 200, 0.32);
  --aurora-gold-b: rgba(152, 192, 168, 0.12);
  --heart-stroke: rgba(88, 176, 128, 0.07);
  --vignette-base: #061410;
}

/* —— 琥珀凝光 —— */
[data-theme='amber-honey'] {
  --bg-night: #0c0804;
  --bg-wine: #181008;
  --bg-plum: #241810;
  --gold: #f0c870;
  --gold-dim: #d0a048;
  --gold-glow: rgba(240, 200, 112, 0.42);
  --pink: #f0c8a0;
  --blush: #ffe0c0;
  --rose: #e09040;
  --rose-deep: #c07028;
  --champagne: #fff0d8;
  --accent: #d8a850;
  --paper: #fffaf4;
  --ink: #382810;
  --seal: #c07028;
  --glass: rgba(36, 24, 16, 0.72);
  --glass-border: rgba(240, 200, 112, 0.32);
  --text: #fff8f0;
  --text-soft: rgba(255, 244, 228, 0.82);
  --text-muted: rgba(232, 200, 160, 0.55);
  --aurora-rose-a: rgba(224, 144, 64, 0.45);
  --aurora-rose-b: rgba(192, 112, 40, 0.2);
  --aurora-gold-a: rgba(240, 200, 112, 0.38);
  --aurora-gold-b: rgba(208, 160, 72, 0.14);
  --heart-stroke: rgba(224, 144, 64, 0.08);
  --vignette-base: #0c0804;
}

/* 默认霁雪初晴 · 氛围变量 */
:root,
[data-theme='snow-clear'] {
  --aurora-rose-a: rgba(88, 160, 200, 0.28);
  --aurora-rose-b: rgba(56, 136, 168, 0.12);
  --aurora-gold-a: rgba(184, 216, 232, 0.45);
  --aurora-gold-b: rgba(80, 136, 168, 0.1);
  --heart-stroke: rgba(56, 136, 168, 0.07);
  --vignette-base: #f6faff;
}

/* —— 丝绒玫瑰 —— */
[data-theme='velvet-rose'] {
  --bg-night: #0c060a;
  --bg-wine: #1a0a12;
  --bg-plum: #2a1020;
  --gold: #f2ddb8;
  --gold-dim: #d4a86a;
  --gold-glow: rgba(242, 221, 184, 0.45);
  --pink: #f0b8c8;
  --blush: #f8d4e0;
  --rose: #e87898;
  --rose-deep: #c44a6a;
  --champagne: #ffe8d0;
  --accent: #e890a8;
  --paper: #fff9f6;
  --ink: #3d1828;
  --seal: #c43858;
  --glass: rgba(42, 16, 32, 0.72);
  --glass-border: rgba(242, 221, 184, 0.32);
  --text: #fff8f5;
  --text-soft: rgba(255, 248, 252, 0.78);
  --text-muted: rgba(255, 240, 248, 0.52);
  --aurora-rose-a: rgba(232, 120, 160, 0.55);
  --aurora-rose-b: rgba(196, 56, 88, 0.2);
  --aurora-gold-a: rgba(242, 221, 184, 0.35);
  --aurora-gold-b: rgba(212, 168, 106, 0.12);
  --heart-stroke: rgba(232, 120, 160, 0.06);
  --vignette-base: #0c060a;
}

.scene-bg__aurora--rose {
  background: radial-gradient(
    circle,
    var(--aurora-rose-a) 0%,
    var(--aurora-rose-b) 45%,
    transparent 70%
  );
}

.scene-bg__aurora--gold {
  background: radial-gradient(
    circle,
    var(--aurora-gold-a) 0%,
    var(--aurora-gold-b) 50%,
    transparent 72%
  );
}

.scene-bg__heart::before {
  -webkit-text-stroke: 1px var(--heart-stroke);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pink) 12%, transparent) 0%,
    color-mix(in srgb, var(--rose-deep) 4%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.scene-bg__vignette {
  background:
    radial-gradient(
      ellipse 85% 70% at 50% 35%,
      transparent 25%,
      color-mix(in srgb, var(--vignette-base) 88%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--vignette-base) 55%, transparent) 0%,
      transparent 22%,
      transparent 78%,
      color-mix(in srgb, var(--vignette-base) 92%, transparent) 100%
    );
}

.my-overlay {
  background: linear-gradient(
    168deg,
    var(--bg-night) 0%,
    var(--bg-wine) 38%,
    var(--bg-plum) 100%
  );
}

/* —— 晨曦雾白（亮） —— */
[data-theme='dawn-mist'] {
  --bg-night: #faf8f4;
  --bg-wine: #f5f0e8;
  --bg-plum: #ebe4d8;
  --gold: #b88850;
  --gold-dim: #9a7040;
  --gold-glow: rgba(184, 136, 80, 0.35);
  --pink: #e8b8c8;
  --blush: #f8e0e8;
  --rose: #c44a6a;
  --rose-deep: #a83858;
  --champagne: #5a4030;
  --accent: #d06078;
  --paper: #fffdf8;
  --ink: #3a2820;
  --seal: #c44a6a;
  --glass: rgba(255, 252, 246, 0.82);
  --glass-border: rgba(184, 136, 80, 0.28);
  --text: #3a2820;
  --text-soft: rgba(58, 40, 32, 0.82);
  --text-muted: rgba(90, 70, 58, 0.58);
  --aurora-rose-a: rgba(212, 120, 140, 0.28);
  --aurora-rose-b: rgba(196, 74, 106, 0.12);
  --aurora-gold-a: rgba(232, 200, 160, 0.45);
  --aurora-gold-b: rgba(184, 136, 80, 0.15);
  --heart-stroke: rgba(196, 74, 106, 0.08);
  --vignette-base: #faf8f4;
}

/* —— 樱昼清露（亮） —— */
[data-theme='sakura-day'] {
  --bg-night: #fff8fa;
  --bg-wine: #fff0f4;
  --bg-plum: #ffe8f0;
  --gold: #c87888;
  --gold-dim: #b06070;
  --gold-glow: rgba(232, 120, 152, 0.32);
  --pink: #ffc8d8;
  --blush: #ffe0e8;
  --rose: #e87898;
  --rose-deep: #d06078;
  --champagne: #6a3848;
  --accent: #f090a8;
  --paper: #fffbfc;
  --ink: #4a2830;
  --seal: #d06078;
  --glass: rgba(255, 248, 252, 0.85);
  --glass-border: rgba(232, 120, 152, 0.28);
  --text: #4a2830;
  --text-soft: rgba(74, 40, 48, 0.82);
  --text-muted: rgba(120, 80, 90, 0.55);
  --aurora-rose-a: rgba(240, 160, 176, 0.35);
  --aurora-rose-b: rgba(224, 120, 152, 0.14);
  --aurora-gold-a: rgba(255, 200, 216, 0.5);
  --aurora-gold-b: rgba(232, 120, 152, 0.12);
  --heart-stroke: rgba(224, 120, 152, 0.08);
  --vignette-base: #fff8fa;
}

/* —— 云霄碧玉（亮） —— */
[data-theme='cloud-jade'] {
  --bg-night: #f4faf8;
  --bg-wine: #e8f4f0;
  --bg-plum: #d8ece4;
  --gold: #3a8a78;
  --gold-dim: #2a7a68;
  --gold-glow: rgba(58, 138, 120, 0.28);
  --pink: #a8e0d0;
  --blush: #c8f0e4;
  --rose: #2a9a88;
  --rose-deep: #1a7a6a;
  --champagne: #1a5048;
  --accent: #4ab8a0;
  --paper: #f8fffc;
  --ink: #1a3830;
  --seal: #2a8a7a;
  --glass: rgba(244, 250, 248, 0.88);
  --glass-border: rgba(58, 138, 120, 0.25);
  --text: #1a3830;
  --text-soft: rgba(26, 56, 48, 0.82);
  --text-muted: rgba(60, 100, 88, 0.55);
  --aurora-rose-a: rgba(74, 184, 160, 0.3);
  --aurora-rose-b: rgba(42, 138, 122, 0.12);
  --aurora-gold-a: rgba(168, 224, 208, 0.45);
  --aurora-gold-b: rgba(58, 138, 120, 0.1);
  --heart-stroke: rgba(42, 138, 122, 0.07);
  --vignette-base: #f4faf8;
}

/* —— 杏霞晴空（亮） —— */
[data-theme='apricot-sky'] {
  --bg-night: #fffaf4;
  --bg-wine: #fff4e8;
  --bg-plum: #ffe8d4;
  --gold: #c87840;
  --gold-dim: #a86030;
  --gold-glow: rgba(232, 120, 80, 0.3);
  --pink: #ffd0a8;
  --blush: #ffe8c8;
  --rose: #e87850;
  --rose-deep: #d06040;
  --champagne: #6a4028;
  --accent: #f0a060;
  --paper: #fffdf8;
  --ink: #4a3020;
  --seal: #d06040;
  --glass: rgba(255, 250, 244, 0.86);
  --glass-border: rgba(200, 120, 64, 0.28);
  --text: #4a3020;
  --text-soft: rgba(74, 48, 32, 0.82);
  --text-muted: rgba(120, 80, 56, 0.55);
  --aurora-rose-a: rgba(240, 160, 96, 0.32);
  --aurora-rose-b: rgba(232, 120, 80, 0.12);
  --aurora-gold-a: rgba(255, 216, 168, 0.48);
  --aurora-gold-b: rgba(200, 120, 64, 0.12);
  --heart-stroke: rgba(232, 120, 80, 0.07);
  --vignette-base: #fffaf4;
}

/* —— 霁雪初晴（亮） —— */
[data-theme='snow-clear'] {
  --bg-night: #f6faff;
  --bg-wine: #eef4fa;
  --bg-plum: #e4ecf4;
  --gold: #5088a8;
  --gold-dim: #407080;
  --gold-glow: rgba(80, 136, 168, 0.28);
  --pink: #b8d8e8;
  --blush: #d8ecf4;
  --rose: #3888a8;
  --rose-deep: #286880;
  --champagne: #1a4058;
  --accent: #58a0c0;
  --paper: #fcfeff;
  --ink: #1a3040;
  --seal: #286880;
  --glass: rgba(246, 250, 255, 0.88);
  --glass-border: rgba(80, 136, 168, 0.25);
  --text: #1a3040;
  --text-soft: rgba(26, 48, 64, 0.82);
  --text-muted: rgba(64, 96, 120, 0.55);
  --aurora-rose-a: rgba(88, 160, 200, 0.28);
  --aurora-rose-b: rgba(56, 136, 168, 0.12);
  --aurora-gold-a: rgba(184, 216, 232, 0.45);
  --aurora-gold-b: rgba(80, 136, 168, 0.1);
  --heart-stroke: rgba(56, 136, 168, 0.07);
  --vignette-base: #f6faff;
}

/* —— 荷风晓色（亮） —— */
[data-theme='lotus-pond'] {
  --bg-night: #f8fffa;
  --bg-wine: #f0faf4;
  --bg-plum: #e8f4ec;
  --gold: #68b8a0;
  --gold-dim: #48a080;
  --gold-glow: rgba(104, 184, 160, 0.28);
  --pink: #f8c8d8;
  --blush: #ffe0e8;
  --rose: #e87898;
  --rose-deep: #d06078;
  --champagne: #3a5848;
  --accent: #78c8a8;
  --paper: #fefffc;
  --ink: #2a4038;
  --seal: #d06078;
  --glass: rgba(248, 255, 250, 0.88);
  --glass-border: rgba(104, 184, 160, 0.26);
  --text: #2a4038;
  --text-soft: rgba(42, 64, 56, 0.82);
  --text-muted: rgba(80, 120, 100, 0.55);
  --aurora-rose-a: rgba(232, 120, 152, 0.26);
  --aurora-rose-b: rgba(208, 96, 120, 0.11);
  --aurora-gold-a: rgba(168, 224, 200, 0.42);
  --aurora-gold-b: rgba(104, 184, 160, 0.1);
  --heart-stroke: rgba(104, 184, 160, 0.07);
  --vignette-base: #f8fffa;
}

/* 主题切换时 · 首页 hub 变量桥接 */
/* 茶肆卡片 · 亮色主题下「热」标文字对比度 */
html[data-tone='light'] .tea-card__badge--hot,
html[data-tone='light'] .hub-forum-embed .tea-card__badge--hot,
html[data-tone='light'] .tea-chip--hot,
html[data-tone='light'] .hub-forum-embed .tea-chip--hot {
  color: var(--ink);
}

html[data-theme] {
  --hub-bg: var(--bg-night);
  --hub-bg-mid: var(--bg-wine);
  --hub-bg-plum: var(--bg-plum);
  --hub-gold: var(--gold);
  --hub-gold-dim: var(--gold-dim);
  --hub-gold-soft: color-mix(in srgb, var(--gold) 38%, transparent);
  --hub-gold-glow: color-mix(in srgb, var(--gold) 14%, transparent);
  --hub-rose: var(--rose);
  --hub-rose-deep: var(--rose-deep);
  --hub-rose-soft: color-mix(in srgb, var(--rose) 28%, transparent);
  --hub-blush: var(--blush);
  --hub-champagne: var(--champagne);
  --hub-accent: var(--accent);
  --hub-accent-dim: var(--rose-deep);
  --hub-text: var(--text);
  --hub-text-soft: var(--text-soft);
  --hub-muted: var(--text-muted);
  --hub-border: var(--glass-border);
  --hub-border-strong: color-mix(in srgb, var(--gold) 36%, transparent);
  --hub-surface: var(--glass);
  --hub-surface-2: color-mix(in srgb, var(--text) 7%, transparent);
  --hub-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 35%, transparent);
  --hub-shadow-rose: 0 12px 36px color-mix(in srgb, var(--rose-deep) 18%, transparent);
  --hub-ink: var(--ink);
  --hub-jade: var(--hub-accent);
  --hub-jade-dim: color-mix(in srgb, var(--hub-accent) 78%, var(--hub-bg) 22%);
  --hub-input-bg: color-mix(in srgb, var(--hub-surface-2) 92%, transparent);
  --hub-input-border: var(--hub-border);
  --hub-input-focus: color-mix(in srgb, var(--hub-gold) 55%, var(--hub-border) 45%);
}

html[data-tone='light'] body.hub-page .hub-bg {
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 25%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 0% 75%, color-mix(in srgb, var(--rose-deep) 8%, transparent), transparent 48%),
    linear-gradient(175deg, var(--hub-bg) 0%, var(--hub-bg-mid) 38%, var(--hub-bg-plum) 68%, var(--hub-bg) 100%);
}

html[data-tone='light'] body.hub-page .hub-bg__grid {
  opacity: 0.055;
}

html[data-tone='light'] body.hub-page .hub-btn-my__ring {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--rose) 15%, transparent), inset 0 0 8px var(--hub-gold-glow);
}

html[data-tone='light'] body.hub-page .hub-pnav--dock {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--hub-gold) 12%, transparent);
}

/* —— 全站：子页 body 背景随主题 —— */
html[data-theme] body.hub-page,
html[data-theme] body.tea-page,
html[data-theme] body.tea-post-page,
html[data-theme] body.tea-compose-page,
html[data-theme] body.evt-page,
html[data-theme] body.fc-page,
html[data-theme] body.guide-page,
html[data-theme] body.guide-detail-page,
html[data-theme] body.co-center-page,
html[data-theme] body.co-novel-page,
html[data-theme] body.cdp-page,
html[data-theme] body.cda-page,
html[data-theme] body.cn-relations-page,
html[data-theme] body.co-submit-page,
html[data-theme] body.co-work-page,
html[data-theme] body.co-theme-page,
html[data-theme] body.player-dossier-page,
html[data-theme] body.games-page,
html[data-theme] body.arena-room-page,
html[data-theme] body.amall-page,
html[data-theme] body.wheel-page,
html[data-theme] body.xier-music-page,
html[data-theme] body.sj-page,
html[data-theme] body.av-page,
html[data-theme] body.voucher-page,
html[data-theme] body.bless-page {
  background-color: var(--hub-bg);
  color: var(--hub-text);
  transition: background-color 0.45s ease, color 0.35s ease;
}

html[data-theme] body.my-page {
  background-color: var(--bg-night);
  color: var(--text);
  transition: background-color 0.45s ease, color 0.35s ease;
}

/* —— 小游戏厅 · 顶栏与卡片 —— */
html[data-theme] .arena-game-tabs {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-bg-plum) 88%, transparent),
    color-mix(in srgb, var(--hub-bg-mid) 85%, transparent)
  );
  border-color: var(--hub-border-strong);
}

html[data-theme] .tea-toast {
  background: color-mix(in srgb, var(--hub-bg, var(--bg-night)) 92%, transparent);
  border-color: color-mix(in srgb, var(--hub-rose) 35%, transparent);
  color: var(--hub-text);
}

/* —— 我的浮层 · 活动/卡片硬编码兜底覆写 —— */
html[data-theme] .activity-card {
  border-color: var(--glass-border);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--glass) 92%, transparent),
    color-mix(in srgb, var(--bg-night) 95%, transparent)
  );
}

html[data-theme] .activity-card--feature {
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rose-deep) 12%, transparent),
    0 18px 52px color-mix(in srgb, var(--rose-deep) 18%, transparent);
}

html[data-theme] .my-hub-v2__hero {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--rose-deep) 14%, transparent),
    color-mix(in srgb, var(--glass) 88%, transparent)
  );
  border-color: var(--glass-border);
}

html[data-theme] .my-hub-v2__stat,
html[data-theme] .my-hub-v2__row,
html[data-theme] .my-hub-v2__panel {
  border-color: var(--glass-border);
  background: color-mix(in srgb, var(--glass) 55%, transparent);
}

html[data-theme] .settings-auth-portal__card {
  border-color: var(--glass-border);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--glass) 90%, transparent),
    color-mix(in srgb, var(--bg-night) 92%, transparent)
  );
}

/* —— 开心模式 · 全站主题 → --hm-* 桥接 —— */
:root {
  --hm-bg: var(--bg-night, #0c060a);
  --hm-bg-2: var(--bg-wine, #1a0a12);
  --hm-sky: color-mix(in srgb, var(--accent, #e890a8) 42%, var(--gold, #f2ddb8) 58%);
  --hm-peach: var(--pink, #f0b8c8);
  --hm-rose: var(--rose, #e87898);
  --hm-rose-deep: var(--rose-deep, #c44a6a);
  --hm-gold: var(--gold-dim, #d4a86a);
  --hm-mint: color-mix(in srgb, var(--accent, #e890a8) 55%, var(--gold, #f2ddb8) 45%);
  --hm-text: var(--text, #fff8f5);
  --hm-text-soft: var(--text-soft, rgba(255, 248, 252, 0.78));
  --hm-line: color-mix(in srgb, var(--text, #fff8f5) 12%, transparent);
  --hm-glass: color-mix(in srgb, var(--glass, rgba(42, 16, 32, 0.72)) 88%, transparent);
  --hm-glass-strong: color-mix(in srgb, var(--glass, rgba(42, 16, 32, 0.72)) 72%, var(--paper, #fff9f6) 28%);
  --hm-shadow: 0 16px 40px color-mix(in srgb, var(--rose-deep, #c44a6a) 14%, transparent);
  --hm-on-accent: var(--paper, #fff9f6);
  --hm-live: var(--seal, #c43858);
  --hm-veil-glow-a: color-mix(in srgb, var(--pink) 48%, transparent);
  --hm-veil-glow-b: color-mix(in srgb, var(--accent) 38%, transparent);
  --hm-veil-top: color-mix(in srgb, var(--bg-night) 90%, transparent);
  --hm-veil-mid: color-mix(in srgb, var(--bg-wine) 92%, transparent);
  --hm-veil-room-top: color-mix(in srgb, var(--bg-night) 48%, transparent);
  --hm-veil-room-mid: color-mix(in srgb, var(--bg-wine) 62%, transparent);
  --hm-veil-room-bot: color-mix(in srgb, var(--ink) 55%, transparent);
  /* 房间内 · tint / 表面 / 阵营 */
  --hm-rose-tint-06: color-mix(in srgb, var(--hm-rose) 6%, transparent);
  --hm-rose-tint-08: color-mix(in srgb, var(--hm-rose) 8%, transparent);
  --hm-rose-tint-10: color-mix(in srgb, var(--hm-rose) 10%, transparent);
  --hm-rose-tint-12: color-mix(in srgb, var(--hm-rose) 12%, transparent);
  --hm-rose-tint-15: color-mix(in srgb, var(--hm-rose) 15%, transparent);
  --hm-rose-tint-16: color-mix(in srgb, var(--hm-rose) 16%, transparent);
  --hm-rose-tint-18: color-mix(in srgb, var(--hm-rose) 18%, transparent);
  --hm-rose-tint-20: color-mix(in srgb, var(--hm-rose) 20%, transparent);
  --hm-rose-tint-22: color-mix(in srgb, var(--hm-rose) 22%, transparent);
  --hm-rose-tint-25: color-mix(in srgb, var(--hm-rose) 25%, transparent);
  --hm-rose-tint-28: color-mix(in srgb, var(--hm-rose) 28%, transparent);
  --hm-rose-tint-35: color-mix(in srgb, var(--hm-rose) 35%, transparent);
  --hm-rose-tint-45: color-mix(in srgb, var(--hm-rose) 45%, transparent);
  --hm-gold-tint-14: color-mix(in srgb, var(--hm-gold) 14%, transparent);
  --hm-gold-tint-15: color-mix(in srgb, var(--hm-gold) 15%, transparent);
  --hm-gold-tint-25: color-mix(in srgb, var(--hm-gold) 25%, transparent);
  --hm-gold-tint-35: color-mix(in srgb, var(--hm-gold) 35%, transparent);
  --hm-gold-tint-45: color-mix(in srgb, var(--hm-gold) 45%, transparent);
  --hm-gold-tint-50: color-mix(in srgb, var(--hm-gold) 50%, transparent);
  --hm-gold-tint-65: color-mix(in srgb, var(--hm-gold) 65%, transparent);
  --hm-gold-tint-85: color-mix(in srgb, var(--hm-gold) 85%, transparent);
  --hm-gold-text: color-mix(in srgb, var(--hm-gold) 55%, var(--ink) 45%);
  --hm-surface: var(--paper, #fff9f6);
  --hm-surface-strong: color-mix(in srgb, var(--paper, #fff) 95%, transparent);
  --hm-surface-muted: color-mix(in srgb, var(--paper, #fff) 70%, transparent);
  --hm-surface-panel: color-mix(in srgb, var(--paper, #fff) 97%, transparent);
  --hm-surface-prep: color-mix(in srgb, var(--hm-bg) 94%, transparent);
  --hm-surface-input: color-mix(in srgb, var(--paper, #fff) 92%, transparent);
  --hm-input-text: var(--ink, #1a0a12);
  --hm-input-placeholder: color-mix(in srgb, var(--ink, #1a0a12) 42%, transparent);
  --hm-ring-light: color-mix(in srgb, var(--paper, #fff) 95%, transparent);
  --hm-overlay: color-mix(in srgb, var(--ink) 35%, transparent);
  --hm-overlay-strong: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-shadow-ink-05: 0 4px 12px color-mix(in srgb, var(--ink) 5%, transparent);
  --hm-shadow-ink-08: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  --hm-shadow-ink-12: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
  --hm-shadow-ink-15: 0 8px 20px color-mix(in srgb, var(--ink) 15%, transparent);
  --hm-shadow-glow-rose: 0 0 0 3px var(--hm-rose), 0 6px 16px color-mix(in srgb, var(--hm-rose) 35%, transparent);
  --hm-shadow-glow-rose-lg: 0 0 0 3px var(--hm-rose), 0 8px 20px color-mix(in srgb, var(--hm-rose) 35%, transparent);
  --hm-shadow-ring-rose: 0 0 0 6px var(--hm-rose-tint-12);
  --hm-shadow-speaker: 0 12px 28px color-mix(in srgb, var(--hm-rose-deep) 20%, transparent);
  --hm-shadow-gold: 0 4px 16px var(--hm-gold-tint-15);
  --hm-shadow-sheet: 0 -12px 40px color-mix(in srgb, var(--ink) 12%, transparent);
  --hm-live-surface: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-live-text: var(--champagne, #ffe8d0);
  --hm-live-text-soft: color-mix(in srgb, var(--champagne, #ffe8d0) 72%, transparent);
  --hm-live-border: color-mix(in srgb, var(--gold) 35%, transparent);
  --hm-live-btn-bg: color-mix(in srgb, var(--text) 8%, transparent);
  --hm-bubble-me: linear-gradient(135deg, var(--hm-rose-tint-20), var(--hm-gold-tint-15));
  --hm-urgent: var(--seal, #c43858);
  --hm-success: color-mix(in srgb, var(--accent) 60%, var(--gold) 40%);
  --hm-success-tint: color-mix(in srgb, var(--hm-success) 25%, transparent);
  --hm-team-red: var(--hm-rose-deep);
  --hm-team-red-light: var(--hm-rose);
  --hm-team-red-gradient: linear-gradient(145deg, var(--hm-team-red-light), var(--hm-team-red));
  --hm-team-red-tint: color-mix(in srgb, var(--hm-team-red-light) 12%, transparent);
  --hm-team-red-border: color-mix(in srgb, var(--hm-team-red-light) 25%, transparent);
  --hm-team-red-text: var(--hm-team-red);
  --hm-team-blue: color-mix(in srgb, var(--accent) 70%, var(--gold) 30%);
  --hm-team-blue-deep: color-mix(in srgb, var(--accent) 85%, var(--ink) 15%);
  --hm-team-blue-gradient: linear-gradient(145deg, var(--hm-team-blue), var(--hm-team-blue-deep));
  --hm-team-blue-tint: color-mix(in srgb, var(--hm-team-blue) 12%, transparent);
  --hm-team-blue-border: color-mix(in srgb, var(--hm-team-blue) 20%, transparent);
  --hm-team-blue-text: var(--hm-team-blue-deep);
  --hm-immersive-surface: color-mix(in srgb, var(--ink) 94%, transparent);
  --hm-immersive-card: color-mix(in srgb, var(--ink) 92%, transparent);
  --hm-immersive-gold-border: color-mix(in srgb, var(--gold) 35%, transparent);
  --hm-immersive-gold-tint: color-mix(in srgb, var(--gold) 12%, transparent);
  --hm-thumb-label-bg: color-mix(in srgb, var(--ink) 62%, transparent);
  --hm-accent-warm-gradient: linear-gradient(145deg, color-mix(in srgb, var(--hm-gold) 25%, transparent), var(--hm-rose-tint-20));
  --hm-accent-warm-text: color-mix(in srgb, var(--hm-gold) 45%, var(--ink) 55%);
  --hm-muted-dot: color-mix(in srgb, var(--text-soft) 55%, transparent);
  --hm-border-subtle: color-mix(in srgb, var(--ink) 8%, transparent);
  --hm-board-wood: linear-gradient(145deg, color-mix(in srgb, var(--hm-gold) 50%, var(--hm-peach) 50%), color-mix(in srgb, var(--hm-gold) 75%, var(--ink) 25%));
  --hm-board-line: color-mix(in srgb, var(--ink) 20%, transparent);
  --hm-board-shadow: inset 0 0 0 2px var(--hm-board-line), 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
  --hm-stone-red: radial-gradient(circle at 35% 30%, var(--hm-team-red-light), var(--hm-team-red));
  --hm-stone-blue: radial-gradient(circle at 35% 30%, var(--hm-team-blue), var(--hm-team-blue-deep));
  --hm-stone-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 25%, transparent);
  --hm-danmaku-chip: color-mix(in srgb, var(--paper) 88%, transparent);
  --hm-immersive-btn: linear-gradient(145deg, color-mix(in srgb, var(--hm-peach) 95%, transparent), color-mix(in srgb, var(--hm-rose) 85%, transparent));
  --hm-immersive-btn-text: color-mix(in srgb, var(--ink) 72%, var(--hm-gold) 28%);
  --hm-immersive-btn-shadow: 0 4px 14px color-mix(in srgb, var(--hm-rose-deep) 20%, transparent);
  --hm-immersive-btn-active: linear-gradient(145deg, color-mix(in srgb, var(--hm-gold) 65%, var(--ink) 35%), color-mix(in srgb, var(--ink) 65%, transparent));
  --hm-immersive-arena-bg: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, var(--hm-gold) 12%), color-mix(in srgb, var(--ink) 96%, transparent));
  --hm-immersive-arena-glow: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%);
  --hm-immersive-arena-veil: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, transparent) 0%, transparent 100%);
  --hm-immersive-bar: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-immersive-bar-strong: color-mix(in srgb, var(--ink) 92%, transparent);
  --hm-immersive-text-dim: color-mix(in srgb, var(--champagne) 65%, transparent);
  --hm-immersive-text: color-mix(in srgb, var(--champagne) 78%, transparent);
  --hm-immersive-red-chip: color-mix(in srgb, var(--hm-team-red) 88%, transparent);
  --hm-immersive-gold-chip: color-mix(in srgb, var(--gold) 35%, transparent);
  --hm-immersive-gold-chip-strong: color-mix(in srgb, var(--gold) 65%, transparent);
  --hm-overlay-profile: color-mix(in srgb, var(--ink) 40%, transparent);
  --hm-overlay-profile-strong: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-pick-ring: 0 0 0 3px color-mix(in srgb, var(--paper) 90%, transparent), var(--hm-shadow-ink-15);
  --hm-shadow-ink-06: 0 4px 14px color-mix(in srgb, var(--ink) 6%, transparent);
  --hm-shadow-ink-10: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
  --hm-shadow-ink-25: 0 10px 28px color-mix(in srgb, var(--ink) 25%, transparent);
  --hm-shadow-ink-35: 0 8px 24px color-mix(in srgb, var(--ink) 35%, transparent);
  --hm-shadow-ink-60: 0 6px 20px color-mix(in srgb, var(--ink) 35%, transparent);
}

html[data-tone='light'] {
  --hm-glass-strong: color-mix(in srgb, var(--glass) 85%, var(--paper) 15%);
  --hm-on-accent: #fff;
}

html[data-theme] body.hm-page,
body.hm-page {
  background-color: var(--hm-bg);
  color: var(--hm-text);
  transition: background-color 0.45s ease, color 0.35s ease;
}

/* —— 联创小说 / 漫剧 / 星图 · 全主题桥接 —— */
html[data-theme] .co-novel-page {
  --cn-accent: var(--hub-gold);
  --cn-accent-2: var(--hub-rose);
  --cn-read-bg: color-mix(in srgb, var(--hub-bg) 55%, transparent);
  --cn-card: color-mix(in srgb, var(--hub-surface) 92%, transparent);
}

html[data-theme] .cdp-page {
  --cdp-accent: var(--hub-gold);
  --cdp-accent-2: var(--hub-rose);
  --cdp-card: color-mix(in srgb, var(--hub-surface) 95%, transparent);
  --cdp-tab-active-bg: color-mix(in srgb, var(--cdp-accent) 28%, color-mix(in srgb, var(--hub-bg) 35%, transparent));
  --cdp-tab-active-ring: color-mix(in srgb, var(--cdp-accent) 70%, transparent);
}

html[data-theme] .cda-page {
  --cda-accent: color-mix(in srgb, var(--hub-accent) 55%, var(--hub-gold) 45%);
  --cda-accent-2: var(--hub-gold);
  --cda-card: color-mix(in srgb, var(--hub-surface) 96%, transparent);
}

html[data-theme] .cn-relations-page {
  --cnr-gold: var(--hub-gold);
  --cnr-rose: var(--hub-rose);
  --cnr-bg: var(--hub-bg);
  --cnr-card: color-mix(in srgb, var(--hub-surface) 94%, transparent);
  --cnr-line: color-mix(in srgb, var(--hub-gold) 35%, transparent);
  --cnr-text: var(--hub-text);
  --cnr-muted: var(--hub-muted);
}

html[data-theme] body.co-novel-page .hub-bg,
html[data-theme] body.cdp-page .hub-bg,
html[data-theme] body.cda-page .hub-bg,
html[data-theme] body.cn-relations-page .hub-bg,
html[data-theme] body.co-work-page .hub-bg,
html[data-theme] body.co-theme-page .hub-bg,
html[data-theme] body.co-submit-page .hub-bg,
html[data-theme] body.guide-detail-page .hub-bg,
html[data-theme] body.tea-post-page .hub-bg,
html[data-theme] body.tea-compose-page .hub-bg,
html[data-theme] body.games-page .hub-bg,
html[data-theme] body.arena-room-page .hub-bg,
html[data-theme] body.amall-page .hub-bg,
html[data-theme] body.wheel-page .hub-bg,
html[data-theme] body.xier-music-page .hub-bg,
html[data-theme] body.sj-page .hub-bg,
html[data-theme] body.player-dossier-page .hub-bg,
html[data-theme] body.av-page .hub-bg,
html[data-theme] body.bless-page .hub-bg {
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, color-mix(in srgb, var(--hub-rose) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 25%, color-mix(in srgb, var(--hub-gold) 10%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 0% 75%, color-mix(in srgb, var(--hub-rose-deep) 8%, transparent), transparent 48%),
    linear-gradient(175deg, var(--hub-bg) 0%, var(--hub-bg-mid) 38%, var(--hub-bg-plum) 68%, var(--hub-bg) 100%);
}

html[data-theme] body.co-novel-page .hub-bg__orb--1,
html[data-theme] body.cdp-page .hub-bg__orb--1,
html[data-theme] body.cda-page .hub-bg__orb--1 {
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-rose) 18%, transparent), transparent 70%);
}

html[data-theme] body.co-novel-page .hub-bg__orb--2,
html[data-theme] body.cdp-page .hub-bg__orb--2,
html[data-theme] body.cda-page .hub-bg__orb--2 {
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-gold) 12%, transparent), transparent 70%);
}

html[data-theme] .co-novel-page .cn-read-dock,
html[data-theme] .co-novel-page .cn-site-dock {
  background: color-mix(in srgb, var(--hub-bg) 92%, transparent);
  border-color: var(--hub-border);
}

html[data-theme] .co-novel-page .cn-read-dock__btn.is-active,
html[data-theme] .co-novel-page .cn-tabs__btn.is-active {
  color: var(--hub-gold);
  border-color: color-mix(in srgb, var(--hub-gold) 45%, transparent);
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
}

html[data-theme] .co-novel-page .cn-modal__backdrop,
html[data-theme] .co-novel-page .cn-drawer__backdrop {
  background: color-mix(in srgb, var(--hub-bg) 72%, transparent);
}

html[data-theme] .co-novel-page .cn-read-body,
html[data-theme] .co-novel-page .cn-reader__sheet {
  background: color-mix(in srgb, var(--hub-bg) 78%, transparent);
}

html[data-tone='light'] .co-novel-page .cn-hero__title,
html[data-tone='light'] .cdp-page .cdp-hero__title,
html[data-tone='light'] .cda-page .cda-hero__title {
  color: var(--hub-text);
}

html[data-tone='light'] .co-novel-page .cn-read-body,
html[data-tone='light'] .cdp-page .cdp-doc-body,
html[data-tone='light'] .cdp-page .cdp-md {
  color: var(--hub-text);
}

html[data-tone='light'] .co-novel-page .cn-form__hint,
html[data-tone='light'] .cdp-page .cdp-hero__sub,
html[data-tone='light'] .cda-page .cda-hero__sub {
  color: var(--hub-muted);
}

/* —— 联创中心 · 主题 token 桥接 —— */
html[data-theme] .co-center-page {
  --cc-accent: var(--hub-rose);
  --cc-gold: var(--hub-gold);
  --cc-card: color-mix(in srgb, var(--hub-surface) 88%, transparent);
}

html[data-theme] body.co-center-page .hub-bg {
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, color-mix(in srgb, var(--hub-rose) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 25%, color-mix(in srgb, var(--hub-gold) 10%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 0% 75%, color-mix(in srgb, var(--hub-rose-deep) 8%, transparent), transparent 48%),
    linear-gradient(175deg, var(--hub-bg) 0%, var(--hub-bg-mid) 38%, var(--hub-bg-plum) 68%, var(--hub-bg) 100%);
}

html[data-theme] .co-center-page .cc-hero__title,
html[data-theme] .co-center-page .cc-section__title {
  background: linear-gradient(120deg, var(--hub-champagne), var(--hub-rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme] .co-center-page .cc-card,
html[data-theme] .co-center-page .cc-panel {
  background: var(--cc-card);
  border-color: var(--hub-border);
}

html[data-theme] .co-center-page .cc-btn--primary {
  background: linear-gradient(135deg, var(--hub-rose), var(--hub-rose-deep));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--hub-rose) 35%, transparent);
}

html[data-theme] .co-submit-page {
  --cc-accent: var(--hub-rose);
  --cc-gold: var(--hub-gold);
  --cc-card: color-mix(in srgb, var(--hub-surface) 88%, transparent);
}

html[data-theme] .co-work-page,
html[data-theme] .co-theme-page {
  --cc-accent: var(--hub-rose);
  --cc-gold: var(--hub-gold);
  --cc-card: color-mix(in srgb, var(--hub-surface) 88%, transparent);
}

html[data-theme] .co-work-page .cc-card,
html[data-theme] .co-theme-page .cc-card,
html[data-theme] .co-work-page .cc-panel,
html[data-theme] .co-theme-page .cc-panel {
  background: var(--cc-card);
  border-color: var(--hub-border);
}

/* —— 漫剧编剧包 / 资产页 · 补充 —— */
html[data-theme] .cdp-page .cdp-doc-body {
  background: color-mix(in srgb, var(--hub-bg) 55%, transparent);
  border-color: color-mix(in srgb, var(--hub-border) 55%, transparent);
}

html[data-theme] .cdp-page .cdp-md pre,
html[data-theme] .cdp-page .cdp-md code {
  background: color-mix(in srgb, var(--hub-bg) 42%, transparent);
}

html[data-theme] .cdp-page .cdp-doc-tab.is-active,
html[data-theme] .cda-page .cda-type-tab.is-active {
  color: var(--hub-gold);
  border-color: color-mix(in srgb, var(--hub-gold) 45%, transparent);
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hub-gold) 25%, transparent),
    0 4px 14px color-mix(in srgb, var(--hub-gold) 18%, transparent);
}

html[data-theme] .cdp-page .cdp-card,
html[data-theme] .cda-page .cda-card {
  background: color-mix(in srgb, var(--hub-surface) 94%, transparent);
  border-color: var(--hub-border);
}

html[data-theme] .cn-relations-page .cnr-poster__frame {
  border-color: color-mix(in srgb, var(--hub-gold) 35%, transparent);
}

html[data-tone='light'] .co-center-page .cc-muted,
html[data-tone='light'] .co-novel-page .cn-muted,
html[data-tone='light'] .cdp-page .cdp-muted,
html[data-tone='light'] .cda-page .cda-muted,
html[data-tone='light'] .cn-relations-page .cnr-muted {
  color: var(--hub-muted);
}

html[data-tone='light'] .co-novel-page .cn-card,
html[data-tone='light'] .co-center-page .cc-card {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--hub-ink, var(--ink)) 8%, transparent);
}

/* —— L3 · 攻略详情 / 茶肆帖子 / 游戏厅 / 活动子页 —— */
html[data-theme] .guide-detail-page .guide-detail-panel {
  background: color-mix(in srgb, var(--hub-surface) 92%, transparent);
  border-color: var(--hub-border);
}

html[data-theme] .tea-post-page .tea-post,
html[data-theme] .tea-post-page .tea-composer,
html[data-theme] .tea-page .tea-composer,
html[data-theme] .tea-page .tea-composer--card,
html[data-theme] .tea-compose-page .tea-compose-form,
html[data-theme] .tea-compose-page .tea-card,
html[data-theme] .tea-compose-sheet__panel {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--hub-bg-mid) 88%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg) 82%, transparent) 100%
  );
  border-color: var(--hub-border);
}

html[data-theme] .tea-compose-sheet__panel {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hub-bg-mid) 98%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg) 100%, transparent) 100%
  );
}

html[data-theme] .games-page .game-card,
html[data-theme] .games-page .games-room-item,
html[data-theme] .arena-room-page .arena-side-panel,
html[data-theme] .arena-room-page .arena-toolbar {
  border-color: var(--hub-border-strong);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-bg-plum) 90%, transparent),
    color-mix(in srgb, var(--hub-bg-mid) 88%, transparent)
  );
}

html[data-theme] .games-page .game-card.is-live {
  border-color: color-mix(in srgb, var(--hub-rose) 45%, transparent);
}

html[data-theme] .games-page .game-card.is-selected {
  border-color: color-mix(in srgb, var(--hub-gold) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hub-gold) 35%, transparent);
}

/* —— L3 · 情缘商城 / 星途 / 档案 / 资料库 —— */
html[data-theme] .amall-page {
  --amall-rose: var(--hub-rose);
  --amall-gold: var(--hub-gold-dim);
  --amall-champagne: var(--hub-champagne);
  --amall-card: color-mix(in srgb, var(--hub-surface) 82%, transparent);
  --amall-border: color-mix(in srgb, var(--hub-rose) 28%, transparent);
}

html[data-theme] .amall-page .amall-hero {
  border-color: var(--amall-border);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--hub-rose-deep) 42%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg-mid) 95%, transparent) 45%,
    color-mix(in srgb, var(--hub-gold-dim) 22%, transparent) 100%
  );
}

html[data-theme] .sj-page {
  --sj-gold: var(--hub-gold);
  --sj-rose: var(--hub-rose);
  --sj-violet: color-mix(in srgb, var(--hub-accent) 55%, var(--hub-gold) 45%);
  --sj-bg: var(--hub-bg);
  --sj-ink: color-mix(in srgb, var(--hub-bg) 92%, transparent);
  --sj-text: var(--hub-text);
  --sj-muted: var(--hub-muted);
  background: var(--hub-bg);
  color: var(--hub-text);
}

html[data-theme] body.sj-page .hub-bg__orb--1 {
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-accent) 22%, transparent), transparent 68%);
}

html[data-theme] body.sj-page .hub-bg__orb--2 {
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-gold) 18%, transparent), transparent 68%);
}

html[data-theme] .player-dossier-page .dossier-shell,
html[data-theme] .player-dossier-page .dossier-hub-card {
  border-color: var(--hub-border);
  background: color-mix(in srgb, var(--hub-surface) 88%, transparent);
}

html[data-theme] .av-page {
  --av-accent: var(--hub-rose);
  --av-gold: var(--hub-gold);
  --av-card: color-mix(in srgb, var(--hub-surface) 90%, transparent);
  --av-border: var(--hub-border);
  background-color: var(--hub-bg);
  color: var(--hub-text);
}

html[data-theme] .cda-page .cda-detail__backdrop {
  background: color-mix(in srgb, var(--hub-bg) 72%, transparent);
}

html[data-theme] .cda-page .cda-detail__body {
  background: color-mix(in srgb, var(--hub-bg) 55%, transparent);
}

html[data-tone='light'] .guide-detail-page .guide-detail__title,
html[data-tone='light'] .co-work-page .cc-section__title,
html[data-tone='light'] .co-theme-page .cc-section__title {
  color: var(--hub-text);
}

/* —— 茶肆 · 表单焦点与下拉 —— */
html[data-theme] .tea-page .tea-zone select:focus,
html[data-theme] .tea-page .tea-zone--inline select:focus,
html[data-theme] .tea-page .tea-search input:focus,
html[data-theme] .tea-post-page .tea-reply__field input:focus,
html[data-theme] .tea-compose-page .compose-field input:focus,
html[data-theme] .tea-compose-page .compose-field select:focus,
html[data-theme] .tea-compose-page .compose-field textarea:focus {
  outline: none;
  border-color: var(--hub-input-focus, var(--hub-gold-dim));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hub-gold) 18%, transparent);
}

html[data-theme] .tea-page .tea-search-btn:focus-visible {
  outline: 2px solid var(--hub-gold);
  outline-offset: 2px;
}

html[data-theme] .tea-page .tea-tag.is-active {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--hub-rose) 35%, transparent);
}

/* —— 茶肆 · 发送/评论输入区 —— */
html[data-theme] .tea-composer__input-wrap,
html[data-theme] .tea-composer__guest input,
html[data-theme] .tea-reply__field input,
html[data-theme] .tea-reply__field textarea,
html[data-theme] .compose-field input,
html[data-theme] .compose-field select,
html[data-theme] .compose-field textarea {
  border-color: var(--hub-input-border, var(--hub-border));
  background: var(--hub-input-bg, color-mix(in srgb, var(--hub-surface-2) 92%, transparent));
  color: var(--hub-text);
}

html[data-theme] .tea-composer__input-wrap:focus-within,
html[data-theme] .tea-reply__field input:focus,
html[data-theme] .tea-reply__field textarea:focus {
  border-color: var(--hub-input-focus, var(--hub-gold-dim));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-gold) 8%, transparent);
}

html[data-theme] .tea-composer__like,
html[data-theme] .tea-composer__more {
  border-color: color-mix(in srgb, var(--hub-border) 65%, transparent);
  background: color-mix(in srgb, var(--hub-surface-2) 88%, transparent);
  color: var(--hub-champagne);
}

html[data-theme] .tea-composer__send {
  background: linear-gradient(135deg, var(--hub-rose-deep), var(--hub-rose));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--hub-rose) 28%, transparent);
}

html[data-theme] .tea-reply-box {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-surface) 90%, transparent),
    color-mix(in srgb, var(--hub-bg-mid) 85%, transparent)
  );
  border-color: var(--hub-border-strong);
}

html[data-theme] .tea-compose-sheet__backdrop {
  background: color-mix(in srgb, var(--hub-bg) 72%, transparent);
}

/* —— 攻略 · 搜索与标签 —— */
html[data-theme] .guide-page .guide-unified-search input,
html[data-theme] .guide-page .guide-unified-search__wrap--power input,
html[data-theme] .guide-detail-page .guide-search input {
  border-color: var(--hub-input-border, var(--hub-border));
  background: var(--hub-input-bg, color-mix(in srgb, var(--hub-surface-2) 92%, transparent));
  color: var(--hub-text);
}

html[data-theme] .guide-page .guide-unified-search input:focus,
html[data-theme] .guide-page .guide-unified-search__wrap--power input:focus {
  outline: none;
  border-color: var(--hub-input-focus, var(--hub-gold-dim));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hub-gold) 18%, transparent);
}

html[data-theme] .guide-page .guide-search-dropdown {
  border-color: var(--hub-border-strong);
  background: color-mix(in srgb, var(--hub-bg) 98%, transparent);
}

html[data-theme] .guide-page .guide-search-hit {
  background: color-mix(in srgb, var(--hub-surface-2) 88%, transparent);
}

html[data-theme] .guide-page .guide-search-hit__tag,
html[data-theme] .guide-page .guide-card__tag,
html[data-theme] .guide-page .hub-guide-card__tag--primary {
  color: var(--hub-blush);
  border-color: color-mix(in srgb, var(--hub-rose) 35%, transparent);
  background: color-mix(in srgb, var(--hub-rose) 22%, transparent);
}

html[data-theme] .guide-page .hub-guide-card__tag--sub {
  color: var(--hub-muted);
  border-color: var(--hub-border);
  background: color-mix(in srgb, var(--hub-surface-2) 88%, transparent);
}

html[data-theme] .guide-page .guide-type-tabs button.is-active {
  background: linear-gradient(135deg, var(--hub-rose-deep), var(--hub-rose));
  color: var(--hub-text);
}

html[data-theme] .guide-page .guide-scope-tabs button em.has-hits {
  color: var(--hub-accent);
}

/* —— 攻略 · 顶部卡片 / 推荐区 —— */
html[data-theme] .guide-hero,
html[data-theme] .guide-page .guide-hero {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-rose-deep) 45%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg-mid) 92%, transparent) 55%,
    color-mix(in srgb, var(--hub-bg) 98%, transparent) 100%
  );
  border-color: var(--hub-border-strong);
  box-shadow: var(--hub-shadow-rose), inset 0 1px 0 var(--hub-gold-glow);
}

html[data-theme] .hub-guide-card.is-featured,
html[data-theme] .guide-page .hub-guide-card.is-featured {
  border-color: color-mix(in srgb, var(--hub-gold) 45%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--hub-bg-plum) 95%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg) 92%, transparent) 100%
  );
}

html[data-theme] .guide-mini-card,
html[data-theme] .guide-column-card,
html[data-theme] .guide-page .guide-panel {
  background: color-mix(in srgb, var(--hub-surface-2) 88%, transparent);
  border-color: var(--hub-border);
}

html[data-theme] .guide-page .guide-panel--recommend {
  border-color: color-mix(in srgb, var(--hub-gold) 35%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-rose-deep) 35%, transparent),
    color-mix(in srgb, var(--hub-bg) 88%, transparent)
  );
}

html[data-theme] .guide-unified-search__wrap--power {
  border-color: color-mix(in srgb, var(--hub-gold) 35%, transparent);
  background: color-mix(in srgb, var(--hub-bg) 72%, transparent);
}

/* —— 江湖档案 · 顶部英雄卡 / 三联入口 —— */
html[data-theme] .dossier-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hub-rose-deep) 35%, transparent),
    color-mix(in srgb, var(--hub-bg) 50%, transparent)
  );
  border-color: color-mix(in srgb, var(--hub-rose-deep) 25%, transparent);
}

html[data-theme] .dossier-hub-card__main {
  border-color: color-mix(in srgb, var(--hub-text) 10%, transparent);
  background: color-mix(in srgb, var(--hub-bg) 24%, transparent);
}

html[data-theme] .dossier-hub-card--cocreate .dossier-hub-card__main {
  border-color: color-mix(in srgb, var(--hub-gold) 32%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-gold) 14%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg) 28%, transparent) 100%
  );
}

html[data-theme] .dossier-hub-card--affection .dossier-hub-card__main {
  border-color: color-mix(in srgb, var(--hub-rose) 38%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-rose) 16%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg) 28%, transparent) 100%
  );
}

html[data-theme] .dossier-stat {
  background: color-mix(in srgb, var(--hub-bg) 20%, transparent);
}

html[data-theme] .dossier-stat strong {
  color: var(--hub-gold);
}

html[data-theme] .dossier-shell,
html[data-theme] .dossier-hub-card {
  border-color: var(--hub-border);
}
html[data-theme] .dossier-hub-card--star .dossier-hub-card__main--link {
  border-color: color-mix(in srgb, var(--hub-accent) 32%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-bg-plum) 55%, transparent),
    color-mix(in srgb, var(--hub-bg) 28%, transparent)
  );
}

html[data-theme] .player-dossier-page {
  --gold: var(--hub-gold);
  --gold-dim: var(--hub-gold-dim);
  --rose: var(--hub-rose);
  --rose-deep: var(--hub-rose-deep);
  --blush: var(--hub-blush);
  --champagne: var(--hub-champagne);
  --text: var(--hub-text);
  --text-muted: var(--hub-muted);
  --text-soft: var(--hub-text-soft);
  --accent: var(--hub-accent);
}

/* —— 江湖档案 · 展卷 Tab（全站：独立页 + 我的浮层） —— */
html[data-theme] .dossier-tabs__btn {
  border-color: color-mix(in srgb, var(--hub-rose-deep) 22%, transparent);
  background: color-mix(in srgb, var(--hub-surface-2) 90%, transparent);
  color: var(--hub-muted);
}

html[data-theme] .dossier-tabs__btn.is-active {
  border-color: var(--hub-gold);
  color: var(--hub-gold);
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hub-gold) 18%, transparent);
}

html[data-theme] .dossier-sticky-head {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hub-bg) 98%, transparent) 85%,
    transparent
  );
}

html[data-theme] .dossier-tabs__count {
  background: var(--hub-rose-deep);
  color: var(--hub-text);
}

html[data-theme] .dossier-tabs__count--cp {
  background: linear-gradient(135deg, var(--hub-rose-deep), var(--hub-gold));
}

html[data-tone='light'] .dossier-tabs__btn.is-active {
  color: var(--hub-gold-dim);
  border-color: var(--hub-gold-dim);
}

html[data-theme] .player-dossier-page .dossier-tabs__btn {
  border-color: color-mix(in srgb, var(--hub-rose-deep) 22%, transparent);
  background: color-mix(in srgb, var(--hub-text) 4%, transparent);
  color: var(--hub-muted);
}

html[data-theme] .player-dossier-page .dossier-tabs__btn.is-active {
  border-color: var(--hub-gold);
  color: var(--hub-gold);
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
}

html[data-theme] .player-dossier-page .dossier-toolbar {
  background: color-mix(in srgb, var(--hub-bg) 96%, transparent);
  border-bottom-color: color-mix(in srgb, var(--hub-text) 6%, transparent);
}

html[data-theme] .player-dossier-page .dossier-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hub-rose-deep) 35%, transparent),
    color-mix(in srgb, var(--hub-bg) 50%, transparent)
  );
  border-color: color-mix(in srgb, var(--hub-rose-deep) 25%, transparent);
}

html[data-theme] .player-dossier-page .dossier-gallery-filters__btn.is-active,
html[data-theme] .player-dossier-page .dossier-timeline-filters__btn.is-active,
html[data-theme] .player-dossier-page .dossier-month-jump__btn.is-active {
  border-color: var(--hub-gold);
  color: var(--hub-gold);
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
}

html[data-theme] .player-dossier-page .dossier-tag,
html[data-theme] .player-dossier-page .dossier-toolbar__chip {
  background: color-mix(in srgb, var(--hub-rose) 15%, transparent);
  color: var(--hub-blush);
  border: 1px solid color-mix(in srgb, var(--hub-rose) 28%, transparent);
}

html[data-theme] .player-dossier-page .dossier-id-badge--chip {
  border-color: color-mix(in srgb, var(--hub-text) 12%, transparent);
  background: color-mix(in srgb, var(--hub-bg) 32%, transparent);
  color: var(--hub-text-soft);
}

html[data-theme] .player-dossier-page .dossier-id-badge--chip.is-cp-active {
  border-color: color-mix(in srgb, var(--hub-rose) 50%, transparent);
  background: color-mix(in srgb, var(--hub-rose) 14%, transparent);
}

html[data-theme] .player-dossier-page .dossier-id-badge--chip.is-cp-active .dossier-id-badge__text strong {
  color: var(--hub-blush);
}

html[data-theme] .mx-badge--verified {
  color: var(--hub-accent);
  background: color-mix(in srgb, var(--hub-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--hub-accent) 35%, transparent);
}

html[data-theme] .mx-badge--cocreate {
  color: color-mix(in srgb, var(--hub-accent) 55%, var(--hub-gold) 45%);
  background: color-mix(in srgb, var(--hub-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--hub-accent) 40%, transparent);
}

html[data-theme] .mx-badge--profile {
  color: var(--hub-gold);
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hub-gold) 28%, transparent);
}

html[data-theme] .player-dossier-page .dossier-id-badges--readable .dossier-id-badge__text strong {
  color: var(--hub-text);
}

html[data-theme] .player-dossier-page .dossier-id-badges--readable .dossier-id-badge__text em {
  color: var(--hub-muted);
}

html[data-tone='light'] .tea-page .tea-zone select,
html[data-tone='light'] .tea-page .tea-search input,
html[data-tone='light'] .guide-page .guide-search input,
html[data-tone='light'] .guide-page .guide-unified-search input {
  background: color-mix(in srgb, var(--hub-surface) 88%, transparent);
  color: var(--hub-text);
}

/* —— 首页 · 顶部轮播 / 入口卡片 —— */
html[data-theme] .hub-hero__media::after {
  background: linear-gradient(
    108deg,
    color-mix(in srgb, var(--hub-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg-mid) 42%, transparent) 50%,
    color-mix(in srgb, var(--hub-rose-deep) 88%, transparent) 100%
  );
}

html[data-theme] .hub-hero-entries__toggle {
  background: color-mix(in srgb, var(--hub-bg-mid) 55%, transparent);
}

html[data-theme] .hub-hero-entries__toggle:hover,
html[data-theme] .hub-hero-entries__toggle:active {
  background: color-mix(in srgb, var(--hub-surface) 65%, transparent);
}

html[data-theme] .hub-hero-entry {
  background: color-mix(in srgb, var(--hub-surface) 65%, transparent);
}

html[data-theme] .hub-hero-entry:hover,
html[data-theme] .hub-hero-entry:active {
  background: color-mix(in srgb, var(--hub-rose-deep) 45%, transparent);
}

html[data-theme] .hub-hero__nav {
  background: color-mix(in srgb, var(--hub-bg) 65%, transparent);
}

html[data-theme] .hub-stat {
  background: color-mix(in srgb, var(--hub-surface) 88%, transparent);
  border-color: var(--hub-border);
}

html[data-theme] .hub-event-card {
  background: linear-gradient(
    148deg,
    color-mix(in srgb, var(--hub-rose-deep) 55%, transparent) 0%,
    color-mix(in srgb, var(--hub-bg-mid) 95%, transparent) 55%,
    color-mix(in srgb, var(--hub-bg) 98%, transparent) 100%
  );
}

/* —— 江湖档案 · 图/视频说明栏 —— */
html[data-theme] .dossier-gallery-item__cap {
  background: color-mix(in srgb, var(--hub-bg) 55%, transparent);
  border-color: color-mix(in srgb, var(--hub-gold) 28%, transparent);
  color: var(--hub-gold);
}

html[data-theme] .dossier-lightbox__caption {
  color: var(--hub-champagne);
}

html[data-theme] .dossier-lightbox__index {
  color: var(--hub-muted);
}

html[data-theme] .dtl-card {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--hub-rose-deep) 50%, transparent),
    color-mix(in srgb, var(--hub-bg) 65%, transparent)
  );
  border-color: color-mix(in srgb, var(--hub-rose-deep) 20%, transparent);
}

html[data-theme] .dtl-card__title {
  color: var(--hub-text);
}

html[data-theme] .dtl-card__desc,
html[data-theme] .dtl-card__quote {
  color: var(--hub-muted);
}

html[data-theme] .dtl-tag {
  background: color-mix(in srgb, var(--hub-gold) 12%, transparent);
  color: var(--hub-gold);
}

html[data-theme] .dtl-tag--mood {
  background: color-mix(in srgb, var(--hub-rose) 15%, transparent);
  color: var(--hub-blush);
}

/* —— 水墨丹青 / 紫宸夜宴 / 竹海听风 · 小字辅文对比度加固 —— */
html[data-theme='ink-wash'] .hub-muted,
html[data-theme='palace-purple'] .hub-muted,
html[data-theme='bamboo-mist'] .hub-muted,
html[data-theme='ink-wash'] .hub-stat__label,
html[data-theme='palace-purple'] .hub-stat__label,
html[data-theme='bamboo-mist'] .hub-stat__label,
html[data-theme='ink-wash'] .hub-card__meta,
html[data-theme='palace-purple'] .hub-card__meta,
html[data-theme='bamboo-mist'] .hub-card__meta,
html[data-theme='ink-wash'] .hub-event-card__date,
html[data-theme='palace-purple'] .hub-event-card__date,
html[data-theme='bamboo-mist'] .hub-event-card__date,
html[data-theme='ink-wash'] .tea-card__meta,
html[data-theme='palace-purple'] .tea-card__meta,
html[data-theme='bamboo-mist'] .tea-card__meta,
html[data-theme='ink-wash'] .tea-card__foot,
html[data-theme='palace-purple'] .tea-card__foot,
html[data-theme='bamboo-mist'] .tea-card__foot,
html[data-theme='ink-wash'] .guide-card__meta,
html[data-theme='palace-purple'] .guide-card__meta,
html[data-theme='bamboo-mist'] .guide-card__meta,
html[data-theme='ink-wash'] .cn-muted,
html[data-theme='palace-purple'] .cn-muted,
html[data-theme='bamboo-mist'] .cn-muted,
html[data-theme='ink-wash'] .cc-muted,
html[data-theme='palace-purple'] .cc-muted,
html[data-theme='bamboo-mist'] .cc-muted,
html[data-theme='ink-wash'] .dossier-id-badge__text em,
html[data-theme='palace-purple'] .dossier-id-badge__text em,
html[data-theme='bamboo-mist'] .dossier-id-badge__text em,
html[data-theme='ink-wash'] .dtl-card__desc,
html[data-theme='palace-purple'] .dtl-card__desc,
html[data-theme='bamboo-mist'] .dtl-card__desc {
  color: var(--hub-text-soft);
}