html[data-theme="light"]{
  --bg:#ffffff;--bg-2:#f3f6fb;--panel:#ffffff;--panel-2:#f5f7fb;
  --line:rgba(17,24,39,.10);--line-soft:rgba(17,24,39,.06);
  --text:#11161f;--text-soft:#515b70;--text-faint:#8b93a6;
  --blue:#2f78db;--blue-glow:rgba(47,120,219,.26);
  --teal:#0f9a7e;--teal-glow:rgba(15,154,126,.24);
  --green:#0fa873;--green-glow:rgba(15,168,115,.24);
  --gold:#bd820c;--gold-glow:rgba(189,130,12,.24);
  --coral:#e24a23;--coral-glow:rgba(226,74,35,.24);
  --rose:#df3568;--rose-glow:rgba(223,53,104,.24);
  --violet:#6a4fe0;--violet-glow:rgba(106,79,224,.26);
  --o:#6a4fe0;--o-glow:rgba(106,79,224,.26);
  --c:#bd820c;--c-glow:rgba(189,130,12,.24);
  --e:#e24a23;--e-glow:rgba(226,74,35,.24);
  --a:#0f9a7e;--a-glow:rgba(15,154,126,.24);
  --n:#df3568;--n-glow:rgba(223,53,104,.24);
  --brand-blue:#2f78db;--brand-gradient:linear-gradient(120deg,#9b87ff,#5b9bf5);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 12px 30px rgba(16,24,40,.06);
  --disp:"Outfit",system-ui,sans-serif;--sans:"Archivo",-apple-system,sans-serif;--mono:"IBM Plex Mono",monospace;
}
html[data-theme="dark"]{
  --bg:#0b0d14;--bg-2:#10131d;--panel:#141826;--panel-2:#191e2e;
  --line:rgba(255,255,255,.08);--line-soft:rgba(255,255,255,.05);
  --text:#e9ecf4;--text-soft:#a6acc0;--text-faint:#697089;
  --blue:#5b9bf5;--blue-glow:rgba(91,155,245,.45);
  --teal:#34c6a8;--teal-glow:rgba(52,198,168,.45);
  --green:#3fd1a3;--green-glow:rgba(63,209,163,.45);
  --gold:#f0b13c;--gold-glow:rgba(240,177,60,.45);
  --coral:#ff6f4d;--coral-glow:rgba(255,111,77,.45);
  --rose:#ff5d7e;--rose-glow:rgba(255,93,126,.45);
  --violet:#9b87ff;--violet-glow:rgba(155,135,255,.45);
  --o:#9b87ff;--o-glow:rgba(155,135,255,.50);
  --c:#f0b13c;--c-glow:rgba(240,177,60,.45);
  --e:#ff6f4d;--e-glow:rgba(255,111,77,.45);
  --a:#34c6a8;--a-glow:rgba(52,198,168,.45);
  --n:#ff5d7e;--n-glow:rgba(255,93,126,.45);
  --brand-blue:#5b9bf5;--brand-gradient:linear-gradient(120deg,#9b87ff,#5b9bf5);
  --shadow:none;
  --disp:"Outfit",system-ui,sans-serif;--sans:"Archivo",-apple-system,sans-serif;--mono:"IBM Plex Mono",monospace;
}
html[data-theme] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] body::before{background:radial-gradient(900px 600px at 80% -8%, rgba(106,79,224,.08), transparent 60%),radial-gradient(700px 500px at 6% 14%, rgba(47,120,219,.07), transparent 60%),radial-gradient(900px 700px at 50% 112%, rgba(15,154,126,.05), transparent 60%)}
html[data-theme="dark"] body::before{background:radial-gradient(900px 600px at 80% -8%, rgba(155,135,255,.10), transparent 60%),radial-gradient(700px 500px at 6% 14%, rgba(91,155,245,.07), transparent 60%),radial-gradient(900px 700px at 50% 112%, rgba(52,198,168,.06), transparent 60%)}
html[data-theme="light"] body::after{background-image:radial-gradient(rgba(15,19,32,.05) 1px, transparent 1px);opacity:.55}
html[data-theme="dark"] body::after{background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);opacity:.40}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.78)}
html[data-theme="dark"] .topbar{background:rgba(11,13,20,.72)}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.theme-toggle{height:32px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text-soft);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:0 11px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s;white-space:nowrap}
.theme-toggle:hover{color:var(--text);border-color:rgba(127,127,127,.28);transform:translateY(-1px)}
.theme-toggle::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--brand-gradient);box-shadow:0 0 12px var(--violet-glow)}
.brand-logo-dark,.brand-mark-dark{display:none}
html[data-theme="dark"] .brand-logo-dark,html[data-theme="dark"] .brand-mark-dark{display:block}
html[data-theme="dark"] .brand-logo-light,html[data-theme="dark"] .brand-mark-light{display:none}
html[data-theme="light"] .brand-logo-light,html[data-theme="light"] .brand-mark-light{display:block}
html[data-theme="light"] .brand-logo-dark,html[data-theme="light"] .brand-mark-dark{display:none}
@media(max-width:560px){.theme-toggle{width:32px;padding:0;justify-content:center}.theme-toggle-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
