/* ============================================================
   主题包：只覆盖变量即可整站换肤（配色 / 圆角 / 字体 / 质感）
   切换方式：<html data-theme="arctic">
   当前主题：neon / arctic / aurora / sakura / shojo / candy / lavender /
             milktea / mintcandy / cyberpink / royal / rosegold / sunset / mono / light
   注：新增主题必须同步服务端白名单 THEME_IDS，否则 /save_theme 会被拒。
   说明：每个主题都给出完整变量集，登录页（只加载本文件）也能正确取色。
   ============================================================ */

[data-theme="neon"] {
    color-scheme: dark;
    --bg-0: #05080F; --bg-1: #0A0F1A; --bg-2: #101827; --bg-3: #162034;
    --bg-4: #1D2942; --bg-inset: #070C15;
    --line: rgba(125, 165, 255, .12); --line-2: rgba(125, 165, 255, .22); --line-3: rgba(125, 165, 255, .34);
    --txt: #E8EEF9; --txt-2: #93A3BF; --txt-3: #5D6E8C;
    --accent: #22D3EE; --accent-2: #0EA5E9; --accent-3: #E879F9;
    --accent-rgb: 34, 211, 238; --accent-ink: #04121A;
    --ok: #34D399; --warn: #FBBF24; --danger: #FB7185;
    --ok-bg: rgba(52, 211, 153, .12); --warn-bg: rgba(251, 191, 36, .12); --danger-bg: rgba(251, 113, 133, .12);
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
    --console-fg: #7FE3F0;
}

[data-theme="arctic"] {
    color-scheme: dark;
    --bg-0: #04080F; --bg-1: #071320; --bg-2: #0C1B2C; --bg-3: #10233A;
    --bg-4: #162E4A; --bg-inset: #060E18;
    --line: rgba(140, 200, 255, .10); --line-2: rgba(140, 200, 255, .20); --line-3: rgba(140, 200, 255, .32);
    --txt: #E3F0FF; --txt-2: #8FB3D4; --txt-3: #5C7C9C;
    --accent: #7DD3FC; --accent-2: #38BDF8; --accent-3: #A5F3FC;
    --accent-rgb: 125, 211, 252; --accent-ink: #04141F;
    --ok: #5EEAD4; --warn: #FCD34D; --danger: #FDA4AF;
    --ok-bg: rgba(94, 234, 212, .12); --warn-bg: rgba(252, 211, 77, .12); --danger-bg: rgba(253, 164, 175, .12);
    --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
    --console-fg: #9FD8E8;
}
[data-theme="arctic"] body::before {
    background:
        radial-gradient(1000px 560px at 10% -12%, rgba(56, 189, 248, .10), transparent 60%),
        radial-gradient(900px 520px at 90% 6%, rgba(165, 243, 252, .08), transparent 60%),
        radial-gradient(800px 700px at 55% 112%, rgba(125, 211, 252, .06), transparent 60%);
}
[data-theme="arctic"] .card {
    background: linear-gradient(180deg, rgba(18, 40, 64, .70), rgba(10, 25, 42, .80));
    backdrop-filter: blur(18px);
}
[data-theme="arctic"] .kpi {
    background: linear-gradient(160deg, rgba(24, 52, 84, .58), rgba(8, 20, 34, .72));
    backdrop-filter: blur(18px);
}
[data-theme="arctic"] .topbar { background: rgba(7, 19, 32, .74); }

[data-theme="aurora"] {
    color-scheme: light;
    --bg-0: #E9EEF6; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #F6F8FC;
    --bg-4: #EDF1F7; --bg-inset: #F2F5FA;
    --line: rgba(15, 23, 42, .10); --line-2: rgba(15, 23, 42, .18); --line-3: rgba(15, 23, 42, .30);
    --txt: #0F172A; --txt-2: #475569; --txt-3: #94A3B8;
    --accent: #2563EB; --accent-2: #1D4ED8; --accent-3: #7C3AED;
    --accent-rgb: 37, 99, 235; --accent-ink: #FFFFFF;
    --ok: #059669; --warn: #D97706; --danger: #DC2626;
    --ok-bg: rgba(5, 150, 105, .10); --warn-bg: rgba(217, 119, 6, .10); --danger-bg: rgba(220, 38, 38, .10);
    --idle-bg: rgba(100, 116, 139, .12);
    --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
    --console-fg: #334155;
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-2: 0 8px 24px rgba(15, 23, 42, .12);
    --shadow-3: 0 24px 64px rgba(15, 23, 42, .20);
}
[data-theme="aurora"] body::before {
    background:
        radial-gradient(900px 520px at 10% -12%, rgba(37, 99, 235, .10), transparent 60%),
        radial-gradient(800px 500px at 90% 6%, rgba(124, 58, 237, .08), transparent 60%);
}
[data-theme="aurora"] .card,
[data-theme="aurora"] .kpi {
    background: #FFFFFF;
    box-shadow: var(--shadow-1);
    backdrop-filter: none;
}
[data-theme="aurora"] .kpi::after { opacity: .07; }
[data-theme="aurora"] .card::before { background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .30), transparent); }
[data-theme="aurora"] .topbar { background: rgba(255, 255, 255, .86); }
[data-theme="aurora"] .modal { background: #FFFFFF; }
[data-theme="aurora"] .modal-foot { background: var(--bg-3); }
[data-theme="aurora"] .toast { background: #FFFFFF; }
[data-theme="aurora"] .console { background: #F8FAFC; border-color: var(--line-2); }
[data-theme="aurora"] .mask { background: rgba(15, 23, 42, .38); }
[data-theme="aurora"] .tip .tip-body { background: #FFFFFF; color: var(--txt-2); }
[data-theme="aurora"] .dot.ok { box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); }
[data-theme="aurora"] .dot.danger { box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }
[data-theme="aurora"] .dot.warn { box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }

[data-theme="sakura"] {
    color-scheme: dark;
    --bg-0: #0B0710; --bg-1: #120B1A; --bg-2: #1A1026; --bg-3: #231433;
    --bg-4: #2D1A42; --bg-inset: #080510;
    --line: rgba(255, 150, 200, .14); --line-2: rgba(255, 150, 200, .24); --line-3: rgba(255, 150, 200, .38);
    --txt: #F8ECF6; --txt-2: #C9ADC9; --txt-3: #8E7396;
    --accent: #F472B6; --accent-2: #DB2777; --accent-3: #C084FC;
    --accent-rgb: 244, 114, 182; --accent-ink: #1E0716;
    --ok: #34D399; --warn: #FBBF24; --danger: #FB7185;
    --ok-bg: rgba(52, 211, 153, .12); --warn-bg: rgba(251, 191, 36, .12); --danger-bg: rgba(251, 113, 133, .12);
    --r-xs: 8px; --r-sm: 11px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
    --console-fg: #F3B8D8;
}
[data-theme="sakura"] body::before {
    background:
        radial-gradient(1000px 560px at 12% -12%, rgba(244, 114, 182, .16), transparent 62%),
        radial-gradient(900px 520px at 88% 4%, rgba(192, 132, 252, .12), transparent 60%),
        radial-gradient(820px 700px at 52% 112%, rgba(219, 39, 119, .10), transparent 60%);
}
[data-theme="sakura"] .card {
    background: linear-gradient(180deg, rgba(46, 26, 66, .74), rgba(18, 11, 26, .86));
    backdrop-filter: blur(20px);
}
[data-theme="sakura"] .kpi {
    background: linear-gradient(160deg, rgba(52, 28, 74, .62), rgba(16, 10, 24, .82));
    backdrop-filter: blur(18px);
}
[data-theme="sakura"] .topbar { background: rgba(18, 11, 26, .76); }

[data-theme="shojo"] {
    color-scheme: light;
    --bg-0: #FFF1F6; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #FFF5F9;
    --bg-4: #FFE4EF; --bg-inset: #FFF8FB;
    --line: rgba(236, 72, 153, .12); --line-2: rgba(236, 72, 153, .20); --line-3: rgba(236, 72, 153, .34);
    --txt: #4A1B33; --txt-2: #96637D; --txt-3: #C79FB3;
    --accent: #EC4899; --accent-2: #DB2777; --accent-3: #F9A8D4;
    --accent-rgb: 236, 72, 153; --accent-ink: #FFFFFF;
    --ok: #059669; --warn: #D97706; --danger: #E11D48;
    --ok-bg: rgba(5, 150, 105, .10); --warn-bg: rgba(217, 119, 6, .10); --danger-bg: rgba(225, 29, 72, .10);
    --idle-bg: rgba(150, 99, 125, .12);
    --r-xs: 10px; --r-sm: 13px; --r-md: 18px; --r-lg: 22px; --r-xl: 26px;
    --console-fg: #B3316B;
    --shadow-1: 0 1px 2px rgba(74, 27, 51, .06);
    --shadow-2: 0 8px 24px rgba(74, 27, 51, .10);
    --shadow-3: 0 24px 64px rgba(74, 27, 51, .18);
}
[data-theme="shojo"] body::before {
    background:
        radial-gradient(880px 520px at 10% -12%, rgba(236, 72, 153, .14), transparent 60%),
        radial-gradient(820px 500px at 90% 4%, rgba(249, 168, 212, .18), transparent 60%);
}
[data-theme="shojo"] .card,
[data-theme="shojo"] .kpi { background: #FFFFFF; box-shadow: var(--shadow-1); backdrop-filter: none; }
[data-theme="shojo"] .card::before { background: linear-gradient(90deg, transparent, rgba(236, 72, 153, .30), transparent); }
[data-theme="shojo"] .topbar { background: rgba(255, 255, 255, .86); }
[data-theme="shojo"] .modal { background: #FFFFFF; }
[data-theme="shojo"] .modal-foot { background: var(--bg-3); }
[data-theme="shojo"] .toast { background: #FFFFFF; }
[data-theme="shojo"] .console { background: #FFF7FA; border-color: var(--line-2); }
[data-theme="shojo"] .mask { background: rgba(74, 27, 51, .30); }
[data-theme="shojo"] .dot.ok { box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); }
[data-theme="shojo"] .dot.warn { box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }
[data-theme="shojo"] .dot.danger { box-shadow: 0 0 0 3px rgba(225, 29, 72, .16); }

[data-theme="candy"] {
    color-scheme: light;
    --bg-0: #F7F3FF; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #FBF7FF;
    --bg-4: #F1E8FF; --bg-inset: #FAF6FF;
    --line: rgba(168, 85, 247, .12); --line-2: rgba(168, 85, 247, .20); --line-3: rgba(168, 85, 247, .34);
    --txt: #2E1B4D; --txt-2: #7A6A9C; --txt-3: #AFA3C7;
    --accent: #A855F7; --accent-2: #EC4899; --accent-3: #60A5FA;
    --accent-rgb: 168, 85, 247; --accent-ink: #FFFFFF;
    --ok: #059669; --warn: #D97706; --danger: #DC2626;
    --ok-bg: rgba(5, 150, 105, .10); --warn-bg: rgba(217, 119, 6, .10); --danger-bg: rgba(220, 38, 38, .10);
    --idle-bg: rgba(122, 106, 156, .12);
    --r-xs: 10px; --r-sm: 13px; --r-md: 18px; --r-lg: 23px; --r-xl: 28px;
    --console-fg: #7A3FBF;
    --shadow-1: 0 1px 2px rgba(46, 27, 77, .06);
    --shadow-2: 0 8px 24px rgba(46, 27, 77, .10);
    --shadow-3: 0 24px 64px rgba(46, 27, 77, .18);
}
[data-theme="candy"] body::before {
    background:
        radial-gradient(880px 520px at 8% -12%, rgba(168, 85, 247, .13), transparent 60%),
        radial-gradient(820px 500px at 92% 6%, rgba(236, 72, 153, .14), transparent 60%);
}
[data-theme="candy"] .card,
[data-theme="candy"] .kpi { background: #FFFFFF; box-shadow: var(--shadow-1); backdrop-filter: none; }
[data-theme="candy"] .card::before { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .30), transparent); }
[data-theme="candy"] .topbar { background: rgba(255, 255, 255, .86); }
[data-theme="candy"] .modal { background: #FFFFFF; }
[data-theme="candy"] .modal-foot { background: var(--bg-3); }
[data-theme="candy"] .toast { background: #FFFFFF; }
[data-theme="candy"] .console { background: #FBF8FF; border-color: var(--line-2); }
[data-theme="candy"] .mask { background: rgba(46, 27, 77, .30); }
[data-theme="candy"] .dot.ok { box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); }
[data-theme="candy"] .dot.warn { box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }
[data-theme="candy"] .dot.danger { box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }

[data-theme="lavender"] {
    color-scheme: light;
    --bg-0: #F5F4FF; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #F8F7FF;
    --bg-4: #EDEBFF; --bg-inset: #F7F6FF;
    --line: rgba(124, 58, 237, .12); --line-2: rgba(124, 58, 237, .20); --line-3: rgba(124, 58, 237, .32);
    --txt: #2A2352; --txt-2: #6C6693; --txt-3: #A5A0C2;
    --accent: #7C3AED; --accent-2: #6366F1; --accent-3: #C4B5FD;
    --accent-rgb: 124, 58, 237; --accent-ink: #FFFFFF;
    --ok: #059669; --warn: #D97706; --danger: #DC2626;
    --ok-bg: rgba(5, 150, 105, .10); --warn-bg: rgba(217, 119, 6, .10); --danger-bg: rgba(220, 38, 38, .10);
    --idle-bg: rgba(108, 102, 147, .12);
    --r-xs: 8px; --r-sm: 11px; --r-md: 15px; --r-lg: 19px; --r-xl: 23px;
    --console-fg: #5B3FB8;
    --shadow-1: 0 1px 2px rgba(42, 35, 82, .06);
    --shadow-2: 0 8px 24px rgba(42, 35, 82, .10);
    --shadow-3: 0 24px 64px rgba(42, 35, 82, .18);
}
[data-theme="lavender"] body::before {
    background:
        radial-gradient(880px 520px at 10% -12%, rgba(124, 58, 237, .12), transparent 60%),
        radial-gradient(820px 500px at 90% 6%, rgba(196, 181, 253, .18), transparent 60%);
}
[data-theme="lavender"] .card,
[data-theme="lavender"] .kpi { background: #FFFFFF; box-shadow: var(--shadow-1); backdrop-filter: none; }
[data-theme="lavender"] .card::before { background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .30), transparent); }
[data-theme="lavender"] .topbar { background: rgba(255, 255, 255, .86); }
[data-theme="lavender"] .modal { background: #FFFFFF; }
[data-theme="lavender"] .modal-foot { background: var(--bg-3); }
[data-theme="lavender"] .toast { background: #FFFFFF; }
[data-theme="lavender"] .console { background: #F9F8FF; border-color: var(--line-2); }
[data-theme="lavender"] .mask { background: rgba(42, 35, 82, .30); }
[data-theme="lavender"] .dot.ok { box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); }
[data-theme="lavender"] .dot.warn { box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }
[data-theme="lavender"] .dot.danger { box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }

[data-theme="milktea"] {
    color-scheme: light;
    --bg-0: #F8F1E9; --bg-1: #FFFDFB; --bg-2: #FFFDFB; --bg-3: #FBF5EE;
    --bg-4: #F2E6D8; --bg-inset: #FCF8F3;
    --line: rgba(176, 124, 79, .16); --line-2: rgba(176, 124, 79, .26); --line-3: rgba(176, 124, 79, .40);
    --txt: #40291A; --txt-2: #8A6B52; --txt-3: #B79A83;
    --accent: #C98A5B; --accent-2: #A9743F; --accent-3: #E7C9A9;
    --accent-rgb: 201, 138, 91; --accent-ink: #FFFFFF;
    --ok: #4D9E6A; --warn: #C98A2B; --danger: #D9534F;
    --ok-bg: rgba(77, 158, 106, .12); --warn-bg: rgba(201, 138, 43, .12); --danger-bg: rgba(217, 83, 79, .12);
    --idle-bg: rgba(138, 107, 82, .14);
    --r-xs: 8px; --r-sm: 11px; --r-md: 15px; --r-lg: 19px; --r-xl: 24px;
    --console-fg: #8A5A32;
    --shadow-1: 0 1px 2px rgba(64, 41, 26, .06);
    --shadow-2: 0 8px 24px rgba(64, 41, 26, .10);
    --shadow-3: 0 24px 64px rgba(64, 41, 26, .18);
}
[data-theme="milktea"] body::before {
    background:
        radial-gradient(880px 520px at 10% -12%, rgba(201, 138, 91, .14), transparent 60%),
        radial-gradient(820px 500px at 90% 6%, rgba(231, 201, 169, .22), transparent 60%);
}
[data-theme="milktea"] .card,
[data-theme="milktea"] .kpi { background: #FFFDFB; box-shadow: var(--shadow-1); backdrop-filter: none; }
[data-theme="milktea"] .card::before { background: linear-gradient(90deg, transparent, rgba(201, 138, 91, .30), transparent); }
[data-theme="milktea"] .topbar { background: rgba(255, 253, 251, .88); }
[data-theme="milktea"] .modal { background: #FFFDFB; }
[data-theme="milktea"] .modal-foot { background: var(--bg-3); }
[data-theme="milktea"] .toast { background: #FFFDFB; }
[data-theme="milktea"] .console { background: #FCF7F1; border-color: var(--line-2); }
[data-theme="milktea"] .mask { background: rgba(64, 41, 26, .30); }
[data-theme="milktea"] .dot.ok { box-shadow: 0 0 0 3px rgba(77, 158, 106, .16); }
[data-theme="milktea"] .dot.warn { box-shadow: 0 0 0 3px rgba(201, 138, 43, .16); }
[data-theme="milktea"] .dot.danger { box-shadow: 0 0 0 3px rgba(217, 83, 79, .16); }

[data-theme="mintcandy"] {
    color-scheme: light;
    --bg-0: #EEFAF6; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #F3FCF9;
    --bg-4: #E3F7EF; --bg-inset: #F7FDFB;
    --line: rgba(16, 185, 129, .14); --line-2: rgba(16, 185, 129, .22); --line-3: rgba(16, 185, 129, .34);
    --txt: #14332A; --txt-2: #5D8A7B; --txt-3: #93B7AA;
    --accent: #10B981; --accent-2: #0D9488; --accent-3: #7DD3FC;
    --accent-rgb: 16, 185, 129; --accent-ink: #FFFFFF;
    --ok: #059669; --warn: #D97706; --danger: #DC2626;
    --ok-bg: rgba(5, 150, 105, .10); --warn-bg: rgba(217, 119, 6, .10); --danger-bg: rgba(220, 38, 38, .10);
    --idle-bg: rgba(93, 138, 123, .12);
    --r-xs: 9px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 25px;
    --console-fg: #0F8A66;
    --shadow-1: 0 1px 2px rgba(20, 51, 42, .06);
    --shadow-2: 0 8px 24px rgba(20, 51, 42, .10);
    --shadow-3: 0 24px 64px rgba(20, 51, 42, .18);
}
[data-theme="mintcandy"] body::before {
    background:
        radial-gradient(880px 520px at 10% -12%, rgba(16, 185, 129, .12), transparent 60%),
        radial-gradient(820px 500px at 90% 6%, rgba(125, 211, 252, .16), transparent 60%);
}
[data-theme="mintcandy"] .card,
[data-theme="mintcandy"] .kpi { background: #FFFFFF; box-shadow: var(--shadow-1); backdrop-filter: none; }
[data-theme="mintcandy"] .card::before { background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .30), transparent); }
[data-theme="mintcandy"] .topbar { background: rgba(255, 255, 255, .86); }
[data-theme="mintcandy"] .modal { background: #FFFFFF; }
[data-theme="mintcandy"] .modal-foot { background: var(--bg-3); }
[data-theme="mintcandy"] .toast { background: #FFFFFF; }
[data-theme="mintcandy"] .console { background: #F6FDFA; border-color: var(--line-2); }
[data-theme="mintcandy"] .mask { background: rgba(20, 51, 42, .30); }
[data-theme="mintcandy"] .dot.ok { box-shadow: 0 0 0 3px rgba(5, 150, 105, .16); }
[data-theme="mintcandy"] .dot.warn { box-shadow: 0 0 0 3px rgba(217, 119, 6, .16); }
[data-theme="mintcandy"] .dot.danger { box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }

[data-theme="cyberpink"] {
    color-scheme: dark;
    --bg-0: #0B0410; --bg-1: #130A1C; --bg-2: #1C0F28; --bg-3: #271536;
    --bg-4: #331B47; --bg-inset: #08030C;
    --line: rgba(255, 80, 180, .16); --line-2: rgba(255, 80, 180, .26); --line-3: rgba(255, 80, 180, .40);
    --txt: #FCE9F5; --txt-2: #C79BC0; --txt-3: #8E6A8B;
    --accent: #FF3D9A; --accent-2: #C026D3; --accent-3: #22D3EE;
    --accent-rgb: 255, 61, 154; --accent-ink: #1A0310;
    --ok: #34D399; --warn: #FBBF24; --danger: #FB7185;
    --ok-bg: rgba(52, 211, 153, .12); --warn-bg: rgba(251, 191, 36, .12); --danger-bg: rgba(251, 113, 133, .12);
    --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
    --console-fg: #FF8FC4;
}
[data-theme="cyberpink"] body::before {
    background:
        radial-gradient(1000px 560px at 12% -12%, rgba(255, 61, 154, .18), transparent 62%),
        radial-gradient(900px 520px at 88% 4%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(820px 700px at 52% 112%, rgba(192, 38, 211, .10), transparent 60%);
}
[data-theme="cyberpink"] .card {
    background: linear-gradient(180deg, rgba(48, 25, 66, .74), rgba(19, 10, 28, .86));
    backdrop-filter: blur(20px);
}
[data-theme="cyberpink"] .kpi {
    background: linear-gradient(160deg, rgba(56, 29, 76, .62), rgba(16, 8, 24, .82));
    backdrop-filter: blur(18px);
}
[data-theme="cyberpink"] .topbar { background: rgba(19, 10, 28, .76); }

[data-theme="royal"] {
    color-scheme: dark;
    --bg-0: #0A0716; --bg-1: #120C22; --bg-2: #1A1230; --bg-3: #241A42;
    --bg-4: #2E2254; --bg-inset: #080513;
    --line: rgba(167, 139, 250, .16); --line-2: rgba(167, 139, 250, .26); --line-3: rgba(167, 139, 250, .40);
    --txt: #F1EBFF; --txt-2: #B5A8D9; --txt-3: #7E739F;
    --accent: #A78BFA; --accent-2: #7C3AED; --accent-3: #FBBF24;
    --accent-rgb: 167, 139, 250; --accent-ink: #170D2E;
    --ok: #34D399; --warn: #FBBF24; --danger: #FB7185;
    --ok-bg: rgba(52, 211, 153, .12); --warn-bg: rgba(251, 191, 36, .12); --danger-bg: rgba(251, 113, 133, .12);
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
    --console-fg: #C4B5FD;
}
[data-theme="royal"] body::before {
    background:
        radial-gradient(1000px 560px at 12% -12%, rgba(124, 58, 237, .20), transparent 62%),
        radial-gradient(900px 520px at 88% 4%, rgba(251, 191, 36, .08), transparent 60%),
        radial-gradient(820px 700px at 52% 112%, rgba(167, 139, 250, .10), transparent 60%);
}
[data-theme="royal"] .card {
    background: linear-gradient(180deg, rgba(36, 26, 66, .74), rgba(18, 12, 34, .86));
    backdrop-filter: blur(20px);
}
[data-theme="royal"] .kpi {
    background: linear-gradient(160deg, rgba(46, 34, 84, .60), rgba(14, 9, 28, .82));
    backdrop-filter: blur(18px);
}
[data-theme="royal"] .topbar { background: rgba(18, 12, 34, .76); }

[data-theme="rosegold"] {
    color-scheme: dark;
    --bg-0: #140A0C; --bg-1: #1D0F12; --bg-2: #27151A; --bg-3: #331C22;
    --bg-4: #40242C; --bg-inset: #100709;
    --line: rgba(240, 168, 150, .16); --line-2: rgba(240, 168, 150, .26); --line-3: rgba(240, 168, 150, .40);
    --txt: #FBE9E4; --txt-2: #C9A199; --txt-3: #8F6F69;
    --accent: #F0A08C; --accent-2: #C97B62; --accent-3: #FBBF24;
    --accent-rgb: 240, 160, 140; --accent-ink: #2A100A;
    --ok: #4ADE80; --warn: #FBBF24; --danger: #FB7185;
    --ok-bg: rgba(74, 222, 128, .12); --warn-bg: rgba(251, 191, 36, .12); --danger-bg: rgba(251, 113, 133, .12);
    --r-xs: 8px; --r-sm: 11px; --r-md: 15px; --r-lg: 19px; --r-xl: 24px;
    --console-fg: #E8B4A0;
}
[data-theme="rosegold"] body::before {
    background:
        radial-gradient(1000px 560px at 12% -12%, rgba(240, 160, 140, .16), transparent 62%),
        radial-gradient(900px 520px at 88% 4%, rgba(251, 191, 36, .07), transparent 60%),
        radial-gradient(820px 700px at 52% 112%, rgba(201, 123, 98, .10), transparent 60%);
}
[data-theme="rosegold"] .card {
    background: linear-gradient(180deg, rgba(51, 28, 34, .74), rgba(29, 15, 18, .86));
    backdrop-filter: blur(20px);
}
[data-theme="rosegold"] .kpi {
    background: linear-gradient(160deg, rgba(64, 36, 44, .60), rgba(20, 10, 12, .82));
    backdrop-filter: blur(18px);
}
[data-theme="rosegold"] .topbar { background: rgba(29, 15, 18, .76); }

[data-theme="sunset"] {
    color-scheme: dark;
    --bg-0: #100610; --bg-1: #180A14; --bg-2: #24101C; --bg-3: #311527;
    --bg-4: #401C33; --bg-inset: #0C040C;
    --line: rgba(251, 146, 60, .14); --line-2: rgba(251, 146, 60, .24); --line-3: rgba(251, 146, 60, .38);
    --txt: #FFEDE0; --txt-2: #D3A895; --txt-3: #9A7668;
    --accent: #FB923C; --accent-2: #F43F5E; --accent-3: #FBBF24;
    --accent-rgb: 251, 146, 60; --accent-ink: #1E0A05;
    --ok: #4ADE80; --warn: #FBBF24; --danger: #F43F5E;
    --ok-bg: rgba(74, 222, 128, .12); --warn-bg: rgba(251, 191, 36, .12); --danger-bg: rgba(244, 63, 94, .14);
    --r-xs: 7px; --r-sm: 9px; --r-md: 13px; --r-lg: 17px; --r-xl: 22px;
    --console-fg: #F6BE8A;
}
[data-theme="sunset"] body::before {
    background:
        radial-gradient(1000px 560px at 8% -12%, rgba(251, 146, 60, .16), transparent 62%),
        radial-gradient(900px 520px at 92% 2%, rgba(244, 63, 94, .12), transparent 60%),
        radial-gradient(860px 700px at 55% 114%, rgba(251, 191, 36, .08), transparent 60%);
}
[data-theme="sunset"] .card {
    background: linear-gradient(180deg, rgba(49, 21, 39, .74), rgba(24, 10, 20, .86));
    backdrop-filter: blur(18px);
}
[data-theme="sunset"] .kpi {
    background: linear-gradient(160deg, rgba(64, 28, 51, .60), rgba(16, 6, 16, .82));
    backdrop-filter: blur(18px);
}
[data-theme="sunset"] .topbar { background: rgba(24, 10, 20, .76); }

[data-theme="mono"] {
    color-scheme: dark;
    --bg-0: #0D1117; --bg-1: #161B22; --bg-2: #1C2128; --bg-3: #22272E;
    --bg-4: #2D333B; --bg-inset: #090C10;
    --line: rgba(240, 246, 252, .10); --line-2: rgba(240, 246, 252, .16); --line-3: rgba(240, 246, 252, .26);
    --txt: #E6EDF3; --txt-2: #A9B1BA; --txt-3: #7D8590;
    --accent: #1F6FEB; --accent-2: #388BFD; --accent-3: #A371F7;
    --accent-rgb: 31, 111, 235; --accent-ink: #FFFFFF;
    --ok: #3FB950; --warn: #D29922; --danger: #F85149;
    --ok-bg: rgba(63, 185, 80, .15); --warn-bg: rgba(210, 153, 34, .15); --danger-bg: rgba(248, 81, 73, .15);
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
    --console-fg: #79C0FF;
}
[data-theme="mono"] body::before {
    background:
        radial-gradient(1000px 560px at 12% -12%, rgba(31, 111, 235, .08), transparent 60%),
        radial-gradient(900px 520px at 88% 6%, rgba(163, 113, 247, .05), transparent 60%);
}
[data-theme="mono"] .card,
[data-theme="mono"] .kpi {
    background: var(--bg-1);
    border-color: var(--line-2);
    backdrop-filter: none;
}
[data-theme="mono"] .card::before,
[data-theme="mono"] .kpi::after { display: none; }
[data-theme="mono"] .topbar { background: rgba(13, 17, 23, .92); }
[data-theme="mono"] .modal { background: var(--bg-1); }
[data-theme="mono"] .toast { background: var(--bg-1); }
[data-theme="mono"] .console { background: #010409; border-color: var(--line-2); }

[data-theme="light"] {
    color-scheme: light;
    --bg-0: #F6F8FA; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #F6F8FA;
    --bg-4: #EAEEF2; --bg-inset: #F6F8FA;
    --line: rgba(31, 35, 40, .12); --line-2: rgba(31, 35, 40, .20); --line-3: rgba(31, 35, 40, .32);
    --txt: #1F2328; --txt-2: #59636E; --txt-3: #818B98;
    --accent: #0969DA; --accent-2: #0550AE; --accent-3: #8250DF;
    --accent-rgb: 9, 105, 218; --accent-ink: #FFFFFF;
    --ok: #1A7F37; --warn: #9A6700; --danger: #CF222E;
    --ok-bg: rgba(26, 127, 55, .10); --warn-bg: rgba(154, 103, 0, .10); --danger-bg: rgba(207, 34, 46, .10);
    --idle-bg: rgba(89, 99, 110, .12);
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
    --console-fg: #0550AE;
    --shadow-1: 0 1px 0 rgba(31, 35, 40, .04);
    --shadow-2: 0 8px 24px rgba(140, 149, 159, .20);
    --shadow-3: 0 24px 64px rgba(140, 149, 159, .30);
}
[data-theme="light"] body::before {
    background:
        radial-gradient(900px 520px at 10% -12%, rgba(9, 105, 218, .06), transparent 60%),
        radial-gradient(800px 500px at 90% 6%, rgba(130, 80, 223, .05), transparent 60%);
}
[data-theme="light"] .card,
[data-theme="light"] .kpi {
    background: #FFFFFF;
    border-color: rgba(31, 35, 40, .15);
    box-shadow: var(--shadow-1);
    backdrop-filter: none;
}
[data-theme="light"] .card::before { background: linear-gradient(90deg, transparent, rgba(9, 105, 218, .30), transparent); }
[data-theme="light"] .topbar { background: rgba(255, 255, 255, .92); }
[data-theme="light"] .modal { background: #FFFFFF; }
[data-theme="light"] .modal-foot { background: #F6F8FA; }
[data-theme="light"] .toast { background: #FFFFFF; }
[data-theme="light"] .console { background: #F6F8FA; border-color: var(--line-2); }
[data-theme="light"] .mask { background: rgba(31, 35, 40, .35); }
[data-theme="light"] .dot.ok { box-shadow: 0 0 0 3px rgba(26, 127, 55, .16); }
[data-theme="light"] .dot.warn { box-shadow: 0 0 0 3px rgba(154, 103, 0, .16); }
[data-theme="light"] .dot.danger { box-shadow: 0 0 0 3px rgba(207, 34, 46, .16); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.theme-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--bg-2);
    cursor: pointer;
    text-align: left;
    transition: all var(--dur) var(--ease);
}
.theme-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.theme-swatches { display: flex; gap: 5px; margin-bottom: 9px; }
.theme-swatches i {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
}
.theme-name { font-size: 14.5px; font-weight: 650; margin-bottom: 2px; }
.theme-desc { font-size: 13px; color: var(--txt-3); line-height: 1.5; }
.theme-card .flag {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), .14);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), .3);
}