/* ── Fonts ────────────────────────────────────────────────────────────────── */
/* Primary UI font is the OS native (Segoe UI on Windows, San Francisco on
   Mac, Roboto on Android) — every OS ships its own ClearType / subpixel-
   hinted version, so body text reads crisp at every weight without us
   loading a webfont that isn't hinted for the user's renderer.
   Star Shield V2 self-hosted for the brand wordmark only. Monaco for code. */
@font-face {
  font-family: 'Star Shield V2';
  src: url('/fonts/StarShieldV2.ttf') format('truetype');
  /* Pin to a single weight — the file only ships one cut, so requesting
     other weights makes the browser synthesise bold (which renders blurry). */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Variables (Sentry design system) ─────────────────────────────────────── */
:root {
  /* ── Brand purples ─────────────────────────────────────────────────────── */
  --brand:       #422082;  /* Deep violet — high-emphasis surfaces */
  --brand-dark:  #150f23;  /* Deeper purple — footer / login screen */
  --brand-hi:    #6a5fc1;  /* Sentry purple — primary interactive */

  /* ── Backgrounds (warm purple-blacks, never pure #000) ─────────────────── */
  --bg:          #1f1633;  /* Primary background */
  --bg-2:        #150f23;  /* Deeper sections */
  --bg-3:        #2a1f47;  /* Card surfaces */
  --bg-4:        #362d59;  /* Hover surfaces / dividers */
  --sidebar-bg:  #150f23;
  /* Aliases (without hyphen — used throughout JS/HTML templates) */
  --bg2:         #150f23;
  --bg3:         #2a1f47;
  --bg4:         #362d59;
  /* Surface aliases used by Updates and other secondary sections */
  --surface-1:   #150f23;
  --surface-2:   #2a1f47;
  --surface-3:   #362d59;
  /* Card alias */
  --card:        #2a1f47;

  /* ── Accent ─────────────────────────────────────────────────────────────── */
  --accent:      #6a5fc1;  /* Sentry purple */
  --accent-hi:   #c2ef4e;  /* Lime green — high-visibility CTAs (use sparingly) */
  --accent-soft: #79628c;  /* Muted purple — button backgrounds */
  --accent-coral:#ffb287;  /* Coral — focus state */
  --accent-pink: #fa7faa;  /* Pink — decorative */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  /* Slight warm-cool off-white reduces eye strain vs pure #fff against the
     deep purple. ~96% white. */
  --text:        #f3f1f8;
  --text-dim:    #d8d3e2;
  --text-muted:  #b8afd4;

  /* ── Borders (purple-tinted, not neutral gray) ─────────────────────────── */
  --border:      #362d59;
  --border-hi:   #584674;

  /* ── Selection ─────────────────────────────────────────────────────────── */
  --selected-bg: #422082;

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --green:       #22c55e;
  --green-bg:    #052e16;
  --green-border:#166534;
  --red:         #ef4444;
  --red-bg:      #2d0707;
  --red-border:  #991b1b;
  --yellow:      #ffb287;  /* Coral instead of harsh amber */
  --yellow-bg:   #2d1f0e;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: 'Star Shield V2', system-ui, sans-serif;
  /* OS-native UI font stack — Segoe UI on Windows gets ClearType for free,
     San Francisco on Mac/iOS, Roboto on Android. Crispest baseline on every
     platform without loading a webfont. */
  --font-ui:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    Monaco, Menlo, 'Ubuntu Mono', 'SF Mono', Consolas, monospace;

  /* ── Sizing ────────────────────────────────────────────────────────────── */
  --radius:      8px;       /* Buttons, cards, containers */
  --radius-sm:   6px;       /* Form inputs, small interactive */
  --radius-lg:   12px;      /* Larger containers, glass panels */
  --radius-pill: 999px;
  --header-h:    56px;
  --sidebar-w:   244px;
  --slip-w:      320px;
  --mobile-nav-h: 56px;

  /* ── Shadows (purple-tinted, signature Sentry feel) ────────────────────── */
  --shadow-inset: rgba(0, 0, 0, 0.10) 0px 1px 3px 0px inset;
  --shadow-1:     rgba(0, 0, 0, 0.08) 0px 2px 8px;
  --shadow-2:     rgba(0, 0, 0, 0.10) 0px 10px 15px -3px;
  --shadow-3:     rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem;
  --shadow-glow:  rgba(22, 15, 36, 0.9) 0px 4px 4px 9px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── A11y helpers ──────────────────────────────────────────────────────────────
   .sr-only — content for screen readers only (visually hidden but in DOM).
   .skip-link — hidden until keyboard-focused; lets keyboard users jump past
   the header/sidebar straight into the main panel. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10000;
  background: var(--accent, #6f5cd0);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-ui);
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent-coral, #ffb287);
  outline-offset: 2px;
}

/* ── Global interactive baseline (Sentry spec) ─────────────────────────────────
   Every interactive element gets at least 6px corners and the uppercase /
   letter-spacing button-text language. Specific class rules still override,
   but anything that forgets to specify gets the right floor automatically.
   Excluded: things that legitimately need sharp edges (close-buttons inside
   chips, scroll thumbs, etc.) which set their own radius downstream. */
button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
  border-radius: var(--radius-sm);  /* 6px minimum */
  font-family: var(--font-ui);
}

/* Soft coral focus ring on form controls. Class-specific border-color rules
   still drive the border tint, but everyone gets the glow for free. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 178, 135, 0.25);
}
button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(255, 178, 135, 0.25);
}

/* R168: global :focus-visible fallback so every focusable element (anchors,
   tabindex containers, custom widgets) gets a visible keyboard-focus ring in
   the dark theme. Form controls + buttons above keep their bespoke coral
   glow; this rule catches everything else (links, lb rows, bet cards). */
*:focus-visible {
  outline: 2px solid var(--accent, #2dd4bf);
  outline-offset: 2px;
}
.btn:focus-visible,
.odds-btn:focus-visible {
  outline-color: var(--green);
}

/* R168: Offline / SSE-reconnect banner. Pinned to the very top, above the
   header and modals; uses amber so it reads as a warning without the panic
   of red. iOS safe-area inset honoured so the banner sits below the notch. */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--amber, #d97706);
  color: #fff;
  text-align: center;
  padding: calc(6px + env(safe-area-inset-top)) 6px 6px;
  z-index: 9999;
  font-size: 13px;
  font-weight: 600;
}
.offline-banner.hidden { display: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  /* Default subpixel rendering — DON'T force `antialiased` here. On Windows
     ClearType disables itself when antialiased mode is set, which makes text
     look blurry/soft. Mac retina is already crisp without overrides. */
  text-rendering: optimizeLegibility;
}

/* Display tier — Star Shield V2 for hero / brand text.
   Force font-weight: normal everywhere it's used. The font ships a single
   weight; requesting bold makes the browser fake it (renders fuzzy). */
.display,
.welcome-section-hero,
.login-title,
.welcome-hello,
.header-logo-text {
  font-family: var(--font-display);
  font-weight: normal !important;
  letter-spacing: 0.02em;
}
/* ".Tips" in the brand wordmark — site lime-green accent. */
.logo-tips { color: var(--accent-hi); }

/* Code blocks */
code, pre, .mono { font-family: var(--font-mono); }

/* ── Login Screen ───────────────────────────────────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-screen.hidden { display: none; }

.login-box {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  padding: 40px 36px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.login-logo {
  font-size: 48px;
  text-align: center;
  display: block;
  margin-bottom: 12px;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin-bottom: 6px;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-input {
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}

.login-input:focus { border-color: var(--accent-hi); }

.login-error {
  color: #fca5a5;
  font-size: 13px;
  text-align: center;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.login-error.hidden { display: none; }

.login-btn {
  padding: 13px;
  font-size: 15px;
  width: 100%;
  margin-top: 4px;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  /* Subtle glass feel — Sentry uses backdrop-filter on layered surfaces */
  backdrop-filter: blur(12px) saturate(160%);
}

/* Brand button — the prawn icon doubles as the sidebar toggle. */
.header-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  white-space: nowrap;
  color: var(--text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Reset native button styles */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  margin-left: -4px;
  border-radius: 10px;
  font-family: inherit;
  transition: background 0.15s, transform 0.12s;
}
.header-logo:hover  { background: rgba(255,255,255,0.06); }
.header-logo:active { transform: scale(0.96); }
.header-logo-emoji {
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  transition: transform 0.25s ease;
}
.header-logo:hover .header-logo-emoji { transform: rotate(-12deg) scale(1.08); }

.header-bank {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Bank stat pills — outlined boxes that pop the lime accent on hover so
   they read as part of the same button language as the right-side pills.
   Stats are non-interactive so the active treatment fires on hover only. */
.bank-item {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bank-item:hover {
  border-color: var(--accent-hi);
  background: rgba(194, 239, 78, 0.08);
}
.bank-item:hover .bank-label { color: var(--accent-hi); }

.bank-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  transition: color 0.15s;
}

.bank-value {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.bank-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  display: none;  /* outlined pills don't need dividers */
}

#pnlDisplay.positive { color: #86efac; }
#pnlDisplay.negative { color: #fca5a5; }

/* ── User Pill ──────────────────────────────────────────────────────────────── */
.user-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.user-pill:hover {
  background: rgba(194, 239, 78, 0.10);
  border-color: var(--accent-hi);
}
.user-pill:hover .user-pill-name { color: var(--accent-hi); }

.user-pill-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-pill-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.user-pill-bankroll {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  line-height: 1.3;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.header-my-bets-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 13px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.header-my-bets-btn:hover {
  background: rgba(194, 239, 78, 0.10);
  border-color: var(--accent-hi);
  color: var(--accent-hi);
}
.header-pending-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--yellow);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.header-pending-badge.hidden { display: none; }

.header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.header-actions .btn-ghost {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}

.header-actions .btn-ghost:hover {
  background: rgba(194, 239, 78, 0.10);
  border-color: var(--accent-hi);
  color: var(--accent-hi);
}

/* ── Left Sidebar (Tab Navigation) ────────────────────────────────────────── */
.tab-nav {
  position: fixed;
  left: 0;
  top: var(--header-h);
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 150;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 12px 0 16px;
}

.tab-nav::-webkit-scrollbar { display: none; }

.sidebar-brand {
  display: none; /* shown only on mobile overlay if needed */
}

.sidebar-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 12px 16px 4px;
}

/* ── Sidebar lock toggle ─────────────────────────────────────────────────────
   Sits at the bottom of the sidebar. Click toggles between locked (default)
   and unlocked. Unlocked state lets you drag tabs to reorder them within
   their section; locked state freezes the order. */
.sidebar-lock-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  padding: 12px 16px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
}
.sidebar-lock-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.sidebar-lock-icon { font-size: 14px; line-height: 1; }
.sidebar-lock-btn.unlocked { color: var(--accent-coral); }
.sidebar-lock-btn.unlocked:hover { color: #ffd0b0; }

/* Visual cue while drag-reordering is enabled */
.tab-nav.unlocked .tab-btn { cursor: grab; }
.tab-nav.unlocked .tab-btn:active { cursor: grabbing; }
.tab-nav.unlocked .tab-btn.dragging { opacity: 0.45; }
.tab-nav.unlocked .tab-btn.drop-above { box-shadow: inset 0 2px 0 0 var(--accent-coral); }
.tab-nav.unlocked .tab-btn.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent-coral); }

.sidebar-section-label:first-of-type { padding-top: 4px; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
  text-align: left;
  width: 100%;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

.tab-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }

.tab-btn.active {
  background: var(--selected-bg);
  color: var(--accent-hi);
  border-right: 3px solid var(--accent-hi);
}

.tab-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.tab-label { flex: 1; }

.tab-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
}

.tab-badge.hidden { display: none; }
.tab-btn.hidden   { display: none; }
.tab-pane         { display: none; flex: 1; overflow-y: auto; }
.tab-pane.active  { display: flex; flex-direction: column; }

/* Mobile swipe-between-tabs visual acknowledgement.
   The class is added by initSwipeNav() right before switchTab(), then removed
   ~320ms later. Pure transform — no layout impact, GPU-friendly. */
@keyframes tabSwipeInRight {
  from { transform: translateX(24px); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes tabSwipeInLeft {
  from { transform: translateX(-24px); opacity: 0.4; }
  to   { transform: translateX(0);     opacity: 1; }
}
.tab-pane.tab-swipe-in-right { animation: tabSwipeInRight 220ms ease-out; }
.tab-pane.tab-swipe-in-left  { animation: tabSwipeInLeft  220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tab-pane.tab-swipe-in-right,
  .tab-pane.tab-swipe-in-left { animation: none; }
}

/* ── Three-column Layout ────────────────────────────────────────────────────── */
.layout {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
}

.main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border-right: 1px solid var(--border);
}

/* Bet slip — always visible on desktop */
.slip-panel {
  width: var(--slip-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  overflow: hidden;
}

/* Legacy has-bets class — no longer controls slip visibility on desktop */
.layout.has-bets .slip-panel { width: var(--slip-w); }

/* ── Desktop bet-slip collapse (2026-06-14) ──────────────────────────────────
   Reclaims the 320px slip column on PC. The layout is flex, so zeroing the
   slip width lets .main-panel (flex:1) grow to fill. Scoped to >768px so it
   never interferes with the mobile slide-over (which lives in the max-width:768
   block). State persists in localStorage('slipCollapsed'); restored on boot. */
.slip-panel { transition: width .18s ease, border-color .18s ease; }
.slip-header-actions { display: flex; align-items: center; gap: 6px; }
.slip-collapse-btn { display: none; }   /* desktop-only; revealed below */
.slip-reopen-rail  { display: none; }   /* shown only when collapsed (desktop) */
@media (min-width: 769px) {
  .slip-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--text-dim); cursor: pointer;
    font-size: 18px; line-height: 1; transition: background .15s, color .15s;
  }
  .slip-collapse-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
  .layout.slip-collapsed .slip-panel { width: 0; min-width: 0; border-left: 0; }
  .layout.slip-collapsed .slip-reopen-rail {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 40; padding: 14px 7px; cursor: pointer;
    background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px;
    box-shadow: -2px 0 12px rgba(0,0,0,0.28);
    transition: background .15s;
  }
  .layout.slip-collapsed .slip-reopen-rail:hover { background: var(--bg-3, var(--bg-2)); filter: brightness(1.15); }
  .slip-reopen-chevron { font-size: 16px; color: var(--text-dim); }
  .slip-reopen-icon { font-size: 16px; }
  .slip-reopen-badge {
    background: var(--accent-hi, var(--green)); color: #fff; border-radius: 9px;
    padding: 1px 6px; font-size: 11px; font-weight: 700; min-width: 16px; text-align: center;
  }
  .slip-reopen-badge.hidden { display: none; }
}

/* ── Sport tabs (sub-header inside tab pane) ─────────────────────────────── */
/* ── Bet filter bar ──────────────────────────────────────────────────────────── */
.bet-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.bet-filter-sel {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s;
}
.bet-filter-sel:focus { outline: none; border-color: var(--accent); }
.bet-filter-sel option { background: var(--bg-3); }

/* Bot/Human bucket checkboxes — sit inline next to the user dropdown. */
.bet-bucket-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, color .15s, background .15s;
}
.bet-bucket-box:hover { border-color: var(--border-hi); color: var(--text); }
.bet-bucket-box input { accent-color: var(--accent-hi); cursor: pointer; }
.bet-bucket-box:has(input:checked) {
  border-color: var(--accent-hi);
  color: var(--accent-hi);
  background: rgba(194, 239, 78, 0.06);
}
.bet-filter-clear {
  background: none;
  border: 1px solid var(--red-border);
  color: var(--red);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
}
.bet-filter-clear:hover { background: var(--red-bg); }

.sport-bar {
  padding: 8px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sport-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.12s;
  white-space: nowrap;
}

.sport-btn:hover { border-color: var(--accent-hi); color: var(--text); }
.sport-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.games-meta-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Game cards ─────────────────────────────────────────────────────────────── */
#gamesContainer, #pickemGames {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-group { display: flex; flex-direction: column; gap: 6px; }
.date-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 6px 0 2px;
}

.game-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
}

.game-card:hover { border-color: var(--border-hi); }
.game-card.is-live { border-left: 3px solid var(--yellow); }
.game-card.is-final { opacity: 0.6; }

.game-card.collapsed .game-body { display: none; }
.game-card.collapsed .game-collapse-icon { transform: rotate(180deg); }

.game-collapse-icon {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
  order: 3;
}

.game-body { }

.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 14px 6px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  gap: 6px 12px;
  cursor: pointer;
  user-select: none;
}

.game-head:hover { background: var(--bg-3); }

.game-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  order: 1;
}

.team-away, .team-home {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.at-sign {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.game-info { text-align: right; flex-shrink: 0; order: 2; }

.game-time {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
}

.game-status {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.game-status.live { color: var(--yellow); font-weight: 600; }

.game-mkt-count {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 6px;
  margin-top: 2px;
}

.game-source {
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-source.mock { color: var(--yellow); }

/* ── Market groups ───────────────────────────────────────────────────────────── */
.market-group {
  border-top: 1px solid var(--border);
}

.mg-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-2);
  transition: background 0.1s;
}
.mg-header:hover { background: var(--bg-3); }

.mg-icon  { font-size: 13px; flex-shrink: 0; }
.mg-label { font-size: 11px; font-weight: 700; color: var(--text-dim); flex: 1; text-transform: uppercase; letter-spacing: 0.6px; }
.mg-count { font-size: 10px; color: var(--text-muted); background: var(--bg-4); border-radius: 8px; padding: 1px 6px; min-width: 18px; text-align: center; }
.mg-arrow { font-size: 9px; color: var(--text-muted); transition: transform 0.15s; flex-shrink: 0; }

.market-group.mg-collapsed .mg-body  { display: none; }
.market-group.mg-collapsed .mg-arrow { transform: rotate(180deg); }

.mg-body { padding-bottom: 6px; }

/* ── Period / half / quarter sub-groups — visually distinct from main markets ── */
.market-group.mg-period {
  border-left: 3px solid var(--bg-4);
}
.market-group.mg-period .mg-header {
  padding-left: 18px;
  background: var(--bg);
}
.market-group.mg-period .mg-header:hover {
  background: var(--bg-2);
}
.market-group.mg-period .mg-label {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.7px;
}

/* ── Nested market groups (player props) ──────────────────────────────── */
.mg-body-nested { padding: 0; }
.mg-nested { margin: 0; border-radius: 0; border-left: 3px solid var(--border); }
.mg-nested .mg-header { padding: 8px 12px; font-size: 13px; background: var(--bg2); }
.mg-nested .mg-header:hover { background: var(--bg3); }
.mg-nested .mg-body { border-top: 1px solid var(--border); }

/* Player-prop search toolbar (live-filter + category chips) */
.pp-toolbar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.pp-search {
  width: 100%; padding: 7px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 13px;
}
.pp-search:focus { outline: none; border-color: var(--accent); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 12px;
  border: 1px solid var(--border2); background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.pp-chip:hover { background: var(--bg3); color: var(--text); border-color: var(--accent); }

/* ── Weather & goalie badges ──────────────────────────────────────────── */
.game-weather-badge { font-size: 14px; margin-left: 8px; cursor: default; vertical-align: middle; }
/* Rain pulse — mirrors .lb-streak.lb-streak-fire timing (1.4s ease-in-out, 3
   iterations) so it feels like the same family of "heads up, this matters"
   cue. Applied only on NRL/AFL games where rain is forecast at kickoff. */
.game-weather-badge.game-weather-rain-pulse {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 4px;
  animation: game-weather-rain-pulse 1.4s ease-in-out 3;
}
@keyframes game-weather-rain-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(56,189,248,0); }
}
@media (prefers-reduced-motion: reduce) {
  .game-weather-badge.game-weather-rain-pulse { animation: none; }
}
.stadium-name-row { font-size: 11px; color: var(--text-muted); padding: 0 0 2px; width: 100%; order: 11; }
.stadium-link { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); }
.stadium-link:hover { color: var(--green); }
/* Matchup → Google-search link on bet cards / slip / decision cards.
   Inherits the surrounding text colour so cards look unchanged; underline
   appears only on hover/keyboard focus. */
.matchup-link { color: inherit; text-decoration: none; cursor: pointer; }
.matchup-link:hover,
.matchup-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.goalie-starters-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  flex-wrap: wrap;
  width: 100%;
  order: 10;
}
.goalie-vs { font-size: 10px; color: var(--text-muted); }
.goalie-badge { font-size: 11px; padding: 1px 7px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.goalie-confirmed { color: var(--green); background: rgba(78,205,196,0.12); border: 1px solid var(--green); }
.goalie-likely    { color: #f5a623; background: rgba(245,166,35,0.12); border: 1px solid #f5a623; }

/* ── Game Preview Panel ──────────────────────────────────────────────────────── */
.game-preview-panel { padding: 4px 0 8px; font-size: 13px; }
.gp-section-head {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 14px 4px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.gp-section-head:first-child { border-top: none; margin-top: 0; }
.gp-no-data { padding: 4px 14px; font-size: 12px; color: var(--text-muted); }

/* form */
.gp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 14px; }
.gp-form-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.gp-abbr { font-size: 11px; color: var(--text-muted); min-width: 28px; font-weight: 600; }
.gp-record { font-size: 11px; color: var(--text-muted); }
.gp-form-detail { font-size: 10px; color: var(--text-muted); line-height: 1.6; margin-bottom: 6px; }

/* win probability */
.gp-prob-row { display: flex; align-items: center; gap: 8px; padding: 4px 14px 0; }
.gp-prob-team { font-size: 12px; min-width: 70px; white-space: nowrap; }
.gp-prob-team.right { text-align: right; }
.gp-prob-bar {
  flex: 1; height: 8px; background: var(--bg3); border-radius: 4px;
  display: flex; overflow: hidden;
}
.gp-prob-fill.away { background: var(--accent); height: 100%; border-radius: 4px 0 0 4px; }
.gp-prob-fill.home { background: var(--green); height: 100%; border-radius: 0 4px 4px 0; }
.gp-prob-odds { font-size: 11px; color: var(--text-muted); padding: 3px 14px 4px; }

/* stats table */
.gp-stat-table { padding: 0 14px; }
.gp-stat-header { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; text-align: center; }
.gp-stat-header span:first-child { text-align: left; }
.gp-stat-header span:last-child  { text-align: right; }
.gp-stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--border); align-items: center; }
.gp-stat-label { text-align: center; font-size: 10px; color: var(--text-muted); }
.gp-stat-val { font-weight: 600; }
.gp-stat-row .gp-stat-val:last-child { text-align: right; }

/* H2H */
.gp-h2h-summary { padding: 2px 14px 6px; font-size: 12px; font-weight: 600; }
.gp-h2h-list { padding: 0 14px; }
.gp-h2h-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.gp-h2h-date { color: var(--text-muted); font-size: 11px; min-width: 78px; }
.gp-h2h-score { flex: 1; }
.gp-h2h-winner { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.gp-h2h-winner.aw { background: var(--accent); color: #fff; }
.gp-h2h-winner.hw { background: var(--green); color: #000; }

/* consensus */
.gp-consensus-row { padding: 4px 14px; }
.gp-cons-label { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.gp-cons-source { font-style: italic; margin-left: 4px; }
.gp-cons-track { background: var(--bg3); border-radius: 4px; height: 8px; overflow: hidden; display: flex; margin-bottom: 3px; }
.gp-cons-away { background: var(--accent); height: 100%; border-radius: 4px 0 0 4px; }
.gp-cons-nums { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }

/* players */
.gp-players-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px; }
.gp-players-header { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.gp-player-row { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.gp-player-name { color: var(--text); }
.gp-player-stats { color: var(--text-muted); font-size: 10px; }

/* ── Updates Tab ─────────────────────────────────────────────────────────────── */
.updates-toolbar { border-bottom: 1px solid var(--border); }
/* Sport row sits above category row — give it air below so the two rows
   are clearly separate, with a faint divider in between. */
.updates-toolbar > .sport-bar { padding: 12px 16px 10px !important; }
.updates-cat-bar {
  display: flex; gap: 8px; padding: 10px 16px;
  overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--border);
}
.updates-cat-bar::-webkit-scrollbar { display: none; }
.upd-cat-btn {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 16px;
  color: var(--text-muted); font-size: 12px; padding: 5px 14px;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.upd-cat-btn:hover  { border-color: var(--accent); color: var(--text); }
.upd-cat-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.updates-meta-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 10px; font-size: 11px; gap: 8px;
  border-top: 1px solid var(--border);
}
.upd-team-filter {
  flex: 1; max-width: 220px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 4px 10px; font-size: 12px;
}
.upd-team-filter:focus { outline: none; border-color: var(--accent); }
.upd-source {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 5px; border-radius: 3px;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border);
  vertical-align: middle; margin-left: 4px;
}

#updatesContainer { padding: 8px 12px 16px; }

.upd-section-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 12px 4px 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.upd-count { font-size: 10px; font-weight: 400; color: var(--text-muted); }

/* Ladder tables */
.upd-ladders-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.upd-ladder-block { flex: 1 1 220px; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.upd-ladder-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 7px 10px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); }
.upd-ladder-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.upd-ladder-table thead th { padding: 4px 6px; color: var(--text-muted); font-weight: 600; text-align: center; border-bottom: 1px solid var(--border); }
.upd-ladder-table thead th:nth-child(2) { text-align: left; }
.upd-ladder-table tbody td { padding: 4px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.04); }
.upd-ladder-table tbody td.lad-team { text-align: left; font-weight: 600; color: var(--text); }
.upd-ladder-table tbody tr:last-child td { border-bottom: none; }
.ladder-in td { color: var(--text); }
.ladder-bubble { border-top: 2px solid var(--green) !important; }
.ladder-bubble td { color: var(--text-muted); }
.playoff-spot td { color: var(--text-muted); }
.str-w { color: var(--green); font-weight: 700; }
.str-l { color: var(--red); font-weight: 700; }

/* Injuries */
.upd-lineups-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.upd-lineup-card { flex: 1 1 320px; min-width: 280px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.upd-lineup-matchup { font-size: 13px; font-weight: 700; padding: 8px 12px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); color: var(--text); }
.upd-lu-header { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 4px; padding: 5px 10px 3px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.upd-lu-col-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.upd-lu-row { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 4px; font-size: 11px; padding: 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); align-items: start; }
.upd-lu-row:last-child { border-bottom: none; }
.upd-lu-lbl { color: var(--text-muted); font-weight: 700; padding-top: 1px; }
.upd-lu-side { color: var(--text); line-height: 1.35; }
.upd-lu-side-right { text-align: right; }
/* legacy classes kept for compatibility */
.upd-lineup-teams { display: flex; gap: 0; }
.upd-lineup-team { flex: 1; padding: 8px 10px; border-right: 1px solid var(--border); }
.upd-lineup-team:last-child { border-right: none; }
.upd-lineup-teamname { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 5px; }
.upd-lu-line { display: flex; gap: 6px; font-size: 11px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.upd

.upd-injuries-grid {
  display: flex; flex-direction: column; gap: 12px;
}
.upd-team-group {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.upd-team-head {
  padding: 7px 12px; font-size: 12px; background: var(--bg3);
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 5px;
}
.upd-team-full { color: var(--text-muted); font-size: 11px; font-weight: 400; }

.upd-injury-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.upd-injury-card:last-child { border-bottom: none; }

.upd-inj-headshot {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--bg3);
}
.upd-inj-headshot-team {
  object-fit: contain;
  padding: 4px;
  background: #0f0f17;
  border: 1px solid var(--border);
}
.upd-inj-headshot-placeholder {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0;
}

.upd-inj-body     { flex: 1; min-width: 0; }
.upd-inj-top      { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.upd-inj-name     { font-size: 13px; font-weight: 600; }
.upd-inj-pos      { font-size: 10px; color: var(--text-muted); background: var(--bg3); padding: 1px 5px; border-radius: 3px; }
.upd-inj-status   {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
  border: 1px solid; margin-left: auto;
}
.upd-inj-type     { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.upd-inj-comment  { font-size: 11px; color: var(--text-muted); line-height: 1.5; font-style: italic; margin-bottom: 3px; }
.upd-inj-meta     { display: flex; gap: 12px; font-size: 10px; color: var(--text-muted); }

/* News */
.upd-news-list { display: flex; flex-direction: column; gap: 8px; }

.upd-news-card {
  display: flex; gap: 10px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; text-decoration: none; color: var(--text);
  transition: border-color .15s;
}
.upd-news-card:hover { border-color: var(--accent); }
a.upd-news-card { display: flex; }

.upd-news-img {
  width: 80px; height: 60px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}

.upd-news-body  { flex: 1; min-width: 0; }
.upd-news-meta  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.upd-sport-icon { font-size: 12px; }
.upd-cat-tag    { font-size: 10px; font-weight: 700; }
.upd-team-badge {
  font-size: 10px; font-weight: 600; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
  color: var(--text-muted);
}
.upd-news-date     { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.upd-news-headline { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.upd-news-desc     { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* Team select */
.upd-team-select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* Trades */
.upd-trades-list { display:flex; flex-direction:column; gap:8px; padding:0 16px 12px; }
.upd-trade-card { background:var(--surface-2); border-radius:8px; padding:10px 12px; border-left:3px solid var(--accent); }
.upd-trade-meta { display:flex; gap:10px; align-items:center; margin-bottom:4px; }
.upd-trade-date { font-size:11px; color:var(--text-muted); }
.upd-trade-teams { font-size:12px; font-weight:700; color:var(--accent-hi); }
.upd-trade-summary { font-size:13px; color:var(--text); }

/* New feed (chronological mixed view) */
.upd-new-feed { display:flex; flex-direction:column; gap:6px; padding:0 16px 12px; }
.upd-new-feed-item { }
.upd-new-feed-injury .upd-inj-card { margin-bottom:0; }
.upd-new-feed-trade .upd-trade-card { }

/* Welcome news — card grid */
.welcome-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 12px 4px;
}
.welcome-news-card {
  display: block;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.welcome-news-card-date {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5db8f0;
  font-weight: 700;
  margin-bottom: 4px;
}
.welcome-news-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.welcome-news-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
/* Legacy row style kept for safety */
.welcome-news { display:flex; flex-direction:column; gap:6px; }
.welcome-news-row { display:flex; justify-content:space-between; align-items:start; gap:8px; padding:4px 0; border-bottom:1px solid var(--border); }



/* ── Live Scores ─────────────────────────────────────────────────────────────── */
#liveScoresContainer { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }

/* ── Live score card shell ─────────────────────────────────────────────────── */
.ls-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.ls-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.ls-card-live  { border-left: 3px solid var(--green); }
.ls-card-break { border-left: 3px solid #e8b84b; }
.ls-card-final { border-left: 3px solid var(--border); opacity: .80; }
.ls-card-pre   { border-left: 3px solid var(--accent); }

/* ── Card header ──────────────────────────────────────────────────────────── */
.ls-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 5px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  min-height: 30px;
}
.ls-sport-badge { font-size: 13px; flex-shrink: 0; }
.ls-status-live  { color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.ls-status-break { color: #e8b84b; font-weight: 700; }
.ls-status-final { color: var(--text-muted); font-weight: 600; }
.ls-status-pre   { color: var(--accent); font-weight: 600; }

.ls-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  animation: ls-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ls-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

.ls-period-info { color: var(--text-muted); font-size: 11px; }
.ls-break-label { color: #e8b84b !important; font-weight: 600; }
.ls-countdown   { font-size: 11px; font-weight: 700; color: #e8b84b; margin-left: 4px; font-variant-numeric: tabular-nums; }
.ls-venue { margin-left: auto; color: var(--text-muted); font-size: 10px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* ── Scoreboard — grid: [home + score] [vs] [away + score] ──────────────────── */
.ls-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 14px 12px;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.ls-sb-team {
  display: flex; flex-direction: column; gap: 4px;
}
.ls-sb-home { align-items: flex-start; text-align: left; }
.ls-sb-away { align-items: flex-end; text-align: right; }
.ls-sb-abbr {
  font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1;
  color: var(--text-muted);
  transition: color 0.2s;
}
.ls-sb-name {
  font-size: 11px; color: var(--text-muted); line-height: 1.3;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-sb-lead .ls-sb-abbr { color: var(--text); }
.ls-sb-team-score {
  font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; margin-top: 4px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.ls-sb-score-lead { color: var(--text); }
.ls-sb-vs {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-transform: lowercase;
  padding: 0 18px;
  align-self: flex-start;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* active situations (NRL sin bin / send off) */
.ls-situations {
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.ls-situation {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.ls-situation:last-child { border-bottom: none; }
.ls-situation.ls-sinbin  { background: rgba(234, 179, 8, 0.08); border-left: 3px solid #eab308; }
.ls-situation.ls-sendoff { background: rgba(239, 68, 68, 0.10); border-left: 3px solid #ef4444; }
.ls-situation-icon { font-size: 14px; }
.ls-situation-text { flex: 1; font-weight: 500; }
.ls-situation-time { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }

/* NHL live player stats */
.ls-player-stats-wrap { border-top: 1px solid var(--border); padding: 6px 14px 10px; }
.ls-pstats-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 5px 11px; border-radius: var(--radius-sm); font-size: 11px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.2px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ls-pstats-toggle:hover { color: var(--text); border-color: var(--border-hi); background: rgba(255,255,255,0.04); }
.ls-pstats-body { margin-top: 8px; }
.ls-pstats-empty { color: var(--text-muted); font-size: 11px; padding: 6px 0; }
.pstats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 768px) { .pstats-grid { grid-template-columns: 1fr; } }
.pstats-team-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.pstats-team-away .pstats-team-label { color: var(--red); }
.pstats-team-home .pstats-team-label { color: var(--green); }
.pstats-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pstats-table th { text-align: right; padding: 3px 4px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.pstats-table th:first-child { text-align: left; }
.pstats-table td { text-align: right; padding: 3px 4px; font-variant-numeric: tabular-nums; }
.pstats-table td:first-child { text-align: left; }
.pstats-table tr:hover td { background: rgba(255,255,255,0.02); }
.pstats-num { color: var(--text-muted); margin-right: 4px; font-size: 10px; }
.pstats-pos { color: var(--text-muted); margin-left: 4px; font-size: 10px; }

/* ── Line score table (quarter / inning breakdowns) ────────────────────────── */
.ls-linescore-wrap {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  background: var(--bg3);
}
.ls-linescore {
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 100%;
}
.ls-linescore-mlb { font-size: 11px; }

/* Header cells */
.ls-ls-team-head { text-align: left; padding: 3px 10px 3px 0; color: transparent; width: 28px; }
.ls-ls-head {
  text-align: center; padding: 3px 7px;
  color: var(--text-muted); font-weight: 600; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
.ls-ls-head-cur { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
.ls-ls-t-head   { border-left: 1px solid var(--border); font-weight: 700; color: var(--text); }
.ls-ls-rhe-head { border-left: 1px solid var(--border); color: var(--text-muted); }

/* Data cells */
.ls-ls-cell  { text-align: center; padding: 4px 7px; color: var(--text-muted); }
.ls-ls-current { text-align: center; padding: 4px 7px; color: var(--text); font-weight: 600; background: rgba(124,58,237,0.08); }
.ls-ls-total { text-align: center; padding: 4px 10px; font-weight: 700; color: var(--text); border-left: 1px solid var(--border); }
.ls-ls-rhe   { text-align: center; padding: 4px 7px; color: var(--text-muted); }
.ls-mlb-rhe  { border-left: 1px solid var(--border); }
.ls-linescore td:first-child { text-align: left; font-weight: 700; padding: 4px 10px 4px 0; color: var(--text); }

/* events */
.ls-events {
  border-top: 1px solid var(--border);
  padding: 6px 0 4px;
}
.ls-period-head {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 14px 3px;
  display: flex; align-items: center; gap: 5px;
}
.ls-period-head:hover { color: var(--text); }
.ls-collapse-hint {
  font-size: 10px; color: var(--text-muted); margin-left: auto; padding-right: 4px;
}
.ls-scoreboard:hover .ls-collapse-hint { color: var(--text); }
.ls-event-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.ls-event-row:last-child { border-bottom: none; }
.ls-event-left  { display: flex; align-items: center; gap: 4px; min-width: 90px; }
.ls-event-main  { flex: 1; }
.ls-event-right { min-width: 48px; text-align: right; }

/* Split scorers layout — away left, home right (nrl.com-style) */
.ls-event-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 8px;
  padding: 4px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.ls-event-split:last-child { border-bottom: none; }
.ls-event-cell {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 18px;
}
.ls-event-cell.ls-event-empty { visibility: hidden; }
.ls-event-cell-top { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); }
.ls-event-cell-main { font-size: 12px; }
.ls-event-split .ls-event-cell:nth-child(1) { text-align: left; }
.ls-event-split .ls-event-cell:nth-child(3) { text-align: right; }
.ls-event-split .ls-event-cell:nth-child(3) .ls-event-cell-top { justify-content: flex-end; }
.ls-event-divider { background: var(--border); width: 1px; align-self: stretch; }
.ls-event-team  { font-size: 10px; font-weight: 700; color: var(--text-muted); min-width: 28px; }
.ls-event-type  { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; }
.ls-event-time  { font-size: 11px; color: var(--text-muted); }
.ls-assists     { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.ls-no-events   { display: none; } /* suppress empty state — no wasted space */

/* ── MLB count & bases display ──────────────────────────────────────────────── */
.ls-mlb-count {
  display: flex; align-items: center; gap: 20px;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg3);
}
.ls-count-group { display: flex; align-items: center; gap: 6px; }
.ls-count-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); min-width: 10px;
}
.ls-count-dots { display: flex; gap: 4px; }
.ls-count-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg4, #1a1a2e);
  border: 1.5px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.ls-count-dot.ls-dot-on { border-color: transparent; }
.ls-dot-ball.ls-dot-on   { background: #22c55e; }  /* green */
.ls-dot-strike.ls-dot-on { background: #f59e0b; }  /* amber */
.ls-dot-out.ls-dot-on    { background: #ef4444; }  /* red */

/* Baseball diamond */
.ls-diamond-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-left: auto;
}
.ls-diamond-row { display: flex; align-items: center; gap: 5px; }
.ls-diamond-top { margin-bottom: 0; }
.ls-diamond-base {
  width: 13px; height: 13px;
  border: 2px solid var(--border);
  transform: rotate(45deg);
  background: var(--bg4, #1a1a2e);
  transition: background 0.15s, border-color 0.15s;
  border-radius: 2px;
}
.ls-diamond-base.ls-base-on {
  background: #f59e0b;
  border-color: #d97706;
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
}
.ls-diamond-home {
  width: 10px; height: 10px;
  border: 2px solid var(--border);
  border-radius: 2px;
  background: var(--bg4, #1a1a2e);
}

/* ── Market rows ─────────────────────────────────────────────────────────────── */
.markets { padding: 0; }

.market-row {
  display: flex;
  align-items: center;
  padding: 3px 14px;
  gap: 8px;
}
.market-group.mg-period .market-row {
  padding: 3px 12px 3px 18px;
}

.market-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  width: 96px;
  flex-shrink: 0;
  font-weight: 600;
  line-height: 1.3;
}

.market-row-wide .market-label {
  width: 120px;
  font-size: 10px;
}

.market-btns {
  display: flex;
  gap: 5px;
  flex: 1;
}

/* ── Odds buttons ────────────────────────────────────────────────────────────── */
.odds-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 6px 5px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
  min-width: 0;
}

.odds-btn:hover:not(:disabled) {
  background: var(--bg-4);
  border-color: var(--accent-hi);
}

.odds-btn.selected {
  background: var(--selected-bg);
  border-color: var(--accent-hi);
}

.odds-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.odds-price {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-hi);
  line-height: 1.2;
}

.odds-btn.selected .odds-price { color: #fff; }

.odds-label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Pinned odds ─────────────────────────────────────────────────────────────── */
.odds-btn.pinned {
  border-color: var(--accent);
  position: relative;
}
.odds-btn.pinned .odds-price { color: var(--accent-hi); }
.odds-btn.pinned.selected .odds-price { color: #fff; }
.pin-dot {
  font-size: 8px;
  vertical-align: super;
  margin-left: 2px;
  opacity: 0.8;
}
.pinned-badge {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Edit odds button (admin only) */
.btn-edit-odds {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}
.btn-edit-odds:hover { border-color: var(--accent); color: var(--accent-hi); }

/* Admin pin odds modal */
.admin-pin-modal { padding: 0; }
.admin-pin-modal h3 { font-size: 16px; font-weight: 700; padding: 16px 20px 8px; border-bottom: 1px solid var(--border); }
.pin-modal-hint { font-size: 12px; color: var(--text-muted); padding: 8px 20px; }
.pin-table-wrap { max-height: 55vh; overflow-y: auto; padding: 0 16px; }
.pin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pin-table th { text-align: left; color: var(--text-muted); font-size: 11px; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-3); }
.pin-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.pin-table tr:last-child td { border-bottom: none; }
.pin-table tr.pin-row-active { background: rgba(124,58,237,0.08); }
.pin-col-group { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.pin-col-label { color: var(--text); }
.pin-col-odds { width: 140px; }
.pin-col-status { width: 28px; text-align: center; }
.pin-odds-input {
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  padding: 4px 8px;
  width: 120px;
  outline: none;
}
.pin-odds-input:focus { border-color: var(--accent); }
.pin-indicator { font-size: 13px; }
.pin-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid var(--border); margin-top: 4px; }

/* ── Slip drag handle (mobile only) ────────────────────────────────────────── */
.slip-drag-handle {
  display: none;
  width: 40px;
  height: 4px;
  background: var(--border-hi);
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Bet Slip ────────────────────────────────────────────────────────────────── */
.slip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 13px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.slip-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.slip-mode-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mode-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.12s;
}


.mode-btn.active { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }

.slip-body { flex: 1; overflow-y: auto; padding: 10px; }

.slip-hint {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 16px;
  line-height: 1.7;
}

/* ── Slip items ──────────────────────────────────────────────────────────────── */
.slip-item {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
}

.slip-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.slip-game-name {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  line-height: 1.3;
}

.slip-pick { font-size: 13px; font-weight: 700; margin-bottom: 1px; }
.slip-pick .pick-odds { color: var(--accent-hi); margin-left: 4px; }
.slip-market-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }

.slip-stake-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.slip-stake-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.stake-input {
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  color: #fff;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 600;
  width: 76px;
  outline: none;
}

.stake-input:focus { border-color: var(--accent-hi); }

.win-preview { font-size: 12px; color: var(--green); flex: 1; white-space: nowrap; }
.win-preview small { color: var(--text-muted); }

.slip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.1s;
}

.slip-remove:hover { color: var(--red); }

/* ── Parlay mode ─────────────────────────────────────────────────────────────── */
.parlay-legs { margin-bottom: 10px; }

.parlay-leg {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12px;
}

.parlay-leg-pick { font-weight: 700; flex: 1; }
.parlay-leg-odds { font-weight: 700; color: var(--accent-hi); }
.parlay-leg-game { font-size: 11px; color: var(--text-muted); }

.parlay-combined {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.parlay-combined strong { font-size: 20px; font-weight: 700; color: var(--green); }

.parlay-return { text-align: center; margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.parlay-return strong { color: var(--green); font-size: 18px; }

/* ── Unified slip sections ───────────────────────────────────────────────────── */
.slip-selections { margin-bottom: 4px; }

.slip-leg {
  padding: 8px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.slip-leg-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.slip-section {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
}

.slip-section-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.slip-section-odds {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.slip-item { margin-bottom: 8px; }
.slip-item:last-child { margin-bottom: 0; }

/* ── SGM group in slip ───────────────────────────────────────────────────────── */
.slip-sgm-group { border-color: #7c4dff44; background: rgba(124,77,255,0.06); }
.slip-sgm-group .slip-section-head { color: #b39ddb; }
.sgm-slip-leg {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
}
.sgm-slip-leg:last-of-type { border-bottom: none; }
.sgm-slip-label { color: var(--text); flex: 1; }
.sgm-slip-odds { color: var(--green); font-weight: 600; font-size: 11px; margin-left: 8px; }
.slip-remove-sgm {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 11px; padding: 0 2px; margin-left: auto;
}

.slip-item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.slip-item-game {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.slip-combo { margin-bottom: 8px; }
.slip-combo:last-child { margin-bottom: 0; }

.slip-combo-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.slip-combo-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Slip footer ─────────────────────────────────────────────────────────────── */
.slip-footer {
  border-top: 1px solid var(--border);
  padding: 12px;
  flex-shrink: 0;
  background: var(--bg-2);
}

#slipTotals {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#slipTotals strong { color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
/* ── Buttons (Sentry design system) ───────────────────────────────────────
   Uppercase + 0.2px letter-spacing across the board. Inset shadow on the
   primary button creates the signature "tactile pressed" feel. */
.btn {
  background: var(--accent-soft);
  color: #fff;
  border: 1px solid var(--border-hi);
  border-radius: 13px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  transition: background 0.18s, box-shadow 0.18s, opacity 0.12s, transform 0.12s;
  white-space: nowrap;
  box-shadow: var(--shadow-inset);
}
.btn:hover { box-shadow: var(--shadow-3); background: var(--brand-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(54, 22, 107, 0.18); border-color: var(--border-hi); }

/* Lime-green CTA — the Sentry "pop" colour. Use sparingly per spec. */
.btn-primary {
  background: var(--accent-hi);
  color: var(--bg-2);
  border-color: var(--accent-hi);
  box-shadow: var(--shadow-inset);
}
.btn-primary:hover { background: #d3f56a; box-shadow: var(--shadow-3); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* White solid — secondary high-visibility on dark surfaces */
.btn-white {
  background: #fff;
  color: var(--bg-2);
  border-color: #fff;
}
.btn-white:hover { background: var(--brand-hi); color: #fff; }

/* R168: WCAG 2.5.5 minimum tap target 44×44px. Compromise: 40×40 floor with
   8px horizontal padding so the recode/inline-action buttons inside bet cards
   don't break layout (bet-card .btn-sm is further overridden to 36px in the
   mobile breakpoints to keep in-row actions tight). */
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 10px; min-height: 40px; min-width: 40px; }
.btn-xs { padding: 3px 8px;  font-size: 10px; border-radius: 8px;  letter-spacing: 0.25px; }

.btn-place {
  width: 100%;
  background: #16a34a;
  color: #fff;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: background 0.12s, opacity 0.12s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-place:hover:not(:disabled) { background: #15803d; }
.btn-place:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-win   { background: #16a34a; color: #fff; }
.btn-loss  { background: #dc2626; color: #fff; }
.btn-push  { background: #b45309; color: #fff; }
.btn-danger { background: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b; }
.btn-win:hover   { background: #15803d; }
.btn-loss:hover  { background: #b91c1c; }
.btn-push:hover  { background: #92400e; }
.btn-danger:hover { background: #991b1b; }

/* ── My Bets ─────────────────────────────────────────────────────────────────── */
.stats-bucket-toggle {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  flex-shrink: 0;
}
.stats-bucket-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stats-bucket-btn:hover { border-color: var(--border-hi); color: var(--text); }
.stats-bucket-btn.active {
  background: var(--accent);
  border-color: var(--accent-hi);
  color: var(--text);
}

/* Round 22: dedup toggle on the All Bets stats card. Sits inline with the
   bucket buttons. Distinct chip styling makes it clear it's a view setting,
   not another bucket filter. */
.stats-dedup-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.stats-dedup-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stats-dedup-box:hover { border-color: var(--border-hi); color: var(--text); }
.stats-dedup-box input { cursor: pointer; }
.stats-dedup-box input:checked + span { color: var(--text); }
.stats-dedup-count { color: var(--text-muted); font-weight: 500; font-size: 11px; }
.stats-dedup-raw { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 4px; }

/* Consensus badge — flagged on bet cards when N >= 2 bots placed the same
   selection. Sits next to the bot tag in the card header. */
.bet-card-consensus-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.45);
  color: #c4b5fd;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: help;
}

.stats-row {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.stat-card {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-hi);
}
@media (prefers-reduced-motion: reduce) {
  .stat-card { transition: none; }
  .stat-card:hover { transform: none; box-shadow: var(--shadow-1); }
}

.stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-value { font-size: 18px; font-weight: 700; color: var(--text); }
.stat-value.positive { color: var(--green); }
.stat-value.negative { color: var(--red); }

/* All-Bets stats slice caption — tells the user which filters are baked
   into the Record/P&L/ROI/Total cards above the bet list. */
.stats-slice-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 16px 0;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.stats-slice-caption span {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* Per-sport / per-market mini-breakdown rows. Each card is a clickable
   filter shortcut — clicking it narrows the list to that sport/market. */
.stats-breakdown-row {
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.stats-breakdown-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.stats-breakdown-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stat-mini-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  min-width: 96px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.stat-mini-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.stat-mini-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.stat-mini-record {
  font-size: 12px;
  color: var(--text-muted);
}
.stat-mini-roi {
  font-size: 13px;
  font-weight: 700;
}
.stat-mini-roi.positive { color: var(--green); }
.stat-mini-roi.negative { color: var(--red); }
.stat-mini-pnl {
  font-size: 11px;
  font-weight: 600;
}
.stat-mini-pnl.positive { color: var(--green); }
.stat-mini-pnl.negative { color: var(--red); }
.stat-mini-count {
  font-size: 10px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .stat-mini-card { transition: none; }
  .stat-mini-card:hover { transform: none; }
}

.section-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.section-heading.mt-16 { margin-top: 16px; }

/* Collapsible section buttons */
.section-collapse-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.section-collapse-btn:hover { color: var(--text); }
.section-count {
  background: var(--bg2);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Bet card game time */
.bet-card-game-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  display: block;
}

/* Compact lineup display */
.lu-compact {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lu-compact-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.5;
}
.lu-team-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 32px;
  flex-shrink: 0;
}
.lu-compact-names {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  flex-wrap: wrap;
  line-height: 1.6;
}
.lu-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lu-sep {
  color: var(--border);
  font-size: 11px;
  padding: 0 2px;
}

#pendingBets, #settledBets { padding: 10px 16px; }

.day-group { margin-bottom: 4px; }
.day-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border);
}
.day-group .bet-card { margin: 8px 16px; }

/* ── Bet cards ───────────────────────────────────────────────────────────────── */
.bet-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  border-left: 3px solid var(--border);
  /* Tier 1 dopamine: subtle hover lift on every bet card. */
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bet-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  border-color: var(--border-hi, var(--border));
}
@media (prefers-reduced-motion: reduce) {
  .bet-card { transition: none; }
  .bet-card:hover { transform: none; box-shadow: none; }
}

.bet-card.pending  { border-left-color: var(--accent-hi); }
/* Won/Lost states keep the purple card background — just a coloured side bar
   plus a subtle tint. The previous solid-green / solid-red treatment was too
   loud against the dark purple system. */
.bet-card.won       {
  border-left-color: var(--green);
  background: linear-gradient(90deg, rgba(34,197,94,0.08), var(--bg-3) 60%);
  border-color: rgba(34,197,94,0.22);
}
.bet-card.lost      {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(239,68,68,0.08), var(--bg-3) 60%);
  border-color: rgba(239,68,68,0.22);
}
.bet-card.cancelled { border-left-color: #64748b; background: rgba(100,116,139,0.06); border-color: rgba(100,116,139,0.25); opacity: 0.75; }
.bet-card.voided    { border-left: 4px solid var(--text-dim, #94a3b8); background: rgba(148,163,184,0.06); border-color: rgba(148,163,184,0.25); opacity: 0.85; }
/* R156: pending bets >24h get an amber inset shadow so users can spot bets
   the auto-settler missed (the game finished but this one's still pending). */
.bet-card.stale     { box-shadow: 0 0 0 1px var(--amber, #d97706) inset; }
.bet-card.push     {
  border-left-color: var(--accent-coral);
  background: linear-gradient(90deg, rgba(255,178,135,0.06), var(--bg-3) 60%);
  border-color: rgba(255,178,135,0.22);
}

/* ── Bot bet-card color coding ─────────────────────────────────────── */
/* Palette refreshed 2026-05-27 — every bot has a distinct colour so the
   bet cards, charts and leaderboard rows are easy to tell apart at a glance.
   Sport groups share a hue family (NHL cyan, NBA pink/orange, MLB green,
   AFL red, NRL yellow/amber, tennis purple) with shade-stepped variants. */
/* PrawnBot — violet (follower) */
.bet-card.bot-prawn          { border-left-color: #6d28d9; }
.bet-card.bot-prawn.won      { border-left-color: #6d28d9; }
.bet-card.bot-prawn.lost     { border-left-color: #6d28d9; }
/* SiphonophoreBot — sky blue (target-profit chaser) */
.bet-card.bot-siphonophore       { border-left-color: #0ea5e9; }
.bet-card.bot-siphonophore.won   { border-left-color: #0ea5e9; }
.bet-card.bot-siphonophore.lost  { border-left-color: #0ea5e9; }
/* JörmungandrBot — emerald (relentless value bettor) */
.bet-card.bot-jormungandr        { border-left-color: #059669; }
.bet-card.bot-jormungandr.won    { border-left-color: #059669; }
.bet-card.bot-jormungandr.lost   { border-left-color: #059669; }
/* .bet-card.bot-botd rules removed Wave 30 (2026-05-27) — BotD feature retired. */
/* NHL specialist trio + ChondrichthyesBot aggregator — cyan/teal/blue family */
.bet-card.bot-chimaea        { border-left-color: #14b8a6; }
.bet-card.bot-chimaea.won    { border-left-color: #14b8a6; }
.bet-card.bot-chimaea.lost   { border-left-color: #14b8a6; }
.bet-card.bot-stingray       { border-left-color: #0891b2; }
.bet-card.bot-stingray.won   { border-left-color: #0891b2; }
.bet-card.bot-stingray.lost  { border-left-color: #0891b2; }
.bet-card.bot-goblinshark    { border-left-color: #0e7490; }
.bet-card.bot-goblinshark.won  { border-left-color: #0e7490; }
.bet-card.bot-goblinshark.lost { border-left-color: #0e7490; }
.bet-card.bot-chondrichthyes   { border-left-color: #1e40af; }
.bet-card.bot-chondrichthyes.won  { border-left-color: #1e40af; }
.bet-card.bot-chondrichthyes.lost { border-left-color: #1e40af; }
/* SirenBot (Wave 31 cross-sport prop aggregator) — rose */
.bet-card.bot-siren          { border-left-color: #f43f5e; }
.bet-card.bot-siren.won      { border-left-color: #f43f5e; }
.bet-card.bot-siren.lost     { border-left-color: #f43f5e; }
/* NRL specialist trio + EchinodermsBot aggregator — yellow/amber family */
.bet-card.bot-starfish       { border-left-color: #facc15; }
.bet-card.bot-starfish.won   { border-left-color: #facc15; }
.bet-card.bot-starfish.lost  { border-left-color: #facc15; }
.bet-card.bot-        { border-left-color: #eab308; }
.bet-card.bot-.won    { border-left-color: #eab308; }
.bet-card.bot-.lost   { border-left-color: #eab308; }
.bet-card.bot-urchin         { border-left-color: #ca8a04; }
.bet-card.bot-urchin.won     { border-left-color: #ca8a04; }
.bet-card.bot-urchin.lost    { border-left-color: #ca8a04; }
.bet-card.bot-echinoderms    { border-left-color: #a16207; }
.bet-card.bot-echinoderms.won  { border-left-color: #a16207; }
.bet-card.bot-echinoderms.lost { border-left-color: #a16207; }
/* AFL specialist trio + CrustaceansBot aggregator — red family */
.bet-card.bot-isopod         { border-left-color: #b91c1c; }
.bet-card.bot-isopod.won     { border-left-color: #b91c1c; }
.bet-card.bot-isopod.lost    { border-left-color: #b91c1c; }
.bet-card.bot-crab           { border-left-color: #dc2626; }
.bet-card.bot-crab.won       { border-left-color: #dc2626; }
.bet-card.bot-crab.lost      { border-left-color: #dc2626; }
.bet-card.bot-shrimp         { border-left-color: #ef4444; }
.bet-card.bot-shrimp.won     { border-left-color: #ef4444; }
.bet-card.bot-shrimp.lost    { border-left-color: #ef4444; }
.bet-card.bot-crustaceans       { border-left-color: #991b1b; }
.bet-card.bot-crustaceans.won   { border-left-color: #991b1b; }
.bet-card.bot-crustaceans.lost  { border-left-color: #991b1b; }
/* NBA specialist trio + CnidariansBot aggregator — pink/orange/amber family */
.bet-card.bot-anemone        { border-left-color: #ec4899; }
.bet-card.bot-anemone.won    { border-left-color: #ec4899; }
.bet-card.bot-anemone.lost   { border-left-color: #ec4899; }
.bet-card.bot-coral          { border-left-color: #f97316; }
.bet-card.bot-coral.won      { border-left-color: #f97316; }
.bet-card.bot-coral.lost     { border-left-color: #f97316; }
.bet-card.bot-jellyfish      { border-left-color: #f59e0b; }
.bet-card.bot-jellyfish.won  { border-left-color: #f59e0b; }
.bet-card.bot-jellyfish.lost { border-left-color: #f59e0b; }
.bet-card.bot-cnidarians     { border-left-color: #db2777; }
.bet-card.bot-cnidarians.won { border-left-color: #db2777; }
.bet-card.bot-cnidarians.lost{ border-left-color: #db2777; }
/* MLB specialist trio + CephalopodBot aggregator — green/lime family */
.bet-card.bot-octopus        { border-left-color: #16a34a; }
.bet-card.bot-octopus.won    { border-left-color: #16a34a; }
.bet-card.bot-octopus.lost   { border-left-color: #16a34a; }
.bet-card.bot-squid          { border-left-color: #65a30d; }
.bet-card.bot-squid.won      { border-left-color: #65a30d; }
.bet-card.bot-squid.lost     { border-left-color: #65a30d; }
.bet-card.bot-cuttlefish     { border-left-color: #15803d; }
.bet-card.bot-cuttlefish.won { border-left-color: #15803d; }
.bet-card.bot-cuttlefish.lost{ border-left-color: #15803d; }
.bet-card.bot-cephalopod     { border-left-color: #166534; }
.bet-card.bot-cephalopod.won { border-left-color: #166534; }
.bet-card.bot-cephalopod.lost{ border-left-color: #166534; }
/* Tennis specialist quintet + OsteichthyesBot aggregator — purple family */
.bet-card.bot-tuna           { border-left-color: #a855f7; }
.bet-card.bot-tuna.won       { border-left-color: #a855f7; }
.bet-card.bot-tuna.lost      { border-left-color: #a855f7; }
.bet-card.bot-salmon         { border-left-color: #c084fc; }
.bet-card.bot-salmon.won     { border-left-color: #c084fc; }
.bet-card.bot-salmon.lost    { border-left-color: #c084fc; }
.bet-card.bot-barracuda      { border-left-color: #9333ea; }
.bet-card.bot-barracuda.won  { border-left-color: #9333ea; }
.bet-card.bot-barracuda.lost { border-left-color: #9333ea; }
.bet-card.bot-halibut        { border-left-color: #7e22ce; }
.bet-card.bot-halibut.won    { border-left-color: #7e22ce; }
.bet-card.bot-halibut.lost   { border-left-color: #7e22ce; }
.bet-card.bot-leviathan      { border-left-color: #6b21a8; }
.bet-card.bot-leviathan.won  { border-left-color: #6b21a8; }
.bet-card.bot-leviathan.lost { border-left-color: #6b21a8; }
.bet-card.bot-tiamat         { border-left-color: #be185d; }
.bet-card.bot-tiamat.won     { border-left-color: #be185d; }
.bet-card.bot-tiamat.lost    { border-left-color: #be185d; }
.bet-card.bot-osteichthyes   { border-left-color: #581c87; }
.bet-card.bot-osteichthyes.won  { border-left-color: #581c87; }
.bet-card.bot-osteichthyes.lost { border-left-color: #581c87; }
/* Wave 31 cross-sport mythological aggregators — unique non-sport-coded hues */
.bet-card.bot-kraken          { border-left-color: #2563eb; }
.bet-card.bot-kraken.won      { border-left-color: #2563eb; }
.bet-card.bot-kraken.lost     { border-left-color: #2563eb; }
.bet-card.bot-selkie          { border-left-color: #475569; }
.bet-card.bot-selkie.won      { border-left-color: #475569; }
.bet-card.bot-selkie.lost     { border-left-color: #475569; }
.bet-card.bot-rusalka         { border-left-color: #7c3aed; }
.bet-card.bot-rusalka.won     { border-left-color: #7c3aed; }
.bet-card.bot-rusalka.lost    { border-left-color: #7c3aed; }
.bet-card.bot-ningyo          { border-left-color: #c2410c; }
.bet-card.bot-ningyo.won      { border-left-color: #c2410c; }
.bet-card.bot-ningyo.lost     { border-left-color: #c2410c; }
.bet-card.bot-nanaue          { border-left-color: #047857; }
.bet-card.bot-nanaue.won      { border-left-color: #047857; }
.bet-card.bot-nanaue.lost     { border-left-color: #047857; }
.bet-card.bot-charybdis       { border-left-color: #4338ca; }
.bet-card.bot-charybdis.won   { border-left-color: #4338ca; }
.bet-card.bot-charybdis.lost  { border-left-color: #4338ca; }
/* Wave 1 esports specialists (Piranha, Lionfish) + Hydra aggregator. */
.bet-card.bot-piranha         { border-left-color: #e8590c; }
.bet-card.bot-piranha.won     { border-left-color: #e8590c; }
.bet-card.bot-piranha.lost    { border-left-color: #e8590c; }
.bet-card.bot-lionfish        { border-left-color: #d6336c; }
.bet-card.bot-lionfish.won    { border-left-color: #d6336c; }
.bet-card.bot-lionfish.lost   { border-left-color: #d6336c; }
.bet-card.bot-hydra           { border-left-color: #2f9e44; }
.bet-card.bot-hydra.won       { border-left-color: #2f9e44; }
.bet-card.bot-hydra.lost      { border-left-color: #2f9e44; }
/* WhaleBot, BarnacleBot, OrcaBot CSS pairs removed Wave 29 (2026-05-27).
   NautilusBot CSS pair removed Wave 30 (2026-05-27). */

.bet-card-bot-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.03em; }

/* 2026-06-07: "← from CrabBot" lineage indicator on aggregator bets.
   The arrow is muted; the bot name picks up its own bot-X colour class
   so the eye latches onto the specialist that fed the pick. */
.bet-card-from-bot {
  font-size: 10px; font-weight: 500;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: -2px;
}
.bet-card-from-bot-name {
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(120,120,120,0.10);
}

/* Sport tag — tinted with each sport's specialist bot colour so a quick
   glance at the bet list says "this is hockey, this is baseball" without
   having to read team names. Matches the bot-tag radius/typography. */
.bet-card-sport-tag {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  letter-spacing: 0.03em; white-space: nowrap;
}
/* Sport tags re-tinted 2026-05-27 to match each sport's refreshed bot family. */
.bet-card-sport-tag.sport-nhl    { background: #062c28; color: #5eead4; } /* NHL — Chimaea teal */
.bet-card-sport-tag.sport-nrl    { background: #2a2300; color: #fde047; } /* NRL — Starfish yellow */
.bet-card-sport-tag.sport-afl    { background: #2a0808; color: #f87171; } /* AFL — Isopod red */
.bet-card-sport-tag.sport-nba    { background: #3a0a28; color: #f9a8d4; } /* NBA — Anemone pink */
.bet-card-sport-tag.sport-mlb    { background: #062a1a; color: #6ee7b7; } /* MLB — Octopus green */
.bet-card-sport-tag.sport-tennis { background: #2a1050; color: #d8b4fe; } /* Tennis — Tuna purple */
.bet-card-sport-tag.sport-esports { background: #2a0e02; color: #fdba74; } /* Esports — Piranha orange */

/* Bot tag pills — palette refreshed 2026-05-27 to match the new border colours.
   Each pill uses a deep-tinted dark background + light text matching the bot's
   border hue, keeping AA-readable contrast against the dark-theme card body. */
.bet-card-bot-tag.prawn           { background: #1f0a3a; color: #c4b5fd; }
.bet-card-bot-tag.siphonophore    { background: #042f3f; color: #7dd3fc; }
.bet-card-bot-tag.jormungandr     { background: #052e22; color: #6ee7b7; }
.bet-card-bot-tag.chimaea         { background: #062c28; color: #5eead4; }
.bet-card-bot-tag.stingray        { background: #062c34; color: #67e8f9; }
.bet-card-bot-tag.goblinshark     { background: #06222c; color: #7dd3fc; }
.bet-card-bot-tag.chondrichthyes  { background: #0a1530; color: #93c5fd; }
.bet-card-bot-tag.siren           { background: #3a0a16; color: #fda4af; }
.bet-card-bot-tag.starfish        { background: #2a2300; color: #fde047; }
.bet-card-bot-tag.         { background: #1f1800; color: #facc15; }
.bet-card-bot-tag.urchin          { background: #2a1d00; color: #f59e0b; }
.bet-card-bot-tag.echinoderms     { background: #1a1100; color: #d97706; }
.bet-card-bot-tag.isopod          { background: #2a0808; color: #f87171; }
.bet-card-bot-tag.crab            { background: #3a0a0a; color: #fca5a5; }
.bet-card-bot-tag.shrimp          { background: #2a0606; color: #fecaca; }
.bet-card-bot-tag.crustaceans     { background: #1a0606; color: #ef4444; }
.bet-card-bot-tag.anemone         { background: #3a0a28; color: #f9a8d4; }
.bet-card-bot-tag.coral           { background: #3a1a06; color: #fdba74; }
.bet-card-bot-tag.jellyfish       { background: #2a1a02; color: #fcd34d; }
.bet-card-bot-tag.cnidarians      { background: #2a0818; color: #f472b6; }
.bet-card-bot-tag.octopus         { background: #062a1a; color: #6ee7b7; }
.bet-card-bot-tag.squid           { background: #1a2a06; color: #bef264; }
.bet-card-bot-tag.cuttlefish      { background: #052218; color: #34d399; }
.bet-card-bot-tag.cephalopod      { background: #04190f; color: #22c55e; }
.bet-card-bot-tag.tuna            { background: #2a1050; color: #d8b4fe; }
.bet-card-bot-tag.salmon          { background: #2a1840; color: #e9d5ff; }
.bet-card-bot-tag.barracuda       { background: #1f0a30; color: #c084fc; }
.bet-card-bot-tag.halibut         { background: #1a0a2a; color: #a855f7; }
.bet-card-bot-tag.leviathan       { background: #15082a; color: #9333ea; }
.bet-card-bot-tag.tiamat          { background: #2a081a; color: #ec4899; }
.bet-card-bot-tag.osteichthyes    { background: #100520; color: #7c3aed; }
/* Wave 31 cross-sport mythological aggregators. */
.bet-card-bot-tag.kraken          { background: #0a1a3a; color: #60a5fa; }
.bet-card-bot-tag.selkie          { background: #1a2230; color: #94a3b8; }
.bet-card-bot-tag.rusalka         { background: #1f0a30; color: #c4b5fd; }
.bet-card-bot-tag.ningyo          { background: #2a0e06; color: #fdba74; }
.bet-card-bot-tag.nanaue          { background: #032018; color: #10b981; }
.bet-card-bot-tag.charybdis       { background: #11082e; color: #a5b4fc; }
.bet-card-bot-tag.whale           { background: #012a44; color: #38bdf8; }
.bet-card-bot-tag.barnacle        { background: #2a1a00; color: #d97706; }
.bet-card-bot-tag.orca            { background: #082638; color: #38bdf8; }
/* Wave 1 esports specialists (Piranha, Lionfish) + Hydra aggregator — tag pills. */
.bet-card-bot-tag.piranha         { background: #2a0e02; color: #fdba74; }
.bet-card-bot-tag.lionfish        { background: #2a0814; color: #f9a8d4; }
.bet-card-bot-tag.hydra           { background: #052015; color: #69db7c; }

/* ── Pick'em leaderboard bot row highlighting ──────────────────────── */
/* Leaderboard row colours updated 2026-05-27 to match the refreshed border palette. */
.lb-bot-prawn          td { color: #c4b5fd; }
.lb-bot-prawn          .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-chimaea        td { color: #5eead4; }
.lb-bot-chimaea        .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-stingray       td { color: #67e8f9; }
.lb-bot-stingray       .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-goblinshark    td { color: #7dd3fc; }
.lb-bot-goblinshark    .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-chondrichthyes td { color: #93c5fd; }
.lb-bot-chondrichthyes .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-siren          td { color: #fda4af; }
.lb-bot-siren          .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-starfish       td { color: #fde047; }
.lb-bot-starfish       .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-        td { color: #facc15; }
.lb-bot-        .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-urchin         td { color: #f59e0b; }
.lb-bot-urchin         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-echinoderms    td { color: #d97706; }
.lb-bot-echinoderms    .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-isopod         td { color: #f87171; }
.lb-bot-isopod         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-crab           td { color: #fca5a5; }
.lb-bot-crab           .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-shrimp         td { color: #fecaca; }
.lb-bot-shrimp         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-crustaceans    td { color: #ef4444; }
.lb-bot-crustaceans    .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-anemone        td { color: #f9a8d4; }
.lb-bot-anemone        .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-coral          td { color: #fdba74; }
.lb-bot-coral          .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-jellyfish      td { color: #fcd34d; }
.lb-bot-jellyfish      .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-cnidarians     td { color: #f472b6; }
.lb-bot-cnidarians     .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-octopus        td { color: #6ee7b7; }
.lb-bot-octopus        .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-squid          td { color: #bef264; }
.lb-bot-squid          .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-cuttlefish     td { color: #34d399; }
.lb-bot-cuttlefish     .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-cephalopod     td { color: #22c55e; }
.lb-bot-cephalopod     .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-tuna           td { color: #d8b4fe; }
.lb-bot-tuna           .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-salmon         td { color: #e9d5ff; }
.lb-bot-salmon         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-barracuda      td { color: #c084fc; }
.lb-bot-barracuda      .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-halibut        td { color: #a855f7; }
.lb-bot-halibut        .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-leviathan      td { color: #9333ea; }
.lb-bot-leviathan      .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-tiamat         td { color: #ec4899; }
.lb-bot-tiamat         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-osteichthyes   td { color: #7c3aed; }
.lb-bot-osteichthyes   .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-kraken         td { color: #60a5fa; }
.lb-bot-kraken         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-selkie         td { color: #94a3b8; }
.lb-bot-selkie         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-rusalka        td { color: #c4b5fd; }
.lb-bot-rusalka        .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-ningyo         td { color: #fdba74; }
.lb-bot-ningyo         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-nanaue         td { color: #10b981; }
.lb-bot-nanaue         .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-charybdis      td { color: #a5b4fc; }
.lb-bot-charybdis      .lb-name { font-style: normal; font-weight: 600; }
/* lb-bot-whale / lb-bot-barnacle / lb-bot-orca removed Wave 29 (2026-05-27). */

/* ── Chat bot name color consistency ───────────────────────────────── */
/* Kept in sync with the refreshed border palette (2026-05-27). Bots no longer
   actively chat (see memory `feedback_bots_no_chat`) but these rules remain
   so legacy chat messages render with the correct bot colour. */
.chat-bot-prawn        { color: #c4b5fd !important; }
.chat-bot-oyster       { color: #5eead4 !important; }
.chat-bot-siren        { color: #fda4af !important; }
.chat-bot-starfish     { color: #fde047 !important; }
.chat-bot-      { color: #facc15 !important; }
.chat-bot-urchin       { color: #f59e0b !important; }
.chat-bot-echinoderms  { color: #d97706 !important; }
.chat-bot-isopod       { color: #f87171 !important; }
.chat-bot-crab         { color: #fca5a5 !important; }
.chat-bot-shrimp       { color: #fecaca !important; }
.chat-bot-crustaceans  { color: #ef4444 !important; }
/* chat-bot-whale / chat-bot-barnacle / chat-bot-orca removed Wave 29 (2026-05-27). */

/* ── Admin bot section color accents — palette refreshed 2026-05-27 ──── */
.section-heading.bot-section-prawn          { border-left: 3px solid #6d28d9; padding-left: 8px; }
.section-heading.bot-section-oyster         { border-left: 3px solid #3ab893; padding-left: 8px; }
.section-heading.bot-section-siren          { border-left: 3px solid #f43f5e; padding-left: 8px; }
.section-heading.bot-section-chimaea        { border-left: 3px solid #14b8a6; padding-left: 8px; }
.section-heading.bot-section-stingray       { border-left: 3px solid #0891b2; padding-left: 8px; }
.section-heading.bot-section-goblinshark    { border-left: 3px solid #0e7490; padding-left: 8px; }
.section-heading.bot-section-chondrichthyes { border-left: 3px solid #1e40af; padding-left: 8px; }
.section-heading.bot-section-starfish       { border-left: 3px solid #facc15; padding-left: 8px; }
.section-heading.bot-section-        { border-left: 3px solid #eab308; padding-left: 8px; }
.section-heading.bot-section-urchin         { border-left: 3px solid #ca8a04; padding-left: 8px; }
.section-heading.bot-section-echinoderms    { border-left: 3px solid #a16207; padding-left: 8px; }
.section-heading.bot-section-isopod         { border-left: 3px solid #b91c1c; padding-left: 8px; }
.section-heading.bot-section-crab           { border-left: 3px solid #dc2626; padding-left: 8px; }
.section-heading.bot-section-shrimp         { border-left: 3px solid #ef4444; padding-left: 8px; }
.section-heading.bot-section-crustaceans    { border-left: 3px solid #991b1b; padding-left: 8px; }
.section-heading.bot-section-anemone        { border-left: 3px solid #ec4899; padding-left: 8px; }
.section-heading.bot-section-coral          { border-left: 3px solid #f97316; padding-left: 8px; }
.section-heading.bot-section-jellyfish      { border-left: 3px solid #f59e0b; padding-left: 8px; }
.section-heading.bot-section-cnidarians     { border-left: 3px solid #db2777; padding-left: 8px; }
.section-heading.bot-section-octopus        { border-left: 3px solid #16a34a; padding-left: 8px; }
.section-heading.bot-section-squid          { border-left: 3px solid #65a30d; padding-left: 8px; }
.section-heading.bot-section-cuttlefish     { border-left: 3px solid #15803d; padding-left: 8px; }
.section-heading.bot-section-cephalopod     { border-left: 3px solid #166534; padding-left: 8px; }
.section-heading.bot-section-tuna           { border-left: 3px solid #a855f7; padding-left: 8px; }
.section-heading.bot-section-salmon         { border-left: 3px solid #c084fc; padding-left: 8px; }
.section-heading.bot-section-barracuda      { border-left: 3px solid #9333ea; padding-left: 8px; }
.section-heading.bot-section-halibut        { border-left: 3px solid #7e22ce; padding-left: 8px; }
.section-heading.bot-section-leviathan      { border-left: 3px solid #6b21a8; padding-left: 8px; }
.section-heading.bot-section-tiamat         { border-left: 3px solid #be185d; padding-left: 8px; }
.section-heading.bot-section-osteichthyes   { border-left: 3px solid #581c87; padding-left: 8px; }
.section-heading.bot-section-kraken         { border-left: 3px solid #2563eb; padding-left: 8px; }
.section-heading.bot-section-selkie         { border-left: 3px solid #475569; padding-left: 8px; }
.section-heading.bot-section-rusalka        { border-left: 3px solid #7c3aed; padding-left: 8px; }
.section-heading.bot-section-ningyo         { border-left: 3px solid #c2410c; padding-left: 8px; }
.section-heading.bot-section-nanaue         { border-left: 3px solid #047857; padding-left: 8px; }
.section-heading.bot-section-charybdis      { border-left: 3px solid #4338ca; padding-left: 8px; }

/* ── Admin accordion sections ─────────────────────────────────────── */
.admin-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--bg2);
}
.admin-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.admin-section-header:hover { background: var(--bg3); }
.admin-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.admin-section-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}
.admin-section-badge {
  font-size: 10px;
  background: var(--bg4);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
}
.admin-section-chevron {
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.admin-section.open .admin-section-chevron { transform: rotate(180deg); }
.admin-section-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  display: none;
}
.admin-section.open .admin-section-body { display: block; }

/* Bot-colored left borders on accordion headers — palette refreshed 2026-05-27. */
.admin-section.prawn          .admin-section-header { border-left: 3px solid #6d28d9; }
.admin-section.oyster         .admin-section-header { border-left: 3px solid #3ab893; }
.admin-section.siren          .admin-section-header { border-left: 3px solid #f43f5e; }
/* admin-section.nautilus removed Wave 30 (2026-05-27). */
.admin-section.chimaea        .admin-section-header { border-left: 3px solid #14b8a6; }
.admin-section.stingray       .admin-section-header { border-left: 3px solid #0891b2; }
.admin-section.goblinshark    .admin-section-header { border-left: 3px solid #0e7490; }
.admin-section.chondrichthyes .admin-section-header { border-left: 3px solid #1e40af; }
.admin-section.starfish       .admin-section-header { border-left: 3px solid #facc15; }
.admin-section.        .admin-section-header { border-left: 3px solid #eab308; }
.admin-section.urchin         .admin-section-header { border-left: 3px solid #ca8a04; }
.admin-section.echinoderms    .admin-section-header { border-left: 3px solid #a16207; }
.admin-section.isopod         .admin-section-header { border-left: 3px solid #b91c1c; }
.admin-section.crab           .admin-section-header { border-left: 3px solid #dc2626; }
.admin-section.shrimp         .admin-section-header { border-left: 3px solid #ef4444; }
.admin-section.crustaceans    .admin-section-header { border-left: 3px solid #991b1b; }
/* admin-section.whale removed Wave 29 (2026-05-27). */
.admin-section.anemone        .admin-section-header { border-left: 3px solid #ec4899; }
.admin-section.coral          .admin-section-header { border-left: 3px solid #f97316; }
.admin-section.jellyfish      .admin-section-header { border-left: 3px solid #f59e0b; }
.admin-section.cnidarians     .admin-section-header { border-left: 3px solid #db2777; }
.admin-section.octopus        .admin-section-header { border-left: 3px solid #16a34a; }
.admin-section.squid          .admin-section-header { border-left: 3px solid #65a30d; }
.admin-section.cuttlefish     .admin-section-header { border-left: 3px solid #15803d; }
.admin-section.cephalopod     .admin-section-header { border-left: 3px solid #166534; }
.admin-section.tuna           .admin-section-header { border-left: 3px solid #a855f7; }
.admin-section.salmon         .admin-section-header { border-left: 3px solid #c084fc; }
.admin-section.barracuda      .admin-section-header { border-left: 3px solid #9333ea; }
.admin-section.halibut        .admin-section-header { border-left: 3px solid #7e22ce; }
.admin-section.leviathan      .admin-section-header { border-left: 3px solid #6b21a8; }
.admin-section.osteichthyes   .admin-section-header { border-left: 3px solid #581c87; }
.admin-section.kraken         .admin-section-header { border-left: 3px solid #2563eb; }
.admin-section.selkie         .admin-section-header { border-left: 3px solid #475569; }
.admin-section.rusalka        .admin-section-header { border-left: 3px solid #7c3aed; }
.admin-section.ningyo         .admin-section-header { border-left: 3px solid #c2410c; }
.admin-section.nanaue         .admin-section-header { border-left: 3px solid #047857; }
.admin-section.charybdis      .admin-section-header { border-left: 3px solid #4338ca; }
/* admin-section.orca / admin-section.barnacle removed Wave 29 (2026-05-27). */

/* ── Sport + bot CSS variables ───────────────────────────────────────── */
:root {
  --nba:        #ec4899;
  --mlb:        #16a34a;
  --anemone:    #ec4899;
  --coral:      #f97316;
  --jellyfish:  #f59e0b;
  --cnidarians: #db2777;
  --octopus:    #16a34a;
}
.sport-nba { color: var(--nba); }
.sport-mlb { color: var(--mlb); }

/* Admin danger bar — sits at top of admin tab. Two nuclear buttons:
   wipe-memories (red) and keep-memories (orange). */
.admin-danger-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid #ef4444;
  border-radius: 10px;
  margin-bottom: 10px;
}
.admin-danger-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.admin-danger-bar-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Square launch icon button — sits on the left of the danger bar.
   The image is the entire face (hexagonal red LAUNCH button with caution
   stripes); no text label inside the square. */
.admin-launch-btn {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
}
.admin-launch-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.admin-launch-btn:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}
.admin-launch-btn:active { transform: scale(0.97); }
.admin-launch-btn:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 3px;
}
.admin-danger-bar-btn-orange {
  background: #7c2d12;
  color: #fed7aa;
  border: 1px solid #9a3412;
}
.admin-danger-bar-btn-orange:hover { background: #9a3412; }
/* Green "go" sibling — same height as the orange keep-memories button.
   Triggers a manual re-run of the scheduled 6am/6pm bot cycle. */
.admin-danger-bar-btn-go {
  background: #14532d;
  color: #bbf7d0;
  border: 1px solid #166534;
}
.admin-danger-bar-btn-go:hover { background: #166534; }

/* Quick Actions bar */
.admin-quick-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}
.admin-quick-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* Settlement status card */
.admin-settle-card {
  background: var(--bg3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-settle-stat {
  font-size: 12px;
  color: var(--text-muted);
}
.admin-settle-stat strong { color: var(--text); }

/* Bot name tooltip — hover over any bot name to see its role */
.bot-name {
  cursor: help;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  transition: border-color 0.15s ease;
}
.bot-name:hover { border-bottom-color: var(--text); }

/* Bot maintenance card (Clear Pending / Wipe Brain) */
.bot-maint-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bot-maint-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bot-maint-row label { color: var(--text-muted); font-size: 13px; }
.bot-maint-row select {
  padding: 7px 10px;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  min-width: 180px;
}
.bot-maint-help { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.bot-maint-help strong { color: var(--text); }
.bot-maint-result {
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: none;
}
.bot-maint-result.success { display: block; border-color: var(--green); color: var(--text); }
.bot-maint-result.error   { display: block; border-color: var(--red);   color: var(--text); }

/* Admin toolbar: search + expand/collapse all */
.admin-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.admin-search-wrap {
  flex: 1;
  min-width: 240px;
  position: relative;
  display: flex;
  align-items: center;
}
.admin-search-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}
.admin-search-input {
  flex: 1;
  width: 100%;
  padding: 9px 36px 9px 34px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.admin-search-input:focus { border-color: var(--accent); }
.admin-search-input::placeholder { color: var(--text-muted); }
.admin-search-clear {
  position: absolute;
  right: 8px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
}
.admin-search-clear:hover { color: var(--text); background: var(--bg4); }
.admin-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-no-results {
  padding: 16px 18px;
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}
.admin-no-results a { color: var(--accent-hi); text-decoration: underline; }

/* ── Stuck Pending Bets card ──────────────────────────────────────────────── */
.stuck-bets-empty {
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.stuck-bet-row {
  background: var(--bg2);
  border: 1px solid var(--red-border);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.stuck-bet-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.stuck-bet-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: var(--bg3, #1a1530);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}
.stuck-bet-pick {
  font-weight: 700;
  color: var(--text);
}
.stuck-bet-stake {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
}
.stuck-bet-days {
  font-weight: 700;
  color: var(--red);
  background: var(--red-bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.stuck-bet-meta {
  margin-bottom: 6px;
  color: var(--text);
}
.stuck-bet-meta > div { margin-bottom: 2px; }
.stuck-bet-label {
  font-weight: 700;
  color: var(--text-muted);
  display: inline-block;
  min-width: 64px;
}
.stuck-bet-muted { color: var(--text-muted); }
.stuck-bet-score {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--green);
}
.stuck-bet-score-muted {
  font-style: italic;
  color: var(--text-muted);
}
.stuck-bet-diag {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text);
}
.stuck-bet-diag > div { margin-bottom: 3px; }
.stuck-bet-diag code {
  background: transparent;
  color: var(--red);
  padding: 0;
}
.stuck-bet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* Section group label — now clickable collapsible header */
.admin-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 12px 10px;
  margin: 8px 0 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.admin-group-label:hover { background: var(--bg4); color: var(--text); }
.admin-group-text { flex: 1; }
.admin-group-chevron {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
  opacity: 0.75;
}
.admin-group-label.collapsed .admin-group-chevron { transform: rotate(-90deg); }
.admin-group-label.collapsed { opacity: 0.78; }
.admin-group-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Admin section hidden by search */
.admin-section.hidden-by-search,
.admin-group-label.hidden-by-search { display: none !important; }
.admin-section.hidden-by-group { display: none !important; }
.admin-section.search-match { animation: searchHighlight 0.6s ease; }
@keyframes searchHighlight {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Legacy badge colors update for consistency */
.feed-user-badge.bot        { background: #2d1e4a; color: #b899f5; border: 1px solid #7c5cbf; }
.feed-user-badge.prawn-bot       { background: #1f0a3a; color: #c4b5fd; border: 1px solid #6d28d9; }
.feed-user-badge.siren-bot       { background: #3a0a16; color: #fda4af; border: 1px solid #f43f5e; }
.feed-user-badge.starfish-bot    { background: #2a2300; color: #fde047; border: 1px solid #facc15; }
.feed-user-badge.-bot     { background: #1f1800; color: #facc15; border: 1px solid #eab308; }
.feed-user-badge.urchin-bot      { background: #2a1d00; color: #f59e0b; border: 1px solid #ca8a04; }
.feed-user-badge.echinoderms-bot { background: #1a1100; color: #d97706; border: 1px solid #a16207; }
.feed-user-badge.isopod-bot      { background: #2a0808; color: #f87171; border: 1px solid #b91c1c; }
.feed-user-badge.crab-bot        { background: #3a0a0a; color: #fca5a5; border: 1px solid #dc2626; }
.feed-user-badge.shrimp-bot      { background: #2a0606; color: #fecaca; border: 1px solid #ef4444; }
.feed-user-badge.crustaceans-bot { background: #1a0606; color: #ef4444; border: 1px solid #991b1b; }
.feed-user-badge.jelly-bot  { background: #2a103f; color: #c084fc; border: 1px solid #a855f7; }
.feed-user-badge.squid-bot  { background: #10113d; color: #818cf8; border: 1px solid #4338ca; }
.feed-user-badge.ray-bot    { background: #2a2008; color: #facc15; border: 1px solid #ca8a04; }
.feed-user-badge.crab-bot   { background: #3a0a0a; color: #f87171; border: 1px solid #dc2626; }

/* R49 cleanup: the head row is now split into two flex sub-rows for mobile
   readability (identity badges on row 1, context/timestamp on row 2). The
   outer .bet-card-head is a flex column so the two rows stack predictably;
   each row keeps its own flex-wrap so badges still flow on desktop too. */
.bet-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.bet-card-head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.bet-card-head-row2 { font-size: 11px; color: var(--text-muted); }
/* Placed-at and game-time stick to the right edge of row 2; the game-time
   wraps to its own line on narrow widths so it never overlaps. */
.bet-card-head-row2 .bet-card-date:not(.bet-card-age) { margin-left: auto; white-space: nowrap; }
.bet-card-head-row2 .bet-card-game-time {
  flex: 0 0 100%;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subtle clickability hint for badges that carry tooltips/handlers. Desktop
   only — mobile gets a tap highlight from the browser. Applies to the small
   coloured pills along the head row plus the bot tag chip. */
.bet-card-head .mkt-badge,
.bet-card-head .bet-card-bot-tag,
.bet-card-head .bet-card-consensus-tag {
  transition: opacity 120ms ease;
}
.bet-card-head .mkt-badge:hover,
.bet-card-head .bet-card-bot-tag:hover,
.bet-card-head .bet-card-consensus-tag:hover {
  opacity: 0.85;
}
/* The clickable CLV badge gets a pointer cursor so its tap-target reads as
   actionable without changing colour (the green/red is already meaningful). */
.mkt-badge-clickable { cursor: pointer; }
.mkt-badge-clickable:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 1px; }
/* Mobile (<480px): force each row to a tight flex line so badges don't leak
   between identity and context groups. The two rows already stack by virtue
   of being separate flex children of the column-direction parent. */
@media (max-width: 480px) {
  .bet-card-head { gap: 4px; }
  .bet-card-head-row { gap: 4px 6px; }
  .bet-card-head-row2 .bet-card-date:not(.bet-card-age) { margin-left: 0; }
}

.bet-type-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
}

.bet-type-pill.single { background: rgba(124,58,237,0.2); color: var(--accent-hi); }
.bet-type-pill.parlay { background: rgba(167,139,250,0.15); color: #c4b5fd; }

.bet-card-date { font-size: 11px; color: var(--text-muted); }
.bet-owner-tag { font-size: 11px; font-weight: 700; color: var(--yellow); background: rgba(234,179,8,.15); border-radius: 4px; padding: 1px 6px; }

.bet-card-user-row { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.bet-card-username-link { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.bet-card-username-link:hover { color: var(--accent-hi); text-decoration: underline; }

/* Min Edge Thresholds admin grid */
.min-edge-grid { display: flex; flex-direction: column; gap: 6px; }
.min-edge-row {
  display: grid;
  grid-template-columns: 1fr 100px 90px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg3);
}

.min-edge-label { font-size: 13px; color: var(--text); }
.min-edge-input-wrap { display: flex; align-items: center; gap: 3px; }
.min-edge-input {
  width: 62px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  padding: 3px 6px;
  text-align: right;
}
.min-edge-input:focus { outline: none; border-color: var(--green); }
.min-edge-pct { font-size: 12px; color: var(--text-muted); }
.min-edge-default { font-size: 11px; color: var(--text-muted); text-align: right; }

/* Bot performance block */
.perf-block { background: var(--bg-3); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.perf-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); }
.perf-row:last-child { border-bottom: none; }
.perf-sub-heading { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 2px; }

.bet-selections { list-style: none; margin-bottom: 8px; }

.bet-selections li {
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  align-items: center;
}

.bet-selections li:last-child { border: none; }

.sel-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.sel-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.mkt-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(124,58,237,.2);
  color: var(--accent-hi);
  letter-spacing: .3px;
  flex-shrink: 0;
  line-height: 1.6;
}
.sel-pick { font-weight: 700; color: var(--text); font-size: 13px; }
/* Audit 2026-05-07: long player-prop labels (e.g. "Connor McDavid Power
   Play Points O/U") were pushing the odds chip below the line on mobile.
   Allow wrapping but prefer single line; let flex container shrink. */
.sel-top { gap: 6px; flex-wrap: wrap; align-items: baseline; }
.sel-top .sel-pick { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.sel-top .sel-odds { flex: 0 0 auto; }
@media (max-width: 480px) {
  .sel-pick { font-size: 12px; }
  .bet-edge-chip { font-size: 10px; padding: 1px 5px; }
}
.sel-odds { font-size: 12px; color: var(--accent-hi); font-weight: 600; margin-left: auto; }
.sel-game { font-size: 11px; color: var(--text-muted); }
.sel-game-time { opacity: 0.65; }
/* Tennis tournament chip — appears under the matchup line for tennis bets so
   the user can tell a Masters from a Challenger or ITF Futures at a glance. */
.sel-comp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.30);
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
}
.bet-result-detail { display: block; font-size: 11px; color: var(--accent-hi); margin-top: 3px; font-style: italic; }
.bet-result-detail.tennis-detail { font-style: normal; line-height: 1.5; }
.bet-result-detail.tennis-detail .bet-result-score { font-weight: 600; color: var(--text); }
.bet-result-detail.tennis-detail .bet-result-sub { font-size: 11px; color: var(--text-dim); }
.bet-result-detail.tennis-detail .bet-result-sub strong { color: var(--text); font-weight: 600; }

.bet-financials {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.bet-financials strong { color: var(--text); }
.bet-odds-tag { font-weight: 700; color: var(--accent-hi); }

/* Bot edge/units chip — pinned to the right of the financials row.
   Shows "3u · 6.4% edge" so a punter knows what the bot's conviction was
   without opening the decision card. */
.bet-edge-chip {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
}
.bet-edge-units { color: var(--accent-hi); font-weight: 700; }
.bet-edge-pct   { color: var(--green); font-weight: 600; }
.bet-edge-sep   { color: var(--text-dim); opacity: 0.7; }

/* ── Edge tier colour-coding (Round 22 / 2026-05-06) ─────────────────────────
   Lets a punter eyeball "this is a 14% edge — much fatter than that 4% one"
   without having to read the digits. Tier thresholds match fmtEdgePct in app.js.
   Apply alongside .edge-cell on the element holding the percentage. */
.edge-cell { transition: color 120ms ease, text-shadow 120ms ease; }
.edge-low      { color: var(--text-muted) !important; }
.edge-medium   { color: #69f0ae !important; }
/* 10–15% caution band (R148/R172 kill-zone narrow) — yellow, not green, so a
   user doesn't read a 12% edge as "high confidence". */
.edge-killzone { color: #facc15 !important; font-weight: 700; }
.edge-high     { color: #00c853 !important; font-weight: 700; }
.edge-elite    {
  color: #00e676 !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 230, 118, 0.55);
}
/* Inside the bet-edge-chip, override the static green so the tier wins */
.bet-edge-chip.edge-low      .bet-edge-pct { color: var(--text-muted); }
.bet-edge-chip.edge-medium   .bet-edge-pct { color: #69f0ae; }
.bet-edge-chip.edge-killzone .bet-edge-pct { color: #facc15; }
.bet-edge-chip.edge-killzone {
  border-color: rgba(250, 204, 21, 0.40);
  background: rgba(250, 204, 21, 0.08);
}
.bet-edge-chip.edge-high     .bet-edge-pct { color: #00c853; }
.bet-edge-chip.edge-elite    .bet-edge-pct { color: #00e676; text-shadow: 0 0 6px rgba(0, 230, 118, 0.55); }
.bet-edge-chip.edge-elite    { border-color: rgba(0, 230, 118, 0.45); background: rgba(0, 230, 118, 0.08); }

/* In-flight CLV chip — grey/muted styling so it reads distinctly from the
   green/red post-settle CLV badge. Surfaces while the bet is still pending
   and the CLV pipeline has captured a closingOdds snapshot. */
.mkt-badge.clv-inflight {
  color: var(--text-dim);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Kill-zone skip banner — shown in the slip footer after Distribute when
   any leg's edge fell in the 10–15% caution band or above 25%. Explains
   why certain legs got $0 instead of a Kelly stake. */
.kill-zone-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
}
.kill-zone-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #facc15;
  margin-bottom: 6px;
}
.kill-zone-banner-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.kill-zone-banner-close:hover { color: var(--text); }
.kill-zone-banner-list {
  margin: 4px 0 6px 0;
  padding-left: 18px;
  color: var(--text-dim);
}
.kill-zone-banner-list li { margin: 2px 0; }
.kill-zone-banner-foot {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.bet-tipster-tag {
  font-weight: 700;
  color: var(--accent-hi);
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.30);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.bet-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0;
}

.result-won       { color: var(--green); }
.result-lost      { color: var(--red); }
.result-push      { color: var(--yellow); }
.result-cancelled { color: #64748b; font-size: 12px; }
.result-voided    { color: var(--text-dim, #94a3b8); font-weight: 600; font-size: 12px; }

/* ── Resolution proof (R20-E) ─────────────────────────────────────────────────
   Shown on every settled bet card under the W/L pill (and inline under each
   parlay leg). Tells the user *why* the bet settled the way it did — final
   score, player stat line, set scores, etc — plus a small badge for whether
   it was the auto-settler, an API fallback, or a manual admin call. */
.bet-resolution-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.06);
  border-left: 2px solid rgba(148, 163, 184, 0.30);
  border-radius: 4px;
}
.bet-resolution-proof .bet-resolution-line {
  flex: 1 1 auto;
  min-width: 0;
}
.bet-resolution-proof strong { color: var(--text); font-weight: 600; font-style: normal; }

.bet-resolution-method {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bet-resolution-method.auto {
  color: var(--green);
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.32);
}
.bet-resolution-method.fallback {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.32);
}
.bet-resolution-method.admin {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.36);
}

/* Tighter/inline variant when shown inside a parlay leg's sel-content */
.sel-content > .bet-resolution-proof {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 10.5px;
}
.sel-content > .bet-resolution-proof .bet-resolution-method { font-size: 9px; }

.bet-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  /* Always visible — the old hover-to-reveal pattern dropped focus mid-click,
     causing the action row to collapse before the click registered. Users had
     to click twice. Static-visible eliminates that race entirely. */
}
.bet-card.pending { cursor: default; transition: background 0.15s; }
.bet-card.pending:hover { background: var(--bg2, var(--bg-3)); }

/* ── Leaderboard sport tabs ─────────────────────────────────────────────────── */
.lb-sport-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.lb-sport-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.lb-sport-btn:hover { color: var(--text); }
.lb-sport-btn.active { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }

/* Extra Betting LB filter rows — time pills above the sport tabs, and the
   bottom row (min-bets dropdown, activity pills, include-pending toggle). */
.lb-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px 0;
  flex-wrap: wrap;
}
.lb-filter-row-bottom {
  padding: 10px 16px 4px;
  gap: 14px;
  border-top: 1px dashed var(--border);
  margin-top: 8px;
}
.lb-pill {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all .15s;
}
.lb-pill:hover { color: var(--text); border-color: var(--border-hi); }
.lb-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.lb-pill-sm { font-size: 11px; padding: 3px 10px; }
.lb-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lb-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
}
.lb-filter-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.lb-filter-select:hover { border-color: var(--border-hi); }
.lb-filter-checkbox {
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.lb-filter-checkbox input[type=checkbox] { cursor: pointer; }

/* Humans / Bots bucket tabs — sit above the sport row, larger pills */
.lb-bucket-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
  flex-wrap: wrap;
}
.lb-bucket-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: all .15s;
}
.lb-bucket-btn:hover { color: var(--text); border-color: var(--border-hi); }
.lb-bucket-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.lb-bot-vis-menu {
  position: absolute;
  right: 16px;
  margin-top: 4px;
  background: rgba(42, 31, 71, 0.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 180px;
  box-shadow: var(--shadow-3);
  z-index: 20;
}
.lb-bot-vis-head {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.lb-bot-vis-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.lb-bot-vis-row:hover { background: rgba(255,255,255,.04); }
.lb-bot-vis-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 6px 4px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────────── */
.lb-table-wrap {
  padding: 16px;
  overflow-x: auto;
  flex-shrink: 0;
}

/* Pickem LB: override parent overflow so sticky can escape.
   overflow-x:clip clips content like 'hidden' but does NOT create a new
   stacking/scroll context, so position:sticky inside still works. */
#tab-pickem-leaderboard .lb-table-wrap {
  overflow-x: clip;
}

/* Inner div handles horizontal overflow for the table itself */
.pickem-lb-scroll {
  overflow-x: auto;
}

/* Sticky header row — freezes at top while the tab pane scrolls vertically */
.pickem-lb-table thead.pickem-lb-thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
  border-bottom: none; /* box-shadow replaces the border visually */
}

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

.leaderboard-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.leaderboard-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.leaderboard-table tbody tr:last-child td { border-bottom: none; }
.leaderboard-table tbody tr.is-me td { background: var(--selected-bg); }
.leaderboard-table tbody tr:hover td { background: var(--bg-4); }
.leaderboard-table tbody tr.is-me:hover td { background: var(--selected-bg); }

/* Tier 1 dopamine: row-flash on P&L change. Triggered by JS adding the class
   after a fresh SSE leaderboard payload. Removes itself when the animation ends. */
@keyframes lb-pulse-up   { 0% { background-color: rgba(34,197,94,0.28); } 100% { background-color: transparent; } }
@keyframes lb-pulse-down { 0% { background-color: rgba(239,68,68,0.28); } 100% { background-color: transparent; } }
.leaderboard-table tbody tr.lb-pulse-up   td { animation: lb-pulse-up   1.4s ease-out 1; }
.leaderboard-table tbody tr.lb-pulse-down td { animation: lb-pulse-down 1.4s ease-out 1; }

/* Tier 2 dopamine: streak badges in the player name cell + soft ROI glow on
   the row. Hot ROI = +10% or better; Cold ROI = −10% or worse. */
.lb-streak {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.lb-streak.lb-streak-hot  { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.45); }
.lb-streak.lb-streak-cold { background: rgba(56,189,248,0.16); color: #38bdf8; border: 1px solid rgba(56,189,248,0.40); }
.lb-streak.lb-streak-fire { animation: lb-streak-pulse 1.4s ease-in-out 3; }
@keyframes lb-streak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}

/* Soft glow on hot/cold ROI rows — left border bar so it never overpowers the table. */
.leaderboard-table tbody tr.lb-glow-hot  td:first-child { box-shadow: inset 3px 0 0 rgba(34,197,94,0.55); }
.leaderboard-table tbody tr.lb-glow-cold td:first-child { box-shadow: inset 3px 0 0 rgba(239,68,68,0.55); }

/* Tier 3 dopamine: full-screen celebration overlay. Used for $100+ wins
   (confetti) and 5+ win streaks (fireworks). Pointer-events:none so clicks
   pass through; layer auto-removes after the longest particle finishes. */
.celebration-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.celebration-particle {
  position: absolute;
  display: inline-block;
  will-change: transform, opacity;
  animation-name: celebration-fly;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
@keyframes celebration-fly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -200px)) rotate(var(--rot, 0)); opacity: 0; }
}
.celebration-toast {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%) scale(0.6);
  font-size: 36px;
  font-weight: 700;
  color: #fde68a;
  text-shadow: 0 0 20px rgba(245,158,11,0.6), 0 0 8px rgba(245,158,11,0.4);
  letter-spacing: 0.5px;
  white-space: nowrap;
  animation: celebration-toast-pop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes celebration-toast-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.05); }
  30%  { transform: translateX(-50%) scale(1.0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.0) translateY(-30px); }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-layer { display: none; }
}

/* ── StatBot (admin-only stats Q&A) ──────────────────────────────────── */
.statbot-hint {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.statbot-hint p { margin: 0 0 6px; color: var(--text); }
.statbot-hint ul { margin: 0; padding-left: 18px; }
.statbot-hint li { padding: 2px 0; }

.statbot-pending {
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(124,58,237,0.10), rgba(56,189,248,0.10));
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 10px;
  font-size: 13px;
  color: var(--accent-hi, #c4b5fd);
  font-weight: 600;
  animation: statbot-pulse 1.4s ease-in-out infinite;
}
@keyframes statbot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.statbot-msg {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.statbot-msg-user { background: var(--bg3); border-left: 3px solid var(--accent); }
.statbot-msg-bot  { background: var(--bg2); border-left: 3px solid #c4b5fd; }
.statbot-msg-error { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.45); }
.statbot-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
.statbot-msg-time { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.statbot-msg-body { font-size: 14px; color: var(--text); line-height: 1.5; }

.statbot-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.statbot-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
}
.statbot-entity { color: var(--text); }
.statbot-period {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg2);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.statbot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .statbot-grid { grid-template-columns: repeat(4, 1fr); }
}
.statbot-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.statbot-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  font-weight: 700;
}
.statbot-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.statbot-stat-val.positive { color: var(--green, #22c55e); }
.statbot-stat-val.negative { color: var(--red, #ef4444); }

.statbot-bw-row {
  display: grid;
  grid-template-columns: 70px 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  margin-top: 6px;
  font-size: 12px;
  background: var(--bg2);
}
.statbot-bw-row.positive { border-left: 3px solid var(--green); }
.statbot-bw-row.negative { border-left: 3px solid var(--red); }
.statbot-bw-tag { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.statbot-bw-label { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statbot-bw-game { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statbot-bw-amt { font-weight: 700; color: var(--text); }
.statbot-bw-result { font-weight: 700; }
.statbot-bw-result.positive { color: var(--green); }
.statbot-bw-result.negative { color: var(--red); }
@media (max-width: 768px) {
  .statbot-bw-row { grid-template-columns: 1fr 1fr; }
  .statbot-bw-game { grid-column: 1 / -1; }
}

.statbot-groups {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 12px;
}
.statbot-groups th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.statbot-groups td {
  padding: 6px 8px;
  border-bottom: 1px dotted rgba(255,255,255,0.05);
  color: var(--text);
}
.statbot-groups tr:last-child td { border-bottom: none; }
.statbot-groups td.positive { color: var(--green); font-weight: 700; }
.statbot-groups td.negative { color: var(--red); font-weight: 700; }

.statbot-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.statbot-cmp-half { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.statbot-cmp-name { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
@media (max-width: 768px) { .statbot-cmp { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .leaderboard-table tbody tr.lb-pulse-up   td,
  .leaderboard-table tbody tr.lb-pulse-down td { animation: none; }
  .lb-streak.lb-streak-fire { animation: none; }
}

.lb-rank {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.lb-rank-1 { color: #f59e0b; }
.lb-rank-2 { color: #94a3b8; }
.lb-rank-3 { color: #b45309; }

.lb-name { font-weight: 700; }
.lb-name-inner { display: flex; align-items: center; gap: 7px; }
.lb-name-link { color: inherit; text-decoration: none; font-weight: 700; }
.lb-name-link:hover { color: var(--accent-hi); }

.you-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
}

.lb-bankroll { font-weight: 700; white-space: nowrap; }
.lb-pnl, .lb-roi { white-space: nowrap; }
.lb-record { color: var(--text-dim); }
.lb-sport-breakdown { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.lb-sport-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-4);
  color: var(--text-muted);
  white-space: nowrap;
}
.lb-sport-tag.playoff {
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: #fff;
}

.bot-badge {
  background: #2a3a2a;
  color: #6ecf6e;
  border: 1px solid #4a8c4a;
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.lb-bot td { opacity: 0.85; }
.lb-bot .lb-name { font-style: italic; }

.lb-pending-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Recent Feed ─────────────────────────────────────────────────────────────── */
/* ── Crowd Consensus ──────────────────────────────────────────────────────────── */
.consensus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.consensus-sport-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.consensus-sport-btn:hover { border-color: var(--border-hi); color: var(--text); }
.consensus-sport-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.consensus-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.consensus-toggle input { cursor: pointer; accent-color: var(--accent); }
.consensus-list {
  padding: 0 12px 12px;
}
.consensus-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.consensus-row:last-child { border-bottom: none; }
.consensus-pick {
  flex: 1;
  min-width: 140px;
}
.consensus-pick-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.consensus-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.consensus-game {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.consensus-bettors {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.consensus-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex-shrink: 0;
}
.consensus-count {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-hi);
  min-width: 28px;
  text-align: right;
}
.consensus-odds {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 30px;
}
.consensus-record {
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}
.consensus-pnl {
  font-weight: 600;
  min-width: 55px;
  text-align: right;
}

.feed-section { padding: 4px 16px 16px; }

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.feed-item:last-child { border-bottom: none; }

.feed-user-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

.feed-user-badge.me  { background: var(--green); }
.feed-user-badge.bot { background: #2a3a2a; color: #6ecf6e; border: 1px solid #4a8c4a; }
.feed-user-badge.prawn-bot { background: #2a2a3a; color: #8888ff; border: 1px solid #5555bb; }

/* Bot sport tabs in admin */
.bot-sport-tabs { display: flex; gap: 6px; margin: 0 0 8px; }
.bot-sport-tab { padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.15s; }
.bot-sport-tab:hover { border-color: var(--accent); color: var(--text); }
.bot-sport-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* All-bets history table */
.all-bets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.all-bets-table th { text-align: left; padding: 6px 8px; color: var(--text-muted); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); }
.all-bets-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.all-bets-row.won td:first-child  { border-left: 3px solid var(--green); }
.all-bets-row.lost td:first-child { border-left: 3px solid var(--red); }
.all-bets-row.push td:first-child { border-left: 3px solid var(--text-muted); }
.all-bets-row:hover td { background: var(--bg-3); }

/* Bot perf card */
.bot-perf-card { background: var(--bg-3); border-radius: 8px; padding: 10px 14px; border: 1px solid var(--border); }

.feed-content { flex: 1; min-width: 0; }

.feed-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.feed-selections {
  font-size: 12px;
  color: var(--text-dim);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.feed-stake { font-size: 12px; font-weight: 700; color: var(--text); }
.feed-time { font-size: 11px; color: var(--text-muted); }

.feed-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
}

.feed-status.pending { background: var(--bg-4); color: var(--accent-hi); }
.feed-status.won     { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.feed-status.lost    { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.feed-status.push    { background: var(--yellow-bg); color: var(--yellow); }

/* ── Empty states ────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state.small { padding: 24px; }

.empty-icon { font-size: 40px; margin-bottom: 12px; }

.empty-state h3 {
  font-size: 17px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.empty-state p { font-size: 13px; line-height: 1.6; }

/* ── Loading overlay ─────────────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 500;
}

.overlay.hidden { display: none; }

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-hi);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.overlay-msg { color: var(--text-dim); font-size: 14px; }

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--text);
  padding: 10px 20px;
  /* R168: honour iOS safe-area-inset so the toast doesn't get clipped by the
     home-indicator bar on notched devices. */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 600;
  transition: transform 0.25s ease;
  /* R168: clamp width to the viewport (minus a 16px margin each side) and let
     long messages wrap so multi-leg parlay failures don't bleed off-screen. */
  max-width: calc(100vw - 32px);
  overflow-wrap: anywhere;
  text-align: center;
  /* R168: pointer-events restored to allow click-to-dismiss (set in JS via
     onclick handler in showToast). */
  pointer-events: auto;
  cursor: pointer;
}

.toast.error   { background: #7f1d1d; border-color: var(--red); color: #fca5a5; }
.toast.success { background: #052e16; border-color: var(--green); color: #86efac; }
.toast.warning { background: #431407; border-color: #f97316; color: #fdba74; }
.toast.visible { transform: translateX(-50%) translateY(0); }

/* ── Injury Alert Cards ───────────────────────────────────────────────────────── */
.injury-alert-card {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.injury-alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.injury-sport-badge {
  background: rgba(239,68,68,0.18);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 15, 35, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
}

.modal-backdrop.hidden { display: none; }

.modal-box {
  background: rgba(42, 31, 71, 0.92);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-3);
}

.modal-box h2 { font-size: 18px; margin-bottom: 12px; }
.modal-box p  { color: var(--text-dim); font-size: 14px; margin-bottom: 12px; line-height: 1.6; }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ── Pick Ems ─────────────────────────────────────────────────────────────────── */
.pickem-stats-row {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pickem-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.pickem-card.picked {
  border-color: var(--accent);
  border-left-color: var(--accent-hi);
  background: linear-gradient(90deg, rgba(106, 95, 193, 0.10), var(--bg-3) 60%);
}
.pickem-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
@media (prefers-reduced-motion: reduce) {
  .pickem-card { transition: none; }
  .pickem-card:hover { transform: none; box-shadow: var(--shadow-1); }
}

.pickem-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pickem-round-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--border2);
  color: var(--text);
  vertical-align: middle;
}
.pickem-round-badge.playoff {
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: #fff;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}
.pickem-started-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 0.06em;
  vertical-align: middle;
  animation: pickem-live-pulse 1.6s ease-in-out infinite;
}
@keyframes pickem-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.pickem-card.locked .pickem-pick-btn { cursor: not-allowed; }
.pickem-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin: 14px 0 6px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg-2, rgba(255,255,255,0.02));
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
}
.pickem-week-header:hover { border-color: var(--border-hi); }
.pickem-week-header .pickem-week-caret {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.pickem-week-header.collapsed .pickem-week-caret { transform: rotate(-90deg); }
.pickem-week-header .pickem-week-record {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.pickem-week-body { display: block; }
.pickem-week-body.collapsed { display: none; }

.pickem-matchup {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.pickem-pick-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pickem-pick-btn:hover:not(:disabled) { background: var(--bg-4); border-color: var(--accent-hi); }
.pickem-pick-btn.pickem-pick-active   { background: var(--accent); border-color: var(--accent); color: #fff; }
.pickem-pick-btn.pickem-pick-active .pickem-team { color: #fff; }
.pickem-pick-btn:disabled:not(.pickem-pick-active) { opacity: 0.45; cursor: default; }
.pickem-pick-btn:disabled.pickem-pick-active { cursor: default; }

.pickem-team {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.pickem-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 2px;
}

.pickem-fav-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.pickem-pick-btn { position: relative; }

/* Bot pick chips — small avatar stack anchored bottom-right of each team
   button. Shows which bots picked that side. Up to ~6 chips visible plus
   an optional "+N" counter for overflow. */
.pickem-bot-chips {
  position: absolute;
  bottom: 4px;
  right: 6px;
  display: flex;
  gap: 2px;
  pointer-events: none;
  z-index: 2;
}
.pickem-bot-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  pointer-events: auto;
}
.pickem-bot-chip-fallback {
  background: var(--bg-4);
}
.pickem-bot-chip-more {
  background: var(--accent-hi);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  padding: 0 2px;
  width: auto;
  min-width: 18px;
}

.pickem-odds {
  font-size: 12px;
  color: var(--accent-hi);
  font-weight: 600;
}

.pickem-vs {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

#pickemList { padding: 10px 16px; }

.pickem-result-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.pickem-result-card.correct   { border-left-color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.pickem-result-card.incorrect { border-left-color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.pickem-result-card.push      { border-left-color: var(--yellow); background: var(--yellow-bg); }
.pickem-result-card.pending   { border-left-color: var(--accent-hi); }

.pickem-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.pickem-result-game {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

.pick-result {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}
.pick-result-correct   { color: var(--green); }
.pick-result-incorrect { color: var(--red); }
.pick-result-push      { color: var(--yellow); }

.pick-settle-btns { display: flex; gap: 5px; flex-wrap: wrap; }

.pickem-result-pick { font-size: 13px; color: var(--text-dim); }
.pickem-result-pick strong { color: var(--text); }

/* ── Live banner ─────────────────────────────────────────────────────────────── */
.live-banner {
  background: rgba(239, 68, 68, 0.12);
  border-bottom: 1px solid var(--red-border);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 8px 14px;
  letter-spacing: 0.5px;
}

.live-banner.live-banner-final {
  background: rgba(74, 85, 104, 0.15);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.hidden   { display: none !important; }

/* ── Bot run log ─────────────────────────────────────────────────────────────── */
.run-log-panel { margin-top:8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px;max-height:200px;overflow-y:auto;font-family:monospace;font-size:11px;line-height:1.5 }
.run-log-line  { padding:1px 0 }
.run-log-good  { color:var(--green) }
.run-log-warn  { color:var(--red) }
.run-log-info  { color:var(--text-muted) }

/* ── Scrollbars ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ── Market stats table ──────────────────────────────────────────────────────── */
.market-stats-table {
  width: 100%;
  /* Min width so all 5 columns stay visible on narrow viewports; the parent
     wraps with overflow-x:auto so the user can swipe the table on mobile
     instead of having columns clipped/collapsed. */
  min-width: 380px;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.market-stats-table thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--border);
}
.market-stats-table thead th:not(:first-child) { text-align: right; }
.market-stats-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.market-stats-table tbody td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.market-stats-table tbody tr:last-child td { border-bottom: none; }
.ms-cat { color: var(--text); font-weight: 500; }
.ms-num { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ── Market Performance — refreshed look (ROI accent + win% meter + ROI pill) ── */
.market-stats-table tbody td { padding: 7px 10px 7px 0; }
.ms-row td.ms-cat {
  border-left: 3px solid transparent;
  padding-left: 9px;
  font-weight: 600;
}
.ms-accent-pos  td.ms-cat { border-left-color: var(--green); }
.ms-accent-neg  td.ms-cat { border-left-color: var(--red); }
.ms-accent-flat td.ms-cat { border-left-color: var(--border-hi); }
.ms-legs   { color: var(--text-muted); }
.ms-record { color: var(--text-dim); }
.ms-push   { color: var(--text-muted); font-size: 0.92em; margin-left: 2px; }

/* Win% inline meter */
.ms-wr-cell { text-align: right; vertical-align: middle; padding: 6px 10px 6px 0; }
.ms-wr { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ms-wr-track {
  width: 54px; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,0.08); overflow: hidden; flex-shrink: 0;
}
.ms-wr-fill { display: block; height: 100%; border-radius: 99px; background: var(--text-dim); transition: width 0.2s ease; }
.ms-wr-fill.positive { background: var(--green); }
.ms-wr-fill.negative { background: var(--red); }
.ms-wr-fill.flat     { background: var(--text-dim); }
.ms-wr-num { font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; font-weight: 700; }
.ms-wr-num.positive { color: var(--green); }
.ms-wr-num.negative { color: var(--red); }
.ms-wr-num.flat     { color: var(--text-dim); }

/* ROI pill */
.ms-roi-pill {
  display: inline-block; min-width: 58px; text-align: center;
  padding: 2px 9px; border-radius: 99px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 0.78rem;
}
.ms-roi-pill.positive { color: var(--green);    background: rgba(34,197,94,0.14); }
.ms-roi-pill.negative { color: var(--red);      background: rgba(239,68,68,0.14); }
.ms-roi-pill.neutral  { color: var(--text-dim); background: rgba(255,255,255,0.06); }

/* "Trends & Graphs" CTA in the Market Performance header */
.mp-trends-btn {
  background: var(--accent); color: #fff; border: none;
  font-size: 11px; padding: 4px 11px; flex-shrink: 0; font-weight: 700;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 6px rgba(106,95,193,0.4);
}
.mp-trends-btn:hover { background: var(--accent-hi); color: #1a1430; }

/* Market Performance drill-down — click a row to reveal contributing bets */
.market-stats-table tr[data-market-cat]:hover {
  background: rgba(255,255,255,0.04);
}
.market-stats-table tr[data-market-cat].expanded {
  background: rgba(255,255,255,0.06);
}
.market-stats-table tr[data-market-cat] .ms-cat::before {
  content: "▸";
  color: var(--text-muted);
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.market-stats-table tr[data-market-cat].expanded .ms-cat::before {
  transform: rotate(90deg);
}
.market-stats-table tr.ms-expand > td.ms-expand-body {
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-left: 2px solid var(--purple, #9333ea);
}
.market-stats-table .ms-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.market-stats-table .ms-bet-row:last-child { border-bottom: none; }
.market-stats-table .ms-bet-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.market-stats-table .ms-bet-icon.won  { color: var(--green); }
.market-stats-table .ms-bet-icon.lost { color: var(--red); }
.market-stats-table .ms-bet-icon.push { color: var(--text-muted); }
.market-stats-table .ms-bet-label {
  color: var(--text);
  font-weight: 500;
  flex: 1 1 200px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-stats-table .ms-bet-game,
.market-stats-table .ms-bet-user,
.market-stats-table .ms-bet-stake,
.market-stats-table .ms-bet-edge,
.market-stats-table .ms-bet-odds,
.market-stats-table .ms-bet-date,
.market-stats-table .ms-bet-parlay {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.market-stats-table .ms-bet-user { color: var(--text-dim); }
/* 2026-06-07: odds-band colour tiers in the Market Performance drill-down.
   Lets the eye scan for patterns like "tennis bets fail at >2.0 odds". */
.market-stats-table .ms-bet-odds {
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}
.market-stats-table .ms-bet-odds-chalk { color: var(--text-muted); background: rgba(120,120,120,0.08); }
.market-stats-table .ms-bet-odds-mid   { color: var(--text-dim);   background: rgba(120,120,120,0.04); }
.market-stats-table .ms-bet-odds-dog   { color: #f59e0b;           background: rgba(245,158,11,0.10); }
.market-stats-table .ms-bet-parlay {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(147, 51, 234, 0.12);
  color: var(--purple, #c084fc);
}

/* ── Parlay leg icons ────────────────────────────────────────────────────────── */
.leg-icon {
  display: inline-block;
  width: 14px;
  font-size: 0.8rem;
  font-weight: 700;
}
.leg-icon.win       { color: var(--green); }
.leg-icon.loss      { color: var(--red); }
.leg-icon.push      { color: var(--yellow, #eab308); }
.leg-icon.cancelled { color: var(--text-muted); }
.leg-icon.pending   { color: var(--text-muted); }

.leg-settle-btns { display: flex; gap: 4px; margin-top: 5px; }
/* Highlight the leg button matching the leg's current result so the admin can
   see at a glance what a settled leg is currently graded as. */
.leg-settle-btns .btn.leg-btn-active { outline: 2px solid currentColor; outline-offset: 1px; font-weight: 700; }

/* ── Leaderboard extras ──────────────────────────────────────────────────────── */
.lb-clickable { cursor: pointer; }
.lb-clickable:hover td { background: rgba(255,255,255,0.03); }

.lb-rebuy-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  margin-left: 5px;
  font-weight: 600;
  vertical-align: middle;
}

/* ── User bets modal ─────────────────────────────────────────────────────────── */
.ub-list { max-height: 55vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

.ub-day { margin-bottom: 4px; }
.ub-day[open] .ub-day-header { border-bottom-color: transparent; }
.ub-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
  color: var(--text);
}
.ub-day-header::-webkit-details-marker { display: none; }
.ub-day-count { color: var(--text-muted); font-weight: 400; }

.ub-day-body { padding: 4px 0; }

.ub-bet {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.83rem;
}
.ub-bet.is-me { background: rgba(124,58,237,.07); border-radius: 6px; padding: 8px; margin: 2px -4px; }
.ub-bet:last-child { border-bottom: none; }

.ub-bet-head { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; flex-wrap: wrap; }
.ub-type { font-weight: 600; }
.ub-stake { color: var(--text-muted); font-size: 0.78rem; }
.ub-status {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-3);
  text-transform: capitalize;
}
.ub-status.positive { color: var(--green); background: var(--green-bg); }
.ub-status.negative { color: var(--red); background: var(--red-bg); }
.ub-time { font-size: 0.72rem; color: var(--text-dim); }

.ub-sel { color: var(--text-dim); padding-left: 10px; line-height: 1.6; }
.ub-sel-top { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ub-sel-odds { color: var(--text-muted); font-size: 0.78rem; }
.ub-sel-game { color: var(--text-muted); font-size: 0.75rem; }
.ub-profit, .ub-payout { font-size: 0.8rem; padding-left: 10px; margin-top: 4px; color: var(--text-muted); }
.ub-profit.positive { color: var(--green); }
.ub-profit.negative { color: var(--red); }

/* ── User colour dot ─────────────────────────────────────────────────────────── */
.user-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
  opacity: 0.85;
}

/* ── Best bet ────────────────────────────────────────────────────────────────── */
.lb-best-bet {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.lb-best-bet-profit { color: var(--green); font-weight: 600; }

.lb-recent-dots {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-right: 6px;
  vertical-align: middle;
}
.lb-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  cursor: default;
  letter-spacing: 0;
}
.lb-dot-w { background: rgba(34,197,94,0.22); color: var(--green); }
.lb-dot-l { background: rgba(239,68,68,0.22); color: var(--red); }
.lb-dot-p { background: rgba(148,163,184,0.22); color: var(--text-muted); }

/* Emergency Controls panel — status indicator dots. Green = live, red = paused. */
.emergency-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset;
}
.emergency-dot-green { background: var(--green, #22c55e); box-shadow: 0 0 6px rgba(34,197,94,0.55); }
.emergency-dot-red   { background: var(--red, #ef4444);   box-shadow: 0 0 6px rgba(239,68,68,0.65); animation: emergency-pulse 1.4s ease-in-out infinite; }
@keyframes emergency-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Newest dot — animated only when SSE delivers a fresh settle. Ls slide in
   quietly from the right, Ws pop and shake to celebrate. The animations are
   one-shot — once they finish, the dot sits still until another settle. */
@keyframes lb-dot-l-in {
  0%   { transform: translateX(8px); opacity: 0; }
  100% { transform: translateX(0);   opacity: 1; }
}
@keyframes lb-dot-w-pop {
  0%   { transform: scale(0.4) rotate(-8deg);  opacity: 0; }
  35%  { transform: scale(1.30) rotate(4deg);  opacity: 1; }
  55%  { transform: scale(0.95) rotate(-3deg); }
  72%  { transform: scale(1.10) rotate(2deg); }
  100% { transform: scale(1.0)  rotate(0); }
}
@keyframes lb-dot-w-glow {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.lb-dot-fresh.lb-dot-l { animation: lb-dot-l-in 0.32s ease-out 1; }
.lb-dot-fresh.lb-dot-p { animation: lb-dot-l-in 0.32s ease-out 1; }
.lb-dot-fresh.lb-dot-w {
  animation:
    lb-dot-w-pop  0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1,
    lb-dot-w-glow 0.85s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .lb-dot-fresh.lb-dot-w,
  .lb-dot-fresh.lb-dot-l,
  .lb-dot-fresh.lb-dot-p { animation: none; }
}

/* ── LB expand chevron ───────────────────────────────────────────────────────── */
.lb-expand-chevron {
  margin-left: auto;
  font-size: 9px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s, transform 0.2s;
  user-select: none;
  flex-shrink: 0;
}
.lb-expand-chevron:hover { background: var(--bg-4); color: var(--text); }
.lb-expand-chevron--open { color: var(--accent); }

.lb-expand-row td { padding: 0 !important; }
.lb-expand-td {
  background: var(--bg-2);
  border-bottom: 2px solid var(--border);
}
.lb-exp-inner {
  padding: 12px 16px 14px;
}

/* stats row */
.lb-exp-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lb-exp-stat {
  background: var(--bg-3);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  min-width: 60px;
}
.lb-exp-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.lb-exp-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* recent bets list */
.lb-exp-bets-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.lb-exp-bets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lb-exp-bet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 12px;
}
.lb-exp-bet-label {
  flex: 1;
  color: var(--text);
  min-width: 0;
}
.lb-exp-parlay-legs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.lb-exp-bet-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}
.lb-exp-bet-date {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}
.lb-exp-empty { color: var(--text-muted); font-size: 12px; }
.lb-exp-view-all { margin-top: 10px; }

/* ── LB dot tooltip ──────────────────────────────────────────────────────────── */
.lb-tooltip {
  position: fixed;
  z-index: 9000;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  width: 240px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  display: none;
}
.lb-tip-header { font-weight: 600; margin-bottom: 4px; }
.lb-tip-legs { color: var(--text-muted); font-size: 11px; margin-bottom: 4px; }
.lb-tip-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 11px;
}

/* also widen lb-best-bet max-width since dots take more space */
.lb-best-bet { max-width: 100%; }

.best-bet-card {
  background: linear-gradient(135deg, rgba(34,197,94,0.08) 0%, rgba(34,197,94,0.04) 100%);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.best-bet-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.best-bet-pick { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.best-bet-meta { font-size: 0.78rem; color: var(--text-dim); }
.best-bet-profit { color: var(--green); font-weight: 700; }
.best-bet-date { color: var(--text-muted); margin-left: 6px; }

/* ── Archive cards ───────────────────────────────────────────────────────────── */
.archive-card { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.archive-card-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.archive-date { color: var(--text-muted); font-size: 0.78rem; font-weight: 400; }
.archive-standings { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.archive-standing { display: flex; justify-content: space-between; }
.archive-meta { color: var(--text-dim); font-size: 0.78rem; margin-top: 8px; }

/* ── Slip FAB & Mobile Backdrop ─────────────────────────────────────────────── */
.slip-fab {
  display: none;
  position: fixed;
  bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: grab;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(91,33,182,0.6);
  z-index: 410;
  touch-action: none;
  user-select: none;
}

.slip-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.slip-fab-badge.hidden { display: none; }

.slip-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 390;
}

.slip-backdrop.visible { display: block; }

/* ── Community picks ────────────────────────────────────────────────────────── */
.community-picks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.cp-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
}

.cp-item.cp-item-correct { border-color: var(--green-border); }
.cp-item.cp-item-incorrect { border-color: var(--red-border); }
.cp-item.cp-item-pending { border-color: var(--border); opacity: 0.75; }
.cp-name { color: var(--text-dim); }
.cp-pick { color: var(--text); font-weight: 600; }
.cp-result { font-weight: 700; }
.cp-item.cp-item-correct .cp-result { color: var(--green); }
.cp-item.cp-item-incorrect .cp-result { color: var(--red); }

/* ── NHL Lineup section ─────────────────────────────────────────────────────── */
.lu-table {
  padding: 8px 0 4px;
  width: 100%;
}
.lu-row {
  display: grid;
  grid-template-columns: 20px 1fr 1fr;
  gap: 4px 8px;
  align-items: start;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.lu-row:last-child { border-bottom: none; }
.lu-header-row { padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.10); margin-bottom: 2px; }
.lu-col-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-hi);
}
.lu-col-right { text-align: right; }
.lu-ln {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-top: 1px;
}
.lu-names { color: var(--text-dim); line-height: 1.35; }
/* legacy — kept for compat */
.lu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0 4px; }
.lu-team-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-hi); margin-bottom: 6px; }
.lu-line { display: flex; gap: 6px; align-items: baseline; margin-bottom: 3px; font-size: 12px; }

/* ── Profile tab ─────────────────────────────────────────────────────────────── */
.profile-header {
  text-align: center;
  padding: 24px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar { font-size: 48px; margin-bottom: 8px; line-height: 1; }
.profile-name { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 8px; }
.profile-name-edit-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.profile-name-edit-btn:hover { color: var(--text); border-color: var(--accent); }
.profile-stats { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.profile-sub-nav {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
}
.profile-sub-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.profile-sub-btn:hover { background: var(--bg-4); color: var(--text); }
.profile-sub-btn.active {
  background: var(--selected-bg);
  border-color: var(--accent);
  color: var(--accent-hi);
}
.profile-sport-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 16px 8px;
  flex-wrap: wrap;
}
.profile-market-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.pick-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  font-size: 14px;
}
.pick-summary-stat { font-weight: 600; }
.pick-summary-sep { color: var(--text-muted); }

/* ── User Avatars ────────────────────────────────────────────────────────────── */
#userPill:hover .user-pill-name { color: #fff; }

.user-avatar {
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  vertical-align: middle;
}
.user-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 4px;
}
.profile-avatar-section .user-avatar,
.profile-avatar-section .user-avatar-initials {
  width: 72px !important;
  height: 72px !important;
  font-size: 28px !important;
  cursor: pointer;
  border: 2px solid var(--border-hi);
  transition: border-color 0.15s;
}
.profile-avatar-section .user-avatar:hover,
.profile-avatar-section .user-avatar-initials:hover { border-color: var(--accent-hi); }
.profile-avatar-change-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
}
.profile-avatar-change-btn:hover { color: var(--text); border-color: var(--accent); }
.avatar-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.avatar-lightbox img {
  max-width: min(90vw, 512px); max-height: min(90vh, 512px);
  border-radius: 50%; border: 4px solid var(--border2);
  box-shadow: 0 8px 48px rgba(0,0,0,0.7);
}

/* ── Modal field labels ───────────────────────────────────────────────────────── */
.modal-field-label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}

/* ── Welcome ────────────────────────────────────────────────────────────────── */
.welcome-panel {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
/* Welcome hero card */
.welcome-hero {
  background: linear-gradient(135deg, #0d1f2d 0%, var(--bg2) 100%);
  border: 1px solid #1a4a6a;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.welcome-hero-left { display: flex; flex-direction: column; gap: 4px; }
.welcome-hello {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.welcome-date {
  font-size: 13px;
  color: var(--text-muted);
}
.welcome-hero-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.welcome-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 72px;
}
.welcome-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.welcome-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Games bar with sport pills */
.welcome-games-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 14px;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.welcome-games-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-right: 2px;
}
.welcome-sport-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.welcome-sport-pill.nhl { background: rgba(93,184,240,0.15); border-color: rgba(93,184,240,0.35); color: #5db8f0; }
.welcome-sport-pill.nrl { background: rgba(50,205,100,0.12); border-color: rgba(50,205,100,0.3);  color: #32cd64; }
.welcome-sport-pill.afl { background: rgba(255,160,50,0.12);  border-color: rgba(255,160,50,0.3);  color: #ffa032; }

/* Legacy — kept for safety */
.welcome-greeting { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.welcome-bankroll-pill { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 13px; color: var(--green); font-weight: 600; }
.welcome-games-bar strong { color: var(--text); }

/* SGM card "+ Add to Slip" button */
.sgm-add-btn {
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sgm-add-btn:hover { opacity: 0.85; }
.sgm-add-btn.in-slip { background: var(--text-muted); }

/* Welcome grid sections */
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.welcome-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.welcome-section-head {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Leaderboard mini */
.welcome-lb { display: flex; flex-direction: column; }
.welcome-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.welcome-lb-row:last-child { border-bottom: none; }
.welcome-lb-rank { width: 20px; font-weight: 700; color: var(--text-muted); font-size: 12px; }
.welcome-lb-name { flex: 1; color: var(--text); font-weight: 600; }
.welcome-lb-bankroll { color: var(--green); font-weight: 700; }
.welcome-lb-pnl { font-size: 11px; color: var(--text-muted); }
.welcome-lb-pnl.pos { color: var(--green); }
.welcome-lb-pnl.neg { color: var(--red); }

/* My bets mini */
.welcome-bets { display: flex; flex-direction: column; }
.welcome-bet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.welcome-bet-row:last-child { border-bottom: none; }
.welcome-bet-sport { font-size: 16px; }
.welcome-bet-info { flex: 1; min-width: 0; }
.welcome-bet-teams { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-bet-meta { font-size: 11px; color: var(--text-muted); }
.welcome-bet-label { flex: 1; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-bet-stake { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.welcome-bet-pot { font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }
.welcome-no-bets {
  padding: 20px 14px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* Activity feed */
.welcome-activity { display: flex; flex-direction: column; }
.welcome-activity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.welcome-activity-row:last-child { border-bottom: none; }
.welcome-activity-icon { font-size: 16px; flex-shrink: 0; }
.welcome-activity-who { font-weight: 700; color: var(--text); white-space: nowrap; }
.welcome-activity-action { color: var(--text-muted); font-size: 12px; }
.welcome-activity-profit { font-size: 13px; font-weight: 700; white-space: nowrap; }
.welcome-activity-profit.won { color: var(--green); }
.welcome-activity-profit.lost { color: var(--red); }
.welcome-activity-label { color: var(--text-muted); font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Legacy */
.welcome-activity-info { flex: 1; min-width: 0; }
.welcome-activity-main { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-activity-meta { font-size: 11px; color: var(--text-muted); }

.welcome-link-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--accent-coral);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.welcome-link-btn:hover { color: var(--text); background: rgba(255, 178, 135, 0.08); border-color: rgba(255, 178, 135, 0.25); }
.welcome-more-badge {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-hero { flex-direction: column; align-items: flex-start; }
  .welcome-hero-stats { width: 100%; justify-content: flex-start; }
  .welcome-news-grid { grid-template-columns: 1fr; }
}

/* ── Sortable leaderboard columns ───────────────────────────────────────────── */
.lb-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.lb-th-sort:hover { color: var(--green); }

/* ── Toggle switch ───────────────────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-knob {
  display: inline-block;
  width: 40px;
  height: 22px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-knob::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-knob { background: var(--green); border-color: var(--green); }
.toggle-switch input:checked + .toggle-knob::after { transform: translateX(18px); background: #000; }

/* ── Bet slip suggestion ─────────────────────────────────────────────────────── */
.slip-suggest-btn {
  background: rgba(50,205,100,0.12);
  border: 1px solid rgba(50,205,100,0.3);
  border-radius: 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.slip-suggest-btn:hover { background: rgba(50,205,100,0.22); }

/* User-pickable 1-5 unit selector that replaces the auto-suggest button. */
.slip-unit-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.slip-unit-select {
  background: rgba(50,205,100,0.12);
  border: 1px solid rgba(50,205,100,0.3);
  border-radius: 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.slip-unit-select:hover { background-color: rgba(50,205,100,0.22); }
.slip-unit-select:focus { outline: none; border-color: var(--green); }
.slip-unit-select option { background: var(--bg2); color: var(--text); }

/* ── Exposure bar ─────────────────────────────────────────────────────────── */
.slip-exposure {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px 5px;
  background: var(--bg3);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 11px;
}
.slip-exp-pending { color: var(--text-muted); }
.slip-exp-pct     { font-weight: 700; color: var(--text-muted); }
.slip-exp-arrow   { color: var(--accent); font-weight: 600; }
.slip-exp-total   { margin-left: auto; font-weight: 700; font-size: 11px; }
.slip-exp-total.exp-green { color: var(--green); }
.slip-exp-total.exp-amber { color: #f59e0b; }
.slip-exp-total.exp-red   { color: var(--red); }

/* ── Correlated-bet warning ──────────────────────────────────────────────── */
.slip-corr-warn {
  font-size: 10px; color: #f59e0b; font-weight: 600;
  margin-left: 4px; vertical-align: middle;
}

/* ── Round Robins toggle ──────────────────────────────────────────────────── */
.slip-rr-toggle { cursor: pointer; user-select: none; }
.slip-rr-toggle:hover { background: var(--bg-4); }
.slip-rr-chevron { font-size: 10px; margin-left: 6px; color: var(--text-muted); }

/* ── Budget distributor card ─────────────────────────────────────────────────── */
.slip-budget {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-hi);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slip-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 13px;
}
.slip-budget-hint {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}
.slip-budget-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slip-budget-input {
  flex: 1;
  min-width: 0;
}
.slip-budget-apply {
  background: var(--accent-hi);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.slip-budget-apply:hover { filter: brightness(1.1); }

/* ── Per-leg edge badge ──────────────────────────────────────────────────────── */
.slip-edge {
  font-size: 11px;
  font-weight: 600;
  margin: 2px 0 6px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1.4;
}
.slip-edge-inline {
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.slip-edge-pos, .slip-edge-inline.slip-edge-pos {
  color: var(--green);
  background: rgba(50, 205, 100, 0.10);
}
.slip-edge-neg, .slip-edge-inline.slip-edge-neg {
  color: var(--red);
  background: rgba(220, 80, 80, 0.10);
}
.slip-edge-inline.slip-edge-pos,
.slip-edge-inline.slip-edge-neg { background: transparent; }

/* ── Profit goal banner (in slip) ────────────────────────────────────────────── */
.goal-banner {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text);
}
.goal-banner.goal-met  { border-left-color: var(--green); }
.goal-banner.goal-missed { border-left-color: var(--red); }
.goal-banner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.goal-banner-progress { color: var(--text-muted); font-size: 11px; }
.goal-progress-bar {
  height: 4px;
  background: var(--bg2);
  border-radius: 2px;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── Goal completion summary card ───────────────────────────────────────────── */
.goal-summary-card {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.goal-summary-header {
  font-size: 15px;
  font-weight: 700;
}
.goal-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .goal-summary-stats { grid-template-columns: repeat(2, 1fr); }
}
.goal-summary-stat {
  background: var(--bg2);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.goal-summary-stat-val { font-size: 14px; font-weight: 700; color: var(--text); }
.goal-summary-stat-lbl { font-size: 11px; color: var(--text-muted); }
.goal-summary-sports {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.goal-summary-sport-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.goal-summary-sport-label {
  font-weight: 600;
  color: var(--text);
  min-width: 40px;
}
.goal-summary-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.goal-summary-highlight {
  background: var(--bg2);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid transparent;
  min-width: 0;
}
.goal-summary-highlight-win  { border-left-color: var(--green); }
.goal-summary-highlight-loss { border-left-color: var(--red); }

/* ── Profile settings section ────────────────────────────────────────────────── */
.profile-settings-section { padding: 0 0 20px; }
.profile-settings-card {
  margin: 0 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.profile-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.profile-settings-label { flex: 1; }
.profile-suggest-calc {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}
.profile-suggest-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.profile-suggest-amount { font-size: 22px; font-weight: 700; color: var(--green); margin-bottom: 4px; }
.profile-suggest-basis { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.profile-suggest-rebuy { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Bot legend ──────────────────────────────────────────────────────────────── */
.bot-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 0 20px;
}
.bot-legend-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  border-left: 3px solid var(--border);
}
/* Bot legend cards — palette refreshed 2026-05-27 to match the registry. */
.bot-legend-card.prawn       { border-left-color: #6d28d9; }
.bot-legend-card.oyster      { border-left-color: #2dd4bf; }
.bot-legend-card.nautilus    { border-left-color: #f6c90e; }
.bot-legend-card.siren       { border-left-color: #f43f5e; }
.bot-legend-card.chimaea     { border-left-color: #14b8a6; }
.bot-legend-card.stingray    { border-left-color: #0891b2; }
.bot-legend-card.goblinshark { border-left-color: #0e7490; }
.bot-legend-card.chondrichthyes { border-left-color: #1e40af; }
.bot-legend-card.starfish    { border-left-color: #facc15; }
.bot-legend-card.     { border-left-color: #eab308; }
.bot-legend-card.urchin      { border-left-color: #ca8a04; }
.bot-legend-card.echinoderms { border-left-color: #a16207; }
.bot-legend-card.isopod      { border-left-color: #b91c1c; }
.bot-legend-card.crab        { border-left-color: #dc2626; }
.bot-legend-card.shrimp      { border-left-color: #ef4444; }
.bot-legend-card.crustaceans { border-left-color: #991b1b; }
.bot-legend-card.anemone     { border-left-color: #ec4899; }
.bot-legend-card.coral       { border-left-color: #f97316; }
.bot-legend-card.jellyfish   { border-left-color: #f59e0b; }
.bot-legend-card.cnidarians  { border-left-color: #db2777; }
.bot-legend-card.octopus     { border-left-color: #16a34a; }
.bot-legend-card.squid       { border-left-color: #65a30d; }
.bot-legend-card.cuttlefish  { border-left-color: #15803d; }
.bot-legend-card.cephalopod  { border-left-color: #166534; }
.bot-legend-card.tuna        { border-left-color: #a855f7; }
.bot-legend-card.salmon      { border-left-color: #c084fc; }
.bot-legend-card.barracuda   { border-left-color: #9333ea; }
.bot-legend-card.halibut     { border-left-color: #7e22ce; }
.bot-legend-card.leviathan   { border-left-color: #6b21a8; }
.bot-legend-card.osteichthyes{ border-left-color: #581c87; }
.bot-legend-card.kraken      { border-left-color: #2563eb; }
.bot-legend-card.selkie      { border-left-color: #475569; }
.bot-legend-card.rusalka     { border-left-color: #7c3aed; }
.bot-legend-card.ningyo      { border-left-color: #c2410c; }
.bot-legend-card.nanaue      { border-left-color: #047857; }
.bot-legend-card.charybdis   { border-left-color: #4338ca; }
.bot-legend-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 12px 14px 2px;
}
.bot-legend-tagline {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 14px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.bot-legend-body {
  padding: 10px 14px 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.bot-legend-body p { margin: 0 0 8px; }
.bot-legend-body p:last-child { margin: 0; }
.bot-legend-body b { color: var(--text); }

@media (max-width: 768px) {
  .bot-legend-grid { grid-template-columns: 1fr; }
}

/* ── Profile export section ─────────────────────────────────────────────────── */
.profile-export-section {
  margin: 0 16px 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border-radius: 8px;
}
.profile-export-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.profile-export-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ── Profile settings row / toggle ─────────────────────────────────────────── */
.profile-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin: 4px 16px 8px;
  background: var(--bg2);
  border-radius: 8px;
  font-size: 13px;
}
.profile-setting-label { color: var(--text); font-weight: 500; }

.profile-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.profile-toggle.on {
  background: var(--green);
  border-color: var(--green);
}
.profile-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  pointer-events: none;
}
.profile-toggle.on .profile-toggle-knob { transform: translateX(18px); }

/* ── Win Celebration Overlay ────────────────────────────────────────────────── */
.win-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.win-celebration-overlay.hidden { display: none; }

.win-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

.win-celebration-card {
  position: relative;
  width: min(480px, 92vw);
  max-height: 90dvh;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  z-index: 10001;
  animation: winCardIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes winCardIn {
  from { transform: scale(0.6) translateY(40px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.win-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d0a14 100%);
}

.win-card-content {
  position: relative;
  z-index: 2;
  padding: 32px 28px 28px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
}

.win-title {
  font-size: 46px;
  font-weight: 700;
  color: #f6c90e;
  letter-spacing: -1px;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(246,201,14,0.5), 0 0 40px rgba(246,201,14,0.3);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.win-bets {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: left;
}
.win-bet-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.win-bet-row:last-child { border-bottom: none; }
.win-bet-label { flex: 1; font-weight: 500; }
.win-bet-profit { color: #4ade80; font-weight: 700; font-size: 15px; white-space: nowrap; }
.win-bet-total {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 14px;
  font-weight: 700;
  color: #f6c90e;
}

.win-quote {
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  padding: 0 8px 12px;
  line-height: 1.5;
}

.win-close-btn {
  background: #f6c90e;
  color: #0d0a14;
  border: none;
  border-radius: 0;
  padding: 13px 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(246,201,14,0.35);
  transition: background 0.12s, box-shadow 0.12s;
}
.win-close-btn:hover {
  background: #ffe040;
  box-shadow: 0 6px 28px rgba(246,201,14,0.5);
}

/* ── Narrow header at <1024px ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --slip-w: 280px; --sidebar-w: 60px; }

  .sidebar-section-label { display: none; }
  .tab-label { display: none; }
  .tab-icon  { width: auto; font-size: 18px; }
  .tab-btn   { justify-content: center; padding: 12px 0; }
  .tab-btn.active { border-right-width: 3px; }
  .tab-badge { position: absolute; top: 4px; right: 4px; padding: 0 4px; }
}

/* ── Mobile layout (≤768px) ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h: 52px;
    --sidebar-w: 0px;
    --slip-w:   100%;
    --mobile-nav-h: 0px;
  }

  body { overflow: auto; }

  /* ── Header mobile ── */
  .header { padding: 0 10px; gap: 6px; }
  .header-logo { font-size: 15px; }
  .header-logo-text { display: none; }
  .header-bank { display: none; }
  .header-right { gap: 6px; }
  .header-my-bets-label { display: none; }
  .header-my-bets-btn { padding: 5px 10px; }
  .header-actions .btn-sm { padding: 4px 8px; font-size: 11px; }

  /* ── Bottom tab bar removed on mobile ──────────────────────────────────────
     The hamburger button in the header opens the full sidebar drawer, which
     is the only navigation entry point on mobile. The bottom row is gone so
     the bet/feed content gets the full screen height.                       */
  .tab-nav { display: none; }
  .tab-nav.sidebar-open { display: flex; }

  .sidebar-section-label { display: none; }

  /* ── Layout mobile — no bottom nav reservation ── */
  .layout {
    left: 0;
    top: var(--header-h);
    bottom: env(safe-area-inset-bottom, 0px);
    right: 0;
    overflow: hidden;
  }

  .main-panel {
    border-right: none;
    overflow: hidden;
  }

  .tab-pane { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ── Bet slip: fixed bottom drawer ──
     Wave-7: drawer height shrinks when an input on the page is focused so
     the soft keyboard + slip don't sandwich the active input. The slip
     drops from 65vh → 50vh whenever any descendant of <body> matches
     :focus-within on a text-like input. Form inputs anywhere on the page
     also get a scroll-margin-bottom so smoothScrollIntoView pushes them
     above the drawer. */
  .slip-panel {
    position: fixed;
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    width: 100%;
    height: 65vh;
    max-height: 65vh;
    z-index: 400;
    border-top: 2px solid var(--brand);
    border-radius: 14px 14px 0 0;
    border-left: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.18s ease;
    overflow-y: auto;
  }

  .slip-panel.open { transform: translateY(0); }

  /* When the slip is open AND a non-slip input is focused, shrink the slip
     to free vertical space for the keyboard+input combo. The selector
     limits this to inputs OUTSIDE .slip-panel so typing into the stake
     field itself doesn't shrink the slip out from under you. */
  body:has(input:focus, textarea:focus, select:focus):not(:has(.slip-panel:focus-within)) .slip-panel.open {
    height: 50vh;
    max-height: 50vh;
  }

  /* Push focused inputs above the drawer when the page scrolls them into
     view (e.g. on autofocus or after validation). 65vh matches the slip
     height so the input lands just above the drawer top edge. */
  input, textarea, select {
    scroll-margin-bottom: 65vh;
  }

  /* Show drag handle on mobile */
  .slip-drag-handle { display: block; }

  /* Show FAB on mobile */
  .slip-fab { display: flex; }

  /* ── Sport-bar / pill rows: always scrollable, never wrap ── */
  .sport-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 2px;
  }
  .sport-bar::-webkit-scrollbar { display: none; }
  .sport-btn { flex-shrink: 0; }

  /* ── Market rows stack on mobile ── */
  .market-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 12px;
    gap: 4px;
  }

  .market-label,
  .market-row-wide .market-label {
    width: 100%;
    font-size: 10px;
  }

  .market-btns { width: 100%; }

  /* Odds buttons: 44px minimum touch target */
  .odds-btn { padding: 6px 4px 5px; min-height: 44px; font-size: 13px; }

  /* Game cards compact */
  .game-head { padding: 8px 12px; gap: 8px; }
  .game-teams { font-size: 13px; gap: 6px; }
  .team-away, .team-home { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-time { font-size: 11px; }
  .game-status { font-size: 10px; }
  .odds-price { font-size: 13px; }
  .odds-label { font-size: 10px; }
  .section-heading { padding: 8px 12px; font-size: 11px; }

  /* ── Bet cards ── */
  .bet-card { word-break: break-word; padding: 10px 12px; }
  .bet-card-header { flex-wrap: wrap; gap: 4px; }
  .bet-card-actions { flex-wrap: wrap; gap: 4px; }
  .bet-card .btn-sm { font-size: 11px; padding: 4px 8px; min-height: 32px; }
  .bet-selections { font-size: 12px; }
  .bet-financials { font-size: 11px; flex-wrap: wrap; gap: 4px; }

  /* ── Stat-card grid: tighten gaps so 4 cards fit a phone width ── */
  .stats-row { gap: 6px; padding: 10px 12px; }
  .stat-card { padding: 8px 6px; }
  .stat-label { font-size: 9px; letter-spacing: 0.6px; }
  .stat-value { font-size: 16px; }

  /* ── Modal: full-width bottom sheet feel ── */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 16px 24px;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  #gamesContainer, #pickemGames { padding: 8px 10px; gap: 8px; }

  /* ── Welcome mobile ── */
  .welcome-panel { padding: 12px 10px; gap: 14px; }
  .welcome-hello { font-size: 18px; }

  /* ── Updates tab mobile ── */
  .upd-ladders-grid { gap: 8px; }
  .upd-ladder-block { flex: 1 1 100%; min-width: 0; }

  /* ── Admin tab mobile ── */
  .bot-perf-card { font-size: 12px; }
  .admin-section-header { font-size: 12px; padding: 10px 12px; }

  /* ── Leaderboard mobile: keep key columns, drop the rest ──
     User reported the pinned name column blocked free horizontal scroll —
     name now scrolls with the rest of the row. */
  .lb-col-roi   { display: none; }
  .lb-col-ppd   { display: none; }
  .lb-col-units { display: none; }
  .lb-col-staked { display: none; }
  .leaderboard-table th,
  .leaderboard-table td { padding: 8px 6px; font-size: 12px; }
  .lb-table-wrap { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lb-best-bet { font-size: 11px; }

  /* ── Profile mobile ── */
  .profile-settings-card { margin: 0 10px; }
  .profile-settings-row { padding: 12px; gap: 8px; }
  .profile-stats { padding: 10px 12px; }

  /* ── Chat mobile ── */
  .chat-panel { font-size: 13px; }
  .chat-msg { padding: 8px 10px; }

  /* ── Notification panel: full-width on mobile ── */
  .notif-panel {
    position: fixed;
    top: var(--header-h);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 60vh;
    border-radius: 10px;
  }

  /* ── Buttons: ensure tap targets ≥ 44px where relevant ── */
  .btn { min-height: 36px; }
  .btn-sm { min-height: 32px; }
}

/* ── Phone-touch tier (≤480px): WCAG 2.5.5 44×44px tap target +
   very-narrow density tweaks ──
   Wave-7: at this width we treat the device as a real phone, so every
   tappable .btn / .btn-sm gets a guaranteed 44px minimum height. The
   bet-card .btn-sm carve-out from the ≤768px block is preserved
   (compact in-row buttons stay 36px) by re-asserting it below.
   Folded in: the old (max-width: 400px) very-narrow block — its rules
   were density tweaks that work fine at the wider 480px cut-off. */
@media (max-width: 480px) {
  .btn,
  .btn-ghost,
  .btn-primary,
  .btn-white,
  .btn-sm {
    min-height: 44px;
  }
  .btn-xs { min-height: 36px; }
  /* Bet-card in-row actions need to stay tight or they wrap awkwardly.
     The card itself is already touch-friendly via its full-width hit area. */
  .bet-card .btn-sm,
  .bet-card .btn-xs { min-height: 36px; }
  /* Same for tab/segment buttons that already have generous padding. */
  .calc-odds-type-btn,
  .pp-chip { min-height: 36px; }

  /* Very-narrow density tweaks (formerly @media max-width 400px). */
  .header-actions .btn-sm { padding: 4px 6px; font-size: 10px; }
  #gamesContainer, #pickemGames { padding: 6px 8px; }
  .tab-btn { flex: 0 0 46px; min-width: 46px; }
  .tab-icon { font-size: 18px; }
  .odds-price { font-size: 12px; }
  .team-away, .team-home { max-width: 32vw; }
}


/* ═══════════════════════════════════════════════════════════════════════════
/* ── Bug report cards ─────────────────────────────────────────────────────────── */
.bug-card summary::-webkit-details-marker { display: none; }
.bug-card summary { outline: none; }
.bug-card summary:hover { background: rgba(255,255,255,0.03); }
.bug-card[open] .bug-chevron { transform: rotate(180deg); }

/* ── Requests: author pill, comments thread ──────────────────────────────────── */
.req-author-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.req-author-pill.is-mine {
  background: rgba(59,130,246,0.12);
  color: var(--accent-hi);
  border-color: var(--accent-hi);
}
.req-summary-comments {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 7px;
  background: var(--bg3);
  border-radius: 10px;
  white-space: nowrap;
}
.req-comments-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.req-comments-head {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.req-comments-count {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.req-comments-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.req-comment {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.req-comment.is-mine {
  background: rgba(59,130,246,0.06);
  border-color: rgba(59,130,246,0.25);
}
.req-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.req-comment-author {
  font-weight: 600;
  color: var(--text);
}
.req-comment-time {
  color: var(--text-muted);
  flex: 1;
}
.req-comment-del {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
}
.req-comment-del:hover { color: var(--red); background: rgba(220,38,38,0.1); }
.req-comment-body {
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.req-comment-form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.req-comment-form textarea { min-height: 38px; }
@media (max-width: 768px) {
  .req-comment-form { flex-direction: column; }
  .req-comment-form textarea { width: 100%; box-sizing: border-box; }
  .req-comment-form .btn { align-self: stretch !important; }
  .req-author-pill { max-width: 100px; }
}

   NEW FEATURES (2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar hamburger (visible ≤1024px) */
.sidebar-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-hamburger:hover { background: rgba(255,255,255,0.08); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 198;
}
.sidebar-backdrop.open { display: block; }
@media (max-width: 1024px) {
  .sidebar-hamburger { display: block; }
  .tab-nav.sidebar-open {
    width: 244px !important;
    z-index: 199;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6);
  }
  .tab-nav.sidebar-open .sidebar-section-label { display: block; }
  .tab-nav.sidebar-open .tab-label { display: block; }
  .tab-nav.sidebar-open .tab-icon  { font-size: 16px; }
  .tab-nav.sidebar-open .tab-btn   { justify-content: flex-start; padding: 10px 16px; }
}
@media (max-width: 768px) {
  .tab-nav.sidebar-open {
    width: 100% !important;
    top: var(--header-h);
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    height: auto;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 12px;
    scrollbar-width: none;
    z-index: 350;
  }
  .tab-nav.sidebar-open::-webkit-scrollbar { display: none; }
  .tab-nav.sidebar-open .sidebar-section-label { display: block; }
  .tab-nav.sidebar-open .tab-btn {
    flex: none;
    flex-direction: row;
    min-width: unset;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    gap: 14px;
    border-bottom: none;
    border-left: 3px solid transparent;
    justify-content: flex-start;
    font-size: 13px;
  }
  .tab-nav.sidebar-open .tab-btn.active {
    border-left: 3px solid var(--accent-hi);
    border-bottom: none;
    background: var(--selected-bg);
  }
  .tab-nav.sidebar-open .tab-icon  { font-size: 18px; }
  .tab-nav.sidebar-open .tab-label { display: block; font-size: 13px; font-weight: 600; }
  .tab-nav.sidebar-open .tab-badge {
    position: static;
    margin-left: auto;
  }
}

/* Notification bell */
.notif-bell-wrap { position: relative; display: flex; align-items: center; }
.notif-bell-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  position: relative;
  transition: color 0.15s;
}
.notif-bell-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.notif-bell-btn.has-unread { color: var(--yellow); }
/* Flash three times when a fresh notification arrives, then settle. The
   animation only plays while the .notif-bell-flash class is present — JS
   adds it on new-unread, removes it after the run finishes. */
@keyframes notif-bell-flash {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-12deg) scale(1.08); }
  40%      { transform: rotate(12deg)  scale(1.08); }
  60%      { transform: rotate(-8deg)  scale(1.04); }
  80%      { transform: rotate(8deg)   scale(1.04); }
}
.notif-bell-btn.notif-bell-flash { animation: notif-bell-flash 0.7s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
  .notif-bell-btn.notif-bell-flash { animation: none; }
}
.notif-badge {
  position: absolute;
  top: 3px; right: 3px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 400px;
  /* Solid surface — frosted glass made the header text underneath bleed
     through and was hard to read. */
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  z-index: 500;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-panel.hidden { display: none; }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.notif-clear-btn { background: none; border: none; color: var(--text-dim); font-size: 11px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.2px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.notif-clear-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.notif-list { overflow-y: auto; flex: 1; max-height: 340px; }
.notif-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  cursor: default;
  transition: background 0.12s;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread { background: rgba(124,58,237,0.08); }
.notif-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { color: var(--text); line-height: 1.4; }
.notif-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Mobile override — placed AFTER base rule so it wins on equal specificity.
   Without this, the desktop 320px right-aligned panel clips off-screen on phones. */
@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    top: var(--header-h);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: 70vh;
    border-radius: 10px;
  }
  .notif-list { max-height: calc(70vh - 48px); }
  .notif-item { font-size: 13px; padding: 10px 14px; }
  .notif-text { word-break: break-word; }
}

/* Bet calculator widget */
.calc-fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-4);
  border: 1px solid var(--border-hi);
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 400;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.calc-fab:hover { background: var(--brand); color: #fff; transform: scale(1.08); }
.calc-widget {
  position: fixed;
  bottom: 134px;
  right: 20px;
  width: 260px;
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 400;
  overflow: hidden;
}
.calc-widget.hidden { display: none; }
.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-4);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.calc-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.calc-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.calc-row { display: flex; gap: 8px; align-items: center; }
.calc-label { font-size: 11px; color: var(--text-muted); width: 54px; flex-shrink: 0; }
.calc-input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  width: 100%;
}
.calc-input:focus { outline: none; border-color: var(--accent); }
.calc-odds-type { display: flex; gap: 4px; margin-left: 54px; }
.calc-odds-type-btn { font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; }
.calc-odds-type-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.calc-result { background: var(--bg-2); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.calc-result-row { display: flex; justify-content: space-between; font-size: 12px; }
.calc-result-label { color: var(--text-muted); }
.calc-result-val { font-weight: 600; color: var(--text); }
.calc-result-val.pos { color: var(--green); }

/* Odds movement */
.odds-move { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-top: 1px; line-height: 1.2; display: block; }
.odds-move-up   { background: rgba(34,197,94,0.15);  color: var(--green); }
.odds-move-down { background: rgba(239,68,68,0.15);   color: var(--red); }

/* Bot comparison chart */
.bot-chart-wrap { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.bot-chart-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.bot-chart-tab { font-size: 11px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; transition: background 0.12s; }
.bot-chart-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
select.bot-chart-tab.bot-chart-advanced { padding: 3px 8px; appearance: auto; min-width: 130px; font-family: inherit; }
.bot-chart-canvas-wrap { background: var(--bg-2); border-radius: var(--radius); padding: 16px; position: relative; min-height: 220px; }
#botCompareChart { max-height: 240px; }

/* Manual result (Admin) */
.manual-result-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.manual-result-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manual-result-row label { font-size: 12px; color: var(--text-muted); width: 90px; flex-shrink: 0; }
.manual-result-input { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; padding: 5px 8px; flex: 1; min-width: 0; }
.manual-result-input:focus { outline: none; border-color: var(--accent); }

/* Bot scheduler */
.bot-schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 4px 0; }
.bot-schedule-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.bot-schedule-name { font-size: 12px; font-weight: 600; color: var(--text); }
.bot-schedule-sel { background: var(--bg-4); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; padding: 4px 6px; }

/* ── Performance Pulse (home screen) ───────────────────────────────── */
.perf-summary { padding-bottom: 14px; }

/* ── Performance Pulse: filter bar (user dropdown + bots/humans only) ── */
.perf-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.perf-user-select {
  background: var(--surface-2, #181818);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-width: 180px;
  max-width: 240px;
  appearance: none;
  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 fill='%23888' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.perf-user-select:hover, .perf-user-select:focus { border-color: var(--accent-hi); outline: none; }
.perf-bucket-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2, #181818);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.perf-bucket-chk:hover { border-color: var(--accent-hi); color: var(--text); }
.perf-bucket-chk.active { background: rgba(124,58,237,0.15); border-color: var(--accent-hi); color: var(--text); }
.perf-bucket-chk input { accent-color: var(--accent-hi); margin: 0; cursor: pointer; }
/* Header strip: title on the left, window toggle on the right. The
   bottom border lives on this wrapper (not on .welcome-section-head)
   so it spans the whole row instead of stopping at the title. */
.perf-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 14px;
  border-bottom: 1px solid var(--border);
}
.perf-head-row .welcome-section-head { border-bottom: none; flex: 1; }
.perf-window-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.perf-win-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.perf-win-btn:last-child { border-right: none; }
.perf-win-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.perf-win-btn.active { background: var(--accent-hi); color: var(--bg-2); }
.perf-loading, .perf-empty { padding: 16px; color: var(--text-muted); font-size: 13px; text-align: center; font-style: italic; }

/* ── Skeleton loaders ─────────────────────────────────────────────────────
   A single shimmer animation drives any block flagged as `.sk-block`. Use
   `.sk-line` children inside to imitate a few rows of text — sm/md/lg
   widths give a natural-looking placeholder. */
@keyframes sk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.sk-block, .sk-line {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.10) 37%,
    rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.sk-block { display: flex; flex-direction: column; gap: 6px; }
.sk-line { display: block; height: 10px; }
.sk-line-sm { width: 40%; height: 9px; }
.sk-line-md { width: 70%; }
.sk-line-lg { width: 90%; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .sk-block, .sk-line { animation: none; }
}

/* Empty-state link used inside the new "No pending bets" message */
.empty-link { color: var(--accent-coral); text-decoration: none; font-weight: 600; }
.empty-link:hover { color: var(--accent-hi); text-decoration: underline; }

.perf-streaks { display: flex; gap: 8px; padding: 8px 14px 0; flex-wrap: wrap; }
.perf-streak { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2, #181818); }
.perf-streak.hot  { border-color: rgba(34,197,94,0.45); color: #22c55e; background: rgba(34,197,94,0.08); }
.perf-streak.cold { border-color: rgba(239,68,68,0.45); color: #ef4444; background: rgba(239,68,68,0.08); }

/* Ride/Fade row: 2-column when both bots qualify, single full-width
   when only one does (no awkward empty grid cell). */
.perf-bot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 12px 14px 6px; }
.perf-bot-card { background: var(--surface-2, #181818); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.perf-bot-card.ride { border-left: 4px solid var(--green, #22c55e); }
.perf-bot-card.fade { border-left: 4px solid var(--red, #ef4444); }
.perf-bot-head { font-size: 11px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
.perf-bot-window { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.perf-bot-name { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -0.2px; }
.perf-bot-stats { display: flex; gap: 14px; font-size: 14px; font-weight: 700; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.perf-bot-stats .positive, .perf-row-pnl.positive, .perf-row-roi.positive { color: var(--green, #22c55e); }
.perf-bot-stats .negative, .perf-row-pnl.negative, .perf-row-roi.negative { color: var(--red, #ef4444); }
.perf-bot-sub { font-size: 11px; color: var(--text-muted); }

.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; padding: 8px 14px 0; }
.perf-block { background: var(--surface-1, #121212); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.perf-block-head { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.perf-row { display: grid; grid-template-columns: minmax(80px,1.2fr) 60px 40px 60px 50px; align-items: center; gap: 4px; font-size: 12px; padding: 4px 0; border-bottom: 1px dotted rgba(255,255,255,0.04); }
.perf-row:last-child { border-bottom: none; }
.perf-row-head { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.perf-row-label { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-row-wl { color: var(--text-muted); font-size: 11px; }
.perf-row-pct { font-weight: 700; color: var(--text); text-align: right; }
.perf-row-pnl { font-weight: 700; text-align: right; }
.perf-row-roi { font-weight: 700; text-align: right; font-size: 11px; }

.perf-win-row { display: grid; grid-template-columns: minmax(90px,auto) 1fr 42px 70px; gap: 6px; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px dotted rgba(255,255,255,0.04); }
.perf-win-row:last-child { border-bottom: none; }
.perf-win-bot { color: var(--text); font-weight: 600; white-space: nowrap; }
.perf-win-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-win-odds { color: var(--accent-hi, #7eb8f7); font-weight: 600; text-align: right; font-size: 11px; }
.perf-win-profit { font-weight: 700; text-align: right; }
.perf-win-profit.positive { color: var(--green, #22c55e); }

@media (max-width: 768px) {
  .perf-bot-row { grid-template-columns: 1fr; }
  .perf-row { grid-template-columns: minmax(70px,1.2fr) 54px 36px 56px 44px; font-size: 11px; }
}

/* ── Performance Pulse: totals strip + Keep an eye on + Highlights ── */
/* The strip sits in 2 rows of 4 cards on narrow screens, then a single
   row of 8 cards once we have ~1100px to play with. The 2×4 layout
   keeps each card legible — the previous 1×8 was cramming 8 stats into
   the home page's narrow column so every value got its own one-stat
   wide column with no breathing room. */
.perf-totals-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 14px 6px;
}
@media (min-width: 768px)  { .perf-totals-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .perf-totals-strip { grid-template-columns: repeat(8, 1fr); } }
.perf-stat-card {
  background: var(--surface-2, #181818);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: border-color 0.15s, transform 0.12s;
}
.perf-stat-card:hover { border-color: rgba(124,58,237,0.45); transform: translateY(-1px); }
.perf-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 700;
}
.perf-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  /* Long Record strings like "248-187-4P" used to nowrap into the next card.
     min-width:0 + line-height keeps it inside the card; the Record card
     gets a slightly smaller font via the modifier class below.            */
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.perf-stat-card.compact .perf-stat-value { font-size: 16px; }
.perf-stat-value.positive { color: var(--green, #22c55e); }
.perf-stat-value.negative { color: var(--red, #ef4444); }

/* "Keep an eye on" — slow border shimmer pulls attention without alarm. */
.perf-eye-card {
  margin: 12px 14px 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(56,189,248,0.04));
  border: 1px solid rgba(124,58,237,0.30);
  position: relative;
  overflow: hidden;
}
.perf-eye-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  pointer-events: none;
  background: conic-gradient(from var(--shimmer-angle, 0deg), transparent 0%, rgba(124,58,237,0.4) 18%, transparent 36%, transparent 100%);
  opacity: 0.55;
  animation: perf-eye-shimmer 7s linear infinite;
  z-index: -1;
}
@property --shimmer-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes perf-eye-shimmer { to { --shimmer-angle: 360deg; } }
.perf-eye-head {
  font-size: 12px;
  font-weight: 700;
  color: #c4b5fd;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* New layout: Keep an eye on splits into a responsive grid of titled
   sub-cards. Each sub-card lists 3-5 rows so values line up vertically
   and you can scan a column at a glance instead of chasing wrapping
   pills. The previous pill-soup styles below are kept for any legacy
   render path that may still hit them. */
.perf-eye-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.perf-eye-block {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(124,58,237,0.20);
  border-radius: 10px;
  padding: 10px 12px;
}
.perf-eye-block-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(124,58,237,0.15);
}
.perf-eye-block-body { display: flex; flex-direction: column; gap: 6px; }
.perf-eye-row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-height: 22px;
}
.perf-eye-row-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-eye-row-name b { font-weight: 700; }
.perf-eye-streak {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.perf-eye-streak.hot  { color: #22c55e; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.30); }
.perf-eye-streak.cold { color: #ef4444; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.30); }
.perf-eye-delta {
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.perf-eye-delta.hot  { color: #22c55e; }
.perf-eye-delta.cold { color: #ef4444; }
.perf-eye-delta.edge { color: #38bdf8; }
.perf-eye-sub { color: var(--text-muted); font-weight: 500; font-size: 11px; margin-left: 4px; }

/* Legacy single-row pill layout — kept for any caller still using it. */
.perf-eye-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.perf-eye-row:last-child { margin-bottom: 0; }
.perf-eye-row-head {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
  min-width: 110px;
}
.perf-eye-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, #181818);
  color: var(--text);
  white-space: nowrap;
}
.perf-eye-pill.hot  { border-color: rgba(34,197,94,0.45);  color: #22c55e; background: rgba(34,197,94,0.08); }
.perf-eye-pill.cold { border-color: rgba(239,68,68,0.45);  color: #ef4444; background: rgba(239,68,68,0.08); }
.perf-eye-pill.edge { border-color: rgba(56,189,248,0.45); color: #38bdf8; background: rgba(56,189,248,0.08); }
.perf-eye-pill b { color: inherit; font-weight: 700; }

/* Highlights row inside .perf-grid */
.perf-highlight-row {
  display: grid;
  grid-template-columns: 100px 130px 1fr 60px 80px;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.04);
}
.perf-highlight-row:last-child { border-bottom: none; }
.perf-highlight-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px; }
.perf-highlight-bot   { color: var(--text); font-weight: 700; white-space: nowrap; }
.perf-highlight-text  { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-highlight-amt   { color: var(--text); font-weight: 700; text-align: right; }
.perf-highlight-result { font-weight: 700; text-align: right; }
.perf-highlight-result.positive { color: var(--green, #22c55e); }
.perf-highlight-result.negative { color: var(--red, #ef4444); }

@media (max-width: 768px) {
  .perf-eye-row-head { min-width: 100%; margin-bottom: 2px; }
  .perf-highlight-row { grid-template-columns: 80px 1fr 60px 60px; }
  .perf-highlight-text { grid-column: 1 / -1; }
}

/* Respect reduced-motion accessibility setting — strip the shimmer. */
@media (prefers-reduced-motion: reduce) {
  .perf-eye-card::before { animation: none; opacity: 0.25; }
}

/* .btn-xs — generic small admin button (was used by BotD History; kept for any admin row that needs a compact button). */
.btn-xs { font-size: 10px !important; padding: 2px 6px !important; }

/* ── SGM (Same Game Multi) ─────────────────────────────────────────────────── */
.sgm-section { margin-top: 12px; }
.sgm-section-header { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.sgm-cards { display: flex; flex-direction: column; gap: 8px; }
.sgm-loading, .sgm-empty { padding: 14px 0; color: var(--text-muted); font-size: 13px; text-align: center; }
.sgm-card { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); }
.sgm-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sgm-matchup { font-size: 13px; font-weight: 600; color: var(--text); }
.sgm-combined-odds { font-size: 18px; font-weight: 700; color: var(--green); letter-spacing: -0.5px; }
.sgm-headline { font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.sgm-legs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.sgm-leg { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--surface-3, #2a2a2a); border-radius: 6px; }
.sgm-leg-label { font-size: 13px; color: var(--text); flex: 1; }
.sgm-leg-odds { font-size: 12px; font-weight: 600; color: var(--accent-hi, #7eb8f7); margin-left: 8px; }
.sgm-reasoning { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-bottom: 6px; padding: 6px 8px; background: var(--surface-1); border-radius: 6px; }
.sgm-footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.sgm-conf { font-weight: 600; }
.sgm-leg-count { color: var(--text-muted); }
.sgm-leg-prop { background: var(--surface-1); border: 1px solid var(--accent, #5a8dee); }
.sgm-prop-icon { font-size: 11px; margin-right: 4px; }
.sgm-featured { margin-top: 10px; }
.sgm-featured-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.sgm-full-section { margin-top: 4px; }

/* ── Pick'Em Reminder ──────────────────────────────────────────────────────── */
.pickem-remind-section { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.pickem-remind-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pickem-remind-title { display: flex; align-items: center; gap: 10px; }
.pickem-remind-icon { font-size: 20px; line-height: 1; }
.pickem-remind-heading { font-size: 14px; font-weight: 700; color: var(--text); }
.pickem-remind-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pickem-remind-all-btn { font-size: 12px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.pickem-remind-all-btn:hover { color: var(--text); border-color: var(--text-muted); }
.pickem-remind-cards { display: flex; flex-direction: column; gap: 10px; }
.pickem-remind-sport-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pickem-remind-sport-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; }
.pickem-remind-sport-label { font-size: 13px; font-weight: 700; color: var(--text); }
.pickem-remind-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.pickem-remind-games { padding: 0 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.pickem-remind-game { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 6px; cursor: pointer; transition: background 0.12s; }
.pickem-remind-game:hover { background: var(--card); }
.pickem-remind-time { font-size: 11px; color: var(--text-muted); min-width: 60px; flex-shrink: 0; }
.pickem-remind-match { font-size: 12px; color: var(--text); flex: 1; }
.pickem-remind-vs { color: var(--text-muted); font-weight: 400; }
.pickem-remind-arrow { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.pickem-remind-more { font-size: 11px; color: var(--text-muted); padding: 2px 12px 6px; }
.pickem-remind-cta { display: block; width: calc(100% - 24px); margin: 0 12px 10px; padding: 8px; font-size: 13px; font-weight: 700; border: 1px solid; border-radius: 8px; cursor: pointer; background: transparent; transition: all 0.15s; text-align: center; }
.pickem-remind-cta:hover { filter: brightness(1.2); }

/* ── Upcoming Games Tab ──────────────────────────────────────────────────── */
.upcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 12px 16px; }
.upcoming-date-label { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); padding: 8px 0 4px; }

/* ── Recently Finished tab ───────────────────────────────────────────────── */
.finished-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 12px 16px; }
.finished-date-label { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); padding: 8px 0 4px; }
.finished-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.finished-card:hover { border-color: var(--border-hi); }
.finished-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 11px; color: var(--text-muted); }
.finished-sport-tag { font-weight: 700; color: var(--text); background: rgba(124,58,237,0.15); padding: 2px 8px; border-radius: 4px; }
.finished-start, .finished-ended { white-space: nowrap; }
.finished-voided { white-space: nowrap; font-weight: 700; color: var(--red); background: rgba(239,68,68,0.12); padding: 2px 8px; border-radius: 4px; }
.finished-row { display: flex; flex-direction: column; gap: 6px; }
.finished-team { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: var(--bg3); }
.finished-team.finished-winner { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); }
.finished-team-name { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finished-team.finished-winner .finished-team-name { font-weight: 700; }
.finished-score { font-size: 18px; font-weight: 700; color: var(--text); min-width: 36px; text-align: right; }
.finished-team.finished-winner .finished-score { color: var(--green); }
.finished-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.finished-logo-ph { width: 26px; height: 26px; border-radius: 50%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.finished-venue { font-size: 11px; color: var(--text-dim); }
.upcoming-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 12px; cursor: pointer; transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.upcoming-tile:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.upcoming-tile-header { display: flex; align-items: center; justify-content: space-between; }
.upcoming-sport-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.3px; }
.upcoming-sport-badge.nhl { background: rgba(0,109,200,0.2); color: #4da6ff; }
.upcoming-sport-badge.nrl { background: rgba(0,160,80,0.2); color: #4dcc88; }
.upcoming-sport-badge.afl { background: rgba(200,80,0,0.2); color: #ff8844; }
.upcoming-time { font-size: 12px; color: var(--text-muted); }
.upcoming-matchup { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upcoming-team { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.upcoming-team-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.upcoming-team-logo-placeholder { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg2); border-radius: 6px; }
.upcoming-team-name { font-size: 13px; font-weight: 700; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.upcoming-vs { font-size: 11px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.upcoming-odds-row { display: flex; gap: 6px; flex-wrap: wrap; }
.upcoming-odds-chip { flex: 1; min-width: 0; text-align: center; padding: 5px 4px; background: var(--bg2); border-radius: 7px; font-size: 11px; }
.upcoming-odds-chip-label { color: var(--text-muted); font-size: 10px; display: block; margin-bottom: 1px; }
.upcoming-odds-chip-val { color: var(--text); font-weight: 600; }
.upcoming-live-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--yellow); }

@keyframes highlight-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--green-rgb,0,200,100), 0.5); } 70% { box-shadow: 0 0 0 10px rgba(var(--green-rgb,0,200,100), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb,0,200,100), 0); } }
.highlight-pulse { animation: highlight-pulse 1.2s ease-out; border-color: var(--green) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Pick'em Sub-tabs & Visual Grid
   ───────────────────────────────────────────────────────────────────────────── */
.pickem-subtabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;            /* don't collapse inside flex-column tab-pane */
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 5;
}
.pickem-subtab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.pickem-subtab:hover { color: var(--text); }
.pickem-subtab.active {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}

/* Legend */
.pickem-grid-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  align-items: center;
}
.pg-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pg-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.pg-dot-home { background: linear-gradient(135deg, var(--green) 0%, #16a34a 100%); }
.pg-dot-away { background: linear-gradient(135deg, var(--accent) 0%, var(--brand) 100%); }
.pg-dot-hidden { background: var(--bg3); color: var(--text-muted); border: 1px dashed var(--border); }
.pg-dot-none { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }

/* Scroll wrapper — keeps page from overflowing, allows sideways scroll */
.pg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 8px;
  background: var(--bg2);
}
.pg-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
}

/* Header cells */
.pg-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg3);
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  border-bottom: 2px solid var(--border-hi);
  white-space: nowrap;
}
.pg-table thead th.pg-game-col {
  left: 0;
  z-index: 4;
  text-align: left;
  min-width: 150px;
}
.pg-user-col { min-width: 72px; }
.pg-user-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pg-user-name {
  font-size: 12px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-bot-badge, .pg-me-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.pg-bot-badge { background: rgba(245,158,11,0.15); color: var(--yellow); border: 1px solid rgba(245,158,11,0.35); }
.pg-me-badge  { background: rgba(124,58,237,0.18); color: var(--accent-hi); border: 1px solid rgba(124,58,237,0.45); }

/* Body rows */
.pg-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.015); }
.pg-table tbody tr:hover td { background: rgba(124,58,237,0.06); }
.pg-table tbody td {
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

/* First column sticky */
.pg-table tbody td.pg-game-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg2);
  text-align: left;
  min-width: 180px;
  border-right: 2px solid var(--border-hi);
}
.pg-table tbody tr:nth-child(odd) td.pg-game-col { background: #15102a; }
.pg-table tbody tr:hover td.pg-game-col { background: #1a1532; }

.pg-game-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
}
.pg-matchup {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.pg-team-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.pg-team-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  flex-shrink: 0;
}
.pg-vs {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.pg-matchup-text { min-width: 0; }
.pg-teams {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.pg-kick {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.pg-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: pg-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Pick cell */
.pg-pick-cell { position: relative; min-width: 58px; }
.pg-pick-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pg-pick-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.pg-pick-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
}
.pg-result-icon {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: var(--bg2);
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--bg2);
}
.pg-pick-cell.pg-correct .pg-result-icon   { background: var(--green); }
.pg-pick-cell.pg-incorrect .pg-result-icon { background: var(--red); }
.pg-pick-cell.pg-push .pg-result-icon      { background: var(--text-muted); }
.pg-pick-cell.pg-correct   { background: rgba(34,197,94,0.06) !important; }
.pg-pick-cell.pg-incorrect { background: rgba(239,68,68,0.06) !important; }

.pg-hidden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg3);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 14px;
  border: 1px dashed var(--border-hi);
}
.pg-none {
  color: var(--text-muted);
  font-size: 18px;
  opacity: 0.5;
}

.pg-meta {
  padding: 12px 16px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* Sub-pane containers must allow their scroll descendants to contain overflow —
   without min-width:0 on flex items, horizontal scroll inside .pg-scroll breaks. */
#pickemSubpane-standings,
#pickemSubpane-grid {
  min-width: 0;
  width: 100%;
}
#pickemGridContainer { min-width: 0; width: 100%; }

/* Mobile: tighten spacing, smaller logos, sticky stays */
@media (max-width: 768px) {
  .pickem-subtab { font-size: 13px; padding: 9px 12px; }
  .pg-scroll { margin: 0; border-radius: 8px; }
  .pg-table thead th { padding: 8px 6px; font-size: 11px; }
  .pg-table tbody td { padding: 6px; }
  .pg-table thead th.pg-game-col,
  .pg-table tbody td.pg-game-col { min-width: 130px; }
  .pg-user-col { min-width: 54px; }
  .pg-user-name { max-width: 60px; font-size: 11px; }
  .pg-bot-badge, .pg-me-badge { font-size: 8px; padding: 0 5px; }
  .pg-team-logo, .pg-team-badge { width: 22px; height: 22px; }
  .pg-team-badge { font-size: 8px; }
  .pg-pick-logo, .pg-pick-badge, .pg-hidden { width: 26px; height: 26px; font-size: 9px; }
  .pg-hidden { font-size: 12px; }
  .pg-pick-badge { font-size: 9px; }
  .pg-result-icon { width: 14px; height: 14px; font-size: 9px; bottom: -3px; right: -4px; }
  .pg-teams { font-size: 11px; }
  .pg-kick { font-size: 9px; }
  .pg-vs { font-size: 9px; }
  .pickem-grid-legend { padding: 10px 12px; gap: 10px; font-size: 11px; }
  .pg-dot { width: 16px; height: 16px; font-size: 9px; }
}

/* ── In-app profile view ─────────────────────────────────────────────────── */
.profile-view {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: var(--slip-w);
  bottom: 0;
  background: var(--bg);
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layout.has-bets .profile-view { right: var(--slip-w); }
.profile-view.hidden { display: none; }
.profile-view-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}
.profile-view-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.profile-view-back:hover { color: var(--text); border-color: var(--border2); }
.profile-view-title { font-weight: 700; font-size: 15px; color: var(--text); }
.profile-view-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.profile-view-loading { color: var(--text-muted); text-align: center; padding: 40px; }
.profile-view-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.profile-view-avatar { font-size: 40px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg3); flex-shrink: 0; }
.profile-view-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.profile-view-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.profile-view-stat { font-size: 12px; color: var(--text-muted); }
.profile-view-stat strong { color: var(--text); }
.profile-view-bets-heading { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
/* Admin-only action row: clear pending + (for bots) bank deposit/withdraw. */
.profile-admin-actions {
  padding: 10px 16px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.profile-bank-balance {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* Big bank action row on bot profiles — mirrors the user-profile bank row.
   Two equal buttons side-by-side, full-width, with an outlined ghost look
   and bold uppercase labels. Balance summary lives directly below.       */
.profile-bank-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px 6px;
}
.profile-bank-btn {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.profile-bank-btn:hover { transform: translateY(-1px); }
.profile-bank-btn.withdraw {
  color: var(--green, #22c55e);
  border-color: rgba(34,197,94,0.45);
}
.profile-bank-btn.withdraw:hover { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.70); }
.profile-bank-btn.deposit {
  color: var(--yellow, #f0a500);
  border-color: rgba(240,165,0,0.45);
}
.profile-bank-btn.deposit:hover { background: rgba(240,165,0,0.10); border-color: rgba(240,165,0,0.70); }
.profile-bank-balances {
  display: flex;
  gap: 16px;
  padding: 0 16px 12px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.profile-bank-balances strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.profile-bank-balances .positive { color: var(--green, #22c55e); }

/* ── Profile bet toolbar ─────────────────────────────────────────────────
   Sits above the existing filter pills inside the profile modal: window
   buttons (1d / 7d / 30d / All), a specific-day picker, and the By status /
   Chronological group toggle. Wraps to a second row on narrow widths.   */
.prof-bet-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--surface-2, #181818);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.prof-window-toggle, .prof-group-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.prof-window-btn, .prof-group-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border);
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.prof-window-btn:last-child, .prof-group-btn:last-child { border-right: none; }
.prof-window-btn:hover, .prof-group-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.prof-window-btn.active, .prof-group-btn.active { background: var(--accent-hi); color: var(--bg-2); }

.prof-date-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.prof-date-pick-label { font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.prof-date-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.prof-date-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.prof-date-input:focus { outline: none; }
.prof-date-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.prof-date-clear:hover { color: var(--red); }

.prof-start-select {
  background: var(--bg-3, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4l3 4 3-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  padding-right: 22px;
}
.prof-start-select:hover { background-color: rgba(255,255,255,0.08); }
.prof-start-select:focus { outline: none; border-color: var(--accent-hi); }

.prof-bet-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Profile bet grouped sections ────────────────────────────────────────
   One section per status (Pending / Won / Lost / Push). Header is the
   click target — chevron rotates, body slides via display:none toggle.
   Empty sections render a muted, dimmed header so the user can still see
   the category exists without scrolling through nothing.               */
.prof-bet-section {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-1, #121212);
}
.prof-bet-section.empty { opacity: 0.55; }
.prof-bet-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2, #181818);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.15s;
}
.prof-bet-section.collapsed .prof-bet-section-head { border-bottom: none; }
.prof-bet-section-head:hover { background: var(--bg3, #202020); }
.prof-bet-section-chev {
  display: inline-block;
  width: 14px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}
.prof-bet-section-icon { font-size: 14px; line-height: 1; }
.prof-bet-section-label {
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-muted);
}
.prof-bet-section-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.prof-bet-section-sub {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.prof-bet-section-sub .positive { color: var(--green, #22c55e); }
.prof-bet-section-sub .negative { color: var(--red, #ef4444); }
.prof-bet-section-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Bot role card — shown below the hero section on bot profiles */
.bot-profile-role {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: -8px 0 20px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-hi);
}
.bot-profile-role-emoji { font-size: 22px; flex-shrink: 0; line-height: 1.4; }
.bot-profile-role-name  { font-size: 12px; font-weight: 700; color: var(--accent-hi); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.bot-profile-role-desc  { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.bot-profile-tail       { margin-top: 10px; }

/* "Tail this bot" CTA on a bot's profile page. Outline by default; flips
   to the lime accent when the user is actively tailing this bot. */
.profile-tail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-tail-btn:hover {
  background: rgba(194, 239, 78, 0.10);
  border-color: var(--accent-hi);
  color: var(--accent-hi);
}
.profile-tail-btn.on {
  background: var(--accent-hi);
  color: var(--bg-2);
  border-color: var(--accent-hi);
}
.profile-tail-btn.on:hover {
  background: #d3f56a;
}
.profile-tail-hint {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 1024px) {
  .profile-view { right: 0; }
}

/* ───────── R25-G: Calibration-status admin table ───────── */
#calibrationStatusTable .cal-status-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
#calibrationStatusTable .cal-status-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#calibrationStatusTable .cal-status-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#calibrationStatusTable .cal-status-table-wrap {
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
#calibrationStatusTable table.cal-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#calibrationStatusTable table.cal-status-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-3);
  color: var(--text-muted);
  font-size: 11px;
  text-align: left;
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
#calibrationStatusTable table.cal-status-table tbody td {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
#calibrationStatusTable table.cal-status-table tbody tr:hover {
  background: var(--bg-3);
}
#calibrationStatusTable .cal-source {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--text-muted);
}
#calibrationStatusTable .cal-row-bad   td:first-child { box-shadow: inset 3px 0 0 var(--red); }
#calibrationStatusTable .cal-row-thin  td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
#calibrationStatusTable .cal-row-good  td:first-child { box-shadow: inset 3px 0 0 var(--green); }
#calibrationStatusTable .cal-row-none  td:first-child { box-shadow: inset 3px 0 0 var(--text-muted); }
.cal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cal-badge-good { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.cal-badge-thin { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(255,178,135,0.35); }
.cal-badge-bad  { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.cal-badge-none { background: var(--bg-3); color: var(--text-muted); border-color: var(--border); }
#calibrationStatusTable .cal-status-missing,
#calibrationStatusTable .cal-status-empty {
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
}
#calibrationStatusTable .cal-status-missing code {
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ── Help / Docs tab ─────────────────────────────────────────────────────── */
.help-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.help-section[open] { border-color: var(--accent, var(--green-border)); }
.help-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.help-summary::-webkit-details-marker { display: none; }
.help-summary:hover { background: rgba(255,255,255,0.03); }
.help-summary-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.help-chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.help-section[open] .help-chevron { transform: rotate(180deg); }
.help-body {
  padding: 4px 16px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.help-body p { margin: 10px 0; }
.help-body b { color: var(--text); }
.help-list {
  margin: 8px 0 8px 22px;
  padding: 0;
}
.help-list li { margin-bottom: 6px; }
.help-link {
  color: var(--green, #4ade80);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.help-link:hover { opacity: 0.85; }
.help-bot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.help-bot-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.help-bot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.help-bot-emoji { font-size: 18px; }
.help-bot-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.help-bot-tagline {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 6px;
}
.help-bot-body {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.help-empty {
  color: var(--text-muted);
  font-style: italic;
}
.help-kbd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
}
.help-kbd-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.help-kbd-table td:first-child { width: 110px; white-space: nowrap; }
.help-kbd-table kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.help-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}
.help-note code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}