/* Portal theme: Basecoat's variables mapped onto the Lusic tokens (brand/tokens.css, copied from site/ at deploy),
   plus the few layout pieces Basecoat does not ship. Colours come only from tokens.
   Basecoat's components read --color-* aliases that are resolved on :root, so the mapping lives on :root.
   Name clash: both define --muted (Lusic: secondary text; Basecoat: a surface). tokens.css loads after Basecoat so
   --muted keeps the Lusic meaning, and Basecoat's surface is set through its alias --color-muted instead. */
:root{
  --background:var(--paper);--foreground:var(--ink);
  --card:var(--surface);--card-foreground:var(--ink);--popover:var(--surface);--popover-foreground:var(--ink);
  --primary:var(--brand);--primary-foreground:var(--on-brand);
  --secondary:var(--purple-soft);--secondary-foreground:var(--purple);
  --color-muted:var(--surface-2);--muted-foreground:var(--muted);
  --accent:var(--purple-soft);--accent-foreground:var(--ink);
  --destructive:var(--danger);--border:var(--line);--input:var(--line-strong);--ring:var(--purple);
  --chart-1:var(--lusic-l);
  --sidebar:var(--surface);--sidebar-foreground:var(--ink);--sidebar-primary:var(--brand);--sidebar-primary-foreground:var(--on-brand);
  --sidebar-accent:var(--purple-soft);--sidebar-accent-foreground:var(--purple);--sidebar-border:var(--line);--sidebar-ring:var(--purple);
  --bar:var(--lusic-l);
}
@media (prefers-color-scheme:dark){:root{--bar:var(--purple)}}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans)}
code,pre,.mono{font-family:var(--font-mono)}

/* Shell */
.side-head{padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.side-head img{height:32px;width:auto;display:block}
.side-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-xs)}
.side-user .who{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:32px;height:32px;flex:none;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--purple-soft);color:var(--purple);font-weight:600}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) max(16px,var(--sp-6));border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px)}
.topbar .crumb{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.topbar .crumb b{color:var(--ink);font-weight:500}
.spacer{flex:1}
.page{max-width:1200px;margin:0 auto;padding:var(--sp-6) max(16px,var(--sp-6)) var(--sp-12);display:grid;gap:var(--sp-4)}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.page-head h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.01em;margin:0}
.page-head p{color:var(--muted);margin:var(--sp-1) 0 0}

/* Grids */
.grid-3{display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--sp-4);align-items:start}
.grid-2{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-4);align-items:start}
.grid-2w{display:grid;grid-template-columns:8fr 4fr;gap:var(--sp-4);align-items:start}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}.grid-3>.wide{grid-column:1/-1}.grid-2,.grid-2w{grid-template-columns:1fr}}
@media (max-width:440px){.grid-3{grid-template-columns:1fr}}
.card{min-width:0}

/* Stat, note, status */
.stat-value{font-size:var(--fs-stat);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sub{color:var(--muted);font-size:var(--fs-2xs)}
.badge.note{background:var(--gold-soft);color:var(--gold-text);border-color:transparent}
.badge.ok{background:var(--green-soft);color:var(--green);border-color:transparent}
.badge.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.low .stat-value{color:var(--gold-deep)}

/* Chart */
.chart{display:block;width:100%;height:110px}
.chart .bar{fill:var(--bar)}.chart .grid{stroke:var(--line)}
.axis{display:flex;justify-content:space-between;font:var(--fs-2xs) var(--font-mono);color:var(--muted);margin-top:var(--sp-1)}

/* Tables */
.table-container{overflow-x:auto}
.table td,.table th{white-space:nowrap}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .mono{font-size:var(--fs-2xs)}
.row-actions{display:flex;gap:var(--sp-1);justify-content:flex-end}
.empty-row{color:var(--muted);text-align:center;padding:var(--sp-6)!important}

/* Config box */
pre.config{margin:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-4);font-size:var(--fs-2xs);line-height:1.6;white-space:pre-wrap;word-break:break-all}
.tabs [role=tabpanel]{display:grid;gap:var(--sp-3);padding-top:var(--sp-3)}
.tabs [role=tabpanel][hidden]{display:none}

/* Meters (account pool) */
.meters{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.meter-top{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--muted);margin-bottom:var(--sp-1)}
.progress{height:6px;border-radius:var(--radius-pill);background:var(--surface-2)}
.progress>span{background:var(--bar);border-radius:var(--radius-pill)}
.progress.hot>span{background:var(--gold)}
.pool{display:grid}.pool>div{display:grid;gap:var(--sp-2);padding:var(--sp-3) 0;border-top:1px solid var(--line)}.pool>div:first-child{border-top:0;padding-top:0}
.line{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* Forms in dialogs */
.form{display:grid;gap:var(--sp-4)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media (max-width:440px){.form .two{grid-template-columns:1fr}}
.secret{display:flex;gap:var(--sp-2);align-items:center}.secret code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2xs)}

/* Full-page states (login, errors) */
.center{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-6) max(16px,var(--sp-6))}
.center .card{width:min(420px,100%)}
.center img{height:36px;width:auto}