/* ============================================================================
   ACE UI — design system v1
   For ACE Manager. Sim racing server control, built for people who keep it
   open for six hours on a Sunday.

   DIRECTION
   The old UI is navy with gradient-glass cards, orange everywhere, and three
   out of four elements bold. This system keeps the brand (navy cast, orange,
   Exo 2 numerals) and rebuilds everything else around three rules:

     1. Borders separate, shadows float.  Cards are flat with a 1px line.
        Shadow is reserved for things that genuinely sit above the page —
        popovers, modals, toasts. This is why Linear and Vercel read as fast:
        no compositing work, no fake depth.
     2. Orange is a currency.  It marks the primary action, the active nav
        item, the focus ring, and live status. Nothing else. Under ~5% of
        pixels. Accent everywhere = accent nowhere.
     3. Weight before size.  Hierarchy comes from 400/600 contrast and from
        colour steps, not from ten font sizes. 13px is the base — dense-data
        UI standard — and nothing goes below 11px.

   SIGNATURE
   .fleet-strip — every server as a thin lane with a session-time bar.
   53 servers legible in one screen height instead of a wall of cards.
   ========================================================================== */


/* ── TOKENS ─────────────────────────────────────────────────────────────── */

:root{

  /* Surfaces — a luminance ladder, not opacity. Faint cool cast keeps the
     brand navy DNA while reading nearer to neutral than the old #0c1220. */
  --bg:              #090c13;
  --surface:         #10141d;
  --surface-raised:  #161b26;
  --surface-sunken:  #06080f;

  /* Lines do the separating */
  --line:            rgba(255,255,255,.06);
  --line-strong:     rgba(255,255,255,.11);

  /* Text — 4 steps, all AA on --surface */
  --fg:              #e8edf7;   /* 14.9:1 — primary          */
  --fg-muted:        #a2b0c6;   /* 8.0:1  — secondary        */
  --fg-subtle:       #7d8ea8;   /* 5.2:1  — meta, labels     */
  --fg-faint:        #4d5a72;   /*          dividers, disabled only — never text */

  /* Accent — the brand, spent sparingly */
  --accent:          #ff8a1e;
  --accent-hover:    #ffa040;
  --accent-fg:       #1a0d00;   /* 8.0:1 on accent */
  --accent-dim:      rgba(255,138,30,.12);
  --accent-line:     rgba(255,138,30,.28);

  /* Status — one token per meaning */
  --ok:              #2ed47a;
  --warn:            #f5b942;
  --danger:          #ff5a5a;
  --info:            #4c9aff;
  --ok-dim:          rgba(46,212,122,.12);
  --warn-dim:        rgba(245,185,66,.12);
  --danger-dim:      rgba(255,90,90,.12);
  --info-dim:        rgba(76,154,255,.12);
  --ok-line:         rgba(46,212,122,.28);
  --warn-line:       rgba(245,185,66,.28);
  --danger-line:     rgba(255,90,90,.28);
  --info-line:       rgba(76,154,255,.28);

  /* Timing — sim racing convention, deliberately its own scale */
  --purple:          #b46bff;   /* session best */
  --gold:            #f5c842;
  --silver:          #b0b8c1;
  --bronze:          #cd7c3a;

  /* Type */
  --font:            'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:    'Exo 2','Inter',sans-serif;   /* numerals ≥20px + wordmark ONLY */
  --font-mono:       'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  --t-3xl:2rem;      /* 32 — hero metric   */
  --t-2xl:1.5rem;    /* 24 — KPI value     */
  --t-xl:1.25rem;    /* 20 — page title    */
  --t-lg:.9375rem;   /* 15 — section title */
  --t-md:.875rem;    /* 14 — emphasis body */
  --t-base:.8125rem; /* 13 — BASE          */
  --t-sm:.75rem;     /* 12 — meta, labels  */
  --t-xs:.6875rem;   /* 11 — eyebrow, FLOOR */

  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* Space — 4px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Radius — tight reads precise */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;

  /* Elevation — only for things that float */
  --shadow-pop:0 8px 24px -8px rgba(0,0,0,.7), 0 0 0 1px var(--line-strong);
  --shadow-modal:0 24px 64px -12px rgba(0,0,0,.8), 0 0 0 1px var(--line-strong);

  /* Motion */
  --fast:110ms; --base:170ms; --slow:260ms;
  --ease:cubic-bezier(.2,0,0,1);

  /* Layers */
  --z-sticky:100; --z-rail:200; --z-pop:300; --z-overlay:400; --z-modal:500; --z-toast:600;

  /* Layout */
  --rail-w:216px; --rail-w-collapsed:56px; --header-h:52px; --max-w:1440px;

  accent-color:var(--accent);
  caret-color:var(--accent);
  color-scheme:dark;
}


/* ── BASE ───────────────────────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ -webkit-text-size-adjust:100% }

body{
  background:var(--bg); color:var(--fg);
  font:var(--w-regular) var(--t-base)/1.5 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
img,svg{ max-width:100% }
table{ border-collapse:collapse; width:100% }

/* Focus: invisible to mouse, unmissable to keyboard */
:where(a,button,input,select,textarea,summary,[tabindex]):focus{ outline:none }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs);
}

::selection{ background:var(--accent-dim); color:var(--fg) }

*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:var(--r-full); border:3px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-thumb:hover{ background:var(--fg-faint); background-clip:content-box }

@media (pointer:coarse){
  :where(button,a[role=button],.btn,.tab,.nav-item){ min-height:44px }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}


/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */

.h1{ font-size:var(--t-xl); font-weight:var(--w-semibold); letter-spacing:-.015em; line-height:1.25 }
.h2{ font-size:var(--t-lg); font-weight:var(--w-semibold); letter-spacing:-.01em; line-height:1.3 }
.h3{ font-size:var(--t-md); font-weight:var(--w-semibold); line-height:1.35 }
.eyebrow{
  font-size:var(--t-xs); font-weight:var(--w-semibold);
  text-transform:uppercase; letter-spacing:.07em; color:var(--fg-subtle);
}
.muted{ color:var(--fg-muted) }
.subtle{ color:var(--fg-subtle) }

/* Numerals. Exo 2 only at display sizes — its width is an asset on a lap
   time and a liability on a label. */
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.metric{
  font-family:var(--font-display); font-weight:var(--w-bold);
  font-size:var(--t-2xl); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.metric-lg{ font-size:var(--t-3xl) }

.truncate{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.break{ overflow-wrap:anywhere }
.balance{ text-wrap:balance }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }


/* ── LAYOUT ─────────────────────────────────────────────────────────────── */

.app{ display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh }
.app[data-rail=collapsed]{ grid-template-columns:var(--rail-w-collapsed) 1fr }

.main{ min-width:0; display:flex; flex-direction:column }
.content{ flex:1; width:100%; max-width:var(--max-w); margin-inline:auto; padding:var(--s6) var(--s6) var(--s16) }

.stack{ display:flex; flex-direction:column; gap:var(--s3) }
.stack-lg{ display:flex; flex-direction:column; gap:var(--s6) }
.row{ display:flex; align-items:center; gap:var(--s2) }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4) }
.wrap{ flex-wrap:wrap }
.spacer{ flex:1 }

.grid{ display:grid; gap:var(--s3) }
.grid-kpi{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }
.grid-cards{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) }
.grid-main{ grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:var(--s4) }
@media (max-width:1100px){ .grid-main{ grid-template-columns:1fr } }


/* ── NAV RAIL ───────────────────────────────────────────────────────────── */
/* Grouped, because 15 flat peers is a menu you re-scan every time instead of
   learning. The active item gets a 2px orange bar — the only nav colour. */

.rail{
  position:sticky; top:0; height:100vh; z-index:var(--z-rail);
  background:var(--surface-sunken); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.rail-head{
  height:var(--header-h); display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s4); border-bottom:1px solid var(--line); flex:none;
}
.wordmark{
  font-family:var(--font-display); font-weight:var(--w-bold);
  font-size:var(--t-md); letter-spacing:.02em; color:var(--fg);
}
.wordmark b{ color:var(--accent); font-weight:inherit }

.rail-body{ flex:1; overflow-y:auto; padding:var(--s3) var(--s2) var(--s6) }
.nav-group + .nav-group{ margin-top:var(--s5) }
.nav-group-label{ padding:0 var(--s3) var(--s2); font-size:var(--t-xs); font-weight:var(--w-semibold); text-transform:uppercase; letter-spacing:.07em; color:var(--fg-faint) }

.nav-item{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); border-radius:var(--r-sm);
  color:var(--fg-muted); font-size:var(--t-base); font-weight:var(--w-medium);
  cursor:pointer; user-select:none; width:100%; border:none; background:none; text-align:left;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-item:hover{ background:rgba(255,255,255,.04); color:var(--fg) }
.nav-item[aria-current=page]{ background:rgba(255,255,255,.05); color:var(--fg) }
.nav-item[aria-current=page]::before{
  content:''; position:absolute; left:-8px; top:50%; translate:0 -50%;
  width:2px; height:16px; border-radius:var(--r-full); background:var(--accent);
}
.nav-icon{ width:16px; flex:none; text-align:center; font-size:var(--t-md); opacity:.9 }
.nav-badge{ margin-left:auto; font-family:var(--font-mono); font-size:var(--t-xs); color:var(--fg-subtle) }

.rail-foot{ flex:none; padding:var(--s3); border-top:1px solid var(--line) }


/* ── HEADER ─────────────────────────────────────────────────────────────── */

.header{
  position:sticky; top:0; z-index:var(--z-sticky);
  height:var(--header-h); flex:none;
  display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--s6);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.crumb{ display:flex; align-items:center; gap:var(--s2); font-size:var(--t-base); color:var(--fg-subtle) }
.crumb b{ color:var(--fg); font-weight:var(--w-semibold) }
.crumb-sep{ color:var(--fg-faint) }

/* ⌘K — 15 tabs is exactly the case a command palette exists for */
.cmdk{
  display:flex; align-items:center; gap:var(--s2);
  height:28px; padding:0 var(--s2) 0 var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--fg-subtle);
  font-size:var(--t-sm); cursor:pointer; min-width:200px;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.cmdk:hover{ border-color:var(--line-strong); color:var(--fg-muted) }
.kbd{
  font-family:var(--font-mono); font-size:var(--t-xs); line-height:1;
  padding:3px 5px; border-radius:var(--r-xs);
  background:var(--surface-raised); border:1px solid var(--line);
  color:var(--fg-subtle);
}


/* ── BUTTONS ────────────────────────────────────────────────────────────── */
/* At most ONE .btn-primary per view. On the current server tab, Start/Stop/
   Save/Apply/Restart all shout equally, so the eye reads five to find one. */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:32px; padding:0 var(--s3);
  font-size:var(--t-base); font-weight:var(--w-medium); line-height:1;
  border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:disabled{ opacity:.4; cursor:not-allowed }
.btn-sm{ height:26px; padding:0 var(--s2); font-size:var(--t-sm) }
.btn-lg{ height:38px; padding:0 var(--s5); font-size:var(--t-md) }
.btn-block{ width:100% }
.btn-icon{ width:32px; padding:0 }
.btn-icon.btn-sm{ width:26px }

.btn-primary{ background:var(--accent); color:var(--accent-fg); font-weight:var(--w-semibold) }
.btn-primary:hover:not(:disabled){ background:var(--accent-hover) }

.btn-default{ background:var(--surface-raised); border-color:var(--line-strong); color:var(--fg) }
.btn-default:hover:not(:disabled){ background:#1c2231; border-color:rgba(255,255,255,.16) }

.btn-ghost{ background:transparent; color:var(--fg-muted) }
.btn-ghost:hover:not(:disabled){ background:rgba(255,255,255,.05); color:var(--fg) }

.btn-danger{ background:var(--danger-dim); border-color:var(--danger-line); color:var(--danger) }
.btn-danger:hover:not(:disabled){ background:rgba(255,90,90,.2) }

.btn-group{ display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; gap:2px }
.btn-group .btn{ height:26px; border-radius:var(--r-xs); background:none; border:none; color:var(--fg-subtle) }
.btn-group .btn[aria-pressed=true]{ background:var(--surface-raised); color:var(--fg) }


/* ── CARDS ──────────────────────────────────────────────────────────────── */
/* Flat. One border. No gradient, no ::before accent bar (decoration that
   appears on 100% of cards carries 0 information). No hover lift — a grid of
   53 lifting cards shimmers when you sweep the mouse. */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); min-width:0;
}
.card-link{ display:block; transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease); cursor:pointer }
.card-link:hover{ border-color:var(--line-strong); background:var(--surface-raised) }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line) }
.card-title{ font-size:var(--t-md); font-weight:var(--w-semibold); letter-spacing:-.005em }
.card-body{ padding:var(--s4) }
.card-body-flush{ padding:0 }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s2) var(--s4); border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--fg-subtle) }

/* KPI */
.kpi{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2) }
.kpi-label{ font-size:var(--t-xs); font-weight:var(--w-semibold); text-transform:uppercase; letter-spacing:.07em; color:var(--fg-subtle) }
.kpi-value{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-2xl); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.kpi-foot{ display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--fg-subtle) }
.delta{ display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-size:var(--t-sm); font-variant-numeric:tabular-nums }
.delta-up{ color:var(--ok) } .delta-down{ color:var(--danger) } .delta-flat{ color:var(--fg-subtle) }


/* ── STATUS ─────────────────────────────────────────────────────────────── */

.dot{ width:6px; height:6px; border-radius:var(--r-full); flex:none; background:var(--fg-faint) }
.dot-live{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim) }
.dot-warn{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-dim) }
.dot-down{ background:var(--danger); box-shadow:0 0 0 3px var(--danger-dim) }
.dot-pulse{ animation:pulse 2.4s var(--ease) infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

.badge{
  display:inline-flex; align-items:center; gap:var(--s1);
  height:20px; padding:0 var(--s2);
  font-size:var(--t-xs); font-weight:var(--w-semibold); line-height:1;
  letter-spacing:.02em; border-radius:var(--r-xs);
  border:1px solid transparent; white-space:nowrap;
}
.badge-ok{ background:var(--ok-dim); border-color:var(--ok-line); color:var(--ok) }
.badge-warn{ background:var(--warn-dim); border-color:var(--warn-line); color:var(--warn) }
.badge-danger{ background:var(--danger-dim); border-color:var(--danger-line); color:var(--danger) }
.badge-info{ background:var(--info-dim); border-color:var(--info-line); color:var(--info) }
.badge-accent{ background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent) }
.badge-muted{ background:rgba(255,255,255,.05); border-color:var(--line); color:var(--fg-subtle) }

.pill{ display:inline-flex; align-items:center; gap:var(--s1); height:22px; padding:0 var(--s2); border-radius:var(--r-full); background:var(--surface-raised); border:1px solid var(--line); font-size:var(--t-sm); color:var(--fg-muted) }


/* ── SIGNATURE: FLEET STRIP ─────────────────────────────────────────────── */
/* A card grid needs ~180px per server. This needs 28px. At 53 servers that is
   the difference between five screens of scrolling and one glance. The bar is
   session time remaining, so a host sees at once which sessions are about to
   roll over. */

.fleet-strip{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.lane{
  display:grid; grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) 68px 120px 56px;
  align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); min-height:34px;
  border-bottom:1px solid var(--line);
  font-size:var(--t-base);
  transition:background var(--fast) var(--ease);
  cursor:pointer;
}
.lane:last-child{ border-bottom:none }
.lane:hover{ background:var(--surface-raised) }
.lane-off{ color:var(--fg-subtle) }
.lane-off .lane-name{ color:var(--fg-subtle) }
.lane-name{ font-weight:var(--w-medium); color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lane-comm{ color:var(--fg-faint); font-weight:var(--w-regular) }
.lane-track{ font-size:var(--t-sm); color:var(--fg-subtle); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lane-players{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--t-sm); color:var(--fg-muted); text-align:right; white-space:nowrap }

.lane-bar{ position:relative; height:4px; border-radius:var(--r-full); background:rgba(255,255,255,.07); overflow:hidden }
.lane-bar span{ position:absolute; inset:0 auto 0 0; border-radius:inherit; background:var(--ok); transition:width var(--slow) var(--ease) }
.lane-bar.is-race span{ background:var(--accent) }
.lane-bar.is-qual span{ background:var(--info) }
.lane-time{ font-family:var(--font-mono); font-size:var(--t-sm); color:var(--fg-subtle); font-variant-numeric:tabular-nums; text-align:right }

@media (max-width:900px){
  .lane{ grid-template-columns:auto minmax(0,1fr) auto; row-gap:2px; padding:var(--s2) var(--s3) }
  .lane-track{ grid-column:2/3; font-size:var(--t-sm) }
  .lane-players{ grid-column:3/4; grid-row:1 }
  .lane-bar{ grid-column:2/-1 }
  .lane-time{ display:none }
}


/* ── TABLES ─────────────────────────────────────────────────────────────── */
/* 32px rows, sticky header, tabular numerals, no zebra. Zebra + hover + border
   is three separators doing one job; hover alone is enough and much calmer. */

.table-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:auto; max-height:70vh }
.table{ font-size:var(--t-base) }
.table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-sunken);
  font-size:var(--t-xs); font-weight:var(--w-semibold);
  text-transform:uppercase; letter-spacing:.07em; color:var(--fg-subtle);
  text-align:left; padding:var(--s2) var(--s3); height:34px;
  border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.table th[aria-sort]{ cursor:pointer; user-select:none }
.table th[aria-sort]:hover{ color:var(--fg) }
.table th[aria-sort=ascending]::after{ content:' ↑'; color:var(--accent) }
.table th[aria-sort=descending]::after{ content:' ↓'; color:var(--accent) }
.table tbody td{ padding:var(--s2) var(--s3); height:36px; border-bottom:1px solid var(--line); color:var(--fg-muted) }
.table tbody tr:last-child td{ border-bottom:none }
.table tbody tr{ transition:background var(--fast) var(--ease) }
.table tbody tr:hover{ background:var(--surface-raised) }
.table td.n,.table th.n{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--fg) }
.table .primary-cell{ color:var(--fg); font-weight:var(--w-medium) }
.table-compact tbody td{ height:30px }

.pos{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:20px; border-radius:var(--r-xs);
  font-family:var(--font-mono); font-size:var(--t-sm); font-weight:var(--w-semibold);
  background:rgba(255,255,255,.05); color:var(--fg-muted); font-variant-numeric:tabular-nums;
}
.pos-1{ background:rgba(245,200,66,.14); color:var(--gold) }
.pos-2{ background:rgba(176,184,193,.14); color:var(--silver) }
.pos-3{ background:rgba(205,124,58,.14); color:var(--bronze) }

.toolbar{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3) }
.pagination{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--fg-subtle) }

/* Below 700px a wide table becomes rows of label/value pairs — never a
   horizontal scrollbar. Add data-label="…" to each <td>. */
@media (max-width:700px){
  .table-responsive thead{ display:none }
  .table-responsive tbody tr{ display:block; padding:var(--s2) var(--s3); border-bottom:1px solid var(--line) }
  .table-responsive tbody td{ display:flex; justify-content:space-between; gap:var(--s3); height:auto; padding:3px 0; border:none }
  .table-responsive tbody td::before{ content:attr(data-label); color:var(--fg-subtle); font-size:var(--t-sm) }
}


/* ── FORMS ──────────────────────────────────────────────────────────────── */

.field{ display:flex; flex-direction:column; gap:6px }
.label{ font-size:var(--t-sm); font-weight:var(--w-medium); color:var(--fg-muted) }
.hint{ font-size:var(--t-sm); color:var(--fg-subtle); line-height:1.45 }
.input,.select,.textarea{
  width:100%; height:32px; padding:0 var(--s3);
  background:var(--surface-sunken); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); color:var(--fg); font-size:var(--t-base);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.textarea{ height:auto; min-height:80px; padding:var(--s2) var(--s3); line-height:1.5; resize:vertical }
.input::placeholder{ color:var(--fg-faint) }
.input:hover,.select:hover,.textarea:hover{ border-color:rgba(255,255,255,.18) }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim) }
.input[aria-invalid=true]{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-dim) }
.select{ appearance:none; padding-right:var(--s6); background-image:linear-gradient(45deg,transparent 50%,var(--fg-subtle) 50%),linear-gradient(135deg,var(--fg-subtle) 50%,transparent 50%); background-position:calc(100% - 15px) 14px,calc(100% - 11px) 14px; background-size:4px 4px; background-repeat:no-repeat }

.form-grid{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.field-full{ grid-column:1/-1 }

.switch{ position:relative; display:inline-flex; align-items:center; gap:var(--s3); cursor:pointer }
.switch input{ position:absolute; opacity:0; width:0; height:0 }
.switch-track{ width:34px; height:20px; border-radius:var(--r-full); background:var(--surface-raised); border:1px solid var(--line-strong); flex:none; transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease) }
.switch-track::after{ content:''; display:block; width:14px; height:14px; margin:2px; border-radius:var(--r-full); background:var(--fg-subtle); transition:translate var(--fast) var(--ease), background var(--fast) var(--ease) }
.switch input:checked + .switch-track{ background:var(--accent); border-color:var(--accent) }
.switch input:checked + .switch-track::after{ translate:14px 0; background:var(--accent-fg) }
.switch input:focus-visible + .switch-track{ outline:2px solid var(--accent); outline-offset:2px }

.search{ position:relative; flex:1; min-width:180px; max-width:320px }
.search .input{ padding-left:var(--s8) }
.search::before{ content:'⌕'; position:absolute; left:11px; top:50%; translate:0 -50%; color:var(--fg-subtle); font-size:var(--t-md) }


/* ── DROPDOWN / TOOLTIP ─────────────────────────────────────────────────── */

.menu{
  position:absolute; z-index:var(--z-pop); min-width:180px; padding:var(--s1);
  background:var(--surface-raised); border-radius:var(--r-sm);
  box-shadow:var(--shadow-pop);
  animation:pop var(--fast) var(--ease);
}
@keyframes pop{ from{ opacity:0; translate:0 -4px } to{ opacity:1; translate:0 } }
.menu-item{ display:flex; align-items:center; gap:var(--s2); width:100%; padding:var(--s2) var(--s2); border:none; background:none; border-radius:var(--r-xs); color:var(--fg-muted); font-size:var(--t-base); text-align:left; cursor:pointer }
.menu-item:hover{ background:rgba(255,255,255,.06); color:var(--fg) }
.menu-item-danger{ color:var(--danger) }
.menu-sep{ height:1px; margin:var(--s1) 0; background:var(--line) }

.tip{ position:relative }
.tip::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; translate:-50% 0;
  padding:5px var(--s2); border-radius:var(--r-xs); white-space:nowrap;
  background:var(--surface-raised); box-shadow:var(--shadow-pop);
  font-size:var(--t-sm); color:var(--fg); opacity:0; pointer-events:none;
  transition:opacity var(--fast) var(--ease); z-index:var(--z-pop);
}
.tip:hover::after,.tip:focus-visible::after{ opacity:1 }


/* ── MODAL / TOAST ──────────────────────────────────────────────────────── */

.overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  display:flex; align-items:center; justify-content:center; padding:var(--s4);
  background:rgba(3,5,10,.7); backdrop-filter:blur(6px);
  animation:fade var(--base) var(--ease);
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.modal{
  width:min(520px,100%); max-height:85vh; overflow:auto; z-index:var(--z-modal);
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-modal);
  animation:rise var(--base) var(--ease);
}
@keyframes rise{ from{ opacity:0; translate:0 8px; scale:.99 } to{ opacity:1; translate:0; scale:1 } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--line) }
.modal-body{ padding:var(--s5) }
.modal-foot{ display:flex; justify-content:flex-end; gap:var(--s2); padding:var(--s3) var(--s5); border-top:1px solid var(--line) }

.toasts{ position:fixed; right:var(--s4); bottom:var(--s4); z-index:var(--z-toast); display:flex; flex-direction:column-reverse; gap:var(--s2); max-width:min(380px,calc(100vw - 32px)) }
.toast{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) var(--s4); border-left:2px solid var(--fg-faint);
  background:var(--surface-raised); border-radius:var(--r-sm);
  box-shadow:var(--shadow-pop); font-size:var(--t-base);
  animation:slide var(--base) var(--ease);
}
@keyframes slide{ from{ opacity:0; translate:0 8px } to{ opacity:1; translate:0 } }
.toast-ok{ border-left-color:var(--ok) }
.toast-warn{ border-left-color:var(--warn) }
.toast-danger{ border-left-color:var(--danger) }


/* ── STATES ─────────────────────────────────────────────────────────────── */

.empty{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); padding:var(--s16) var(--s5); text-align:center }
.empty-icon{ font-size:1.75rem; opacity:.4 }
.empty-title{ font-size:var(--t-md); font-weight:var(--w-semibold); color:var(--fg) }
.empty-body{ font-size:var(--t-base); color:var(--fg-subtle); max-width:40ch; line-height:1.55 }
.empty .btn{ margin-top:var(--s3) }

.error-state{ display:flex; gap:var(--s3); padding:var(--s4); border-radius:var(--r-md); background:var(--danger-dim); border:1px solid var(--danger-line) }
.error-title{ font-size:var(--t-md); font-weight:var(--w-semibold); color:var(--danger) }
.error-body{ font-size:var(--t-base); color:var(--fg-muted); line-height:1.55 }

/* Skeletons match final dimensions so nothing jumps when data lands */
.skel{ background:linear-gradient(90deg,var(--surface) 25%,var(--surface-raised) 37%,var(--surface) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:var(--r-xs) }
@keyframes skel{ 0%{ background-position:100% 50% } 100%{ background-position:0 50% } }
.skel-text{ height:10px; margin:5px 0 }
.skel-title{ height:16px; width:38% }
.skel-metric{ height:26px; width:60% }

.spinner{ width:14px; height:14px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:var(--r-full); animation:spin .7s linear infinite }
@keyframes spin{ to{ rotate:360deg } }


/* ── CHARTS ─────────────────────────────────────────────────────────────── */
/* Deliberately CSS/SVG only — no chart library. At this data density a
   sparkline and a bar row do the whole job and cost nothing to load. */

.spark{ display:block; width:100%; height:36px; overflow:visible }
.spark path{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.spark .area{ fill:var(--accent-dim); stroke:none }

.bars{ display:flex; flex-direction:column; gap:var(--s2) }
.bar-row{ display:grid; grid-template-columns:minmax(0,1fr) 1.6fr auto; align-items:center; gap:var(--s3); font-size:var(--t-base) }
.bar-label{ color:var(--fg-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bar-track{ height:6px; border-radius:var(--r-full); background:rgba(255,255,255,.06); overflow:hidden }
.bar-fill{ height:100%; border-radius:inherit; background:var(--accent); transition:width var(--slow) var(--ease) }
.bar-value{ font-family:var(--font-mono); font-size:var(--t-sm); color:var(--fg-subtle); font-variant-numeric:tabular-nums }

.gauge{ height:4px; border-radius:var(--r-full); background:rgba(255,255,255,.07); overflow:hidden }
.gauge span{ display:block; height:100%; border-radius:inherit; background:var(--ok); transition:width var(--slow) var(--ease) }
.gauge-warn span{ background:var(--warn) } .gauge-danger span{ background:var(--danger) }


/* ── ACTIVITY FEED ──────────────────────────────────────────────────────── */

.feed{ display:flex; flex-direction:column }
.feed-item{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s3); align-items:start; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line) }
.feed-item:last-child{ border-bottom:none }
.feed-icon{ width:22px; height:22px; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--surface-raised); font-size:var(--t-sm) }
.feed-text{ font-size:var(--t-base); color:var(--fg-muted); line-height:1.45; min-width:0 }
.feed-text b{ color:var(--fg); font-weight:var(--w-medium) }
.feed-time{ font-family:var(--font-mono); font-size:var(--t-sm); color:var(--fg-faint); white-space:nowrap }


/* ── TABS ───────────────────────────────────────────────────────────────── */

.tabs{ display:flex; gap:var(--s1); border-bottom:1px solid var(--line); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none }
.tabs::-webkit-scrollbar{ display:none }
.tab{
  flex:none; scroll-snap-align:start; padding:var(--s3) var(--s3);
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  font-size:var(--t-base); font-weight:var(--w-medium); color:var(--fg-subtle); cursor:pointer;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tab:hover{ color:var(--fg-muted) }
.tab[aria-selected=true]{ color:var(--fg); border-bottom-color:var(--accent) }


/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* Four breakpoints total, replacing fourteen. */

@media (max-width:1100px){
  .app{ grid-template-columns:var(--rail-w-collapsed) 1fr }
  .nav-item span:not(.nav-icon){ display:none }
  .nav-group-label{ display:none }
  .rail-head .wordmark{ display:none }
}
@media (max-width:900px){
  .content{ padding:var(--s4) var(--s4) var(--s12) }
  .header{ padding:0 var(--s4) }
}
@media (max-width:600px){
  .app{ grid-template-columns:1fr }
  .rail{ position:fixed; inset:auto 0 0 0; height:auto; flex-direction:row; border-right:none; border-top:1px solid var(--line) }
  .rail-head,.rail-foot,.nav-group-label{ display:none }
  .rail-body{ display:flex; padding:var(--s1); overflow-x:auto }
  .nav-group{ display:flex; margin:0!important }
  .nav-item{ flex-direction:column; gap:2px; font-size:var(--t-xs); padding:var(--s2) var(--s3) }
  .nav-item[aria-current=page]::before{ left:50%; top:auto; bottom:-4px; translate:-50% 0; width:16px; height:2px }
  .content{ padding:var(--s3) var(--s3) 76px }
  .cmdk{ min-width:0 }
  .cmdk span,.cmdk .kbd{ display:none }
  .toasts{ left:var(--s3); right:var(--s3); bottom:76px; max-width:none }
  .modal{ width:100%; align-self:flex-end; border-radius:var(--r-lg) var(--r-lg) 0 0 }
}
@media (min-width:2200px){ :root{ --max-w:1760px } }