/* yabi HUD theme — the SINGLE stylesheet for every dashboard page.
   Pages carry a body class (page-overview / page-admin / page-subnets /
   page-subnet / page-monitoring / page-rakebacks — plus page-staking, owned by
   the standalone `staking` repo, see §16) and hold NO
   <style> blocks — every rule lives here. Page-scoped rules use
   :where(.page-x) so they stay at flat specificity and component classes win.
   Spec: dashboard/BRANDBOOK.md.
   Colour rule: every colour is a token, or rgb(var(--x-rgb) / A) where A is a
   tint step from BRANDBOOK §1 (0.05 fill · 0.08 chip · 0.12 active · 0.2 glow
   · 0.3 highlight · 0.45 border-tint). Sole exemption: the CRT atmosphere
   block on <body> (one-off physical effect, documented in BRANDBOOK §0). */

/* ========================================================= 1 · tokens/base */
:root {
  --bg: #0a0a0f;          --bg-rgb: 10 10 15;
  --panel: #10101a;
  --panel-edge: #23233a;  --edge-rgb: 35 35 58;
  --edge-lit: #3a3a55;    /* one edge brighter than --panel-edge: chart axes, dataZoom, legend-inactive */
  --amber: #ffb000;       --amber-rgb: 255 176 0;
  --amber-dim: #7a5a10;
  --teal: #3ddad7;        --teal-rgb: 61 218 215;
  --red: #ff5d5d;         --red-rgb: 255 93 93;
  --green: #7dff8a;       --green-rgb: 125 255 138;
  --violet: #9d7bff;      --violet-rgb: 157 123 255; /* childkeyed — JS chart CHILD_BORDER mirrors this */
  --text: #d8d4c8;        --text-rgb: 216 212 200;
  --text-dim: #6f6c66;
  /* type scale — the ONLY font sizes (BRANDBOOK §2); nothing below --fs-xs */
  --fs-xs: 0.62rem;   /* chip labels, notes, pg-meta, micro labels */
  --fs-sm: 0.68rem;   /* buttons, crumbs, small controls, dense tables */
  --fs-md: 0.72rem;   /* table body, inputs, nav chips */
  --fs-lg: 0.78rem;   /* panel h3 sub-headings, banners */
  --fs-xl: 0.9rem;    /* emphasized (critical) modal values — headings sit lower */
  --fs-stat: 1rem;    /* stat values */
  --fs-hero: 1.4rem;  /* hero stat values — ONE size for the whole strip */
  --fs-h1: 1.6rem;    /* site h1 */
  /* tracking steps (BRANDBOOK §2) */
  --ls-tight: 0.08em; /* inline mono metadata */
  --ls-label: 0.15em; /* small controls, form labels, th */
  --ls-btn: 0.22em;   /* buttons, stat labels, nav chips */
  --ls-h2: 0.28em;    /* h2 + panel tabs */
  --ls-h1: 0.35em;    /* site h1 */
  --mono: "IBM Plex Mono", monospace;
  --display: "Chakra Petch", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); font-family: var(--mono); }

/* keyboard focus reticle — site-wide (BRANDBOOK §0 quality floor) */
:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

/* gentle CRT tube backdrop — curvature vignette + aperture-grille stripes +
   phosphor glow. EXEMPT from the token rule: one-off physical atmosphere. */
body {
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.75) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255, 176, 0, 0.055), transparent 72%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(61, 218, 215, 0.035), transparent 70%);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 998;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,176,0,0.05), transparent 60%),
              radial-gradient(ellipse at 100% 100%, rgba(61,218,215,0.04), transparent 50%);
}

@keyframes flicker {
  0%, 97%, 100% { opacity: 1; }
  97.5% { opacity: 0.65; }
  98% { opacity: 1; }
  98.6% { opacity: 0.8; }
}
@keyframes pulse { 50% { opacity: 0.3; } }
@keyframes cursor-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ghost-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cyc-rotor { to { transform: rotate(360deg); } }
@keyframes cyc-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}
@keyframes tx-dots {
  0%  { content: ""; }
  25% { content: " ."; }
  50% { content: " . ."; }
  75% { content: " . . ."; }
}

/* ======================================================== 2 · page chrome */
header {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.4rem 2rem 1rem;
  border-bottom: 1px solid var(--panel-edge);
}
header h1 {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1); color: var(--amber);
  text-shadow: 0 0 18px rgb(var(--amber-rgb) / 0.45);
  animation: flicker 6s infinite;
}
header .sub { color: var(--text-dim); font-size: var(--fs-md); letter-spacing: var(--ls-label); }
header .sub .cursor { color: var(--amber); animation: cursor-fade 1.2s ease-in-out infinite; }
/* identity chip (overview): monitored validator + coldkey readout */
header .hotkey {
  margin-left: auto; font-size: var(--fs-md); color: var(--teal);
  border: 1px solid var(--panel-edge); padding: 0.35rem 0.7rem;
  background: rgb(var(--teal-rgb) / 0.05);
}

/* site nav strip — one row of page chips under the header, every page.
   Flat peer navigation (breadcrumbs are reserved for true hierarchy). */
.site-nav {
  max-width: 1600px; margin: 0 auto; padding: 1rem 2rem 0;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-btn); text-transform: uppercase; text-decoration: none;
  color: var(--teal); border: 1px solid var(--panel-edge);
  background: rgb(var(--teal-rgb) / 0.05); padding: 0.35rem 0.8rem;
}
.site-nav a:hover { border-color: var(--teal); box-shadow: 0 0 10px rgb(var(--teal-rgb) / 0.12); }
.site-nav a.here {
  color: var(--amber); border-color: var(--amber-dim);
  background: rgb(var(--amber-rgb) / 0.08);
  text-shadow: 0 0 10px rgb(var(--amber-rgb) / 0.3); cursor: default;
}

/* breadcrumb nav — true hierarchy only (subnet detail: SUBNETS // [N: NAME]) */
.crumbs {
  max-width: 1600px; margin: 0 auto; padding: 0.7rem 2rem 0;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-btn); text-transform: uppercase;
}
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { text-shadow: 0 0 8px rgb(var(--teal-rgb) / 0.45); }
.crumbs .here { color: var(--amber); text-shadow: 0 0 10px rgb(var(--amber-rgb) / 0.3); }
.crumbs .sep { color: var(--text-dim); }

/* block/hotkey readout under the nav (monitoring) — same typographic voice */
.blkline {
  max-width: 1600px; margin: 0 auto; padding: 0.5rem 2rem 0;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-btn); text-transform: uppercase;
}
.blkline .lbl, .blkline .sep { color: var(--text-dim); }
.blkline .val { color: var(--amber); text-shadow: 0 0 10px rgb(var(--amber-rgb) / 0.3); }

/* page grid: single column default; overview + admin two columns.
   A panel is half-width or (.wide) full-width — that is the whole vocabulary. */
main { padding: 1.6rem 2rem 3rem; display: grid; gap: 1.6rem; max-width: 1600px; margin: 0 auto; grid-template-columns: 1fr; }
:where(.page-overview) main, :where(.page-admin) main { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr !important; } }
/* tab-switched page sections keep the grid rhythm for their panels */
[data-tabwrap] { display: grid; gap: 1.6rem; grid-column: 1 / -1; }

footer { text-align: center; color: var(--text-dim); font-size: var(--fs-xs); letter-spacing: var(--ls-btn); padding-bottom: 1.5rem; }

/* visibility utilities — show/hide is a class, never an inline display (BRANDBOOK §0) */
.is-hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* shared error banner — yabi.setErr toggles .on (markup: <div id="err" class="err-banner" role="alert">) */
.err-banner.on { display: block; }
.err-banner {
  display: none; grid-column: 1 / -1; border: 1px solid var(--red); color: var(--red);
  padding: 1rem; font-size: var(--fs-lg); letter-spacing: var(--ls-tight); background: rgb(var(--red-rgb) / 0.05);
}

/* ============================================================ 3 · panels */
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--panel-edge);
  padding: 1.2rem 1.2rem 0.8rem;
}
/* HUD corner brackets — every .panel/.modal includes <div class="b3"></div> */
.panel::before, .panel::after,
.panel .b3::before, .panel .b3::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--amber-dim); }
.panel::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.panel::after  { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.panel .b3::before { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.panel .b3::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
/* heading voice: '◈ Title <span>// subtitle</span>' with a subtitle group,
   bare '// TITLE' when it is just a heading (BRANDBOOK §4) */
.panel h2 {
  font-family: var(--display); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: var(--ls-h2); text-transform: uppercase; color: var(--text);
  margin-bottom: 0.9rem;
}
/* sub-heading INSIDE a panel — same voice, one step down (never a second h2) */
.panel h3 {
  font-family: var(--display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: var(--ls-h2); text-transform: uppercase; color: var(--text);
  margin-bottom: 0.7rem;
}
.panel h2 span, .panel h3 span { color: var(--amber); }
.panel.wide { grid-column: 1 / -1; }
.panel-actions { display: flex; justify-content: flex-end; margin-top: 0.8rem; }
/* small live annotation riding a heading (admin stack probe); .on reveals it —
   visibility, not display, so the heading never reflows while probing */
.probe-line {
  margin-left: 0.9rem; color: var(--amber); font-size: var(--fs-xs);
  letter-spacing: var(--ls-label); font-weight: normal; visibility: hidden;
}
.probe-line.on { visibility: visible; }
/* absolute pin to the panel's top-right, level with the heading */
.pin-tr { position: absolute; top: 0.85rem; right: 0.95rem; }

/* ============================================================== 4 · tabs */
.panel-tabs { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.panel-tabs .tab {
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  color: var(--text-dim); background: transparent;
  border: 1px solid var(--panel-edge); border-radius: 0;
  padding: 0.45rem 0.9rem 0.4rem 0.6rem; cursor: pointer; user-select: none;
}
.panel-tabs .tab span { color: inherit; }
.panel-tabs .tab:hover:not(:disabled) { border-color: var(--amber-dim); color: var(--text); }
/* a tab whose pane has nothing to show yet (no wallet attached, no dataset
   loaded) still renders so the action stays discoverable — but it must not read
   as clickable. Same 0.4 disabled convention as buttons and selects. */
.panel-tabs .tab:disabled { opacity: 0.4; cursor: not-allowed; }
.panel-tabs .tab.active {
  color: var(--text); border-color: var(--amber-dim);
  background: rgb(var(--amber-rgb) / 0.08);
  box-shadow: 0 0 10px rgb(var(--amber-rgb) / 0.12);
}
.panel-tabs .tab.active span { color: var(--amber); }
/* boxed icon chip — keycap-style HUD designator */
.panel-tabs .tab .ic {
  display: inline-block; border: 1px solid var(--amber-dim);
  padding: 0.05rem 0.35rem; margin-right: 0.55rem;
  color: var(--amber); background: rgb(var(--amber-rgb) / 0.08);
  letter-spacing: 0;
}
.panel-tabs .tab.active .ic { background: var(--amber); color: var(--bg); border-color: var(--amber); }
/* page-level variant — sits in the page gutter above <main> */
.panel-tabs.page {
  max-width: 1600px; margin: 0.9rem auto 0; padding: 0 2rem;
}
.panel-tabs.page .tab { font-size: var(--fs-sm); letter-spacing: var(--ls-btn); padding: 0.35rem 0.9rem 0.3rem 0.6rem; }
/* show/hide panes driven by tabs */
.tab-pane { display: none; }
.tab-pane.on { display: block; }
/* a pane that is also a page section keeps its own grid — .tab-pane.on is two
   classes and would otherwise beat the [data-tabwrap] attribute rule */
[data-tabwrap].tab-pane.on { display: grid; }

/* compact segmented control for chart options (scale/source/zoom) */
.seg { display: inline-flex; border: 1px solid var(--panel-edge); }
.seg button {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--ls-tight);
  padding: 0.28rem 0.6rem;
}
.seg button.active { background: rgb(var(--amber-rgb) / 0.12); color: var(--amber); }
.seg button:hover { color: var(--text); }
/* chart option rows under a panel heading */
.ctl-row {
  display: flex; align-items: center; gap: 0.7rem;
  margin: -0.2rem 0 0.5rem; flex-wrap: wrap;
}
/* page-level variant: same control row, but in the gutter above <main> for a
   control that governs every panel at once (mirrors .panel-tabs.page) */
.ctl-row.page {
  max-width: 1600px; margin: 0.9rem auto -0.4rem; padding: 0 2rem;
}
.ctl-row .lbl {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label);
  color: var(--text-dim); text-transform: uppercase;
}
/* Chart-control voice for the row's own inputs — but NOT for .filter, which
   owns its recipe everywhere it appears (a search box that shrinks because of
   the row it happens to sit in is a second component by accident). */
/* checkboxes are excluded too: the 13rem text-box width below outranks the
   global `input[type=checkbox] { width: auto }` and drew a 13rem-wide box. */
.ctl-row select, .ctl-row input:not(.filter):not([type="checkbox"]) { font-size: var(--fs-xs); padding: 0.25rem 0.4rem; width: auto; }
.ctl-row input:not(.filter):not([type="checkbox"]) { width: 13rem; }
.ctl-row .filter { margin-bottom: 0; } /* the row owns spacing; keeps it on the seg baseline */
.ctl-row select:disabled { opacity: 0.4; }
/* an unmatched query is a dead end, not a styling nicety — say so */
.ctl-row input.nomatch { border-color: var(--red); color: var(--red); }
/* A toggle in a control row speaks the row's voice, not the form's: same size,
   tracking and case as the .lbl beside it, so the two sit on one baseline. It
   is the control, so it keeps --text while the note stays dim. */
.ctl-row .toggle {
  font-size: var(--fs-xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text);
}
.ctl-right { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
/* zoom controls pin to the panel's top-right (ECharts cannot draw outside its canvas) */
.zoom-tools { position: absolute; top: 0.75rem; right: 1.6rem; z-index: 2; }
.zoom-tools button:disabled { opacity: 0.3; cursor: default; }
.zoom-tools button:disabled:hover { color: var(--text-dim); }

/* Remark tag cell. An untagged remark carries its raw hex payload — hundreds of
   characters — which stretched the row until the table scrolled sideways under
   every other column. The text truncates in place; the full value stays in the
   cell's title and behind the ⧉ button, which sits OUTSIDE the truncating span
   so it can never be the thing that gets clipped. */
td.tag { white-space: nowrap; }
.tag-text {
  display: inline-block; max-width: 380px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Subnet flag icon (burn code / manual weights) beside a netuid. Amber in its
   own right rather than inheriting the cell: the same markup is used in cells
   that are not amber, and the flag colour is semantic (BRANDBOOK §14). */
.flag { display: inline-flex; margin-left: 0.35rem; color: var(--amber); vertical-align: middle; }

/* =========================================================== 5 · buttons */
/* Action buttons: display voice. `.btn` everywhere; on the admin console bare
   <button> elements get the same treatment (grouped selectors, :where keeps
   the element hook below component specificity). */
.btn, :where(.page-admin) button {
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  color: var(--amber); background: rgb(var(--amber-rgb) / 0.05);
  border: 1px solid var(--amber-dim); border-radius: 0;
  padding: 0.45rem 1.1rem; cursor: pointer;
}
.btn:hover, :where(.page-admin) button:hover { border-color: var(--amber); box-shadow: 0 0 10px rgb(var(--amber-rgb) / 0.12); }
.btn.teal, :where(.page-admin) button.teal {
  border-color: var(--panel-edge); color: var(--teal); background: rgb(var(--teal-rgb) / 0.05);
}
.btn.teal:hover, :where(.page-admin) button.teal:hover { border-color: var(--teal); box-shadow: 0 0 10px rgb(var(--teal-rgb) / 0.12); }
.btn.danger, :where(.page-admin) button.danger {
  border-color: var(--red); background: rgb(var(--red-rgb) / 0.08); color: var(--red);
}
.btn.danger:hover, :where(.page-admin) button.danger:hover { background: rgb(var(--red-rgb) / 0.12); box-shadow: 0 0 10px rgb(var(--red-rgb) / 0.2); }
.btn.dim { border-color: var(--panel-edge); color: var(--text-dim); background: transparent; }
.btn:disabled, :where(.page-admin) button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn.small, :where(.page-admin) button.small { padding: 0.25rem 0.6rem; font-size: var(--fs-xs); letter-spacing: var(--ls-label); }
/* action row under forms */
.btn-row { display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }

/* mono utility voice — ONE recipe. `.ubtn` is the canonical class for new
   code; the grouped legacy hooks (pager/nav/report/back/rm/cpy) share it. */
.ubtn, .pager button, .blk-nav button, .btn-report, .x-back,
.wallet-row .rm, .txm-status button.cpy {
  background: none; border: 1px solid var(--panel-edge); color: var(--teal);
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400;
  letter-spacing: var(--ls-tight); padding: 0.25rem 0.6rem; margin: 0;
  cursor: pointer; text-transform: none; width: auto;
}
.ubtn:hover:not(:disabled), .pager button:hover:not(:disabled),
.blk-nav button:hover:not(:disabled), .btn-report:hover, .x-back:hover {
  border-color: var(--teal); box-shadow: none;
}
.ubtn:disabled, .pager button:disabled, .blk-nav button:disabled {
  color: var(--text-dim); cursor: default; opacity: 0.5;
}
/* shape/accent overrides on the shared recipe */
.x-back { font-size: var(--fs-sm); padding: 0.3rem 0.7rem; margin-bottom: 0.8rem; }
.blk-nav button { font-size: var(--fs-sm); padding: 0.15rem 0.5rem; }
.wallet-row .rm { color: var(--red); border-color: rgb(var(--red-rgb) / 0.45); padding: 0 0.4rem; }
.wallet-row .rm:hover { border-color: var(--red); }
.txm-status button.cpy { color: var(--green); padding: 0 0.3rem; vertical-align: baseline; }
.txm-status button.cpy:hover { border-color: var(--green); }
/* borderless inline copy chip (⧉) */
.copy-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 0.75em; padding: 0 0.25rem; }
.copy-btn:hover { color: var(--amber); }

/* ============================================================= 6 · forms */
label {
  display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-dim); margin: 0.7rem 0 0.25rem;
}
input, select {
  width: 100%; background: var(--bg); color: var(--text); font-family: var(--mono);
  border: 1px solid var(--panel-edge); padding: 0.4rem 0.6rem; font-size: var(--fs-md);
}
input:focus, select:focus { outline: none; border-color: var(--amber-dim); }
input:focus-visible, select:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
input::placeholder { color: var(--text-dim); }
/* Console checkbox. accent-color only tints the CHECKED box; unchecked it still
   renders as the browser's white square with a rounded system border — the one
   off-palette control on the page. So the box is drawn: square, edge border,
   amber tick on an amber tint when checked. Still a real <input>, so the
   keyboard path, :focus-visible reticle and label click all come for free. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 13px; height: 13px; padding: 0; margin: 0;
  background: var(--bg); border: 1px solid var(--panel-edge); cursor: pointer;
  display: inline-grid; place-content: center;
}
input[type="checkbox"]::before {
  content: "✓"; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1;
  color: var(--amber); opacity: 0;
}
input[type="checkbox"]:hover { border-color: var(--amber-dim); }
input[type="checkbox"]:checked { border-color: var(--amber-dim); background: rgb(var(--amber-rgb) / 0.12); }
input[type="checkbox"]:checked::before { opacity: 1; }
input[type="checkbox"]:disabled { opacity: 0.4; cursor: default; }
select option { background: var(--bg); color: var(--text); }
.row { display: flex; gap: 0.8rem; }
.row > div { flex: 1; }
/* margin: 0 because a <label class="toggle"> also picks up the label element's
   0.7rem top margin, which pushed it off the baseline of the row beside it */
.toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--mono); font-size: var(--fs-md); color: var(--text); }
.note { font-size: var(--fs-xs); color: var(--text-dim); letter-spacing: var(--ls-tight); margin-top: 0.5rem; line-height: 1.5; }
.status-line { font-size: var(--fs-sm); letter-spacing: var(--ls-tight); margin-top: 0.7rem; min-height: 1em; }
.status-line.ok { color: var(--green); }
.status-line.bad { color: var(--red); }
.form-err { color: var(--red); font-size: var(--fs-sm); min-height: 0.9rem; }
.form-note { font-size: var(--fs-xs); color: var(--text-dim); letter-spacing: var(--ls-tight); }
.ok { color: var(--green); }
.bad { color: var(--red); }
.warn-tri { color: var(--amber); cursor: help; margin-left: 0.35rem; }

/* THE filter input — one recipe for every search/filter box.
   Base: table filter (300px). Variants: .hdr header block search, .full
   full-width (modal event lists), .sm compact inline (delegation lists). */
.filter {
  width: 300px; margin-bottom: 0.7rem; font-size: var(--fs-sm);
  padding: 0.35rem 0.6rem; background: none; border: 1px solid var(--panel-edge);
  color: var(--text); font-family: var(--mono); letter-spacing: var(--ls-tight);
}
.filter:focus { outline: none; border-color: var(--amber-dim); }
.filter::placeholder { color: var(--text-dim); }
.filter.hdr { width: 200px; margin: 0 0 0 1rem; padding: 0.3rem 0.6rem; }
.filter.full { display: block; width: 100%; margin: 0 0 0.5rem; }
.filter.sm { width: 240px; font-size: var(--fs-xs); padding: 0.25rem 0.5rem; margin: 0.1rem 0 0.5rem; }
/* filter result counts */
.tbl-count { font-size: var(--fs-sm); color: var(--text-dim); letter-spacing: var(--ls-tight); margin-left: 0.6rem; }
.tbl-meta { font-size: var(--fs-xs); letter-spacing: var(--ls-tight); color: var(--text-dim); }

/* ============================================================ 7 · tables */
/* every wide data table sits in a .tbl-wrap so it scrolls inside its panel
   instead of bursting the page on narrow viewports */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th {
  text-align: left; color: var(--text-dim); font-weight: 400; letter-spacing: var(--ls-label);
  text-transform: uppercase; font-size: var(--fs-xs); padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--panel-edge);
}
td { padding: 0.42rem 0.6rem; border-bottom: 1px solid rgb(var(--edge-rgb) / 0.5); font-variant-numeric: tabular-nums; }
tr:hover td { background: rgb(var(--text-rgb) / 0.06); }
th.num, td.num { text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--amber); }
th.sortable .sort-ind { color: var(--amber); margin-left: 0.3rem; }
/* hard cell semantics: identifiers amber, keys teal, secondary dim */
td.netuid, td.uid { color: var(--amber); }
td.netuid a { color: var(--amber); text-decoration: none; }
td.netuid a:hover { color: var(--teal); }
td.sym { color: var(--text-dim); }
td.name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.name a { color: var(--text); text-decoration: none; }
td.name a:hover { color: var(--teal); }
td.hk { color: var(--teal); }
td.type-validator { color: var(--teal); }
td.type-miner { color: var(--text-dim); }
.dim { color: var(--text-dim); }
.addr { color: var(--teal); }
.hlt { background: rgb(var(--amber-rgb) / 0.3); color: var(--amber); }
.add, .pos { color: var(--green); }
.remove, .neg { color: var(--red); }
/* row states */
tr.mon td { background: rgb(var(--amber-rgb) / 0.08); }
tr.mon td.name { color: var(--amber); }
tr.inactive td { opacity: 0.55; }
tr.dust td { opacity: 0.45; }
tr.take-warn td { background: rgb(var(--red-rgb) / var(--tw, 0.08)); }
tr.expandable, tr[data-netuid] { cursor: pointer; }
/* rows from the same block share a colour (stake actions, accrual events) */
tr.blk-a td { background: rgb(var(--teal-rgb) / 0.05); }
tr.blk-b td { background: rgb(var(--amber-rgb) / 0.05); }
tr.blk-a td:first-child { box-shadow: inset 2px 0 0 rgb(var(--teal-rgb) / 0.3); }
tr.blk-b td:first-child { box-shadow: inset 2px 0 0 rgb(var(--amber-rgb) / 0.3); }
/* collapsible group header rows (admin aliases, rakeback accruals) */
tr.grp td {
  color: var(--teal); font-weight: 600; letter-spacing: 0.05em;
  cursor: pointer; border-top: 1px solid rgb(var(--teal-rgb) / 0.2);
}
/* pager row embedded at the foot of an expanded group */
tr.pager-row td { padding: 0.2rem 0.6rem 0.6rem; }
tr.pager-row:hover td { background: none; }
tr.pager-row .pager { margin-top: 0; }
/* outline type icons — stroke follows the cell colour via currentColor */
.ico {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -2px;
}
.ico.halo { color: var(--amber); }

/* shared pager — order is fixed: meta · « first · ‹ prev · page-select · next › · last »
   (button styles: §5 utility group) */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 0.6rem; }
.pager select { width: auto; font-size: var(--fs-xs); padding: 0.25rem 0.4rem; }
.pager .pg-meta { font-size: var(--fs-xs); letter-spacing: var(--ls-tight); color: var(--text-dim); }

/* ============================================================= 8 · links */
a.blk { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber-dim); cursor: pointer; }
a.blk:hover { color: var(--teal); border-bottom-color: var(--teal); }
a.sn { color: var(--teal); text-decoration: none; border-bottom: 1px dotted rgb(var(--teal-rgb) / 0.45); }
a.sn:hover { color: var(--amber); border-bottom-color: var(--amber-dim); }
.akey { color: var(--teal); background: rgb(var(--teal-rgb) / 0.08); border-bottom: 1px dotted rgb(var(--teal-rgb) / 0.45); cursor: help; }

/* ============================================================= 9 · stats */
/* boxed stat grid — the 1px gap over panel-edge IS the divider line */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--panel-edge); border: 1px solid var(--panel-edge);
  margin-bottom: 1rem;
}
.stat { background: var(--panel); padding: 0.7rem 0.9rem; }
.stat .lbl {
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--text-dim);
  text-transform: uppercase; margin-bottom: 0.3rem; line-height: 1.5;
}
.stat .val { font-size: var(--fs-stat); color: var(--text); font-variant-numeric: tabular-nums; }
.stat .val.amber { color: var(--amber); }
.stat .val.teal { color: var(--teal); }
/* a figure that is reported but NOT part of the headline (forfeited dust) */
.stat .val.dim { color: var(--text-dim); }
.stat .val.on { color: var(--green); }
.stat .val.off { color: var(--red); }
.stat .val .unit, .stat .unit { color: var(--text-dim); font-size: var(--fs-sm); font-family: var(--mono); margin-left: 0.3rem; }
.stat .sub { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); margin-top: 0.2rem; }
/* hero variant — the overview header strip */
.stats.hero { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: none; border-bottom: 1px solid var(--panel-edge); margin-bottom: 0; }
.stats.hero .stat { background: var(--bg); padding: 1.1rem 1.6rem; text-align: center; }
.stats.hero .lbl { font-size: var(--fs-xs); letter-spacing: var(--ls-btn); min-height: 3em; margin-bottom: 0; }
/* every hero value is one size on one baseline: same font-size + the 3em label
   box above it means the numbers line up across cells whatever the label wraps to */
.stats.hero .val {
  font-family: var(--display); font-size: var(--fs-hero); font-weight: 600; margin-top: 0.3rem;
  line-height: 1.25; color: var(--amber); text-shadow: 0 0 12px rgb(var(--amber-rgb) / 0.3);
}
/* ranked strip: the two-three figures the page exists to answer wear .primary —
   rank now reads as glow + lit label, never as a size step (BRANDBOOK §5) */
.stats.hero .stat.primary .lbl { color: var(--amber); }
.stats.hero .stat.primary .val { text-shadow: 0 0 18px rgb(var(--amber-rgb) / 0.45); }
.stats.hero .val.teal { color: var(--teal); text-shadow: 0 0 12px rgb(var(--teal-rgb) / 0.3); }
.stats.hero .unit { font-size: var(--fs-lg); }
/* hero stat extras: 24h deltas, USD sub-lines, root/alpha split bar */
.delta { font-size: var(--fs-sm); font-family: var(--mono); margin-top: 0.35rem; color: var(--text-dim); letter-spacing: 0.05em; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.sub-usd { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 0.2rem; font-family: var(--mono); }
.split-bar { height: 4px; background: var(--teal); margin-top: 0.55rem; overflow: hidden; }
.split-bar > div { height: 100%; background: var(--amber); width: 0%; }
/* gap, not just space-between: in a narrow cell the two halves otherwise butt
   together and read as one word ("ROOT 71.3%ALPHA 28.7%") */
.split-legend { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-dim); margin-top: 0.3rem; letter-spacing: var(--ls-tight); }
.split-legend .root { color: var(--amber); }
.split-legend .alpha { color: var(--teal); }

/* ======================================================= 10 · status bits */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--text-dim); }
.dot.running { background: var(--green); animation: pulse 2s infinite; }
.dot.exited, .dot.dead { background: var(--red); }
.dot.probing { background: var(--amber); animation: pulse 0.8s infinite; }
.stale { color: var(--red); }
.fresh { color: var(--teal); }
/* drawn-ring spinner — never a glyph (glyphs rotate about their line box and wobble) */
.spin {
  display: none; margin-left: 0.55rem; vertical-align: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgb(var(--amber-rgb) / 0.25);
  border-top-color: var(--amber);
  animation: spin 0.8s linear infinite;
}
h2 .spin.on { display: inline-block; }
/* cycle status chips — keycap designators (rakebacks) */
.cyc-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 0.22rem 0.65rem; border: 1px solid var(--panel-edge); white-space: nowrap;
}
.cyc-chip.live {
  color: var(--amber); border-color: var(--amber-dim);
  background: rgb(var(--amber-rgb) / 0.08);
  box-shadow: 0 0 10px rgb(var(--amber-rgb) / 0.12), inset 0 0 8px rgb(var(--amber-rgb) / 0.05);
}
.cyc-chip.live .spin {
  display: inline-block; margin: 0; width: 9px; height: 9px; flex: none;
  box-shadow: 0 0 5px rgb(var(--amber-rgb) / 0.3);
  animation: cyc-rotor 6s linear infinite;
}
.cyc-chip.open { color: var(--teal); border-color: rgb(var(--teal-rgb) / 0.45); background: rgb(var(--teal-rgb) / 0.05); }
.cyc-chip.open .ring {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--teal); box-shadow: 0 0 5px rgb(var(--teal-rgb) / 0.45);
  animation: cyc-breathe 1.8s ease-in-out infinite;
}
.cyc-chip.done { color: var(--green); border-color: rgb(var(--green-rgb) / 0.45); background: rgb(var(--green-rgb) / 0.05); }
.cyc-chip.done .tick { text-shadow: 0 0 5px rgb(var(--green-rgb) / 0.45); }
tr.cyc-live td { background: rgb(var(--amber-rgb) / 0.05); }
tr.cyc-live td:first-child { border-left: 2px solid var(--amber-dim); }
tr.cyc-open td:first-child { border-left: 2px solid rgb(var(--teal-rgb) / 0.45); }
tr.cyc-done td { opacity: 0.85; }
/* hazard-tape callout: diagonal amber/black bands top + bottom (admin).
   Amber here = CAUTION — always paired with the tape/⚠ shape, never colour alone. */
.hazard {
  position: relative; padding: 0.9rem 0.8rem;
  color: var(--amber); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-align: center;
  border: 1px solid var(--amber-dim);
  background: rgb(var(--amber-rgb) / 0.05);
}
.hazard::before, .hazard::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 9px, var(--panel) 9px 18px);
  opacity: 0.85;
}
.hazard::before { top: 0; }
.hazard::after { bottom: 0; }
.node-warn {
  color: var(--amber); border: 1px solid var(--amber-dim);
  background: rgb(var(--amber-rgb) / 0.08);
  padding: 0.55rem 0.8rem; margin-bottom: 1rem;
  font-size: var(--fs-sm); letter-spacing: var(--ls-label);
}
.hz-flash { animation: pulse 2s infinite; }
.live-indicator {
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--green);
  margin-top: 0.8rem; animation: pulse 2s infinite;
}
.live-indicator + pre.log { margin-top: 0.35rem; }

/* ===================================================== 11 · ghosts/loading */
.ghost-row .ghost-bar {
  height: 0.9rem;
  background: linear-gradient(90deg, rgb(var(--amber-rgb) / 0.04) 25%, rgb(var(--amber-rgb) / 0.12) 50%, rgb(var(--amber-rgb) / 0.04) 75%);
  background-size: 200% 100%; animation: ghost-sheen 1.6s linear infinite;
}
.ghost-row:nth-child(2) .ghost-bar { animation-delay: 0.12s; }
.ghost-row:nth-child(3) .ghost-bar { animation-delay: 0.24s; }
.ghost-row:nth-child(4) .ghost-bar { animation-delay: 0.36s; }
.ghost-row:nth-child(5) .ghost-bar { animation-delay: 0.48s; }
.ghost-row:nth-child(6) .ghost-bar { animation-delay: 0.6s; }
.ghost-card {
  height: 84px; border: 1px solid var(--panel-edge);
  background: linear-gradient(90deg, rgb(var(--amber-rgb) / 0.03) 25%, rgb(var(--amber-rgb) / 0.1) 50%, rgb(var(--amber-rgb) / 0.03) 75%);
  background-size: 200% 100%; animation: ghost-sheen 1.6s linear infinite;
}
.ghost-card:nth-child(2) { animation-delay: 0.12s; }
.ghost-card:nth-child(3) { animation-delay: 0.24s; }
.ghost-card:nth-child(4) { animation-delay: 0.36s; }
/* body.loading until the first telemetry payload lands */
body.loading .stats.hero .val { color: transparent !important; text-shadow: none !important; position: relative; }
body.loading .stats.hero .val * { visibility: hidden; }
body.loading .stats.hero .val::after {
  content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 60%;
  background: linear-gradient(90deg, rgb(var(--amber-rgb) / 0.05) 25%, rgb(var(--amber-rgb) / 0.16) 50%, rgb(var(--amber-rgb) / 0.05) 75%);
  background-size: 200% 100%; animation: ghost-sheen 1.6s linear infinite;
}
body.loading .chart::before {
  content: "▚ AWAITING TELEMETRY"; position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-family: var(--display); font-size: var(--fs-sm); letter-spacing: 0.3em;
}
body.loading .chart::after {
  content: ""; position: absolute; inset: 8% 2%;
  background: linear-gradient(90deg, rgb(var(--teal-rgb) / 0.04) 25%, rgb(var(--teal-rgb) / 0.1) 50%, rgb(var(--teal-rgb) / 0.04) 75%);
  background-size: 200% 100%; animation: ghost-sheen 1.6s linear infinite;
}

/* ============================================================ 12 · charts */
.chart { width: 100%; height: 320px; position: relative; }
.chart.tall { height: 380px; }
.chart.zoom { height: 500px; } /* zoom slider below rotated labels — give its height back */
.chart-wrap { position: relative; }
/* history backfill indicator on pannable charts */
.chart-loading {
  display: none; position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--display); font-size: var(--fs-xs); letter-spacing: var(--ls-btn);
  color: var(--amber); border: 1px solid var(--amber-dim);
  background: rgb(var(--amber-rgb) / 0.08); padding: 0.3rem 0.6rem;
}
.chart-loading.on { display: block; animation: pulse 1s infinite; }
.chart-loading.end { display: block; color: var(--text-dim); border-color: var(--panel-edge); background: transparent; animation: none; }
/* visible block/date range readout, sits in the tabs row (right-aligned) */
.chart-range {
  position: absolute; bottom: calc(100% + 0.9rem); right: 0; z-index: 2;
  pointer-events: none; text-align: right; font-size: var(--fs-sm); line-height: 1.4;
  color: var(--text-dim); letter-spacing: 0.05em;
}
.chart-range .blocks { color: var(--amber); }
.chart-range.teal .blocks { color: var(--teal); }
/* edge glow when pan window hits data boundary */
.edge-glow { position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.edge-glow.left { left: 0; background: linear-gradient(90deg, rgb(var(--amber-rgb) / 0.2), transparent); box-shadow: inset 3px 0 0 var(--amber-dim); }
.edge-glow.right { right: 0; background: linear-gradient(270deg, rgb(var(--amber-rgb) / 0.2), transparent); box-shadow: inset -3px 0 0 var(--amber-dim); }
.edge-glow.teal.left { background: linear-gradient(90deg, rgb(var(--teal-rgb) / 0.2), transparent); box-shadow: inset 3px 0 0 rgb(var(--teal-rgb) / 0.45); }
.edge-glow.teal.right { background: linear-gradient(270deg, rgb(var(--teal-rgb) / 0.2), transparent); box-shadow: inset -3px 0 0 rgb(var(--teal-rgb) / 0.45); }
.edge-glow.on { opacity: 1; }
/* live panel states: first-load ghosts, background-refresh spinner, sleep veil */
.live-wrap { position: relative; }
.chart-ghost {
  position: absolute; inset: 0; display: none;
  align-items: flex-end; gap: 6px; padding: 40px 24px 104px 78px;
}
.live-wrap.first-load .chart-ghost { display: flex; }
.chart-ghost i {
  flex: 1; display: block; border-radius: 1px;
  background: linear-gradient(90deg, rgb(var(--edge-rgb) / 0.5) 0%, rgb(var(--amber-rgb) / 0.16) 50%, rgb(var(--edge-rgb) / 0.5) 100%);
  background-size: 200% 100%;
  animation: ghost-sheen 1.4s linear infinite;
}
.live-wrap.asleep .chart { filter: grayscale(1) brightness(0.45); }
.sleep-veil {
  position: absolute; inset: 0; display: none; z-index: 3;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; background: rgb(var(--bg-rgb) / 0.45);
}
.live-wrap.asleep .sleep-veil { display: flex; }
.sleep-veil .why {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--amber);
  letter-spacing: var(--ls-tight);
}

/* ============================================================ 13 · modals */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgb(var(--bg-rgb) / 0.75); backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal {
  position: relative; background: var(--panel); border: 1px solid var(--panel-edge);
  padding: 1.2rem 1.4rem 1.1rem; max-height: 85vh;
  overflow: hidden auto;
  width: min(560px, 92vw);
}
.modal.lg { width: min(720px, 92vw); }
.modal.md { width: min(960px, 94vw); }
.modal.xl { width: min(1240px, 96vw); }
.modal::before, .modal::after,
.modal .b3::before, .modal .b3::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--amber-dim); }
.modal::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.modal::after  { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.modal .b3::before { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.modal .b3::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.modal h3 {
  font-family: var(--display); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: var(--ls-h2); text-transform: uppercase; margin-bottom: 0.9rem;
}
.modal h3 span { color: var(--amber); }
.modal .close {
  position: absolute; top: 0.6rem; right: 0.7rem; cursor: pointer; margin: 0;
  padding: 0.15rem 0.5rem; font-size: var(--fs-sm); font-family: var(--mono);
  background: none; border: 1px solid var(--panel-edge); color: var(--text-dim);
  letter-spacing: 0; text-transform: none;
}
.modal .close:hover { border-color: var(--amber); color: var(--amber); }
.modal td.hash { word-break: break-all; font-size: var(--fs-sm); }
.modal th { width: 128px; }
.modal tr:hover td { background: none; }
/* confirm modals: informational rows stay dim, decision values pop */
.modal td.val { color: var(--amber); font-size: var(--fs-lg); letter-spacing: 0.04em; }
.modal tr.crit { background: rgb(var(--red-rgb) / 0.08); }
.modal tr.crit th { color: var(--red); }
.modal tr.crit td.val { color: var(--red); font-size: var(--fs-xl); }
.modal .actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; }
.modal .stats { margin: 0.8rem 0 0.2rem; }
/* long lists inside modals scroll in their own container (sticky header)
   so the modal chrome + summary stay in view */
.modal .tbl-scroll {
  max-height: 320px; overflow-y: auto; margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--panel-edge);
}
/* .tall — a browsable list (sortable + filterable) rather than a summary the
   operator reads whole; the modal chrome still fits above the fold */
.modal .tbl-scroll.tall { max-height: 440px; }
.modal .tbl-scroll thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

/* shared thin scrollbar — every custom scroll area */
.modal, .modal .tbl-scroll, pre.log, .tbl-wrap {
  scrollbar-width: thin; scrollbar-color: var(--amber-dim) var(--bg);
}
.modal::-webkit-scrollbar, .modal .tbl-scroll::-webkit-scrollbar,
pre.log::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.modal::-webkit-scrollbar-track, .modal .tbl-scroll::-webkit-scrollbar-track,
pre.log::-webkit-scrollbar-track, .tbl-wrap::-webkit-scrollbar-track { background: var(--bg); }
.modal::-webkit-scrollbar-thumb, .modal .tbl-scroll::-webkit-scrollbar-thumb,
pre.log::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb { background: var(--amber-dim); }

/* ================================================== 14 · block explorer */
.modal tr.ex-row { cursor: pointer; }
.modal tr.ex-row:hover td { background: rgb(var(--amber-rgb) / 0.05); }
.x-sub {
  font-family: var(--display); font-size: var(--fs-sm); letter-spacing: var(--ls-btn);
  color: var(--text-dim); margin: 1rem 0 0.4rem;
}
.x-args {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
  background: rgb(var(--bg-rgb) / 0.35); border: 1px solid var(--panel-edge);
  padding: 0.6rem 0.8rem; overflow-x: auto; white-space: pre;
}
.explorer-fetching {
  font-size: var(--fs-sm); letter-spacing: var(--ls-label); color: var(--amber);
  animation: pulse 2s infinite; margin-bottom: 0.6rem;
}
.explorer-err { font-size: var(--fs-md); letter-spacing: var(--ls-tight); color: var(--red); padding: 1rem 0; }
/* ‹ PREV / NEXT › block nav — utility voice, pinned in the title row beside
   the ✕ close; hidden outside the block view (styles: §5 utility group) */
.blk-nav { position: absolute; top: 0.6rem; right: 3.2rem; display: flex; gap: 0.4rem; }

/* =============================================== 15 · admin stack + logs */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.svc { border: 1px solid var(--panel-edge); padding: 0.7rem 0.8rem; background: var(--bg); }
.svc .name { font-family: var(--display); font-size: var(--fs-md); letter-spacing: var(--ls-label); text-transform: uppercase; }
.svc .state { font-size: var(--fs-sm); margin-top: 0.3rem; }
.svc .btns { display: flex; gap: 0.4rem; margin-top: 0.55rem; }
pre.log {
  background: var(--bg); border: 1px solid var(--panel-edge);
  padding: 0.7rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-dim);
  max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  margin-top: 0.8rem;
}
pre.log.live { max-height: 560px; }

/* ============================================ 16 · staking wallet + tx

   DO NOT DELETE AS DEAD CODE. staking.html left this repo on 07/08/2026 for the
   standalone `staking` repo, which consumes this file through its vendor/yabi
   submodule — every class below is live there (page-staking, .wallet-bar,
   .txform, .st-cols, .val-card/.vc-*, .card-col, .move-all, .txm-*, …).
   Only `.txm-rows`/`.txm-typed`/`.txm-status` have an in-repo consumer left
   (rakebacks.html's proxy-unstake modal). A grep of this repo alone will call
   the rest unreferenced; it is wrong. Deleting them breaks the other repo at
   its next submodule bump, silently and without a build error. */
.wallet-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.wallet-bar select { width: auto; font-size: var(--fs-sm); padding: 0.38rem 0.5rem; max-width: 380px; }
.wallet-msg { font-size: var(--fs-sm); color: var(--text-dim); flex-basis: 100%; }
.wallet-msg.warn { color: var(--red); }
.blk-label { font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--text-dim); margin: -0.6rem 0 0.8rem; }
.blk-label span { color: var(--amber); font-variant-numeric: tabular-nums; }
.hseg { color: var(--text); }
.hsep { color: var(--text-dim); }
.txform { max-width: 640px; display: flex; flex-direction: column; gap: 0.55rem; }
.txform label { font-size: var(--fs-xs); letter-spacing: var(--ls-label); margin: 0.3rem 0 0; }
.txform select, .txform input[type="text"] { font-size: var(--fs-sm); }
.txform > div[id] { display: flex; flex-direction: column; gap: 0.55rem; }
.txform > .btn { align-self: flex-start; } /* flex column would stretch action buttons form-wide */
.amt-row { flex-direction: row !important; }
.amt-row input { flex: 1; }
.st-toggle { flex-direction: row !important; }
.sw-rate { font-size: var(--fs-sm); color: var(--teal); min-height: 0.9rem; }
.st-cols { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.st-cols .txform { flex: 0 1 640px; }
.val-card { flex: 1; min-width: 280px; border: 1px solid var(--panel-edge); padding: 0.8rem 1rem; font-size: var(--fs-sm); }
.val-card .vc-title { font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--teal); text-transform: uppercase; margin-bottom: 0.6rem; }
.val-card table { width: 100%; }
.val-card td { padding: 0.18rem 0.4rem 0.18rem 0; font-size: var(--fs-sm); vertical-align: top; }
.val-card td.k { color: var(--text-dim); letter-spacing: var(--ls-tight); text-transform: uppercase; white-space: nowrap; width: 1%; }
.val-card td.v { color: var(--amber); word-break: break-all; }
.val-card td.v a { color: var(--teal); }
.val-card .vc-desc { color: var(--text-dim); margin-top: 0.5rem; font-size: var(--fs-xs); min-height: 1.8em; }
.val-card .ghost-bar { max-width: 180px; }
.val-card .vc-logo {
  width: 18px; height: 18px; object-fit: contain; vertical-align: -0.35em;
  margin-right: 0.4rem; border: 1px solid var(--panel-edge); background: var(--bg);
}
.card-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 1rem; }
.card-col .val-card { flex: none; }
.move-all {
  margin-bottom: 1rem;
  margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--panel-edge);
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.move-all .tgt { color: var(--amber); }
/* an option that modifies the MOVE ALL line, sat under it as a SIBLING — inside
   .move-all it would land beside the button, that being a wrapping flex row.
   Pairs with .toggle; the negative top margin eats .move-all's own gap so the
   option groups with the line it belongs to, not the tabs beneath it. */
.move-all-opt { margin: -0.6rem 0 1rem; font-size: var(--fs-sm); color: var(--text-dim); }
.txm-rows { width: 100%; margin-bottom: 0.7rem; }
.txm-rows td { font-size: var(--fs-sm); padding: 0.25rem 0.4rem; vertical-align: top; }
.txm-rows td.k { color: var(--text-dim); white-space: nowrap; letter-spacing: var(--ls-tight); text-transform: uppercase; }
.txm-rows td.v { color: var(--amber); word-break: break-all; }
.txm-typed {
  background: var(--bg); border: 1px solid var(--red); color: var(--red);
  font-family: var(--mono); font-size: var(--fs-sm); padding: 0.4rem 0.6rem;
  width: 100%; margin-bottom: 0.6rem;
}
.txm-status { margin-top: 0.7rem; font-size: var(--fs-sm); color: var(--text-dim); min-height: 1rem; word-break: break-all; }
.txm-status:empty { display: none; }
.txm-status.ok { color: var(--green); }
.txm-status.bad { color: var(--red); }
.txm-status.busy { color: var(--amber); }
.txm-status .dots::after { content: ""; animation: tx-dots 1.2s steps(1, end) infinite; }
.txm-status .fin-line { color: var(--amber); margin-top: 0.25rem; }
.txm-status .fail-line { color: var(--red) }

/* ============================================ 17 · subnet detail children */
tr.child-row td { background: rgb(var(--teal-rgb) / 0.05); padding: 0.5rem 0.6rem 0.6rem 2rem; }
tr.child-row:hover td { background: rgb(var(--teal-rgb) / 0.05); }
.child-list { font-size: var(--fs-sm); }
.child-list .hd { color: var(--text-dim); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: 0.35rem; }
.child-list .hd:not(:first-child) { margin-top: 0.7rem; }
.child-list .hd span { color: var(--teal); }
.child-list .rows { columns: 280px; column-gap: 1.8rem; }
.child-list .ghost-row { margin: 0.3rem 0; }   /* delegation fetch in flight */
.child-list .rows .row { break-inside: avoid; }
.child-list .row.self { border-bottom: 1px solid var(--panel-edge); margin-bottom: 0.3rem; }
.child-list .row.self .ck { color: var(--amber); }
.child-list .row {
  display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.16rem 0;
  border-bottom: 1px dotted rgb(var(--edge-rgb) / 0.7);
}
.child-list .row .ck { color: var(--teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.child-list .row .stk { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.child-list .row .prop { color: var(--text); font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: right; }

/* ============================================= 18 · rakeback config bits */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.6rem; margin-bottom: 1.2rem; }
.cfg-grid label { margin: 0 0 0.3rem; font-family: var(--display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-btn); }
.wallet-row { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: var(--fs-md); padding: 0.3rem 0; border-bottom: 1px dotted var(--panel-edge); }
.wallet-row .pct { width: 80px; padding: 0.25rem 0.4rem; }
.wallet-row .pctlbl { color: var(--text-dim); font-size: var(--fs-xs); }
.wallet-row .alias { color: var(--teal); }
.add-row { display: flex; gap: 0.6rem; margin-top: 0.6rem; align-items: center; }
.add-row input:first-child { flex: 1; }
.add-row input[type="number"] { width: 90px; }
.cfg-status { font-family: var(--mono); font-size: var(--fs-sm); margin-left: 1rem; width: auto; }
.cfg-status.ok { color: var(--green); }
.cfg-status.err { color: var(--red); }
.rep-sub { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); margin-top: 0.3rem; }

/* rakebacks — wallet connect + proxy powers (page-scoped) */
:where(.page-rakebacks) .wc-block { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dotted var(--panel-edge); }
:where(.page-rakebacks) .wc-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-md); }
:where(.page-rakebacks) .wc-row .lbl { font-family: var(--display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-btn); color: var(--text-dim); }
:where(.page-rakebacks) .wc-row .name { color: var(--teal); }
:where(.page-rakebacks) .wc-proxy { margin-top: 1.2rem; }

/* modal body details (admin confirm modals build these rows in JS) */
.modal th { white-space: nowrap; }
.modal .note { margin-top: 0; }
.hazard.mt { margin-top: 0.9rem; }
.row.end { align-items: flex-end; }
.row.mid { align-items: center; margin-top: 0.4rem; }
.row .grow0, .grow0 { flex: 0 0 auto; }
.row .grow2 { flex: 2; }
.w-idx { width: 2rem; }
.w-call { width: 220px; }

/* ===================================================== 19 · reduced motion */
/* Ornamental motion off; functional spinners (.spin busy ring, tx-dots) stay —
   they communicate in-flight state. Ghost gradients remain as static fills. */
@media (prefers-reduced-motion: reduce) {
  header h1, header .sub .cursor,
  .dot.running, .dot.probing, .hz-flash, .live-indicator,
  .chart-loading.on, .explorer-fetching,
  .ghost-row .ghost-bar, .ghost-card, .chart-ghost i,
  body.loading .stats.hero .val::after, body.loading .chart::after,
  .cyc-chip.live .spin, .cyc-chip.open .ring { animation: none; }
  /* the only transition in the file — an edge glow that fades is still motion */
  .edge-glow { transition: none; }
}
