/* ============================================================================
   AEON//BENCH — "CALIBRATED SIGNAL" v18
   A lab instrument, not a neon poster.
   Rules of the material system:
     - cyan  = interactive/brand chrome ONLY (links, active tab, focus, primary)
     - magenta = REC light ONLY (live, running jobs, admin, arena side B)
     - green/amber/red = verdicts + trust ONLY
     - glow is spent on things happening NOW (live pings, #1 card, reveal)
     - mono = data readouts · system sans = prose annotations
     - uppercase = the micro-label role only
   ========================================================================== */

:root {
  --frontier: #ff9f1c;
  --god: #b026ff;
}

.elig-badge.frontier {
  border-color: rgba(255, 159, 28, .55);
  background: linear-gradient(90deg, rgba(255, 159, 28, .22), rgba(0, 240, 255, .12));
  color: #ffd6a0;
}

.frontier-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 159, 28, .35);
  border-radius: 999px;
  color: #ffd6a0;
  background: rgba(255, 159, 28, .08);
  font: 11px/1.2 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.model-avatar.frontier {
  object-fit: contain;
  padding: 8px;
  background: #05070b;
}

.inline-keybox {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
  border-radius: var(--r-m);
}

.inline-keybox summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
}

.inline-keybox[open] summary {
  color: var(--text);
  margin-bottom: 8px;
}

.local-only-callout {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 52%, var(--line));
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: color-mix(in srgb, var(--warn) 86%, var(--text));
  border-radius: var(--r-m);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:root {
  /* surfaces */
  --bg: #07070d; --panel: #0d0d15; --panel2: #12121d;
  --line: #262640; --border-strong: #3b3b5e; --chip: #0e1119; --well: #0a0a13;
  /* text */
  --text: #e3e3ee; --muted: #9494b8; --faint: #6e6e92;
  /* roles — one job each */
  --accent: #00f0ff; --accent-ink: #051318;
  --live: #ff2e97; --accent2: #ff2e97;
  --good: #3ddc85; --warn: #ffb454; --bad: #ff5d7a;
  /* rank metals (rank numerals only) */
  --r1: #e8c268; --r2: #aab4c8; --r3: #c98a5e;
  /* shape */
  --r-s: 4px; --r-m: 8px; --r-pill: 999px;
  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 120ms; --t-med: 240ms; --t-slow: 550ms;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@property --pct { syntax: '<number>'; inherits: true; initial-value: 0; }

* { box-sizing: border-box; }

/* ---------------------------------------------------------------- base */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 13px/1.55 ui-monospace, "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
  background-image:
    radial-gradient(1100px at 50% 0, rgba(0, 240, 255, .045), transparent 70%),
    linear-gradient(rgba(0, 240, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .02) 1px, transparent 1px);
  background-size: 100% 900px, 56px 56px, 56px 56px;
  background-repeat: no-repeat, repeat, repeat;
}
::selection { background: var(--accent); color: #00121a; }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #2e2e4a; border-radius: 5px; }
::-webkit-scrollbar-track { background: #0a0a12; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }

/* the ONE uppercase role: engraved micro-labels */
.catk, .mcard-complabel, .subs-day, .live-feed-h, .tabgroup::before,
.flabel, .vlabel, th {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  font-size: 10px; color: var(--faint);
}

/* annotation voice: prose is a different material than data */
.note, .runblurb, .arena-howto, .board-empty, .elignote, .lede,
.modal-card p, summary, .how p, footer {
  font-family: var(--sans);
}
.note { color: var(--muted); font-size: 12px; margin-top: 6px; text-align: center; }
.lede { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; text-align: left; }
.mono { font-family: ui-monospace, monospace; }
.num, .composite, .meter-val, .catv, .hscore, .subs-s, .mcard-rank { font-variant-numeric: tabular-nums; }

.pass { color: var(--good); } .part { color: var(--warn); } .fail { color: var(--bad); }
.err { color: var(--bad); } .ok { color: var(--good); } .warn { color: var(--warn); }

/* ---------------------------------------------------------------- header */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;                       /* auth cluster and Tip the Dev were nearly touching on prod */
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0, 240, 255, .25);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .05) 3px 4px),
    linear-gradient(180deg, #0c0c16, #090911);
}
.brand { font-size: 18px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; }
.brand b { color: var(--accent); text-shadow: 0 0 6px rgba(0, 240, 255, .35); }
.brand .tag { color: var(--faint); font-size: 11px; letter-spacing: 1.5px; background: none; padding: 0; }
.suite { color: var(--faint); font-size: 11px; letter-spacing: .5px; }
header .suite { margin-left: 14px; }
.hauth { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ev-who { font-size: 13px; color: var(--text); }
.ev-credit { font-size: 11px; color: var(--faint); }
.ev-in { padding: 7px 14px; font-weight: 700; }
.ev-out { padding: 5px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- layout */
main { max-width: 2400px; margin: 18px auto; padding: 0 28px; display: grid; gap: 16px; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);
  animation: panelIn var(--t-med) var(--ease-out);
}
/* hero panels outrank supporting panels */
#boardPanel, #arenaPanel {
  border-top: 2px solid var(--accent);
  background: linear-gradient(180deg, #0e0e18, var(--panel) 120px);
}
#boardPanel h2::before, #arenaPanel h2::before { content: "// "; color: var(--accent); font-weight: 400; }

h2 { margin: 0 0 12px; font-size: 16px; font-weight: 650; color: var(--text); letter-spacing: .2px; }

footer {
  color: var(--faint); font-size: 11px; text-align: center; padding: 18px;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.foot-fine { max-width: 720px; margin: 10px auto 0; }

/* ---- Tip jar ------------------------------------------------------------ */
/* Header + footer "Tip the Dev" trigger. Cyan = interactive (system law);
   the ♥ carries the warmth in magenta so the button stays on-brand. */
/* Tip the Dev: same chamfer grammar as .act-btn but keeps its own voice — cyan label,
   magenta ♥, and the glow pop moved INSIDE the plate (the corner notch clips outer shadows). */
.tip-btn {
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 0;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  padding: 6px 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: background var(--t, .15s) var(--ease-out, ease), border-color .15s, box-shadow .15s, transform .1s;
}
.tip-hi { color: var(--live); font-weight: 700; }   /* the ♥ glyph — magenta, text stays cyan */
.tip-btn:hover {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
}
.tip-btn:active { transform: translateY(1px) scale(.98); }
.tip-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.tip-btn-lg { font-size: 13px; padding: 8px 18px; }

.tipjar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; max-width: 760px; margin: 0 auto 4px; text-align: left;
}
.tipjar-msg { color: var(--muted); font-size: 12px; line-height: 1.5; flex: 1 1 320px; }

/* ---- Tip modal ---------------------------------------------------------- */
.tip-card { max-width: 460px; text-align: center; }
.tip-heart {
  font-size: 34px; line-height: 1; color: var(--live);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--live) 60%, transparent));
  animation: tipbeat 2.4s ease-in-out infinite;
}
@keyframes tipbeat { 0%, 90%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .tip-heart { animation: none; } }
.tip-title { margin: 8px 0 6px; font-size: 18px; letter-spacing: .3px; }
.tip-blurb { color: var(--muted); font-size: 13.5px; line-height: 1.62; margin: 0 auto 16px; max-width: 40ch; }
.tip-patreon {
  display: block; text-decoration: none; text-align: center;
  background: linear-gradient(180deg, #ff4d86, var(--live)); color: #1a0410;
  font-weight: 700; font-size: 13.5px; padding: 11px 14px; border-radius: var(--r-m);
  box-shadow: 0 0 18px color-mix(in srgb, var(--live) 35%, transparent);
  transition: filter .15s, box-shadow .15s, transform .1s;
}
.tip-patreon:hover { filter: brightness(1.08); box-shadow: 0 0 26px color-mix(in srgb, var(--live) 50%, transparent); }
.tip-patreon:active { transform: translateY(1px); }
.tip-patreon-sub { display: block; font-weight: 500; font-size: 11px; opacity: .82; margin-top: 2px; }
.tip-or {
  display: flex; align-items: center; gap: 10px; margin: 16px 2px 12px;
  color: var(--faint); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
}
.tip-or::before, .tip-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* chain selector → QR + address + copy/open-in-wallet */
.tip-crypto { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tip-chains {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px;
}
.tip-chip {
  background: transparent; color: var(--muted); border: 0; border-radius: 999px;
  padding: 5px 14px; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; transition: background .14s, color .14s;
}
.tip-chip:hover { color: var(--text); }
.tip-chip.is-active { background: var(--accent); color: var(--accent-ink); }
/* QR sits on a white card — needed for reliable scanning against the dark theme */
.tip-qr {
  width: 168px; height: 168px; padding: 8px; background: #fff;
  border-radius: var(--r-m); box-shadow: 0 4px 20px rgba(0, 0, 0, .5); display: grid; place-items: center;
}
.tip-qr img { width: 152px; height: 152px; display: block; }
.tip-addr {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--text);
  word-break: break-all; line-height: 1.55; max-width: 34ch; margin: 0 auto;
}
.tip-actions { display: flex; gap: 8px; }
.tip-copy, .tip-wallet-open {
  background: transparent; color: var(--accent); text-decoration: none; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-s);
  padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tip-copy:hover, .tip-wallet-open:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.tip-copy.copied { color: var(--ok, #37e39b); border-color: color-mix(in srgb, var(--ok, #37e39b) 55%, transparent); }
.tip-note { color: var(--faint); font-size: 11px; line-height: 1.5; margin-top: 14px; }

.spin { display: inline-block; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- tabs */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.tabgroup { display: flex; gap: 2px; position: relative; padding-top: 15px; margin-right: 18px; flex: none; }
.tabgroup::before {
  content: attr(data-label); position: absolute; top: 2px; left: 8px;
  font-family: var(--sans); font-size: 9px; letter-spacing: .09em;
}
.tabgroup:not(:has(.tab:not([hidden]))) { display: none; }
.tab {
  background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  border-radius: var(--r-s) var(--r-s) 0 0; padding: 9px 14px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text); border-bottom-color: var(--accent);
  background: linear-gradient(180deg, transparent, rgba(0, 240, 255, .05));
}
.tab[data-live]::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
  display: inline-block; margin-right: 6px; vertical-align: 1px;
}
.tab[data-live].has-live::before { background: var(--live); animation: pingBg 1.6s var(--ease-out) infinite; }
.admin-tab { color: var(--live); }

/* ---------------------------------------------------------------- controls */
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input, select {
  background: var(--well); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 7px 9px; font-size: 13px; font-family: inherit; min-width: 150px;
  transition: border-color var(--t-fast);
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
button {
  cursor: pointer; border-radius: var(--r-s); border: 1px solid var(--border-strong);
  background: var(--panel2); color: var(--text); padding: 8px 12px; font-size: 13px; font-family: inherit;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast),
              filter var(--t-fast), transform 60ms ease;
}
button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
button.primary:hover { filter: brightness(1.12); }
button.ghost { padding: 7px 10px; }
button.ghost:hover { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }

.status { margin-top: 10px; font-size: 13px; color: var(--muted); min-height: 18px; }

/* range sliders */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; min-width: 0; padding: 0; border: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--border-strong); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -6px; background: var(--accent); border-radius: 2px; }
input[type=range]::-moz-range-track { height: 4px; background: var(--border-strong); border-radius: 2px; }
input[type=range]::-moz-range-thumb { width: 10px; height: 16px; border: 0; background: var(--accent); border-radius: 2px; }

/* selection checkboxes on cards */
.rsel { -webkit-appearance: auto; appearance: auto; width: 15px; height: 15px; min-width: 0;
  padding: 0; margin: 0; border: 0; background: none; accent-color: var(--accent); cursor: pointer; }

/* chips + tags + badges */
.chip {
  background: var(--chip); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: 12px; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.chip.clear { color: var(--bad); border-style: dashed; }
.flegend { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; }

.tag {
  display: inline-block; background: var(--chip); color: var(--muted); border: 1px solid var(--line);
  padding: 1px 8px; border-radius: var(--r-pill); font-size: 11px; line-height: 1.5; white-space: nowrap;
}
.tag.tested { background: rgba(61, 220, 133, .12); color: var(--good); border-color: rgba(61, 220, 133, .4); }
.tag.declared { background: transparent; color: var(--muted); border-style: dashed; }

.capbox {
  display: inline-block; font-size: 10.5px; letter-spacing: .2px;
  padding: 2px 7px; margin: 2px 4px 2px 0; border: 1px solid; line-height: 1.5; white-space: nowrap;
  border-radius: var(--r-s);
}
.capbox.on.tested { color: var(--good); border-color: rgba(61, 220, 133, .5); background: rgba(61, 220, 133, .11); }
/* declared = a claim, not a verdict and not a control: muted + dashed (matches .tag.declared) */
.capbox.on.declared { color: var(--muted); border-color: var(--border-strong); border-style: dashed; background: transparent; }
.capbox.off { color: var(--faint); border-color: var(--line); }
.capnone { color: var(--faint); font-size: 11px; }

.elig-badge {
  display: inline-block; font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase;
  padding: 1px 7px; margin-left: 7px; border: 1px solid; border-radius: var(--r-pill); vertical-align: middle; line-height: 1.5;
}
.elig-badge.verified { color: var(--good); border-color: rgba(61, 220, 133, .55); background: rgba(61, 220, 133, .1); }
.elig-badge.local { color: var(--faint); border-color: var(--line); background: transparent; }
.elig-badge.run { color: var(--live); border-color: rgba(255, 46, 151, .55); background: rgba(255, 46, 151, .12); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .elig-badge.run { animation: none; } }

.ev-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border: 1px solid; border-radius: var(--r-pill); }
.ev-badge.ok { color: var(--good); border-color: rgba(61, 220, 133, .5); background: rgba(61, 220, 133, .1); }
.ev-badge.pending { color: var(--warn); border-color: rgba(255, 180, 84, .45); background: rgba(255, 180, 84, .08); }
.ev-badge.bad { color: var(--bad); border-color: rgba(255, 93, 122, .5); background: rgba(255, 93, 122, .08); }
.ev-badge.disputed { background: rgba(255, 180, 84, .14); color: var(--warn); border: 1px solid rgba(255, 180, 84, .5); cursor: help; }

/* ---------------------------------------------------------------- launch / "run a benchmark" (mothership, demoted) */
.run-details summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text);
  list-style-position: outside; padding: 2px 0;
}
.run-details summary:hover { color: var(--accent); }
.run-details summary::marker { color: var(--accent); }
.run-details[open] summary { margin-bottom: 12px; }
.launch .row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.launch .runblurb { margin: 0 0 14px; max-width: 68ch; line-height: 1.6; color: var(--muted); text-align: left; font-size: 13px; }
.launch .runcta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.launch .runcta a {
  text-decoration: none; display: inline-block; padding: 8px 14px; border-radius: var(--r-s);
  border: 1px solid var(--border-strong); color: var(--text);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.launch .runcta a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.launch .runcta a.primary:hover { filter: brightness(1.12); }
.launch .runcta a.ghost:hover { border-color: var(--accent); color: var(--accent); }
.launch .runquick {
  margin: 0; padding: 12px 14px; border-radius: var(--r-s); overflow-x: auto;
  background: var(--well); border: 1px solid var(--line); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  font-size: 12.5px; line-height: 1.5;
}
.launch .runquick code { white-space: pre; }

/* progressive-disclosure explainers */
details.how { margin: 0 0 12px; text-align: left; }
details.how summary { cursor: pointer; color: var(--faint); font-size: 12px; }
details.how summary:hover { color: var(--muted); }
details.how[open] summary { color: var(--muted); margin-bottom: 4px; }
details.how .note { text-align: left; max-width: 78ch; }

/* ---------------------------------------------------------------- leaderboard head + tools */
.lbhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.weights-wrap { text-align: right; }
.weights-wrap summary {
  cursor: pointer; display: inline-block; color: var(--muted); font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.weights-wrap summary:hover { color: var(--text); border-color: var(--border-strong); }
.weights-wrap[open] summary { color: var(--accent); border-color: var(--accent); }
.weights { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 10px 2px 2px; justify-content: flex-end; }
.weights .w { font-size: 10px; color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.weights input[type=range] { width: 84px; height: 18px; }
.weights span[id^="wv-"] { color: var(--muted); font-weight: 700; }
.weights .w:active span[id^="wv-"] { color: var(--accent); }

.lbtools {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 14px; margin-bottom: 16px;
}
.lbtools .eligbar, .lbtools .vramfilter { border: 0; background: none; padding: 0; margin: 0; }
.lbtools .filters { border-bottom: 0; padding-bottom: 0; margin: 0; }

.eligbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.eligtoggle { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; color: var(--good); white-space: nowrap; }
.eligtoggle input { accent-color: var(--good); min-width: 0; }
.elignote { font-size: 11.5px; color: var(--muted); }
.elignote b.ev-ok { color: var(--good); }
.elignote a { color: var(--accent); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flabel { margin-right: 2px; }

.vramfilter { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.vramfilter:empty { display: none; }
.vramfilter select { min-width: 170px; }
.vramfilter input[type=range] { flex: 1 1 140px; min-width: 120px; max-width: 300px; height: 18px; }
.vramfilter .vval { font-size: 12px; color: var(--muted); min-width: 58px; text-align: right; }

.board-empty { color: var(--muted); font-size: 13px; line-height: 1.6; padding: 18px 10px; text-align: left; }
.board-empty b { color: var(--text); }

.grid2 { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1700px) { .grid2 { grid-template-columns: minmax(0, 1fr) 700px; } }

/* ---------------------------------------------------------------- model cards */
#board.mcards { display: flex; flex-direction: column; gap: 12px; }
.mcard {
  display: grid;
  grid-template-columns: 26px 34px 52px minmax(200px, 1fr) auto;
  grid-template-areas:
    "sel rank ava id comp"
    "metrics metrics metrics metrics metrics";
  align-items: center; column-gap: 16px; row-gap: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 16px 20px; position: relative; overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.mcard:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.mcard.hint { border-color: var(--accent); }
.mcard.top { box-shadow: inset 3px 0 0 var(--accent), 0 0 32px rgba(0, 240, 255, .08); }
.mcard.top:hover { box-shadow: inset 3px 0 0 var(--accent), 0 0 32px rgba(0, 240, 255, .08), 0 8px 24px rgba(0, 0, 0, .45); }
.mcard.top::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(0, 240, 255, .06), transparent);
  transform: skewX(-12deg); pointer-events: none; opacity: 0;   /* exists only during the hover sweep */
}
.mcard.top:hover::before { animation: sweep .7s var(--ease-out) forwards; }

.mcard-sel { grid-area: sel; display: flex; align-items: center; }
.mcard-rank { grid-area: rank; text-align: right; font-size: 15px; color: var(--faint); }
.mcard.p1 .mcard-rank { color: var(--r1); font-size: 20px; font-weight: 700; }
.mcard.p2 .mcard-rank { color: var(--r2); font-size: 20px; font-weight: 700; }
.mcard.p3 .mcard-rank { color: var(--r3); font-size: 20px; font-weight: 700; }

.mcard-ava { grid-area: ava; line-height: 0; }
.model-creator { display: inline-flex; flex: 0 0 auto; line-height: 0; border: 0; }
.model-avatar {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; object-fit: cover;
  background: var(--panel2); border: 1px solid var(--border-strong);
  vertical-align: middle; transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.model-creator:hover .model-avatar { border-color: var(--accent); }
.model-avatar.own { border-color: var(--accent2); }
.mcard-ava .model-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-width: 2px; }
.mcard:hover .model-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.mcard[data-trust="verified"] .model-avatar { border-color: rgba(61, 220, 133, .6); }

.mcard-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.mcard-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
/* action buttons always wrap to their OWN line under the model name (never crowd the rank ghost) */
.mcard-acts { flex-basis: 100%; display: flex; align-items: center; gap: 10px; }
.mcard-name .mlink { font-size: 16px; font-weight: 600; color: var(--text); border: 0;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.mcard-name .mlink:hover { color: var(--accent); }
.mcard-vram { font-size: 11px; color: var(--faint); }
/* served-context chip — quiet mono, same grammar on board rows / run detail / bench cards */
.mcard-ctx { font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  background: var(--chip); padding: 0 6px; border-radius: 2px; white-space: nowrap; }
.mcard-caps { display: flex; flex-wrap: wrap; gap: 5px; }

.mlink { cursor: pointer; color: var(--text); border-bottom: 1px dotted var(--faint); }
.mlink:hover { color: var(--accent); border-color: var(--accent); }
.get-model-btn {
  flex: 0 0 auto; display: inline-block; padding: 2px 10px; font-size: 11px; line-height: 1.6;
  letter-spacing: .3px; white-space: nowrap; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--panel2); color: var(--muted);
  text-decoration: none; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.get-model-btn:hover { color: var(--accent); border-color: var(--accent); }
.get-model-btn[hidden] { display: none; }

/* composite gauge ring — the signature element */
.mcard-comp {
  grid-area: comp; position: relative; width: 76px; height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  justify-self: end;
}
.mcard-comp::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--band, var(--faint)) calc(var(--pct, 0) * 1%), rgba(38, 38, 64, .55) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79%);
          mask: radial-gradient(closest-side, transparent 78%, #000 79%);
}
.mcard-comp.pass { --band: var(--good); } .mcard-comp.part { --band: var(--warn); }
.mcard-comp.fail { --band: var(--bad); }
.mcard-comp .composite { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.1; }
.mcard-complabel { font-size: 7.5px; }
.fresh .mcard-comp::before { animation: ringIn .8s var(--ease-out) backwards; }

/* category meters: calibrated tracks */
.mcard-metrics {
  grid-area: metrics; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.catchip, .spdchip { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.catchip .meter { width: 100%; min-width: 88px; height: 24px; }
.spdchip .catv { font-weight: 700; font-size: 15px; color: var(--text); }

.meter {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-end;
  width: 100%; max-width: none; height: 20px; border-radius: var(--r-s); overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(38, 38, 64, .8) calc(25% - 1px) 25%),
    var(--well);
  border: 1px solid #191926;
}
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .85; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.meter-val { position: relative; z-index: 1; padding: 0 6px; font-weight: 700; font-size: 12px; }
.meter.pass .meter-fill { background: var(--good); opacity: .38; } .meter.pass .meter-val { color: var(--good); }
.meter.part .meter-fill { background: var(--warn); opacity: .34; } .meter.part .meter-val { color: var(--warn); }
.meter.fail .meter-fill { background: var(--bad); opacity: .30; }  .meter.fail .meter-val { color: var(--bad); }
.meter.na { border: 0; background: none; color: var(--faint); justify-content: center; }

/* first-load choreography (gated by #board.fresh, set in JS) */
.fresh .mcard { animation: cardIn .35s var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 12) * 28ms); }
.fresh .meter-fill { transform-origin: left; animation: fillIn var(--t-slow) var(--ease-out) backwards; }

/* ---------------------------------------------------------------- radar + legend */
.chartwrap { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; text-align: center; }
#radar polygon.series { transform-origin: 320px 250px; transform-box: view-box; animation: radarPop .5s var(--ease-pop) backwards; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 3px 4px; padding: 3px 10px;
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted);
  background: var(--chip); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.legend-chip:hover { color: var(--text); border-color: var(--border-strong); }
.legend-chip.sel { color: var(--text); border-color: var(--accent); }
.legend-chip i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }

/* ---------------------------------------------------------------- tables (shared) */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { padding-bottom: 8px; }
td.num, th.num { text-align: right; font-family: ui-monospace, monospace; }
tbody tr:hover { background: rgba(0, 240, 255, .05); }
tbody tr.clickable:hover { background: rgba(0, 240, 255, .05); cursor: pointer; }
.rank { color: var(--faint); }
.model { font-weight: 600; }
.evidence { color: var(--muted); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#detail { width: 100%; }
@media (min-width: 921px) { #detail { table-layout: fixed; } }

/* ---------------------------------------------------------------- harness heatmap */
.harness-wrap { overflow-x: auto; }
.harness-tbl { width: 100%; border-collapse: collapse; }
.harness-tbl th, .harness-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.harness-tbl th.model, .harness-tbl td.model { text-align: left; }
.harness-tbl td.model { min-width: 260px; }
.harness-tbl th.hcol a { color: var(--accent); text-decoration: none; }
.harness-tbl td.hcell { background: rgba(61, 220, 133, calc(var(--s, 0) * .16)); }
.harness-tbl td.hcell .hscore { font-size: 18px; color: var(--text); font-weight: 600; }
.harness-tbl td.hcell.hbest .hscore { font-weight: 700; }
.harness-tbl td.hcell.hbest .hscore::after {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--good); margin-left: 5px; vertical-align: 3px;
}
.harness-tbl td.hcell .hver { display: block; font-size: 10px; color: var(--faint); }
.harness-tbl td.hcell.na {
  background: repeating-linear-gradient(45deg, transparent 0 4px, #15151f 4px 5px);
  color: var(--faint);
}
.harness-tbl tr:hover .hscore { text-shadow: 0 0 8px rgba(227, 227, 238, .35); }   /* neutral pointing reward — green would assert a verdict on 0-scores too */
.hmodel { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hmodel .model-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.hmodel-name { font-size: 14px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- compare */
/* symmetric picker bar: two balanced chamfered plates — run-vs-run and seed A/B.
   auto-fit: when the seed plate hides (no seeds yet) the runs plate takes the full width. */
.cmp-pickbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px; margin: 4px 0 16px; }
.cmp-pick {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 14px; min-width: 0;
  border: 1px solid var(--border-strong); background:
    linear-gradient(135deg, transparent 5px, var(--border-strong) 5px 6.5px, transparent 6.5px),
    linear-gradient(315deg, transparent 5px, var(--border-strong) 5px 6.5px, transparent 6.5px),
    var(--panel);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
/* engraved plate title, centered between hairline rules */
.cmp-plate-t {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.cmp-plate-t::before, .cmp-plate-t::after { content: ""; flex: 1 1 20px; height: 1px; background: var(--line); }
.cmp-plate-t .cmp-vs { color: var(--muted); letter-spacing: .08em; }
.cmp-plate-body { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cmp-side-l { flex-direction: row; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; min-width: 0; flex: 1 1 180px; }
.cmp-side-l select { flex: 1 1 auto; min-width: 0; width: 100%; }
.cmp-key {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800;
  color: var(--faint); border: 1px solid var(--line);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.cmp-key.a { color: var(--accent); border-color: rgba(0, 240, 255, .5); background: rgba(0, 240, 255, .07); }
.cmp-key.b { color: var(--accent2); border-color: rgba(255, 46, 151, .5); background: rgba(255, 46, 151, .07); }
.cmp-vs-mark { color: var(--faint); font-size: 14px; flex: none; }
@media (max-width: 900px) { .cmp-pickbar { grid-template-columns: 1fr; } }
.cmp-badge { font-size: 12px; }
.cmp-ab { padding: 2px 10px; border-radius: var(--r-pill); font-weight: 600; font-family: var(--sans); }
.cmp-ab.ok { background: rgba(61, 220, 133, .12); color: var(--good); border: 1px solid rgba(61, 220, 133, .4); }
.cmp-ab.warn { background: rgba(255, 180, 84, .12); color: var(--warn); border: 1px solid rgba(255, 180, 84, .4); }
.cmp-seedtag { color: var(--muted); }
.cmp-sec { margin: 18px 0; }
.cmp-sec h3 { margin: 0 0 8px; font-size: 14px; }
.cmp-sec h3 .note { font-weight: 400; }
.cmp-sec h3 .c2-only { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 10px; }
/* fixed layout: the N model columns share the width EQUALLY — symmetric by construction */
.cmp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.cmp-tbl th, .cmp-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right;
  overflow: hidden; text-overflow: ellipsis; }
.cmp-tbl th:first-child, .cmp-tbl td:first-child, .cmp-tbl td.cmp-cat, .cmp-tbl td.cmp-cid { text-align: left; }
.cmp-tbl th:first-child { width: 130px; }
.cmp-cases th:first-child { width: 82px; }
.cmp-cases th:nth-child(2) { width: 26%; }
.cmp-tbl thead th { border-bottom: 1px solid var(--border-strong); }
.cmp-tbl td.num { font-family: ui-monospace, monospace; }
/* per-row leader: unmistakable — green ring + fill, not just bold */
.cmp-win { color: var(--good); font-weight: 700; background: rgba(61, 220, 133, .16);
  box-shadow: inset 0 0 0 1px rgba(61, 220, 133, .38); }
.cmp-win::before { content: "▸ "; color: var(--good); }
.cmp-comp td { border-top: 1px solid var(--border-strong); font-weight: 700; color: var(--text); }
.cmp-cases td.cmp-cid { color: var(--muted); font-size: 11.5px; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tbl td.cmp-q { text-align: center; font-weight: 700; }
.cmp-q.pass { background: rgba(61, 220, 133, .12); }
.cmp-q.fail { background: rgba(255, 93, 122, .10); }
.cmp-q.part { background: rgba(255, 180, 84, .10); }
.cmp-q.na { color: var(--faint); }
.cmp-diff { font-size: 11px; letter-spacing: .04em; }
.cmp-diff.t-easy { color: var(--good); } .cmp-diff.t-medium { color: var(--muted); }
.cmp-diff.t-hard { color: var(--warn); } .cmp-diff.t-expert { color: var(--bad); }
.cmp-diff.t-god_mode { color: var(--god); text-shadow: 0 0 10px rgba(176, 38, 255, .48); }

/* ---------------------------------------------------------------- submissions */
.subs-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .subs-wrap { grid-template-columns: 330px minmax(0, 1fr); } }
.subs-list {
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); max-height: 72vh; overflow: auto;
}
.subs-filter { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.subs-day { padding: 6px 10px; background: #0d0d18; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line); }
.subs-row {
  /* rank · avatar · identity(1fr) · compare-pick · score · time */
  display: grid; grid-template-columns: auto 36px minmax(0, 1fr) auto auto auto;
  gap: 10px; padding: 12px 10px; align-items: center;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.subs-row .subs-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.subs-row:hover { background: rgba(0, 240, 255, .05); transform: translateX(2px); border-left-color: var(--border-strong); }
.subs-row.sel { background: rgba(0, 240, 255, .08); box-shadow: inset 3px 0 0 var(--accent); }
.subs-row.flagged { opacity: .55; }
.subs-ava { line-height: 0; flex: 0 0 auto; }
.subs-ava .model-avatar { width: 36px; height: 36px; flex: 0 0 36px; }
.subs-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.subs-m { font-size: 14px; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
.subs-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.subs-b { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; }
.subs-s { font-weight: 700; font-size: 18px; color: var(--muted); text-align: right; }
.subs-s.pass { color: var(--good); } .subs-s.part { color: var(--warn); } .subs-s.fail { color: var(--bad); }
.subs-st { color: var(--faint); font-size: 10px; }
.subs-t { color: var(--faint); font-size: 11px; white-space: nowrap; }
.subs-detail { min-width: 0; }
.sub-meta h3 { margin: 0 0 4px; }
.sub-actions { margin: 8px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sub-cases { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* Performance board: ranked throughput cards → per-model drill-down.
   Same card grammar as the leaderboard — machined chamfer plates, rank metals,
   reticle acquire on hover — so the perf list reads as the same instrument. */
.perf-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
/* shared machined chamfer plate — base for .pcard (Performance) and .gal-card
   (Code Gallery). Geometry + facets + reticle ONLY: each component keeps its
   own layout, rank metals and .top/.first + focus cascade. */
.chamfer-card {
  --facet: var(--border-strong);
  background:
    linear-gradient(135deg, transparent 6.5px, var(--facet) 6.5px 8px, transparent 8px),
    linear-gradient(315deg, transparent 6.5px, var(--facet) 6.5px 8px, transparent 8px),
    var(--panel2);
  border: 1px solid var(--line); border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  position: relative; isolation: isolate;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.chamfer-card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
/* reticle acquire — identical grammar to .mcard::after */
.chamfer-card::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 1;
  --bk: rgba(0, 240, 255, .55);
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 9px 1px,
    linear-gradient(var(--bk), var(--bk)) top left     / 1px 9px,
    linear-gradient(var(--bk), var(--bk)) top right    / 9px 1px,
    linear-gradient(var(--bk), var(--bk)) top right    / 1px 9px,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 9px 1px,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 1px 9px,
    linear-gradient(var(--bk), var(--bk)) bottom right / 9px 1px,
    linear-gradient(var(--bk), var(--bk)) bottom right / 1px 9px;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity var(--t-fast);
}
.chamfer-card:hover::after, .chamfer-card:focus-visible::after { opacity: 1; }
.pcard {
  display: grid;
  grid-template-columns: 34px 40px minmax(200px, 1fr) auto auto;
  grid-template-areas: "rank ava id stats spark";
  align-items: center; column-gap: 16px;
  padding: 12px 18px; cursor: pointer;
}
.pcard-rank { grid-area: rank; text-align: right; font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pcard.p1 .pcard-rank { color: var(--r1); font-size: 19px; font-weight: 700; }
.pcard.p2 .pcard-rank { color: var(--r2); font-size: 19px; font-weight: 700; }
.pcard.p3 .pcard-rank { color: var(--r3); font-size: 19px; font-weight: 700; }
/* #1: the gold reserved for the top rank (same spend as gallery-first / arena-top) */
.pcard.top { border-color: rgba(232, 194, 104, .5); box-shadow: inset 3px 0 0 var(--r1), inset 0 0 34px rgba(232, 194, 104, .05); }
.pcard.top:hover { box-shadow: inset 3px 0 0 var(--r1), inset 0 0 34px rgba(232, 194, 104, .05), inset 0 1px 0 rgba(255, 255, 255, .07); }
/* clip-path eats outlines — keyboard focus is re-provisioned as an inset ring (kept last: beats .top) */
.pcard:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.pcard-ava { grid-area: ava; line-height: 0; }
.pcard-ava .model-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-width: 2px; }
.pcard:hover .model-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.pcard-id { grid-area: id; min-width: 0; }
.pcard-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pcard-stats { grid-area: stats; display: flex; gap: 20px; align-items: flex-end; justify-self: end; }
.pcard-stats .spdchip { align-items: flex-end; text-align: right; }
.pcard-hero .catv { font-size: 22px; }
.pcard-spark { grid-area: spark; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; justify-self: end; }
.spark { width: 140px; height: 34px; display: block; }
.spark-axis { stroke: var(--line); stroke-width: 1; }
.spark-line { fill: none; stroke: #5ee0ff; stroke-width: 1.6; opacity: .9; }
.spark-dot { fill: #5ee0ff; }
@media (max-width: 860px) {
  .pcard { grid-template-columns: 26px 40px minmax(0, 1fr);
    grid-template-areas: "rank ava id" "stats stats stats" "spark spark spark"; row-gap: 10px; }
  .pcard-stats { justify-self: start; flex-wrap: wrap; gap: 12px 18px; }
  .pcard-stats .spdchip { align-items: flex-start; text-align: left; }
  .pcard-spark { align-items: flex-start; justify-self: start; }
}

/* drill-down chrome */
.perf-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
.perf-head .model-avatar { width: 34px; height: 34px; }
.perf-head-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.perf-head-run { color: var(--faint); font-size: 11px; }
.perf-mets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.perf-better { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 10px; color: var(--faint); }
.perf-grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; margin-top: 10px; }
@media (max-width: 980px) { .perf-grid2 { grid-template-columns: 1fr; } }
.perf-card { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); padding: 12px 14px; min-width: 0; }
.perf-h3 { margin: 10px 0 6px; font-size: 14px; }
.perf-h3 .micro { color: var(--faint); font-weight: 400; font-size: 11px; }
.perf-svg { width: 100%; height: auto; display: block; }
.perf-svg .pgrid { stroke: var(--line); stroke-width: 1; }
.perf-svg .ptick { fill: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; }
/* legend in the engraved micro-label voice; sharp swatches (no pill radius on data) */
.perf-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 2px 0 8px;
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }
.perf-lg { display: inline-flex; align-items: center; gap: 5px; }
.perf-lg i { width: 10px; height: 3px; display: inline-block; }
.perf-heat { border-collapse: collapse; font-family: ui-monospace, monospace; font-size: 12px; width: 100%; }
.perf-heat th { color: var(--faint); padding: 5px 8px; text-align: left; }   /* micro voice via the global th rule */
.perf-heat td { padding: 6px 8px; border: 1px solid var(--bg); border-radius: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.perf-heat td.ph-na { color: var(--faint); text-align: center; }
.perf-harnesst { margin-top: 4px; max-width: 640px; }

/* Replicate-this-serve card: the attested docker startup flags as a TERMINAL ARTIFACT —
   engraved micro header, scanlined recessed well ($ prompt), system copy/copied states */
.sub-repro { border: 1px solid var(--border-strong); border-radius: var(--r-m); background: var(--panel2); padding: 12px 14px; margin-top: 10px; }
.repro-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.repro-t { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 10px; color: var(--faint); }
.repro-cmd { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .05) 3px 4px), var(--well);
  border: 1px solid var(--line); border-radius: var(--r-s);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  padding: 10px 12px; margin: 8px 0 0; overflow-x: auto; white-space: pre; }
.repro-cmd::before { content: "$ "; color: var(--accent); }   /* generated content — never copied */
.repro-copy.copied { color: var(--good); border-color: var(--good); }
.sub-case { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--well); padding: 10px 12px; }
.sub-case-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; margin-bottom: 6px; }
.sub-score { font-weight: 700; font-family: ui-monospace, monospace; }
.sub-score.pass { color: var(--good); } .sub-score.part { color: var(--warn); } .sub-score.fail { color: var(--bad); }
.subs-by { margin-left: auto; color: var(--faint); font-size: 11px; }
.sub-q, .sub-a, .sub-r { font-size: 13px; margin: 4px 0; line-height: 1.45; }
.sub-q b, .sub-a b, .sub-r b { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.sub-a pre { white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; padding: 8px; background: #07070d;
  border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  max-height: 300px; overflow: auto; font-size: 12px; }

/* ---- harness transparency: the agentic tool-call trajectory drill-down ---- */
.harness-tbl td.hclick { cursor: pointer; transition: box-shadow .12s var(--ease-out); }
.harness-tbl td.hclick:hover, .harness-tbl td.hclick:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 10px rgba(0, 240, 255, .18); outline: none; }
.harness-case { border-color: var(--border-strong); }
.sub-traj { font-size: 13px; margin: 6px 0; }
.sub-traj .micro { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 4px; }
ol.traj { list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }
ol.traj .traj-step { counter-increment: step; display: flex; align-items: baseline; gap: 8px;
  padding: 5px 8px; background: #07070d; border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--r-s); }
ol.traj .traj-step::before { content: counter(step); color: var(--faint);
  font-family: ui-monospace, monospace; font-size: 10px; min-width: 14px; text-align: right; flex: none; }
.traj-tool { color: var(--accent); font-family: ui-monospace, monospace; font-size: 12px;
  font-weight: 600; flex: none; }
.traj-args { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11.5px;
  word-break: break-all; }
.traj-empty, .traj-err { font-family: ui-monospace, monospace; font-size: 11.5px;
  padding: 5px 8px; border-radius: var(--r-s); }
.traj-empty { color: var(--faint); }
.traj-err { color: var(--bad); background: rgba(255, 93, 122, .08); border: 1px solid rgba(255, 93, 122, .3); }
.sub-r .crit { font-family: ui-monospace, monospace; }
.sub-r .crit-detail { color: var(--faint); font-size: 11.5px; }

/* ---------------------------------------------------------------- live view */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); margin-left: 4px; vertical-align: middle; position: relative; }
.live-dot.on { background: var(--live); }
.live-dot.on::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live);
  animation: ping 1.6s var(--ease-out) infinite;
}
.live-run {
  border: 1px solid var(--line); border-left: 3px solid var(--live); border-radius: var(--r-m);
  padding: 14px; margin-bottom: 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .05) 3px 4px),
    var(--panel2);
}
.live-run-h { font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-bar { height: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.live-bar.big { height: 12px; margin-bottom: 14px; }
.live-bar-fill { height: 100%; background: var(--accent); position: relative; overflow: hidden; transition: width .5s ease; }
.live-bar-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-100%); animation: shimmerSweep 2.2s linear infinite;
}
.live-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin-bottom: 16px; }
.live-cat-h { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.live-feed-h { margin: 6px 0 8px; }
.live-feed { display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow-y: auto; }
.live-case { border-left: 3px solid var(--line); padding: 6px 10px; background: var(--panel); border-radius: 0 var(--r-s) var(--r-s) 0; }
.live-case.pass { border-left-color: rgba(61, 220, 133, .5); }
.live-case.part { border-left-color: rgba(255, 180, 84, .5); }
.live-case.fail { border-left-color: rgba(255, 93, 122, .5); }
.live-case.is-new { animation: caseIn .4s var(--ease-out); }
.live-case-h { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
.live-mk { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  border-radius: var(--r-s); font-weight: 700; font-size: 11px; }
.live-mk.pass { background: rgba(61, 220, 133, .14); color: var(--good); }
.live-mk.fail { background: rgba(255, 93, 122, .14); color: var(--bad); }
.live-mk.part { background: rgba(255, 180, 84, .14); color: var(--warn); }
.live-q { font-size: 12.5px; color: var(--text); margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-q b, .live-a b { color: var(--faint); margin-right: 5px; }
.live-a pre { display: block; white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--muted);
  margin: 0; font-family: ui-monospace, monospace; max-height: 96px; overflow: auto; }

/* ---------------------------------------------------------------- run tab (pod) */
/* golden-ratio emphasis on wide screens: the validated card (the hero flow) takes ~1.618x
   the width of the frontier + endpoint cards; collapses 2-up, then stacked. */
.run-cards { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; margin-bottom: 14px; align-items: start; }
@media (max-width: 1500px) { .run-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* run cards join the machined-plate grammar: chamfer + facets, inset depth (clip-path
   clips outer shadows, so no drop shadows here) */
.run-card {
  border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; min-width: 0;
  background:
    linear-gradient(135deg, transparent 6.5px, var(--border-strong) 6.5px 8px, transparent 8px),
    linear-gradient(315deg, transparent 6.5px, var(--border-strong) 6.5px 8px, transparent 8px),
    var(--panel);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.run-card h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.run-card .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.run-card .row[hidden] { display: none; }   /* [hidden] must beat display:flex (UA rule loses) */
.run-card label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); flex: 1 1 auto; }
.run-card label.grow { flex: 1 1 100%; }
.run-card input, .run-card select { min-width: 0; }
.run-card .row button { flex: 0 0 auto; }
.run-card .note { text-align: left; }
.key-list { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.key-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--well);
  border: 1px solid var(--line); border-radius: var(--r-s); }
.key-label { color: var(--text); font-weight: 700; }
.key-mask { color: var(--faint); margin-left: auto; }
.key-del { padding: 3px 10px; font-size: 11px; }
.run-jobs { margin: 6px 0 16px; }
.job-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px;
  border-left: 3px solid var(--line); border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--panel); margin-bottom: 6px; font-size: 12px; }
.job-mk { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); }
.job-mk.ok { background: var(--good); } .job-mk.err { background: var(--bad); }
.job-mk.warn { background: var(--warn); }
.job-mk.run { background: var(--live); animation: pingBg 1.6s var(--ease-out) infinite; }
.job-model { color: var(--text); font-weight: 700; }
.job-stage { color: var(--text); font-weight: 600; }
.stage-flash .job-stage { animation: stageIn .5s var(--ease-out); }
.job-err { flex: 1 1 100%; color: var(--bad); text-align: left; margin-top: 2px; }
.job-live, .job-stop, .job-resume { padding: 2px 9px; font-size: 11px; }
/* deferred submission: results benched while the mothership was down stay local — the
   SUBMIT TO MOTHERSHIP button is deliberately LARGE (owner's ask) and uses the standard
   chamfered .primary grammar; the duplicate answer reads as a confirmation, not an error */
.job-submit-row { flex: 1 1 100%; padding: 8px 0 4px; }
.job-submit-row .primary { width: 100%; padding: 14px 18px; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; }
.job-dup { flex: 1 1 100%; color: var(--good); text-align: left; margin-top: 2px; }
.pend-row { border-left-color: var(--warn); }
@media (max-width: 720px) { .run-cards { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- arena */
.arena-gen { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.arena-prompt-l { font-size: 11px; color: var(--muted); display: flex; flex-direction: row; gap: 8px; align-items: center; }
.arena-prompt-l select { min-width: 190px; }
.arena-auth { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.arena-howto { text-align: left; margin: 0 0 6px; }
.arena-now { text-align: left; font-size: 14px; color: var(--muted); margin: 6px 0 2px; min-height: 20px; }
.arena-now b { color: var(--text); font-size: 17px; font-weight: 700; }
.arena-stage { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 12px 0; }
@media (min-width: 760px) { .arena-stage { grid-template-columns: 1fr 1fr; } }
.arena-side {
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
  background: var(--well); display: flex; flex-direction: column;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.arena-side.side-won { border-color: var(--good); box-shadow: 0 0 18px rgba(61, 220, 133, .25); }
.arena-side.side-lost { opacity: .55; }
.arena-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #0d0d18; }
.arena-badge { font-weight: 800; font-size: 13px; width: 24px; height: 24px; border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid; flex: none; }
.arena-badge.a { color: var(--accent); border-color: var(--accent); background: rgba(0, 240, 255, .08); }
.arena-badge.b { color: var(--accent2); border-color: var(--accent2); background: rgba(255, 46, 151, .08); }
.arena-model { font-size: 13px; color: var(--muted); }
.arena-model.won { color: var(--good); font-weight: 700; }
.arena-model.won::after { content: " ✓"; }
.arena-model.lost { color: var(--faint); text-decoration: line-through; }
.arena-model.tie { color: var(--warn); }
.arena-meta { margin-left: auto; font-size: 11px; color: var(--faint); }
/* Artifacts render at a FIXED 1280×960 virtual viewport and are scaled to fit the column —
   the whole app is visible (no cropped/scrolling frames) and taller apps get real room.
   Input still works through the transform (the browser maps pointer coords). */
.arena-fit { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b14; }
.arena-frame { width: 1280px; height: 960px; border: 0; background: #0b0b14; display: block;
  position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.arena-vote { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.arena-vote .vote { padding: 11px 22px; font-weight: 700; font-size: 14px; letter-spacing: .4px; }
.arena-vote .vote.a::after { content: " [A]"; opacity: .5; font-size: 11px; }
.arena-vote .vote.b::after { content: " [B]"; opacity: .5; font-size: 11px; }
.arena-vote .vote.tie::after { content: " [T]"; opacity: .5; font-size: 11px; }
.arena-vote .vote.a:hover { border-color: var(--accent); color: var(--accent); }
.arena-vote .vote.b:hover { border-color: var(--accent2); color: var(--accent2); }
.arena-vote .vote.tie:hover { border-color: var(--warn); color: var(--warn); }
.arena-vote .vote.picked { background: rgba(61, 220, 133, .15); border-color: var(--good); color: var(--good);
  animation: verdictPop .35s var(--ease-pop); }
.arena-vote .vote:disabled { opacity: .38; cursor: default; }
.arena-vote .vote.picked:disabled { opacity: 1; }
.arena-rankhead { margin: 22px 0 8px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 15px; }
.arena-rankhead .note { font-weight: 400; }
#arenaRank { width: 100%; border-collapse: collapse; }
#arenaRank th, #arenaRank td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
#arenaRank th.num, #arenaRank td.num { text-align: right; font-variant-numeric: tabular-nums; }
#arenaRank td.rank { color: var(--faint); width: 36px; }
#arenaRank tr.top td, #arenaRank tr.top td b { color: var(--text); }
#arenaRank tr.top td:first-child { color: var(--r1); font-weight: 700; }

/* ---------------------------------------------------------------- code gallery */
/* Kind selector: in-your-face segmented plates — the .act-btn chamfer grammar scaled up.
   Selected = solid cyan fill + inset glow + lit corner reticle (clip-path clips outer shadows,
   so all depth is inset). Unselected still reads clickable: visible border, facet edges,
   hover lift + cyan border shift. */
.gal-kinds {
  display: flex; gap: 10px; flex-wrap: wrap;
  /* LEFT-aligned on its own full-width row — right-anchoring overflowed the viewport, and
     centering drifted with page content width; a fixed left edge stays put */
  justify-content: flex-start; width: 100%; max-width: 100%; min-width: 0;
}
.gal-kind {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 26px; cursor: pointer; user-select: none;
  background:
    linear-gradient(135deg, transparent 4.5px, var(--border-strong) 4.5px 6px, transparent 6px),
    linear-gradient(315deg, transparent 4.5px, var(--border-strong) 4.5px 6px, transparent 6px),
    var(--panel2);
  color: var(--muted); border: 1px solid var(--border-strong); border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
/* corner reticle — same grammar as .chamfer-card::after; lit on the selected plate */
.gal-kind::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  --bk: rgba(0, 240, 255, .55);
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 7px 1px,
    linear-gradient(var(--bk), var(--bk)) top left     / 1px 7px,
    linear-gradient(var(--bk), var(--bk)) top right    / 7px 1px,
    linear-gradient(var(--bk), var(--bk)) top right    / 1px 7px,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 7px 1px,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 1px 7px,
    linear-gradient(var(--bk), var(--bk)) bottom right / 7px 1px,
    linear-gradient(var(--bk), var(--bk)) bottom right / 1px 7px;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity var(--t-fast);
}
.gal-kind:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px);
  box-shadow: inset 0 0 14px rgba(0, 240, 255, .07); }
.gal-kind:hover::after { opacity: .55; }
.gal-kind:active { transform: translateY(1px); }
.gal-kind.on {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(5, 19, 24, .35), inset 0 0 22px rgba(255, 255, 255, .3);
}
.gal-kind.on::after { --bk: rgba(5, 19, 24, .7); opacity: 1; }
.gal-kind:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.gal-kind.on:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-ink), inset 0 0 22px rgba(255, 255, 255, .3);
}
.gal-kind-n {
  font-size: 10px; letter-spacing: .08em; line-height: 1.5; padding: 1px 7px;
  border: 1px solid currentColor; opacity: .75; font-variant-numeric: tabular-nums;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
@media (max-width: 720px) {
  .gal-kinds { width: 100%; gap: 8px; }
  .gal-kind { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 13px; letter-spacing: .09em; }
}
/* placement numerals — the SAME ghost grammar as the global board's giant ranks */
.gal-rank {
  font-size: 44px; font-weight: 800; line-height: .85; letter-spacing: -3px;
  font-variant-numeric: tabular-nums; user-select: none; flex: none; margin-right: 4px;
  color: transparent; -webkit-text-stroke: 1.3px rgba(148, 148, 184, .42);
}
@supports not (-webkit-text-stroke: 1px transparent) {
  .gal-rank { color: rgba(148, 148, 184, .2); }
}
.gal-card.gp1 .gal-rank { -webkit-text-stroke-color: rgba(232, 194, 104, .85);
  text-shadow: 0 0 16px rgba(232, 194, 104, .25); }
.gal-card.gp2 .gal-rank { -webkit-text-stroke-color: rgba(170, 180, 200, .65); }
.gal-card.gp3 .gal-rank { -webkit-text-stroke-color: rgba(201, 138, 94, .65); }

.gal-tools { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; flex-wrap: wrap; }
.gal-tools input { min-width: min(420px, 100%); flex: 1 1 280px; }
.gal-sec { margin-top: 20px; }
.gal-sec:first-child { margin-top: 8px; }
.gal-title { margin: 0 0 8px; font-size: 15px; text-align: left;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gal-title .note { font-weight: 400; font-size: 12px; }
/* circuit-trace hairline — same annotation as the evidence-panel headings */
.gal-title::after {
  content: ""; flex: 1 1 40px; max-width: 240px; height: 7px; opacity: .8;
  background:
    radial-gradient(circle 2px at center, var(--border-strong) 98%, transparent) left center / 7px 7px no-repeat,
    radial-gradient(circle 2px at center, var(--border-strong) 98%, transparent) right center / 7px 7px no-repeat,
    linear-gradient(var(--line), var(--line)) 7px 50% / calc(100% - 14px) 1px no-repeat;
}
.gal-row { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 12px;
  overflow-x: auto; padding: 3px 0 10px; }
/* gallery plates ride the shared .chamfer-card base (hard chamfer + facets +
   reticle). clip-path clips OUTER shadows, so the old hover/gold drop-glows
   are respent as inset light — same physics as .pcard. */
.gal-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
/* rank #1 — the subtle gold of the rank metals, spent on the top card only */
.gal-card.first { border-color: rgba(232, 194, 104, .5); box-shadow: inset 3px 0 0 var(--r1), inset 0 0 30px rgba(232, 194, 104, .05); }
.gal-card.first:hover { border-color: rgba(232, 194, 104, .7); box-shadow: inset 3px 0 0 var(--r1), inset 0 0 30px rgba(232, 194, 104, .05), inset 0 1px 0 rgba(255, 255, 255, .07); }

.gal-card-h { align-items: center; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* (rank styling lives in the ghost-numeral block above — board grammar) */
.gal-ava .model-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.gal-model { font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.gal-stats { display: flex; align-items: baseline; gap: 8px; min-height: 19px; font-size: 12px; }
.gal-elo { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.gal-wlt { color: var(--muted); font-size: 11px; }
.gal-unrated { color: var(--faint); font-size: 11px; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 1px 8px; }
.gal-acts { margin-top: auto; display: flex; gap: 6px; }
.gal-acts .act-btn { flex: 1 1 0; }

/* ---- industrial action button: ONE grammar for ▶ preview + ↓ code, on the
   cards AND in the preview modal. Notched corner + hairline border + engraved
   mono micro-label; the plate fills faintly with cyan on hover; keyboard focus
   is an inset ring (the corner notch clips outlines). */
.act-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 0;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  padding: 7px 12px; cursor: pointer; text-decoration: none; user-select: none;
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform 60ms ease;
}
.act-btn::before { color: var(--faint); font-size: 9px; line-height: 1; transition: color var(--t-fast); }
.act-btn.act-prev::before { content: "▶"; }
.act-btn.act-dl::before { content: "↓"; font-size: 11px; font-weight: 400; }
.act-btn:hover { color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.act-btn:hover::before { color: var(--accent); }
.act-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.act-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* preview overlay: hosts a live artifact at a FIXED 1280x800 design viewport.
   The sandbox has no allow-same-origin (security invariant), so content size
   is unreadable from outside — the frame is scaled to fit ENTIRELY instead
   (fit-by-design-viewport; s computed in fitGalPreview()). */
/* compound selector: must outrank the base .modal-card width (later in file) */
.modal-card.gal-view { width: min(1360px, 96vw); max-width: 96vw; }
.gal-view-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-right: 26px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.gal-view-h .mono { color: var(--muted); overflow-wrap: anywhere; }
.gal-view-h .act-btn { margin-left: auto; flex: none; }
.gal-stage { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.gal-scaler { position: relative; overflow: hidden;
  outline: 1px solid var(--line); background: #0b0b14; }   /* hairline via outline: stays crisp, no layout shift */
.gal-frame { width: 1280px; height: 800px; border: 0; background: #0b0b14; display: block;
  transform-origin: 0 0; }

/* ---------------------------------------------------------------- admin */
#evalTable { width: 100%; border-collapse: collapse; }
#evalTable th, #evalTable td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
#evalTable th.num, #evalTable td.num { text-align: right; }
.ev-act { font-size: 12px; padding: 4px 10px; }
.admin-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 6px; }
.art-card { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--well); }
.art-meta { padding: 7px 9px; font-size: 12px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.art-frame { width: 100%; height: 170px; border: 0; background: #0b0b14; display: block; }
.art-actions { padding: 6px 9px; text-align: right; }
.art-del { font-size: 12px; color: var(--bad); }
.art-del:hover { border-color: var(--bad); color: var(--bad); }

/* ---------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; background: rgba(4, 4, 10, .78); display: flex; align-items: center;
  justify-content: center; z-index: 60; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* the `display:flex` above otherwise overrides the [hidden] attribute, leaving the
   modal stuck on screen after login/close — this makes hidden actually hide it. */
.modal[hidden] { display: none !important; }
.modal-card { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-m);
  width: 344px; max-width: 92vw; padding: 22px; position: relative;
  box-shadow: 0 20px 60px #000a; animation: panelIn var(--t-med) var(--ease-out); }
.modal-card h3 { margin: 0 0 8px; }
.modal-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: var(--muted);
  font-size: 23px; line-height: 1; cursor: pointer; }
.modal-x:hover { color: var(--accent); }
.modal-l { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.modal-l input { display: block; width: 100%; margin-top: 5px; box-sizing: border-box; min-width: 0; }
.pwrow { display: flex; gap: 6px; align-items: stretch; margin-top: 5px; }
.pwrow input { margin-top: 0 !important; }
.pwshow { flex: none; font-size: 11px; padding: 0 10px; }
.modal-err { min-height: 18px; font-size: 12px; margin: 8px 0 0; }
.modal-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.modal-actions .primary { padding: 9px 16px; }
.modal-actions .ghost { font-size: 12px; }

/* ---------------------------------------------------------------- skeletons */
.skel {
  height: 14px; border-radius: var(--r-s); margin: 8px 0;
  background: linear-gradient(90deg, #10101c 25%, #181828 37%, #10101c 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}

/* ---------------------------------------------------------------- keyframes */
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes fillIn { from { transform: scaleX(0); } }
@keyframes ringIn { from { --pct: 0; } }
@keyframes radarPop { from { transform: scale(.6); opacity: 0; } }
@keyframes caseIn { from { transform: translateX(-8px); opacity: 0; background: rgba(0, 240, 255, .06); } }
@keyframes stageIn { from { transform: translateY(-6px); opacity: 0; color: var(--live); } }
@keyframes verdictPop { from { transform: scale(.92); } 60% { transform: scale(1.04); } }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
@keyframes pingBg { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 46, 151, .55); } 70% { box-shadow: 0 0 0 6px rgba(255, 46, 151, 0); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes shimmerSweep { to { transform: translateX(100%); } }
@keyframes sweep { from { left: -60%; opacity: 1; } to { left: 105%; opacity: 1; } }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; }
  .brand { font-size: 16px; }
  main { padding: 0 10px; margin: 12px auto; gap: 12px; }
  .panel { padding: 12px; }
  h2 { font-size: 15px; }

  .launch .row { flex-direction: column; align-items: stretch; gap: 10px; }
  main label { width: 100%; }
  main input, main select { width: 100%; min-width: 0; }
  main button.primary { width: 100%; padding: 12px; font-size: 14px; }   /* header sign-in stays compact */

  .lbhead { flex-direction: column; align-items: stretch; gap: 8px; }
  .weights { justify-content: flex-start; gap: 10px; }

  table { font-size: 12px; }
  .chartwrap { padding: 10px; }
  footer { font-size: 11px; padding: 14px 10px; }

  .mcard { grid-template-columns: 26px 26px 44px 1fr;
    grid-template-areas: "sel rank ava id" "comp comp comp comp" "metrics metrics metrics metrics"; }
  .mcard-ava .model-avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .mcard-comp { justify-self: start; width: 64px; height: 64px; }
  .mcard-comp .composite { font-size: 16px; }
  .mcard-name .mlink { font-size: 15px; }
}

/* #detail table → cards on narrow screens */
@media (max-width: 920px) {
  #detail, #detail thead, #detail tbody, #detail tr, #detail th, #detail td { display: block; }
  #detail thead { display: none; }
  #detail td { text-align: left; border: 0 !important; padding: 4px 0; }
  #detail tbody tr { border: 1px solid var(--line); border-left: 2px solid var(--border-strong);
    border-radius: var(--r-s); background: var(--panel2); padding: 10px 12px; margin-bottom: 10px; }
  #detail td::before { content: attr(data-label); display: inline-block; min-width: 64px;
    color: var(--faint); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
  #detail td.evidence { max-width: 100%; white-space: normal; }
}

/* ============================================================================
   v19 LAYER — "NIGHT CITY CALIBRATION"
   The cyberpunk amp on top of CALIBRATED SIGNAL. Same law (cyan=interactive,
   magenta=REC, verdict colors own the data, glow=now), more machine:
   chamfered plates, reticle frames, HUD dials, a room with a horizon,
   and an instrument that annotates itself with true data.
   ========================================================================== */

/* ---- the room: vignette + horizon bloom + perspective grid floor (static) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(1100px 70px at 50% calc(100% - 77px), rgba(0, 240, 255, .05), transparent 70%),
    radial-gradient(140% 100% at 50% 35%, transparent 58%, rgba(0, 0, 10, .5) 100%);
}
body::after {
  content: ""; position: fixed; left: -30vw; right: -30vw; bottom: 0; height: 280px;
  pointer-events: none; z-index: -1;
  background:
    linear-gradient(rgba(0, 240, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .85) 55%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .85) 55%, #000 100%);
  opacity: .55;
}
@media (max-width: 640px) { body::after { display: none; } }

/* ---- ambient calibration sweep — the instrument's idle trace. The ONE
   sanctioned non-signal motion: peak 3% cyan (the REC ping runs at 55%),
   compositor-only, killed under reduced motion. Delete this block if it is
   ever noticeable while reading a score. */
html::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 18vh;
  pointer-events: none; z-index: 3;
  background: linear-gradient(180deg,
    transparent, rgba(0, 240, 255, .016) 45%, rgba(0, 240, 255, .03) 50%,
    rgba(0, 240, 255, .016) 55%, transparent);
  mix-blend-mode: screen; opacity: 0;
  animation: ambientScan 11s linear infinite;
}
@keyframes ambientScan {
  0%   { transform: translateY(-20vh); opacity: 0; }
  7%   { opacity: 1; }
  62%  { opacity: 1; }
  72%  { transform: translateY(115vh); opacity: 0; }
  100% { transform: translateY(115vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { html::before { display: none; animation: none; } }

/* ---- HUD status header: measuring-rule ticks + recessed readout chips */
header {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(0, 240, 255, .2) 0 1px, transparent 1px 120px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 240, 255, .12) 0 1px, transparent 1px 24px) left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .05) 3px 4px),
    linear-gradient(180deg, #0c0c16, #090911);
}
header .suite {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums;
}
header .suite::before {
  content: "suite"; font-family: var(--sans); text-transform: uppercase;
  letter-spacing: .08em; font-size: 10px; font-weight: 600; color: var(--faint);
}
header .hud-clock::before { content: "utc"; }
@media (max-width: 640px) { header .hud-clock { display: none; } }

/* ---- brand slice-glitch: hover only, two bursts, then dead still */
@media (hover: hover) {
  .brand b { position: relative; }
  .brand:hover b::before, .brand:hover b::after {
    content: "AEON"; position: absolute; left: 0; top: 0; white-space: nowrap;
    pointer-events: none; text-shadow: none;
  }
  .brand:hover b::before {
    color: var(--accent); opacity: .8;
    animation: brandGlitchA .42s steps(2, jump-none) 2;
    clip-path: inset(100% 0 0 0);
  }
  .brand:hover b::after {
    color: var(--text); opacity: .6;
    animation: brandGlitchB .42s steps(3, jump-none) 2;
    clip-path: inset(100% 0 0 0);
  }
}
@keyframes brandGlitchA {
  0%   { transform: translate(2px, -1px);  clip-path: inset(8% 0 62% 0); }
  50%  { transform: translate(-2px, 1px);  clip-path: inset(38% 0 28% 0); }
  100% { transform: translate(1px, 0);     clip-path: inset(70% 0 6% 0); }
}
@keyframes brandGlitchB {
  0%   { transform: translate(-2px, 1px);  clip-path: inset(58% 0 10% 0); }
  50%  { transform: translate(2px, -1px);  clip-path: inset(10% 0 70% 0); }
  100% { transform: translate(-1px, 0);    clip-path: inset(30% 0 44% 0); }
}

/* ---- measured tab rail + wedge indicator + silkscreen zone rails */
.tabs {
  background: repeating-linear-gradient(90deg, rgba(59, 59, 94, .35) 0 1px, transparent 1px 16px) left bottom / 100% 4px no-repeat;
}
.tab { position: relative; }
.tab.active { border-bottom-color: transparent; }
.tab.active::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 3px;
  background: var(--accent);
  clip-path: polygon(0 100%, 4px 0, calc(100% - 4px) 0, 100% 100%);
}
.tabgroup::after {
  content: ""; position: absolute; top: 12px; left: 7px; right: 14px; height: 4px;
  border: 1px solid var(--line); border-bottom: 0; pointer-events: none; opacity: .6;
}

/* ---- holographic bevel ring + elevation tiers (machined slabs) */
.panel { position: relative; }
.panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(190, 235, 255, .10), rgba(0, 240, 255, .04) 22%,
    transparent 55%, rgba(0, 0, 0, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .03),
    0 1px 0 rgba(0, 0, 0, .55),
    0 12px 32px rgba(0, 0, 0, .42);
}
#boardPanel, #arenaPanel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 1px 0 rgba(0, 0, 0, .6),
    0 18px 44px rgba(0, 0, 0, .5),
    0 44px 110px rgba(0, 0, 20, .33);
}

/* ---- cut-metal hero plates: top-right chamfer cut + cyan corner reticles
   (ID specificity intentionally overrides .panel::before's bevel on heroes) */
#boardPanel, #arenaPanel { position: relative; }
#boardPanel::before, #arenaPanel::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 3;
  padding: 0; background:
    linear-gradient(225deg, var(--bg) 0 12px, rgba(0, 240, 255, .5) 12px 13.2px, transparent 14px) top right / 26px 26px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) 9px 9px / 14px 1px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) 9px 9px / 1px 14px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) 9px calc(100% - 9px) / 14px 1px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) 9px calc(100% - 9px) / 1px 14px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) calc(100% - 9px) calc(100% - 9px) / 14px 1px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) calc(100% - 9px) calc(100% - 9px) / 1px 14px;
  background-repeat: no-repeat;
  -webkit-mask: none; mask: none;
}

/* ---- panel corner serials — the machine annotates itself with TRUE data
   ([data-serial] is stamped in JS from the live #suiteInfo readout) */
main > .panel[data-serial]::after {
  content: attr(data-serial);
  position: absolute; right: 28px; bottom: 5px;
  font-size: 9px; letter-spacing: .14em; color: var(--faint); opacity: .5;
  font-variant-numeric: tabular-nums; pointer-events: none; user-select: none;
  max-width: calc(100% - 56px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ---- REC wing: the operator's recording bay reads warm (territory, not status
   — the only PULSING magenta remains the actual live signals) */
#livePanel, #runPanel, #adminPanel {
  border-top: 2px solid rgba(255, 46, 151, .5);
  background: linear-gradient(180deg, #140d16, var(--panel) 120px);
}
#livePanel h2::before, #runPanel h2::before, #adminPanel h2::before {
  content: "// "; color: var(--live); font-weight: 400;
}

/* ---- circuit-trace heading hairlines (evidence panels only — REC/hero h2s
   carry a '// ' prefix that must not become a gapped flex item) */
#harnessPanel .lbhead h2, #comparePanel .lbhead h2, #subsPanel .lbhead h2 {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
}
#harnessPanel .lbhead h2::after, #comparePanel .lbhead h2::after, #subsPanel .lbhead h2::after {
  content: ""; flex: 1 1 40px; max-width: 240px; height: 7px; opacity: .8;
  background:
    radial-gradient(circle 2px at center, var(--border-strong) 98%, transparent) left center / 7px 7px no-repeat,
    radial-gradient(circle 2px at center, var(--border-strong) 98%, transparent) right center / 7px 7px no-repeat,
    linear-gradient(var(--line), var(--line)) 7px 50% / calc(100% - 14px) 1px no-repeat;
}

/* ---- machined chamfer card plates: opposite-corner cuts + painted facets.
   clip-path clips OUTER shadows, so hover depth and the #1 glow are respent
   as inset light — same glow budget, now inside the metal. */
.mcard {
  --facet: var(--border-strong);
  border-radius: 0; isolation: isolate;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background:
    linear-gradient(135deg, transparent 7.5px, var(--facet) 7.5px 9px, transparent 9px),
    linear-gradient(315deg, transparent 7.5px, var(--facet) 7.5px 9px, transparent 9px),
    var(--panel2);
}
.mcard.hint { --facet: var(--accent); }
.mcard:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.mcard.top, .mcard.top:hover {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 44px rgba(0, 240, 255, .05);
}
/* #1 card: holo-foil band folded into the facet stack (background shorthand
   replaces the base .mcard one, so facets must be restated here) */
.mcard.top {
  background:
    linear-gradient(135deg, transparent 7.5px, var(--facet) 7.5px 9px, transparent 9px),
    linear-gradient(315deg, transparent 7.5px, var(--facet) 7.5px 9px, transparent 9px),
    linear-gradient(115deg,
      transparent 30%, rgba(0, 240, 255, .04) 42%, rgba(150, 130, 255, .05) 50%,
      rgba(0, 240, 255, .03) 58%, transparent 70%),
    var(--panel2);
}

/* ---- reticle acquire: cyan corner brackets fade in on the card you're on */
.mcard::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 1;
  --bk: rgba(0, 240, 255, .55);
  background:
    linear-gradient(var(--bk), var(--bk)) top left     / 10px 1px,
    linear-gradient(var(--bk), var(--bk)) top left     / 1px 10px,
    linear-gradient(var(--bk), var(--bk)) top right    / 10px 1px,
    linear-gradient(var(--bk), var(--bk)) top right    / 1px 10px,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 10px 1px,
    linear-gradient(var(--bk), var(--bk)) bottom left  / 1px 10px,
    linear-gradient(var(--bk), var(--bk)) bottom right / 10px 1px,
    linear-gradient(var(--bk), var(--bk)) bottom right / 1px 10px;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity var(--t-fast);
}
.mcard:hover::after, .mcard.hint::after { opacity: 1; }

/* ---- engraved ghost rank numerals (span emitted by renderBoard) */
.mcard-ghost {
  position: absolute; z-index: -1; right: 112px; top: -14px;
  font-size: 104px; font-weight: 800; line-height: 1; letter-spacing: -6px;
  font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(148, 148, 184, .12);
  pointer-events: none; user-select: none;
}
@supports not (-webkit-text-stroke: 1px transparent) {
  .mcard-ghost { color: rgba(148, 148, 184, .06); }
}
.mcard.p1 .mcard-ghost { -webkit-text-stroke-color: rgba(232, 194, 104, .16); }
.mcard.p2 .mcard-ghost { -webkit-text-stroke-color: rgba(170, 180, 200, .14); }
.mcard.p3 .mcard-ghost { -webkit-text-stroke-color: rgba(201, 138, 94, .15); }
@media (max-width: 640px) {
  .mcard-ghost { font-size: 64px; right: 10px; top: -8px; letter-spacing: -3px; }
}

/* ---- HUD dial: engraved graduations around the composite gauge */
.mcard-comp::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background:
    repeating-conic-gradient(from -1.25deg, rgba(148, 148, 184, .55) 0 2.5deg, transparent 2.5deg 30deg),
    repeating-conic-gradient(from -0.4deg, rgba(110, 110, 146, .3) 0 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}

/* ---- corner-cut primary controls (chamfer clips the outline — focus is
   re-provisioned as a high-contrast inset ring) */
button.primary, .launch .runcta a.primary {
  border-radius: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
button.primary:focus-visible, .launch .runcta a.primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-ink);
}

/* ---- sheared bar blades: fills terminate in a 45° HUD edge */
.meter-fill { clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.live-bar-fill { clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }

/* ---- arena side identity lives on the CHROME, never over the render:
   the preview window must show the artifact exactly as generated (owner
   feedback: any tint/raster over the frame hurts visual comparison).
   Identity cues: tinted head bar + emitter line + a 2px side rail. */
.arena-side { position: relative; }
.arena-side:has(.arena-badge.a) { border-left: 2px solid rgba(0, 240, 255, .35); }
.arena-side:has(.arena-badge.b) { border-left: 2px solid rgba(255, 46, 151, .3); }
.arena-side:has(.arena-badge.a) .arena-head {
  border-bottom-color: rgba(0, 240, 255, .3);
  background: linear-gradient(180deg, rgba(0, 240, 255, .06), transparent), #0d0d18;
}
.arena-side:has(.arena-badge.b) .arena-head {
  border-bottom-color: rgba(255, 46, 151, .3);
  background: linear-gradient(180deg, rgba(255, 46, 151, .05), transparent), #0d0d18;
}

/* ---- admin portal: bench oversight + evaluator vote trail */
.admin-benches { display: flex; flex-direction: column; gap: 4px; max-height: 48vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); padding: 6px; }
.bench-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px;
  border-left: 2px solid transparent; border-radius: var(--r-s); font-size: 12px; }
.bench-row:hover { background: rgba(0, 240, 255, .04); }
.bench-row.flagged { opacity: .6; border-left-color: var(--bad); }
.bench-t { color: var(--faint); font-size: 11px; white-space: nowrap; }
.bench-m { color: var(--text); font-weight: 600; overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px; }
.bench-s { font-weight: 700; font-size: 14px; min-width: 34px; text-align: right; }
.bench-acts { display: inline-flex; gap: 6px; margin-left: auto; }
.ev-act.warnact { color: var(--warn); }
.ev-act.warnact:hover { border-color: var(--warn); color: var(--warn); }
.evh-row[hidden] { display: none; }
.evh-cell { background: var(--well); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.evh-list { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; padding: 4px 2px; }
.evh-vote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; padding: 3px 6px; }
.evh-p { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.evh-w { color: var(--muted); } .evh-w b { color: var(--text); text-transform: uppercase; }

/* ============================================================================
   v21 LAYER — AAA POLISH
   Every control custom, every state designed, one grammar per quantity.
   ========================================================================== */

/* ---- machined selects: no stock UA chevron anywhere */
select {
  -webkit-appearance: none; appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239494b8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select:hover { border-color: var(--border-strong); }
select:focus {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2300f0ff' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---- machined checkboxes (compare tick = cyan interactive; verified toggle = green trust) */
.rsel, .eligtoggle input {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; min-width: 0; flex: none;
  border: 1px solid var(--border-strong); border-radius: 3px; background: var(--well);
  position: relative; cursor: pointer; margin: 0; padding: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.rsel:hover { border-color: var(--accent); }
.rsel:checked { background: var(--accent); border-color: var(--accent); }
.rsel:checked::after {
  content: ""; position: absolute; inset: 3px; background: var(--accent-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.eligtoggle input:hover { border-color: var(--good); }
.eligtoggle input:checked { background: var(--good); border-color: var(--good); }
.eligtoggle input:checked::after {
  content: ""; position: absolute; inset: 3px; background: #05130b;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

/* ---- scrollbars: themed everywhere (Firefox included), thin inside wells */
* { scrollbar-width: thin; scrollbar-color: #2e2e4a #0a0a12; }
.subs-list::-webkit-scrollbar, .live-feed::-webkit-scrollbar, .sub-a pre::-webkit-scrollbar,
.live-a pre::-webkit-scrollbar, .evh-list::-webkit-scrollbar, .admin-benches::-webkit-scrollbar {
  width: 6px; height: 6px;
}

/* ---- VRAM filter: slider + readout are one unit (the value never orphans) */
.lbtools .vramfilter { flex: 1 1 340px; min-width: 0; }
.vramfilter .vrgroup { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 190px; }
.vramfilter .vrgroup input[type=range] { flex: 1 1 auto; min-width: 110px; max-width: none; }
.vramfilter .vval { flex: none; }

/* ---- themed micro-tooltips (only on surfaces with no overflow clipping) */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: #0d0d18; border: 1px solid var(--border-strong); color: var(--muted);
  font: 11px/1.4 var(--sans); padding: 4px 9px; border-radius: var(--r-s);
  white-space: nowrap; z-index: 70; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

/* ---- designed empty states: a calibrated "no signal" moment, not a paragraph */
.board-empty {
  border: 1px dashed var(--line); border-radius: var(--r-m); background: var(--well);
  padding: 24px 22px;
}
.board-empty::before {
  content: "◇ no signal"; display: block; font-family: var(--sans); font-size: 10px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 8px;
}

/* ---- meters: at 100 the blade closes flush (needle on the peg) */
.meter.full .meter-fill { clip-path: none; }
.meter-val { padding: 0 8px 0 6px; }

/* ---- composite fits every value ("100" included) */
.mcard-comp .composite { letter-spacing: -0.5px; }

/* ---- model identity: the org prefix recedes, the model name pops */
.morg { color: var(--faint); font-weight: 400; }

/* ---- arena: skip matches the vote row's weight */
#arenaSkip { padding: 11px 16px; font-size: 14px; }

/* ---- auth modal joins the machine: accent edge + corner reticles + full-width inputs */
.modal-card { border-top: 2px solid var(--accent); }
.modal-card::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background:
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) 9px calc(100% - 9px) / 12px 1px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) 9px calc(100% - 9px) / 1px 12px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) calc(100% - 9px) calc(100% - 9px) / 12px 1px,
    linear-gradient(rgba(0, 240, 255, .3), rgba(0, 240, 255, .3)) calc(100% - 9px) calc(100% - 9px) / 1px 12px;
  background-repeat: no-repeat;
}
.pwrow input { flex: 1 1 auto; min-width: 0; }

/* ---- mobile refinements */
@media (max-width: 640px) {
  /* leaderboard card: id gets the FULL width row; gauge rides beside the avatar */
  .mcard {
    grid-template-columns: 26px 26px 44px 1fr;
    grid-template-areas: "sel rank ava comp" "id id id id" "metrics metrics metrics metrics";
  }
  .mcard-comp { justify-self: end; }
  .mcard-ghost { right: 84px; top: -6px; }   /* clear of the top-right gauge */

  /* submissions rows: time stacks under the score — the name gets its width back */
  .subs-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .subs-s { grid-column: 3; grid-row: 1; align-self: start; }
  .subs-t { grid-column: 3; justify-self: end; }

  /* tab rail: clipped tabs fade instead of shearing mid-word */
  .tabs {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* vram filter wraps cleanly: full-width select, slider+readout glued on one row */
  .vramfilter select { flex: 1 1 100%; }
}

/* ---- RECIPE DISCOVERY (Performance board): hardware filter · 4-axis cards · champions · recipe ---- */
.perf-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.perf-filter-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.chip.hwf { font-variant-numeric: tabular-nums; }
/* four axes as a fixed 4-up rail so columns line up across models (the discovery read) */
.pcard.perf4 .perf4-stats { display: grid; grid-template-columns: repeat(4, minmax(74px, auto)); gap: 10px 22px; align-items: flex-end; }
.perf4-stats .spdchip { align-items: flex-end; text-align: right; }
.perf4-stats .spdchip .catv { transition: color var(--t-fast); }
.perf4-stats .catx { color: var(--muted); font-weight: 600; font-size: 12px; }
.qchip .catv { color: var(--r1); }                    /* quality reads in the leaderboard's gold */
.spdchip.win .catv { color: var(--accent); text-shadow: 0 0 14px rgba(0, 240, 255, .35); }
.qchip.win .catv { color: var(--r1); text-shadow: 0 0 14px rgba(232, 194, 104, .4); }
/* champion crowns: the axis (throughput / single-stream / latency / quality) this recipe wins
   within the current hardware filter — the optimal-recipe read at a glance */
.pcrowns { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 2px; }
.pcrown { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border: 1px solid currentColor; line-height: 1.35;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.pcrown.c-agg { color: var(--accent); background: rgba(0, 240, 255, .07); }
.pcrown.c-single { color: #7fd8ff; background: rgba(127, 216, 255, .07); }
.pcrown.c-lat { color: var(--warn); background: rgba(255, 180, 84, .08); }
.pcrown.c-qual { color: var(--r1); background: rgba(232, 194, 104, .08); }
.perf-repro { margin: 2px 0 18px; }                   /* recipe card = same machined plate as .sub-repro */
@media (max-width: 720px) { .pcard.perf4 .perf4-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- hardware clustering (v85): canonical bucket chips + engraved per-rig sections ---- */
/* Spark presets with no data stay on the bar but read as unenergized sockets */
.chip.hwf.off { opacity: .35; cursor: not-allowed; border-style: dashed; }
.chip.hwf.off:hover { color: var(--muted); border-color: var(--line); transform: none; }
.chip.hwf.dim { opacity: .35; }                       /* live search: bucket has no match */
.perf-hw-search {
  flex: 1 1 150px; min-width: 120px; max-width: 230px; margin-left: auto;
  padding: 6px 10px; font-size: 12px;
}
.perf-sec { margin: 0 0 26px; }
/* engraved centered section header between hairline rules — the .tune-sec-h grammar */
.perf-sec-h {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 4px 0 12px; font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap; min-width: 0;
}
.perf-sec-h::before, .perf-sec-h::after { content: ""; flex: 1 1 24px; height: 1px; background: var(--line); }
.perf-sec-t { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.perf-sec-m { letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; }
.perf-sec-m b { color: var(--accent); font-variant-numeric: tabular-nums; }
/* per-card hardware identity: an engraved micro-label chip — EVERY pcard carries one */
.pcard-hw {
  display: inline-flex; align-items: center; max-width: 100%;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--well); border: 1px solid var(--line);
  padding: 2px 7px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
@media (max-width: 720px) { .perf-hw-search { flex-basis: 100%; max-width: none; margin-left: 0; } }

/* ---- VALIDATED BENCH (Run tab): model-validation strip · engine picker · MLX bare-metal ---- */
/* The hero card carries the validated flow (its 1.618fr width + stronger plate say so);
   the endpoint card is the demoted local-only path. Depth stays inset (clip-path). */
.run-card.vcard { border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 46px rgba(0, 240, 255, .03); }
/* Local-weights path: READ-ONLY (driven by scan/browse selection), with a deliberate ✕ clear.
   It can't be hand-edited to a path that sidesteps the hash check. */
.lw-field { position: relative; display: flex; align-items: center; }
.lw-field input[readonly] {
  cursor: default; padding-right: 26px; color: var(--muted);
  background: rgba(255, 255, 255, .01); border-style: dashed;
}
.lw-field input[readonly]:not([value=""]) { color: var(--text); border-style: solid; }
.lw-clear {
  position: absolute; right: 6px; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
}
.lw-clear:hover { color: var(--bad); }

.val-strip {
  display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; padding: 10px 14px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .015);
  font-size: 11px; letter-spacing: .05em; text-transform: none; color: var(--muted);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.val-strip .val-msg { line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.val-strip .val-msg b { letter-spacing: .12em; font-size: 10px; }
.val-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%;
  background: var(--faint); transition: background var(--t-fast), box-shadow var(--t-fast); }
.val-strip.idle { color: var(--faint); border-style: dashed; }
.val-strip.busy { color: var(--muted); border-color: var(--border-strong); }
.val-strip.busy .val-dot { background: var(--accent); animation: valScan 1.1s ease-in-out infinite; }
@keyframes valScan { 50% { opacity: .25; } }
/* THE green light: hash-proven model. Chamfer clips outer shadows -> the glow lives inset. */
.val-strip.ok {
  color: var(--good); border-color: rgba(61, 220, 133, .55);
  background: rgba(61, 220, 133, .045);
  box-shadow: inset 0 0 26px rgba(61, 220, 133, .10), inset 0 0 3px rgba(61, 220, 133, .28);
  animation: valGlow 2.4s ease-in-out infinite;
}
.val-strip.ok .val-dot { background: var(--good); box-shadow: 0 0 10px rgba(61, 220, 133, .8); }
.val-strip.ok.soft { animation: none; box-shadow: inset 0 0 18px rgba(61, 220, 133, .07); }
@keyframes valGlow { 50% { box-shadow: inset 0 0 40px rgba(61, 220, 133, .17), inset 0 0 4px rgba(61, 220, 133, .4); } }
.val-strip.warn { color: var(--warn); border-color: rgba(255, 180, 84, .5); background: rgba(255, 180, 84, .04); }
.val-strip.warn .val-dot { background: var(--warn); }
.val-strip.bad { color: var(--bad); border-color: rgba(255, 93, 122, .5); background: rgba(255, 93, 122, .04); }
.val-strip.bad .val-dot { background: var(--bad); }
.val-req { display: block; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.val-req.warn-line { color: var(--warn); letter-spacing: .08em; }
.val-note { display: block; margin-top: 4px; font-size: 10.5px; color: var(--faint); }
/* MODALITIES chip row: config-detected suites, operator-toggleable (Run tab validated card) */
.mod-row { align-items: center; gap: 8px; }
.mod-t { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.mod-chip {
  font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; cursor: pointer;
  color: var(--faint); background: transparent; border: 1px dashed var(--line);
  padding: 3px 12px; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.mod-chip:hover { color: var(--muted); border-color: var(--border-strong); }
.mod-chip.on {
  color: var(--good); border-style: solid; border-color: rgba(61, 220, 133, .5);
  background: rgba(61, 220, 133, .08);
}
.mod-row .note { font-size: 10.5px; }
.eng-info { text-align: left; min-height: 0; margin: 2px 0 0; }
.eng-info .mlink { color: var(--accent); }
/* RECIPE TUNING: the engine's knob catalog — the optimal-recipe search surface */
.tune-wrap { margin: 10px 0 2px; border: 1px solid var(--border); background: rgba(255, 255, 255, .012);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tune-wrap > summary { cursor: pointer; list-style: none; padding: 10px 14px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  transition: background var(--t-fast); }
.tune-wrap > summary::-webkit-details-marker { display: none; }
.tune-wrap > summary:hover { background: rgba(0, 240, 255, .04); }
.tune-t { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.tune-count { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--good);
  border: 1px solid rgba(61, 220, 133, .5); padding: 2px 8px; margin-left: auto;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.tune-wrap[open] > summary { border-bottom: 1px solid var(--border); }
/* the TUNING LAB grid: one machined card per flag, balanced columns; the default grid
   stretch equalizes card heights per row (the pros/cons pair pins to the card floor) */
.tune-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; padding: 12px 14px 6px; align-items: stretch; }
/* centered section header with hairline rules (spans the whole grid) */
.tune-sec-h {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 2px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.tune-sec-h::before, .tune-sec-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
/* per-flag card: the .chamfer-card grammar at a smaller 8px cut */
.tune-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background:
    linear-gradient(135deg, transparent 5px, var(--facet) 5px 6.5px, transparent 6.5px),
    linear-gradient(315deg, transparent 5px, var(--facet) 5px 6.5px, transparent 6.5px),
    var(--panel2);
}
.tune-card-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tune-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tune-f { text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 10.5px; margin-left: auto; overflow-wrap: anywhere; }
.tune-card select, .tune-card input[type=number], .tune-card input[type=text] { width: 100%; }
.tune-bool { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tune-desc { margin: 0; font-family: var(--sans); font-size: 11px; color: var(--muted); line-height: 1.5; }
/* pros/cons pair pinned to the card floor so every card's verdict line sits level */
.tune-pc { margin-top: auto; display: flex; flex-direction: column; gap: 2px;
  font-size: 10.5px; line-height: 1.45; }
.tune-pro { color: var(--good); }
.tune-con { color: var(--warn); }
/* live conflict: amber strip + border — a warning, never a hard-disable */
.tune-warn {
  padding: 6px 9px; font-size: 10.5px; line-height: 1.45; font-family: var(--sans);
  color: var(--warn); border: 1px solid rgba(255, 180, 84, .4); border-left: 3px solid var(--warn);
  background: rgba(255, 180, 84, .07);
}
.tune-card.conflict { border-color: rgba(255, 180, 84, .55); }
/* implicated by the last failed bench (diagnostics hint names this flag) */
.tune-card.implicated, .tune-spec.implicated {
  border-color: rgba(255, 180, 84, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 84, .3), inset 0 0 22px rgba(255, 180, 84, .05);
}
.tune-card.pulse, .tune-spec.pulse { animation: tunePulse 1.2s ease-in-out 2; }
@keyframes tunePulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 180, 84, .25); }
  50% { box-shadow: inset 0 0 0 2px var(--warn), inset 0 0 30px rgba(255, 180, 84, .16); }
}
@media (prefers-reduced-motion: reduce) { .tune-card.pulse, .tune-spec.pulse { animation: none; } }
/* the last-failed-bench banner INSIDE the tuning panel (dismissible) */
.tune-alert {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 14px 0;
  padding: 9px 12px; font-size: 11.5px; line-height: 1.5;
  color: var(--warn); border: 1px solid rgba(255, 180, 84, .5); border-left: 3px solid var(--warn);
  background: rgba(255, 180, 84, .07);
}
.tune-alert[hidden] { display: none; }      /* [hidden] must beat display:flex */
.tune-alert-t { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; white-space: nowrap; }
.tune-alert-msg { flex: 1 1 320px; font-family: var(--sans); min-width: 0; }
.tune-alert-flags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tune-alert-x { flex: none; margin-left: auto; padding: 0 4px; background: none; border: 0;
  color: var(--warn); cursor: pointer; font-size: 13px; line-height: 1; }
.tune-alert-x:hover { color: var(--text); }
/* clickable flag chip (failed-job row + tune banner) -> scrolls to + pulses the card */
.tune-flag-chip {
  display: inline-flex; align-items: center; padding: 2px 9px; cursor: pointer;
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--warn); background: rgba(255, 180, 84, .07); border: 1px solid rgba(255, 180, 84, .45);
  border-radius: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tune-flag-chip:hover { color: var(--text); border-color: var(--warn); background: rgba(255, 180, 84, .16); }
.tune-flag-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--warn); }
/* "check these toggles" row on a failed job */
.job-flags { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.job-flags-t { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); white-space: nowrap; }
.tune-wrap .row, .tune-wrap .tune-note { padding: 0 14px; }
.tune-wrap .tune-note { padding-bottom: 12px; text-align: left; }
/* spec-decode (DFlash) block: drafter card + preset armory */
.tune-spec { margin: 8px 14px 10px; padding: 10px 12px; border: 1px solid var(--border);
  border-left: 2px solid var(--accent2); background: rgba(255, 46, 151, .02);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.tune-spec .row, .tune-spec .tune-note { padding: 0; }
/* section header centered between hairline rules — same grammar as .tune-sec-h */
.tune-spec-h { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tune-spec-h::before, .tune-spec-h::after { content: ""; flex: 1 1 16px; height: 1px; background: var(--line); }
.tune-spec-h .tune-t { color: var(--accent2); }
.drafter-state { font-size: 10.5px; color: var(--faint); }
.drafter-state.ok { color: var(--good); }
.drafter-state.warn { color: var(--warn); }
.drafter-state.bad { color: var(--bad); }
/* method card (DFlash vs native MTP): tune-card desc + pros/cons grammar inside the spec block */
.spec-method-card { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; }
.spec-method-card[hidden] { display: none; }        /* [hidden] must beat display:flex */
.spec-method-card .tune-pc { margin-top: 0; }
/* native MTP hides the drafter fields — [hidden] must beat the global label display:flex */
#drafterField[hidden] { display: none; }

/* MLX bare-metal helper: the ONE non-container path, reported like a docker recipe */
.mlx-help { margin: 10px 0 2px; padding: 12px 14px; border: 1px solid var(--border);
  border-left: 2px solid var(--accent); background: rgba(0, 240, 255, .02);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.mlx-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
/* local-model discovery: scan-system dropdown + server-side disk browser */
.lw-acts { display: flex; gap: 6px; align-self: flex-end; }
.lw-acts .ghost { white-space: nowrap; }
#scanRow select { width: 100%; font-family: var(--mono, monospace); font-size: 12px; }
.browse-card { width: min(720px, 92vw); }
.browse-path { font-size: 11px; color: var(--muted); padding: 6px 10px; margin: 8px 0;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .02); overflow-wrap: anywhere; }
.browse-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); margin-bottom: 10px; }
.browse-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px;
  font-family: var(--mono, monospace); cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background var(--t-fast), color var(--t-fast); }
.browse-row:last-child { border-bottom: none; }
.browse-row:hover { background: rgba(0, 240, 255, .05); color: var(--text); }
.browse-row.model { color: var(--good); }               /* holds weights -> pickable model dir */
.browse-row.model .browse-ic { color: var(--good); }
.browse-row.file { cursor: default; color: var(--faint); }
.browse-row.file:hover { background: none; }
.browse-row.up, .browse-row.root { color: var(--accent); }
.browse-ic { flex: 0 0 16px; text-align: center; color: var(--faint); }
.browse-sz { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- RUN A BENCH POD: header CTA button -> quickstart modal (docker + Apple/MLX + GitHub) ---- */
.pod-cta-btn {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  font-weight: 700; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); background: rgba(0, 240, 255, .05);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pod-cta-btn:hover { background: rgba(0, 240, 255, .12); box-shadow: inset 0 0 24px rgba(0, 240, 255, .09); }
.pod-cta-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.pod-cta-btn:active { transform: translateY(1px); }
.pod-cta-top { padding: 7px 16px; font-size: 12px; margin-right: 4px; white-space: nowrap; flex: none; }   /* header scale */
.pod-cta-mark { font-size: 11px; }
.pod-cta-sub { font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.pod-modal-card { width: min(760px, 94vw); max-height: 86vh; overflow-y: auto; }
.pod-modal-card h3 { display: flex; align-items: baseline; gap: 10px; color: var(--accent); }
/* modal action row: chamfered machined buttons — never bare browser links */
.pod-modal-card .runcta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 2px; }
.pod-modal-card .runcta a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 9px 16px; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  color: var(--muted); border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .02);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pod-modal-card .runcta a:hover { color: var(--accent); border-color: var(--accent); background: rgba(0, 240, 255, .06); }
.pod-modal-card .runcta a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.pod-modal-card .runcta a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.pod-modal-card .runcta a.primary:hover { filter: brightness(1.12); color: var(--accent-ink); }
.podq { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border);
  border-left: 2px solid var(--accent); background: rgba(255, 255, 255, .015);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.podq-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.podq .repro-cmd { margin: 0; }

/* perf: single-stream vs concurrent hero + dashed legend swatch + endpoint labels */
.perf-hero-card { margin: 12px 0 16px; }
.pend { font-size: 11px; font-weight: 700; font-family: var(--mono, monospace); }
.perf-lg-dash { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; }

/* ---- INSTRUMENT PANEL: per-run cockpit (composite dial · category gauges · difficulty ladder) */
.instrument-panel {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin: 12px 0;
  padding: 16px 18px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0) 45%), var(--panel);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.ip-sec { display: block; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.ip-track { fill: none; stroke: var(--line); stroke-width: 6; }
.ip-arc { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease-out); }
.pass .ip-arc { stroke: var(--good); filter: drop-shadow(0 0 4px rgba(61, 220, 133, .5)); }
.part .ip-arc { stroke: var(--warn); filter: drop-shadow(0 0 4px rgba(255, 180, 84, .5)); }
.fail .ip-arc { stroke: var(--bad); filter: drop-shadow(0 0 4px rgba(255, 93, 122, .5)); }
.ip-dial { position: relative; width: 128px; height: 128px; flex: 0 0 auto; }
.ip-dial svg { width: 100%; height: 100%; }
.ip-dial-val { position: absolute; left: 0; right: 0; top: 42px; text-align: center;
  font-family: var(--mono, monospace); font-size: 26px; font-weight: 700; color: var(--text); }
.ip-dial-lbl { position: absolute; left: 0; right: 0; top: 76px; text-align: center;
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.ip-gauges { flex: 1 1 260px; }
.ip-grow { display: flex; flex-wrap: wrap; gap: 12px; }
.ip-gauge { position: relative; width: 74px; text-align: center; }
.ip-gauge svg { width: 64px; height: 64px; }
.ip-val { position: absolute; left: 0; right: 0; top: 22px; text-align: center;
  font-family: var(--mono, monospace); font-size: 15px; font-weight: 700; color: var(--text); }
.ip-lbl { display: block; margin-top: -4px; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-ladder { flex: 1 1 300px; min-width: 260px; }
.ip-rung { display: grid; grid-template-columns: 76px 1fr 34px 28px; gap: 8px; align-items: center; margin-bottom: 6px; }
.ip-bar { position: relative; height: 10px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.ip-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.ip-bar .db-easy { background: var(--good); } .ip-bar .db-medium { background: #b8d85a; }
.ip-bar .db-hard { background: var(--warn); } .ip-bar .db-expert { background: var(--bad); }
.ip-bar .db-frontier { background: var(--accent2); box-shadow: 0 0 8px rgba(255, 46, 151, .5); }
.ip-bar .db-god_mode { background: var(--god); box-shadow: 0 0 12px rgba(176, 38, 255, .65); }
.ip-pct { font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; text-align: right; }
.ip-n { font-family: var(--mono, monospace); font-size: 10px; color: var(--faint); text-align: right; }

/* category × difficulty heat matrix inside the instrument panel */
.ip-matrix { flex-basis: 100%; }
.ip-matrix table { border-collapse: collapse; font-family: var(--mono, monospace); }
.ip-matrix th, .ip-matrix td { padding: 4px 10px; text-align: center; font-size: 11.5px; }
.ip-matrix .ipm-cat { text-align: right; color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; }
.ip-matrix td {
  min-width: 52px; border: 1px solid var(--line); font-weight: 700; color: var(--text);
  background: rgba(0, 240, 255, calc(var(--s, 0) * .22));
  text-shadow: 0 0 6px rgba(0, 240, 255, calc(var(--s, 0) * .5));
}
.ip-matrix td.ipm-na { background: none; color: var(--faint); font-weight: 400; }

/* ---- 3-HARNESS side-by-side (one pass, full trajectory per task) ---- */
.h3c-wrap { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.h3c-wrap .lbhead { display: flex; gap: 14px; align-items: center; }
.h3c-heads, .h3c-grid { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 10px; }
.h3c-heads { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; }
.h3c-head { padding: 8px 12px; border: 1px solid var(--border-strong); background: var(--panel);
  font-family: var(--mono, monospace); font-size: 12px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.h3c-case { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; margin-bottom: 12px; }
.h3c-cell { border: 1px solid var(--line); background: var(--well); padding: 8px; min-width: 0; }
.h3c-cell.na { display: flex; align-items: center; justify-content: center; opacity: .5; }
.h3c-cell pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; font-size: 11px; }
.h3c-cell .traj { max-height: 180px; overflow-y: auto; }
.h3c-btn { margin-left: 8px; font-size: 9.5px; padding: 3px 9px; }
@media (max-width: 1000px) { .h3c-heads, .h3c-grid { grid-template-columns: 1fr; } }

/* ---- DIFFICULTY class chips (submission detail + run compare) ---- */
.diff-chip {
  display: inline-block; padding: 1px 8px; font-family: var(--mono, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--r-pill); opacity: .95;
}
.diff-chip.d-easy { color: var(--good); }
.diff-chip.d-medium { color: #b8d85a; }
.diff-chip.d-hard { color: var(--warn); }
.diff-chip.d-expert { color: var(--bad); }
.diff-chip.d-frontier { color: var(--accent2); text-shadow: 0 0 8px rgba(255, 46, 151, .4); }
.diff-chip.d-god_mode { color: var(--god); text-shadow: 0 0 10px rgba(176, 38, 255, .55); }

/* ---- submission PASS cards: one launch = one card, expandable into components ---- */
.subs-pass {
  padding: 10px 12px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.subs-pass:hover { background: rgba(0, 240, 255, .05); border-left-color: var(--border-strong); }
.subs-pass.sel { background: rgba(0, 240, 255, .08); box-shadow: inset 3px 0 0 var(--accent); }
.subs-pass.flagged { opacity: .55; }
.sp-head {
  display: grid; grid-template-columns: auto 34px minmax(0, 1fr) 32px auto auto;
  gap: 8px; align-items: center;
}
/* the app's global form-field width rules must never inflate this tiny checkbox — a wide
   compare cell starves the 1fr name track to 0px (invisible model names) */
.subs-cmp { width: 32px; justify-content: center; }
.subs-cmp input { width: 13px; height: 13px; min-width: 0; margin: 0; flex: none; }
.sp-name {
  font-size: 13.5px; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
.sp-name .morg { white-space: nowrap; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0 42px; }
.pc-chip {
  display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer;
  padding: 2px 8px; font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; color: var(--muted); background: var(--well); border: 1px solid var(--line);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.pc-chip b { font-size: 11px; }
.pc-chip.pass { color: var(--good); border-color: rgba(61, 220, 133, .4); }
.pc-chip.part { color: var(--warn); border-color: rgba(255, 180, 84, .4); }
.pc-chip.fail { color: var(--bad); border-color: rgba(255, 93, 122, .4); }
.pc-chip.na { color: var(--faint); }
.pc-chip:hover { border-color: var(--accent); color: var(--accent); }
.subs-pass .subs-cats { margin: 6px 0 0 42px; }

/* ---- submission CLUSTER rows: rank + per-category bars + compare picks ---- */
.subs-rank {
  min-width: 34px; text-align: center; font-family: var(--mono, monospace); font-size: 12px;
  font-weight: 700; color: var(--faint);
}
.subs-rank.p1 { color: var(--r1); } .subs-rank.p2 { color: var(--r2); } .subs-rank.p3 { color: var(--r3); }
.subs-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.subcat {
  position: relative; overflow: hidden; display: inline-flex; align-items: baseline; gap: 4px;
  padding: 1px 7px; font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .05em;
  color: var(--muted); border: 1px solid var(--line); background: var(--well); text-transform: uppercase;
}
.subcat i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 240, 255, .13); }
.subcat .subcat-k, .subcat { z-index: 0; }
.subcat .subcat-k { position: relative; color: var(--faint); }
.subs-cmp { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); font-size: 12px; cursor: pointer; padding: 0 4px; }
.subs-cmp input { accent-color: var(--accent); cursor: pointer; }
.cmp-bar { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cmp-bar .ghost:disabled { opacity: .5; }

/* ---- RUN-vs-RUN compare (two models / two recipes, per-case) ----
   SYMMETRY IS STRUCTURAL: the two head plates share ONE fixed grid row template
   (model / composite / trust / recipe chips / meta) so every metric sits at the same y;
   each case splits 1fr | delta spine | 1fr around a centered axis; A = cyan, B = magenta. */
.cmp2-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 12px; }
.cmp2-head {
  position: relative; padding: 12px 14px; border: 1px solid var(--border-strong); background: var(--panel);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  display: grid; grid-template-rows: 44px 40px 24px 34px minmax(40px, 1fr);
  row-gap: 4px; align-items: start; min-width: 0;
}
/* side keying bar (A cyan / B magenta) — a painted strip, not box-shadow (win owns that) */
.cmp2-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.cmp2-head.side-a::before { background: rgba(0, 240, 255, .55); }
.cmp2-head.side-b::before { background: rgba(255, 46, 151, .5); }
/* clip-path clips outer shadows — the winner glow lives inset */
.cmp2-head.win { border-color: rgba(61, 220, 133, .55);
  box-shadow: inset 0 0 0 1px rgba(61, 220, 133, .3), inset 0 0 26px rgba(61, 220, 133, .07); }
.cmp2-side { position: absolute; right: 12px; top: 8px; font-family: var(--mono, monospace); font-size: 26px; font-weight: 700; color: var(--faint); opacity: .5; }
.cmp2-head.side-a .cmp2-side { color: var(--accent); opacity: .55; }
.cmp2-head.side-b .cmp2-side { color: var(--accent2); opacity: .55; }
.cmp2-model { font-weight: 600; font-size: 15px; line-height: 1.35; padding-right: 34px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp2-comp { font-family: var(--mono, monospace); font-size: 30px; font-weight: 700; line-height: 1.2; }
.cmp2-comp.pass { color: var(--good); } .cmp2-comp.part { color: var(--warn); } .cmp2-comp.fail { color: var(--bad); }
.cmp2-trust { display: flex; align-items: center; }
.cmp2-trust-chip {
  font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); padding: 2px 8px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.cmp2-trust-chip.t-attested { color: var(--good); border-color: rgba(61, 220, 133, .5); background: rgba(61, 220, 133, .08); }
.cmp2-trust-chip.t-orchestrated { color: var(--warn); border-color: rgba(255, 180, 84, .45); }
.cmp2-cats { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; align-items: center; min-width: 0; }
.cmp2-cats .subcat { flex: none; }
.cmp2-meta { margin: 0; text-align: left; align-self: end; }
.cmp2-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 6px 0 12px; font-size: 12px; color: var(--muted); }
.cmp2-filters select { max-width: 160px; }
.c2-only { display: inline-flex; gap: 5px; align-items: center; }
.c2-only input { accent-color: var(--accent); }
.cmp2-case { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; margin-bottom: 12px; }
.cmp2-grid { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 12px; margin-top: 8px; align-items: stretch; }
.cmp2-cell { border: 1px solid var(--line); background: var(--well); padding: 8px; min-width: 0; }
.cmp2-cell pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; font-size: 11.5px; margin-top: 6px; }
.cmp2-cell:first-child { border-left: 2px solid rgba(0, 240, 255, .35); }
.cmp2-cell:last-child { border-right: 2px solid rgba(255, 46, 151, .3); }
/* the delta SPINE: per-case score gap as a centered badge in the winner's hue */
.cmp2-spine { display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; }
.cmp2-delta {
  font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 3px 8px; border: 1px solid currentColor; line-height: 1.4;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.cmp2-delta.a { color: var(--accent); background: rgba(0, 240, 255, .08); }
.cmp2-delta.b { color: var(--accent2); background: rgba(255, 46, 151, .08); }
.cmp2-delta.even { color: var(--faint); }
@media (max-width: 900px) {
  .cmp2-heads { grid-template-columns: 1fr; }
  .cmp2-head { grid-template-rows: auto auto 24px auto auto; }
  .cmp2-grid { grid-template-columns: 1fr; }
  .cmp2-spine { padding: 0; order: -1; }               /* stacked: the delta leads the pair */
}

/* ---- butterfly / tornado: mirrored per-category bars around a shared center axis ---- */
.cmp2-fly {
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); background: var(--panel);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.fly-h { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; margin-bottom: 8px; }
.fly-t { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fly-side { font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; }
.fly-side.a { color: var(--accent); text-align: left; }
.fly-side.b { color: var(--accent2); text-align: right; }
.fly-row { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; margin-top: 6px; }
.fly-cell { position: relative; height: 18px; background: var(--well); border: 1px solid var(--line); min-width: 0; overflow: hidden; }
.fly-a { border-right: 2px solid var(--border-strong); }   /* the shared center axis */
.fly-b { border-left: 2px solid var(--border-strong); }
.fly-cell i { position: absolute; top: 0; bottom: 0; }
.fly-a i { right: 0; background: linear-gradient(90deg, rgba(0, 240, 255, .06), rgba(0, 240, 255, .38)); }
.fly-b i { left: 0; background: linear-gradient(270deg, rgba(255, 46, 151, .06), rgba(255, 46, 151, .34)); }
.fly-val { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  font-family: var(--mono, monospace); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fly-a .fly-val { left: 6px; }
.fly-b .fly-val { right: 6px; }
.fly-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 8px; min-width: 0; }
.fly-cat { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fly-delta { font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.fly-delta.a { color: var(--accent); }
.fly-delta.b { color: var(--accent2); }
.fly-delta.even { color: var(--faint); }
@media (max-width: 560px) { .fly-row, .fly-h { grid-template-columns: 1fr 96px 1fr; } }

/* ---- per-DIMENSION progress strip (Run tab job cards + Live view) ---- */
.jstages { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
.jstage {
  position: relative; overflow: hidden; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 10px; font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .06em;
  color: var(--muted); border: 1px solid var(--line); background: var(--well);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.jstage i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 240, 255, .14); transition: width .4s var(--ease-out); }
.jstage b, .jstage em { position: relative; font-style: normal; }
.jstage b { color: var(--text); font-weight: 600; }
.jstage.ok { border-color: rgba(61, 220, 133, .45); color: var(--good); }
.jstage.ok i { background: rgba(61, 220, 133, .12); }
.jstage.ok b { color: var(--good); }
.jstage.bad { border-color: rgba(255, 93, 122, .55); color: var(--bad); }
.jstage.bad i { background: rgba(255, 93, 122, .12); }
.jstage.bad b { color: var(--bad); }

/* ---- harness provenance chip (Code Gallery: which agent harness drove the generation) ---- */
.h-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px; vertical-align: 1px;
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid var(--line); color: var(--muted);
  background: var(--well); border-radius: 3px; white-space: nowrap;
}
.h-chip.h-hermes { border-color: rgba(0, 240, 255, .45); color: var(--accent); }
.h-chip.h-openclaw { border-color: rgba(255, 180, 84, .5); color: var(--warn); }
.h-chip.h-opencode { border-color: rgba(176, 107, 255, .5); color: #b06bff; }

/* ---- Live bench queue (pending jobs waiting for turn) ---- */
.live-queue { margin: 10px 0 14px; }
.lq-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin-top: 6px;
  border: 1px dashed var(--line); background: var(--well);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.lq-pos { color: var(--accent); font-weight: 700; }
.lq-model { color: var(--text); overflow-wrap: anywhere; }
.lq-wait { margin-left: auto; font-style: italic; animation: telePulse 2.4s ease-in-out infinite; }
.lq-stop { padding: 2px 8px; font-size: 11px; }
.lq-note { text-align: left; margin-top: 6px; }
.live-job { margin-bottom: 14px; }

/* ---- RACING DASH (Live view): dot-matrix live throughput off the engine's own counters.
   Dark instrument bezel, glowing LED dots, peak-hold tach — the benchmark's rev counter. ---- */
.dash {
  margin: 8px 0 10px; padding: 16px 18px 12px; background: #06070c;
  border: 1px solid var(--border-strong);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, .65), inset 0 0 2px rgba(0, 240, 255, .18);
}
.dash-main { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dash-label {
  font-family: var(--mono, monospace); font-size: 8.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px; white-space: nowrap;
}
.dash-unit {
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 5px;
}
.dash-cells { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; align-items: flex-end; }
.dm { display: inline-flex; gap: 7px; }
.dm-ch { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.dm-ch i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .05);                     /* unlit ghost dots — the classic look */
  transition: background .25s ease, box-shadow .25s ease;   /* digits morph instead of snapping */
}
.dm-ch i.on { background: var(--accent); box-shadow: 0 0 4px var(--accent), 0 0 10px rgba(0, 240, 255, .5); }
.dm-xl .dm-ch { gap: 3px; }
.dm-xl .dm-ch i { width: 8px; height: 8px; }
.dm-md .dm-ch i { width: 4px; height: 4px; }
.dm-amber .dm-ch i.on { background: #ffb454; box-shadow: 0 0 4px #ffb454, 0 0 10px rgba(255, 180, 84, .5); }
.dm-red .dm-ch i.on { background: #ff5d7a; box-shadow: 0 0 4px #ff5d7a, 0 0 10px rgba(255, 93, 122, .45); }
.dash-tach {
  position: relative; height: 7px; margin-top: 13px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); overflow: hidden;
}
.dash-tach i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #0a7c8a, var(--accent) 62%, #ffb454 86%, #ff5d7a);
  transition: width .6s ease;
}

/* ---- serve-watch telemetry strip (Live view, while a job runs): VRAM / RAM / CPU gauges
   + the aeon-bench-serve health line — the "is the model load stalled?" instrument ---- */
.tele-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin-top: 8px; padding: 9px 12px; border: 1px solid var(--line); background: var(--well);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.tele-g { flex: 1 1 170px; min-width: 150px; max-width: 300px; }
.tele-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 3px;
}
.tele-strip .live-bar { height: 6px; }
.live-bar-fill.hot { background: var(--warn); }
.tele-serve {
  flex-basis: 100%; font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .06em;
}
.tele-serve.up { color: var(--good); }
.tele-serve.idle { color: var(--muted); }
.tele-serve.down { color: var(--bad); font-weight: 700; animation: telePulse 1.2s ease-in-out infinite; }
@keyframes telePulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.tag.tele-phase { color: var(--accent); border-color: rgba(0, 240, 255, .4); }

/* engine-error recipe-fix hint (Run-tab job card + Live): actionable, not a stack trace */
.job-hint {
  flex-basis: 100%; margin-top: 6px; padding: 8px 11px; font-size: 11.5px; line-height: 1.5;
  color: var(--warn); border: 1px solid rgba(255, 180, 84, .4); background: rgba(255, 180, 84, .06);
  border-left: 3px solid var(--warn); border-radius: 3px;
}
.job-hint b { color: var(--warn); font-weight: 700; letter-spacing: .04em; margin-right: 4px; }

/* family best-practice preset row (below the validation strip) */
.preset-row {
  margin: 4px 0 8px; padding: 9px 13px; border: 1px solid var(--line); background: var(--well);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.preset-row.conf-high { border-color: rgba(61, 220, 133, .4); }
.preset-row.conf-medium { border-color: rgba(0, 240, 255, .35); }
.preset-row.conf-low { border-color: rgba(255, 180, 84, .35); }
.preset-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.preset-star { color: var(--r1); }
.preset-conf {
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 1px 6px; border-radius: 3px;
}
.conf-high .preset-conf { color: var(--good); border-color: rgba(61, 220, 133, .4); }
.conf-low .preset-conf { color: var(--warn); border-color: rgba(255, 180, 84, .4); }
.preset-apply { margin-left: auto; padding: 3px 11px; font-size: 11px; color: var(--accent); border-color: rgba(0, 240, 255, .4); }
.preset-flags { margin-top: 6px; font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.5; }
.preset-notes { margin-top: 5px; font-size: 11px; color: var(--faint); line-height: 1.5; }
/* temperature slider + greedy checkbox (Run tab) */
.temp-ctl { display: inline-flex; align-items: center; gap: 8px; }
.temp-ctl input[type="range"] { width: 110px; accent-color: var(--accent); vertical-align: middle; }
.temp-ctl input[type="range"]:disabled { opacity: .4; }
.temp-val { min-width: 46px; font-size: 11px; color: var(--accent); }
.greedy-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.greedy-label input { accent-color: var(--accent); }

.best-row { border-color: rgba(232, 194, 104, .45); }
.best-star { color: var(--r1); }
.best-conf { color: var(--r1); border-color: rgba(232, 194, 104, .4); }

/* champion recipes — mothership winners for THIS hardware (Run tab, validated-bench card) */
.champ-row { border-color: rgba(0, 240, 255, .35); }
.champ-row .champ-sel { flex: 1 1 240px; min-width: 180px; }
.champ-row .champ-empty { color: var(--faint); font-size: 11.5px; }

/* ---- SHARE: per-benchmark share button (mcards + perf detail) ---- */
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 13px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: rgba(0, 240, 255, .07); border: 1px solid rgba(0, 240, 255, .55);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  text-shadow: 0 0 10px rgba(0, 240, 255, .35);
  box-shadow: 0 0 12px rgba(0, 240, 255, .12), inset 0 0 10px rgba(0, 240, 255, .05);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.share-btn:hover {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  text-shadow: none; box-shadow: 0 0 20px rgba(0, 240, 255, .45);
}
.share-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.share-btn.copied { color: var(--good); border-color: var(--good); background: rgba(61, 220, 133, .08); text-shadow: none; box-shadow: 0 0 14px rgba(61, 220, 133, .25); }

/* ---- perf ELEVATION: machined instrument plates, energized hero, honest heat ---- */
.perf-card {
  position: relative; padding: 14px 16px 12px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0) 42%), var(--panel);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.perf-card::after {                                     /* corner reticle ticks — instrument chrome */
  content: ""; position: absolute; inset: 8px; pointer-events: none; opacity: .5;
  background:
    linear-gradient(90deg, var(--accent) 0 14px, transparent 14px) top left / 100% 1px no-repeat,
    linear-gradient(0deg, var(--accent) 0 14px, transparent 14px) top left / 1px 100% no-repeat;
}
.perf-hero-card { border-color: rgba(0, 240, 255, .35); box-shadow: inset 0 2px 0 var(--accent), inset 0 0 44px rgba(0, 240, 255, .04); }
.perf-svg-hero { filter: drop-shadow(0 0 1px rgba(0, 240, 255, .3)); }
.perf-heat td, .perf-heat th { font-variant-numeric: tabular-nums; }
.perf-heat tbody tr { transition: background var(--t-fast); }
.perf-heat tbody tr:hover { background: rgba(0, 240, 255, .045); }
.chip.met.on { box-shadow: 0 0 14px rgba(0, 240, 255, .35), inset 0 0 8px rgba(0, 0, 0, .25); }

/* ---- UNIFIED BENCHMARK CARDS (Submissions default view): one machined plate per bench JOB.
   Rides the shared .chamfer-card grammar; amber is spent ONLY on the flag (verdict role). ---- */
/* not sticky — the .subs-day headers own top:0; two stacked stickies would collide */
.subs-viewbar { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--well); }
.vb-btn {
  cursor: pointer; padding: 3px 10px; font-family: var(--mono, monospace); font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--chip); border: 1px solid var(--line);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.vb-btn:hover { color: var(--accent); border-color: rgba(0, 240, 255, .5); }
.vb-btn.on { color: var(--accent); border-color: rgba(0, 240, 255, .55); background: rgba(0, 240, 255, .07); }
.bench-card { margin: 8px; padding: 10px 12px; cursor: pointer; }
/* clip-path eats outer shadows — selection is an inset cyan ring (same rule as .pcard focus) */
.bench-card.sel { border-color: rgba(0, 240, 255, .5); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .45), inset 0 0 24px rgba(0, 240, 255, .05); }
.bench-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
/* flagged JOB: amber edge on the plate (verdict hue — the card stays readable, not dimmed) */
.bench-card.flagged-any { border-color: rgba(255, 180, 84, .5); box-shadow: inset 3px 0 0 var(--warn); }
.bench-card.flagged-any.sel { box-shadow: inset 3px 0 0 var(--warn), inset 0 0 0 1px rgba(0, 240, 255, .45); }
.bc-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.bc-name { font-size: 13.5px; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-flag { color: var(--warn); font-size: 13px; text-shadow: 0 0 8px rgba(255, 180, 84, .5); }
.bc-score { font-weight: 700; font-size: 18px; color: var(--muted); text-align: right; font-family: var(--mono, monospace); }
.bc-score.pass { color: var(--good); } .bc-score.part { color: var(--warn); } .bc-score.fail { color: var(--bad); }
.bc-meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 42px; min-width: 0; flex-wrap: wrap; }
.bc-info { font-family: var(--mono, monospace); font-size: 10.5px; color: var(--faint); overflow-wrap: anywhere; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0 42px; }
.pc-chip.info { color: var(--text); }
.pc-chip .chip-flag { color: var(--warn); margin-right: 2px; text-shadow: 0 0 6px rgba(255, 180, 84, .5); }
.arena-chip { cursor: default; }

/* ---- JOB-LEVEL COMPARE (Compare tab primary): every section side by side, A cyan / B magenta.
   PARITY FILLER: a side with no results renders a muted dashed chamfer plate — the gap is
   explicit, never silently collapsed. ---- */
.cmp-secondary { margin: 0 0 14px; }
.cmp-secondary > summary {
  cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.cmp-secondary[open] > summary { color: var(--muted); margin-bottom: 10px; }
.cc-sec { margin: 24px 0; }
/* centered engraved section header between hairline rules (the .cmp-plate-t grammar, full width) */
.cc-sec-h {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.cc-sec-h::before, .cc-sec-h::after { content: ""; flex: 1 1 20px; height: 1px; background: var(--line); }
.cc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.cc-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-filler {
  display: flex; align-items: center; justify-content: center; min-height: 120px; height: 100%;
  padding: 18px; border: 1px dashed var(--line); color: var(--faint);
  font-family: var(--sans); font-size: 12px; text-align: center;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, .015) 12px 24px), var(--well);
}
.cc-none { text-align: center; color: var(--faint); font-family: var(--sans); font-size: 12px; padding: 4px 0 2px; }
/* section summary strip: A vs B composites in side hues, winner ringed in verdict green */
.cc-qual-vs { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 0 0 10px; }
.cc-qv { font-family: var(--mono, monospace); font-size: 22px; font-weight: 700; padding: 1px 10px; }
.cc-qv.side-a { color: var(--accent); }
.cc-qv.side-b { color: var(--accent2); }
.cc-qv.win { box-shadow: inset 0 0 0 1px rgba(61, 220, 133, .45); }
.cc-qv-vs { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cc-sub { font-family: var(--mono, monospace); font-size: 10px; color: var(--faint); }
/* solo (one-sided) case cells keep their side's edge key even without a partner column —
   both borders set explicitly so the base :first/:last-child edge rules can't mis-key them */
.cmp2-cell.solo-a { border-left: 2px solid rgba(0, 240, 255, .35); border-right: 1px solid var(--line); }
.cmp2-cell.solo-b { border-right: 2px solid rgba(255, 46, 151, .3); border-left: 1px solid var(--line); }
.cc-nocase { display: flex; align-items: center; justify-content: center; border-style: dashed; }
/* agentic: per-harness sub-rows + the aligned per-task verdict grid on shared case ids */
.cc-h-row { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; margin-bottom: 10px; }
.cc-h-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cc-h-name { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .1em; }
.cc-h-score { font-family: var(--mono, monospace); font-size: 15px; font-weight: 700; }
.cc-h-score.side-a { color: var(--accent); }
.cc-h-score.side-b { color: var(--accent2); }
.cc-h-score .hver { font-size: 10px; font-weight: 400; color: var(--faint); margin-left: 4px; }
.cc-h-vs { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cc-tasks { display: grid; grid-template-columns: 20px repeat(var(--n), minmax(16px, 22px)); gap: 2px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; }
.cc-task-side { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; align-self: center; }
.cc-task-side.a { color: var(--accent); }
.cc-task-side.b { color: var(--accent2); }
.cc-task {
  display: inline-flex; align-items: center; justify-content: center; height: 18px;
  font-family: var(--mono, monospace); font-size: 10px; font-weight: 700;
  border: 1px solid var(--line); background: var(--well); color: var(--faint);
}
.cc-task.pass { color: var(--good); border-color: rgba(61, 220, 133, .4); background: rgba(61, 220, 133, .07); }
.cc-task.fail { color: var(--bad); border-color: rgba(255, 93, 122, .4); background: rgba(255, 93, 122, .06); }
.cc-task.part { color: var(--warn); border-color: rgba(255, 180, 84, .4); }
/* perf: peak headline pair + the aligned concurrency table (better cell subtly lit) */
.cc-peaks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.cc-peak {
  padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cc-peak.side-a { border-left: 2px solid rgba(0, 240, 255, .35); }
.cc-peak.side-b { border-right: 2px solid rgba(255, 46, 151, .3); }
.cc-peak b { display: block; font-family: var(--mono, monospace); font-size: 24px; line-height: 1.2; }
.cc-peak.side-a b { color: var(--accent); }
.cc-peak.side-b b { color: var(--accent2); }
.cc-peak.win { border-color: rgba(61, 220, 133, .5); box-shadow: inset 0 0 0 1px rgba(61, 220, 133, .3); }
.cc-peak-lbl { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cc-perf-wrap { overflow-x: auto; }
.cc-perf th:first-child { width: 56px; }
.cc-perf th.cc-ma, .cc-perf td.cc-ca { border-left: 1px solid var(--line); }
.cc-perf th { white-space: nowrap; }
.cc-perf .cc-best { color: var(--good); font-weight: 700; background: rgba(61, 220, 133, .10); }
/* arena: artifact chips per side; ok/✗ is a verdict, the column key stays side-hued */
.cc-arts { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.cc-art {
  display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer;
  padding: 3px 9px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .05em;
  color: var(--muted); background: var(--well); border: 1px solid var(--line);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.cc-art:hover { border-color: var(--accent); color: var(--accent); }
.cc-art .ok { color: var(--good); } .cc-art .bad { color: var(--bad); }
/* recipe: aligned mono flag lists — a flag only ONE side carries is lit in that side's hue */
.cc-recipe { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; min-width: 0; }
.cc-recipe.side-a { border-left: 2px solid rgba(0, 240, 255, .35); }
.cc-recipe.side-b { border-right: 2px solid rgba(255, 46, 151, .3); }
.cc-rline { font-family: var(--mono, monospace); font-size: 11px; color: var(--muted); overflow-wrap: anywhere; margin-bottom: 3px; }
.cc-rline .catk { margin-right: 6px; }
.cc-flags { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.cc-flag {
  font-family: var(--mono, monospace); font-size: 10.5px; color: var(--muted);
  padding: 1px 6px; overflow-wrap: anywhere; min-height: 18px;
}
.cc-flag.gap { color: var(--faint); }
.cc-flag.diff-a { color: var(--accent); background: rgba(0, 240, 255, .07); box-shadow: inset 2px 0 0 rgba(0, 240, 255, .45); }
.cc-flag.diff-b { color: var(--accent2); background: rgba(255, 46, 151, .07); box-shadow: inset -2px 0 0 rgba(255, 46, 151, .45); }
@media (max-width: 900px) {
  .cc-cols, .cc-peaks { grid-template-columns: 1fr; }
  .cc-filler { min-height: 72px; }
}

/* ============================================================================
   v22 LAYER — GLOBAL LEADERBOARD: INSTRUMENT ROWS + THE DIAL
   One row per model: rank · AEON SCORE (brightest) · identity · dial cluster.
   Luminance tells the story: headline > dial values > labels > metadata.
   Space separates groups — no gridline/border noise; chamfer only on #1.
   ========================================================================== */

/* ---- the dial: reusable 270° arc gauge (see dial() in app.js) ---- */
.dial {
  position: relative; width: var(--dial, 76px); flex: none; text-align: center;
  font-variant-numeric: tabular-nums;
}
.dial svg { width: var(--dial, 76px); height: var(--dial, 76px); display: block; }
.dial-track { fill: none; stroke: var(--line); stroke-width: 6.5; stroke-linecap: round; }
.dial-arc { fill: none; stroke-width: 6.5; stroke-linecap: round;
  transition: stroke-dashoffset .8s var(--ease-out); }
/* ONE color law for every dial: the arc encodes the value band in verdict hues */
.dial.pass .dial-arc { stroke: var(--good); }
.dial.part .dial-arc { stroke: var(--warn); }
.dial.fail .dial-arc { stroke: var(--bad); }
.dial-val {
  position: absolute; left: 0; right: 0; top: calc(var(--dial, 76px) * .335);
  font: 700 calc(var(--dial, 76px) * .245)/1 ui-monospace, monospace;
  color: var(--text); letter-spacing: -.5px;
}
.dial-lbl {
  display: block; margin-top: calc(var(--dial, 76px) * -.13);
  font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dial-note {
  display: block; margin-top: 1px; font-family: var(--sans); font-size: 8px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
/* not yet tested: dim + dashed track + "—" — an honest gap, never a fake zero */
.dial-na { opacity: .48; }
.dial-na .dial-track { stroke-dasharray: 2.5 5.5; stroke-linecap: butt; }
.dial-na .dial-val { color: var(--faint); font-weight: 400; }
/* load sweep — data arrival only (#board.fresh); reduced motion kills it below */
.fresh .dial-arc { animation: dialIn .9s var(--ease-out) backwards; }
@keyframes dialIn { from { stroke-dashoffset: var(--c, 156); } }

/* ---- the instrument row ---- */
.mrow {
  display: grid;
  grid-template-columns: max-content max-content minmax(220px, 1fr) auto;
  grid-template-areas: "rank aeon id dials";
  align-items: center; column-gap: 22px; row-gap: 10px;
  padding: 16px 22px; background: var(--panel2); border-radius: var(--r-m);
  cursor: pointer; position: relative;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.mrow:hover { background: #13131f; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .28); }
.mrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
/* the PLACE — the giant engraved numeral from the original design, now the rank marker */
.mrow-rank {
  grid-area: rank; text-align: center; align-self: center;
  font-size: 84px; font-weight: 800; line-height: .9; letter-spacing: -5px;
  font-variant-numeric: tabular-nums; user-select: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(148, 148, 184, .34);
}
@supports not (-webkit-text-stroke: 1px transparent) {
  .mrow-rank { color: rgba(148, 148, 184, .18); }
}
.mrow.p1 .mrow-rank { -webkit-text-stroke-color: rgba(232, 194, 104, .8);
  text-shadow: 0 0 26px rgba(232, 194, 104, .22); }
.mrow.p2 .mrow-rank { -webkit-text-stroke-color: rgba(170, 180, 200, .62); }
.mrow.p3 .mrow-rank { -webkit-text-stroke-color: rgba(201, 138, 94, .62); }
/* #1 — the ONE machined hero plate on the board (chamfer spent sparingly) */
.mrow.top {
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 44px rgba(0, 240, 255, .045);
}
.mrow.top:hover {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 44px rgba(0, 240, 255, .045),
    inset 0 0 0 1px rgba(0, 240, 255, .28);
}
.fresh .mrow {
  animation: cardIn .35s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 28ms);
}

/* AEON SCORE — the brightest element on the board (verdict hue + the only headline glow) */
.mrow-aeon {
  grid-area: aeon; display: flex; flex-direction: column; align-items: center;
  gap: 3px; min-width: 92px;
}
.aeon-val {
  font: 700 34px/1 ui-monospace, monospace; letter-spacing: -1px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.mrow-aeon.pass .aeon-val { color: var(--good); text-shadow: 0 0 24px rgba(61, 220, 133, .38); }
.mrow-aeon.part .aeon-val { color: var(--warn); text-shadow: 0 0 24px rgba(255, 180, 84, .3); }
.mrow-aeon.fail .aeon-val { color: var(--bad); text-shadow: 0 0 24px rgba(255, 93, 122, .3); }
.aeon-lbl {
  font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
/* provisional: dimmed + an honest micro-chip — components missing, nothing faked */
.mrow-aeon.prov .aeon-val { opacity: .55; text-shadow: none; }
.aeon-prov {
  font-family: var(--sans); font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); border: 1px dashed var(--line); padding: 1px 6px;
}

/* ---- the AEON HERO GAUGE — one oversized instrument per row --------------------------------
   Brutalist numeral · industrial tick ring · cosmic band-hue glow · engraved OVERALL.
   Same 0-100 color law as every small dial; just louder — the row's single brightest object. */
.dial-hero { margin: -4px 0; }
/* cosmic: a soft nebula of the verdict hue. Sized with `closest-side` and faded to ZERO at
   96% of it, entirely INSIDE the gauge box — it can never touch a border-radius, the row
   edge, or .mrow.top's chamfer clip-path, so there is no cut-off edge on any axis. */
.dial-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--dial); pointer-events: none;
}
.dial-hero.pass::before { background: radial-gradient(circle closest-side at 50% 50%, rgba(61, 220, 133, .2) 0%, rgba(61, 220, 133, .07) 52%, transparent 96%); }
.dial-hero.part::before { background: radial-gradient(circle closest-side at 50% 50%, rgba(255, 180, 84, .16) 0%, rgba(255, 180, 84, .055) 52%, transparent 96%); }
.dial-hero.fail::before { background: radial-gradient(circle closest-side at 50% 50%, rgba(255, 93, 122, .16) 0%, rgba(255, 93, 122, .055) 52%, transparent 96%); }
/* the arc's glow blooms PAST the svg box — svg defaults to overflow:hidden, which slices the
   drop-shadow into a visible rectangle. Let it escape; nothing else draws near the edge. */
.dial-hero svg { overflow: visible; }
.dial-ticks { fill: none; stroke: var(--border-strong); stroke-width: 1.6; stroke-linecap: butt; }
.dial-hero .dial-track { stroke-width: 7.5; }
.dial-hero .dial-arc { stroke-width: 7.5; }
.dial-hero.pass .dial-arc { filter: drop-shadow(0 0 7px rgba(61, 220, 133, .55)); }
.dial-hero.part .dial-arc { filter: drop-shadow(0 0 7px rgba(255, 180, 84, .45)); }
.dial-hero.fail .dial-arc { filter: drop-shadow(0 0 7px rgba(255, 93, 122, .45)); }
.dial-sub {                                /* engraved OVERALL above the numeral */
  position: absolute; left: 0; right: 0; top: calc(var(--dial) * .245);
  font-family: var(--sans); font-size: calc(var(--dial) * .073); font-weight: 700;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--faint);
}
.dial-hero .dial-val {                     /* brutalist: the heaviest numeral on the board */
  top: calc(var(--dial) * .345);
  font: 800 calc(var(--dial) * .265)/1 ui-monospace, monospace; letter-spacing: -1.5px;
}
.dial-hero.pass .dial-val { color: var(--good); text-shadow: 0 0 26px rgba(61, 220, 133, .42); }
.dial-hero.part .dial-val { color: var(--warn); text-shadow: 0 0 26px rgba(255, 180, 84, .34); }
.dial-hero.fail .dial-val { color: var(--bad); text-shadow: 0 0 26px rgba(255, 93, 122, .34); }
.dial-hero .dial-lbl {
  margin-top: calc(var(--dial) * -.115);
  font-size: calc(var(--dial) * .082); letter-spacing: .24em; text-indent: .24em;
  color: var(--muted);
}
.mrow-aeon.prov .dial-hero .dial-val { opacity: .55; text-shadow: none; }
.mrow-aeon.prov .dial-hero .dial-arc { filter: none; }
.mrow-aeon.prov .dial-hero::before { opacity: .35; }

/* ---- PERFORMANCE race instrument: big tok/s readout · tach bar · cockpit sub-readouts ---- */
.perf-inst {
  width: 118px; flex: none; text-align: center; align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-variant-numeric: tabular-nums;
  /* the instrument anchors the FAR RIGHT of every dial cluster — one aligned tok/s column
     down the whole board, however many dials a given row draws */
  order: 99;
}
.pi-tps {
  font: 800 24px/1 ui-monospace, monospace; letter-spacing: -1px;
  color: var(--accent); text-shadow: 0 0 18px rgba(0, 240, 255, .45);
}
.pi-unit {
  font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.pi-tach {
  display: block; width: 96px; height: 7px; margin-top: 3px; position: relative;
  transform: skewX(-14deg); overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(148, 148, 184, .13) 0 5px, transparent 5px 8px);
}
.pi-tach i {
  position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--accent), var(--warn) 62%, var(--bad));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
  filter: drop-shadow(0 0 5px rgba(0, 240, 255, .5));
}
.pi-lbl {
  margin-top: 2px; font-family: var(--sans); font-size: 9px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.pi-sub {
  font: 600 10px/1.2 ui-monospace, monospace; color: var(--muted); letter-spacing: .04em;
}
.pi-na { opacity: .48; }
.pi-na .pi-tps { color: var(--faint); text-shadow: none; font-weight: 400; }
.pi-note {
  font-family: var(--sans); font-size: 8px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}

/* ---- CELL-CHUNK category meters: glowing dot-matrix fill on a ghost-cell track ----
   Full category name · skewed segmented meter (the Live dash's LED language) · band-hued
   numeral. Lit cells + hue + number all encode the same score — instant contrast. */
.mrow-cats { display: flex; flex-direction: column; gap: 5px; margin: 7px 0 3px; max-width: 400px; }
.catbar {
  display: grid; grid-template-columns: 96px minmax(120px, 1fr) 32px;
  align-items: center; column-gap: 12px;
}
.catbar { --cell: var(--faint); }
.catbar.pass { --cell: var(--good); --cell-glow: rgba(61, 220, 133, .6); }
.catbar.part { --cell: var(--warn); --cell-glow: rgba(255, 180, 84, .48); }
.catbar.fail { --cell: var(--bad);  --cell-glow: rgba(255, 93, 122, .48); }
.catbar-l {
  font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); text-align: right; white-space: nowrap;
}
.catbar-cells {
  position: relative; display: block; height: 12px; transform: skewX(-14deg);
  /* the unlit track: ghost cells — the meter's full scale is always visible */
  background: repeating-linear-gradient(90deg, rgba(148, 148, 184, .12) 0 7px, transparent 7px 10px);
}
.catbar-cells i {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 0%);
  background: repeating-linear-gradient(90deg, var(--cell) 0 7px, transparent 7px 10px);
  filter: drop-shadow(0 0 5px var(--cell-glow, transparent));
}
.catbar-v {
  font: 700 13px/1 ui-monospace, monospace; color: var(--cell);
  font-variant-numeric: tabular-nums;
}

/* identity: name bright, everything else recedes */
.mrow-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mrow-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.mrow-ava .model-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-width: 2px; }
.mrow:hover .model-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.mrow[data-trust="verified"] .model-avatar { border-color: rgba(61, 220, 133, .6); }
.mrow-model { font-size: 16px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.mrow-acts { gap: 10px; }
/* the whole row is the link — say so, quietly, on approach */
.mrow-open {
  margin-left: auto; font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); white-space: nowrap;
}
.mrow:hover .mrow-open, .mrow:focus-visible .mrow-open { opacity: 1; color: var(--accent); }

/* dial cluster — mid luminance, right-aligned, wraps cleanly */
.mrow-dials {
  grid-area: dials; display: flex; flex-wrap: wrap; gap: 4px 12px;
  justify-content: flex-end; align-items: flex-start; justify-self: end;
}

/* the Global Leaderboard hides the classic chart/weights chrome; the filter tools go quiet
   (whitespace does the separating — the boxed toolbar border was noise) */
#boardPanel.global .grid2 { grid-template-columns: 1fr; }
#boardPanel.global .chartwrap, #boardPanel.global .weights-wrap { display: none; }
#boardPanel.global .lbtools { border-color: transparent; padding: 4px 2px; }
#boardPanel.global .lede b { color: var(--text); }

@media (max-width: 860px) {
  .mrow {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-areas: "rank aeon id" "dials dials dials";
    column-gap: 14px; padding: 14px;
  }
  .mrow-dials { justify-content: flex-start; justify-self: start; }
  .mrow-rank { font-size: 52px; letter-spacing: -3px; -webkit-text-stroke-width: 1px; }
  .mrow-aeon { min-width: 72px; }
  .mrow-aeon .dial-hero { --dial: 96px !important; }
  /* far-right anchoring is a desktop alignment device; on the wrapped mobile cluster the
     instrument just flows with the dials */
  .perf-inst { order: 0; }
}

/* phones: identity gets its own full-width band — the category meters were being crushed
   inside the id column (min track widths overflowed the card). rank + hero share the top
   line, everything below breathes at full card width. */
@media (max-width: 640px) {
  .mrow {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: "rank aeon" "id id" "dials dials";
    column-gap: 12px; row-gap: 8px; padding: 12px 14px 14px;
  }
  .mrow-rank { font-size: 44px; letter-spacing: -2px; }
  .mrow-aeon { justify-self: end; }
  .mrow-aeon .dial-hero { --dial: 88px !important; }
  .mrow-cats { max-width: none; }
  .catbar { grid-template-columns: 78px minmax(0, 1fr) 26px; column-gap: 8px; }
  .catbar-l { font-size: 8px; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; }
  .catbar-v { font-size: 12px; }
  .mrow-dials { gap: 4px 10px; width: 100%; }
  .perf-inst { width: 104px; }
  .pi-tach { width: 88px; }
  .mrow-open { display: none; }
}

/* ---- multimodal sibling plates inside the run detail (vision · audio · video) ---- */
.sib-boards { margin: 12px 0 2px; }
.sib-boards:empty { display: none; }
.sib-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sib-plate {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 16px 8px; cursor: pointer;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sib-plate:hover { border-color: var(--accent); background: rgba(0, 240, 255, .04); }
.sib-plate:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.sib-meta { font-family: var(--sans); font-size: 10px; color: var(--faint); }

/* ---- EXPLORE THE DATA: expandable board explorer (heatmap + decay line) ---- */
.explorer-wrap { margin: 16px 0 4px; }
.explorer-wrap > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: baseline; gap: 9px;
  padding: 9px 16px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.explorer-wrap > summary::-webkit-details-marker { display: none; }
.explorer-wrap > summary:hover { color: var(--text); border-color: var(--border-strong); }
.explorer-wrap[open] > summary { color: var(--accent); border-color: var(--accent); }
.exp-mark { color: var(--accent); }
.exp-sub {
  font-family: var(--sans); font-size: 10.5px; font-weight: 400; letter-spacing: .02em;
  text-transform: none; color: var(--faint);
}
.exp-body { padding: 14px 2px 4px; }

/* filter chips row (reuses the site-wide .chip grammar; cyan = interactive only) */
.exp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.exp-filters .flabel { margin-right: 4px; }
.exp-metric { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.exp-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; }
.exp-scale { font-family: var(--sans); font-size: 11px; color: var(--faint); margin: 2px 0 10px; }

/* small-multiple heat plates: side by side when 2-3 models are selected */
.exp-heats { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.exp-plate { flex: 1 1 320px; min-width: 0; }
.exp-plate-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; min-width: 0; }
.exp-plate-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-plate-score { font-size: 10px; color: var(--faint); letter-spacing: .08em; }
.exp-plate-fact {                            /* served ctx + rig: quiet plate facts */
  font-size: 10px; color: var(--faint); letter-spacing: .04em; white-space: nowrap;
  padding-left: 7px; border-left: 1px solid var(--line);
}

/* hardware / trust facet groups ride the difficulty row, separated by a hairline */
.exp-fgroup {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line);
}
.exp-none { font-family: var(--sans); font-size: 11px; color: var(--faint); }

/* the heatmap itself: a LUMINANCE-ordered single-hue ramp (dark → bright cyan = higher).
   Verdict green/amber/red are reserved for verdicts — magnitude is brightness here. */
.exp-heat { border-collapse: collapse; font-family: ui-monospace, monospace; width: 100%; }
.exp-heat th { padding: 3px 6px; }
.exp-heat .exp-dh { text-align: center; }
.exp-heat .exp-cat { text-align: right; padding-right: 9px; white-space: nowrap; }
.exp-heat .exp-dh, .exp-heat .exp-cat {
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  font-size: 9.5px; color: var(--faint);
}
.exp-heat td {
  min-width: 44px; padding: 6px 4px; text-align: center; border: 1px solid var(--bg);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
}
.exp-heat td.xb0 { background: color-mix(in srgb, var(--accent) 5%, var(--well)); color: var(--muted); }
.exp-heat td.xb1 { background: color-mix(in srgb, var(--accent) 15%, var(--well)); }
.exp-heat td.xb2 { background: color-mix(in srgb, var(--accent) 28%, var(--well)); }
.exp-heat td.xb3 { background: color-mix(in srgb, var(--accent) 46%, var(--well)); }
.exp-heat td.xb4 { background: color-mix(in srgb, var(--accent) 78%, var(--well)); color: var(--accent-ink); }
.exp-heat td.exp-na {                        /* never scored: an honest gap, not a zero */
  background: none; border: 1px dashed var(--line); color: var(--faint); font-weight: 400;
}

/* difficulty-decay line: gridless, three faint reference lines, identity-hue series */
.exp-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.exp-sec-t {
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  font-size: 10px; color: var(--faint);
}
.exp-sec-n { font-family: var(--sans); font-size: 11px; color: var(--faint); }
.exp-decay { display: block; width: 100%; max-width: 720px; height: auto; }
.exp-decay .exp-ref { stroke: #17223f; stroke-width: 1; }
.exp-decay .exp-axis { fill: #55607f; font-family: ui-monospace, monospace; font-size: 10px; }
.exp-decay .exp-series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

@media (max-width: 860px) {
  .exp-plate { flex-basis: 100%; }
  .exp-metric { margin-left: 0; }
  .exp-fgroup { margin-left: 0; padding-left: 0; border-left: none; }
}

/* ---- RUN BENCH — the one launch control on the pod: loud, machined, impossible to miss ---- */
button.run-bench-btn {
  font-family: var(--sans); font-size: 20px; font-weight: 900; letter-spacing: .16em;
  padding: 18px 52px; cursor: pointer; color: #fff;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0, 0, 0, .16) 12px 24px),
    linear-gradient(180deg, #ff3b30 0%, #d81f14 55%, #a80f08 100%);
  border: 1px solid #ff6b60; border-bottom-color: #7c0a05;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .35),
              0 0 26px rgba(255, 59, 48, .5), 0 0 70px rgba(255, 59, 48, .2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  animation: rbb-pulse-red 2.4s ease-in-out infinite;
}
button.run-bench-btn:hover {
  transform: translateY(-1px) scale(1.02); filter: brightness(1.1);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(0, 0, 0, .35),
              0 0 36px rgba(255, 59, 48, .75), 0 0 110px rgba(255, 59, 48, .3);
}
button.run-bench-btn:active { transform: translateY(0) scale(.99); }
button.run-bench-btn:disabled {
  animation: none; filter: grayscale(.6) brightness(.7); box-shadow: none; cursor: not-allowed;
}
button.run-bench-btn .rbb-mark { font-size: 15px; margin-right: 6px; }
@keyframes rbb-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(0, 240, 255, .45), 0 0 60px rgba(0, 240, 255, .18); }
  50%      { box-shadow: 0 0 34px rgba(0, 240, 255, .7), 0 0 100px rgba(0, 240, 255, .3); }
}
@keyframes rbb-pulse-red {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .35),
                         0 0 26px rgba(255, 59, 48, .5), 0 0 70px rgba(255, 59, 48, .2); }
  50%      { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .35),
                         0 0 40px rgba(255, 59, 48, .8), 0 0 120px rgba(255, 59, 48, .32); }
}

/* SIMPLE / ADVANCED — the two form modes, unmissable machined toggle */
.run-mode { display: flex; gap: 0; margin-bottom: 14px; }
.rm-btn {
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 800; letter-spacing: .18em;
  padding: 10px 30px; cursor: pointer; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--border-strong);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.rm-btn:first-child { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.rm-btn:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); margin-left: -1px; }
.rm-btn.active {
  color: #051318; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 16px rgba(0, 240, 255, .4);
}
.rm-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
/* simple mode: every .adv block collapses — the essentials + the big red button remain */
#runPanel.simple .adv { display: none !important; }

/* ---- gallery card provenance chips: date · NEW pulse · prompt difficulty ---- */
.gal-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; min-height: 15px; }
.gal-date {
  font: 600 10px/1 ui-monospace, monospace; color: var(--faint); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.gal-new {
  font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: .16em;
  color: #041016; background: var(--accent); padding: 2px 7px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  box-shadow: 0 0 12px rgba(0, 240, 255, .55);
  animation: rbb-pulse 2.6s ease-in-out infinite;
}
.gal-diff {
  font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 2px 8px; border: 1px solid; border-radius: 2px;
}
.gal-diff.gd-easy   { color: var(--good); border-color: rgba(61, 220, 133, .45); }
.gal-diff.gd-medium { color: var(--warn); border-color: rgba(255, 180, 84, .45); }
.gal-diff.gd-hard   { color: var(--bad);  border-color: rgba(255, 93, 122, .5); }
/* the upper tiers escalate past the verdict hues: crimson → magenta → white-hot */
.gal-diff.gd-expert   { color: #ff4d4d; border-color: rgba(255, 77, 77, .55); }
.gal-diff.gd-frontier { color: #ff2e97; border-color: rgba(255, 46, 151, .55);
  text-shadow: 0 0 8px rgba(255, 46, 151, .5); }
.gal-diff.gd-god_mode {
  color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06);
  text-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 22px rgba(0, 240, 255, .5);
  letter-spacing: .2em;
}
.gal-title .gal-diff { vertical-align: 2px; margin-left: 2px; }

/* ---- GOD MODE BENCH — the hardest-class board: white-hot over void ---- */
.god-tab {
  color: #fff; letter-spacing: .12em; font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 255, 255, .75), 0 0 24px rgba(0, 240, 255, .45);
}
.god-tab.active { box-shadow: inset 0 -2px 0 #fff; }
.god-title {
  color: #fff; letter-spacing: .18em;
  text-shadow: 0 0 14px rgba(255, 255, 255, .8), 0 0 40px rgba(0, 240, 255, .5);
}
.god-board { display: flex; flex-direction: column; gap: 10px; }
.grow {
  display: grid; grid-template-columns: max-content max-content minmax(0, 1fr);
  grid-template-areas: "rank score id"; align-items: center; column-gap: 26px;
  padding: 18px 24px; background: #0a0a12; border-radius: var(--r-m); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.grow:hover { transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 24px rgba(255, 255, 255, .06); }
.grow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.grow.top {
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 3px 0 0 #fff, inset 0 0 48px rgba(255, 255, 255, .05);
}
.god-rank {
  grid-area: rank; font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -4px;
  font-variant-numeric: tabular-nums; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35); user-select: none;
}
.grow.top .god-rank { -webkit-text-stroke-color: rgba(255, 255, 255, .85);
  text-shadow: 0 0 26px rgba(255, 255, 255, .25); }
.god-score-wrap { grid-area: score; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.god-score {
  font: 800 44px/1 ui-monospace, monospace; letter-spacing: -2px; color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, .85), 0 0 50px rgba(0, 240, 255, .4);
  font-variant-numeric: tabular-nums;
}
.god-score-lbl {
  font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint);
}
.god-score-wrap.prov .god-score { opacity: .55; text-shadow: none; }
.god-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.god-cov { font: 600 10px/1 ui-monospace, monospace; color: var(--muted); letter-spacing: .04em; }
.god-cats, .god-harns { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.god-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.god-cat-n { font: 800 15px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.god-cat-n.pass { color: var(--good); text-shadow: 0 0 10px rgba(61, 220, 133, .45); }
.god-cat-n.part { color: var(--warn); }
.god-cat-n.fail { color: var(--bad); }
.god-harn {
  font: 600 11px/1.4 ui-monospace, monospace; color: var(--muted);
  border: 1px solid rgba(255, 255, 255, .14); padding: 3px 9px; border-radius: 2px;
}
.god-harn b { color: #fff; }
.god-untested {
  font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); opacity: .7;
}
@media (max-width: 640px) {
  .grow { grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "rank score" "id id"; }
  .god-rank { font-size: 44px; }
  .god-score { font-size: 34px; }
}

/* ---------------------------------------------------------------- reduced motion (keep last) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}