/* Splatworks — Google / Material-styled UI.
   A clean, friendly console: white surfaces on Google grey, Roboto for text,
   Roboto Mono for data. One signature flourish: the blue→red→yellow→green
   hairline that runs across the top bar and echoes in the loss chart. */
:root{
  /* surfaces & ink */
  --bg:#f1f3f4; --surface:#fff; --surface-2:#f8f9fa; --surface-3:#f1f3f4;
  --line:#dadce0; --line-soft:#e8eaed;
  --ink:#202124; --ink-2:#5f6368; --ink-3:#80868b; --ink-disabled:#bdc1c6;
  /* google accents */
  --blue:#1a73e8; --blue-press:#185abc; --blue-hover:#1b66c9;
  --blue-tint:#e8f0fe; --blue-tint-2:#d2e3fc;
  --red:#d93025; --yellow:#f9ab00; --green:#1e8e3e;
  --focus:rgba(26,115,232,.35);
  /* type */
  --sans:"Roboto","Google Sans",-apple-system,"Segoe UI",system-ui,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  /* radius */
  --r-card:12px; --r-ctrl:8px; --r-pill:999px; --r-dialog:28px;
  /* elevation (Material) */
  --e1:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 3px 0 rgba(60,64,67,.30),0 4px 8px 3px rgba(60,64,67,.15);
  --e3:0 4px 8px 0 rgba(60,64,67,.20),0 8px 24px 4px rgba(60,64,67,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden;
}
b{font-weight:500}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.92em; background:var(--surface-3);
  padding:1px 5px; border-radius:4px; color:var(--ink-2)}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}

/* ── top app bar ─────────────────────────────────────────── */
#topbar{
  position:relative; height:64px; display:flex; align-items:center; gap:16px;
  padding:0 20px; background:var(--surface);
  border-bottom:1px solid var(--line-soft); box-shadow:var(--e1); z-index:5;
}
#topbar::before{ /* signature four-colour hairline */
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--blue) 0 25%,var(--red) 25% 50%,var(--yellow) 50% 75%,var(--green) 75% 100%);
}
.wordmark{
  display:flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:500; font-size:20px; letter-spacing:-.3px; color:var(--ink);
}
.wordmark .glyph{
  display:grid; grid-template-columns:9px 9px; grid-auto-rows:9px; gap:2px;
}
.wordmark .glyph i{display:block; border-radius:2px}
.wordmark .glyph i:nth-child(1){background:var(--blue)}
.wordmark .glyph i:nth-child(2){background:var(--red)}
.wordmark .glyph i:nth-child(3){background:var(--yellow)}
.wordmark .glyph i:nth-child(4){background:var(--green)}
.wordmark span{color:var(--ink)} /* keep name single-colour, dots carry the identity */
.subtitle{font-size:13px; color:var(--ink-2)}
.subtitle em{font-style:normal; color:var(--ink-2)}
@media (max-width:1180px){ .subtitle{display:none} }

.backend-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px 14px;
}
.backend-badge::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px rgba(30,142,62,.15);
}
.backend-badge b{color:var(--ink); font-weight:500}

/* ── stage navigation (segmented) ────────────────────────── */
.stagenav{display:inline-flex; gap:4px; margin-left:8px; background:var(--surface-3);
  padding:4px; border-radius:var(--r-pill)}
.stagenav a{
  font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:7px 16px; border-radius:var(--r-pill); transition:background .15s,color .15s;
}
.stagenav a:hover{background:var(--blue-tint); color:var(--blue); text-decoration:none}
.stagenav a.active{background:var(--surface); color:var(--blue); box-shadow:var(--e1)}

/* ── app layout ──────────────────────────────────────────── */
#app{
  display:grid; grid-template-columns:308px 1fr 344px; gap:1px;
  height:calc(100vh - 64px); background:var(--line-soft);
}
#rail,#telemetry{background:var(--surface); overflow-y:auto}
#stage{position:relative; background:var(--surface-2); overflow:auto;
  display:flex; align-items:flex-start; justify-content:center; padding:28px 24px}

/* ── cards / sections ────────────────────────────────────── */
.card{padding:20px; border-bottom:1px solid var(--line-soft)}
.card h2{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; color:var(--ink); margin-bottom:6px; letter-spacing:-.1px;
}
.card h2 .step{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue);
  font-family:var(--mono); font-size:12px; font-weight:500;
  display:grid; place-items:center;
}
.hint{font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-bottom:14px}
.hint a{font-weight:500}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.1px; cursor:pointer;
  border:1px solid transparent; background:var(--surface); color:var(--blue);
  border-radius:var(--r-pill); padding:10px 20px; min-height:40px; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s,box-shadow .15s,border-color .15s,color .15s;
}
.btn .ic{width:18px; height:18px; flex:none; stroke-width:2}
.btn:hover:not(:disabled){box-shadow:var(--e1)}
.btn:disabled{color:var(--ink-disabled); cursor:not-allowed; background:var(--surface-2)}
/* filled primary */
.btn.primary{background:var(--blue); color:#fff; box-shadow:var(--e1)}
.btn.primary:hover:not(:disabled){background:var(--blue-hover); box-shadow:var(--e2)}
.btn.primary:active:not(:disabled){background:var(--blue-press)}
.btn.primary:disabled{background:var(--surface-2); color:var(--ink-disabled); box-shadow:none}
/* outlined (default file/secondary actions) */
.btn.ghost{background:var(--surface); color:var(--blue); border-color:var(--line)}
.btn.ghost:hover:not(:disabled){background:var(--blue-tint); border-color:var(--blue-tint-2); box-shadow:none}
.btn.ghost:disabled{border-color:var(--line-soft); background:var(--surface-2)}
/* tonal (soft-filled) */
.btn.tonal{background:var(--blue-tint); color:var(--blue)}
.btn.tonal:hover:not(:disabled){background:var(--blue-tint-2); box-shadow:none}
.btn.small{font-size:13px; padding:8px 16px; min-height:36px}

.filerow{display:flex; gap:10px; margin-top:12px}
.filerow .btn{cursor:pointer; flex:1 1 0; min-width:0}
.runrow{display:flex; gap:10px}
.runrow .btn{flex:1 1 0; min-width:0}
.runrow+.runrow{margin-top:10px}
label.btn{cursor:pointer}

/* ── params / inputs ─────────────────────────────────────── */
.param{margin:16px 0}
.param label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--ink-2); margin-bottom:9px;
}
.param label b{color:var(--ink); font-weight:500; font-family:var(--mono); font-size:13px}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:20px;
  background:transparent; accent-color:var(--blue); cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; margin-top:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--blue); border:none; box-shadow:0 1px 3px rgba(60,64,67,.3);
}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 8px var(--focus)}
input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--line)}
input[type=range]::-moz-range-progress{height:4px; border-radius:2px; background:var(--blue)}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border:none; border-radius:50%; background:var(--blue)}

.check{
  display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--ink);
  margin-top:14px; cursor:pointer; user-select:none;
}
.check input{width:18px; height:18px; accent-color:var(--blue); cursor:pointer; flex:none}

select,.select,#rail select,.param select{
  width:100%; margin-top:4px; padding:10px 12px; font-family:var(--sans); font-size:13.5px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-ctrl); cursor:pointer; transition:border-color .15s,box-shadow .15s;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:38px;
}
select:hover,.param select:hover{border-color:var(--ink-3)}
select:focus,.param select:focus,#rail select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--focus)}

/* ── stat grid ───────────────────────────────────────────── */
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px;
}
.stat-grid>div{
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
  padding:12px 12px; display:flex; flex-direction:column; gap:4px;
}
.stat-grid .k{font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-3)}
.stat-grid .v{font-family:var(--mono); font-size:18px; font-weight:500; color:var(--ink)}

/* ── divider label ───────────────────────────────────────── */
.divider{
  display:flex; align-items:center; gap:12px; margin:22px 0 12px;
  font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line-soft)}

/* ── progress ────────────────────────────────────────────── */
.progress{margin-top:16px}
.progress-label{font-size:12.5px; color:var(--blue); font-weight:500; margin-bottom:8px}
.progress-bar{height:6px; background:var(--blue-tint); border-radius:3px; overflow:hidden}
.progress-fill{height:100%; width:2%; background:var(--blue); border-radius:3px; transition:width .25s ease}

/* ── viewport (trainer) ──────────────────────────────────── */
.viewgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:600px; width:100%}
.viewcell{display:flex; flex-direction:column; gap:9px}
.viewcell.wide{grid-column:1/3}
figcaption{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; font-weight:500; color:var(--ink-2);
}
figcaption .tag,figcaption span{font-family:var(--mono); font-weight:400; font-size:12px; color:var(--ink-3)}
.viewcell canvas{
  width:100%; height:auto; background:var(--surface-3);
  border:1px solid var(--line); border-radius:var(--r-ctrl); image-rendering:pixelated; display:block;
}
.viewcell.wide canvas{image-rendering:auto; aspect-ratio:512/360; cursor:grab; background:#202124}
.viewcell.wide canvas:active{cursor:grabbing}

/* ── empty state (trainer stage) ─────────────────────────── */
.empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:6px; padding:32px;
  background:var(--surface-2); z-index:2;
}
.empty[hidden]{display:none}
.empty .empty-badge{
  width:64px; height:64px; border-radius:50%; background:var(--blue-tint);
  display:grid; place-items:center; margin-bottom:14px;
}
.empty .empty-badge svg{width:30px; height:30px; color:var(--blue)}
.empty h3{font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-.2px}
.empty p{font-size:14px; color:var(--ink-2); max-width:340px; line-height:1.55}
.empty .empty-hint{margin-top:8px; font-size:12.5px; color:var(--ink-3)}

/* ── telemetry ───────────────────────────────────────────── */
.readout{padding:20px 20px 6px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.metric{
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
  padding:12px 14px;
}
.metric.big{grid-column:1/3; background:var(--blue-tint); border-color:var(--blue-tint-2)}
.metric .label{display:block; margin-bottom:4px; font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-3)}
.metric.big .label{color:var(--ink-2)}
.metric .value{font-family:var(--mono); font-size:22px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.metric.big .value{font-size:34px; color:var(--blue)}
.metric .unit{font-size:12px; color:var(--ink-3); margin-left:4px}

/* the poses page uses a single-column status readout */
.readout.single{grid-template-columns:1fr}
.readout.single .metric.big{grid-column:1}

/* ── loss scope (data chart) ─────────────────────────────── */
.scope{padding:16px 20px}
.scope figcaption{margin-bottom:10px}
.scope canvas{
  width:100%; height:auto; background:var(--surface); display:block;
  border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
}

/* ── log ─────────────────────────────────────────────────── */
.logwrap{padding:4px 20px 20px}
.logwrap::before{
  content:"Activity"; display:block; font-size:11px; letter-spacing:.3px;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin:8px 0 8px;
}
#log{
  font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word; max-height:220px; overflow-y:auto;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
  padding:12px 14px;
}
#log:empty{display:none}
#log .ph{color:var(--blue)} #log .am{color:var(--yellow)} #log .mg{color:var(--red)}

/* ── snackbar / toast ────────────────────────────────────── */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:#323639; color:#fff; font-size:13.5px; padding:14px 20px;
  border-radius:var(--r-ctrl); z-index:80; box-shadow:var(--e3);
  max-width:min(560px,calc(100vw - 48px));
}
#toast.err{background:#322; box-shadow:var(--e3)}
#toast.err::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--red); margin-right:10px; vertical-align:middle}

/* ── poses page viewport ─────────────────────────────────── */
.viewcell.full{width:100%; max-width:820px}
.viewcell.full canvas{aspect-ratio:720/520; width:100%; cursor:grab;
  background:var(--surface-3); image-rendering:auto}
.viewcell.full canvas:active{cursor:grabbing}
body.busy{cursor:progress}

/* ── export dialog (Material) ────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(32,33,36,.5); backdrop-filter:blur(2px);
  animation:scrimIn .12s ease-out;
}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.modal[hidden]{display:none}
.modal-card{
  width:min(480px,100%); max-height:calc(100vh - 48px); overflow:auto;
  background:var(--surface); border-radius:var(--r-dialog); box-shadow:var(--e3);
  animation:dialogIn .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes dialogIn{from{transform:translateY(10px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px 4px}
.modal-head h3{font-size:22px; font-weight:400; color:var(--ink); letter-spacing:-.2px}
.modal-x{
  background:none; border:none; color:var(--ink-2); font-size:24px; line-height:1;
  width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  transition:background .15s;
}
.modal-x:hover{background:var(--surface-3)}
.modal-body{padding:8px 24px 4px}
.modal-body .hint{font-size:12px}
.modal-foot{display:flex; gap:8px; justify-content:flex-end; padding:14px 20px 20px}
.modal-foot .btn{width:auto; padding:10px 24px}
.modal-foot .btn.ghost{border-color:transparent; background:transparent}
.modal-foot .btn.ghost:hover{background:var(--blue-tint)}
.param-row{display:flex; gap:18px}
.param-row .param{flex:1; margin:16px 0}

.ex-summary{
  margin:6px 0 18px; padding:14px 16px; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:var(--r-ctrl);
}
.ex-counts{font-size:14px; color:var(--ink-2)}
.ex-counts b{color:var(--ink); font-family:var(--mono); font-size:16px; font-weight:500}
.ex-reduce{color:var(--green); font-size:12.5px; font-weight:500; margin-left:8px}
.ex-bar{margin-top:10px; height:6px; border-radius:3px; overflow:hidden; background:var(--blue-tint)}
.ex-bar span{display:block; height:100%; width:100%; background:var(--blue); transition:width .12s ease-out}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1080px){
  body{overflow:auto}
  #app{grid-template-columns:1fr; grid-auto-rows:min-content; height:auto; overflow:visible}
  #rail{order:1} #stage{order:2; min-height:380px} #telemetry{order:3}
  .viewgrid{max-width:none}
  #topbar{flex-wrap:wrap; height:auto; padding:12px 16px; gap:10px}
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}