:root{--button:#1c2940;--input:#0b1424;--top:#090e1bf0;--nav:#0d1426f5;--active:#372453;--active-ink:#d5c5ff;--tint:#201a39;--notice:#122c31;--notice-border:#246a62;--warn:#382b19;--warn-ink:#ffe2a0;--error:#ffb3c6;--track:#24304a;--primary:#7950e8}
:root[data-theme=light]{color-scheme:light;--bg:#f5f7fc;--panel:#fff;--border:#ccd3e0;--ink:#19233a;--muted:#526078;--purple:#6841c6;--green:#087b60;--pink:#bd245c;--blue:#096fa9;--button:#e8edf6;--input:#fff;--top:#fffffff2;--nav:#fffffff5;--active:#eee6ff;--active-ink:#5427ae;--tint:#f2edff;--notice:#e5f5f0;--notice-border:#84b9a7;--warn:#fff2d5;--warn-ink:#694900;--error:#b51b48;--track:#e3e8f2;--primary:#6841c6}
:root[data-theme=soft]{color-scheme:dark;--bg:#20242d;--panel:#2a303b;--border:#4c5769;--ink:#f4f5fa;--muted:#c1c9d8;--purple:#bda0ff;--green:#62dbb8;--pink:#ff8eb5;--blue:#8bcfff;--button:#374252;--input:#232a35;--top:#20242df5;--nav:#262c36f5;--active:#514065;--active-ink:#f0e7ff;--tint:#353044;--notice:#263f3b;--notice-border:#648f82;--warn:#493d29;--warn-ink:#ffe1a5;--error:#ffafc5;--track:#465065;--primary:#7550c8}
@media screen{
button{background:var(--button)}.primary{background:var(--primary);color:white}.quiet{background:transparent}
header{background:var(--top)}.nav{background:var(--nav)}.nav button.active,.configtabs button.active{background:var(--active);color:var(--active-ink)}
.metric{background:linear-gradient(125deg,var(--tint),var(--panel))}.intro{background:linear-gradient(120deg,var(--tint),var(--panel));border-color:var(--border)}.intro p{color:var(--muted)}
input,select,textarea{background:var(--input);border-color:var(--border)}dialog{border-color:var(--border)}
.notice,#toast{background:var(--notice);border-color:var(--notice-border);color:var(--ink)}.warning{background:var(--warn);color:var(--warn-ink)}.danger,.error{color:var(--error)}.track{background:var(--track)}
svg text{fill:var(--muted)}svg line{stroke:var(--border)}
svg [fill="#976eff"]{fill:var(--purple)}svg [fill="#27d3ac"]{fill:var(--green)}svg [fill="#f35896"]{fill:var(--pink)}svg [fill="#47b8ff"]{fill:var(--blue)}
svg [stroke="#976eff"]{stroke:var(--purple)}svg [stroke="#27d3ac"]{stroke:var(--green)}svg [stroke="#f35896"]{stroke:var(--pink)}svg [stroke="#47b8ff"]{stroke:var(--blue)}
.legend i[style*="#976eff"]{background:var(--purple)!important}.legend i[style*="#27d3ac"]{background:var(--green)!important}.legend i[style*="#f35896"]{background:var(--pink)!important}.legend i[style*="#47b8ff"]{background:var(--blue)!important}
}
:root[data-theme=color]{color-scheme:light;--bg:#f0f5ff;--panel:#fff;--border:#c2d4ea;--ink:#142c49;--muted:#4c627c;--purple:#315cca;--green:#007963;--pink:#c03257;--blue:#006fa8;--button:#e2edff;--input:#fff;--top:#f0f5fff5;--nav:#fffffff5;--active:#dceaff;--active-ink:#244eaa;--tint:#e4efff;--notice:#e2f5ef;--notice-border:#76bca8;--warn:#fff1cf;--warn-ink:#704a00;--error:#b41b40;--track:#dce8f6;--primary:#315cca}
:root[data-theme=aurora]{color-scheme:dark;--bg:#100d25;--panel:#1b1833;--border:#51416f;--ink:#f8f3ff;--muted:#c3b9da;--purple:#bc9aff;--green:#5be4c8;--pink:#ff8ac6;--blue:#89ccff;--button:#34264f;--input:#17122b;--top:#100d25ed;--nav:#18122af5;--active:#493165;--active-ink:#f7eeff;--tint:#352349;--notice:#203b3a;--notice-border:#4c8d80;--warn:#493821;--warn-ink:#ffe6b4;--error:#ffafc9;--track:#3b3054;--primary:#7d43c5}
:root[data-theme=onyx]{color-scheme:dark;--bg:#111111;--panel:#1b1b1a;--border:#49443a;--ink:#f3efe5;--muted:#bbb6aa;--purple:#d8bb7c;--green:#9bcdad;--pink:#ed9e91;--blue:#a9bed8;--button:#302c25;--input:#151514;--top:#111111f5;--nav:#171716f5;--active:#3b3221;--active-ink:#f3dba8;--tint:#28241d;--notice:#242f27;--notice-border:#607962;--warn:#3b3020;--warn-ink:#f2d498;--error:#f0a59a;--track:#35312a;--primary:#ddc18a}
@media screen{
html[data-theme=color] .metric:nth-child(2){background:linear-gradient(135deg,#ffedf1,#fff)}html[data-theme=color] .metric:nth-child(3){background:linear-gradient(135deg,#e0f5ee,#fff)}html[data-theme=color] .metric:nth-child(4){background:linear-gradient(135deg,#e1f5ff,#fff)}
html[data-theme=aurora] body{background:radial-gradient(ellipse at 10% 0%,#382151 0%,transparent 50%),radial-gradient(ellipse at 100% 70%,#123537 0%,transparent 50%),var(--bg);background-attachment:fixed}
html[data-theme=aurora] .metric{position:relative;overflow:hidden;box-shadow:0 8px 30px #0003}
html[data-theme=aurora] .metric:after{content:"";position:absolute;inset:-80%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,#ffffff08 50%,transparent 58%);transform:translateX(-30%);animation:aurora-glow 12s ease-in-out infinite}
html[data-theme=aurora] .panel{box-shadow:0 12px 40px #0002}
html[data-theme=onyx] h1{font-family:Georgia,serif;font-weight:500;letter-spacing:-.025em}
html[data-theme=onyx] .brand{letter-spacing:.015em}html[data-theme=onyx] .metric{border-radius:12px;border-top-width:1px;box-shadow:inset 0 1px 0 #d8bb7c35,0 12px 26px #0003}
html[data-theme=onyx] .metric strong{font-weight:500;font-variant-numeric:tabular-nums;font-size:1.8rem}
html[data-theme=onyx] .panel{border-radius:12px;box-shadow:0 8px 30px #0002}
html[data-theme=onyx] .primary{color:#20190e;border-color:#ddc18a}
html[data-theme=onyx] .nav button.active{box-shadow:inset 0 2px var(--purple)}
html[data-theme=onyx] button{border-radius:8px}
}
@keyframes aurora-glow{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
@media(prefers-reduced-motion:reduce){html[data-theme=aurora] .metric:after{animation:none}}
.theme-preview{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.theme-preview span{padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:var(--panel)}.theme-preview .positive{color:var(--green)}.theme-preview .negative{color:var(--pink)}