/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:       #5b21b6;
  --brand-dark:  #4c1d95;
  --brand-hi:    #7c3aed;

  /* Backgrounds */
  --bg:          #0d0a14;
  --bg-2:        #130d22;
  --bg-3:        #1c1535;
  --bg-4:        #251b44;
  --sidebar-bg:  #0f0c1c;
  /* Aliases (without hyphen — used throughout JS/HTML templates) */
  --bg2:         #130d22;
  --bg3:         #1c1535;
  --bg4:         #251b44;
  /* Surface aliases for BotD History / Updates sections */
  --surface-1:   #130d22;
  --surface-2:   #1c1535;
  --surface-3:   #251b44;
  /* Card alias */
  --card:        #1c1535;

  /* Accent */
  --accent:      #7c3aed;
  --accent-hi:   #a78bfa;

  /* Text */
  --text:        #e2e8f0;
  --text-dim:    #94a3b8;
  --text-muted:  #5b4d7a;

  /* Borders */
  --border:      #2d1f42;
  --border-hi:   #3d2a5a;

  /* Selection */
  --selected-bg: #2d1b4e;

  /* Status */
  --green:       #22c55e;
  --green-bg:    #052e16;
  --green-border:#166534;
  --red:         #ef4444;
  --red-bg:      #2d0707;
  --red-border:  #991b1b;
  --yellow:      #f59e0b;
  --yellow-bg:   #1c1400;

  /* Sizing */
  --radius:      8px;
  --radius-sm:   5px;
  --header-h:    56px;
  --sidebar-w:   244px;
  --slip-w:      320px;
  --mobile-nav-h: 56px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── 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: 800;
  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(--brand);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.header-logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  white-space: nowrap;
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.bank-item {
  display: flex;
  flex-direction: column;
}

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

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

.bank-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.2);
}

#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(255,255,255,0.18); }

.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(255,255,255,0.22); }
.header-pending-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--yellow);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  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(255,255,255,0.2);
  color: #fff;
}

/* ── 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: 800;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 12px 16px 4px;
}

.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; }

/* ── 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); }

/* ── 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); }
.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: 800;
  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: 7px 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: 12px; font-weight: 700; color: var(--text-dim); flex: 1; text-transform: uppercase; letter-spacing: 0.5px; }
.mg-count { font-size: 10px; color: var(--text-muted); background: var(--bg-4); border-radius: 8px; padding: 1px 6px; }
.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: 4px; }

/* ── 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); }

/* ── Weather & goalie badges ──────────────────────────────────────────── */
.game-weather-badge { font-size: 14px; margin-left: 8px; cursor: default; vertical-align: middle; }
.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); }
.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); }
.updates-cat-bar {
  display: flex; gap: 6px; padding: 8px 16px;
  overflow-x: auto; scrollbar-width: none;
}
.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: 4px 12px;
  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: 4px 16px 8px; font-size: 11px; gap: 8px;
}
.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-lu-line:last-child { border-bottom: none; }
.upd-lu-players { color: var(--text); line-height: 1.3; }

.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-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:hover { border-color: #1a4a6a; background: rgba(0,0,0,0.35); }
.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); }
.welcome-news-row:last-child { border-bottom:none; }
.welcome-news-title { font-size:13px; color:var(--accent-hi); text-decoration:none; flex:1; line-height:1.4; }
.welcome-news-title:hover { text-decoration:underline; }
.welcome-news-date { font-size:11px; color:var(--text-muted); white-space:nowrap; }

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

.ls-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ls-card-live  { border-left: 3px solid var(--green); }
.ls-card-break { border-left: 3px solid var(--yellow, #e8b84b); }
.ls-card-final { border-left: 3px solid var(--border); opacity: .85; }
.ls-card-pre   { border-left: 3px solid var(--accent); }

.ls-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 6px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
}
.ls-status-live  { color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 5px; }
.ls-status-break { color: var(--yellow, #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: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: ls-pulse 1.4s ease-in-out infinite;
}
@keyframes ls-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.8); }
}

.ls-period-info { color: var(--text-muted); font-size: 11px; }
.ls-break-label { color: var(--yellow, #e8b84b) !important; font-weight: 600; }
.ls-countdown   { font-size: 11px; font-weight: 700; color: var(--yellow, #e8b84b); margin-left: 5px; font-variant-numeric: tabular-nums; }
.ls-venue { margin-left: auto; color: var(--text-muted); font-size: 10px; font-style: italic; }

/* scoreboard */
.ls-scoreboard {
  display: flex; align-items: center; gap: 0;
  padding: 12px 14px;
}
.ls-team {
  flex: 1; display: flex; align-items: center; gap: 8px;
}
.ls-team-home { flex-direction: row-reverse; text-align: right; }
.ls-team-abbr { font-size: 15px; font-weight: 800; min-width: 32px; }
.ls-team-name { font-size: 12px; color: var(--text-muted); flex: 1; }
.ls-team-home .ls-team-name { text-align: right; }
.ls-score {
  font-size: 28px; font-weight: 900; min-width: 36px; text-align: center;
  color: var(--text-muted);
}
.ls-score-leading { color: var(--text); }
.ls-leading .ls-team-abbr { color: var(--green); }
.ls-vs { font-size: 11px; color: var(--border); padding: 0 8px; }

/* 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; }
.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   { padding: 8px 14px; font-size: 11px; color: var(--text-muted); }

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

.market-row {
  display: flex;
  align-items: center;
  padding: 4px 14px;
  gap: 8px;
}

.market-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  width: 100px;
  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: 6px;
  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: 8px 6px 6px;
  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(--brand);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.slip-title {
  font-size: 14px;
  font-weight: 800;
  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:hover { color: var(--text); }
.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: 800; 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 ─────────────────────────────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  transition: background 0.12s, opacity 0.12s;
  white-space: nowrap;
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-hi);
}

.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }

.btn-sm { padding: 5px 10px; font-size: 12px; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--brand-hi); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-place {
  width: 100%;
  background: #16a34a;
  color: #fff;
  padding: 13px;
  font-size: 14px;
  font-weight: 800;
  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-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-sm);
  padding: 10px 12px;
  text-align: center;
}

.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: 800; color: var(--text); }
.stat-value.positive { color: var(--green); }
.stat-value.negative { color: var(--red); }

.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);
}

.bet-card.pending  { border-left-color: var(--accent-hi); }
.bet-card.won       { border-left-color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.bet-card.lost      { border-left-color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.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.push     { border-left-color: var(--yellow); background: var(--yellow-bg); }

/* ── Bot bet-card color coding ─────────────────────────────────────── */
/* KrakenBot — purple */
.bet-card.bot-kraken         { border-left-color: #7c5cbf; }
.bet-card.bot-kraken.won     { border-left-color: #7c5cbf; }
.bet-card.bot-kraken.lost    { border-left-color: #7c5cbf; }
/* PrawnBot — orange */
.bet-card.bot-prawn          { border-left-color: #e07b39; }
.bet-card.bot-prawn.won      { border-left-color: #e07b39; }
.bet-card.bot-prawn.lost     { border-left-color: #e07b39; }
/* SharkBot — teal */
.bet-card.bot-shark          { border-left-color: #3a8fd1; }
.bet-card.bot-shark.won      { border-left-color: #3a8fd1; }
.bet-card.bot-shark.lost     { border-left-color: #3a8fd1; }

.bet-card.bot-botd           { border-left-color: #f6c90e; }
.bet-card.bot-botd.won       { border-left-color: #f6c90e; }
.bet-card.bot-botd.lost      { border-left-color: #f6c90e; }
/* OysterBot — teal */
.bet-card.bot-oyster         { border-left-color: #2dd4bf; }
.bet-card.bot-oyster.won     { border-left-color: #2dd4bf; }
.bet-card.bot-oyster.lost    { border-left-color: #2dd4bf; }
/* SirenBot — pink */
.bet-card.bot-siren          { border-left-color: #e05fad; }
.bet-card.bot-siren.won      { border-left-color: #e05fad; }
.bet-card.bot-siren.lost     { border-left-color: #e05fad; }
/* BarraBot — amber */
.bet-card.bot-barra          { border-left-color: #b45309; }
.bet-card.bot-barra.won      { border-left-color: #b45309; }
.bet-card.bot-barra.lost     { border-left-color: #b45309; }
/* MantaBot — cyan */
.bet-card.bot-manta          { border-left-color: #0e7490; }
.bet-card.bot-manta.won      { border-left-color: #0e7490; }
.bet-card.bot-manta.lost     { border-left-color: #0e7490; }

.bet-card-bot-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.03em; }
.bet-card-bot-tag.kraken { background: #3a2a5a; color: #b899f5; }
.bet-card-bot-tag.prawn  { background: #4a2a10; color: #f0924a; }
.bet-card-bot-tag.shark  { background: #0a2a4a; color: #4ab3e8; }
.bet-card-bot-tag.botd   { background: #3a2e00; color: #f6c90e; }
.bet-card-bot-tag.oyster { background: #0a3a35; color: #2dd4bf; }
.bet-card-bot-tag.siren  { background: #3a0a28; color: #e05fad; }
.bet-card-bot-tag.barra  { background: #2a1800; color: #d97706; }
.bet-card-bot-tag.manta  { background: #001a22; color: #0e9ab8; }

/* ── Pick'em leaderboard bot row highlighting ──────────────────────── */
.lb-bot-kraken td { color: #b899f5; }
.lb-bot-kraken .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-prawn  td { color: #f0924a; }
.lb-bot-prawn  .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-shark  td { color: #4ab3e8; }
.lb-bot-shark  .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-botd   td { color: #f6c90e; }
.lb-bot-botd   .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-oyster td { color: #2dd4bf; }
.lb-bot-oyster .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-siren  td { color: #e05fad; }
.lb-bot-siren  .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-barra  td { color: #d97706; }
.lb-bot-barra  .lb-name { font-style: normal; font-weight: 600; }
.lb-bot-manta  td { color: #0e9ab8; }
.lb-bot-manta  .lb-name { font-style: normal; font-weight: 600; }

/* ── Chat bot name color consistency ───────────────────────────────── */
.chat-bot-kraken { color: #b899f5 !important; }
.chat-bot-prawn  { color: #f0924a !important; }
.chat-bot-shark  { color: #4ab3e8 !important; }
.chat-bot-oyster { color: #2dd4bf !important; }
.chat-bot-siren  { color: #e05fad !important; }
.chat-bot-barra  { color: #d97706 !important; }
.chat-bot-manta  { color: #0e9ab8 !important; }

/* ── Admin bot section color accents ──────────────────────────────── */
.section-heading.bot-section-kraken  { border-left: 3px solid #7c5cbf; padding-left: 8px; }
.section-heading.bot-section-prawn   { border-left: 3px solid #e07b39; padding-left: 8px; }
.section-heading.bot-section-shark   { border-left: 3px solid #3a8fd1; 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 #e05fad; padding-left: 8px; }
.section-heading.bot-section-barra   { border-left: 3px solid #b45309; padding-left: 8px; }
.section-heading.bot-section-manta   { border-left: 3px solid #0e7490; 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 */
.admin-section.kraken .admin-section-header { border-left: 3px solid #7c5cbf; }
.admin-section.prawn  .admin-section-header { border-left: 3px solid #e07b39; }
.admin-section.shark  .admin-section-header { border-left: 3px solid #3a8fd1; }
.admin-section.oyster .admin-section-header { border-left: 3px solid #3ab893; }
.admin-section.siren  .admin-section-header { border-left: 3px solid #e05fad; }
.admin-section.nautilus .admin-section-header { border-left: 3px solid #f6c90e; }
.admin-section.barra    .admin-section-header { border-left: 3px solid #b45309; }
.admin-section.manta    .admin-section-header { border-left: 3px solid #0e7490; }

/* 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); }

/* Section group label */
.admin-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 12px 4px 4px;
}

/* Legacy badge colors update for consistency */
.feed-user-badge.bot        { background: #2d1e4a; color: #b899f5; border: 1px solid #7c5cbf; }
.feed-user-badge.prawn-bot  { background: #3a1e08; color: #f0924a; border: 1px solid #e07b39; }
.feed-user-badge.shark-bot  { background: #08233a; color: #4ab3e8; border: 1px solid #3a8fd1; }
.feed-user-badge.siren-bot  { background: #3a0820; color: #e05fad; border: 1px solid #c0408d; }

.bet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.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-row:hover { background: var(--bg4); }
.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; }
.sel-odds { font-size: 12px; color: var(--accent-hi); font-weight: 600; margin-left: auto; }
.sel-game { font-size: 11px; color: var(--text-muted); }
.bet-result-detail { display: block; font-size: 11px; color: var(--accent-hi); margin-top: 3px; font-style: italic; }

.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); }

.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; }

.bet-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s, max-height 0.15s;
}
.bet-card:hover .bet-actions,
.bet-card:focus-within .bet-actions {
  opacity: 1;
  max-height: 60px;
}
/* Always show on touch devices */
@media (hover: none) {
  .bet-actions { opacity: 1; max-height: none; overflow: visible; }
}
.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); }

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

.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); }

.lb-rank {
  font-size: 13px;
  font-weight: 800;
  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;
}

.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; }
.feed-user-badge.shark-bot { background: #1a2a3a; color: #4ab3e8; border: 1px solid #2a7aaa; }

/* 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;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 600;
  transition: transform 0.25s ease;
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
}

.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(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
}

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

.modal-box {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 32px);
}

.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-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.12s;
}
.pickem-card.picked { border-color: var(--accent); }
.pickem-card:hover { border-color: var(--border-hi); }

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

.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-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%;
  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; }

/* ── 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.pending { color: var(--text-muted); }

.leg-settle-btns { display: flex; gap: 4px; margin-top: 5px; }

/* ── 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); }

/* ── 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: pointer;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(91,33,182,0.6);
  z-index: 410;
}

.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: 800; color: #fff; margin-bottom: 4px; }
.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); }

/* ── Tournament tab ──────────────────────────────────────────────────────────── */
.tournament-join-form { padding: 16px; border-bottom: 1px solid var(--border); }
.tournament-join-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tournament-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tournament-card:hover { border-color: var(--border-hi); background: var(--bg-4); }
.tournament-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tournament-name { font-size: 15px; font-weight: 700; color: #fff; }
.tournament-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.tournament-status.active { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.tournament-status.ended  { background: var(--bg-4); color: var(--text-muted); border: 1px solid var(--border); }
.tournament-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.tournament-invite { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.tournament-code {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hi);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
}
.tournament-code:hover { border-color: var(--accent); }
.tournament-sports-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tournament-sport-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--bg-4);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.tournament-cta { font-size: 12px; color: var(--accent-hi); font-weight: 600; margin-top: 4px; }
.tourn-sport-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-4);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tourn-sport-btn.active { background: var(--selected-bg); border-color: var(--accent); color: var(--accent-hi); }
.tourn-sport-btn:hover { border-color: var(--border-hi); color: var(--text); }

/* ── 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 / BOTD ─────────────────────────────────────────────────────────── */
.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); }

/* BOTD filter tabs */
.botd-tabs-wrap { margin-bottom: 8px; }
.botd-tab-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.botd-tab {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.botd-tab:hover { border-color: var(--green); color: var(--green); }
.botd-tab.active { background: var(--green); border-color: var(--green); color: #111; }

/* BOTD card */
.botd-card {
  background: linear-gradient(135deg, #0d1f2d 0%, var(--bg2) 100%);
  border: 1px solid #1a4a6a;
  border-radius: 12px;
  overflow: hidden;
}
.botd-card.loading, .botd-card.error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-muted);
  font-size: 14px;
  gap: 8px;
}
.botd-card.error { color: var(--red); border-color: var(--red); }
.botd-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(0, 120, 200, 0.15);
  border-bottom: 1px solid #1a4a6a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5db8f0;
}
.botd-sport-icon { font-size: 18px; }
.botd-label-text { flex: 1; }
.botd-headline {
  padding: 14px 16px 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.botd-matchup {
  padding: 0 16px 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.botd-pick-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 16px 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1a4a6a;
}
.botd-pick {
  flex: 1;
  padding: 10px 14px;
  background: rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.botd-pick-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.botd-pick-value { font-size: 14px; font-weight: 700; color: var(--text); }
.botd-odds-block {
  padding: 10px 14px;
  background: rgba(0, 200, 100, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid #1a4a6a;
}
.botd-odds-label { font-size: 11px; color: var(--text-muted); }
.botd-odds-value { font-size: 18px; font-weight: 800; color: var(--green); }
.botd-conf-block {
  padding: 10px 14px;
  background: rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: center;
  border-left: 1px solid #1a4a6a;
}
.botd-conf-label { font-size: 10px; color: var(--text-muted); text-align: center; }
.botd-conf-pct { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; text-align: center; }
.botd-reasoning {
  padding: 0 16px 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px;
  margin-top: 4px;
}
.botd-asterisk {
  color: var(--yellow);
  font-size: 14px;
  font-weight: 900;
  margin-left: 3px;
  cursor: help;
  vertical-align: super;
  line-height: 0;
}
.botd-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #1a4a6a;
  background: rgba(0,0,0,0.2);
}
.botd-gen-time { font-size: 11px; color: var(--text-muted); flex: 1; }
.botd-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;
}
.botd-add-btn:hover { opacity: 0.85; }
.botd-refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.botd-refresh-btn:hover { color: var(--text); border-color: 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: 10px;
  overflow: hidden;
}
.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: none;
  color: #5db8f0;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 14px;
  text-decoration: underline;
  display: block;
}
.welcome-link-btn:hover { color: var(--text); }
.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: 600px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .botd-pick-row { flex-wrap: wrap; }
  .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 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.slip-suggest-btn:hover { background: rgba(50,205,100,0.22); }

/* ── 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: 500px) {
  .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: 800; 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-card.kraken  { border-left-color: #7ecfff; }
.bot-legend-card.prawn   { border-left-color: #f97316; }
.bot-legend-card.shark   { border-left-color: #60a5fa; }
.bot-legend-card.oyster  { border-left-color: #2dd4bf; }
.bot-legend-card.nautilus { border-left-color: #f6c90e; }
.bot-legend-card.siren    { border-left-color: #e05fad; }
.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: 700px) {
  .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: 900;
  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: 900;
  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 900–1100px ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --slip-w: 280px; }
}

@media (max-width: 960px) {
  :root { --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 (≤700px) ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root {
    --header-h: 52px;
    --sidebar-w: 0px;
    --slip-w:   100%;
    --mobile-nav-h: 58px;
  }

  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: icon-only, scrollable ─────────────────────────────────
     Labels are hidden — the ≡ hamburger in the header opens the full labeled
     sidebar drawer. This prevents any overlap no matter how many tabs exist.  */
  .tab-nav {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-direction: row;
    align-items: stretch;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--sidebar-bg);
    z-index: 300;
    /* hide the scrollbar but keep scrollability */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }

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

  /* Each tab: fixed-width icon button, no label */
  .tab-btn {
    flex: 0 0 52px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 0;
    border-bottom: 3px solid transparent;
    border-right: none;
    min-width: 52px;
    height: 100%;
    font-size: 0; /* hide any accidental text */
  }

  .tab-btn.active {
    border-bottom: 3px solid var(--accent-hi);
    border-right: none;
    background: rgba(124,58,237,0.12);
    color: var(--accent-hi);
  }

  /* Icon only — bigger and centred */
  .tab-icon  { font-size: 20px; width: auto; line-height: 1; }
  .tab-label { display: none; }

  /* Badge: sits top-right of the icon */
  .tab-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 8px;
    padding: 0 3px;
    min-width: 14px;
    height: 14px;
  }

  /* ── Layout mobile ── */
  .layout {
    left: 0;
    top: var(--header-h);
    bottom: calc(var(--mobile-nav-h) + 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 ── */
  .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);
    overflow-y: auto;
  }

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

  /* 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; }
  .bet-selections { font-size: 12px; }
  .bet-financials { font-size: 11px; flex-wrap: wrap; gap: 4px; }

  /* ── 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; }

  /* ── BOTD / Welcome mobile ── */
  .welcome-panel { padding: 12px 10px; gap: 14px; }
  .welcome-hello { font-size: 18px; }
  .botd-pick-row { flex-wrap: wrap; margin: 0 10px 10px; }
  .botd-pick, .botd-odds-block, .botd-conf-block { flex: 1 1 45%; }
  .botd-odds-value { font-size: 15px; }
  .botd-conf-pct { font-size: 18px; }
  .botd-reasoning { font-size: 12px; padding: 10px 12px; }

  /* ── BotD History mobile ── */
  .botdh-stats-grid { padding: 10px; gap: 8px; }
  .botdh-stat-card { min-width: 90px; padding: 10px 12px; }
  .botdh-stat-pct { font-size: 22px; }
  .botdh-list { padding: 8px 10px 10px; }
  .botdh-card-top { gap: 5px; }

  /* ── 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 ── */
  .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; }
  .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; }
}

/* ── Very narrow screens (≤400px) ───────────────────────────────────────────── */
@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; }
}

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

/* Sidebar hamburger (visible ≤960px) */
.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: 960px) {
  .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: 700px) {
  .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); }
.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;
  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: 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: 2px 6px; border-radius: 3px; }
.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; }

/* 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); }

/* BOTD push notification toggle */
.botd-notif-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  margin-left: 8px;
}
.botd-notif-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.botd-notif-toggle.active { border-color: var(--yellow); color: var(--yellow); background: rgba(245,158,11,0.08); }

/* 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); }
.bot-chart-canvas-wrap { background: var(--bg-2); border-radius: var(--radius); padding: 16px; position: relative; min-height: 220px; }
#botCompareChart { max-height: 240px; }

/* BOTD History confidence */
.botdh-conf-filter { display: flex; gap: 6px; padding: 0 16px 10px; flex-wrap: wrap; }
.botdh-conf-btn { font-size: 11px; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; transition: background 0.12s; }
.botdh-conf-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.botdh-conf-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.botdh-conf-high   { background: rgba(34,197,94,0.15);  color: var(--green); }
.botdh-conf-medium { background: rgba(245,158,11,0.15); color: var(--yellow); }
.botdh-conf-low    { background: rgba(148,163,184,0.15); color: var(--text-dim); }

/* 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; }

/* ── BotD History ─────────────────────────────────────────────────── */
.botdh-toolbar { background: var(--surface-1); border-bottom: 1px solid var(--border); }
.botdh-meta-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }

.botdh-stats-grid { display: flex; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.botdh-stat-card { background: var(--surface-2); border-radius: 10px; padding: 12px 16px; min-width: 160px; flex: 1; text-align: center; }
.botdh-stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.botdh-stat-pct { font-size: 26px; font-weight: 700; color: var(--text); }
.botdh-stat-row { font-size: 12px; color: var(--text-muted); margin: 3px 0; display: flex; gap: 6px; justify-content: center; }
.botdh-stat-won { color: var(--green); font-weight: 600; }
.botdh-stat-lost { color: var(--red); font-weight: 600; }
.botdh-stat-pend { color: var(--text-muted); }
.botdh-stat-pnl { font-size: 13px; font-weight: 600; }
.botdh-mkt-breakdown { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.botdh-mkt-row { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 4px; font-size: 11px; }
.botdh-mkt-name { color: var(--text-muted); font-weight: 600; }
.botdh-mkt-wl { display: flex; gap: 4px; }
.botdh-mkt-pct { font-weight: 700; color: var(--text); text-align: right; min-width: 30px; }
.botdh-mkt-pnl { text-align: right; min-width: 38px; font-weight: 600; font-size: 10px; }

.botdh-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }
.botdh-card { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; border-left: 4px solid var(--border); }
.botdh-won  { border-left-color: var(--green); }
.botdh-lost { border-left-color: var(--red); }
.botdh-push { border-left-color: #888; }
.botdh-pending { border-left-color: var(--accent); }
.botdh-card-top { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; flex-wrap: wrap; }
.botdh-date { font-size: 11px; color: var(--text-muted); }
.botdh-sport { font-size: 11px; font-weight: 600; }
.botdh-mkt { font-size: 11px; background: var(--surface-3,#333); border-radius: 4px; padding: 1px 5px; }
.botdh-result { margin-left: auto; font-size: 12px; font-weight: 600; }
.botdh-card-pick { display: flex; gap: 8px; align-items: baseline; }
.botdh-teams { font-size: 12px; color: var(--text-muted); flex: 1; }
.botdh-label { font-size: 14px; font-weight: 600; color: var(--text); }
.botdh-odds { font-size: 13px; color: var(--accent-hi); }
.botdh-headline { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.botdh-score { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.botdh-conf { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.botdh-admin-settle { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.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: 800; 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; }
.botd-tab-sgm { font-size: 11px !important; padding: 3px 7px !important; opacity: 0.8; border-style: dashed !important; }
.botd-tab-sgm.active { opacity: 1; border-style: solid !important; }
.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; }
.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: 800; 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; }