/* ============================================================
   皮肤系统 skins.css
   - :root 定义默认皮肤「经典深色」的 Design Token（值 = 现有硬编码，默认态零视觉变化）
   - html[data-skin="softlight"] 覆盖为「晨雾柔光」浅色皮肤
   - 末尾「通用补丁层」：给尚未 Token 化的次级页面兜底（高特异性覆盖常见字面量类）
   加载顺序：common.css 之后、页面 css 之前。
   ============================================================ */

/* ---------- Token：经典深色（默认） ---------- */
:root {
  --bg-page: #0a0a0f;
  --bg-card: #1a1a2e;
  --bg-card-2: #16213e;
  --bg-soft: rgba(255, 255, 255, 0.05);
  --bg-soft-hover: rgba(255, 255, 255, 0.1);
  --border-1: rgba(255, 255, 255, 0.1);
  --border-2: rgba(255, 255, 255, 0.05);
  --text-1: #ffffff;
  --text-2: #a0a0b2;
  --text-3: #666666;
  --accent: #ff6b6b;
  --accent-2: #ff8e53;
  --accent-grad: linear-gradient(135deg, #ff6b6b, #ff8e53);
  --accent-glow: rgba(255, 107, 107, 0.3);
  --brand-1: #667eea;
  --brand-2: #764ba2;
  --brand-grad: linear-gradient(135deg, #667eea, #764ba2);
  --success: #10b981;
  --warning: #ff9500;
  --danger: #f53f3f;
  --tab-inactive: #666666;
  --shadow-top: 0 -2px 12px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
  --scroll-thumb: rgba(255, 255, 255, 0.1);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.2);
  --overlay: rgba(0, 0, 0, 0.5);
  /* 精确补充 Token（值 = 页面 css 现有字面量，默认皮肤零视觉变化） */
  --text-mute: #888888;
  --text-soft: #cbd5e1;
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-2: rgba(255, 255, 255, 0.08);
  --card-hover: rgba(40, 40, 60, 1);
  --surface: #14141d;
  --surface-2: #1c1c28;
  --modal-bg: #2a2a40;
  --grad-success: linear-gradient(135deg, #10b981, #059669);
  --grad-success-hover: linear-gradient(135deg, #14c98e, #0a8f6f);
  --grad-teal: linear-gradient(135deg, #4ecdc4, #44a08d);
  --grad-warm: linear-gradient(135deg, #ff8e53, #ff6b6b);
  --grad-warm-hover: linear-gradient(135deg, #ff9e66, #ff7c7c);
  --grad-pay: linear-gradient(135deg, #ff9a3d, #ff6a00);
  --text-modal: #aaaaaa;
  --chip-bg: rgba(255, 255, 255, 0.08);
  --connector: rgba(255, 255, 255, 0.4);
  --overlay-strong: rgba(0, 0, 0, 0.7);
  --text-arrow: #6b7280;
  --modal-btn-border: rgba(255, 255, 255, 0.15);
  /* 首页分类卡（顺序=性格/智商/情商/职业） */
  --cat-wash-1: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 142, 83, 0.2));
  --cat-wash-2: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(68, 160, 141, 0.2));
  --cat-wash-3: linear-gradient(135deg, rgba(168, 237, 234, 0.2), rgba(254, 214, 227, 0.2));
  --cat-wash-4: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  --cat-icon-1: linear-gradient(135deg, #ff6b6b, #ff8e53);
  --cat-icon-2: linear-gradient(135deg, #4ecdc4, #44a08d);
  --cat-icon-3: linear-gradient(135deg, #a8edea, #fed6e3);
  --cat-icon-3-fg: #333333;
  --cat-icon-4: linear-gradient(135deg, #667eea, #764ba2);
  /* 分类页/列表页补充 */
  --wash-accent: rgba(255, 107, 107, 0.2);
  --wash-success: rgba(16, 185, 129, 0.2);
  --link-info: #7fd1ff;
  --grad-invite: linear-gradient(135deg, #ff8a3d, #ff6a3d);
  --overlay-mask: rgba(0, 0, 0, 0.6);
  --modal-bg-2: #1a1a24;
  --modal-fg: #eeeeee;
  --shadow-soft: none;
  /* 答题页补充 */
  --accent-grad-h: linear-gradient(90deg, #ff6b6b, #ff8e53);
  --wash-brand: rgba(102, 126, 234, 0.2);
  --wash-selected: rgba(255, 107, 107, 0.25);
  --modal-desc: rgba(255, 255, 255, 0.6);
  --btn-ghost-bg: rgba(255, 255, 255, 0.12);
  --dot-idle: rgba(255, 255, 255, 0.2);
  /* 解锁页补充 */
  --wash-hint: rgba(102, 126, 234, 0.15);
  --text-hint: #a8b4fc;
  --wash-brand-2: rgba(102, 126, 234, 0.12);
  --text-2nd: #cccccc;
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.6);
  --text-accent-2: #ff8e53;
  --radio-on: #ff8e53;
  --wash-accent-10: rgba(255, 107, 107, 0.1);
  /* 结果页（result-full 内联样式）别名 Token */
  --sk-surface: #14141d;
  --sk-surface-2: #1c1c28;
  --sk-line: rgba(255, 255, 255, 0.08);
  --sk-text: #ffffff;
  --sk-text-2: rgba(255, 255, 255, 0.62);
  --sk-text-3: rgba(255, 255, 255, 0.40);
  --sk-ok: #34d399;
  --sk-ok-wash: rgba(52, 211, 153, 0.1);
  --sk-ok-line: rgba(52, 211, 153, 0.4);
  --sk-warn: #fbbf24;
  --sk-warn-wash: rgba(251, 191, 36, 0.18);
  --sk-warn-line: rgba(251, 191, 36, 0.4);
  --sk-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --sk-panel: rgba(255, 255, 255, 0.03);
  --sk-wash: rgba(255, 255, 255, 0.06);
  --sk-track: rgba(255, 255, 255, 0.08);
  --sk-card-b: #0c0c14;
  --sk-foot: #0b0b12;
  --sk-toast-bg: rgba(20, 20, 29, 0.96);
  --sk-pay-hover: linear-gradient(135deg, #ffb366, #ff8533);
}

/* ---------- Token：晨雾柔光（浅色） ----------
   门控：仅 data-skin-aware 的页面（css 已完成 Token 化落地）应用浅色 Token；
   未落地页面保持深色 Token，避免浅色底 + 硬编码白字不可读。 */
html[data-skin="softlight"][data-skin-aware] {
  --bg-page: #f6f4ef;
  --bg-card: #ffffff;
  --bg-card-2: #ffffff;
  --bg-soft: rgba(109, 93, 231, 0.06);
  --bg-soft-hover: rgba(109, 93, 231, 0.12);
  --border-1: rgba(43, 36, 64, 0.12);
  --border-2: rgba(43, 36, 64, 0.07);
  --text-1: #2b2440;
  --text-2: #5b5470;
  --text-3: #8d87a3;
  --accent: #6d5de7;
  --accent-2: #b89af7;
  --accent-grad: linear-gradient(135deg, #6d5de7, #8e7cf5);
  --accent-glow: rgba(109, 93, 231, 0.3);
  --brand-1: #6d5de7;
  --brand-2: #b89af7;
  --brand-grad: linear-gradient(135deg, #6d5de7 0%, #8e7cf5 55%, #b89af7 100%);
  --success: #2bb3a3;
  --warning: #e8a33d;
  --danger: #f2726f;
  --tab-inactive: #8d87a3;
  --shadow-top: 0 -2px 12px rgba(43, 36, 64, 0.06);
  --shadow-card: 0 6px 18px rgba(43, 36, 64, 0.08);
  --scroll-thumb: rgba(109, 93, 231, 0.25);
  --scroll-thumb-hover: rgba(109, 93, 231, 0.4);
  --overlay: rgba(43, 36, 64, 0.4);
  /* 精确补充 Token（晨雾柔光） */
  --text-mute: #8d87a3;
  --text-soft: #6b6480;
  --hairline: rgba(43, 36, 64, 0.08);
  --hairline-2: rgba(43, 36, 64, 0.1);
  --card-hover: #f3f0fa;
  --surface: #ffffff;
  --surface-2: #efecf7;
  --modal-bg: #ffffff;
  --grad-success: linear-gradient(135deg, #2bb3a3, #1f9c8f);
  --grad-success-hover: linear-gradient(135deg, #33c4b3, #25ab9d);
  --grad-teal: linear-gradient(135deg, #2bb3a3, #1f9c8f);
  --grad-warm: linear-gradient(135deg, #f2726f, #e8565a);
  --grad-warm-hover: linear-gradient(135deg, #ff8a86, #f2666a);
  --grad-pay: linear-gradient(135deg, #d98e3f, #b8743f);
  --text-modal: #5b5470;
  --chip-bg: rgba(109, 93, 231, 0.08);
  --connector: rgba(43, 36, 64, 0.25);
  --overlay-strong: rgba(43, 36, 64, 0.45);
  --text-arrow: #8d87a3;
  --modal-btn-border: rgba(43, 36, 64, 0.2);
  /* 首页分类卡（晨雾柔光：类型色淡底 + 实色图标） */
  --cat-wash-1: rgba(124, 108, 240, 0.1);
  --cat-wash-2: rgba(43, 179, 163, 0.1);
  --cat-wash-3: rgba(242, 114, 111, 0.1);
  --cat-wash-4: rgba(232, 163, 61, 0.13);
  --cat-icon-1: linear-gradient(135deg, #7c6cf0, #8e7cf5);
  --cat-icon-2: linear-gradient(135deg, #2bb3a3, #1f9c8f);
  --cat-icon-4: linear-gradient(135deg, #e8a33d, #d98e3f);
  /* 分类页/列表页补充（晨雾柔光） */
  --wash-accent: rgba(109, 93, 231, 0.1);
  --wash-success: rgba(43, 179, 163, 0.14);
  --link-info: #5a54d6;
  --grad-invite: linear-gradient(135deg, #d98e3f, #b8743f);
  --overlay-mask: rgba(43, 36, 64, 0.4);
  --modal-bg-2: #ffffff;
  --modal-fg: #2b2440;
  --shadow-soft: 0 8px 20px rgba(31, 36, 48, 0.06);
  /* 答题页补充（晨雾柔光） */
  --accent-grad-h: linear-gradient(90deg, #6d5de7, #b89af7);
  --wash-brand: rgba(109, 93, 231, 0.1);
  --wash-selected: rgba(109, 93, 231, 0.12);
  --modal-desc: #5b5470;
  --btn-ghost-bg: rgba(109, 93, 231, 0.1);
  --dot-idle: rgba(109, 93, 231, 0.18);
  /* 解锁页补充（晨雾柔光） */
  --wash-hint: rgba(109, 93, 231, 0.08);
  --text-hint: #5a54d6;
  --wash-brand-2: rgba(109, 93, 231, 0.1);
  --text-2nd: #3a4150;
  --shadow-modal: 0 12px 32px rgba(43, 36, 64, 0.16);
  --text-accent-2: #b8743f;
  --radio-on: #6d5de7;
  --wash-accent-10: rgba(109, 93, 231, 0.1);
  /* 结果页（晨雾柔光） */
  --sk-surface: #ffffff;
  --sk-surface-2: #efecf7;
  --sk-line: rgba(43, 36, 64, 0.1);
  --sk-text: #2b2440;
  --sk-text-2: #5b5470;
  --sk-text-3: #8d87a3;
  --sk-ok: #1f9c8f;
  --sk-ok-wash: rgba(43, 179, 163, 0.12);
  --sk-ok-line: rgba(43, 179, 163, 0.4);
  --sk-warn: #b8743f;
  --sk-warn-wash: rgba(232, 163, 61, 0.14);
  --sk-warn-line: rgba(232, 163, 61, 0.4);
  --sk-shadow: 0 12px 32px rgba(43, 36, 64, 0.12);
  --sk-panel: rgba(109, 93, 231, 0.04);
  --sk-wash: rgba(109, 93, 231, 0.07);
  --sk-track: rgba(43, 36, 64, 0.1);
  --sk-card-b: #ffffff;
  --sk-foot: #efecf7;
  --sk-toast-bg: rgba(255, 255, 255, 0.96);
  --sk-pay-hover: linear-gradient(135deg, #e39a4c, #c58149);
}

/* ---------- 浅色皮肤：补丁层 ----------
   common.css 已 Token 化，此处只兜底两类漏网：
   1) 页面内联 style="background:#0a0a0f" 之类未走变量的写法（body/html 直接覆盖）；
   2) 次级页面 css 里沿用通用类名但硬编码深色的规则（高特异性覆盖，加载顺序无关）。 */
html[data-skin="softlight"] body {
  background: var(--bg-page) !important;
  color: var(--text-1);
}
html[data-skin="softlight"] .container {
  background: var(--bg-page) !important;
}
html[data-skin="softlight"] .page-header {
  background: var(--bg-page) !important;
}
html[data-skin="softlight"] .page-header-title {
  color: var(--text-1);
}
html[data-skin="softlight"] .back-btn {
  background: var(--bg-soft-hover);
  color: var(--text-1);
}
html[data-skin="softlight"] .bottom-tab-bar {
  background: var(--bg-card);
  border-top: 1px solid var(--border-2);
  box-shadow: var(--shadow-top);
}
html[data-skin="softlight"] .tab-item {
  color: var(--tab-inactive);
}
html[data-skin="softlight"] .tab-item.active {
  color: var(--accent);
}
html[data-skin="softlight"] .card {
  background: var(--bg-card);
  color: var(--text-1);
  box-shadow: var(--shadow-card);
}
html[data-skin="softlight"] .btn-gradient {
  background: var(--accent-grad);
  box-shadow: 0 4px 16px var(--accent-glow);
  color: #fff;
}
html[data-skin="softlight"] input[type="password"] {
  width: 100%;
  height: 44px;
  background: var(--bg-soft);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 0 12px;
  font-size: 15px;
  color: var(--text-1);
  outline: none;
}

/* ---------- Token：墨金 ---------- */
html[data-skin="inkgold"][data-skin-aware] {
  --font-display: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --bg-page: #0d0f14;
  --bg-card: #171b24;
  --bg-card-2: #1d2230;
  --bg-soft: rgba(255, 255, 255, 0.045);
  --bg-soft-hover: rgba(216, 178, 110, 0.10);
  --border-1: rgba(216, 178, 110, 0.20);
  --border-2: rgba(216, 178, 110, 0.12);
  --text-1: #f2f0ea;
  --text-2: #a7a9b4;
  --text-3: #6b6e7a;
  --accent: #d8b26e;
  --accent-2: #e6c98f;
  --accent-grad: linear-gradient(135deg, #d8b26e, #e6c98f);
  --accent-glow: rgba(216, 178, 110, 0.22);
  --brand-1: #d8b26e;
  --brand-2: #7fc4ad;
  --brand-grad: linear-gradient(120deg, #d8b26e, #7fc4ad);
  --success: #7fc4ad;
  --warning: #d8b26e;
  --danger: #e26d5a;
  --tab-inactive: #6b6e7a;
  --shadow-top: 0 -2px 12px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.34);
  --scroll-thumb: rgba(216, 178, 110, 0.25);
  --scroll-thumb-hover: rgba(216, 178, 110, 0.42);
  --overlay: rgba(5, 6, 10, 0.56);
  --text-mute: #a7a9b4;
  --text-soft: #c6c3b8;
  --hairline: rgba(216, 178, 110, 0.16);
  --hairline-2: rgba(216, 178, 110, 0.20);
  --card-hover: #1d2230;
  --surface: #14171f;
  --surface-2: #1d2230;
  --modal-bg: #1d2230;
  --grad-success: linear-gradient(135deg, #7fc4ad, #5fa48d);
  --grad-success-hover: linear-gradient(135deg, #8fd0ba, #6fb49c);
  --grad-teal: linear-gradient(135deg, #7fc4ad, #5fa48d);
  --grad-warm: linear-gradient(135deg, #d8b26e, #b98b4e);
  --grad-warm-hover: linear-gradient(135deg, #e6c98f, #cda165);
  --grad-pay: linear-gradient(135deg, #d8b26e, #b98b4e);
  --text-modal: #a7a9b4;
  --chip-bg: rgba(216, 178, 110, 0.12);
  --connector: rgba(216, 178, 110, 0.36);
  --overlay-strong: rgba(5, 6, 10, 0.68);
  --text-arrow: #8b8fa0;
  --modal-btn-border: rgba(216, 178, 110, 0.26);
  --cat-wash-1: linear-gradient(135deg, rgba(216, 178, 110, 0.15), rgba(230, 201, 143, 0.07));
  --cat-wash-2: linear-gradient(135deg, rgba(127, 196, 173, 0.12), rgba(95, 164, 141, 0.07));
  --cat-wash-3: linear-gradient(135deg, rgba(226, 109, 90, 0.12), rgba(216, 178, 110, 0.07));
  --cat-wash-4: linear-gradient(135deg, rgba(216, 178, 110, 0.13), rgba(127, 196, 173, 0.07));
  --cat-icon-1: linear-gradient(135deg, #d8b26e, #e6c98f);
  --cat-icon-2: linear-gradient(135deg, #7fc4ad, #5fa48d);
  --cat-icon-3: linear-gradient(135deg, #e26d5a, #d8b26e);
  --cat-icon-3-fg: #14171f;
  --cat-icon-4: linear-gradient(135deg, #d8b26e, #7fc4ad);
  --wash-accent: rgba(216, 178, 110, 0.13);
  --wash-success: rgba(127, 196, 173, 0.13);
  --link-info: #8fc7ff;
  --grad-invite: linear-gradient(135deg, #d8b26e, #b98b4e);
  --overlay-mask: rgba(5, 6, 10, 0.62);
  --modal-bg-2: #171b24;
  --modal-fg: #f2f0ea;
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.25);
  --accent-grad-h: linear-gradient(90deg, #d8b26e, #e6c98f);
  --wash-brand: rgba(216, 178, 110, 0.12);
  --wash-selected: rgba(216, 178, 110, 0.18);
  --modal-desc: #a7a9b4;
  --btn-ghost-bg: rgba(255, 255, 255, 0.07);
  --dot-idle: rgba(216, 178, 110, 0.24);
  --wash-hint: rgba(216, 178, 110, 0.10);
  --text-hint: #e6c98f;
  --wash-brand-2: rgba(216, 178, 110, 0.08);
  --text-2nd: #c6c3b8;
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.48);
  --text-accent-2: #e6c98f;
  --radio-on: #d8b26e;
  --wash-accent-10: rgba(216, 178, 110, 0.09);
  --sk-surface: #171b24;
  --sk-surface-2: #1d2230;
  --sk-line: rgba(216, 178, 110, 0.20);
  --sk-text: #f2f0ea;
  --sk-text-2: rgba(242, 240, 234, 0.70);
  --sk-text-3: rgba(242, 240, 234, 0.44);
  --sk-ok: #7fc4ad;
  --sk-ok-wash: rgba(127, 196, 173, 0.12);
  --sk-ok-line: rgba(127, 196, 173, 0.38);
  --sk-warn: #d8b26e;
  --sk-warn-wash: rgba(216, 178, 110, 0.14);
  --sk-warn-line: rgba(216, 178, 110, 0.40);
  --sk-shadow: 0 18px 50px rgba(0, 0, 0, 0.48);
  --sk-panel: rgba(255, 255, 255, 0.03);
  --sk-wash: rgba(216, 178, 110, 0.08);
  --sk-track: rgba(255, 255, 255, 0.08);
  --sk-card-b: #10131a;
  --sk-foot: #10131a;
  --sk-toast-bg: rgba(20, 23, 31, 0.96);
  --sk-pay-hover: linear-gradient(135deg, #e6c98f, #cda165);
}

/* 墨金补丁：标题衬线化 + 环境光 + 硬编码文案颜色兜底 */
html[data-skin="inkgold"][data-skin-aware] body {
  background: #05060a;
  background-image: radial-gradient(720px 520px at 88% -8%, rgba(216, 178, 110, 0.10), transparent 64%);
}
html[data-skin="inkgold"][data-skin-aware] .page-header-title,
html[data-skin="inkgold"][data-skin-aware] .home-title,
html[data-skin="inkgold"][data-skin-aware] .section-title-sm,
html[data-skin="inkgold"][data-skin-aware] .trending-title-sm,
html[data-skin="inkgold"][data-skin-aware] .detail-section-title,
html[data-skin="inkgold"][data-skin-aware] .version-title,
html[data-skin="inkgold"][data-skin-aware] .answer-question-text,
html[data-skin="inkgold"][data-skin-aware] .profile-name,
html[data-skin="inkgold"][data-skin-aware] .profile-section-title {
  font-family: var(--font-display);
  font-weight: 700;
}
html[data-skin="inkgold"][data-skin-aware] .detail-section-text { color: var(--text-2nd); }
html[data-skin="inkgold"][data-skin-aware] .version-insight-desc { color: var(--text-soft); }
html[data-skin="inkgold"][data-skin-aware] .version-insight-feature { color: var(--text-hint); }

/* ---------- Token：年轻时尚 ---------- */
html[data-skin="youngpop"][data-skin-aware] {
  --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bg-page: #f2efe6;
  --bg-card: #fffdf7;
  --bg-card-2: #ffffff;
  --bg-soft: rgba(20, 20, 26, 0.05);
  --bg-soft-hover: rgba(20, 20, 26, 0.10);
  --border-1: #14141a;
  --border-2: rgba(20, 20, 26, 0.14);
  --text-1: #14141a;
  --text-2: #4a4a52;
  --text-3: #8a8a92;
  --accent: #7b5cff;
  --accent-2: #ff5ca8;
  --accent-grad: linear-gradient(100deg, #7b5cff, #ff5ca8);
  --accent-glow: rgba(123, 92, 255, 0.24);
  --brand-1: #7b5cff;
  --brand-2: #ff5ca8;
  --brand-grad: linear-gradient(100deg, #7b5cff, #ff5ca8);
  --success: #16a34a;
  --warning: #e0a800;
  --danger: #ff4d6d;
  --tab-inactive: #8a8a92;
  --shadow-top: 0 -2px 12px rgba(20, 20, 26, 0.08);
  --shadow-card: 4px 4px 0 #14141a;
  --scroll-thumb: rgba(20, 20, 26, 0.22);
  --scroll-thumb-hover: rgba(20, 20, 26, 0.36);
  --overlay: rgba(20, 20, 26, 0.42);
  --text-mute: #8a8a92;
  --text-soft: #4a4a52;
  --hairline: rgba(20, 20, 26, 0.10);
  --hairline-2: rgba(20, 20, 26, 0.14);
  --card-hover: #fffdf7;
  --surface: #fffdf7;
  --surface-2: #f7f4ea;
  --modal-bg: #fffdf7;
  --grad-success: linear-gradient(100deg, #c8f542, #8bd450);
  --grad-success-hover: linear-gradient(100deg, #d3ff57, #97df5c);
  --grad-teal: linear-gradient(100deg, #3fd8e8, #31b7c8);
  --grad-warm: linear-gradient(100deg, #ff5ca8, #ff8f6b);
  --grad-warm-hover: linear-gradient(100deg, #ff77b9, #ffa184);
  --grad-pay: linear-gradient(100deg, #7b5cff, #ff5ca8);
  --text-modal: #4a4a52;
  --chip-bg: rgba(20, 20, 26, 0.06);
  --connector: rgba(20, 20, 26, 0.30);
  --overlay-strong: rgba(20, 20, 26, 0.48);
  --text-arrow: #8a8a92;
  --modal-btn-border: rgba(20, 20, 26, 0.22);
  --cat-wash-1: linear-gradient(135deg, rgba(123, 92, 255, 0.12), rgba(255, 92, 168, 0.08));
  --cat-wash-2: linear-gradient(135deg, rgba(63, 216, 232, 0.13), rgba(22, 163, 74, 0.07));
  --cat-wash-3: linear-gradient(135deg, rgba(255, 210, 63, 0.18), rgba(255, 143, 107, 0.08));
  --cat-wash-4: linear-gradient(135deg, rgba(200, 245, 66, 0.16), rgba(63, 216, 232, 0.08));
  --cat-icon-1: linear-gradient(135deg, #7b5cff, #ff5ca8);
  --cat-icon-2: linear-gradient(135deg, #3fd8e8, #31b7c8);
  --cat-icon-3: linear-gradient(135deg, #ffd23f, #ff8f6b);
  --cat-icon-3-fg: #14141a;
  --cat-icon-4: linear-gradient(135deg, #c8f542, #3fd8e8);
  --wash-accent: rgba(123, 92, 255, 0.10);
  --wash-success: rgba(22, 163, 74, 0.10);
  --link-info: #4a54d6;
  --grad-invite: linear-gradient(135deg, #ff5ca8, #ff8f6b);
  --overlay-mask: rgba(20, 20, 26, 0.46);
  --modal-bg-2: #fffdf7;
  --modal-fg: #14141a;
  --shadow-soft: 4px 4px 0 #14141a;
  --accent-grad-h: linear-gradient(90deg, #7b5cff, #ff5ca8);
  --wash-brand: rgba(123, 92, 255, 0.10);
  --wash-selected: rgba(200, 245, 66, 0.24);
  --modal-desc: #4a4a52;
  --btn-ghost-bg: rgba(20, 20, 26, 0.08);
  --dot-idle: rgba(20, 20, 26, 0.18);
  --wash-hint: rgba(123, 92, 255, 0.08);
  --text-hint: #7b5cff;
  --wash-brand-2: rgba(123, 92, 255, 0.08);
  --text-2nd: #4a4a52;
  --shadow-modal: 7px 7px 0 #14141a;
  --text-accent-2: #ff5ca8;
  --radio-on: #7b5cff;
  --wash-accent-10: rgba(123, 92, 255, 0.08);
  --sk-surface: #fffdf7;
  --sk-surface-2: #f7f4ea;
  --sk-line: rgba(20, 20, 26, 0.14);
  --sk-text: #14141a;
  --sk-text-2: #4a4a52;
  --sk-text-3: #8a8a92;
  --sk-ok: #16a34a;
  --sk-ok-wash: rgba(22, 163, 74, 0.10);
  --sk-ok-line: rgba(22, 163, 74, 0.36);
  --sk-warn: #e0a800;
  --sk-warn-wash: rgba(255, 210, 63, 0.18);
  --sk-warn-line: rgba(224, 168, 0, 0.36);
  --sk-shadow: 7px 7px 0 #14141a;
  --sk-panel: #fffdf7;
  --sk-wash: rgba(123, 92, 255, 0.07);
  --sk-track: rgba(20, 20, 26, 0.10);
  --sk-card-b: #fffdf7;
  --sk-foot: #f7f4ea;
  --sk-toast-bg: rgba(255, 253, 247, 0.96);
  --sk-pay-hover: linear-gradient(100deg, #8f74ff, #ff77b9);
}

/* 年轻时尚补丁：点阵底、卡片硬投影、主操作黑描边 */
html[data-skin="youngpop"][data-skin-aware] body {
  background: var(--bg-page) !important;
  background-image: radial-gradient(rgba(20, 20, 26, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text-1);
}
html[data-skin="youngpop"][data-skin-aware] .container,
html[data-skin="youngpop"][data-skin-aware] .page-header {
  background: var(--bg-page) !important;
}
html[data-skin="youngpop"][data-skin-aware] .card,
html[data-skin="youngpop"][data-skin-aware] .profile-stat,
html[data-skin="youngpop"][data-skin-aware] .result-card,
html[data-skin="youngpop"][data-skin-aware] .profile-menu,
html[data-skin="youngpop"][data-skin-aware] .test-card,
html[data-skin="youngpop"][data-skin-aware] .trending-card,
html[data-skin="youngpop"][data-skin-aware] .version-card,
html[data-skin="youngpop"][data-skin-aware] .detail-section-content,
html[data-skin="youngpop"][data-skin-aware] .answer-option,
html[data-skin="youngpop"][data-skin-aware] .likert-item,
html[data-skin="youngpop"][data-skin-aware] .modal-card {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-1);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--border-1);
}
html[data-skin="youngpop"][data-skin-aware] .answer-option.selected,
html[data-skin="youngpop"][data-skin-aware] .likert-item.selected {
  background: var(--wash-selected) !important;
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--border-1);
}
html[data-skin="youngpop"][data-skin-aware] .type-tab.active,
html[data-skin="youngpop"][data-skin-aware] .version-tab.active,
html[data-skin="youngpop"][data-skin-aware] .filter-tab.active,
html[data-skin="youngpop"][data-skin-aware] .btn-gradient,
html[data-skin="youngpop"][data-skin-aware] .answer-next-btn,
html[data-skin="youngpop"][data-skin-aware] .version-btn,
html[data-skin="youngpop"][data-skin-aware] .modal-btn {
  background: var(--accent-grad);
  color: #ffffff;
  border: 2px solid var(--border-1);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--border-1);
}
html[data-skin="youngpop"][data-skin-aware] .banner-card,
html[data-skin="youngpop"][data-skin-aware] .detail-type-badge,
html[data-skin="youngpop"][data-skin-aware] .profile-avatar,
html[data-skin="youngpop"][data-skin-aware] .profile-menu-icon,
html[data-skin="youngpop"][data-skin-aware] .result-card-type {
  border: 2px solid var(--border-1);
  box-shadow: 4px 4px 0 var(--border-1);
}
html[data-skin="youngpop"][data-skin-aware] .profile-menu-icon {
  background: var(--grad-teal);
}
html[data-skin="youngpop"][data-skin-aware] .result-card-btn,
html[data-skin="youngpop"][data-skin-aware] .result-card-btn-advice-tab,
html[data-skin="youngpop"][data-skin-aware] .result-card-unlock-hint {
  background: var(--grad-success);
  color: var(--text-1);
  border: 2px solid var(--border-1);
  box-shadow: 2px 2px 0 var(--border-1);
}
html[data-skin="youngpop"][data-skin-aware] .result-card-btn-match {
  background: var(--grad-warm);
  color: #ffffff;
}
html[data-skin="youngpop"][data-skin-aware] .answer-option-badge.d,
html[data-skin="youngpop"][data-skin-aware] .answer-option-badge.e {
  background: var(--cat-icon-3);
  color: var(--cat-icon-3-fg);
}
html[data-skin="youngpop"][data-skin-aware] .detail-section-text,
html[data-skin="youngpop"][data-skin-aware] .version-insight-desc,
html[data-skin="youngpop"][data-skin-aware] .version-insight-feature {
  color: var(--text-2nd);
}