/* GPU Bench — house classy aesthetic (warm paper, serif headings, mono instrument
   numbers) with its own identity: deep-slate ink + silicon-teal accent.
   Light is the DEFAULT; dark via :root.dark (persisted footer toggle). */

:root{
  --canvas:#FAF9F6; --panel:#FFFFFF; --panel2:#F3F1EC;
  --ink:#1C232B; --body:#3A4450; --muted:#6B7683; --subtle:#98A1AC;
  --hair:#E8E4DB; --hair2:#DDD8CC;
  --accent:#0E7C6B; --accent2:#0A5D51; --accentbg:#E3F1EE;
  --amber:#A96A1F; --amberbg:#F7ECD9; --red:#B03A2E; --redbg:#F6E3E0;
  --green:#2E7D5B; --greenbg:#E2F0E8; --blue:#2D5D8E; --bluebg:#E4EDF6;
  --chip:#EEEBE3; --sidebar:#20262E; --sidebar-ink:#C7CFD8; --sidebar-hi:#FFFFFF;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --shadow:0 1px 2px rgba(28,35,43,.05),0 4px 14px rgba(28,35,43,.05);
}
:root.dark{
  --canvas:#181C21; --panel:#1F252C; --panel2:#242B33;
  --ink:#E8EAEC; --body:#C4CBD3; --muted:#8D97A1; --subtle:#68727D;
  --hair:#2C343D; --hair2:#37414B;
  --accent:#3FB59F; --accent2:#5BC7B2; --accentbg:#173832;
  --amber:#D69A50; --amberbg:#3A2E1C; --red:#D06A5E; --redbg:#3C2320;
  --green:#5CAE87; --greenbg:#1E3529; --blue:#6E9DC9; --bluebg:#1F2E3D;
  --chip:#2A323B; --sidebar:#14181D; --sidebar-ink:#9AA4AE; --sidebar-hi:#E8EAEC;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--canvas);color:var(--body);font-family:var(--sans);
  line-height:1.55;font-size:.9rem}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:700;margin:0 0 .4em}
h1{font-size:1.3rem}h2{font-size:1.08rem}h3{font-size:.95rem}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:.82em}

/* shell */
#shell{display:flex;min-height:100vh}
#side{width:212px;flex:0 0 212px;background:var(--sidebar);color:var(--sidebar-ink);
  padding:14px 0;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;
  height:100vh;overflow-y:auto}
#side .brand{padding:4px 16px 14px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px}
#side .brand b{font-family:var(--serif);font-size:1.05rem;color:var(--sidebar-hi);letter-spacing:.02em}
#side .brand small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sidebar-ink);opacity:.75;margin-top:2px}
#side .grp{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;
  padding:12px 16px 4px}
#side a.nav{display:block;padding:6px 16px;color:var(--sidebar-ink);font-size:.85rem;
  border-left:3px solid transparent}
#side a.nav:hover{color:var(--sidebar-hi);text-decoration:none;background:rgba(255,255,255,.04)}
#side a.nav.on{color:var(--sidebar-hi);border-left-color:var(--accent);background:rgba(255,255,255,.06)}
#side .foot{margin-top:auto;padding:10px 16px;font-size:.7rem;opacity:.6}

#mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;gap:14px;padding:10px 22px;border-bottom:1px solid var(--hair);
  background:var(--panel);position:sticky;top:0;z-index:20}
#topbar h1{margin:0;font-size:1.05rem}
#topbar .sp{flex:1}
#content{padding:20px 22px 60px;max-width:1240px;width:100%}

/* pills / chips / badges */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.7rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.pill.ok{background:var(--greenbg);color:var(--green)}
.pill.warn{background:var(--amberbg);color:var(--amber)}
.pill.bad{background:var(--redbg);color:var(--red)}
.pill.info{background:var(--bluebg);color:var(--blue)}
.pill.accent{background:var(--accentbg);color:var(--accent2)}
.pill.dim{background:var(--chip);color:var(--muted)}
.chip{display:inline-block;background:var(--chip);color:var(--body);border-radius:8px;
  padding:2px 8px;font-size:.75rem;margin:2px 3px 2px 0}

/* cards + grids */
.card{background:var(--panel);border:1px solid var(--hair);border-radius:12px;
  padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}

/* stat tiles: uppercase micro-label -> big serif/mono number -> sub */
.stat{background:var(--panel);border:1px solid var(--hair);border-radius:12px;padding:12px 14px}
.stat .l{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:2px 0}
.stat .v small{font-size:.8rem;color:var(--muted);font-weight:400}
.stat .s{font-size:.72rem;color:var(--muted)}

/* launcher tiles */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.tile{background:var(--panel);border:1px solid var(--hair);border-radius:12px;padding:14px;
  cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(28,35,43,.1)}
.tile .ic{width:34px;height:34px;border-radius:9px;background:var(--accentbg);color:var(--accent2);
  display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:8px}
.tile b{display:block;color:var(--ink);font-size:.88rem}
.tile small{color:var(--muted);font-size:.74rem;line-height:1.35;display:block;margin-top:2px}
.lane{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 8px;border-bottom:1px solid var(--hair);padding-bottom:4px}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:.82rem}
table.t th{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair2);font-weight:600}
table.t td{padding:6px 8px;border-bottom:1px solid var(--hair);vertical-align:top}
table.t tr:hover td{background:var(--panel2)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto}

/* buttons + forms */
button,.btn{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:7px 14px;
  font-size:.83rem;font-weight:600;cursor:pointer;font-family:var(--sans)}
button:hover,.btn:hover{background:var(--accent2)}
button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
button.ghost:hover{background:var(--accentbg)}
button.subtle{background:var(--chip);color:var(--body)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{background:var(--panel);color:var(--ink);border:1px solid var(--hair2);
  border-radius:8px;padding:7px 10px;font-size:.85rem;font-family:var(--sans)}
textarea.mono,input.mono{font-family:var(--mono)}
label.f{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:10px 0 4px}

/* login overlay */
#login{position:fixed;inset:0;background:var(--canvas);z-index:100;display:flex;
  align-items:center;justify-content:center;padding:20px}
#login .box{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:780px;width:100%;
  background:var(--panel);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow)}
#login .left{background:var(--sidebar);color:var(--sidebar-ink);padding:28px}
#login .left h1{color:#fff;font-size:1.35rem}
#login .left p{font-size:.8rem;line-height:1.5}
#login .right{padding:22px 24px}
.roster{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.roster .rp{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--hair);
  border-radius:10px;cursor:pointer}
.roster .rp:hover{border-color:var(--accent)}
.roster .rp.on{border-color:var(--accent);background:var(--accentbg)}
.roster .av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.roster b{font-size:.84rem;color:var(--ink)}
.roster small{color:var(--muted);font-size:.7rem;display:block}
.pinrow{display:flex;gap:8px;margin-top:10px}
.pinrow input{flex:1;font-family:var(--mono);letter-spacing:.4em;text-align:center;font-size:1.1rem}

/* misc */
.banner{border-radius:10px;padding:10px 14px;font-size:.8rem;margin-bottom:14px}
.banner.warn{background:var(--amberbg);color:var(--amber)}
.banner.info{background:var(--bluebg);color:var(--blue)}
.banner.ok{background:var(--greenbg);color:var(--green)}
.hash{font-family:var(--mono);font-size:.68rem;color:var(--subtle);word-break:break-all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.8rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;color:var(--ink)}
pre.code{background:var(--panel2);border:1px solid var(--hair);border-radius:10px;padding:12px;
  font-family:var(--mono);font-size:.74rem;overflow-x:auto;line-height:1.45;color:var(--body)}
.crumb{font-size:.76rem;color:var(--muted);margin-bottom:10px}
.svgwrap{overflow-x:auto}
.empty{color:var(--muted);font-size:.82rem;padding:18px;text-align:center}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--hair2);
  border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.phase{display:flex;gap:0;align-items:center;flex-wrap:wrap;margin:8px 0}
.phase .st{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);
  padding:4px 10px;border:1px solid var(--hair);border-radius:99px;margin:2px 6px 2px 0}
.phase .st.done{background:var(--greenbg);color:var(--green);border-color:transparent}
.phase .st.run{background:var(--amberbg);color:var(--amber);border-color:transparent}
.phase .st.fail{background:var(--redbg);color:var(--red);border-color:transparent}

/* mobile discipline: no sticky sidebars on phones; rows wrap and grow */
@media(max-width:860px){
  #shell{flex-direction:column}
  #side{position:static;height:auto;width:100%;flex:none;flex-direction:row;flex-wrap:wrap;
    align-items:center;padding:8px}
  #side .brand{border:0;margin:0;padding:4px 10px}
  #side .grp{display:none}
  #side a.nav{border-left:0;border-radius:8px;padding:5px 10px}
  #side .foot{display:none}
  #login .box{grid-template-columns:1fr}
  #content{padding:14px 12px 40px}
}