/* Lusic theme for Basecoat, shared by lusic.top and the model API portal (api.lusic.top loads it as /brand/, copied at
   deploy): Basecoat's variables mapped onto the Lusic tokens (tokens.css), plus the layout pieces Basecoat does not ship
   (app shell, page heading, grids, stats, charts, meters). 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);
  /* Lusic UI scale into Basecoat (text sizes, radii) */
  --text-xs:var(--fs-2xs);--text-xs--line-height:calc(16/12);--text-sm:var(--fs-sm);--text-sm--line-height:calc(20/14);
  --text-base:var(--fs-md);--text-base--line-height:1.5;--text-lg:var(--fs-lg);--text-lg--line-height:calc(26/18);
  --radius-xl:var(--radius);
}
@media (prefers-color-scheme:dark){:root{--bar:var(--purple)}}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-feature-settings:var(--font-features);font-size:var(--fs-sm);line-height:var(--lh-sm);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
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;flex-direction:row;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) var(--sp-6) var(--sp-8);display:grid;gap:var(--sp-4)}
@media (max-width:640px){.page{padding:var(--sp-4) var(--sp-4) var(--sp-8)}}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.page-head h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-weight:600;letter-spacing:var(--tracking-tight);margin:0}
.page-head p{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-sm);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}
/* Lusic density: Basecoat's cards use 24px padding and gaps; the shared template is 16/12 */
.card{gap:var(--sp-3);padding-block:var(--sp-4)}
.card>header,.card>section,.card>footer{padding-inline:var(--sp-4)}
.card>header>:is(h2,h3){font-size:var(--fs-md);line-height:var(--lh-md);font-weight:600;letter-spacing:var(--tracking-tight)}
.stat-value{line-height:var(--lh-stat)}
.btn.block{width:100%}

/* 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}

/* Dialogs: a clearer title than Basecoat's default */
.dialog>*>header>h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}

/* Visually hidden, still read by screen readers */
.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}