/* ==========================================================================
   ATLAS · 皮肤系统
   :root 为默认「极夜 Aurora」，以下为 4 套替补皮肤。
   只覆盖语义变量 + 少量质感差异，结构布局完全复用 app.css。
   ========================================================================== */

/* --------------------------------------------------------------------------
   02 · 晨光白 Frost —— 明亮冷调、轻柔阴影、适合白天办公
   -------------------------------------------------------------------------- */
:root[data-theme="frost"] {
  color-scheme: light;
  --ink: #f2f6fd;
  --surface: rgba(255,255,255,.86);
  --surface-hi: rgba(255,255,255,.96);
  --surface-low: rgba(255,255,255,.62);
  --line: rgba(24,47,88,.12);
  --line-strong: rgba(24,47,88,.22);
  --line-hover: rgba(24,47,88,.36);
  --text: #14203a;
  --muted: #4d6081;
  --faint: #7b8bab;
  --violet: #5b5bd6;
  --cyan: #0d8fa8;
  --amber: #c07a10;
  --ok: #12855d;
  --warn: #b8770e;
  --danger: #d2455f;
  --ok-ink: #0f7a54;
  --warn-ink: #a6690a;
  --danger-ink: #b83350;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 48px rgba(28,48,84,.14);
  --bg-image:
    radial-gradient(1000px 620px at 6% -12%, rgba(96,126,232,.20), transparent 62%),
    radial-gradient(880px 560px at 98% 0%, rgba(46,170,190,.16), transparent 62%),
    linear-gradient(180deg, #f7faff 0%, #eef4fb 48%, #e8f0fa 100%);
  --grid-line: rgba(35,70,120,.045);
  --grid-size: 52px;
  --grain-opacity: .015;
  --glow: .09;
  --glow-hover: .20;
  --topbar-bg: rgba(255,255,255,.80);
  --hover-bg: rgba(24,47,88,.05);
  --ghost-bg: rgba(255,255,255,.72);
  --ghost-hover: rgba(24,47,88,.07);
  --active-bg: rgba(91,91,214,.12);
  --active-ring: rgba(91,91,214,.26);
  --chip-bg: rgba(24,47,88,.04);
  --icon-bg: rgba(24,47,88,.04);
  --icon-bg-hover: rgba(24,47,88,.09);
  --avatar-grad: linear-gradient(135deg, #5b5bd6, #0d8fa8);
  --on-accent: #ffffff;
  --btn-grad: linear-gradient(120deg, #6f6ee6 0%, #5b5bd6 46%, #128fa8 100%);
  --btn-shadow: 0 10px 26px rgba(65,80,190,.24);
  --btn-shadow-hover: 0 16px 34px rgba(65,80,190,.32);
  --btn-spinner: rgba(255,255,255,.4);
  --danger-bg: rgba(210,69,95,.10);
  --danger-bg-hover: rgba(210,69,95,.18);
  --danger-line: rgba(210,69,95,.42);
  --text-grad: linear-gradient(100deg, #3f47b8 0%, #2f78c4 48%, #0d8fa8 100%);
  --hero-rule: linear-gradient(90deg, rgba(91,91,214,.55), rgba(13,143,168,.22), transparent 74%);
  --meter-grad: linear-gradient(90deg, #0d8fa8, #5b5bd6);
  --track: rgba(24,47,88,.09);
  --selection: rgba(91,91,214,.22);
  --selection-ink: #14203a;
  --accent-soft-bg: rgba(91,91,214,.12);
  --accent-line: rgba(91,91,214,.28);
  --accent-ink: #4442b6;
  --bt-grad: linear-gradient(115deg, rgba(91,91,214,.12), rgba(13,143,168,.06));
  --bt-grad-hover: linear-gradient(115deg, rgba(91,91,214,.22), rgba(13,143,168,.12));
  --card-shadow: 0 18px 40px rgba(28,48,84,.18);
  --dashed-bg: rgba(24,47,88,.02);
  --orbit-line: rgba(91,91,214,.22);
  --orbit-line-2: rgba(13,143,168,.20);
  --orbit-core: radial-gradient(circle, rgba(91,91,214,.28), transparent 70%);
  --input-bg: rgba(255,255,255,.90);
  --input-placeholder: #98a7c2;
  --input-focus-ring: rgba(91,91,214,.16);
  --inset-bg: rgba(24,47,88,.035);
  --ok-surface: rgba(18,133,93,.08);
  --warn-surface: rgba(184,119,14,.09);
  --danger-surface: rgba(210,69,95,.09);
  --ok-bg: rgba(18,133,93,.10);
  --ok-line: rgba(18,133,93,.30);
  --warn-bg: rgba(184,119,14,.11);
  --warn-line: rgba(184,119,14,.32);
  --danger-soft-bg: rgba(210,69,95,.12);
  --form-error-bg: rgba(210,69,95,.10);
  --form-error-line: rgba(210,69,95,.36);
  --form-error-ink: #a52c48;
  --backdrop: rgba(18,32,58,.42);
  --modal-bg: #ffffff;
  --modal-shadow: 0 30px 80px rgba(20,38,72,.28);
  --swatch-ring: #14203a;
  --swatch-ring-shadow: rgba(20,32,58,.18);
  --switch-track: rgba(24,47,88,.14);
  --switch-knob: #ffffff;
  --switch-on: rgba(91,91,214,.85);
  --switch-on-line: rgba(91,91,214,.9);
  --switch-knob-on: #ffffff;
  --toast-bg: #ffffff;
  --toast-error-bg: #fff2f4;
}

/* --------------------------------------------------------------------------
   03 · 霓虹终端 Neon —— 近黑底、青/品红荧光、直角、等宽数字
   -------------------------------------------------------------------------- */
:root[data-theme="neon"] {
  color-scheme: dark;
  --ink: #04070d;
  --surface: rgba(8,18,26,.82);
  --surface-hi: rgba(10,22,32,.94);
  --surface-low: rgba(6,14,22,.70);
  --line: rgba(0,240,190,.16);
  --line-strong: rgba(0,240,190,.34);
  --line-hover: rgba(0,240,190,.55);
  --text: #d8fff4;
  --muted: #7fb9ad;
  --faint: #4d857e;
  --violet: #ff4ecd;
  --cyan: #00f0be;
  --amber: #ffd23f;
  --ok: #00f0be;
  --warn: #ffd23f;
  --danger: #ff5470;
  --ok-ink: #00f0be;
  --warn-ink: #ffd23f;
  --danger-ink: #ff8fa2;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 0 0 1px rgba(0,240,190,.10), 0 18px 50px rgba(0,0,0,.60);
  --font-display: "JetBrains Mono", "Cascadia Code", Consolas, "Space Grotesk", monospace;
  --bg-image:
    radial-gradient(900px 520px at 12% -12%, rgba(255,78,205,.16), transparent 60%),
    radial-gradient(900px 600px at 92% 6%, rgba(0,240,190,.16), transparent 62%),
    linear-gradient(180deg, #04070d 0%, #05101a 55%, #03060b 100%);
  --grid-line: rgba(0,240,190,.055);
  --grid-size: 36px;
  --grain-opacity: .02;
  --glow: .14;
  --glow-hover: .34;
  --topbar-bg: rgba(4,12,18,.82);
  --hover-bg: rgba(0,240,190,.08);
  --ghost-bg: rgba(0,240,190,.05);
  --ghost-hover: rgba(0,240,190,.12);
  --active-bg: rgba(0,240,190,.12);
  --active-ring: rgba(0,240,190,.34);
  --chip-bg: rgba(0,240,190,.04);
  --icon-bg: rgba(0,240,190,.05);
  --icon-bg-hover: rgba(0,240,190,.12);
  --avatar-grad: linear-gradient(135deg, #ff4ecd, #00f0be);
  --on-accent: #03110e;
  --btn-grad: linear-gradient(120deg, #00f0be 0%, #28d8d0 48%, #ff4ecd 100%);
  --btn-shadow: 0 0 0 1px rgba(0,240,190,.45), 0 0 28px rgba(0,240,190,.26);
  --btn-shadow-hover: 0 0 0 1px rgba(0,240,190,.7), 0 0 38px rgba(0,240,190,.42);
  --btn-spinner: rgba(3,17,14,.35);
  --danger-bg: rgba(255,84,112,.14);
  --danger-bg-hover: rgba(255,84,112,.24);
  --danger-line: rgba(255,84,112,.5);
  --text-grad: linear-gradient(100deg, #00f0be 0%, #6ef0ff 44%, #ff4ecd 100%);
  --hero-rule: linear-gradient(90deg, rgba(0,240,190,.75), rgba(255,78,205,.32), transparent 74%);
  --meter-grad: linear-gradient(90deg, #00f0be, #ff4ecd);
  --track: rgba(0,240,190,.10);
  --selection: rgba(0,240,190,.32);
  --selection-ink: #04120f;
  --accent-soft-bg: rgba(0,240,190,.12);
  --accent-line: rgba(0,240,190,.34);
  --accent-ink: #7dffe0;
  --bt-grad: linear-gradient(115deg, rgba(0,240,190,.12), rgba(255,78,205,.07));
  --bt-grad-hover: linear-gradient(115deg, rgba(0,240,190,.24), rgba(255,78,205,.14));
  --card-shadow: 0 0 0 1px rgba(0,240,190,.22), 0 18px 44px rgba(0,0,0,.6);
  --dashed-bg: rgba(0,240,190,.025);
  --orbit-line: rgba(0,240,190,.26);
  --orbit-line-2: rgba(255,78,205,.24);
  --orbit-core: radial-gradient(circle, rgba(0,240,190,.45), transparent 70%);
  --input-bg: rgba(3,12,18,.78);
  --input-placeholder: #3d6f68;
  --input-focus-ring: rgba(0,240,190,.18);
  --inset-bg: rgba(2,9,14,.60);
  --ok-surface: rgba(0,240,190,.09);
  --warn-surface: rgba(255,210,63,.09);
  --danger-surface: rgba(255,84,112,.11);
  --ok-bg: rgba(0,240,190,.10);
  --ok-line: rgba(0,240,190,.32);
  --warn-bg: rgba(255,210,63,.11);
  --warn-line: rgba(255,210,63,.34);
  --danger-soft-bg: rgba(255,84,112,.14);
  --form-error-bg: rgba(255,84,112,.12);
  --form-error-line: rgba(255,84,112,.42);
  --form-error-ink: #ffb3bf;
  --backdrop: rgba(1,6,10,.82);
  --modal-bg: #08161f;
  --modal-shadow: 0 0 0 1px rgba(0,240,190,.22), 0 30px 80px rgba(0,0,0,.72);
  --swatch-ring: #00f0be;
  --swatch-ring-shadow: rgba(0,240,190,.22);
  --switch-track: rgba(0,240,190,.10);
  --switch-knob: #4d8f84;
  --switch-on: rgba(0,240,190,.55);
  --switch-on-line: rgba(0,240,190,.8);
  --switch-knob-on: #03110e;
  --toast-bg: #0a1c25;
  --toast-error-bg: #2a0e19;
}

/* --------------------------------------------------------------------------
   04 · 暮色 Ember —— 暖棕陶土、大圆角、无网格、杂志感衬线数字
   -------------------------------------------------------------------------- */
:root[data-theme="ember"] {
  color-scheme: dark;
  --ink: #1a1113;
  --surface: rgba(52,33,35,.76);
  --surface-hi: rgba(62,40,42,.92);
  --surface-low: rgba(42,26,28,.66);
  --line: rgba(240,197,158,.16);
  --line-strong: rgba(240,197,158,.30);
  --line-hover: rgba(240,197,158,.48);
  --text: #fbeedd;
  --muted: #d3b3a2;
  --faint: #a98878;
  --violet: #e88b5a;
  --cyan: #f0b56b;
  --amber: #ffc46b;
  --ok: #9ac48a;
  --warn: #f5b25c;
  --danger: #ef7a72;
  --ok-ink: #a8d49a;
  --warn-ink: #ffcc85;
  --danger-ink: #ffb0a8;
  --radius: 26px;
  --radius-sm: 16px;
  --shadow: 0 22px 56px rgba(20,8,10,.46);
  --font-display: Georgia, "Songti SC", "Noto SC", serif;
  --bg-image:
    radial-gradient(1000px 680px at 10% -12%, rgba(214,112,70,.30), transparent 64%),
    radial-gradient(900px 620px at 96% 4%, rgba(180,80,96,.22), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(120,64,44,.24), transparent 68%),
    linear-gradient(180deg, #241517 0%, #1d1217 48%, #160e12 100%);
  --grid-line: transparent;
  --grid-size: 58px;
  --grain-opacity: .06;
  --glow: .18;
  --glow-hover: .38;
  --topbar-bg: rgba(30,17,20,.74);
  --hover-bg: rgba(255,220,190,.07);
  --ghost-bg: rgba(255,220,190,.06);
  --ghost-hover: rgba(255,220,190,.12);
  --active-bg: rgba(232,139,90,.18);
  --active-ring: rgba(232,139,90,.34);
  --chip-bg: rgba(255,220,190,.04);
  --icon-bg: rgba(255,220,190,.05);
  --icon-bg-hover: rgba(255,220,190,.11);
  --avatar-grad: linear-gradient(135deg, #e88b5a, #f0b56b);
  --on-accent: #2a1412;
  --btn-grad: linear-gradient(120deg, #f6c58a 0%, #e88b5a 52%, #d46f72 100%);
  --btn-shadow: 0 12px 30px rgba(180,90,60,.28);
  --btn-shadow-hover: 0 18px 38px rgba(180,90,60,.40);
  --btn-spinner: rgba(42,20,18,.35);
  --danger-bg: rgba(239,122,114,.16);
  --danger-bg-hover: rgba(239,122,114,.26);
  --danger-line: rgba(239,122,114,.46);
  --text-grad: linear-gradient(100deg, #ffd7a1 0%, #f0a06a 48%, #e37f8e 100%);
  --hero-rule: linear-gradient(90deg, rgba(232,139,90,.68), rgba(240,181,107,.24), transparent 74%);
  --meter-grad: linear-gradient(90deg, #f0b56b, #e88b5a);
  --track: rgba(255,220,190,.09);
  --selection: rgba(232,139,90,.36);
  --selection-ink: #2a1412;
  --accent-soft-bg: rgba(232,139,90,.20);
  --accent-line: rgba(232,139,90,.34);
  --accent-ink: #ffd0a8;
  --bt-grad: linear-gradient(115deg, rgba(232,139,90,.16), rgba(212,111,114,.08));
  --bt-grad-hover: linear-gradient(115deg, rgba(232,139,90,.28), rgba(212,111,114,.16));
  --card-shadow: 0 20px 46px rgba(20,8,10,.52);
  --dashed-bg: rgba(255,220,190,.025);
  --orbit-line: rgba(232,139,90,.26);
  --orbit-line-2: rgba(240,181,107,.24);
  --orbit-core: radial-gradient(circle, rgba(232,139,90,.48), transparent 70%);
  --input-bg: rgba(28,16,18,.66);
  --input-placeholder: #8d6a5d;
  --input-focus-ring: rgba(232,139,90,.18);
  --inset-bg: rgba(28,16,18,.52);
  --ok-surface: rgba(154,196,138,.10);
  --warn-surface: rgba(245,178,92,.11);
  --danger-surface: rgba(239,122,114,.12);
  --ok-bg: rgba(154,196,138,.12);
  --ok-line: rgba(154,196,138,.30);
  --warn-bg: rgba(245,178,92,.13);
  --warn-line: rgba(245,178,92,.34);
  --danger-soft-bg: rgba(239,122,114,.16);
  --form-error-bg: rgba(239,122,114,.13);
  --form-error-line: rgba(239,122,114,.40);
  --form-error-ink: #ffc9c2;
  --backdrop: rgba(18,8,11,.78);
  --modal-bg: #2b1a1d;
  --modal-shadow: 0 30px 80px rgba(12,4,6,.68);
  --swatch-ring: #fbeedd;
  --swatch-ring-shadow: rgba(251,238,221,.18);
  --switch-track: rgba(255,220,190,.10);
  --switch-knob: #a98878;
  --switch-on: rgba(232,139,90,.60);
  --switch-on-line: rgba(232,139,90,.86);
  --switch-knob-on: #fff6ec;
  --toast-bg: #352124;
  --toast-error-bg: #42201f;
}

/* --------------------------------------------------------------------------
   05 · 纸感 Paper —— 米白纸、墨黑字、朱红点缀、无光晕、细线直角
   -------------------------------------------------------------------------- */
:root[data-theme="paper"] {
  color-scheme: light;
  --ink: #f4f1e9;
  --surface: rgba(255,253,247,.92);
  --surface-hi: rgba(255,254,250,.98);
  --surface-low: rgba(246,242,232,.72);
  --line: rgba(48,42,34,.16);
  --line-strong: rgba(48,42,34,.30);
  --line-hover: rgba(48,42,34,.48);
  --text: #26221c;
  --muted: #6b6153;
  --faint: #968b79;
  --violet: #b4432f;
  --cyan: #3f6b63;
  --amber: #b8842c;
  --ok: #3f6b63;
  --warn: #b8842c;
  --danger: #b4432f;
  --ok-ink: #356055;
  --warn-ink: #96691c;
  --danger-ink: #a63a29;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 8px 26px rgba(60,50,36,.12);
  --font-display: Georgia, "Songti SC", "Noto SC", serif;
  --bg-image:
    radial-gradient(900px 600px at 10% -10%, rgba(210,190,155,.22), transparent 62%),
    linear-gradient(180deg, #f7f4ec 0%, #f2eee4 60%, #ece7db 100%);
  --grid-line: transparent;
  --grid-size: 58px;
  --grain-opacity: .03;
  --glow: 0;
  --glow-hover: 0;
  --topbar-bg: rgba(247,244,236,.92);
  --hover-bg: rgba(48,42,34,.05);
  --ghost-bg: rgba(255,253,247,.70);
  --ghost-hover: rgba(48,42,34,.07);
  --active-bg: rgba(180,67,47,.10);
  --active-ring: rgba(180,67,47,.26);
  --chip-bg: rgba(48,42,34,.035);
  --icon-bg: rgba(48,42,34,.035);
  --icon-bg-hover: rgba(48,42,34,.08);
  --avatar-grad: linear-gradient(135deg, #b4432f, #3f6b63);
  --on-accent: #fffaf0;
  --btn-grad: linear-gradient(120deg, #b4432f 0%, #96372a 100%);
  --btn-shadow: none;
  --btn-shadow-hover: 0 6px 18px rgba(150,55,42,.22);
  --btn-spinner: rgba(255,250,240,.4);
  --danger-bg: rgba(180,67,47,.09);
  --danger-bg-hover: rgba(180,67,47,.16);
  --danger-line: rgba(180,67,47,.40);
  --text-grad: linear-gradient(100deg, #26221c 0%, #7d3a2c 56%, #b4432f 100%);
  --hero-rule: linear-gradient(90deg, rgba(180,67,47,.62), rgba(63,107,99,.18), transparent 74%);
  --meter-grad: linear-gradient(90deg, #3f6b63, #b4432f);
  --track: rgba(48,42,34,.09);
  --selection: rgba(180,67,47,.20);
  --selection-ink: #26221c;
  --accent-soft-bg: rgba(180,67,47,.10);
  --accent-line: rgba(180,67,47,.28);
  --accent-ink: #96372a;
  --bt-grad: linear-gradient(115deg, rgba(180,67,47,.08), rgba(63,107,99,.05));
  --bt-grad-hover: linear-gradient(115deg, rgba(180,67,47,.16), rgba(63,107,99,.10));
  --card-shadow: 0 10px 24px rgba(60,50,36,.14);
  --dashed-bg: rgba(48,42,34,.015);
  --orbit-line: rgba(180,67,47,.20);
  --orbit-line-2: rgba(63,107,99,.18);
  --orbit-core: radial-gradient(circle, rgba(180,67,47,.20), transparent 70%);
  --input-bg: rgba(255,254,250,.90);
  --input-placeholder: #a89d8b;
  --input-focus-ring: rgba(180,67,47,.14);
  --inset-bg: rgba(48,42,34,.035);
  --ok-surface: rgba(63,107,99,.07);
  --warn-surface: rgba(184,132,44,.09);
  --danger-surface: rgba(180,67,47,.08);
  --ok-bg: rgba(63,107,99,.10);
  --ok-line: rgba(63,107,99,.28);
  --warn-bg: rgba(184,132,44,.11);
  --warn-line: rgba(184,132,44,.30);
  --danger-soft-bg: rgba(180,67,47,.10);
  --form-error-bg: rgba(180,67,47,.08);
  --form-error-line: rgba(180,67,47,.34);
  --form-error-ink: #8b3223;
  --backdrop: rgba(38,34,28,.42);
  --modal-bg: #fffdf7;
  --modal-shadow: 0 20px 54px rgba(50,42,30,.24);
  --swatch-ring: #26221c;
  --swatch-ring-shadow: rgba(38,34,28,.18);
  --switch-track: rgba(48,42,34,.13);
  --switch-knob: #fffdf7;
  --switch-on: rgba(180,67,47,.82);
  --switch-on-line: rgba(180,67,47,.9);
  --switch-knob-on: #fffdf7;
  --toast-bg: #fffdf7;
  --toast-error-bg: #fbeee9;
}

/* --------------------------------------------------------------------------
   质感差异（不只是换个颜色）
   -------------------------------------------------------------------------- */
/* 浅色皮肤：卡片图标用项目原色直接显示会更淡，压暗一档保证可读 */
:root[data-theme="frost"] .card-icon,
:root[data-theme="frost"] .cfg-swatch,
:root[data-theme="frost"] .card-arrow,
:root[data-theme="paper"] .card-icon,
:root[data-theme="paper"] .cfg-swatch,
:root[data-theme="paper"] .card-arrow {
  color: color-mix(in srgb, var(--card) 68%, #101828);
}

/* 霓虹：锐利直角 + 荧光描边 */
[data-theme="neon"] .project-card,
[data-theme="neon"] .metric-card,
[data-theme="neon"] .cfg-row { box-shadow: inset 0 0 0 1px rgba(0,240,190,.06); }
[data-theme="neon"] .project-card::before,
[data-theme="neon"] .auth-card::before { height: 2px; opacity: 1; }
[data-theme="neon"] .auth-card,
[data-theme="neon"] .modal,
[data-theme="neon"] .gate-card { border-radius: 8px; }
[data-theme="neon"] .topbar { border-bottom-color: rgba(0,240,190,.28); }
[data-theme="neon"] .kicker,
[data-theme="neon"] .auth-kicker { letter-spacing: .32em; }

/* 暮色：更柔和的卡片顶部装饰线 */
[data-theme="ember"] .metric-card::before,
[data-theme="ember"] .project-card::before { height: 2px; }
[data-theme="ember"] .grain { mix-blend-mode: soft-light; }
[data-theme="ember"] .topbar { border-bottom-color: rgba(240,181,107,.18); }

/* 纸感：去掉所有发光与模糊，回归纸面与细线 */
[data-theme="paper"] .card-glow { display: none; }
[data-theme="paper"] .metric-card::before { display: none; }
[data-theme="paper"] .project-card::before { height: 2px; opacity: .8; }
[data-theme="paper"] .grain { mix-blend-mode: multiply; }
[data-theme="paper"] .auth-card,
[data-theme="paper"] .modal,
[data-theme="paper"] .gate-card { border-radius: 6px; }
[data-theme="paper"] .auth-card::before { height: 2px; }
[data-theme="paper"] .topbar,
[data-theme="paper"] .hero-status,
[data-theme="paper"] .metric-card,
[data-theme="paper"] .project-card,
[data-theme="paper"] .auth-card {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="paper"] h1,
[data-theme="paper"] .section-title h2 { letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   皮肤切换器
   -------------------------------------------------------------------------- */
.theme-picker { position: relative; flex-shrink: 0; }
.theme-btn {
  min-height: 40px; display: inline-flex; align-items: center; gap: 9px;
  padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); background: var(--ghost-bg);
  border: 1px solid var(--line-strong);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.theme-btn:hover,
.theme-btn[aria-expanded="true"] {
  color: var(--text); background: var(--ghost-hover); border-color: var(--line-hover);
}
.theme-orb {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 10px rgba(0,0,0,.12);
}
.theme-btn svg { width: 15px; height: 15px; opacity: .65; }
.theme-pop {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 80;
  width: 300px; max-width: calc(100vw - 28px); padding: 12px;
  border-radius: var(--radius); background: var(--modal-bg);
  border: 1px solid var(--line-strong); box-shadow: var(--modal-shadow);
  animation: themePopIn .16s cubic-bezier(.2,.8,.2,1);
}
.theme-pop[hidden] { display: none; }
@keyframes themePopIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.theme-pop-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 6px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.theme-pop-head strong { font-size: 14px; }
.theme-pop-head span { color: var(--faint); font-size: 11px; }
.theme-opt {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 8px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text); text-align: left;
  transition: background .14s ease, border-color .14s ease;
}
.theme-opt:hover { background: var(--hover-bg); }
.theme-opt.is-active { background: var(--active-bg); border-color: var(--active-ring); }
.theme-preview {
  position: relative; flex-shrink: 0; width: 48px; height: 36px;
  border-radius: 7px; overflow: hidden;
  background: var(--pv-bg); border: 1px solid var(--line-strong);
}
.theme-preview::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--pv-a), transparent 72%); opacity: .72;
}
.theme-preview i { position: absolute; display: block; border-radius: 2px; }
.theme-preview i:nth-child(1) { left: 6px; top: 7px; width: 20px; height: 5px; background: var(--pv-a); }
.theme-preview i:nth-child(2) { left: 6px; top: 16px; width: 32px; height: 3px; background: var(--pv-ink); opacity: .55; }
.theme-preview i:nth-child(3) { left: 6px; top: 23px; width: 14px; height: 3px; background: var(--pv-b); }
.theme-opt-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.theme-opt-copy strong { font-size: 13.5px; font-weight: 700; }
.theme-opt-copy small { font-size: 11px; color: var(--muted); line-height: 1.4; }
.theme-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--violet); opacity: 0; font-size: 15px; text-align: center; }
.theme-opt.is-active .theme-check { opacity: 1; }
.theme-pop-foot { padding: 10px 6px 2px; color: var(--faint); font-size: 11px; line-height: 1.5; }

/* 登录页无导航栏：切换器浮在右上角 */
.theme-picker.is-floating { position: fixed; right: 24px; top: 18px; z-index: 70; }
.theme-picker.is-floating .theme-btn { background: var(--surface-hi); box-shadow: var(--shadow); }

@media (max-width: 860px) {
  .theme-btn-label { display: none; }
  .theme-picker.is-floating { right: 12px; top: 10px; }
  .theme-btn { min-height: 34px; padding: 0 10px; }
  .theme-orb { width: 12px; height: 12px; }
  .theme-btn svg { width: 13px; height: 13px; }
  /* 小屏改为视口定位：按钮不在屏幕右缘，绝对定位会把弹层挤出左边界。
     同时去掉顶栏的 backdrop-filter —— 它会成为 fixed 子元素的包含块。 */
  .theme-pop {
    position: fixed; top: 84px; left: 14px; right: 14px;
    width: auto; max-width: none;
  }
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 640px) {
  .theme-pop { top: 84px; }
  /* 登录页没有顶栏，浮动按钮在顶部，弹层跟着上移 */
  .is-auth .theme-pop { top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-pop { animation: none; }
}