:root {
  /* WrapGTO brand neutrals (branding/): monochrome-first, teal #18D2C3 as
     the scarce accent (--brand-accent; never large fills). */
  --bg: #0C1117;
  --panel: #151B23;
  --panel-2: #1B222C;
  --panel-3: #242C37;
  --border: #252d3a;
  --border-strong: #313c4c;
  --text: #dbe2ec;
  --text-bright: #F4F7FA;
  --muted: #8A97A6;
  --brand-accent: #18D2C3;
  --accent: #18D2C3;
  --accent-2: #5FE5D9;
  --accent-soft: rgba(24, 210, 195, 0.14);
  /* Dark ink for text ON teal fills (white fails contrast on #18D2C3). */
  --on-accent: #06231F;
  --danger: #ef5666;
  --danger-soft: rgba(239, 86, 102, 0.12);
  /* Nudged green (vs teal accent) so ok/call stays distinguishable. */
  --ok: #3DC46F;
  --ok-soft: rgba(61, 196, 111, 0.12);
  --warn: #f0a23c;
  --slot: rgba(16, 26, 26, 0.55);
  --slot-border: #41506a;
  --slot-selected: var(--accent);
  --card-hearts: #cf3b4c;
  --card-diamonds: #2e6fd8;
  --card-clubs: #21945a;
  --card-spades: #3a4252;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.28);
  /* Brand type: Geist for everything read, Geist Mono for everything
     measured (frequencies, EV, sizes, labels). Graceful fallbacks. */
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: "Geist Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}

body {
  display: flex; flex-direction: column; min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -120px, #141b28 0%, rgba(20, 27, 40, 0) 70%),
    var(--bg);
  background-attachment: fixed;
}

[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #2c3543; border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #3a4658; }
::-webkit-scrollbar-track { background: transparent; }

button, input { font-family: inherit; }
button { transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; }
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* --- Top bar --- */
#top-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 16px;
  background: linear-gradient(180deg, #151b26 0%, #10141c 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.brand { display: flex; align-items: center; gap: 9px; margin-right: 6px; }
.brand-mark {
  width: 27px; height: 27px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, #0FA89B 100%);
  color: var(--on-accent); font-size: 15px; line-height: 1;
  box-shadow: 0 2px 8px rgba(24, 210, 195, 0.35);
}
.brand-name {
  font-weight: 700; font-size: 15px; letter-spacing: 0.2px;
  color: var(--text-bright); white-space: nowrap;
}
.brand-name .sub { color: var(--muted); font-weight: 600; }
/* WrapGTO lockup (branding/ spec): continuous-stroke mark in currentColor;
   "GTO" always Geist Mono, tracked wide, one optical step lighter. */
.brand-logo {
  width: 24px; height: 24px; display: block; flex: none;
  color: var(--text-bright);
}
.gate-logo { width: 42px; height: 42px; }
.brand-gto {
  font-family: var(--mono); color: var(--muted);
  font-size: 0.7em; font-weight: 500;
  letter-spacing: 0.18em; margin-left: 7px;
}
.top-bar-item { display: flex; align-items: center; gap: 8px; }
.top-bar-spacer { flex: 1; }
.top-bar-item label {
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.top-bar-item input[type="number"] {
  width: 76px; padding: 6px 8px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px;
  transition: border-color 0.12s ease;
}
.top-bar-item input[type="number"]:hover { border-color: var(--border-strong); }
#unit-toggle {
  padding: 6px 12px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; min-width: 44px; font-size: 13px;
}
#unit-toggle:hover { background: var(--panel-3); border-color: var(--border-strong); }
.seat-ctl {
  display: flex; align-items: center; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px;
}
.seat-ctl button {
  width: 26px; height: 26px; background: transparent; border: none; color: var(--text);
  cursor: pointer; font-size: 16px; font-weight: 600; border-radius: 4px;
}
.seat-ctl button:hover:not(:disabled) { background: var(--panel-3); }
.seat-ctl button:disabled { opacity: 0.35; cursor: not-allowed; }
#seats-count { min-width: 20px; text-align: center; font-weight: 700; }
#new-hand-btn {
  padding: 7px 16px;
  background: linear-gradient(180deg, var(--accent) 0%, #0FA89B 100%);
  color: var(--on-accent); font-weight: 600; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24, 210, 195, 0.25);
}
#new-hand-btn:hover { background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); }

/* --- Main layout --- */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: 1fr;
  gap: 0;
  min-height: 0;
}
#table-area {
  padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}
#card-grid-panel {
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 0 12px 12px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}

/* --- Table SVG --- */
#table-wrap {
  background:
    radial-gradient(80% 90% at 50% 30%, #161d29 0%, #10151d 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}
#table-svg {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
#table-svg text { font-family: var(--font); font-variant-numeric: tabular-nums; }
.table-rim { fill: url(#rim-gradient); stroke: rgba(0, 0, 0, 0.6); stroke-width: 1; }
.table-edge { fill: url(#felt-gradient); stroke: rgba(9, 48, 42, 0.9); stroke-width: 1.5; }
.table-line {
  fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1.5;
  pointer-events: none;
}
.table-glow {
  fill: rgba(255, 255, 255, 0.035); stroke: none; pointer-events: none;
}
.pot-badge-rect {
  fill: url(#pot-badge-gradient);
  stroke: rgba(255, 255, 255, 0.12); stroke-width: 1;
}
.pot-label {
  fill: var(--text-bright); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.4px;
}
.pot-settled-rect {
  fill: rgba(7, 13, 20, 0.55);
  stroke: rgba(255, 255, 255, 0.08); stroke-width: 1;
}
.pot-settled-label {
  fill: var(--muted); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.3px;
}
/* Hero made-hand labels ("#1 a pair of 8s") between plate and cards */
.hero-hand-label {
  fill: var(--text-bright); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.2px;
}
.hero-hand-label .hhl-tag {
  fill: var(--accent); font-weight: 700;
}

/* Board card slots inside SVG */
.slot-rect {
  fill: var(--slot); stroke: var(--slot-border); stroke-width: 1;
  cursor: pointer;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.45));
  transition: stroke 0.12s ease;
}
.slot-rect:not(.empty) { stroke: rgba(255, 255, 255, 0.30); }
.slot-rect.selected {
  stroke: var(--slot-selected); stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(24, 210, 195, 0.55));
}
.slot-rect.empty { stroke-dasharray: 3 3; }
.slot-rect.empty:hover { stroke: var(--accent-2); }
.slot-rect.unused { opacity: 0.35; }
.slot-corner-rank { font-weight: 700; pointer-events: none; }
.slot-corner-suit { pointer-events: none; }
.slot-corner-bigrank { font-weight: 800; pointer-events: none; opacity: 0.92; }
.slot-modified-dot { fill: var(--warn); }

/* Seat nodes */
.seat-node .seat-bg {
  fill: url(#seat-gradient); stroke: rgba(255, 255, 255, 0.10); stroke-width: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.seat-node.hero .seat-bg { stroke: rgba(95, 229, 217, 0.35); }
.seat-node.actor .seat-bg {
  stroke: var(--accent); stroke-width: 2;
  animation: actor-glow 1.8s ease-in-out infinite;
}
@keyframes actor-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(24, 210, 195, 0.35)); }
  50% { filter: drop-shadow(0 0 9px rgba(24, 210, 195, 0.8)); }
}
.seat-node.folded .seat-bg { opacity: 0.32; }
.seat-node.folded text { opacity: 0.45; }
/* Trainer animation: the seat whose action just landed */
.seat-node.acted .seat-bg {
  stroke: var(--warn); stroke-width: 2;
  animation: acted-pop 0.4s ease;
  filter: drop-shadow(0 0 8px rgba(240, 162, 60, 0.6));
}
@keyframes acted-pop {
  0% { filter: drop-shadow(0 0 1px rgba(240, 162, 60, 0.2)); }
  60% { filter: drop-shadow(0 0 12px rgba(240, 162, 60, 0.85)); }
  100% { filter: drop-shadow(0 0 8px rgba(240, 162, 60, 0.6)); }
}
.seat-node .seat-position {
  fill: var(--muted); font-size: 10.5px; text-anchor: middle;
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600;
}
.seat-node.actor .seat-position { fill: var(--accent-2); }
.seat-node .seat-stack {
  fill: var(--text-bright); font-size: 13px; font-weight: 700; text-anchor: middle;
  letter-spacing: 0.2px;
}
.seat-node .seat-stack.editable {
  text-decoration: underline dotted rgba(215, 221, 230, 0.35);
  text-decoration-thickness: 1px;
}
.stack-edit-input {
  position: absolute;
  z-index: 20;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  outline: none;
  box-shadow: var(--shadow-1);
}
.stack-edit-input::-webkit-outer-spin-button,
.stack-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Committed-bet chip in front of the seat */
.bet-chip { pointer-events: none; }
.bet-chip-under { fill: #1d4ea8; stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.75; }
.bet-chip-base {
  fill: #3573e0; stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.75;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.5));
}
.bet-chip-stripes {
  fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.4;
  stroke-dasharray: 2.4 4.0;
}
.bet-chip-inner {
  fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.9;
}
.bet-chip-amount {
  fill: var(--text-bright); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.2px;
  paint-order: stroke;
  stroke: rgba(6, 10, 16, 0.75); stroke-width: 2.5px;
}
.seat-node.folded .bet-chip { opacity: 0.4; }
.seat-node.all-in .seat-stack { fill: var(--warn); }

/* Seat remove badge */
.seat-remove { cursor: pointer; }
.seat-remove-bg {
  fill: var(--panel); stroke: var(--danger); stroke-width: 1.5; opacity: 0.55;
}
.seat-remove:hover .seat-remove-bg { opacity: 1; fill: var(--danger); }
.seat-remove-x {
  fill: var(--danger); font-size: 14px; font-weight: 700;
  text-anchor: middle; pointer-events: none;
}
.seat-remove:hover .seat-remove-x { fill: #fff; }

/* Insert-between-seats icon */
#insert-icon { cursor: pointer; }
#insert-icon .insert-icon-bg {
  fill: var(--panel); stroke: var(--accent); stroke-width: 2; opacity: 0.9;
}
#insert-icon:hover .insert-icon-bg { fill: var(--accent); }
#insert-icon .insert-icon-plus {
  fill: var(--accent); font-size: 20px; font-weight: 700; pointer-events: none;
}
#insert-icon:hover .insert-icon-plus { fill: #fff; }

/* Dealer button */
#dealer-button {
  cursor: grab;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
#dealer-button.dragging { cursor: grabbing; }
.dealer-circle {
  fill: url(#dealer-gradient); stroke: rgba(0, 0, 0, 0.65); stroke-width: 1.5;
}
.dealer-text {
  fill: #1c1206; font-weight: 800; font-size: 13px;
  letter-spacing: 0.5px;
}

/* --- Actor banner --- */
.actor-banner {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 9px 13px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 600;
}
.actor-banner::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
  animation: banner-pulse 1.4s ease-in-out infinite;
}
.actor-banner.hero { border-left-color: var(--ok); }
.actor-banner.hero::before { background: var(--ok); }
@keyframes banner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- Panels --- */
.panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  height: 300px;
  flex-shrink: 0;
}
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: var(--shadow-1);
}
.panel h3 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 9px 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted); font-weight: 700;
}
.panel h3::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.panel-controls { display: flex; gap: 6px; margin-bottom: 10px; }
.panel-controls button {
  padding: 5px 12px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12px; font-weight: 600;
}
.panel-controls button:disabled { opacity: 0.35; cursor: not-allowed; }
.panel-controls button:hover:not(:disabled) { background: var(--panel-3); border-color: var(--border-strong); }
.muted { color: var(--muted); font-size: 12px; }

/* Gate buttons */
#gate-buttons {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
#gate-buttons button {
  flex: 1; min-width: 80px; padding: 9px 10px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; font-weight: 600;
}
#gate-buttons button:hover:not(:disabled) { background: var(--panel-3); border-color: var(--border-strong); }
#gate-buttons button:disabled { opacity: 0.35; cursor: not-allowed; }
#gate-buttons button.fold {
  color: var(--danger); background: var(--danger-soft);
  border-color: rgba(239, 86, 102, 0.35);
}
#gate-buttons button.fold:hover:not(:disabled) {
  background: rgba(239, 86, 102, 0.22); border-color: var(--danger);
}
#gate-buttons button.call {
  color: var(--ok); background: var(--ok-soft);
  border-color: rgba(61, 196, 111, 0.35);
}
#gate-buttons button.call:hover:not(:disabled) {
  background: rgba(61, 196, 111, 0.22); border-color: var(--ok);
}
#gate-buttons button.all-in { color: var(--warn); }

/* Raise section */
#raise-section { display: flex; flex-direction: column; gap: 8px; }
.raise-bounds { font-variant-numeric: tabular-nums; }
.raise-input-row { display: flex; gap: 7px; align-items: center; }
#raise-input {
  flex: 1; padding: 8px 10px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#raise-input:hover { border-color: var(--border-strong); }
.raise-unit { color: var(--muted); font-size: 12px; width: 24px; }
#raise-submit, .primary {
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--accent) 0%, #0FA89B 100%);
  color: var(--on-accent);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 8px rgba(24, 210, 195, 0.25);
}
#raise-submit:hover, .primary:hover {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
}
.raise-shortcuts { display: flex; gap: 5px; flex-wrap: wrap; }
.raise-shortcut {
  padding: 4px 11px; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; font-size: 11px; font-weight: 600;
}
.raise-shortcut:hover:not(:disabled) {
  background: var(--accent-soft); color: var(--accent-2);
  border-color: rgba(24, 210, 195, 0.45);
}
.raise-shortcut:disabled { opacity: 0.35; cursor: not-allowed; }

/* Terminal pane */
#terminal-pane {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
#terminal-message { font-size: 13px; line-height: 1.45; }

/* Recommendation */
#recommendation {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  margin-bottom: 8px;
}
.rec-line {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; padding: 2px 0 7px;
  flex: 0 0 auto;
}
.rec-action { font-weight: 800; font-size: 16px; color: var(--accent-2); }
.rec-value-true { color: var(--text-bright); font-weight: 700; }
.rec-value {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rec-dist { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.rec-dist-row { display: flex; align-items: center; gap: 8px; }
.rec-dist-name {
  width: 44px; flex: none;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.rec-dist-track {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--panel-2); overflow: hidden;
}
.rec-dist-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.25s ease;
}
.rec-dist-fill.fold { background: linear-gradient(90deg, #b8434f, var(--danger)); }
.rec-dist-fill.call { background: linear-gradient(90deg, #2b9e56, var(--ok)); }
.rec-dist-fill.raise { background: linear-gradient(90deg, #0FA89B, var(--accent-2)); }
.rec-dist-pct {
  width: 34px; flex: none; text-align: right;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rec-detail { font-size: 11.5px; color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* v2 anchor EQ: x-axis = bet size (min → pot), bar height = preference */
.anchor-heat { margin-top: 8px; }

/* v4 sizing curve: smooth min→pot density + discrete wall bars at the
   lowest/highest legal sizes; white dot = exact recommended size. */
.bet-curve { display: block; width: 100%; flex: 1 1 0; min-height: 0; margin-top: 8px; }
.bet-curve .bc-tick { fill: var(--muted); font-size: 11px; }
.bet-curve .bc-tick.dim { fill: var(--border-strong); }
.bet-curve .bc-allin { fill: var(--text); font-size: 10.5px; }
.bet-curve .bc-end { font-size: 11px; letter-spacing: 0.3px; }
.anchor-eq-row { display: flex; gap: 3px; height: 52px; }
.anchor-eq-cell {
  flex: 1; position: relative; border-radius: 3px;
  background: rgba(255, 255, 255, 0.04); cursor: default;
}
.anchor-eq-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 2px 2px 0 0;
  /* LED-segment look: lit amber slices separated by thin gaps */
  background-image: repeating-linear-gradient(
    to top, #e8922c 0 4px, rgba(13, 16, 22, 0.55) 4px 6px);
}
.anchor-eq-cell.is-rec .anchor-eq-bar {
  background-image: repeating-linear-gradient(
    to top, #ffb95e 0 4px, rgba(13, 16, 22, 0.55) 4px 6px);
}
.anchor-eq-marks {
  position: absolute; top: 1px; left: 0; right: 0; text-align: center;
  font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.anchor-eq-cell.dead { background: var(--panel-2); opacity: 0.25; }
.anchor-eq-cell.is-user { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65); }
.anchor-heat-labels { display: flex; gap: 2px; margin-top: 2px; }
.anchor-heat-labels span {
  flex: 1; text-align: center;
  font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* History */
#history {
  flex: 1; min-height: 0;
  overflow-y: auto; font-size: 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.history-entry {
  padding: 4px 7px; background: var(--panel-2);
  border-radius: 5px; display: flex; align-items: center; gap: 9px;
}
.history-entry .h-street {
  min-width: 52px; flex: none; text-align: center;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px; padding: 2px 6px;
  background: var(--panel-3); color: var(--muted);
}
.history-entry .h-preflop { background: rgba(126, 138, 154, 0.16); color: #9aa7b6; }
.history-entry .h-flop { background: var(--ok-soft); color: var(--ok); }
.history-entry .h-turn { background: rgba(240, 162, 60, 0.14); color: var(--warn); }
.history-entry .h-river { background: var(--accent-soft); color: var(--accent-2); }
.history-entry .h-pos { font-weight: 700; min-width: 34px; color: var(--text-bright); }
.history-entry .h-action { color: var(--text); font-variant-numeric: tabular-nums; }

/* --- Card grid sidebar --- */
.card-grid-header {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px;
  background: var(--panel);
  padding: 12px 0 9px;
  border-bottom: 1px solid var(--border);
}
.card-grid-header .muted { text-align: right; }
#card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.card-btn {
  aspect-ratio: 5/7;
  position: relative;
  color: #fff;
  background: var(--panel-2);
  border: none; border-radius: 6px;
  cursor: pointer;
  padding: 0;
  user-select: none;
  line-height: 1;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.14) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.card-btn.suit-h { background-color: var(--card-hearts); }
.card-btn.suit-d { background-color: var(--card-diamonds); }
.card-btn.suit-c { background-color: var(--card-clubs); }
.card-btn.suit-s { background-color: var(--card-spades); }
.card-btn .corner-tl {
  position: absolute; top: 5px; left: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-weight: 700;
  line-height: 1;
}
.card-btn .corner-tl .corner-rank { font-size: 20px; }
.card-btn .corner-tl .corner-suit { font-size: 22px; }
.card-btn .corner-br {
  position: absolute; right: 6px; bottom: 4px;
  font-size: 42px; font-weight: 800; line-height: 0.9;
  opacity: 0.9;
}
.card-btn:hover:not(:disabled):not(.used) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 1.5px var(--accent-2);
}
.card-btn.used { opacity: 0.22; filter: grayscale(0.6); cursor: not-allowed; }
.card-btn:disabled { cursor: not-allowed; }

/* --- Mode tabs ------------------------------------------------------------ */
#mode-tabs {
  display: flex; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.mode-tab {
  padding: 5px 16px; border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.mode-tab:hover { color: var(--text); }
.mode-tab.active {
  background: linear-gradient(180deg, var(--accent) 0%, #0FA89B 100%);
  color: var(--on-accent);
  box-shadow: 0 1px 5px rgba(24, 210, 195, 0.35);
}

/* Mode-scoped visibility */
body.trainer-mode .study-only { display: none !important; }
.trainer-only { display: none !important; }
body.trainer-mode .trainer-only { display: flex !important; }

/* Sidebar swap: stats in trainer mode; card grid while picking a what-if card */
#trainer-stats-panel { display: none; }
body.trainer-mode #card-grid-panel { display: none; }
body.trainer-mode #trainer-stats-panel {
  display: flex;
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 0 12px 12px; overflow-y: auto;
  flex-direction: column; gap: 12px;
}
body.trainer-mode.trainer-pick #trainer-stats-panel { display: none; }
body.trainer-mode.trainer-pick #card-grid-panel {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 0 12px 12px; overflow-y: auto;
}

.trainer-only button,
#trainer-settings-btn, #trainer-repeat-btn {
  padding: 6px 13px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; font-weight: 600;
}
#trainer-settings-btn:hover, #trainer-repeat-btn:hover {
  background: var(--panel-3); border-color: var(--border-strong);
}
#trainer-new-hand-btn {
  padding: 7px 16px;
  background: linear-gradient(180deg, var(--accent) 0%, #0FA89B 100%);
  color: var(--on-accent); font-weight: 600; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24, 210, 195, 0.25);
}
#trainer-new-hand-btn:hover {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
}

/* Category colors (shared by stats bars, review chips, verdict text) */
.cat-best, .rec-dist-fill.cat-best { background: var(--accent); }
.cat-correct, .rec-dist-fill.cat-correct { background: #7ed3ae; }
.cat-inaccuracy, .rec-dist-fill.cat-inaccuracy { background: var(--warn); }
.cat-wrong, .rec-dist-fill.cat-wrong { background: #e06b78; }
.cat-blunder, .rec-dist-fill.cat-blunder { background: var(--danger); }
.cat-text-best { color: var(--accent); }
.cat-text-correct { color: #7ed3ae; }
.cat-text-inaccuracy { color: var(--warn); }
.cat-text-wrong { color: #e06b78; }
.cat-text-blunder { color: var(--danger); }

/* Trainer: revealed opponent hole mini-cards */
.seat-hole-card {
  stroke: rgba(255, 255, 255, 0.3); stroke-width: 0.75;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}
.seat-hole-rank {
  fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none;
}
.seat-hole-suit {
  fill: rgba(255, 255, 255, 0.92); font-size: 11px; pointer-events: none;
}

/* Feedback flash overlay */
#table-wrap { position: relative; }
#feedback-flash {
  position: absolute; left: 50%; top: 62%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 26px;
  background: rgba(10, 14, 20, 0.88);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  pointer-events: none;
  z-index: 5;
  animation: flash-in 0.18s ease;
  text-align: center;
}
#feedback-marks { font-size: 26px; font-weight: 800; line-height: 1; }
#feedback-text { font-size: 17px; font-weight: 800; color: var(--text-bright); }
#feedback-sub { font-size: 12px; color: var(--muted); }
#feedback-flash.flash-best { border-color: var(--accent); }
#feedback-flash.flash-best #feedback-marks { color: var(--accent); }
#feedback-flash.flash-correct { border-color: #7ed3ae; }
#feedback-flash.flash-correct #feedback-marks { color: #7ed3ae; }
#feedback-flash.flash-inaccuracy { border-color: var(--warn); }
#feedback-flash.flash-inaccuracy #feedback-marks { color: var(--warn); }
#feedback-flash.flash-wrong { border-color: #e06b78; }
#feedback-flash.flash-wrong #feedback-marks { color: #e06b78; }
#feedback-flash.flash-blunder { border-color: var(--danger); }
#feedback-flash.flash-blunder #feedback-marks { color: var(--danger); }
@keyframes flash-in {
  from { transform: translate(-50%, -40%); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}

/* Stats sidebar */
#trainer-stats-panel .card-grid-header { padding: 12px 0 9px; }
.stats-block {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 11px;
  display: flex; flex-direction: column; gap: 7px;
}
.stats-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--muted);
}
.stats-reset {
  padding: 2px 9px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; font-size: 10.5px; font-weight: 600;
}
.stats-reset:hover { color: var(--danger); border-color: var(--danger); }
.stats-top { display: flex; gap: 14px; }
.stats-top > div { display: flex; flex-direction: column; }
.stats-num {
  font-size: 19px; font-weight: 800; color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.stats-num.stats-score { color: var(--accent-2); }
.stats-cap { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-cat-row { display: flex; align-items: center; gap: 7px; }
.stat-cat-count {
  width: 26px; flex: none; text-align: right;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.stat-cat-row .rec-dist-track { height: 7px; }
.stat-cat-label { width: 76px; flex: none; font-size: 11px; color: var(--muted); }
.stats-ev { font-variant-numeric: tabular-nums; }

/* Review panel */
#review-panel {
  display: flex; flex-direction: row; align-items: flex-start; gap: 16px;
  padding: 12px 16px;
}
#review-panel[hidden] { display: none; }
.review-left {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: none;
}
.score-ring .ring-bg {
  fill: none; stroke: var(--panel-3); stroke-width: 5;
}
.score-ring .ring-fill {
  fill: none; stroke-width: 5; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 32px 32px;
  transition: stroke-dasharray 0.3s ease;
}
.score-ring .ring-fill.ring-good { stroke: var(--ok); }
.score-ring .ring-fill.ring-mid { stroke: var(--warn); }
.score-ring .ring-fill.ring-bad { stroke: var(--danger); }
.score-ring text {
  fill: var(--text-bright); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.review-score-caption {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.6px;
}
.review-mid { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.review-step-row { display: flex; align-items: center; gap: 8px; }
.review-step-row button {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
}
.review-step-row button:hover:not(:disabled) { background: var(--panel-3); }
.review-step-row button:disabled { opacity: 0.3; cursor: not-allowed; }
#review-step-label {
  font-size: 12.5px; font-weight: 700;
  /* Fixed-width centered slot so the prev/next arrows don't shift as the
     node string ("Node x / y — SEAT") changes length between nodes. */
  flex: 0 0 210px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#review-chips { display: flex; gap: 5px; flex-wrap: wrap; max-width: 380px; }
.review-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
  font-size: 11px; font-weight: 600;
}
.review-chip:hover { background: var(--panel-3); }
.review-chip.current { outline: 2px solid var(--accent); outline-offset: -1px; }
.review-chip .rc-street {
  font-size: 9px; text-transform: uppercase; color: var(--muted);
  letter-spacing: 0.4px;
}
.review-chip .rc-score { font-variant-numeric: tabular-nums; color: var(--muted); }
.review-chip.cat-border-best { border-color: rgba(24, 210, 195, 0.55); }
.review-chip.cat-border-correct { border-color: rgba(126, 211, 174, 0.45); }
.review-chip.cat-border-inaccuracy { border-color: rgba(240, 162, 60, 0.55); }
.review-chip.cat-border-wrong { border-color: rgba(224, 107, 120, 0.55); }
.review-chip.cat-border-blunder { border-color: rgba(239, 86, 102, 0.7); }
#review-whatif-bar {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
}
.whatif-tag {
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(24, 210, 195, 0.45);
  border-radius: 999px; padding: 2px 9px;
  font-size: 10.5px; font-weight: 700;
}
#review-whatif-reset {
  padding: 2px 9px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; font-size: 10.5px; font-weight: 600;
}
#review-whatif-reset:hover { color: var(--text); border-color: var(--border-strong); }
#review-detail {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px;
}
.review-verdict { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; }
.review-moves b { color: var(--text-bright); }
.review-ev { font-variant-numeric: tabular-nums; }
.review-hint { font-size: 11px; }
.review-villain { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.review-actions {
  display: flex; flex-direction: column; gap: 7px; flex: none;
  align-self: center;
}
#review-repeat-hand {
  padding: 7px 14px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 12.5px; font-weight: 600;
}
#review-repeat-hand:hover { background: var(--panel-3); border-color: var(--border-strong); }
#review-next-hand { white-space: nowrap; }

/* Settings modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 7, 12, 0.65);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 460px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column; gap: 12px;
}
.modal h3 {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--text-bright);
}
.ts-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ts-row > label {
  width: 105px; flex: none;
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ts-row select, .ts-row input[type="number"] {
  padding: 5px 8px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit;
}
.ts-row input[type="number"] { width: 72px; }
.ts-sub { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
#ts-per-seat { display: flex; flex-direction: column; gap: 5px; }
.ts-seat-row {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
}
.ts-seat-row span { width: 48px; }
.ts-seat-row input {
  width: 70px; padding: 4px 7px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px;
}
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-buttons button {
  padding: 7px 16px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; font-weight: 600;
}
#ts-cancel {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
}
#ts-cancel:hover { background: var(--panel-3); }

/* Toast */
#toast-container {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 6px; z-index: 1000;
}
.toast {
  background: #161c26;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--danger);
  color: var(--text); padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow-1);
  animation: toast-in 0.18s ease;
  max-width: 380px;
}
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--accent); }
@keyframes toast-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- Public build: sign-in gate, paywall, account chip ---------------------- */
.gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 9, 14, 0.82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.gate-card {
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 28px 30px; width: 400px; max-width: calc(100vw - 40px);
  display: flex; flex-direction: column; gap: 14px;
}
.gate-brand {
  font-size: 22px; font-weight: 700; color: var(--text-bright);
  display: flex; align-items: center; gap: 10px;
}
.gate-sub {
  margin: -6px 0 0; font-size: 11px; font-weight: 500; color: var(--muted);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em;
}
.gate-card h2 { margin: 0; font-size: 17px; color: var(--text-bright); }
.gate-tag { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; }
.gate-points { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.gate-points li { margin: 3px 0; }
.gate-fine { margin: 0; font-size: 11px; color: var(--muted); }
.gate-google {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  background: #fff; color: #1f1f1f; border: none; border-radius: var(--radius-sm);
  cursor: pointer;
}
.gate-google:hover { background: #ececec; }
.gate-primary {
  padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: linear-gradient(180deg, var(--accent) 0%, #0FA89B 100%);
  color: var(--on-accent); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm);
}
.gate-primary:hover { background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); }
.gate-secondary {
  padding: 8px 14px; font-size: 13px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
#dev-login-row { display: flex; gap: 8px; }
#dev-login-row input {
  flex: 1; padding: 8px 10px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
#dev-login-row button {
  padding: 8px 12px; background: var(--panel-3); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
}

#account-chip { display: flex; align-items: center; gap: 8px; }
.acct-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.acct-email { font-size: 12px; color: var(--text); max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.acct-pill.pro { background: rgba(24, 210, 195, 0.16); color: var(--accent); border: 1px solid rgba(24,210,195,0.35); }
.acct-pill.free { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border-strong); }
.acct-btn {
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.acct-btn.upgrade { background: linear-gradient(180deg, var(--accent) 0%, #0FA89B 100%); color: var(--on-accent); border-color: rgba(255,255,255,0.12); }

/* --- Collapsible stats blocks (all form factors; state in localStorage) ---- */
.stats-title { cursor: pointer; user-select: none; }
.stats-chev {
  display: inline-block; margin-right: 6px; font-size: 10px;
  color: var(--muted); transition: transform 0.15s ease;
}
.stats-block.collapsed .stats-chev { transform: rotate(-90deg); }
.stats-block.collapsed .stats-top,
.stats-block.collapsed .stat-cat-row,
.stats-block.collapsed .stats-ev { display: none; }

/* --- Mobile card-picker sheet ---------------------------------------------- */
#card-picker-modal { position: fixed; inset: 0; z-index: 1100; }
.picker-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 9, 14, 0.72); backdrop-filter: blur(2px);
}
.picker-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--panel); border-top: 1px solid var(--border-strong);
  border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  max-height: 72vh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
}
.picker-head {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 2px 10px;
}
#picker-title { font-weight: 600; color: var(--text-bright); flex: 1; font-size: 14px; }
#picker-clear-btn {
  padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid rgba(239, 86, 102, 0.35); border-radius: var(--radius-sm);
}
#picker-close-btn {
  width: 32px; height: 32px; font-size: 14px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
#picker-grid-host #card-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* --- Mobile reflow ----------------------------------------------------------
   Single column: table scales to width, panels stack, sidebar panels become
   full-width sections (study card grid is replaced by the picker sheet). */
@media (max-width: 860px) {
  html, body { height: auto; }
  body { min-height: 100vh; }
  main { display: block; min-height: 0; }
  #table-area { overflow: visible; padding: 10px; }
  #table-wrap { border-radius: 8px; }
  #table-svg { width: 100%; height: auto; display: block; }

  /* study card grid lives in the picker sheet on mobile — never as a sidebar
     (also overrides the trainer-pick sidebar swap) */
  #card-grid-panel,
  body.trainer-mode.trainer-pick #card-grid-panel { display: none; }

  body.trainer-mode #trainer-stats-panel,
  body.trainer-mode.trainer-pick #trainer-stats-panel {
    display: flex; border-left: none; border-top: 1px solid var(--border);
    padding: 0 10px 10px; overflow: visible;
  }

  .panels { grid-template-columns: 1fr; height: auto; }
  .panel { overflow: visible; }
  /* bet curve: flex-grow collapses in an auto-height parent — pin a height */
  #recommendation { overflow: visible; }
  #recommendation .bet-curve { flex: none; height: 132px; }

  #review-panel { flex-direction: column; align-items: stretch; gap: 10px; }

  /* top bar: tighter, packs into rows */
  #top-bar { gap: 8px; padding: 8px 10px; }
  .top-bar-spacer { display: none; }
  .top-bar-item input[type="number"] { width: 60px; }
  .acct-email { max-width: 120px; }
  #account-chip { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .acct-email { display: none; }
  #top-bar { gap: 6px; }
  .brand { margin-right: 0; }
}

/* --- Landing page (signed-out gate, full-page) ------------------------------
   Brand rules: monochrome-first; teal is scarce — the price, the badge, and
   the exploitability number carry it. Everything else stays neutral. */
#login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); overflow-y: auto;
}
.landing { max-width: 960px; margin: 0 auto; padding: 0 22px 40px; }
.l-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0 6px;
}
.l-top .gate-brand { font-size: 18px; }
.l-top-cta {
  padding: 7px 16px; font-size: 13px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.l-top-cta:hover { background: var(--panel-3); }
.l-kicker {
  margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em;
}
.l-hero { padding: 64px 0 26px; max-width: 780px; }
.l-hero h1 {
  margin: 0 0 16px; font-size: clamp(30px, 5.4vw, 46px); line-height: 1.08;
  font-weight: 700; color: var(--text-bright); letter-spacing: -0.5px;
}
.l-sub { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 640px; }
.l-hero .gate-google { display: inline-flex; padding: 11px 22px; }
.l-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.l-note s { opacity: 0.75; }
.l-price { color: var(--accent); font-weight: 700; }
.l-hero #dev-login-row { margin-top: 14px; max-width: 380px; }

.l-section { padding: 46px 0 8px; border-top: 1px solid var(--border); margin-top: 38px; }
.l-section h2 {
  margin: 0 0 14px; font-size: clamp(21px, 3.2vw, 28px); font-weight: 700;
  color: var(--text-bright); letter-spacing: -0.3px;
}
.l-body { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--text); max-width: 700px; }
.l-body em { font-style: italic; color: var(--text-bright); }

.l-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.l-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px;
}
.l-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--text-bright); }
.l-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }

.l-stat {
  margin-top: 22px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; max-width: 520px;
}
.l-stat-num {
  font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--accent);
  line-height: 1;
}
.l-stat-unit { font-size: 15px; color: var(--muted); margin-left: 8px; font-weight: 500; }
.l-stat-cap {
  margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.l-stat-note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text); }

.l-pricing { padding-bottom: 30px; }
.l-price-card {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 26px 28px; max-width: 460px;
}
.l-badge {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(24, 210, 195, 0.35);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.l-price-row { display: flex; align-items: baseline; gap: 10px; }
.l-price-row s { font-size: 20px; color: var(--muted); }
.l-price-big { font-size: 44px; font-weight: 700; color: var(--text-bright); }
.l-price-per { font-size: 15px; color: var(--muted); }
.l-price-note { margin: 8px 0 14px; font-size: 13px; color: var(--text); line-height: 1.5; }
.l-list { margin: 0 0 18px; padding-left: 18px; font-size: 14px; line-height: 1.9; color: var(--text); }
.l-pricing .gate-primary { width: 100%; }
.l-fine { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

.l-foot {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}

@media (max-width: 720px) {
  .l-hero { padding-top: 40px; }
  .l-cards { grid-template-columns: 1fr; }
  .l-section { padding-top: 34px; margin-top: 28px; }
}