/* Liquidation Desk — an instrument console, not a web app.
   The whole interface is set in one monospace family: addresses, health
   factors, gwei and block numbers are the actual vocabulary of this domain,
   and letting them align in columns is the point. Hierarchy comes from
   weight, size and tracking rather than from a second typeface.

   Protocol colors are a validated categorical set (OKLCH L 0.48–0.67, chroma
   >= 0.1, CVD-separated on this surface). Their tritan separation sits in the
   6–8 warn band, so a protocol color never appears without its text label.
   Risk bands use a single-hue rose ramp — ordered magnitude, not identity. */

:root {
  --bg:        #0B0E14;
  --surface:   #121826;
  --surface-2: #18202F;
  --line:      #232C3D;
  --line-soft: #1A2231;

  --ink:      #E6EBF4;
  --ink-dim:  #8494AC;
  --ink-mute: #5A6880;

  /* categorical — protocol identity (validated) */
  --morpho:   #7768E8;
  --aave:     #00959F;
  --moonwell: #BC7D22;

  /* sequential — risk intensity, one hue light→dark */
  --risk-0: #FF4D6A;
  --risk-1: #E05270;
  --risk-2: #BE5673;
  --risk-3: #99586F;
  --risk-4: #7C6479;
  --risk-5: #5F6379;
  --risk-6: #4A5A78;

  --good: #2E9E76;

  --r: 3px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* faint grid, like graph paper under an instrument */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

:focus-visible { outline: 2px solid var(--morpho); outline-offset: 2px; }

/* `hidden` must win over the layout display values set below */
[hidden] { display: none !important; }

/* ───────────────────────────────── gate ─────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 0%, #131B2B 0%, var(--bg) 62%);
  padding: 24px;
}
.gate__form {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 30px 28px;
  animation: rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.gate__mark { position: relative; height: 30px; margin-bottom: 22px; }
.gate__rail {
  position: absolute; top: 14px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.gate__tick {
  position: absolute; top: 4px; left: 50%; width: 2px; height: 22px;
  background: var(--risk-0);
  box-shadow: 0 0 14px rgba(255,77,106,.6);
  animation: tick 3.4s ease-in-out infinite;
}
.gate__title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.gate__sub { margin: 4px 0 26px; color: var(--ink-mute); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.gate__label { display: block; font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.gate__input {
  width: 100%; padding: 11px 12px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 15px; letter-spacing: .18em;
}
.gate__input:focus { border-color: var(--morpho); }
.gate__button {
  width: 100%; margin-top: 16px; padding: 11px;
  background: var(--morpho); color: #0B0E14;
  border: 0; border-radius: var(--r);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: filter .15s ease;
}
.gate__button:hover { filter: brightness(1.12); }
.gate__error { min-height: 18px; margin: 12px 0 0; color: var(--risk-0); font-size: 12px; }

/* ─────────────────────────────── console ────────────────────────────────── */
.console { position: relative; z-index: 1; padding: 0 20px 60px; max-width: 1500px; margin: 0 auto; }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 0;
  background: linear-gradient(var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.bar__id { display: flex; align-items: center; gap: 10px; }
.bar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 10px var(--good);
  animation: pulse 2.4s ease-in-out infinite;
}
.bar__dot.is-stopped { background: var(--ink-mute); box-shadow: none; animation: none; }
.bar__name { font-weight: 700; letter-spacing: .16em; font-size: 12px; }
.bar__chain { color: var(--ink-mute); font-size: 11px; letter-spacing: .1em; }
.bar__readout { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.readout { display: flex; flex-direction: column; line-height: 1.25; }
.readout i { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.readout b { font-size: 13px; font-weight: 600; color: var(--ink); }
.bar__actions { display: flex; gap: 8px; }

.chip {
  padding: 4px 9px; border-radius: 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(119,104,232,.14); color: var(--morpho);
  border: 1px solid rgba(119,104,232,.4);
}
.chip.is-armed { background: rgba(255,77,106,.14); color: var(--risk-0); border-color: rgba(255,77,106,.45); }

.btn {
  padding: 7px 13px; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--morpho); color: var(--morpho); }
.btn--ghost { background: transparent; }

.warnings {
  border: 1px solid rgba(255,77,106,.4); background: rgba(255,77,106,.07);
  border-radius: var(--r); padding: 11px 14px; margin-bottom: 20px;
  font-size: 12px; color: #FFB3C0;
}
.warnings p { margin: 3px 0; }

/* ─────────────────────────────── armed strip ────────────────────────────── */
.armed {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border: 1px solid rgba(255,77,106,.45); background: rgba(255,77,106,.06);
  border-radius: var(--r); padding: 13px 16px; margin-bottom: 18px;
}
.armed__lead { display: flex; align-items: center; gap: 11px; }
.armed__pip {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--risk-0); box-shadow: 0 0 12px var(--risk-0);
  animation: pulse 1.8s ease-in-out infinite;
}
.armed__lead strong { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--risk-0); }
.armed__lead p { margin: 2px 0 0; font-size: 11px; color: var(--ink-dim); }
.armed__stats { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.armed.is-halted { border-color: var(--line); background: var(--surface); }
.armed.is-halted .armed__pip { background: var(--ink-mute); box-shadow: none; animation: none; }
.armed.is-halted .armed__lead strong { color: var(--ink-dim); }
.btn--danger { border-color: rgba(255,77,106,.5); color: var(--risk-0); }
.btn--danger:hover { border-color: var(--risk-0); color: var(--risk-0); }

.kind--fire { color: var(--risk-0); font-weight: 700; }
/* a capture our own gates would have accepted — the only kind that stings */
.miss { color: var(--risk-0); }

/* ──────────────────────────── signature: the rail ───────────────────────── */
.rail-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 22px 16px; margin-bottom: 18px;
}
.panel__head { margin-bottom: 16px; }
.panel__head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.panel__head p { margin: 4px 0 0; color: var(--ink-mute); font-size: 12px; }

.rail { position: relative; height: 132px; overflow: hidden; border-radius: 2px; }
.rail__plot { position: absolute; inset: 0 0 24px; }

/* the hard line the whole business turns on */
.rail__threshold {
  position: absolute; top: 0; bottom: 24px; left: 18%;
  border-left: 1px dashed rgba(255,77,106,.65);
}
.rail__threshold span {
  position: absolute; top: 2px; left: 11px; white-space: nowrap;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--risk-0);
}

.rail__axis {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  border-top: 1px solid var(--line);
  padding-top: 5px; font-size: 10px; color: var(--ink-mute); letter-spacing: .08em;
}

/* ambient: a sweep that runs while the engine scans — the vigil signal */
.rail__sweep {
  position: absolute; top: 0; bottom: 24px; width: 90px;
  background: linear-gradient(90deg, transparent, rgba(119,104,232,.13), transparent);
  transform: translateX(-100px); opacity: 0;
}
.rail__sweep.is-active { opacity: 1; animation: sweep 3.2s linear infinite; }

.dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--bg); /* 2px surface ring so overlapping marks read */
  transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1);
}
.dot--morpho   { background: var(--morpho); }
.dot--aave     { background: var(--aave); }
.dot--moonwell { background: var(--moonwell); }
.dot--critical { animation: flare 1.5s ease-in-out infinite; }

.rail__legend {
  display: flex; gap: 18px; align-items: center; margin-top: 12px;
  font-size: 11px; color: var(--ink-dim);
}
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg--right { margin-left: auto; color: var(--ink-mute); }
.sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sw--morpho { background: var(--morpho); }
.sw--aave { background: var(--aave); }
.sw--moonwell { background: var(--moonwell); }

/* ───────────────────────────────── tiles ────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 17px;
}
.tile h3 { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.tile__num { margin: 9px 0 3px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile__sub { margin: 0; font-size: 11px; color: var(--ink-mute); }
.tile--alert.is-hot { border-color: rgba(255,77,106,.55); background: rgba(255,77,106,.06); }
.tile--alert.is-hot .tile__num { color: var(--risk-0); }

/* ───────────────────────────────── grid ─────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.panel--feed { grid-column: 1 / -1; }

.bands { display: flex; flex-direction: column; gap: 7px; }
.band { display: grid; grid-template-columns: 78px 1fr 92px; gap: 11px; align-items: center; font-size: 11px; }
.band__label { color: var(--ink-dim); letter-spacing: .04em; }
/* both are spans, so they must be blocks for width/height to apply at all */
.band__track { display: block; height: 15px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.band__fill { display: block; height: 100%; border-radius: 0 2px 2px 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.band__val { text-align: right; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.tbl .num { text-align: right; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tag { display: inline-flex; align-items: center; gap: 5px; }
.tag i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.hf--crit { color: var(--risk-0); font-weight: 700; }
.hf--warn { color: #D9944A; }
.addr { color: var(--ink-dim); }
.tier { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.tier--fast { color: var(--risk-0); }
.tier--slow { color: var(--ink-dim); }
.empty { color: var(--ink-mute); font-size: 12px; padding: 14px 0; }

.feed { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.feed li {
  display: grid; grid-template-columns: 62px 92px 1fr; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px;
  animation: slide .35s ease both;
}
.feed time { color: var(--ink-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.feed .kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.kind--opportunity { color: var(--morpho); }
.kind--competitor { color: var(--moonwell); }
.kind--log { color: var(--ink-mute); }
.kind--error { color: var(--risk-0); }
.feed .msg { color: var(--ink-dim); }
.feed .msg b { color: var(--ink); font-weight: 600; }

/* ─────────────────────────── competitor detail ──────────────────────────── */
.sheet {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(5, 8, 14, .78);
  backdrop-filter: blur(3px);
  padding: 24px;
  animation: fade .2s ease both;
}
/* Zooms out of the row you clicked rather than appearing from nowhere, so the
   connection between the row and the detail stays obvious. */
.sheet__panel {
  width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: zoomIn .26s cubic-bezier(.16,1,.3,1) both;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.90) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.sheet__panel::-webkit-scrollbar { width: 8px; }
.sheet__panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* stat tiles inside the sheet get a subtle stagger so the panel resolves
   rather than snapping into place */
.sheet__stat { animation: rise .3s cubic-bezier(.2,.8,.2,1) both; }
.sheet__stat:nth-child(2) { animation-delay: .03s; }
.sheet__stat:nth-child(3) { animation-delay: .06s; }
.sheet__stat:nth-child(4) { animation-delay: .09s; }
.sheet__stat:nth-child(5) { animation-delay: .12s; }
.sheet__stat:nth-child(6) { animation-delay: .15s; }

.chipline { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 18px; }
.chipline span {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-dim);
}
.ext { color: var(--morpho); text-decoration: none; border-bottom: 1px dotted currentColor; }
.ext:hover { filter: brightness(1.2); }

/* ───────────────────────────── pagination ──────────────────────────────── */
.pager {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 10px; font-size: 11px; color: var(--ink-mute);
}
.pager button {
  background: var(--surface-2); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.pager button:hover:not(:disabled) { border-color: var(--morpho); color: var(--morpho); }
.pager button:disabled { opacity: .35; cursor: default; }

/* rows fade in as a page renders, which makes paging feel like movement
   rather than a redraw */
/* Only genuinely new rows animate. Applying this to every row meant the whole
   table replayed its entrance on each websocket push, which reads as constant
   blinking rather than as motion carrying meaning. */
.tbl tbody tr.is-new { animation: rowIn .22s ease both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.sheet__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sheet__head h2 { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.sheet__head p { margin: 4px 0 0; font-size: 12px; word-break: break-all; }
.sheet__head .btn { margin-left: auto; flex: none; }
.sheet__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.sheet__stat { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 11px 13px; }
.sheet__stat i { display: block; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.sheet__stat b { display: block; margin-top: 4px; font-size: 16px; font-variant-numeric: tabular-nums; }
.sheet__sub { margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl tbody tr.is-clickable:hover td:first-child { color: var(--morpho); }
/* a gap we never entered is not a race we lost — keep them visually distinct */
.lag--none { color: var(--ink-mute); }
.lag--fast { color: var(--risk-0); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ─────────────────────────────── motion ─────────────────────────────────── */
@keyframes rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes flare {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,106,.55); }
  50%     { box-shadow: 0 0 0 7px rgba(255,77,106,0); }
}
@keyframes tick  { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes sweep { from { transform: translateX(-100px); } to { transform: translateX(1500px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .bar__readout { width: 100%; margin-left: 0; gap: 14px; }
  .tile__num { font-size: 25px; }
  .band { grid-template-columns: 66px 1fr 70px; }
}

/* ── live thresholds ─────────────────────────────────────────────────────── */
.tuner .panel__head { position: relative; }
.tuner__toggle { position: absolute; top: 0; right: 0; }

.tuner__body {
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  margin-top: 4px;
  animation: zoomIn .18s ease-out both;
}
.tuner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
}
.tune { display: flex; flex-direction: column; gap: 5px; }
.tune__label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.tune__input {
  font: 13px/1 var(--mono);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 10px;
  width: 100%;
}
.tune__input:focus-visible { outline: 2px solid var(--morpho); outline-offset: 1px; border-color: var(--morpho); }
/* The spinners are the wrong affordance here: these are typed values, and a
   stray scroll over a focused number input must not change a live threshold. */
.tune__input::-webkit-outer-spin-button,
.tune__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tune__input { -moz-appearance: textfield; appearance: textfield; }
.tune__hint { font-size: 11px; line-height: 1.45; color: var(--ink-mute); }

.tuner__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.tuner__msg { font: 11px/1 var(--mono); color: var(--ink-mute); }
.tuner__msg.is-good { color: var(--good); }
.tuner__msg.is-bad  { color: var(--risk-0); }

/* ── next-check countdown ────────────────────────────────────────────────── */
.cadence {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cadence__label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.cadence__items { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; }

.tick {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "name value" "sub sub" "bar bar";
  align-items: baseline;
  gap: 2px 8px;
  min-width: 132px;
}
.tick i {
  grid-area: name; font-style: normal;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.tick b {
  grid-area: value;
  font: 600 13px/1 var(--mono);
  color: var(--ink);
  /* Tabular figures stop the countdown jittering as digits change width. */
  font-variant-numeric: tabular-nums;
}
.tick em { grid-area: sub; font-style: normal; font-size: 10px; color: var(--ink-mute); }
.tick__bar {
  grid-area: bar; margin-top: 5px;
  display: block; height: 2px; width: 100%;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.tick__bar > span {
  display: block; height: 100%;
  background: var(--morpho);
  transition: width .1s linear;
}
.tick.is-due b { color: var(--good); }
.tick.is-due .tick__bar > span { background: var(--good); }
.tick.is-idle b, .tick.is-idle em { color: var(--ink-mute); }

@media (prefers-reduced-motion: reduce) {
  .tuner__body { animation: none; }
  .tick__bar > span { transition: none; }
}

/* ── our record ──────────────────────────────────────────────────────────── */
.record {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.rec { display: flex; flex-direction: column; gap: 3px; }
.rec i {
  font-style: normal; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.rec b { font: 600 17px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Outcome is the column people scan, so it carries the colour — and never
   colour alone: each state is a distinct word first. */
.ok--good { color: var(--good); }
.ok--lost { color: var(--moonwell); }
.ok--bad  { color: var(--risk-0); }
.ok--live { color: var(--morpho); }
.ok--mute { color: var(--ink-mute); }
.ok--good a, .ok--lost a, .ok--bad a, .ok--live a { color: inherit; }

/* ── coverage ────────────────────────────────────────────────────────────── */
.coverage {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-dim);
}
.coverage__bar {
  display: block; width: 90px; height: 3px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.coverage__bar > span { display: block; height: 100%; background: var(--morpho); }

/* ── flashblocks ─────────────────────────────────────────────────────────── */
.flash {
  display: inline-grid;
  grid-template-areas: "name value" "sub sub";
  gap: 2px 8px;
  align-items: baseline;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.flash i {
  grid-area: name; font-style: normal;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.flash b {
  grid-area: value; font: 600 13px/1 var(--mono);
  color: var(--good); font-variant-numeric: tabular-nums;
}
.flash em { grid-area: sub; font-style: normal; font-size: 10px; color: var(--ink-mute); }
.flash.is-bad b { color: var(--risk-0); }

/* ── CEX price radar ─────────────────────────────────────────────────────── */
/* connection dot: same vocabulary as .bar__dot — green live, mute otherwise */
.cex__dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mute); margin-right: 8px; vertical-align: 1px;
}
.cex__dot.is-on { background: var(--good); box-shadow: 0 0 10px var(--good); }

#cexPanel.is-off .panel__head h2, #cexPanel.is-off .panel__head p { color: var(--ink-mute); }

.cex__list { display: flex; flex-direction: column; }
.cex__row {
  display: grid; grid-template-columns: 1fr auto 64px; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px;
}
.cex__sym { color: var(--ink-dim); letter-spacing: .04em; }
.cex__px { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.cex__age { font-size: 10px; color: var(--ink-mute); text-align: right; letter-spacing: .06em; text-transform: uppercase; }
/* stale quotes read as muted, not alarming — the feed is late, not wrong */
.cex__row.is-stale .cex__px, .cex__row.is-stale .cex__sym { color: var(--ink-mute); }

.cex__foot { display: flex; flex-wrap: wrap; gap: 18px 24px; padding-top: 12px; }
.cex__foot .rec b { font-size: 13px; }