/* Finn Tech — dark hyperbot-aesthetic theme */

/* Vendored variable Inter (latin) — CSP is self-only, no font CDNs. */
@font-face {
  font-family: 'InterVar';
  src: url('/static/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0c12;
  --bg-elev: #131822;
  --bg-elev-2: #1a2030;
  --border: #1d2330;
  --border-strong: #2a3145;
  --text: #e8ecf2;
  --text-muted: #7a8290;
  --accent: #ff8c42;
  --accent-dim: #cc6e30;
  --pos: #4ade80;
  --neg: #f87171;
  --pending: #facc15;
  --info: #60a5fa;
  --rb-hit: #0f9d58;
  --rb-miss: #d23f3f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* Card depth system — one shadow + sheen vocabulary for every surface. */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 45%);
  --topbar-h: 56px;   /* slim sticky header height — sticky offsets key off this */
  --sidebar-w: 232px; /* fixed sidebar width — main column offsets by this */
  --main-pad: 24px;   /* main horizontal padding — phone tier overrides to 10px */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'InterVar', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  /* keep money/stat columns from reflow-jittering as values change width */
  font-variant-numeric: tabular-nums;
}
body {
  /* Faint accent glow top-right + cool counter-glow top-left over the base —
     gives the page an ambient depth the old flat fill didn't have. */
  background:
    radial-gradient(900px 420px at 85% -120px, rgba(255, 140, 66, 0.07), transparent 60%),
    radial-gradient(700px 380px at 0% -100px, rgba(96, 165, 250, 0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-track { background: transparent; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

/* Keyboard users can jump past the topbar nav. Visually hidden until focused. */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus-visible {
  left: 12px; top: 12px; z-index: 100;
  background: var(--bg-elev-2); color: var(--text);
  padding: 8px 14px; border-radius: 6px;
  outline: 2px solid var(--accent);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-elev);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--text-muted);
}

pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  font-size: 12px;
  color: var(--text-muted);
}
/* raw-JSON disclosure blocks shouldn't take over the page */
details pre { max-height: 360px; overflow: auto; }

main {
  /* width:100% matters: main is a flex item in .main-col, and the auto side
     margins would otherwise cancel align-items:stretch and shrink-to-fit. */
  width: 100%;
  max-width: 1280px;
  margin: 24px auto 80px;
  padding: 0 24px;
}

/* ── App layout — fixed left sidebar + main column ───────────────────────── */

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 18px 12px 16px;
  background: linear-gradient(180deg, #10131c 0%, #0b0d14 100%);
  border-right: 1px solid var(--border);
  z-index: 20;
}
.sidebar::after {
  /* signature accent hairline fading down the sidebar edge */
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -1px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,140,66,0.5), rgba(255,140,66,0.07) 35%, transparent 70%);
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 2px 10px 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Monogram tile — gradient "FT" badge with a soft glow + sheen sweep. */
.brand-mark {
  flex: 0 0 auto;
  display: inline-flex;
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 2px 10px rgba(255, 122, 31, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.brand-mark svg { display: block; }
/* Diagonal sheen that sweeps across the tile on hover. */
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.6s ease;
}
.brand:hover .brand-mark::after { transform: translateX(130%); }
.brand:hover .brand-mark {
  box-shadow: 0 2px 16px rgba(255, 122, 31, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Two-tone wordmark — "Finn" in text colour, "Tech" in the accent. */
.brand-word {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.brand-word .bw-1 { color: var(--text); }
.brand-word .bw-2 {
  background: linear-gradient(90deg, #ffb066, #ff7a1f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.nav-ico { flex: 0 0 auto; opacity: 0.7; }

.navlink:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

.navlink.active {
  background: rgba(255, 140, 66, 0.12);
  color: var(--accent);
}
.navlink.active::before {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent);
}
.navlink.active .nav-ico { opacity: 1; }

.sidebar-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.main-col {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-col footer { margin-top: auto; }

/* Slim glassy header above the content — sticky offsets key off --topbar-h. */
.topbar {
  background: rgba(12, 14, 20, 0.72);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.topbar::after {
  /* signature accent hairline along the bottom of the bar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,140,66,0.55), rgba(255,140,66,0.08) 40%, transparent 75%);
  pointer-events: none;
}

/* Sidebar collapse toggle — sits at the left edge of the topbar; state lives
   on <html>.nav-collapsed (set pre-paint from localStorage to avoid FOUC). */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-right: auto;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-toggle:hover { color: var(--text); background: var(--bg-elev-2); }
.sidebar-toggle:focus { outline: none; }
.sidebar-toggle:focus-visible { outline: 2px solid var(--accent); }

html.nav-collapsed .sidebar { display: none; }
html.nav-collapsed .main-col { margin-left: 0; }

/* ── Login page ───────────────────────────────────────────────────────── */
.login-body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}
.login-wrap {
  margin: auto;
  width: 100%;
  max-width: 360px;
  padding: 24px;
}
.login-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.login-brand {
  justify-content: center;
  gap: 13px;
  padding: 0 0 4px;
  margin: 0 0 4px;
  border-bottom: none;
}
.login-brand .brand-word { font-size: 27px; }
.brand-mark-lg { border-radius: 13px; }
.login-sub {
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 4px;
  font-size: 14px;
}
.login-error {
  color: var(--neg);
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  margin: 0;
  font-size: 13px;
}
.login-input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 11px 14px;
  font-size: 15px;
}
.login-input:focus {
  outline: none;
  border-color: var(--accent);
}
.login-btn {
  background: var(--accent);
  color: #1a1208;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.login-btn:hover { filter: brightness(1.05); }
.login-btn:focus { outline: none; }
/* button bg is solid accent — accent ring would vanish, so ring in text colour */
.login-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.login-public {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
}

.profile-search {
  margin-left: 12px;
  display: flex;
  align-items: center;
  position: relative;
}

/* Typeahead dropdown — anchored under the search input. */
.ps-suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 200;
}
.ps-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.ps-opt:hover, .ps-active {
  background: rgba(255, 140, 66, 0.14);
}
.ps-name { color: var(--text); font-weight: 500; }
.ps-active .ps-name { color: var(--accent); }
.ps-team {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  flex: none;
}

.profile-search input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 12px;
  font-size: 13px;
  width: 200px;
  outline: none;
  transition: border-color 0.1s, width 0.2s;
}

.profile-search input::placeholder { color: var(--text-muted); }
.profile-search input:focus { border-color: var(--accent); width: 240px; }

footer {
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Hero / KPI tiles ─────────────────────────────────────────────────────── */

.hero, .kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 24px;
}

/* Dashboard hero v2 — one dominant P&L card with sparkline + compact stats. */
.hero-v2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.hero-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kpi-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  padding-bottom: 64px; /* room for the sparkline pinned to the bottom edge */
}
.kpi-value-xl { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.hero-spark {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 58px;
  display: block;
  pointer-events: none;
}
.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.spark-fill { fill: rgba(255, 140, 66, 0.10); }
.kpi-hero.is-pos .spark-line { stroke: var(--pos); }
.kpi-hero.is-pos .spark-fill { fill: rgba(74, 222, 128, 0.10); }
.kpi-hero.is-neg .spark-line { stroke: var(--neg); }
.kpi-hero.is-neg .spark-fill { fill: rgba(248, 113, 113, 0.10); }

.guest-banner {
  background: rgba(255, 140, 66, 0.12);
  border: 1px solid rgba(255, 140, 66, 0.3);
  border-left: 3px solid var(--accent);
  color: var(--accent); font-size: 13px; font-weight: 500;
  border-radius: 8px; padding: 9px 14px; margin-bottom: 16px;
}

.live-banner {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  text-decoration: none; color: var(--text); font-size: 14px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 11px 16px; margin-bottom: 18px;
}
.live-banner.is-live { border-left-color: var(--pos); }
.live-banner .lb-sep { color: var(--text-muted); }
.live-banner .lb-go { margin-left: auto; color: var(--accent); font-weight: 600; }
.live-banner:hover { border-color: var(--border-strong); }
.live-banner .lb-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pos);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: lbpulse 1.6s infinite;
}
@keyframes lbpulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
/* Skeleton shown (space reserved) while /api/live loads, but only when the
   banner appeared on the previous page view — avoids CLS in both directions. */
.live-banner.lb-skel {
  min-height: 45px;
  background: linear-gradient(90deg, var(--bg-elev) 25%, var(--bg-elev-2) 50%, var(--bg-elev) 75%);
  background-size: 200% 100%;
  animation: lbshimmer 1.4s infinite;
  pointer-events: none;
}
@keyframes lbshimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.kpi {
  background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev) 70%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0.45;
}
.kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

.kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.kpi-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}
.u-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}

.pos { color: var(--pos) !important; }
.neg { color: var(--neg) !important; }
.muted { color: var(--text-muted); }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lbl {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.chip {
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.chip:hover { color: var(--text); border-color: var(--border-strong); }

.chip.active {
  background: rgba(255, 140, 66, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Bets table ───────────────────────────────────────────────────────────── */

table.bets {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  /* no overflow:hidden here — it would turn the table into the sticky
     containing block and shove the sticky thead down over the first rows */
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
table.bets thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
table.bets thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
table.bets tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
table.bets tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }

/* Resizable columns — a grab handle pinned to each header's right edge. The
   width is applied inline by JS (persisted to localStorage). */
table.bets thead th { position: relative; }
.col-resize {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none; z-index: 3;
}
.col-resize::after {
  content: ""; position: absolute; top: 25%; right: 2px; height: 50%;
  border-right: 2px solid transparent;
}
table.bets thead th:hover .col-resize::after { border-right-color: var(--border-strong); }
body.col-resizing { cursor: col-resize; user-select: none; }

table.bets thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
  position: sticky;
  /* must clear the sticky topbar or the header row hides behind it on scroll */
  top: var(--topbar-h);
  z-index: 2;
}

table.bets thead th.num { text-align: right; }

table.bets thead th.sortable a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
table.bets thead th.sortable:hover a { color: var(--text); }
table.bets thead th.sorted a { color: var(--accent); }
table.bets thead th { white-space: nowrap; }

table.bets td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

table.bets tbody tr:last-child td { border-bottom: none; }
table.bets tbody tr:hover { background: var(--bg-elev-2); }
table.bets tbody tr[data-href] { cursor: pointer; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Split-ownership tag — shows MY % on a co-owned bet's stake cell. Muted so it
   reads as a footnote next to the (already-scaled) my-share figure. */
.split-tag {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: help;
}

/* Dashboard filter bar — one labeled native dropdown per dimension. */
.filter-bar {
  justify-content: flex-start;
  gap: 8px 10px;
  align-items: flex-end;
}
.filter-field { display: flex; flex-direction: column; gap: 3px; }
.filter-field .lbl { margin-right: 0; font-size: 10px; }
.filter-field-sort { margin-left: auto; }
.filter-select {
  background-color: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 26px 5px 9px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  /* Native arrow replaced with a small theme-coloured chevron. background-size
     pins it small (without it the SVG scales up to the field height). */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%237a8290' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
  transition: border-color 0.12s ease;
}
.filter-select:hover { border-color: var(--border-strong); }
.filter-select:focus { outline: none; border-color: var(--accent); }
.filter-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sort control: chips on desktop, native dropdown on mobile. */
.sort-select {
  display: none;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
}

.bet-link {
  color: var(--text);
  font-weight: 500;
}
.bet-link:hover { color: var(--accent); }

/* Left accent stripe + status tint per row. The first cell carries a 3px inset
   border-left via box-shadow (border-collapse:separate clips a real border at
   the rounded table corners, box-shadow doesn't). Zebra striping is applied to
   even rows, then the status tint layers on top so won/lost/pending still read. */
table.bets tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; }
table.bets tbody tr.row-won  td:first-child { box-shadow: inset 3px 0 0 var(--pos); }
table.bets tbody tr.row-lost td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
table.bets tbody tr.row-active td:first-child { box-shadow: inset 3px 0 0 var(--pending); }
table.bets tbody tr.row-cancelled td:first-child { box-shadow: inset 3px 0 0 var(--border-strong); }

table.bets tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.row-won { background: rgba(74, 222, 128, 0.045); }
.row-lost { background: rgba(248, 113, 113, 0.045); }
.row-active { background: rgba(250, 204, 21, 0.03); }
table.bets tbody tr:hover { background: var(--bg-elev-2); }

/* "5 legs" chip next to the match name — a cheap density signal without a live
   per-leg fetch (the dashboard list view can't afford one per row). */
.leg-chip {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: 4px;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}

.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.tag.track {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}

/* Player names link to their profile but keep the surrounding text colour
 * (so won/lost/void leg colouring still shows); only reveal the link on hover. */
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--accent); text-decoration: underline; }

.col-round { width: 68px; }
.col-date { width: 64px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-bet { min-width: 200px; }
.cell-match { white-space: nowrap; overflow: hidden; }
/* Pills wrap as a safety net if the column gets squeezed, instead of clipping. */
.cell-match .bet-link-pill { flex-wrap: wrap; max-width: 100%; }
.rnd-tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent);
  background: rgba(255,140,66,0.12); padding: 2px 7px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status.won { background: rgba(74, 222, 128, 0.12); color: var(--pos); }
.status.lost { background: rgba(248, 113, 113, 0.12); color: var(--neg); }
.status.pending { background: rgba(250, 204, 21, 0.12); color: var(--pending); }
.status.muted { background: var(--bg-elev-2); color: var(--text-muted); }

.empty {
  text-align: center;
  padding: 48px 40px;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.empty .empty-icon { font-size: 32px; opacity: 0.5; display: block; margin-bottom: 10px; }
/* Error pages centre vertically so a bare 404 doesn't hug the topbar. */
.err-page { min-height: 50vh; display: grid; place-content: center; gap: 2px; }
.err-page .empty-sub { margin-top: 6px; }
.empty .empty-title { color: var(--text); font-weight: 600; font-size: 15px; display: block; margin-bottom: 4px; }
.empty .empty-sub { font-size: 13px; }

/* ── Bet detail page ──────────────────────────────────────────────────────── */

.back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.back:hover { color: var(--text); }

.bet-header h1 {
  font-size: 22px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 24px;
}

.meta-row strong { color: var(--text); font-weight: 500; }

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 60%) var(--bg-elev-2);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}

.btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
.btn:active { transform: translateY(0); }

.btn-won { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); color: var(--pos); }
.btn-won:hover { background: rgba(74, 222, 128, 0.2); border-color: var(--pos); color: var(--pos); }

.btn-lost { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: var(--neg); }
.btn-lost:hover { background: rgba(248, 113, 113, 0.2); border-color: var(--neg); color: var(--neg); }

.btn-pending { background: rgba(250, 204, 21, 0.12); border-color: rgba(250, 204, 21, 0.3); color: var(--pending); }
.btn-pending:hover { background: rgba(250, 204, 21, 0.2); border-color: var(--pending); color: var(--pending); }

/* Destructive bulk action — stronger red than .btn-lost so it reads as
   "danger", not "mark lost". */
.btn-danger { background: rgba(248, 113, 113, 0.18); border-color: var(--neg); color: var(--neg); }
.btn-danger:hover { background: var(--neg); border-color: var(--neg); color: #0a0c12; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ── Dashboard bulk select + inline stake/odds editor ─────────────────────── */
.col-sel { width: 30px; }
.col-sel input {
  accent-color: var(--accent);
  width: 15px; height: 15px;
  cursor: pointer;
  vertical-align: middle;
}
.col-act { width: 38px; text-align: center; }
.row-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.row-edit-btn:hover { color: var(--accent); background: var(--bg-elev-2); border-color: var(--border); }
.row-edit-btn:focus { outline: none; }
.row-edit-btn:focus-visible { outline: 2px solid var(--accent); }

.ie-row td { background: var(--bg-elev); }
.ie-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 2px 0; }
.ie-title { font-weight: 600; font-size: 13px; }
.ie-form label {
  display: inline-flex; gap: 7px; align-items: center;
  color: var(--text-muted); font-size: 12px;
}
.ie-input {
  width: 90px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 13px;
}
.ie-input:focus { outline: none; border-color: var(--accent); }

.bulk-bar {
  display: none;
  position: sticky;
  bottom: 14px;
  z-index: 8;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 12px;
  background: rgba(16, 19, 28, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bulk-bar.open { display: flex; flex-wrap: wrap; }
.bulk-count { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.bulk-count strong { color: var(--text); }
.bulk-bar .btn-danger { margin-left: auto; }

.btn-remove { background: var(--bg-elev-2); }

.btn-accent { background: rgba(255, 140, 66, 0.12); border-color: rgba(255, 140, 66, 0.3); color: var(--accent); }
.btn-accent:hover { background: rgba(255, 140, 66, 0.2); border-color: var(--accent); color: var(--accent); }
.btn:focus { outline: none; }
.btn:focus-visible { outline: 2px solid var(--accent); }

/* ── Partner payouts panel (on /summary) — flat money paid to a profit-share
   partner, deducted from Net P&L. Matches the dark card theme. ── */
.payout-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.payout-note { margin: 0 0 12px; font-size: 13px; }
.payout-table { width: 100%; border-collapse: collapse; }
.payout-table td { padding: 6px 8px; vertical-align: middle; }
.payout-name { font-weight: 600; }
.payout-form { display: flex; gap: 8px; align-items: center; }
.payout-add { margin-top: 12px; }
.payout-input {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  width: 130px;
}
.payout-input:focus { outline: none; border-color: var(--accent); }
.payout-input:focus-visible { outline: 2px solid var(--accent); }
.payout-input::placeholder { color: var(--text-muted); }
.payout-group-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 6px;
}
.payout-group-label:first-of-type { margin-top: 0; }
.payout-meta { color: var(--text-muted); font-size: 12px; }

/* ── Status editor — styled to echo the /live badge pills, not generic buttons ──
   The ✏️ sits inline with the WON/LOST/PENDING badge; clicking it reveals matching
   badge-shaped pills (same colours/shape/weight as .badge.won/.lost/.pending). */
.status-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.6;
  vertical-align: middle;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.status-edit-btn:hover { opacity: 1; color: var(--accent); background: rgba(255,140,66,0.12); }
.se-pencil { display: block; }
.status-edit-btn:focus { outline: none; }
.status-edit-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* collapsible pill row — hidden until ✏️ clicked */
.status-editor {
  display: none;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin: 14px 0 0;
}
.status-editor.open { display: flex; }
.status-editor-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.status-editor-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted); margin-right: 2px;
}

/* badge-pill buttons (override .btn chunkiness to match .badge geometry) */
.status-editor .btn,
.note-form .btn-note {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  padding: 6px 11px; border-radius: 6px; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-editor .btn-won { background: rgba(74,222,128,0.16); color: var(--pos); }
.status-editor .btn-won:hover { background: rgba(74,222,128,0.28); border-color: var(--pos); transform: translateY(-1px); }
.status-editor .btn-lost { background: rgba(248,113,113,0.16); color: var(--neg); }
.status-editor .btn-lost:hover { background: rgba(248,113,113,0.28); border-color: var(--neg); transform: translateY(-1px); }
.status-editor .btn-pending { background: rgba(250,204,21,0.16); color: var(--pending); }
.status-editor .btn-pending:hover { background: rgba(250,204,21,0.28); border-color: var(--pending); transform: translateY(-1px); }
.note-form .btn-note { background: rgba(255,140,66,0.16); color: var(--accent); }
.note-form .btn-note:hover { background: rgba(255,140,66,0.28); border-color: var(--accent); transform: translateY(-1px); }

/* Stake/odds edit row — sits at the top of the editor, own line + divider. */
.status-editor .edit-form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.edit-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.edit-input {
  width: 92px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.edit-input::-webkit-outer-spin-button,
.edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.edit-input::placeholder { color: var(--text-muted); }
.edit-input:focus { outline: none; border-color: var(--accent); }
.status-editor .btn-edit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  padding: 6px 11px; border-radius: 6px; text-transform: uppercase;
  border: 1px solid rgba(255,140,66,0.3);
  background: rgba(255,140,66,0.16); color: var(--accent);
}
.status-editor .btn-edit:hover {
  background: rgba(255,140,66,0.28); border-color: var(--accent); transform: translateY(-1px);
}

/* Danger zone — destructive remove, separated below the note form. */
.status-editor .danger-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.danger-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.status-editor .btn-remove {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  padding: 6px 11px; border-radius: 6px; text-transform: uppercase;
  border: 1px solid rgba(248,113,113,0.3);
  background: rgba(248,113,113,0.12); color: var(--neg);
}
.status-editor .btn-remove:hover {
  background: rgba(248,113,113,0.22); border-color: var(--neg); transform: translateY(-1px);
}

/* ✓ / ✗ / clock glyphs inside the pills — mirror the /live rb-hit/miss/clock look */
.status-editor .btn { display: inline-flex; align-items: center; gap: 5px; }
.se-ico { font-size: 12px; line-height: 1; }
.se-clock { display: block; }

.btn-note { background: rgba(255, 140, 66, 0.10); border-color: rgba(255, 140, 66, 0.3); color: var(--accent); }
.btn-note:hover { background: rgba(255, 140, 66, 0.18); border-color: var(--accent); color: var(--accent); }
.btn-undo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 6px 11px;
  background: rgba(255, 140, 66, 0.10); border-color: rgba(255, 140, 66, 0.3); color: var(--accent);
}
.btn-undo:hover { background: rgba(255, 140, 66, 0.18); border-color: var(--accent); color: var(--accent); }

.action-hint {
  font-size: 11px;
  margin-left: 8px;
  font-style: italic;
}

/* button.btn (form submits) needs the resets <a>.btn got for free */
button.btn { cursor: pointer; font-family: inherit; line-height: 1.2; }

.inline-form { display: inline; margin: 0; }

.trash-restore { float: right; }
.trash-restore .btn { padding: 4px 12px; font-size: 12px; }

.action-error {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--neg);
  font-size: 13px;
}

/* Statement-import provenance card on /bet/<id> — read-only notice. */
.import-card {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.import-card code { color: var(--text); }

/* Service editor on an imported bet's detail page — mirrors the Import page's
   per-bet service dropdown so a tag can be fixed without leaving the bet. */
.svc-edit-form {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-edit-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.svc-edit-form select {
  /* compact inline control — without this it stretches the full content width */
  flex: 0 1 auto;
  width: auto;
  max-width: 220px;
}

/* Odds re-prompt banner — shown after add/remove leg (structural change). */
.odds-reprompt {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(250, 204, 21, 0.10);
  border: 1px solid rgba(250, 204, 21, 0.35);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.odds-reprompt-label { font-size: 12.5px; color: var(--pending); font-weight: 600; }
.odds-reprompt-form { display: flex; gap: 8px; align-items: center; }

/* Leg editor — sits inside #status-editor, full-width, below the note form. */
.leg-editor {
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leg-editor-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.le-editor-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.le-editor-head .inline-form { margin: 0; }
.le-move { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.le-arrow {
  padding: 4px 8px; font-size: 12px; line-height: 1;
  color: var(--text-muted);
}
.le-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--border-strong); }
.le-arrow:disabled { opacity: 0.3; cursor: default; }
.le-leg {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin: 0;
}
.le-head { display: flex; gap: 9px; align-items: center; }
.le-leg-num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-muted);
  min-width: 40px; flex: 0 0 auto;
}
.le-sels { display: flex; flex-direction: column; gap: 6px; }
/* align to the bottom so the player dropdown (which has a team-toggle stacked
   above it) lines up with the market dropdown and the void/✗ buttons. */
.le-sel-row { display: flex; gap: 7px; align-items: flex-end; }
.le-voided { opacity: 0.55; }
.le-voided .le-player, .le-voided .le-market { text-decoration: line-through; }
.le-hidden-form { display: none; }
.le-match { flex: 1 1 auto; min-width: 0; }
.le-legodds { flex: 0 0 72px; text-align: center; }
.le-player-cell { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.le-player-cell .le-player { flex: 1 1 auto; }
.le-market { flex: 1 1 60%; min-width: 0; }

/* team-first filter: small pill toggle above the player dropdown */
.le-team-pick { display: flex; gap: 5px; }
.le-team-btn {
  flex: 0 1 auto; min-width: 0; padding: 4px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 5px; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.le-team-btn:hover { color: var(--text); border-color: var(--accent); }
.le-team-btn.active {
  background: rgba(255, 140, 66, 0.12); border-color: rgba(255, 140, 66, 0.3); color: var(--accent);
}
.le-team-btn:focus { outline: none; }
.le-team-btn:focus-visible { outline: 2px solid var(--accent); }

/* combo = roster/market dropdown stacked over a free-text fallback input.
   The select shows by default; the text input only when "Other" is picked.
   align-items:stretch keeps both controls the column's width, but each control
   is flex:0 0 auto so it keeps its own intrinsic height (no vertical stretch). */
.le-combo { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.le-combo .le-select,
.le-combo .le-combo-text { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.le-combo .le-combo-text { display: none; }
.le-combo.le-combo-other .le-select { display: none; }
.le-combo.le-combo-other .le-combo-text { display: block; }
select.le-select {
  appearance: none; -webkit-appearance: none;
  height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8a94' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 26px; cursor: pointer;
}
select.le-select option { background: var(--bg-elev); color: var(--text); }
.le-leg-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.le-x { flex: 0 0 auto; padding: 6px 10px; }

/* void / unvoid / add buttons reuse the badge-pill button pattern */
.status-editor .btn-void,
.status-editor .btn-unvoid,
.status-editor .btn-add {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  padding: 6px 11px; border-radius: 6px; text-transform: uppercase;
}
.status-editor .btn-void {
  border: 1px solid rgba(250,204,21,0.3);
  background: rgba(250,204,21,0.12); color: var(--pending);
}
.status-editor .btn-void:hover {
  background: rgba(250,204,21,0.22); border-color: var(--pending); transform: translateY(-1px);
}
.status-editor .btn-unvoid {
  border: 1px solid rgba(74,222,128,0.3);
  background: rgba(74,222,128,0.12); color: var(--pos);
}
.status-editor .btn-unvoid:hover {
  background: rgba(74,222,128,0.22); border-color: var(--pos); transform: translateY(-1px);
}
.status-editor .btn-add {
  border: 1px solid rgba(255,140,66,0.3);
  background: rgba(255,140,66,0.12); color: var(--accent);
}
.status-editor .btn-add:hover {
  background: rgba(255,140,66,0.22); border-color: var(--accent); transform: translateY(-1px);
}

.note-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
}
/* note form sits on its own line below the status pills, with a divider */
.status-editor .note-form {
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.note-input {
  flex: 1 1 280px;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.note-input:focus { outline: none; border-color: var(--accent); }
.note-input::placeholder { color: var(--text-muted); }

.notes h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 16px 0 12px;
}

.notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notes-list li {
  background: var(--bg-elev);
  border-left: 2px solid var(--accent);
  padding: 8px 14px;
  margin-bottom: 6px;
  border-radius: 0 6px 6px 0;
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.note-ts {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.note-text {
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
  flex: 1 1 auto;
}

.note-del-form {
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.note-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.note-del:hover {
  opacity: 1;
  color: var(--neg);
  background: rgba(248,113,113,0.14);
}

.note-del:focus { outline: none; }
.note-del:focus-visible { outline: 2px solid var(--neg); outline-offset: 1px; }

.legs h2, .panel h2, .chart-card h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 12px;
}

.leg {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.leg-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.leg-num {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.leg-match { font-weight: 500; }
.leg-odds { color: var(--accent); font-variant-numeric: tabular-nums; }

.sgm-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.sgm-list li { margin-bottom: 4px; }
.sgm-list strong { color: var(--text); font-weight: 500; }

.raw-json { margin-top: 32px; }
.raw-json summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
}

/* ── Summary page ─────────────────────────────────────────────────────────── */

.chart-card, .panel {
  background: var(--sheen), var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
/* dense breakdown tables: hover highlight to track a row across columns */
.panel tbody tr:hover { background: var(--bg-elev-2); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
/* min-width:auto on grid items lets a wide breakdown table blow the track
   past the viewport on phones — force tracks to respect the container. */
.grid-2 > * { min-width: 0; }

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}

table.breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.breakdown th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

/* Header cells over numeric columns must right-align to sit above their data. */
table.breakdown th.num { text-align: right; }

table.breakdown td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

table.breakdown tr:last-child td { border-bottom: none; }

/* Keep stat columns narrow so values cluster near the headers instead of
 * spreading across the table; the first (label) column absorbs the slack. */
table.breakdown th.num, table.breakdown td.num { width: 56px; white-space: nowrap; }
table.breakdown th:first-child, table.breakdown td:first-child { width: auto; }

/* ── Player chooser (ambiguous profile lookup) ────────────────────────────── */
.chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.chooser-name { white-space: nowrap; }
.chooser-card {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 16px;
}
.chooser-card:hover { border-color: var(--border-strong); }
.chooser-name { font-weight: 600; color: var(--text); }
.chooser-team { font-size: 13px; }
.chooser-go { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13px; }

.panel p {
  margin: 6px 0;
}


/* ── Mobile responsiveness ────────────────────────────────────────────────
 * Phone-friendly rules — kicks in at 720px viewport width. Tailscale users
 * frequently pull this up from their phone, so the layout has to actually
 * work at <400px.
 */
@media (max-width: 720px) {
  main {
    padding: 0 12px;
    margin: 12px auto 60px;
  }

  /* Sidebar collapses to a horizontal scrolling nav bar across the top. */
  .layout { flex-direction: column; }
  .sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar::after { display: none; }
  .brand {
    padding: 0 8px 0 0;
    margin: 0;
    border-bottom: none;
    gap: 8px;
    flex-shrink: 0;
  }
  .brand-word { font-size: 16px; }
  .brand-mark svg { width: 26px; height: 26px; }
  .side-nav { flex-direction: row; flex-wrap: nowrap; gap: 2px; }
  .navlink {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .navlink.active::before { display: none; }
  .nav-ico { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border-top: none; }
  .main-col { margin-left: 0; }

  /* On phones the sidebar IS the top nav — the collapse toggle is meaningless
     and hiding the nav would strand the user, so neutralise both. */
  .sidebar-toggle { display: none; }
  html.nav-collapsed .sidebar { display: flex; }

  /* Header — search becomes a full-width row; the live-head (with Refresh)
     is the sticky bar on phones, so let the header scroll away. */
  .topbar {
    position: static;
    min-height: 0;
    padding: 10px 12px;
  }
  .profile-search {
    display: flex;
    width: 100%;
    margin-left: 0;
  }
  .profile-search input,
  .profile-search input:focus {
    width: 100%;
    box-sizing: border-box;
  }

  /* Hero KPI tiles — single column on phones, slightly tighter */
  .hero, .kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }
  .hero-v2 { grid-template-columns: 1fr; }
  .kpi-value-xl { font-size: 30px; }
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 18px; }
  .kpi-label { font-size: 10px; }

  /* Toolbar — stack chip rows vertically */
  .toolbar {
    flex-direction: column;
    gap: 10px;
  }
  /* The dashboard filter bar shares .toolbar; column + its align-items:flex-end
     would right-stack every dropdown. Keep it a wrapping row of compact fields. */
  .filter-bar { flex-direction: row; flex-wrap: wrap; }
  .filter-field-sort { margin-left: 0; }
  .filters { gap: 4px; }
  .chip { padding: 4px 8px; font-size: 11px; }
  /* Sort: hide the chip row, show the compact native dropdown instead. */
  .sort-chip { display: none; }
  .sort-select { display: inline-block; }

  /* Bets table → card layout on phones. Horizontal scroll hid everything but
   * # and Match (the user only saw two columns). Instead each row becomes a
   * self-contained card: match name as the header, the rest as labelled
   * key/value rows via the data-label attributes on each <td>. */
  table.bets,
  table.bets tbody,
  table.bets tr,
  table.bets td {
    display: block;
    width: 100%;
  }
  table.bets thead { display: none; }
  table.bets tr {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  table.bets tbody tr:hover { background: var(--bg-elev); }
  table.bets td {
    border: none;
    padding: 3px 0;
    text-align: right;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  /* The labelled cells get their column name on the left via data-label. */
  table.bets td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-align: left;
  }
  /* The bet # sits top-right as a small pill; the match name is the card title
   * spanning the full width with no label. */
  table.bets td.cell-id {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 0;
    width: auto;
  }
  table.bets tr { position: relative; }
  /* Card mode: pin the select checkbox + edit pencil to the card's top-left /
     bottom-right corners instead of rendering them as bare stacked blocks. */
  table.bets td.col-sel {
    position: absolute;
    top: 10px;
    left: 14px;
    width: auto;
    padding: 0;
    border: none;
  }
  table.bets tr:has(td.col-sel) td.cell-match { padding-left: 26px; }
  table.bets td.col-act {
    position: absolute;
    bottom: 8px;
    right: 10px;
    width: auto;
    padding: 0;
    border: none;
  }
  table.bets tr.ie-row td { position: static; }
  /* card mode sets tr { display:block }, which would override the [hidden]
     attribute on collapsed inline-editor rows — restate it explicitly */
  table.bets tr[hidden] { display: none; }
  .bulk-bar { bottom: 8px; }
  table.bets td.cell-match {
    justify-content: flex-start;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    padding: 0 56px 8px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  table.bets td.cell-match .bet-link { white-space: normal; }
  /* The Round cell is hidden by the .col-round rule below; suppress its row. */
  table.bets td.col-round { display: none; }
  /* Date is redundant on mobile cards (the relative "Placed" time already shows). */
  table.bets td.col-date { display: none; }

  /* Bet detail page — stack the action buttons two per row */
  .bet-header h1 { font-size: 18px; flex-direction: column; align-items: flex-start; }
  .meta-row {
    gap: 10px;
    font-size: 12px;
    flex-direction: column;
  }
  .actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .btn {
    flex: 1 0 calc(50% - 6px);
    text-align: center;
    padding: 8px;
    font-size: 12px;
  }
  .action-hint {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 4px;
    font-size: 11px;
  }

  /* Notes block — slightly tighter padding, no flex (text wraps better) */
  .notes-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 28px 8px 10px;
    position: relative;
  }
  .notes-list li .note-del-form {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  /* Breakdown tables on /summary — already 13px; just scroll if needed */
  table.breakdown { font-size: 12px; display: block; overflow-x: auto; }
  table.breakdown th, table.breakdown td { padding: 6px 6px; }

  /* Partner-payout forms — inputs + button wrap instead of pushing wide */
  .payout-form { flex-wrap: wrap; }
  .payout-input { min-width: 0; flex: 1 1 100px; max-width: 140px; }

  /* Admin: processes table scrolls inside its panel; activity-log values
     (cid=… service=…) break instead of forcing the panel past the viewport */
  .proc-table { display: block; overflow-x: auto; }
  .log-table td, .log-table th { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Live games page ──────────────────────────────────────────────────────── */
.live-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 4px 0 6px;
  /* Sticks BELOW the global topbar (which is sticky at top:0, z-index 10) — so
     stick at the topbar's height, not top:0, or cards scroll into the gap and
     show through. Full-bleed opaque background (negative margin + matching
     padding) so nothing peeks past the header band on desktop. */
  position: sticky; top: var(--topbar-h, 49px); z-index: 9;
  background: var(--bg);
  margin-left: calc(-1 * var(--main-pad, 24px));
  margin-right: calc(-1 * var(--main-pad, 24px));
  padding: 8px var(--main-pad, 24px);
}
/* Pages with a sticky table thead (the dashboard) can't also have a sticky
   title band — both stick at --topbar-h and the band covers the header row,
   making the select-all checkbox unclickable. */
.live-head.static-head {
  position: static;
  margin-left: 0; margin-right: 0;
  padding-left: 0; padding-right: 0;
}
.live-title { font-size: 30px; margin: 0 0 2px; color: var(--text); font-weight: 800; letter-spacing: -0.025em; }
.live-date { font-size: 15px; color: var(--text-muted); font-weight: 400; }
.live-controls { display: flex; align-items: center; gap: 8px; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pos); box-shadow: 0 0 8px var(--pos);
  animation: live-pulse 2s infinite;
}
.live-dot.stale { background: var(--neg); box-shadow: 0 0 8px var(--neg); animation: none; }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.live-ago { font-variant-numeric: tabular-nums; }

/* Round filter tabs — one pill per round in the fixture window. */
.round-tabs {
  display: flex; flex-wrap: nowrap; gap: 6px;
  margin: 0 0 12px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.round-tabs::-webkit-scrollbar { display: none; }
.round-tabs .round-tab { flex: 0 0 auto; }
.round-tab {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.round-tab:hover { color: var(--text); border-color: var(--border-strong); }
.round-tab.active {
  color: var(--text);
  background: var(--accent);
  border-color: var(--accent);
}

/* Empty game card (round game with no bets yet). */
.legs-empty {
  padding: 14px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* Manual refresh button — icon + label, spins while a refresh is in flight. */
.refresh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.refresh-btn:hover { border-color: var(--border-strong); color: var(--text); }
.refresh-btn:disabled { cursor: default; opacity: 0.8; }
.refresh-btn svg { display: block; }
.refresh-btn.spin svg { animation: refresh-spin 1s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }

/* Light-sweep band that wipes left→right along a progress track on a manual
   refresh — a "data refreshed" cue. Pinned over the track, clipped to it. */
.game-card .lb-sweep {
  position: absolute; inset: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none; z-index: 1;
}
.game-card .lb-sweep::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -55%;
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,0.55), rgba(255,255,255,0.0));
  animation: lb-sweep-move 1.1s ease-out forwards;
}
@keyframes lb-sweep-move { to { left: 110%; } }

.section-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); font-weight: 700; margin: 22px 0 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
  position: relative;
}
.section-h::after {
  /* short accent bar sitting on the divider */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 36px; height: 2px;
  background: var(--accent);
  opacity: 0.7;
  border-radius: 1px;
}

.banner.warn {
  background: rgba(248,113,113,0.12); border: 1px solid var(--neg);
  color: var(--text); padding: 8px 12px; border-radius: 8px; margin-bottom: 14px;
}
.banner.ok {
  background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.4);
  color: var(--text); padding: 8px 12px; border-radius: 8px; margin-bottom: 14px;
}

.live-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.live-loading { padding: 30px; text-align: center; }

.game-card {
  position: relative;
  /* Glassy top-to-bottom sheen instead of a flat fill. */
  background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev) 60%);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--border-strong);
  /* Lift off the page (depth) + a faint inner top highlight (bevel). */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.game-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Status stripe radiates a matching glow so live/scheduled read at a glance. */
.game-card.status-live {
  border-left-color: var(--pos);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.03),
              inset 12px 0 18px -16px var(--pos);
  animation: gc-live-glow 2.6s ease-in-out infinite;
}
.game-card.status-scheduled {
  border-left-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.03),
              inset 12px 0 18px -16px rgba(255, 140, 66, 0.4);
}
.game-card.status-complete { border-left-color: var(--border-strong); }
@keyframes gc-live-glow {
  0%, 100% { border-left-color: var(--pos); }
  50%      { border-left-color: #7af0a6; }
}
@media (prefers-reduced-motion: reduce) {
  .game-card.status-live { animation: none; }
}

/* Single-bet drill-down card (reuses the /live leg/bar/badge styling). Left
   accent stripe coloured by the bet's outcome, mirroring the dashboard rows. */
.bet-card { margin-top: 4px; }
.bet-card + .bet-card { margin-top: 12px; }
.bet-game-name { font-size: 14px; font-weight: 600; color: var(--text); }
.bet-card.bet-won { border-left-color: var(--pos); }
.bet-card.bet-lost { border-left-color: var(--neg); }
.bet-card.bet-active { border-left-color: var(--pending); }
.bet-card.bet-cancelled { border-left-color: var(--border-strong); }

.game-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.legs-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* AFL-app style match hero — centered title + round/date, big crests each side,
   big totals with goals.behinds underneath, a green live-clock pill in the
   middle, and a lead/venue line below. */
.score-hero {
  margin-bottom: 13px; text-align: center;
}
.hero-title {
  color: var(--text); font-weight: 800; font-size: 16px; line-height: 1.25;
}
/* Legs-progress bar sits directly under the match title — give it breathing
   room so it doesn't crowd the team names. */
.score-hero > .progress { margin-top: 12px; }
.hero-sub {
  color: var(--text-muted); font-size: 11.5px; margin-top: 3px;
  letter-spacing: 0.02em;
}
.hero-main {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: 8px; margin-top: 14px;
}
/* One team column: crest, name, big score, goals.behinds — all centered and
   stacked. The middle column holds the clock pill, vertically centered on the
   scores. */
.hero-team {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0;
}
/* White chip behind every crest — many AFL logos are dark navy/black with no
   light variant (Carlton, Brisbane wordmark, Fremantle text) and vanish on the
   dark card. A neutral light tile makes every crest legible, AFL-app style. */
.hero-crest {
  width: 56px; height: 56px; object-fit: contain;
  background: #f4f6fa; border-radius: 12px; padding: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.hero-tname {
  color: var(--text-muted); font-weight: 700; font-size: 12px; line-height: 1.2;
  letter-spacing: 0.03em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-pts {
  color: var(--text); font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.hero-pts.muted { color: var(--text-muted); }
.hero-gb {
  color: var(--text-muted); font-size: 12px; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.hero-mid {
  display: flex; align-items: center; justify-content: center;
  align-self: center; padding-top: 56px;
}
.hero-clock {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em;
}
.hero-clock.live { background: var(--pos); color: #06210f; }
.hero-clock.done { background: var(--bg-elev-2); color: var(--text-muted); }
.hero-clock.sched { background: var(--bg-elev-2); color: var(--accent); }
.hero-foot {
  color: var(--text-muted); font-size: 11.5px; margin-top: 11px;
  padding-top: 9px; border-top: 1px solid var(--border);
}

/* Quarter-by-quarter score grid, AFL-app style: ordinal label + Q1–Q4 + T
   header with the current live quarter highlighted; crest + full team name
   per row. */
.qtable {
  width: 100%; border-collapse: collapse; margin: 4px 0 14px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.qtable th, .qtable td {
  text-align: right; padding: 6px 7px; white-space: nowrap;
}
/* Quarter / total columns: fixed-width and centered so digits, single vs
   double-digit scores, and the "–" for unplayed quarters all sit in the same
   spot — the header letter lines up directly over its column. */
.qtable th.qt-q, .qtable td.qt-q { width: 34px; text-align: center; padding: 6px 4px; }
.qtable .qt-dash { color: var(--text-muted); }
.qtable thead th {
  color: var(--text-muted); font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.qtable .qt-ord {
  text-align: left; color: var(--text); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.qtable td { color: var(--text); }
/* The team cell uses the full available width; the score columns size to
   content. Logo + name sit straight in the td as a flex row. */
.qtable td.qt-team {
  display: flex; align-items: center; gap: 9px;
  text-align: left; color: var(--text); font-weight: 600; width: 100%;
}
.qtable th.qt-team { width: 100%; }
.qtable .qt-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.qtable .qt-logo {
  width: 26px; height: 26px; object-fit: contain; flex-shrink: 0;
  background: #f4f6fa; border-radius: 6px; padding: 2px;
}
/* Current quarter — accent highlight in both header and cells. */
.qtable .qt-cur { color: var(--accent); font-weight: 700; }
.qtable thead .qt-cur { color: var(--accent); }
.qtable .qt-tot { color: var(--text); font-weight: 800; }
.qtable thead .qt-tot { color: var(--text-muted); font-weight: 600; }
/* Each team row gets a single hairline underneath — same clean divider as the
   .hero-foot line above "ESS lead by" — instead of a boxed top+bottom frame. */
.qtable tbody td { border-bottom: 1px solid var(--border); }

/* Team crest — neutral, never overflows its row. Light chip behind so dark
   logos stay legible on the dark card (matches the hero crests). */
.tlogo {
  width: 22px; height: 22px; object-fit: contain; vertical-align: middle;
  flex-shrink: 0;
}
.fp-logo, .fp-opp-logo {
  background: #f4f6fa; border-radius: 5px; padding: 1px;
}

/* Last-5 form panel. */
.formpanel { margin: 2px 0 12px; }
.formpanel > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); padding: 4px 0;
}
.formpanel > summary::-webkit-details-marker { display: none; }
.formpanel > summary::before { content: "▸ "; color: var(--text-muted); }
.formpanel[open] > summary::before { content: "▾ "; }
.fp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.fp-team {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.fp-id { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.fp-logo { width: 22px; height: 22px; }
.fp-name { font-size: 12px; font-weight: 700; color: var(--text); }
.fp-pips { display: flex; gap: 4px; margin-bottom: 5px; }
.fp-pip {
  width: 20px; height: 20px; border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.fp-w, .fp-pip.fp-w { background: rgba(74,222,128,0.18); color: var(--pos); }
.fp-l, .fp-pip.fp-l { background: rgba(210,63,63,0.18); color: #f08a8a; }
.fp-pip.fp-d { background: var(--bg-elev); color: var(--text-muted); }
.fp-rec { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.fp-rows { display: flex; flex-direction: column; gap: 0; }
.fp-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  font-size: 11.5px; padding: 4px 0;
}
.fp-row + .fp-row { border-top: 1px solid var(--border); }
.fp-side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fp-side-a { flex-direction: row-reverse; text-align: right; }
.fp-rr {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.fp-vs { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-sc { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.fp-side-a .fp-sc { margin-left: 0; margin-right: auto; }
.fp-empty { color: var(--text-muted); }

.badge {
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
  letter-spacing: 0.6px; white-space: nowrap;
}
.badge.live { background: rgba(74,222,128,0.16); color: var(--pos); }
.badge.done { background: var(--bg-elev-2); color: var(--text-muted); }
.badge.sched { background: rgba(255,140,66,0.13); color: var(--accent); }
.badge.won { background: rgba(74,222,128,0.16); color: var(--pos); }
.badge.lost { background: rgba(248,113,113,0.16); color: var(--neg); }
.badge.pending { background: rgba(250,204,21,0.16); color: var(--pending); }
.badge.kind { background: var(--bg-elev-2); color: var(--text-muted); }

/* Bet-kind chip in the dashboard match cell (SGM / MULTI). */
.kind-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle;
}
.kind-chip.kind-sgm { background: rgba(255,140,66,0.13); color: var(--accent); }
.kind-chip.kind-multi { background: rgba(96,165,250,0.14); color: var(--info); }
.bet-link-pill { display: inline-flex; align-items: center; gap: 6px; }
.bet-link-pill .kind-chip { margin-left: 0; }

/* Placement-source chip: MANUAL (placed by hand) vs AUTO (bot-placed). */
.src-chip {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; vertical-align: middle;
}
.src-chip.src-manual { background: rgba(250,204,21,0.14); color: var(--pending); }
.src-chip.src-auto { background: var(--bg-elev-2); color: var(--text-muted); }

.progress { height: 5px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.progress-bar { height: 100%; background: var(--accent); transition: width 0.4s ease, background 0.4s ease; }

/* Props are a clean list separated by a single hairline divider (same line
   language as the quarter table / "ESS lead by" rule) — no nested boxes. */
.game-card .legs { display: flex; flex-direction: column; }
.game-card .leg {
  position: relative;
  display: grid; grid-template-columns: 22px 1fr; align-items: start;
  gap: 10px; font-size: 13px;
  /* Reset the global .leg card box (bg/full border/radius/margin from line 1030,
     used by the /bet drill-down) — on /live the props are a clean divider list,
     not stacked cards. Only a bottom hairline separates them. */
  background: none; border: none; border-radius: 0; margin-bottom: 0;
  /* No side padding so the leg's right edge == the grouped sub-row's right edge
     == the bar's right edge: ONE shared right anchor for every result badge. */
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.game-card .leg:last-child { border-bottom: none; }
/* When a lineup / lost-legs block follows the legs, the last leg isn't visually
   last — keep its divider so its bar isn't flush against the NAMED BENCH strip. */
.game-card .legs:has(+ details) .leg:last-child {
  border-bottom: 1px solid var(--border);
}
.game-card .leg-icon { text-align: center; line-height: 1.3; font-size: 14px; }
.game-card .leg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game-card .leg-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.game-card .leg-name { color: var(--text); font-weight: 600; line-height: 1.3; }
.game-card .leg-market { color: var(--text-muted); font-size: 12px; line-height: 1.2; }
.game-card .leg-detail {
  color: var(--text); font-size: 13px; white-space: nowrap;
  font-variant-numeric: tabular-nums; flex-shrink: 0; text-align: right;
}
.game-card .leg-thr { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.game-card .leg-hit .leg-name { color: var(--pos); }
.game-card .leg-miss .leg-name { color: var(--neg); }
.game-card .leg-void .leg-name { color: var(--text-muted); text-decoration: line-through; }
.pace { color: var(--accent); }
.pace.pace-hit { color: var(--pos); }

/* ── Progress-bar legs (AFL-app style) ─────────────────────────────────── */
/* Bar legs drop the left icon gutter and span full width; the result icon
   moves inline to the right of the player name. */
/* Bar/market legs are single-column and full-width. */
.game-card .leg.leg-bar,
.game-card .leg.leg-mkt {
  grid-template-columns: 1fr;
  padding: 11px 2px;
}
.game-card .leg-icon-inline {
  font-size: 13px; line-height: 1; flex-shrink: 0; margin-left: 8px;
}

/* Whole-game market legs (H2H / line / total), grouped at the bottom of the
   card. Single-column row with the result badge on the right, like a bar leg
   minus the bar. */
.game-card .leg.leg-mkt .leg-top { align-items: center; }
/* Market legs carry a market-type icon badge (marketIconBadge → .leg-num-mkt)
   in the number slot, so the name lines up with player-prop names automatically
   — no name padding hack needed. */

/* Circular result badge (TAB style): green ✓ / red ✗. */
.game-card .rb {
  flex-shrink: 0; margin-left: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1; color: #fff;
}
.game-card .rb-hit { background: var(--rb-hit); }
.game-card .rb-miss { background: var(--rb-miss); }
/* Pending/void: same circular footprint as ✓/✗ so the badge column stays
   aligned, but an outlined neutral chip (no fill) to read as "not settled". */
.game-card .rb-pend {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 11px;
}
/* In-progress legs get an orange clock that softly pulses, so "still live"
   reads at a glance instead of the old hourglass emoji. */
.game-card .rb-pend:has(.rb-clock) {
  border-color: rgba(255, 140, 66, 0.5);
  color: var(--accent);
}
/* Voided legs: same neutral outlined chip as pending — the leg no longer
   counts either way, so it must not read as a win or a loss. */
.game-card .rb-void {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 12px;
}
.game-card .rb-clock { display: block; animation: rb-clock-pulse 2s ease-in-out infinite; }
@keyframes rb-clock-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Per-leg status pills — one circular badge per leg in slip order, coloured to
   match the progress bars (green hit / red miss / orange pending) for an
   at-a-glance read of how the match is tracking. */
.game-card .leg-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px;
}
.game-card .lp {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1; color: #fff;
}
.game-card .lp-hit { background: linear-gradient(135deg, #2f9e63, var(--pos)); }
.game-card .lp-miss { background: linear-gradient(135deg, #b23535, var(--neg)); }
.game-card .lp-pend {
  background: transparent;
  border: 1.5px solid rgba(255, 140, 66, 0.55);
  color: var(--accent);
}
.game-card .lp-pend .rb-clock {
  display: block; animation: rb-clock-pulse 2s ease-in-out infinite;
}
.game-card .lp-void {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
}

.game-card .lb-track {
  /* Pill width reserved on the right; the track ends flush at the pill's left
     edge and the pill (fixed to this same width) sits in the gap — no gap, no
     overhang past the card edge. Phone tier overrides --lb-pill-w. */
  --lb-pill-w: 36px;
  position: relative;
  height: 6px;
  width: 100%;
  margin: 14px 0 8px;
  border-radius: 3px;
  /* Visible empty-track: a lightened inset rail so the unfilled portion always
     reads against the card surface (no per-prop box behind it anymore). */
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.game-card .lb-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 0.4s ease;
}
.game-card .lb-track.lb-hit .lb-fill {
  background: linear-gradient(90deg, #2f9e63, var(--pos));
}
/* Settled miss: the bar fills to how far the player got (e.g. 23/25) in red, so a
   loss reads as "fell short here" rather than a bare crossed-out row. */
.game-card .lb-track.lb-missed .lb-fill {
  background: linear-gradient(90deg, #b23535, var(--neg));
}
.game-card .lb-track.lb-missed .lb-thumb { background: var(--neg); }
/* Scheduled (pre-game): empty track, a muted "0" thumb pinned left, and the
   target pill at the end — previews the line the leg needs once the game starts. */
.game-card .lb-track.lb-sched .lb-fill { background: transparent; }
.game-card .lb-track.lb-sched .lb-thumb {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: none;
  left: 0 !important;
  transform: translate(0, -50%);
}
/* Live-value pill that rides the fill edge — its right edge meets the fill,
   like the TAB app. translateX(-100%) anchors the pill's right side at `left`. */
.game-card .lb-thumb {
  position: absolute; top: 50%;
  transform: translate(-100%, -50%);
  width: var(--lb-pill-w); height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 12px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  background: var(--accent);
  border-radius: 11px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  z-index: 2;
}
/* Hit pill: deep green + white text reads more clearly than bright-green +
   white (which the bright --pos made low-contrast). */
.game-card .lb-track.lb-hit .lb-thumb {
  background: #0f7a45;
  color: #ffffff;
  font-weight: 800;
}
/* Threshold pill pinned at the bar's right end — shows the target value the leg
   needs to reach (e.g. "18", "25"). Muted grey while pending; greens on hit. */
.game-card .lb-target {
  position: absolute; top: 50%; left: 100%;
  transform: translate(-100%, -50%);
  width: var(--lb-pill-w); height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 9px;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 2;
}
/* Once a leg is hit, the green current-value thumb sits at the bar's right end
   and the target pill would collide with it (only a sliver shows). The thumb
   already proves the line cleared, so the target is redundant — hide it. */
.game-card .lb-target.lb-target-hit { display: none; }
/* Market label + pace projection on one line: market left, "→ 32 ✓" right.
   Moving the pace up here (it used to be a row under the bar) saves a full row
   of height per leg. */
.game-card .leg-market-row {
  display: flex; align-items: baseline; gap: 10px;
}
/* ══ ONE BADGE RULE FOR EVERY LEG ══════════════════════════════════════════
   The result badge (✓ / ✗ / clock) is ALWAYS pinned to the top-right corner of
   its row — same x, same y-from-top — for single player legs, whole-game market
   legs AND grouped player sub-rows. No flow/margin-auto positioning: every badge
   is taken out of flow and absolutely anchored, so nothing can drift.
   --rb-inset: distance of the badge's right edge from the row's right edge.
   --rb-top:   distance of the badge's top from the row's top.
   Single + market legs anchor to .leg (set position:relative above); grouped
   sub-rows anchor to .leg-sub — and because .leg now has no side padding, the
   .leg right edge == the .leg-sub right edge == the bar's right edge, so one
   inset value lands every badge on the same vertical line. */
.game-card { --rb-inset: 0px; --rb-top: 13px; }
.game-card .leg > .leg-body > .leg-top > .rb,
.game-card .leg.leg-group > .leg-body > .leg-subs > .leg-sub > .rb {
  position: absolute; top: var(--rb-top); right: var(--rb-inset);
  margin: 0;
}
/* The name row no longer needs space-between to push the badge — the badge is
   absolute. Drop the reserved trailing gap so the name can use full width. */
.game-card .leg-top { justify-content: flex-start; }
/* Indent the market label so it starts in line with the player NAME, not under
   the guernsey number/placeholder badge that precedes it. 23px ≈ the .leg-num
   footprint (min-width 18px + pad + margin). */
.game-card .leg-bar .leg-market-row,
.game-card .leg-mkt .leg-market-row { padding-left: 23px; }
/* Push the pace projection to the right and stop it clear of the absolute badge
   gutter, so every "→" arrow lines up regardless of leg type. */
.game-card .leg-bar .leg-market-row .lb-pace,
.game-card .leg-mkt .leg-market-row .lb-pace,
.game-card .leg-sub .leg-market-row .lb-pace { margin-left: auto; }
.game-card .leg-bar .leg-market-row,
.game-card .leg-mkt .leg-market-row,
.game-card .leg-sub .leg-market-row { padding-right: 30px; }

/* ── Grouped player legs (one name, multiple markets) ──────────────────────
   When a player has 2+ markets (e.g. 20+ and 25+ Disposals) the name shows
   once and each market stacks beneath as a sub-row with its own badge + bar.
   Sub-rows are separated by a hairline so the set reads as distinct lines. */
.game-card .leg.leg-group .leg-subs {
  display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
}
.game-card .leg-sub { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.game-card .leg-sub + .leg-sub { border-top: 1px solid rgba(255,255,255,0.05); }
.game-card .leg-sub:first-child { padding-top: 2px; }
.game-card .leg-sub:last-child { padding-bottom: 0; }
.game-card .leg-sub .leg-market-row { align-items: center; }
/* Each sub-row anchors its own badge (via the ONE BADGE RULE above). The sub-row
   has its own top padding, so override --rb-top to sit on the sub-row's market
   line; --rb-inset is shared, so the badge lands on the same x as single/market
   legs (the .leg-sub right edge == the .leg right edge). */
.game-card .leg-sub { --rb-top: 10px; }
.game-card .leg-sub:first-child { --rb-top: 2px; }
.game-card .leg-sub.leg-hit .leg-market { color: var(--pos); }
.game-card .leg-sub.leg-miss .leg-market { color: var(--neg); }
.game-card .leg-sub.leg-void .leg-market {
  color: var(--text-muted); text-decoration: line-through;
}

.game-card .lb-pace-row { margin-top: 10px; font-size: 12px; }
.game-card .lb-pace {
  font-size: 12px; flex-shrink: 0; color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.game-card .lb-pace.lb-pace-hit { color: var(--pos); }
.game-card .lb-pace-arrow { flex-shrink: 0; }
/* Value right-aligned in a fixed slot + a reserved tick slot, so the arrow that
   precedes them sits at the same x whether or not the ✓ is shown. */
.game-card .lb-pace-val { min-width: 18px; text-align: right; }
.game-card .lb-pace-tick { width: 10px; flex-shrink: 0; text-align: center; }

/* ── Live leg animations ──────────────────────────────────────────────────────
   Played on mount when the render diff detects a change between polls:
   - lb-anim-tick: the player's stat ticked up → a quick pop on the value pill.
   - lb-anim-hit:  the leg just crossed its line → a green flash sweep + glow.
   prefers-reduced-motion users get no animation. */
@keyframes lb-thumb-pop {
  0%   { transform: translate(-100%, -50%) scale(1); }
  35%  { transform: translate(-100%, -50%) scale(1.32); }
  100% { transform: translate(-100%, -50%) scale(1); }
}
@keyframes lb-hit-flash {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.0); }
  20%  { box-shadow: 0 0 0 4px rgba(74,222,128,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.0); }
}
@keyframes leg-hit-glow {
  0%   { background: rgba(74,222,128,0.22); }
  100% { background: transparent; }
}
.game-card .lb-anim-tick .lb-thumb {
  animation: lb-thumb-pop 0.5s ease-out;
}
.game-card .lb-anim-hit {
  animation: lb-hit-flash 1.1s ease-out;
}
.game-card .lb-anim-hit .lb-thumb {
  animation: lb-thumb-pop 0.5s ease-out;
}
.game-card .leg.leg-just-hit {
  animation: leg-hit-glow 1.6s ease-out;
  border-radius: 8px;
}
/* Per-increment pop on the value pill as it counts up (14→15→16…). Driven by
   the JS animateBars() loop, which re-adds .lb-bump on each integer tick. */
@keyframes lb-bump {
  0%   { transform: translate(-100%, -50%) scale(1); }
  40%  { transform: translate(-100%, -50%) scale(1.28); }
  100% { transform: translate(-100%, -50%) scale(1); }
}
.game-card .lb-thumb.lb-bump { animation: lb-bump 0.22s ease-out; }

/* The JS count-up writes fill width + thumb left every frame, so those bars must
   NOT also run a CSS transition (it would fight rAF and lag). data-from is
   present only while a bar is mid count-up. */
.game-card .lb-track[data-from] .lb-fill { transition: none; }
.game-card .lb-track[data-from] .lb-thumb { transition: none; }

/* ✓ result badge stamp-in at the line-cross moment. */
@keyframes rb-stamp {
  0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.game-card .rb-stamp { animation: rb-stamp 0.42s cubic-bezier(.2,1.3,.5,1); }

/* Particle burst at the line-cross. A layer pinned to the track; each <i> is a
   green dot that fans out to its --dx/--dy and fades. */
.game-card .lb-burst {
  position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3;
}
.game-card .lb-burst i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos); box-shadow: 0 0 6px rgba(74,222,128,0.9);
  transform: translate(-50%, -50%);
  animation: lb-particle 0.7s ease-out forwards;
}
@keyframes lb-particle {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card .lb-anim-tick .lb-thumb,
  .game-card .lb-anim-hit,
  .game-card .lb-anim-hit .lb-thumb,
  .game-card .lb-thumb.lb-bump,
  .game-card .rb-stamp,
  .game-card .rb-clock,
  .game-card .leg.leg-just-hit { animation: none; }
  .game-card .lb-burst { display: none; }
  .game-card .lb-fill, .game-card .lb-thumb { transition: none; }
}

/* ── Whole-bet win celebration ──────────────────────────────────────────────
   Fired by celebrateWin() when every leg of a bet hits: a confetti rain layer
   over the whole viewport + a centred banner that pops in and fades. */
#win-banner {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 18vh; opacity: 0;
}
#win-banner.show { animation: wb-show 4.2s ease-out forwards; }
@keyframes wb-show {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}
.wb-card {
  text-align: center; padding: 22px 34px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(20,28,22,0.96), rgba(12,18,14,0.96));
  border: 1px solid rgba(74,222,128,0.55);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(74,222,128,0.18),
              0 0 60px rgba(74,222,128,0.28);
  transform: scale(0.85);
}
#win-banner.show .wb-card { animation: wb-pop 0.55s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes wb-pop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.wb-emoji { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.wb-main {
  font-size: 22px; font-weight: 800; letter-spacing: 0.04em; color: var(--pos);
  text-shadow: 0 1px 12px rgba(74,222,128,0.5);
}
.wb-sub { font-size: 14px; color: var(--text); margin-top: 5px; }

/* Mid-game "all legs hit, pending final result" — yellow, not the green cash
   banner, so it's visually clear the bet isn't settled yet. */
.wb-card.wb-pending {
  background: linear-gradient(160deg, rgba(30,26,12,0.96), rgba(20,17,8,0.96));
  border-color: rgba(250,204,21,0.55);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(250,204,21,0.18),
              0 0 60px rgba(250,204,21,0.26);
}
.wb-card.wb-pending .wb-main {
  color: var(--pending); text-shadow: 0 1px 12px rgba(250,204,21,0.5);
}
.wb-sub b { color: var(--pos); font-variant-numeric: tabular-nums; }

.confetti-layer { position: fixed; inset: 0; z-index: 999; pointer-events: none; overflow: hidden; }
.confetti-layer i {
  position: absolute; top: -6vh; border-radius: 2px; opacity: 0.95;
  animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--sway), 112vh) rotate(var(--rot)); opacity: 0.9; }
}

@media (max-width: 480px) {
  .wb-card { padding: 18px 22px; }
  .wb-main { font-size: 18px; }
  .wb-emoji { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-layer { display: none; }
  #win-banner.show { animation: none; opacity: 1; }
  #win-banner.show .wb-card { animation: none; transform: scale(1); }
  .refresh-btn.spin svg { animation: none; }
  .game-card .lb-sweep { display: none; }
}

.game-card .game-time {
  font-size: 12px; color: var(--text-muted); margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.game-card .game-time .cd { color: var(--accent); }
.game-card .leg-bet {
  font-size: 11px; font-weight: 700; color: var(--accent); text-decoration: none;
  padding: 1px 5px; border-radius: 4px; background: rgba(255,140,66,0.12);
  margin-left: 2px;
}
.game-card .leg-bet:hover { background: rgba(255,140,66,0.22); }

/* Guernsey number badge — small muted pill before the player name. */
.leg-num {
  display: inline-block; min-width: 18px; text-align: center;
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: rgba(255,255,255,0.06); border-radius: 4px;
  padding: 1px 4px; margin-right: 5px; vertical-align: middle;
}
/* Market-type icon badge (whole-game legs: H2H / total / line / margin). Keeps
   the exact .leg-num footprint so names + markets stay aligned with numbered
   legs, but carries a small monochrome glyph for the market type instead of a
   number — no border, just a dim inline icon. */
.leg-num.leg-num-mkt {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border-color: transparent;
  color: var(--text-muted); padding: 0 4px;
}
.leg-num.leg-num-mkt svg { display: block; }

/* ── Named team sheet (AFL API): collapsible bench/interchange strip ───────── */
.game-card .lineup {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  padding-bottom: 2px;
}
.game-card .lineup > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  list-style: none;
}
.game-card .lineup > summary::-webkit-details-marker { display: none; }
.game-card .lineup > summary::before { content: "▸ "; color: var(--text-muted); }
.game-card .lineup[open] > summary::before { content: "▾ "; }
.game-card .lineup > summary .ln-count {
  display: inline-block; margin-left: 4px;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  min-width: 16px; padding: 0 4px; border-radius: 8px;
  color: var(--text-muted); background: var(--bg-elev-2);
}
/* Two-column team sheets so home/away sit side by side on wide cards. */
.game-card .ln-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 10px;
}
.game-card .ln-team {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.game-card .ln-team-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text); margin-bottom: 6px;
}
.game-card .ln-bench {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 8px;
  row-gap: 2px;
}
.game-card .ln-bench + .ln-bench { margin-top: 8px; }
.game-card .ln-tag {
  grid-column: 1;
  align-self: start;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--bg); padding: 1px 5px; border-radius: 4px;
  margin-top: 2px;
}
.game-card .ln-tag.int { background: var(--text-muted); }
.game-card .ln-tag.emg { background: var(--accent-dim); }
/* Players stack in the second column so the tag labels its whole group. */
.game-card .ln-players {
  grid-column: 2;
  display: flex; flex-direction: column; gap: 2px;
}
.game-card .ln-p {
  display: grid; grid-template-columns: 22px 1fr; align-items: start;
  gap: 6px; font-size: 12px; line-height: 1.45;
}
.game-card .ln-p .leg-num { margin-right: 0; justify-self: start; margin-top: 1px; }
.game-card .ln-link { color: var(--text); text-decoration: none; }
.game-card .ln-link:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .game-card .ln-grid { grid-template-columns: 1fr; }
}

/* ── Watch strip: closest-to-win + most-at-risk ───────────────────────────── */
.watch-strip { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.watch-strip:empty { display: none; margin: 0; }
.watch-card {
  display: flex; align-items: center; gap: 10px; flex: 1 1 280px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 14px;
}
.watch-card.watch-win { border-left-color: var(--pos); }
.watch-card.watch-risk { border-left-color: var(--neg); }
.watch-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 700; }
.watch-id { font-weight: 700; color: var(--text); }
.watch-need { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.watch-money { margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Sweep section ────────────────────────────────────────────────────────── */
.sweep-section { margin-top: 26px; }
.won-section { margin-top: 26px; }
.sweep-head { display: flex; justify-content: space-between; align-items: flex-end; }
.sweep-totals { font-size: 14px; font-variant-numeric: tabular-nums; }
.sweep-totals .arrow { color: var(--text-muted); margin: 0 6px; }
.sweep-totals b { color: var(--text); }

.sweep-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.sweep-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; border-left: 3px solid var(--accent-dim);
}
.sweep-card.sweep-busted { border-left-color: var(--neg); opacity: 0.72; }
.sweep-card.sweep-won { border-left-color: var(--pos); }
.sweep-card.sweep-alive { border-left-color: var(--accent); }

.sweep-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.sw-id { font-weight: 700; color: var(--text-muted); font-size: 13px; }
.sw-money { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sw-money b { color: var(--text); }
.sw-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.5px; }
.sw-tag.need { background: rgba(255,140,66,0.14); color: var(--accent); }
.sw-tag.win { background: rgba(74,222,128,0.16); color: var(--pos); }
.sw-tag.dead { background: rgba(248,113,113,0.14); color: var(--neg); }

.sweep-legs { display: flex; flex-direction: column; gap: 2px; }
.swleg {
  display: grid; grid-template-columns: 18px auto 1fr; gap: 7px;
  align-items: baseline; font-size: 12.5px; padding: 2px 0;
}
.swleg .leg-icon { text-align: center; }
/* resultBadge pills inside sweep/won/lost cards — the game-card .rb look,
   sized down to the 18px icon column. */
.swleg .rb {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; line-height: 1; color: #fff;
  align-self: center; justify-self: center;
}
.swleg .rb-hit { background: var(--rb-hit); }
.swleg .rb-miss { background: var(--rb-miss); }
.swleg .rb-pend, .swleg .rb-void {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 9px;
}
.swleg .rb-pend:has(.rb-clock) { border-color: rgba(255,140,66,0.5); color: var(--accent); }
.swleg .rb-clock { display: block; }
.swleg-name { color: var(--text); font-weight: 500; white-space: nowrap; }
.swleg-mkt { color: var(--text-muted); font-size: 11.5px; }
.swleg-hit .swleg-name { color: var(--pos); }
.swleg-miss .swleg-name { color: var(--neg); }
.swleg-void .swleg-name { color: var(--text-muted); text-decoration: line-through; }

/* Lost bets: actual stat value + emphasis on the leg(s) that missed. */
.swleg-cur { color: var(--neg); font-weight: 700; }
.swleg-missed .swleg-name { color: var(--neg); }
.leg-missed .leg-name { color: var(--neg); font-weight: 600; }
.leg-missed .leg-market .swleg-cur { color: var(--neg); }
.lost-section { margin-top: 26px; }
.lost-strip { margin-top: 8px; border-top: 1px dashed rgba(248,113,113,0.28); padding-top: 6px; }
.lost-strip > summary {
  cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--neg); list-style: none; padding: 2px 0;
}
.lost-strip > summary::-webkit-details-marker { display: none; }

/* Live page + dashboard banner — collapse at the same 720px breakpoint the
 * rest of the site uses (was 600px, which left the multi-column grids cramped
 * between 600–720px). */
@media (max-width: 720px) {
  .live-grid, .sweep-grid { grid-template-columns: 1fr; gap: 10px; }
  .sweep-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Live header on phone — keep it a compact sticky row: title + meta on the
     left, the auto-refresh controls (last-updated + Refresh) pinned top-right so
     they stay visible while scrolling the games list. */
  /* Topbar is position:static on phone (scrolls away), so the live-head is the
     sticky bar and pins to top:0, not the desktop topbar offset. */
  .live-head { align-items: center; gap: 8px; top: 0; }
  .live-head > div:first-child { min-width: 0; }
  .live-title { font-size: 18px; }
  .live-date { display: none; }
  .live-controls { flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 3px; }
  .live-controls #live-status { display: none; }
  .live-ago { font-size: 11px; }
  .refresh-btn { padding: 5px 11px; }
  .hero-pts { font-size: 28px; }
  .hero-crest { width: 44px; height: 44px; }
  .hero-main { gap: 6px; }
  .game-card, .sweep-card { padding: 12px 14px; }

  /* Let long player names + detail wrap instead of overflowing the card */
  .game-card .leg-name, .game-card .leg-detail,
  .swleg-name { white-space: normal; }

  /* Watch strip — one card per row so the inner metrics don't collide */
  .watch-strip { flex-direction: column; gap: 8px; }
  .watch-card { flex: 1 1 auto; }

  /* Bet tags — bigger tap target on touch screens */
  .game-card .leg-bet { padding: 3px 8px; font-size: 12px; }

  /* Dashboard live banner — tighter padding, allow the CTA to wrap cleanly */
  .live-banner { padding: 10px 12px; font-size: 13px; gap: 7px; }
  .live-banner .lb-go { margin-left: auto; }

  /* Hide the Round column on phones (low-priority; round is in the header) */
  .col-round { display: none; }
}

/* ── Phone density (≤480px) ────────────────────────────────────────────────
 * The 720px tier collapses columns; this tier tightens the live card itself so
 * more legs fit per screen on an actual phone. Everything felt oversized on
 * iPhone because the hero/legs/quarter rows carried desktop padding + type.
 */
@media (max-width: 480px) {
  main { padding: 0 10px; }
  :root { --main-pad: 10px; }  /* keep live-head full-bleed math in sync */
  .game-card, .sweep-card { padding: 11px 12px; border-radius: 12px; }

  /* Hero — smaller crest, scores and title; tighter vertical rhythm */
  .hero-title { font-size: 15px; }
  .hero-sub { font-size: 11px; }
  .hero-main { margin-top: 10px; gap: 4px; }
  .hero-crest { width: 40px; height: 40px; border-radius: 10px; padding: 5px; }
  .hero-tname { font-size: 11px; }
  .hero-pts { font-size: 26px; }
  .hero-gb { font-size: 11px; margin-top: 2px; }
  .hero-mid { padding-top: 44px; }
  .hero-clock { font-size: 11px; padding: 3px 9px; }
  .hero-foot { font-size: 11px; margin-top: 8px; padding-top: 7px; }

  /* Quarter table — smaller logo + name, tighter cells */
  .qtable { font-size: 12.5px; margin: 2px 0 10px; }
  .qtable th, .qtable td { padding: 4px 5px; }
  .qtable thead th { font-size: 11px; }
  .qtable .qt-logo { width: 20px; height: 20px; border-radius: 5px; }
  .qtable td.qt-team { gap: 7px; }

  /* Legs — the big density win. Trim padding, shorten the bar's vertical
     margins, and shrink the value pill so each leg reads compact. */
  .game-card .leg { padding: 7px 0; font-size: 12.5px; }
  .game-card .leg.leg-bar,
  .game-card .leg.leg-mkt { padding: 8px 2px; }
  .game-card .leg-market { font-size: 11.5px; }
  .game-card .lb-track { --lb-pill-w: 30px; margin: 10px 0 6px; height: 5px; }
  .game-card .lb-thumb { height: 19px; font-size: 11px; padding: 0; border-radius: 9px; }
  .game-card .lb-target { height: 19px; font-size: 11px; padding: 0; border-radius: 9px; }
  .game-card .lb-pace-row { margin-top: 7px; font-size: 11.5px; }
  .game-card .rb { width: 18px; height: 18px; font-size: 11px; }
}

/* ── /results — round selector + settled-bet history ─────────────────────── */
.round-pills {
  /* one scrollable row — late-season this holds 24+ pills; wrapping would
     push the KPI hero down three rows */
  display: flex; flex-wrap: nowrap; gap: 6px; margin: 14px 0 18px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.round-pills::-webkit-scrollbar { display: none; }
.round-pills .round-pill { flex: 0 0 auto; }
.round-pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-elev); border: 1px solid var(--border);
  text-decoration: none;
}
.round-pill:hover { border-color: var(--border-strong); color: var(--text); }
.round-pill.active {
  background: rgba(255,140,66,0.15); border-color: var(--accent); color: var(--accent);
}

.results-summary {
  display: flex; flex-wrap: wrap; gap: 22px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 18px;
}
.rs-stat { display: flex; flex-direction: column; gap: 2px; }
.rs-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.rs-val { font-size: 18px; font-weight: 800; }
.rs-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.rs-sub.pos { color: var(--pos); opacity: .85; }
.rs-sub.neg { color: var(--neg); opacity: .85; }
.rs-val.pos, .pos { color: var(--pos); }
.rs-val.neg, .neg { color: var(--neg); }

.results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px;
}
.result-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 12px 14px;
}
.result-won { border-left-color: var(--pos); }
.result-lost { border-left-color: var(--neg); }
.result-cancelled { border-left-color: var(--text-muted); }
.result-pending { border-left-color: var(--pending); }
.result-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.r-id { font-weight: 800; color: var(--text-muted); }
/* Same geometry + tint strength as .badge so result-card tags and table
   badges read as one system (audit: badge unification). */
.r-tag {
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
  letter-spacing: 0.6px; white-space: nowrap;
}
.r-tag.win { background: rgba(74,222,128,0.16); color: var(--pos); }
.r-tag.dead { background: rgba(248,113,113,0.16); color: var(--neg); }
.r-tag.void { background: rgba(122,130,144,0.18); color: var(--text-muted); }
.r-tag.pending { background: rgba(250,204,21,0.16); color: var(--pending); }
.res-pending-note { color: var(--pending); }
.res-pending-banner {
  margin: 4px 0 12px; padding: 7px 12px; border-radius: 8px;
  background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.2);
  font-size: 13px;
}
.r-match { font-weight: 700; }
.r-money { margin-left: auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.result-legs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.r-leg { display: flex; gap: 8px; font-size: 13px; }
.r-leg-mkt { color: var(--text-muted); }
.result-foot { font-size: 12px; }
.r-bet-link { font-weight: 700; }

/* ── small utilities ────────────────────────────────────────────────── */
.sm { font-size: 12px; }
.action-ok {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--pos);
  font-size: 13px;
}

/* ── Admin page ─────────────────────────────────────────────────────── */
.admin-subnav {
  display: flex;
  gap: 4px;
  margin: 18px 0 4px;
  border-bottom: 1px solid var(--border);
  /* 5 tabs no longer fit a phone — scroll the row instead of overflowing */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-subnav::-webkit-scrollbar { display: none; }
.admin-subnav .admin-tab { white-space: nowrap; flex-shrink: 0; }
.admin-tab {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
/* Grid items default to min-width:auto — a wide table inside a panel would
   blow the track past the viewport on phones instead of overflowing locally. */
.admin-grid > * { min-width: 0; }
.admin-grid.log-grid { grid-template-columns: 1fr 1.3fr; }
.admin-recent { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .admin-grid, .admin-grid.log-grid { grid-template-columns: 1fr; }
}
.admin-panel { padding: 16px 18px; }
.admin-kpis { margin: 4px 0 0; }
.kpi-value.sm { font-size: 15px; }

/* Import tab — statement upload + dry-run preview */
.import-panel { margin-bottom: 18px; }
.import-form {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  margin-top: 12px;
}
.import-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.import-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.import-form input[type="file"] {
  color: var(--text-muted); font-size: 13px; max-width: 280px;
}
.import-form input[type="file"]::file-selector-button {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 7px 14px; margin-right: 10px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.import-form input[type="file"]::file-selector-button:hover { border-color: var(--accent); }
.import-form select.note-input { padding: 7px 10px; }
.import-meta { margin: 4px 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.import-out {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--text);
  overflow-x: auto; white-space: pre; max-height: 420px; overflow-y: auto;
}
@media (max-width: 720px) {
  .import-form { flex-direction: column; align-items: stretch; }
  .import-form input[type="file"] { max-width: 100%; }
}

.section-link {
  float: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.section-link:hover { color: var(--text); }

/* runtime scrapers */
.admin-scrapers { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.scraper-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  font-size: 12px;
}
.scraper-chip.warn { border-color: rgba(250, 204, 21, 0.4); }
.scraper-chip .sc-name { font-weight: 600; color: var(--text); }
.scraper-chip .sc-stat { color: var(--text-muted); }
.scraper-chip .sc-fail { color: var(--pending); font-weight: 600; }
.runtime-down { padding: 10px 0; }

/* process table */
.proc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proc-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.proc-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.proc-table tr:last-child td { border-bottom: none; }
.proc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.proc-actions { text-align: right; }
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.dot-up { background: var(--pos); box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.dot-down { background: var(--neg); }
.proc-note { margin-top: 10px; }
.proc-live { margin-left: 8px; font-weight: 500; color: var(--pos); }
.proc-live.proc-live-stale { color: var(--text-muted); }

/* recent-activity feed */
.recent-feed { list-style: none; margin: 8px 0 0; padding: 0; }
.recent-feed li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.recent-feed li:last-child { border-bottom: none; }
.rf-ts { color: var(--text-muted); font-size: 12px; white-space: nowrap; min-width: 90px; }
.rf-action {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rf-did { color: var(--text-muted); }
.rf-label { color: var(--text); }
.rf-extra { font-size: 12px; }

/* admin filters */
.admin-filters { margin: 16px 0 12px; }
.filter-form { display: inline-flex; gap: 10px; }
/* admin selects use the shared .filter-select treatment (dashboard filters) */
.inline-log-filter { float: right; }

/* bets ledger */
table.bets.ledger td.ledger-match { max-width: 280px; }
.did-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.did-link:hover { text-decoration: underline; }

/* log tail */
.log-tail {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 520px;
  overflow-y: auto;
}
.log-table td, .log-table th { white-space: nowrap; }
.trash-note { margin: 16px 0 12px; }

/* ── Results page ─────────────────────────────────────────────────────────
   Settled-bet history. Reuses .kpi/.round-pill/.result-card/.filter-select +
   the /live monochrome marks (✓ / ✗ / clock). All colours via custom props. */

.res-kpis { margin-bottom: 18px; }
.res-kpis .kpi-sep { color: var(--text-muted); margin: 0 5px; font-weight: 600; }
.res-kpi-link { color: var(--accent); font-weight: 700; }
.res-kpi-link:hover { text-decoration: underline; }

/* Win/loss run strip — one small square per settled bet in settle order. */
.res-seq {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 16px; margin-bottom: 16px;
}
.res-seq-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700; flex-shrink: 0;
}
.res-seq-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.res-cell {
  width: 18px; height: 18px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1; color: #fff;
  text-decoration: none; transition: transform .1s ease;
}
.res-cell:hover { transform: scale(1.18); }
.res-cell-won { background: linear-gradient(135deg, #2f9e63, var(--pos)); color: #06210f; }
.res-cell-lost { background: linear-gradient(135deg, #b23535, var(--neg)); color: #2a0a0a; }
.res-cell-cancelled { background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text-muted); }

/* Per-account breakdown chips. */
.res-accounts {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.res-acct {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 15px; font-size: 13px;
}
.res-acct-name { font-weight: 700; color: var(--text); }
.res-acct-rec { color: var(--text-muted); font-weight: 600; }
.res-acct-pl { font-weight: 800; }

/* Filter / sort bar. The filter buttons reuse .round-pill geometry. */
.res-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.res-filters { display: flex; flex-wrap: wrap; gap: 6px; }
button.res-filter {
  cursor: pointer; font-family: inherit; line-height: 1.2;
}
button.res-filter:focus { outline: none; }
button.res-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.res-count {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 999px; background: var(--bg-elev-2);
  font-size: 11px; font-weight: 800; color: var(--text-muted);
}
.res-filter.active .res-count { background: rgba(255,140,66,0.22); color: var(--accent); }
.res-sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.res-sort-wrap .filter-select { min-width: 110px; }

/* Per-leg hit/miss/void pills inside a result card — /live's .rb look, scoped
   to the results page so it doesn't collide with .game-card .rb. */
.r-leg { align-items: center; }
.r-pill {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1; color: #fff;
}
.r-pill-hit { background: var(--rb-hit); }
.r-pill-miss { background: var(--rb-miss); }
.r-pill-void { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-muted); }
.r-pill-none {
  background: transparent; border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
}
.r-pill .rb-clock { display: block; }
.result-cancelled { border-left-color: var(--text-muted); }

.res-empty { margin: 18px 0; }

@media (max-width: 640px) {
  .res-controls { flex-direction: column; align-items: stretch; }
  .res-sort-wrap { justify-content: flex-end; }
}

/* ── Summary page (overhaul) ──────────────────────────────────────────────── */

/* Period pills get the round-pill geometry already; add a focus ring so keyboard
   users see the active state, matching the rest of the dashboard. */
.round-pill.chip:focus { outline: none; }
.round-pill.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sticky section jump-links — the summary runs ~6 screens of breakdowns. */
.summary-nav {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  padding: 8px 0;
  margin: 0 0 14px;
}
.summary-nav::-webkit-scrollbar { display: none; }
.summary-nav .round-pill { flex: 0 0 auto; }
/* anchored section heads land below the sticky strips, not under them */
.section-h[id] { scroll-margin-top: calc(var(--topbar-h) + 52px); }

/* Canonical Chart.js responsive container: the CARD owns the height and the
   canvas fills it absolutely, so the page doesn't jump when Chart.js boots
   (a bare width:100% canvas renders at its intrinsic aspect first). */
.summary-page .chart-card,
.chart-card { position: relative; height: 300px; }
.grid-2 .chart-card { height: 260px; }
.chart-card canvas {
  position: absolute;
  inset: 16px 20px; /* mirrors .chart-card padding */
  width: calc(100% - 40px) !important;
  height: calc(100% - 32px) !important;
}

/* Secondary KPI row (luck/edge + best/worst) sits tighter than the hero. */
.sm-kpi-row { margin-top: 8px; margin-bottom: 8px; }
.kpi-value.sm { font-size: 17px; }

/* Clickable KPI cards (best/worst link to /bet/<id>) — keep the card chrome,
   add the interactive accent border on hover like .live-banner. */
a.kpi-link { text-decoration: none; color: var(--text); display: block; transition: border-color .12s ease; }
a.kpi-link:hover { border-color: var(--border-strong); }
a.kpi-link .kpi-sub { color: var(--text-muted); }

/* Profit/win-rate bars want a touch more breathing room under the section head. */
.summary-page .grid-2 .chart-card { margin-bottom: 0; }

/* ── Accounts page ──────────────────────────────────────────────────────── */
.acc-kpis { margin-bottom: 18px; }

.dot-idle { background: var(--pending); box-shadow: 0 0 6px rgba(250,204,21,0.5); }

.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.acc-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 2px solid var(--border);
}
.acc-card.acc-up { border-top-color: var(--pos); }
.acc-card.acc-down { border-top-color: var(--neg); }

.acc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.acc-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.acc-name { font-size: 18px; font-weight: 700; color: var(--text); }
a.acc-name-link { text-decoration: none; }
a.acc-name-link:hover { color: var(--accent); text-decoration: underline; }
.acc-bookie { text-transform: uppercase; letter-spacing: 0.04em; }
.acc-status-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acc-idle-chip { color: var(--pending); }

.acc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.acc-stat { min-width: 0; }
.acc-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.acc-stat-value { font-size: 18px; font-weight: 700; color: var(--text); }
.acc-stat-value.sm { font-size: 15px; font-weight: 600; }

.acc-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-form-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.acc-form-strip { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.fm-win { background: rgba(74,222,128,0.16); color: var(--pos); }
.fm-loss { background: rgba(248,113,113,0.16); color: var(--neg); }

.acc-cash {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.acc-cash-label {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.acc-cash-item { display: inline-flex; gap: 5px; align-items: baseline; }
.acc-cash-k { font-size: 11px; color: var(--text-muted); }

.acc-foot { font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.acc-foot-sep { color: var(--text-muted); }
.acc-note { margin-top: 18px; font-size: 12px; }

/* ── Transactions table (cash deposits/withdrawals) ───────────────────────── */
.txn-section { margin-top: 30px; }
.txn-head { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.txn-head span { font-weight: 500; }
.txn-table-wrap {
  border: 1px solid var(--border); border-radius: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-elev);
}
.txn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.txn-table thead th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.txn-table th.txn-amt-col, .txn-table td.txn-amt { text-align: right; }
.txn-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text);
}
.txn-table tbody tr:last-child td { border-bottom: none; }
.txn-table tbody tr:hover { background: var(--bg-elev-2); }
.txn-date { color: var(--text-muted); white-space: nowrap; }
.txn-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Add-transaction form (collapsed by default, toggled by the header button) */
.txn-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.txn-head-row .txn-head { margin: 0; }
.txn-add-form {
  display: none;
  flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px; margin-bottom: 14px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px;
}
.txn-add-form.open { display: flex; }
.txn-add-field { display: flex; flex-direction: column; gap: 4px; }
.txn-add-field > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600;
}
.txn-add-field select, .txn-add-field input {
  padding: 7px 10px; font-size: 13px; color: var(--text);
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.txn-add-field select:focus, .txn-add-field input:focus {
  outline: none; border-color: var(--accent);
}
.txn-add-field input::placeholder { color: var(--text-muted); }
.txn-add-note { flex: 1; min-width: 140px; }
.txn-del-col { width: 36px; text-align: center; }
.acc-cash .pend { color: var(--pending); }
.btn-txn-del {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  color: var(--text-muted); font-size: 13px; border-radius: 4px; line-height: 1;
}
.btn-txn-del:hover { color: var(--neg); background: rgba(248, 113, 113, 0.12); }
.btn-txn-del:focus { outline: none; }
.btn-txn-del:focus-visible { outline: 2px solid var(--accent); }

@media (max-width: 560px) {
  .acc-grid { grid-template-columns: 1fr; }
  .txn-add-form { flex-direction: column; align-items: stretch; }
}

/* ── Activity log tab ── */
/* count-by-action-type chip row + filter */
.act-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
}
.act-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  transition: color .12s ease, border-color .12s ease;
}
.act-chip:hover { color: var(--text); border-color: var(--border-strong); }
.act-chip.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 140, 66, 0.12);
}
.act-chip .act-n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
.act-chip.active .act-n { color: var(--accent); }

/* log-level health KPI strip */
.log-stat-strip {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}
.log-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 8px 6px;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.log-stat-n {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.log-stat-l {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.log-stat.err { border-color: rgba(248, 113, 113, 0.3); }
.log-stat.err .log-stat-n { color: var(--neg); }
.log-stat.warn { border-color: rgba(250, 204, 21, 0.3); }
.log-stat.warn .log-stat-n { color: var(--pending); }
.log-stat.info .log-stat-n { color: var(--text-muted); }

/* level show/hide filter buttons */
.log-lvl-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.log-lvl-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  transition: color .12s ease, border-color .12s ease;
}
.log-lvl-btn:hover { color: var(--text); }
.log-lvl-btn:focus { outline: none; }
.log-lvl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.log-lvl-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 140, 66, 0.12);
}

/* per-line colourisation inside the tail */
.log-line { display: block; }
.log-line.lvl-error { color: var(--neg); }
.log-line.lvl-warn { color: var(--pending); }
.log-line.lvl-info { color: var(--text-muted); }
.log-line.lvl-plain { color: var(--text-muted); }

/* ── Player profile page (rebuilt in the /live aesthetic) ─────────────────── */

/* Hit-rate cards — a coloured horizontal bar per threshold. Strong rates (≥70%)
   tint green (--pos), weak (<40%) tint red (--neg); the middle stays neutral
   accent. Mirrors /live's progress-bar treatment but as a static grid. */
.prof-hit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.prof-hit {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
}
.prof-hit-strong { border-left-color: var(--pos); }
.prof-hit-weak { border-left-color: var(--neg); }
.prof-hit-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.prof-hit-label { font-weight: 600; color: var(--text); font-size: 13px; }
.prof-hit-rate {
  font-weight: 800; font-size: 18px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.prof-hit-strong .prof-hit-rate { color: var(--pos); }
.prof-hit-weak .prof-hit-rate { color: var(--neg); }
.prof-bar {
  height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden;
}
.prof-bar-fill {
  height: 100%; border-radius: 3px; background: var(--accent);
  transition: width 0.4s ease;
}
.prof-hit-strong .prof-bar-fill { background: var(--pos); }
.prof-hit-weak .prof-bar-fill { background: var(--neg); }
.prof-hit-sub { font-size: 12px; margin-top: 7px; }

/* Recent-match rows — a teams line + score chip, then a compact stat strip. */
.prof-matches { display: flex; flex-direction: column; gap: 8px; }
.prof-match {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
}
.prof-match-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 9px; flex-wrap: wrap;
}
.prof-match-teams { font-weight: 600; color: var(--text); }
.prof-result {
  font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 6px;
  letter-spacing: 0.4px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prof-result-w { background: rgba(74, 222, 128, 0.16); color: var(--pos); }
.prof-result-l { background: rgba(248, 113, 113, 0.16); color: var(--neg); }
.prof-result-d { background: var(--bg-elev-2); color: var(--text-muted); }
.prof-statline {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-variant-numeric: tabular-nums;
}
.prof-stat { display: inline-flex; align-items: baseline; gap: 4px; }
.prof-stat b { color: var(--text); font-weight: 700; font-size: 14px; }
.prof-stat-k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600;
}
.prof-stat-sep { margin-left: auto; }

@media (max-width: 640px) {
  .prof-statline { gap: 11px; }
  .prof-stat-sep { margin-left: 0; }
}

/* Window toggle (Last 5 / Season) — pill segmented control in the header. */
.prof-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.prof-toggle-opt {
  padding: 5px 13px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.prof-toggle-opt:hover { color: var(--text); }
.prof-toggle-on {
  background: rgba(255, 140, 66, 0.14);
  color: var(--accent);
}
.prof-toggle-opt:focus { outline: none; }
.prof-toggle-opt:focus-visible { outline: 2px solid var(--accent); }

/* Our-bets summary strip. */
.prof-bets-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.prof-bets-stat { font-size: 13px; color: var(--text-muted); }
.prof-bets-stat b { color: var(--text); font-weight: 700; font-size: 15px; }
.prof-bets-w { color: var(--pos); }
.prof-bets-l { color: var(--neg); }
.prof-bets-p { color: var(--pending); }
.prof-bets-rate {
  margin-left: auto;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
}

/* Our-bets list — one row per leg, click-through to the bet detail. */
.prof-bets { display: flex; flex-direction: column; gap: 6px; }
.prof-bet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, background .12s;
}
a.prof-bet-row:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
/* rows without a cid render as <a> with no href — don't look clickable */
a.prof-bet-row:not([href]) { cursor: default; pointer-events: none; }
.prof-bet-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
}
.prof-bet-hit { color: var(--pos); background: rgba(74, 222, 128, 0.12); }
.prof-bet-miss { color: var(--neg); background: rgba(248, 113, 113, 0.12); }
.prof-bet-void { color: var(--text-muted); background: var(--bg-elev-2); }
.prof-bet-pending { color: var(--pending); background: rgba(250, 204, 21, 0.12); }
.prof-bet-market { font-weight: 600; font-size: 14px; }
.prof-bet-actual { font-weight: 700; margin-left: 4px; }
.prof-bet-count { margin-left: 6px; font-size: 12px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; background: var(--bg-elev-2);
  border: 1px solid var(--border); }
.prof-bet-meta { font-size: 12px; margin-left: auto; text-align: right; }
.prof-bets-note { font-size: 12px; margin-top: 9px; }

/* Per-round leg hit breakdown — small tiles, one per round we bet this leg. */
.prof-round-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.prof-round {
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.prof-round-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.prof-round-label { font-weight: 700; font-size: 13px; color: var(--text); }
.prof-round-rate { font-weight: 700; font-size: 13px; }
.prof-round-sub { font-size: 11px; margin-top: 2px; }

/* Upcoming game — next fixture + last meeting stat line. */
.prof-next {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.prof-next-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.prof-next-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}
.prof-next-match { font-size: 16px; font-weight: 700; color: var(--text); }
.prof-next-meta { font-size: 12px; }
.prof-next-last { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
.prof-next-last-head { font-size: 12px; margin-bottom: 7px; }

@media (max-width: 640px) {
  .prof-bet-row { flex-wrap: wrap; }
  .prof-bet-meta { margin-left: 32px; text-align: left; width: 100%; }
}

/* ── /reconcile — split-ownership editor ─────────────────────────────────── */
.rc-controls { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.rc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-controls .rc-filter { margin: 0; }
.rc-filter-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); margin-right: 4px; min-width: 56px;
}
.rc-sort { display: flex; align-items: center; gap: 6px; }
.rc-sort select { width: auto; min-width: 150px; }
.rc-bookie {
  display: inline-block; padding: 1px 6px; margin: 0 2px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: var(--text);
  background: var(--bg-elev-2); border: 1px solid var(--border);
}
.rc-pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-elev); border: 1px solid var(--border);
  text-decoration: none;
}
.rc-pill:hover { border-color: var(--border-strong); color: var(--text); }
.rc-pill.active {
  background: rgba(255,140,66,0.15); border-color: var(--accent); color: var(--accent);
}

.rc-bulk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -8px 0 22px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
}
.rc-bulk-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.rc-bulk-go {
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  background: rgba(255,140,66,0.12); border: 1px solid rgba(255,140,66,0.3);
  color: var(--accent); border-radius: 6px; cursor: pointer;
}
.rc-bulk-go:hover { background: rgba(255,140,66,0.2); border-color: var(--accent); }
.rc-bulk-go:focus { outline: none; }
.rc-bulk-go:focus-visible { outline: 2px solid var(--accent); }

.rc-service { margin-bottom: 26px; }
.rc-service-head {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.rc-service-head span { font-weight: 500; }

.rc-card { display: flex; flex-direction: column; gap: 0; }
.rc-card.rc-split { border-color: rgba(255,140,66,0.35); }
.rc-foot { margin-top: 2px; }
.rc-split-state { color: var(--text); }
.rc-card.rc-split .rc-split-state { color: var(--accent); }
.r-tag.rc-imported { background: rgba(122,130,144,0.18); color: var(--text-muted); }

/* Reconcile leg list — mirrors the /live game-card leg styling so imported
   bets show their selections the same way. Scoped to .rc-legs since the
   /live .leg rules are .game-card-scoped and don't reach .result-card. */
.rc-legs { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rc-leg-game {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.rc-leg-game:first-child { border-top: none; padding-top: 0; }
.rc-leg-match {
  font-size: 12px; font-weight: 600; color: var(--text);
  margin-bottom: 2px;
}
.rc-legs .leg {
  position: relative;
  display: grid; grid-template-columns: 1fr; align-items: start;
  gap: 3px; font-size: 13px;
  background: none; border: none; border-radius: 0; margin-bottom: 0;
  padding: 8px 2px;
}
.rc-legs .leg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-legs .leg-top {
  display: flex; align-items: baseline; gap: 12px;
}
.rc-legs .leg.leg-mkt .leg-top { align-items: center; }
.rc-legs .leg-name { color: var(--text); font-weight: 600; line-height: 1.3; }
.rc-legs .leg-name .player-link,
.rc-legs .leg-name { display: inline-flex; align-items: center; gap: 8px; }
.rc-legs .leg-num-blank { width: 11px; display: inline-block; }
.rc-legs .leg-market-row { padding-left: 23px; }
.rc-legs .leg-market { color: var(--text-muted); font-size: 12px; line-height: 1.2; }

.rc-editor {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.rc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.rc-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.rc-toggle input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.rc-toggle-go { color: var(--text-muted); }
.rc-toggle-go input { accent-color: var(--pos); }

.rc-fields { display: none; }
.rc-fields.open { display: inline-flex; }
.rc-field { display: inline-flex; align-items: center; gap: 5px; }
.rc-field-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.rc-input {
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  color: var(--text); font-size: 12px; font-family: inherit;
}
.rc-input-sm { width: 70px; }
select.rc-input-sm { width: auto; min-width: 110px; } /* option labels truncate at 70px */
.rc-input:focus { outline: none; border-color: var(--accent); }
.rc-input::placeholder { color: var(--text-muted); }

.rc-save {
  cursor: pointer; padding: 5px 12px; font-size: 12px;
  border: 1px solid rgba(255,140,66,0.3);
  background: rgba(255,140,66,0.12); color: var(--accent);
}
.rc-save:hover {
  background: rgba(255,140,66,0.22); border-color: var(--accent);
  color: var(--accent);
}
.rc-save:focus { outline: none; }
.rc-save:focus-visible { outline: 2px solid var(--accent); }

/* "Good to go" confirm button — toggles a bet's reviewed flag in one click.
   Default state nudges you to confirm; .is-go = confirmed (green). */
.rc-saved {
  font-size: 11px; font-weight: 600; color: var(--pos);
  opacity: 0; transition: opacity 0.15s ease;
}
.rc-saved.show { opacity: 1; }
.rc-saved.is-err { color: var(--neg); }

.rc-go {
  cursor: pointer; padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--bg-elev-2);
  color: var(--text-muted);
}
.rc-go:hover {
  border-color: rgba(74,222,128,0.4); color: var(--pos);
  background: rgba(74,222,128,0.1);
}
.rc-go.is-go {
  border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.14);
  color: var(--pos);
}
.rc-go.is-go:hover { background: rgba(74,222,128,0.22); border-color: var(--pos); }
.rc-go:focus { outline: none; }
.rc-go:focus-visible { outline: 2px solid var(--pos); }
.rc-go-form { display: none; }

/* A confirmed import bet — green left accent so the eye can sweep the page
   and see what's still outstanding. Overrides the split (orange) accent. */
.rc-card.rc-confirmed { border-left: 3px solid var(--pos); }

/* Import-page progress pills (header) */
.rc-progress { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rc-prog-pill {
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.3);
  color: var(--pending);
}
.rc-prog-pill.done {
  background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.3);
  color: var(--pos);
}
.rc-prog-pill.muted-pill {
  background: var(--bg-elev-2); border-color: var(--border-strong);
  color: var(--text-muted);
}

/* Import-page pagination */
.rc-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 16px 0;
}

/* ── Bonus / free-bet summary panel ──────────────────────────────────────────
   Free-bet-funded bets get their own callout on /summary (token funds the
   stake → loss costs $0, win returns winnings only). Yellow accent ties it to
   the --pending palette without using a coloured emoji (matches /live). */
.bonus-panel { border-left: 3px solid var(--pending); }
.bonus-note { font-size: 12.5px; margin-bottom: 12px; line-height: 1.5; }
.bonus-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.bonus-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
}
.bonus-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.bonus-v { font-size: 18px; font-weight: 650; color: var(--text); }
.bonus-v.pos { color: var(--pos); }
.bonus-v.neg { color: var(--neg); }

/* ── Visual refresh layer (June 2026) ────────────────────────────────────────
   One depth vocabulary for every remaining surface: --radius corners, the
   --shadow-card lift and a faint top sheen. Keeps the dark+orange identity
   but gives the whole site the dimensionality /live's game cards had. */

h1, h2 { letter-spacing: -0.02em; }

.result-card, .login-card, .import-card, .status-editor,
.rc-card, .odds-reprompt, .leg-editor {
  border-radius: var(--radius);
}
.result-card, .login-card {
  background: var(--sheen), var(--bg-elev);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.result-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

.live-banner {
  border-radius: var(--radius);
  background: var(--sheen), var(--bg-elev);
  box-shadow: var(--shadow-card);
}

/* ── Add Bet page ─────────────────────────────────────────────────────────── */
.add-bet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.add-bet-grid.single { grid-template-columns: 1fr; max-width: 720px; }
@media (max-width: 980px) { .add-bet-grid { grid-template-columns: 1fr; } }
.add-label { display: block; font-size: 12px; color: var(--text-muted); margin: 0 0 4px; }
.add-textarea { width: 100%; resize: vertical; font-family: inherit; }
.add-or { text-align: center; color: var(--text-muted); font-size: 12px; margin: 10px 0; }
.add-file { color: var(--text-muted); font-size: 13px; width: 100%; }
.add-file::file-selector-button {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 7px 14px; margin-right: 10px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.add-file::file-selector-button:hover { border-color: var(--accent); }
.add-actions { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.add-hint { font-size: 12px; }
.add-preview { margin: 0 0 14px; }
.add-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.add-leg {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px;
}
.add-leg-match { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.add-leg-sel { font-size: 13px; padding: 2px 0; }
.add-json { display: none; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.add-json.open { display: block; margin-bottom: 8px; }
.add-json-toggle { margin-bottom: 12px; }
.add-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.add-field select.note-input, .add-field input.note-input { width: 100%; padding: 7px 10px; }

footer {
  border-top: 1px solid var(--border);
  margin-top: 28px;
}