/* MIKODES Prediction Stack — shared design system (BASE: structure, type, motion, components)
   Dark, dense, data-first. Used by Scanner, Terminal and Bot admin.
   The base owns structure; each theme-*.css owns identity (colour, marks, nav style).
   Canonical copy lives in 11-prediction-stack/design-system/. Apps get base+theme via build.sh.
   Every class that existed before the 2026-09 redesign still works — new classes are additive.
   Token + component reference: design-system/README.md */

/* Fonts: Inter (UI) + JetBrains Mono (numbers, addresses). Both SIL OFL 1.1.
   Offline, the system stacks below take over — nothing depends on the import. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- colour (themes override all of these) ---- */
  --bg:          #0b1420;
  --surface:     #121e2c;
  --surface-2:   #18283a;
  --surface-3:   #1f3347;
  --border:      #22374d;
  --border-soft: #1a2c3f;

  --text:        #e9eff6;
  --text-dim:    #90a4b9;
  --text-faint:  #5f748a;

  --accent:      #2d9cdb;          /* links, rings, active states, chart accent */
  --accent-dim:  #1b6d9c;
  --accent-strong: var(--accent);  /* filled primary buttons */
  --on-accent:   #ffffff;          /* text on --accent-strong */
  --yes:         #24b47e;
  --no:          #eb5757;
  --warn:        #f2c94c;
  --warn-bg:     #2b2410;

  /* ---- elevation: 1px gradient hairlines, a top highlight, soft shadows ---- */
  --hairline:        rgba(255,255,255,.07);
  --hairline-strong: rgba(255,255,255,.12);
  --hairline-grad:   linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.045) 38%, rgba(255,255,255,.03) 100%);
  --panel-bg:        linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  --shadow-1:  0 1px 2px rgba(0,0,0,.35);
  --shadow-2:  0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25);
  --shadow-3:  0 18px 48px -12px rgba(0,0,0,.7);
  --ring:      0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --glow:      0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent);

  /* ---- 8px spacing scale (4 is the half-step) ---- */
  --s-0: 4px; --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 40px; --s-7: 48px; --s-8: 64px;

  /* ---- radius scale ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --radius:    var(--r-md);   /* legacy names, kept */
  --radius-sm: var(--r-sm);

  /* ---- motion ---- */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms;
  --dur:      200ms;

  /* ---- type ---- */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --num:  var(--mono);        /* KPI values, prices, table numbers */
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 29px;

  --topbar-h: 60px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
html { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
body { min-height: 100vh; overflow-x: hidden; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

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

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--s-4); }

/* tabular numbers wherever numbers live */
.num, td.num, th.num, .mono, .v, .price-big, .delta, .meta, .rank, .feed-num, .statusline, kbd, code { font-variant-numeric: tabular-nums slashed-zero; }

/* ---------- top bar (sticky glass) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.topbar-inner { display: flex; align-items: center; gap: var(--s-4); height: var(--topbar-h); }
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 15px; white-space: nowrap; }
.brand .dim { color: var(--text-faint); font-weight: 500; }
.nav { display: flex; gap: 2px; align-self: stretch; align-items: center; }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.on { background: var(--surface-3); color: var(--text); }
.spacer { flex: 1; }

/* ---------- pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5;
  border: 1px solid var(--hairline-strong);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--text-dim);
  white-space: nowrap;
}
.pill.ok    { color: var(--yes);  border-color: color-mix(in srgb, var(--yes) 32%, transparent);  background: color-mix(in srgb, var(--yes) 10%, transparent); }
.pill.bad   { color: var(--no);   border-color: color-mix(in srgb, var(--no) 32%, transparent);   background: color-mix(in srgb, var(--no) 10%, transparent); }
.pill.warn  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.pill.accent{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* live dot: a pulsing ring. Only .live-dot and .dot.live pulse: a pulse claims live data, so a page adds
   .live only when its data is actually fresh. Status-line and ok-pill dots are static by default. */
.live-dot, .dot.live, .statusline .dot, .pill.ok .dot {
  position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yes); color: var(--yes); box-shadow: 0 0 0 0 currentColor;
}
.live-dot, .dot.live { animation: pm-pulse 2s var(--ease) infinite; }
.dot.bad, .statusline .dot.bad { background: var(--no); color: var(--no); }
.dot.warn, .statusline .dot.warn { background: var(--warn); color: var(--warn); }
.pill.ok .dot { width: 6px; height: 6px; }
@keyframes pm-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}

/* ---------- panels: gradient hairline border with a top highlight ---------- */
.panel {
  background: var(--panel-bg) padding-box, var(--hairline-grad) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg); margin: var(--s-3) 0; overflow: hidden;
  box-shadow: var(--shadow-1);
}
.panel-head {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--hairline);
  background: transparent; min-height: 56px;
}
.panel-head h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.panel-body { padding: 18px; overflow-x: auto; }
.panel-note { padding: 12px 18px; color: var(--text-dim); font-size: 12.5px; line-height: 1.55; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.015); }

/* ---------- banner ---------- */
.banner {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: 14px 18px; border-radius: var(--r-md); margin: var(--s-3) 0;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 12%, transparent), color-mix(in srgb, var(--warn) 4%, transparent));
  box-shadow: inset 3px 0 0 var(--warn);
  color: #f3e2b0; font-size: 13px; line-height: 1.6;
}
.banner.bad {
  border-color: color-mix(in srgb, var(--no) 30%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--no) 12%, transparent), color-mix(in srgb, var(--no) 4%, transparent));
  box-shadow: inset 3px 0 0 var(--no); color: #f6c9c9;
}
.banner.info {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
  box-shadow: inset 3px 0 0 var(--accent); color: var(--text);
}
.banner b { color: #fff; }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--hairline); }
.stat { background: var(--surface); padding: 16px 18px; }
.stat .k { color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat .v { font-family: var(--num); font-size: 20px; font-weight: 600; margin-top: 4px; letter-spacing: -0.03em; }
.stat .s { color: var(--text-faint); font-size: 11.5px; margin-top: 2px; }

/* ---------- table ---------- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint);
  border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.015);
  white-space: nowrap;
}
table.grid th.num, table.grid td.num { text-align: right; }
table.grid td.num { font-family: var(--num); font-size: 12.5px; }
table.grid td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; transition: background-color var(--dur-fast) var(--ease); }
table.grid tbody tr { transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
table.grid tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 85%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr.open { background: var(--surface-2); }
.row-title { font-weight: 600; max-width: 460px; letter-spacing: -0.005em; }
.row-sub { color: var(--text-faint); font-size: 11.5px; margin-top: 2px; }
.mono { font-family: var(--mono); font-size: 12px; }
.pos { color: var(--yes); font-weight: 600; }
.neg { color: var(--no);  font-weight: 600; }
.unknown { color: var(--text-faint); font-style: italic; }
.clickable { cursor: pointer; }

/* legs detail */
.legs { background: rgba(0,0,0,.18); }
.legs table { width: 100%; border-collapse: collapse; }
.legs th { background: transparent; border-bottom: 1px solid var(--hairline); position: static; }
.legs td { border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.side-yes { color: var(--yes); font-weight: 700; font-size: 11px; }
.side-no  { color: var(--no);  font-weight: 700; font-size: 11px; }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
label.ctl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
input[type=text], input[type=number], input[type=search], select, textarea {
  background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--hairline-strong); color: var(--text);
  border-radius: var(--r-sm); padding: 7px 10px; font-size: 13px; font-family: inherit; max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
input[type=number] { font-family: var(--num); font-variant-numeric: tabular-nums; }
input[type=text]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--border); }
input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select { cursor: pointer; }
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-3); border: 1px solid var(--hairline-strong); color: var(--text);
  border-radius: var(--r-sm); padding: 7px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
button:hover, .btn:hover { background: var(--border); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ring); }
button:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; }
button.primary, .btn.primary {
  background: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 70%, #fff 30%); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.4);
}
button.primary:hover, .btn.primary:hover { background: color-mix(in srgb, var(--accent-strong) 88%, #fff 12%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--glow); }
button.ghost, .btn.ghost { background: transparent; border-color: var(--hairline-strong); }
button.ghost:hover, .btn.ghost:hover { background: var(--surface-2); }

/* ---------- misc ---------- */
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 10px 16px; font-size: 13px; }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
code.f { font-family: var(--mono); font-size: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--hairline-strong); border-radius: var(--r-xs); padding: 1px 6px; display: inline-block; color: var(--text); }
.footer { color: var(--text-faint); font-size: 11.5px; padding: 28px 0 44px; border-top: 1px solid var(--hairline); margin-top: 28px; }
.empty { padding: 40px 16px; text-align: center; color: var(--text-faint); }

/* ===========================================================================
   Intelligence-dashboard components.
   KPI tiles with a sparkline, ranked rows, category chips, delta chips, live feed.
   =========================================================================== */

:root {
  --accent-warm: #f0883e;      /* the logo mark and "new" markers */
  --feed-bg:     #0d1725;
}

/* --- brand + top bar ------------------------------------------------------ */
.brand-mark {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--accent-warm); margin-right: 10px; vertical-align: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-warm) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent-warm) 60%, transparent);
}
.brand.mono { font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; font-weight: 600; }
.brand.mono .dim { color: var(--text-faint); font-weight: 400; }

.searchbox {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md); padding: 7px 8px 7px 12px; min-width: 260px;
  color: var(--text-faint); font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.searchbox:hover { border-color: var(--border); }
.searchbox:focus-within { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
.searchbox input, .searchbox input[type=text] {
  background: none; border: 0; color: var(--text); font-size: 13px; box-shadow: none;
  font-family: inherit; flex: 1; padding: 0; min-width: 0; border-radius: 0;
}
.searchbox input:focus { outline: none; box-shadow: none; }
.searchbox input::placeholder { color: var(--text-faint); }

/* kbd — keyboard hint, standalone or inside .searchbox */
kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--text-dim);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--hairline-strong); border-bottom-width: 2px;
  border-radius: var(--r-xs); padding: 0 5px; line-height: 1;
}

/* --- page header ---------------------------------------------------------- */
.pagehead { padding: 32px 0 24px; display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.pagehead h1 { margin: 0; font-size: 28px; letter-spacing: -0.035em; font-weight: 700; line-height: 1.15; }
.pagehead .sub { color: var(--text-dim); font-size: 13px; margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.statusline { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--text-faint); font-size: 11.5px; font-family: var(--mono); }
.statusline > span { display: inline-flex; align-items: center; gap: 6px; }
.statusline b { color: var(--text-dim); font-weight: 500; }

/* --- KPI tiles: 4 → 2 → 1 ------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi {
  position: relative;
  background: var(--panel-bg) padding-box, var(--hairline-grad) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg); padding: 18px 18px 16px; min-width: 0;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi .k { color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }
.kpi .row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); margin-top: 10px; min-width: 0; }
.kpi .v { font-family: var(--num); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.045em; line-height: 1.05; white-space: nowrap; }
.kpi .s { color: var(--text-faint); font-size: 11.5px; margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi svg { flex: none; opacity: .95; max-width: 45%; height: auto; }

/* --- delta chip ----------------------------------------------------------- */
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--num); font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  padding: 2px 6px; border-radius: var(--r-xs); white-space: nowrap; line-height: 1.45;
  border: 1px solid transparent;
}
.delta.up   { color: var(--yes); background: color-mix(in srgb, var(--yes) 13%, transparent); border-color: color-mix(in srgb, var(--yes) 22%, transparent); }
.delta.down { color: var(--no);  background: color-mix(in srgb, var(--no) 13%, transparent);  border-color: color-mix(in srgb, var(--no) 22%, transparent); }
.delta.flat { color: var(--text-faint); background: var(--surface-2); border-color: var(--hairline); }

/* --- segmented control (.tabs is the legacy name, .seg the new one) -------- */
.tabs, .seg {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--bg) 75%, transparent); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill);
}
.tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
.tabs button, .seg button, .seg a {
  border: 0; background: none; color: var(--text-dim); box-shadow: none;
  padding: 5px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.tabs button.on, .seg button.on, .seg a.on, .seg [aria-pressed=true] {
  background: var(--surface-3); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.4);
}
.tabs button:hover:not(.on), .seg button:hover:not(.on), .seg a:hover:not(.on) { color: var(--text); background: none; text-decoration: none; }
.tabs button:active, .seg button:active { transform: none; }

/* --- ranked market rows --------------------------------------------------- */
.rank { font-family: var(--mono); font-size: 11px; color: var(--text-faint); width: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim); font-weight: 500;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.chip.politics::before { background: #9b6ef3; }
.chip.sports::before   { background: var(--yes); }
.chip.crypto::before   { background: var(--accent-warm); }
.chip.economy::before,.chip.economics::before { background: #4fd1c5; }
.chip.tech::before     { background: var(--accent); }
.meta { color: var(--text-faint); font-size: 11.5px; font-family: var(--mono); }
.price-big {
  font-family: var(--num); font-size: 20px; font-weight: 600;
  letter-spacing: -0.04em; line-height: 1;
}
.price-big .c { font-size: 12px; color: var(--text-faint); font-weight: 500; margin-left: 1px; }

/* icon tile — market / entity avatar (legacy .mkt-icon, new alias .icon-tile) */
.mkt-icon, .icon-tile {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex: none;
  background: var(--surface-3); border: 1px solid var(--hairline-strong);
  display: grid; place-items: center; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* --- live feed ------------------------------------------------------------ */
.feed { max-height: 620px; overflow-y: auto; overscroll-behavior: contain; }
.feed-row { padding: 12px 18px; border-bottom: 1px solid var(--hairline); transition: background-color var(--dur-fast) var(--ease); }
.feed-row:hover { background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.feed-row.enter { animation: pm-enter 420ms var(--ease) both; }
.feed-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.feed-addr { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.feed-what { color: var(--text-faint); }
.feed-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
.feed-num { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }
@keyframes pm-enter { from { opacity: 0; transform: translateY(-4px); background: color-mix(in srgb, var(--accent) 10%, transparent); } to { opacity: 1; transform: none; } }

/* --- badges --------------------------------------------------------------- */
.badge, .badge-whale, .badge-new {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
  border-radius: var(--r-xs); padding: 1px 6px; border: 1px solid var(--hairline-strong);
  color: var(--text-dim); background: var(--surface-2); white-space: nowrap;
}
.badge-whale, .badge.whale {
  color: #f5cf5b; background: color-mix(in srgb, #f2c94c 12%, transparent);
  border-color: color-mix(in srgb, #f2c94c 32%, transparent);
  box-shadow: 0 0 12px -4px color-mix(in srgb, #f2c94c 60%, transparent);
}
.badge-new, .badge.new {
  color: var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-warm) 36%, transparent);
}
.badge-new { margin-left: 6px; padding: 0 5px; font-size: 9px; }
.badge.live { color: var(--yes); background: color-mix(in srgb, var(--yes) 11%, transparent); border-color: color-mix(in srgb, var(--yes) 32%, transparent); }
.badge.live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pm-blink 1.6s ease-in-out infinite; }
.badge.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
@keyframes pm-blink { 50% { opacity: .3; } }

/* --- two-column dashboard ------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-3); align-items: start; }
.split > * { min-width: 0; }
/* The left column carries an 8-column table; below this it clips the last columns, so the
   side rail stacks rather than squeezing it. minmax(0,…) keeps a wide table inside its scroller. */
@media (max-width: 1280px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --- cost bar (scanner: how much of the $1.00 payout the legs cost) -------- */
.costbar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; min-width: 90px; }
.costbar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yes), #3ad29f); }
.costbar.thin { height: 4px; }

/* ===========================================================================
   Utility components (new, additive)
   =========================================================================== */

/* card: generic elevated surface with hover lift */
.surface, .card-lift {
  background: var(--panel-bg) padding-box, var(--hairline-grad) border-box;
  border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* skeleton shimmer — for loading placeholders; never a stand-in for a real value */
.skeleton {
  display: inline-block; min-height: 1em; min-width: 3em; border-radius: var(--r-xs); color: transparent !important;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 45%, var(--surface-2) 90%);
  background-size: 250% 100%; animation: pm-shimmer 1.4s linear infinite;
}
.skeleton.line { display: block; height: 12px; margin: 6px 0; }
.skeleton.block { display: block; height: 64px; border-radius: var(--r-md); }
@keyframes pm-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* tooltip — CSS-only: <span data-tip="text">…</span> */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 40;
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  width: max-content; max-width: 260px; white-space: normal; text-align: left;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm); padding: 6px 9px; font: 500 11.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none;
  box-shadow: var(--shadow-3);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tip { /* standalone positioned tooltip box (JS-placed, e.g. charts) */
  position: absolute; pointer-events: none; z-index: 40;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; max-width: 260px; box-shadow: var(--shadow-3);
}

/* toast */
.toast-stack { position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 60; display: flex; flex-direction: column; gap: var(--s-1); max-width: calc(100vw - 32px); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; min-width: 240px; max-width: 380px;
  background: color-mix(in srgb, var(--surface-3) 94%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 13px; box-shadow: var(--shadow-3);
  animation: pm-toast 260ms var(--ease) both;
}
.toast::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--accent); }
.toast.ok::before   { background: var(--yes); }
.toast.bad::before  { background: var(--no); }
.toast.warn::before { background: var(--warn); }
@keyframes pm-toast { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* section eyebrow / label */
.eyebrow { color: var(--text-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--s-3) 0; }
.hstack { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===========================================================================
   Responsive — must hold at 375px with no horizontal page scroll.
   =========================================================================== */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --topbar-h: auto; }
  .wrap { padding: 0 var(--s-3); }
  .topbar-inner { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 0; }
  .topbar-inner > .spacer { display: none; }
  .brand { order: 1; }
  .searchbox { order: 2; flex: 1 1 140px; min-width: 0; padding: 6px 8px 6px 10px; }
  .topbar-inner > .pill { order: 2; margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav {
    order: 3; flex: 1 0 100%; width: 100%; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s-3)); padding: 4px var(--s-3) 8px; width: calc(100% + 2 * var(--s-3)); flex-basis: calc(100% + 2 * var(--s-3));
  }
  .nav::-webkit-scrollbar { display: none; }
  /* the nav scrolls sideways on phones: fade the right edge so a cut-off item reads as "more", and pad the
     end so the last item clears the fade when scrolled fully */
  .nav { padding-right: 40px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .nav a { padding: 6px 10px; }
  .pagehead { padding: 22px 0 16px; gap: 12px; }
  .pagehead h1 { font-size: 24px; }
  .statusline { margin-left: 0; gap: 10px 14px; }
  .pill { white-space: normal; }
  .panel-head { padding: 12px 14px; }
  .panel-body { padding: 14px; }
  .panel-note, .controls { padding-left: 14px; padding-right: 14px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .kpi .v { font-size: 24px; }
  .banner { padding: 12px 14px; }
  table.grid th, table.grid td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .tabs, .seg { width: 100%; }
}

/* ===========================================================================
   Motion preference — everything above degrades to static.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .kpi:hover, .card-lift:hover { transform: none; }
}

/* THEME: scanner — deliberately NOT the terminal.
   Cooler and softer: slate surfaces, teal as the accent, violet for the second venue,
   round mark, FILLED active nav (the terminal uses an underline), a corner mesh glow
   (the terminal glows top-centre). The two products sit side by side; they must not look like one app. */
:root {
  --bg:          #0b1015;
  --surface:     #121a21;
  --surface-2:   #18222b;
  --surface-3:   #1f2c37;
  --border:      #26384a;
  --border-soft: #1a2530;

  --text:        #e8f0f4;
  --text-dim:    #93a6b2;
  --text-faint:  #5e7180;

  --accent:        #2dd4bf;        /* teal — the scanner's signature (UI only, not a series) */
  --accent-dim:    #17796e;
  --accent-strong: #14b8a6;
  --on-accent:     #04211d;        /* dark ink on the teal fill */
  --accent-warm:   #2dd4bf;
  --yes:         #34d399;
  --no:          #fb7185;
  --warn:        #fbbf24;
  --warn-bg:     #241d07;

  /* Both validated for the dark surface with scripts/validate_palette.js:
     lightness band PASS, chroma PASS, CVD deutan dE 18.5 / tritan 13.7, contrast PASS. */
  --series-a:    #1aa89b;          /* multi-outcome */
  --series-b:    #9061f0;          /* binary */

  --hairline:        rgba(170,230,225,.07);
  --hairline-strong: rgba(170,230,225,.12);
  --hairline-grad:   linear-gradient(160deg, rgba(45,212,191,.20) 0%, rgba(170,230,225,.06) 35%, rgba(170,230,225,.035) 100%);
  --panel-bg:        linear-gradient(180deg, #131c24 0%, #10181f 100%);
  --r-lg: 16px;
}

body {
  background:
    radial-gradient(700px 380px at 100% -80px, rgba(45,212,191,.13), transparent 70%),
    radial-gradient(520px 320px at 78% -140px, rgba(144,97,240,.10), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.topbar { background: color-mix(in srgb, #0b1015 70%, transparent); }

.brand-mark { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7ff0e0, #14b8a6 70%); }   /* round mark, not the terminal's square */

/* filled pill nav */
.nav a { border-radius: var(--r-pill); }
.nav a.on {
  background: rgba(45,212,191,.12); color: #bff5ec; box-shadow: inset 0 0 0 1px rgba(45,212,191,.28);
}

.pagehead h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
@media (max-width: 760px) { .pagehead h1 { font-size: 25px; } }
.kpi:hover { box-shadow: var(--shadow-2), 0 0 0 1px rgba(45,212,191,.16), 0 10px 40px -18px rgba(45,212,191,.4); }
.delta.up   { color: var(--yes); background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.24); }
.delta.down { color: var(--no);  background: rgba(251,113,133,.13); border-color: rgba(251,113,133,.24); }
.costbar > i { background: linear-gradient(90deg, var(--accent), var(--yes)); }

.tabs button.on, .seg button.on, .seg a.on, .seg [aria-pressed=true] {
  background: var(--accent-strong); color: var(--on-accent); font-weight: 600;
  box-shadow: 0 2px 10px -2px rgba(45,212,191,.55);
}
table.grid tbody tr:hover { background: rgba(45,212,191,.04); }
.searchbox { border-radius: var(--r-pill); }

/* hero: the single best opportunity, stated plainly */
.hero-op {
  position: relative; overflow: hidden;
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(45,212,191,.14), transparent 70%) padding-box,
    linear-gradient(135deg, #14212a 0%, var(--surface) 60%) padding-box,
    linear-gradient(135deg, rgba(45,212,191,.55), rgba(170,230,225,.08) 45%, rgba(144,97,240,.25)) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: var(--s-3);
  box-shadow: var(--shadow-2);
}
.hero-op::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 14px rgba(45,212,191,.7); }
.hero-op .lbl { color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-op h2 { margin: 10px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; }
.hero-op .grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px,1fr)); gap: 20px; margin-top: 20px; }
.hero-op .grid4 .k { color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.hero-op .grid4 .v { font-family: var(--num); font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.04em; }
@media (max-width: 520px) {
  .hero-op { padding: 20px 18px; }
  .hero-op .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .hero-op h2 { font-size: 18px; }
}

/* scatter: net edge against time to resolution — the scanner's core claim, drawn */
.scatter { position: relative; }
.scatter svg { display: block; width: 100%; height: auto; }
.scatter .axl { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }
.scatter circle { cursor: pointer; transition: r .12s; }
.scatter circle:hover { r: 7; }
.sc-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px; max-width: 260px;
  box-shadow: var(--shadow-3);
}

/* scatter legend — required whenever the plot carries two series */
.legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.scale-note { color: var(--text-faint); font-size: 11px; font-family: var(--mono); }