:root {
  color-scheme: dark;

  /* 背景层次 */
  --bg-app: #08080c;
  --bg-body: #0c0d12;
  --bg-rail: #0c0c12;
  --bg-sidebar: #0f0f16;
  --bg-panel: #14141d;
  --bg-panel-2: #1a1a25;
  --bg-input: #1c1c28;
  --bg-hover: rgba(255, 255, 255, 0.045);
  --bg-active: rgba(139, 122, 255, 0.14);
  --bg-elevated: rgba(26, 26, 36, 0.96);
  --bg-mask: rgba(6, 6, 12, 0.72);
  --bg-code: rgba(0, 0, 0, 0.35);
  --bg-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));

  /* 叠层（暗面 = 白色透明；亮面覆写为深色透明） */
  --overlay-02: rgba(255, 255, 255, 0.02);
  --overlay-03: rgba(255, 255, 255, 0.03);
  --overlay-04: rgba(255, 255, 255, 0.04);
  --overlay-05: rgba(255, 255, 255, 0.05);
  --overlay-06: rgba(255, 255, 255, 0.06);
  --overlay-08: rgba(255, 255, 255, 0.08);
  --overlay-10: rgba(255, 255, 255, 0.1);
  --overlay-12: rgba(255, 255, 255, 0.12);
  --overlay-14: rgba(255, 255, 255, 0.14);
  --overlay-16: rgba(255, 255, 255, 0.16);
  --overlay-18: rgba(255, 255, 255, 0.18);
  --overlay-20: rgba(255, 255, 255, 0.2);
  --overlay-25: rgba(255, 255, 255, 0.25);
  --overlay-30: rgba(255, 255, 255, 0.3);
  --overlay-40: rgba(255, 255, 255, 0.4);
  --overlay-45: rgba(255, 255, 255, 0.45);
  --overlay-50: rgba(255, 255, 255, 0.5);
  --overlay-55: rgba(255, 255, 255, 0.55);
  --overlay-60: rgba(255, 255, 255, 0.6);
  --overlay-65: rgba(255, 255, 255, 0.65);
  --overlay-70: rgba(255, 255, 255, 0.7);
  --overlay-75: rgba(255, 255, 255, 0.75);
  --overlay-80: rgba(255, 255, 255, 0.8);
  --overlay-82: rgba(255, 255, 255, 0.82);
  --overlay-85: rgba(255, 255, 255, 0.85);
  --overlay-90: rgba(255, 255, 255, 0.9);

  /* 黑色叠层（阴影/暗底） */
  --shade-20: rgba(0, 0, 0, 0.2);
  --shade-30: rgba(0, 0, 0, 0.3);
  --shade-35: rgba(0, 0, 0, 0.35);
  --shade-40: rgba(0, 0, 0, 0.4);
  --shade-45: rgba(0, 0, 0, 0.45);
  --shade-50: rgba(0, 0, 0, 0.5);
  --shade-55: rgba(0, 0, 0, 0.55);
  --shade-60: rgba(0, 0, 0, 0.6);

  /* 边框 */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* 文本 */
  --text-primary: #f2f2f7;
  --text-secondary: #a8a8b8;
  --text-muted: #6c6c7c;
  --text-on-accent: #ffffff;

  /* 品牌色：紫罗兰 → 青 的签名渐变 */
  --accent: #8b7aff;
  --accent-2: #22d3ee;
  --accent-soft: rgba(139, 122, 255, 0.16);
  --brand-gradient: linear-gradient(135deg, #8b7aff 0%, #6366f1 45%, #22d3ee 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(139, 122, 255, 0.18), rgba(34, 211, 238, 0.12));

  /* 状态 */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  /* 彩色强调文字（暗面=浅 pastel，亮面=深色可读） */
  --tint-amber: #fde68a;
  --tint-amber-strong: #fcd34d;
  --tint-pink: #fce7f3;
  --tint-pink-strong: #fda4af;
  --tint-indigo: #c7d2fe;
  --tint-orange: #fdba74;

  /* 毛玻璃卡片底（充值档位等） */
  --glass-card: rgba(8, 7, 14, 0.6);

  /* 圆角 & 阴影 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(139, 122, 255, 0.25), 0 8px 40px rgba(99, 102, 241, 0.18);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.45);

  /* 滚动条 */
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.18);

  /* 氛围光（body 背景径向渐变） */
  --glow-1: rgba(99, 102, 241, 0.12);
  --glow-2: rgba(34, 211, 238, 0.08);

  /* meta / PWA */
  --theme-color: #0c0d12;

  /* 刘海屏安全区（需 index.html viewport-fit=cover） */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========== 溜之亮面 ========== */
html[data-theme='light'] {
  color-scheme: light;

  --bg-app: #f4f4f9;
  --bg-body: #f0f0f6;
  --bg-rail: #e9e9f1;
  --bg-sidebar: #eeeef5;
  --bg-panel: #ffffff;
  --bg-panel-2: #f4f4f9;
  --bg-input: #ffffff;
  --bg-hover: rgba(20, 20, 50, 0.05);
  --bg-active: rgba(109, 92, 230, 0.12);
  --bg-elevated: rgba(255, 255, 255, 0.96);
  --bg-mask: rgba(20, 20, 40, 0.45);
  --bg-code: rgba(20, 20, 50, 0.06);
  --bg-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));

  --overlay-02: rgba(20, 20, 50, 0.02);
  --overlay-03: rgba(20, 20, 50, 0.03);
  --overlay-04: rgba(20, 20, 50, 0.04);
  --overlay-05: rgba(20, 20, 50, 0.05);
  --overlay-06: rgba(20, 20, 50, 0.06);
  --overlay-08: rgba(20, 20, 50, 0.08);
  --overlay-10: rgba(20, 20, 50, 0.1);
  --overlay-12: rgba(20, 20, 50, 0.12);
  --overlay-14: rgba(20, 20, 50, 0.14);
  --overlay-16: rgba(20, 20, 50, 0.16);
  --overlay-18: rgba(20, 20, 50, 0.18);
  --overlay-20: rgba(20, 20, 50, 0.2);
  --overlay-25: rgba(20, 20, 50, 0.25);
  --overlay-30: rgba(20, 20, 50, 0.3);
  --overlay-40: rgba(20, 20, 50, 0.4);
  --overlay-45: rgba(20, 20, 50, 0.45);
  --overlay-50: rgba(20, 20, 50, 0.5);
  --overlay-55: rgba(20, 20, 50, 0.55);
  --overlay-60: rgba(20, 20, 50, 0.6);
  --overlay-65: rgba(20, 20, 50, 0.65);
  --overlay-70: rgba(20, 20, 50, 0.7);
  --overlay-75: rgba(20, 20, 50, 0.75);
  --overlay-80: rgba(20, 20, 50, 0.8);
  --overlay-82: rgba(20, 20, 50, 0.82);
  --overlay-85: rgba(20, 20, 50, 0.85);
  --overlay-90: rgba(20, 20, 50, 0.9);

  --shade-20: rgba(30, 30, 60, 0.08);
  --shade-30: rgba(30, 30, 60, 0.1);
  --shade-35: rgba(30, 30, 60, 0.12);
  --shade-40: rgba(30, 30, 60, 0.14);
  --shade-45: rgba(30, 30, 60, 0.16);
  --shade-50: rgba(30, 30, 60, 0.18);
  --shade-55: rgba(30, 30, 60, 0.22);
  --shade-60: rgba(30, 30, 60, 0.28);

  --border-subtle: rgba(20, 20, 50, 0.09);
  --border-strong: rgba(20, 20, 50, 0.16);

  --text-primary: #1b1b26;
  --text-secondary: #565668;
  --text-muted: #8e8e9e;
  --text-on-accent: #ffffff;

  --accent: #6d5ce6;
  --accent-2: #0891b2;
  --accent-soft: rgba(109, 92, 230, 0.14);
  --brand-gradient: linear-gradient(135deg, #6d5ce6 0%, #6366f1 45%, #0891b2 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(109, 92, 230, 0.14), rgba(8, 145, 178, 0.1));

  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;

  --tint-amber: #a16207;
  --tint-amber-strong: #92400e;
  --tint-pink: #be185d;
  --tint-pink-strong: #e11d48;
  --tint-indigo: #4f46e5;
  --tint-orange: #c2410c;

  --glass-card: rgba(255, 255, 255, 0.82);

  --shadow-soft: 0 8px 30px rgba(30, 30, 60, 0.12);
  --shadow-glow: 0 0 0 1px rgba(109, 92, 230, 0.22), 0 8px 40px rgba(99, 102, 241, 0.12);
  --shadow-elevated: 0 16px 48px rgba(30, 30, 60, 0.16);

  --scrollbar-thumb: rgba(20, 20, 50, 0.15);
  --scrollbar-thumb-hover: rgba(20, 20, 50, 0.28);

  --glow-1: rgba(109, 92, 230, 0.1);
  --glow-2: rgba(8, 145, 178, 0.07);

  --theme-color: #f4f4f9;
}

/* 切换瞬间柔和过渡（由 useTheme 临时挂 class） */
html.theme-animating,
html.theme-animating *,
html.theme-animating *::before,
html.theme-animating *::after {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    fill 0.25s ease,
    stroke 0.25s ease !important;
}