@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
  /* ==== US3 design system — control (dark) is the :root default; light via body.light ==== */
  --bg:#0B1017;--surface:#141C27;--surface-2:#1A2431;--surface-3:#233040;--border:#233040;--border-strong:#324256;
  --text:#E9EEF5;--text-2:#9DAEC2;--text-3:#657588;--brand:#3F9EE3;--brand-2:#5FB0EA;--brand-weak:#132B3F;
  --accent:#25BACB;--accent-weak:#0E2E34;--danger:#F26670;--danger-weak:#341B1F;--warn:#E2A945;--warn-weak:#32280F;
  --ok:#40C08A;--ok-weak:#123026;
  --sidebar-bg:#0A0E15;--sidebar-border:#1B2634;--sidebar-text:#9DAEC2;--sidebar-text-2:#657588;
  --sidebar-active-bg:#152234;--sidebar-active-text:#EAF1F8;--sidebar-group:#5A6A7D;--topbar-bg:#0E1620;--topbar-border:#1B2634;
  --chip:#1A2431;--logo-chip:#FFFFFF;--brand-contrast:#04121E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.4);--shadow-lg:0 18px 50px rgba(0,0,0,.6);
  /* legacy aliases → remapped onto the new system so existing markup keeps working */
  --muted:var(--text-2);--accent2:var(--ok);
  --available:var(--ok);--reserved:var(--accent);--deployed:var(--brand);--maintenance:var(--warn);
  --decomm:var(--danger);--inprod:#8844cc;
  --ff:#0071BC;--level:#e8a020;--hach:#9aa3b2;--rg:#44bb88;--ffpr:#9b59b6;
  --borderb:var(--border-strong);--glow:rgba(63,158,227,0.14);
  --nav-bg:var(--sidebar-bg);--card-bg:var(--surface);--panel-bg:var(--surface);
  --input-bg:var(--surface-2);--overlay-bg:rgba(0,0,0,.6);
}
body.light{
  --bg:#F5F7FA;--surface:#FFFFFF;--surface-2:#F0F3F8;--surface-3:#E7EDF4;--border:#E4E9F1;--border-strong:#D2DAE6;
  --text:#111A2B;--text-2:#4C5A6E;--text-3:#8593A6;--brand:#0B6FB8;--brand-2:#0A5C99;--brand-weak:#E7F1FB;
  --accent:#0E9BAE;--accent-weak:#E0F4F6;--danger:#DA2B36;--danger-weak:#FBEAEB;--warn:#B0730A;--warn-weak:#FAF0DA;
  --ok:#1C9A66;--ok-weak:#E2F4EC;
  --sidebar-bg:#FFFFFF;--sidebar-border:#E4E9F1;--sidebar-text:#4C5A6E;--sidebar-text-2:#8593A6;
  --sidebar-active-bg:#E7F1FB;--sidebar-active-text:#0B6FB8;--sidebar-group:#95A2B3;--topbar-bg:#FFFFFF;--topbar-border:#E4E9F1;
  --chip:#F0F3F8;--logo-chip:#FFFFFF;--brand-contrast:#FFFFFF;
  --shadow:0 1px 2px rgba(17,26,43,.04),0 6px 20px rgba(17,26,43,.06);--shadow-lg:0 16px 46px rgba(17,26,43,.16);
  --glow:rgba(11,111,184,0.10);
  /* legacy aliases MUST be re-declared here: custom props inherit COMPUTED values, so a :root-only
     alias like --card-bg:var(--surface) freezes to the dark surface and never follows body.light. */
  --muted:var(--text-2);--accent2:var(--ok);
  --available:var(--ok);--reserved:var(--accent);--deployed:var(--brand);--maintenance:var(--warn);
  --decomm:var(--danger);--borderb:var(--border-strong);
  --nav-bg:var(--sidebar-bg);--card-bg:var(--surface);--panel-bg:var(--surface);
  --input-bg:var(--surface-2);--overlay-bg:rgba(0,0,0,.5);
}
@keyframes us3in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes us3drawer{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Hanken Grotesk',sans-serif;background:var(--bg);color:var(--text);}