/* =========================================================
   SPHERE'S BETS V2 — New Features Stylesheet
   ========================================================= */

/* ─── VARIABLES (inherits from spheresbets.css) ─────────────── */
:root {
  --sb-surface-2: #1a1a24;
  --sb-border: rgba(255,255,255,.08);
  --sb-shadow: 0 4px 24px rgba(0,0,0,.4);
  --sb-radius-lg: 16px;
  --sb-radius-md: 12px;
  --sb-radius-sm: 8px;
  --sb-transition: all .18s ease;
}

/* ─── COMMON COMPONENTS ──────────────────────────────────────── */
.sb2-section-card {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.sb2-section-card h3, .sb2-section-card h4 {
  color: var(--sb-text);
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.sb2-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sb2-stat-card {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  padding: 14px 12px;
  text-align: center;
}

.sb2-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--sb-text);
  line-height: 1;
  margin-bottom: 6px;
}

.sb2-stat-label {
  font-size: 11px;
  color: var(--sb-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

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

.sb2-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb2-form-group label {
  font-size: 12px;
  color: var(--sb-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.sb2-input {
  background: var(--sb-bg, #0a0a0f);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  color: var(--sb-text);
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: var(--sb-transition);
  width: 100%;
  box-sizing: border-box;
}

.sb2-input:focus {
  outline: none;
  border-color: var(--sb-teal, #0891b2);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, .15);
}

.sb2-input option { background: #1a1a24; }
.sb2-input textarea { resize: vertical; }

/* ─── MY BETS TAB ────────────────────────────────────────────── */
.sb2-bets-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb2-bet-card {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  padding: 16px;
  border-left: 4px solid var(--sb-border);
  transition: var(--sb-transition);
}

.sb2-bet-card:hover { border-color: rgba(8, 145, 178, .4); transform: translateY(-1px); }
.sb2-bet-card.bet-won { border-left-color: #10b981; }
.sb2-bet-card.bet-lost { border-left-color: #ef4444; }
.sb2-bet-card.bet-push { border-left-color: #f59e0b; }
.sb2-bet-card.bet-pending { border-left-color: #3b82f6; }

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

.sb2-bet-player {
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-text);
}

.sb2-bet-result {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.bet-won .sb2-bet-result { background: rgba(16,185,129,.15); color: #10b981; }
.bet-lost .sb2-bet-result { background: rgba(239,68,68,.15); color: #ef4444; }
.bet-push .sb2-bet-result { background: rgba(245,158,11,.15); color: #f59e0b; }
.bet-pending .sb2-bet-result { background: rgba(59,130,246,.15); color: #3b82f6; }

.sb2-bet-line {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.sb2-bet-stat { color: var(--sb-teal, #0891b2); font-weight: 600; }
.sb2-bet-dir { color: var(--sb-text); }
.sb2-bet-odds { color: var(--sb-text-muted); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.sb2-bet-pl { font-weight: 700; }

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

.sb2-bet-notes {
  font-size: 12px;
  color: var(--sb-text-dim, rgba(255,255,255,.35));
  margin-bottom: 10px;
  font-style: italic;
}

.sb2-bet-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── BANKROLL ────────────────────────────────────────────────── */
.sb2-bankroll-hero {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sb2-bankroll-main {
  flex: 1;
  min-width: 200px;
  background: linear-gradient(135deg, rgba(8,145,178,.15), rgba(6,214,160,.1));
  border: 1px solid rgba(8,145,178,.3);
  border-radius: var(--sb-radius-lg);
  padding: 24px;
}

.sb2-bankroll-label { font-size: 12px; color: var(--sb-text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.sb2-bankroll-amount { font-size: 42px; font-weight: 900; color: var(--sb-text); line-height: 1; }
.sb2-bankroll-growth { font-size: 14px; margin-top: 8px; font-weight: 600; }

.sb2-bankroll-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  flex: 1;
  align-content: start;
}

.sb2-mini-chart { margin-top: 8px; }

.sb2-unit-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sb2-unit-rec {
  background: rgba(255,255,255,.04);
  border-radius: var(--sb-radius-sm);
  padding: 12px;
}
.sb2-unit-label { font-size: 13px; font-weight: 600; color: var(--sb-text); margin-bottom: 4px; }
.sb2-unit-amount { font-size: 20px; font-weight: 800; color: var(--sb-teal, #0891b2); margin-bottom: 4px; }
.sb2-unit-desc { font-size: 11px; color: var(--sb-text-dim, rgba(255,255,255,.35)); }

/* ─── TOOLS ──────────────────────────────────────────────────── */
.sb2-tool-panel { display: none; }
.sb2-tool-panel.active { display: block; }

.sb2-calc-results { display: flex; flex-direction: column; gap: 10px; }
.sb2-calc-result-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border-radius: var(--sb-radius-sm);
}

.sb2-calc-label { font-size: 13px; color: var(--sb-text-muted); font-weight: 600; }
.sb2-calc-val { font-size: 18px; font-weight: 800; }
.sb2-calc-note { font-size: 12px; color: var(--sb-text-dim, rgba(255,255,255,.35)); text-align: right; }

/* SGP Legs */
.sgp-leg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border-radius: var(--sb-radius-sm);
  align-items: center;
}

.sgp-leg .sb2-input { flex: 1; min-width: 120px; }

/* Bet Slip */
.sb2-slip-floater {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: #000;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(8,145,178,.4);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--sb-transition);
  font-size: 14px;
}

.sb2-slip-floater:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(8,145,178,.5); }

.sb2-slip-count {
  background: rgba(0,0,0,.3);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sb2-slip-legs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sb2-slip-leg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: var(--sb-radius-sm);
  gap: 8px;
}
.sb2-slip-player { font-size: 13px; font-weight: 700; color: var(--sb-text); flex: 1; }
.sb2-slip-line { font-size: 12px; color: var(--sb-text-muted); }
.sb2-slip-odds { color: var(--sb-teal, #0891b2); font-weight: 600; }

.sb2-slip-total {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: rgba(8,145,178,.1);
  border-radius: var(--sb-radius-sm);
  font-size: 14px;
  color: var(--sb-text);
}

/* ─── ODDS BOARD ─────────────────────────────────────────────── */
.sb2-odds-card {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.sb2-odds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.sb2-odds-player { font-size: 15px; font-weight: 700; color: var(--sb-text); }
.sb2-odds-stat { font-size: 13px; color: var(--sb-text-muted); }
.sb2-odds-best-badge {
  font-size: 12px;
  color: #10b981;
  background: rgba(16,185,129,.1);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.sb2-odds-books { display: flex; flex-direction: column; gap: 6px; }
.sb2-book-row {
  display: grid;
  grid-template-columns: 120px 60px 70px 70px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.02);
  font-size: 13px;
}

.sb2-book-row.best-book { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.15); }
.sb2-book-name { font-weight: 600; color: var(--sb-text); }
.sb2-book-line { color: var(--sb-text-muted); }
.sb2-book-odds { font-weight: 700; color: var(--sb-text-muted); }
.sb2-book-odds.over { color: var(--sb-text); }

/* Arbitrage */
.sb2-arb-card {
  background: var(--sb-surface-2);
  border: 1px solid rgba(16,185,129,.2);
  border-left: 4px solid #10b981;
  border-radius: var(--sb-radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.sb2-arb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sb2-arb-player { font-size: 14px; font-weight: 700; color: var(--sb-text); }
.sb2-arb-profit { font-size: 15px; font-weight: 800; }
.sb2-arb-legs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sb2-arb-leg {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  font-size: 13px;
  flex: 1;
  min-width: 180px;
}
.sb2-arb-book { font-weight: 700; color: var(--sb-teal, #0891b2); }

/* ─── COMMUNITY / LEADERBOARD ────────────────────────────────── */
.sb2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sb2-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sb-text-muted);
  border-bottom: 1px solid var(--sb-border);
}

.sb2-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--sb-text);
}

.sb2-table tbody tr:hover { background: rgba(255,255,255,.03); }
.sb2-my-row td { background: rgba(8,145,178,.08) \!important; font-weight: 600; }

/* Achievements/Badges */
.sb2-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.sb2-badge {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  padding: 16px 12px;
  text-align: center;
  transition: var(--sb-transition);
}

.sb2-badge.earned {
  border-color: rgba(6,214,160,.3);
  background: rgba(6,214,160,.06);
}

.sb2-badge.locked { opacity: .45; }
.sb2-badge-icon { font-size: 28px; margin-bottom: 8px; }
.sb2-badge-name { font-size: 12px; font-weight: 700; color: var(--sb-text); margin-bottom: 4px; }
.sb2-badge-desc { font-size: 11px; color: var(--sb-text-muted); line-height: 1.4; }
.sb2-badge-date { font-size: 10px; color: var(--sb-text-dim, rgba(255,255,255,.35)); margin-top: 6px; }

/* ─── DAILY SLATE ────────────────────────────────────────────── */
.sb2-slate-header { margin-bottom: 20px; }
.sb2-slate-header h3 { color: var(--sb-text); font-size: 18px; margin-bottom: 8px; }
.sb2-slate-summary { color: var(--sb-text-muted); font-size: 14px; line-height: 1.6; }

.sb2-slate-edges { display: flex; flex-direction: column; gap: 10px; }
.sb2-slate-edge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border-radius: var(--sb-radius-sm);
  flex-wrap: wrap;
}
.sb2-slate-edge-player { font-weight: 700; color: var(--sb-text); font-size: 14px; flex: 1; min-width: 120px; }
.sb2-slate-edge-line { font-size: 13px; color: var(--sb-text-muted); }
.sb2-slate-edge-stats { display: flex; gap: 10px; font-size: 12px; font-weight: 600; flex-wrap: wrap; }

/* Injuries */
.sb2-injuries { display: flex; flex-direction: column; gap: 10px; }
.sb2-injury-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}
.sb2-injury-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-out { background: rgba(239,68,68,.15); color: #ef4444; }
.status-q { background: rgba(245,158,11,.15); color: #f59e0b; }
.status-active { background: rgba(16,185,129,.15); color: #10b981; }

.sb2-injury-player { font-size: 13px; font-weight: 700; color: var(--sb-text); }
.sb2-injury-team { font-size: 11px; color: var(--sb-text-muted); }
.sb2-injury-impact { font-size: 12px; color: var(--sb-teal, #0891b2); margin-left: auto; font-weight: 600; text-align: right; }
.sb2-injury-info { flex: 1; }

/* Weather */
.sb2-weather-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sb2-weather-card {
  background: rgba(255,255,255,.04);
  border-radius: var(--sb-radius-sm);
  padding: 14px;
}
.sb2-weather-stadium { font-size: 13px; font-weight: 700; color: var(--sb-text); }
.sb2-weather-city { font-size: 11px; color: var(--sb-text-muted); margin-bottom: 8px; }
.sb2-weather-info { display: flex; gap: 10px; font-size: 12px; color: var(--sb-text-muted); flex-wrap: wrap; margin-bottom: 8px; }
.sb2-weather-impact { font-size: 12px; font-weight: 600; }

/* ─── LIVE SCORES ────────────────────────────────────────────── */
.sb2-live-section { margin-bottom: 24px; }
.sb2-live-badge-header, .sb2-live-section-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--sb-text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 12px;
}
.sb2-live-badge-header { color: #ef4444; }

.sb2-game-card {
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  padding: 16px;
  margin-bottom: 10px;
  transition: var(--sb-transition);
}

.sb2-game-card.game-live { border-color: rgba(239,68,68,.3); }
.sb2-game-card.game-final { opacity: .7; }

.sb2-game-teams {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.sb2-game-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.sb2-team-abbr {
  font-size: 11px;
  font-weight: 800;
  color: var(--sb-text-muted);
  width: 36px;
}

.sb2-team-name { font-size: 14px; font-weight: 700; color: var(--sb-text); flex: 1; }

.sb2-team-score {
  font-size: 24px;
  font-weight: 900;
  color: var(--sb-text);
  min-width: 40px;
  text-align: right;
}

.sb2-team-score.score-winning { color: var(--sb-green, #10b981); }

.sb2-game-vs { font-size: 12px; color: var(--sb-text-muted); }

.sb2-game-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--sb-text-muted);
  flex-wrap: wrap;
}

.sb2-live-pulse {
  color: #ef4444;
  font-weight: 700;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.sb2-broadcast { background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 4px; }

/* ─── MODEL PERFORMANCE ──────────────────────────────────────── */
.sb2-model-hero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.sb2-conf-bars { display: flex; flex-direction: column; gap: 12px; }
.sb2-conf-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px 70px;
  gap: 12px;
  align-items: center;
}
.sb2-conf-label { font-size: 13px; color: var(--sb-text-muted); }
.sb2-conf-bar-track { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.sb2-conf-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.sb2-conf-pct { font-size: 14px; font-weight: 700; text-align: center; }
.sb2-conf-count { font-size: 11px; color: var(--sb-text-dim, rgba(255,255,255,.35)); }

.sb2-stat-table { display: flex; flex-direction: column; gap: 10px; }
.sb2-stat-row {
  display: grid;
  grid-template-columns: 80px 1fr 50px 60px;
  gap: 12px;
  align-items: center;
}
.sb2-stat-name { font-size: 13px; font-weight: 700; color: var(--sb-text); }
.sb2-stat-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.sb2-stat-pct { font-size: 13px; font-weight: 700; color: var(--sb-text); }

/* H2H */
.sb2-h2h-record {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: var(--sb-surface-2);
  border-radius: var(--sb-radius-lg);
  margin-bottom: 16px;
  border: 1px solid var(--sb-border);
}

.sb2-h2h-team { font-size: 15px; font-weight: 700; color: var(--sb-text); text-align: center; flex: 1; }
.sb2-h2h-score { font-size: 32px; font-weight: 900; color: var(--sb-teal, #0891b2); white-space: nowrap; }

.sb2-h2h-trends {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* ─── FUTURES ────────────────────────────────────────────────── */
.sb2-futures-layout { display: flex; flex-direction: column; gap: 16px; }

.sb2-futures-list { display: flex; flex-direction: column; gap: 8px; }
.sb2-future-row {
  display: grid;
  grid-template-columns: 2fr 1fr 80px 70px 80px 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  font-size: 13px;
}

.sb2-future-sel { font-weight: 700; color: var(--sb-text); }
.sb2-future-type { color: var(--sb-text-muted); }
.sb2-future-odds { color: var(--sb-teal, #0891b2); font-weight: 700; }
.sb2-future-stake { color: var(--sb-text-muted); }
.sb2-future-status { font-weight: 700; }
.sb2-future-date { color: var(--sb-text-dim, rgba(255,255,255,.35)); font-size: 11px; }

.sb2-futures-market { margin-bottom: 20px; }
.sb2-futures-market-row {
  display: grid;
  grid-template-columns: 24px 1fr 70px 60px 50px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.sb2-futures-rank { font-size: 11px; color: var(--sb-text-dim, rgba(255,255,255,.35)); }
.sb2-futures-team { font-weight: 600; color: var(--sb-text); }
.sb2-futures-odds { font-weight: 700; }
.sb2-futures-impl { font-size: 12px; color: var(--sb-text-muted); }
.sb2-futures-move { font-size: 12px; font-weight: 700; }

/* ─── CONTENT HUB ────────────────────────────────────────────── */
.sb2-content-grid { display: flex; flex-direction: column; gap: 10px; }
.sb2-content-card {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border-radius: var(--sb-radius-sm);
  text-decoration: none;
  transition: var(--sb-transition);
  align-items: flex-start;
}
.sb2-content-card:hover { background: rgba(255,255,255,.07); transform: translateY(-1px); }
.sb2-content-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sb2-content-badge { font-size: 10px; font-weight: 700; color: var(--sb-teal, #0891b2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.sb2-content-title { font-size: 14px; font-weight: 700; color: var(--sb-text); margin-bottom: 4px; }
.sb2-content-desc { font-size: 12px; color: var(--sb-text-muted); line-height: 1.5; }
.sb2-content-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.sb2-referral-box { }
.sb2-referral-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; max-width: 280px; }
.sb2-referral-link-box { display: flex; gap: 10px; margin-bottom: 8px; }
.sb2-share-options { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── NOTIFICATIONS ──────────────────────────────────────────── */
.sb2-notif-list { display: flex; flex-direction: column; gap: 8px; }
.sb2-notif-item {
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--sb-transition);
  border-left: 3px solid transparent;
}
.sb2-notif-item:hover { background: rgba(255,255,255,.06); }
.sb2-notif-item.notif-unread { border-left-color: var(--sb-teal, #0891b2); background: rgba(8,145,178,.05); }
.sb2-notif-title { font-size: 13px; font-weight: 700; color: var(--sb-text); margin-bottom: 4px; }
.sb2-notif-msg { font-size: 12px; color: var(--sb-text-muted); margin-bottom: 6px; }
.sb2-notif-time { font-size: 11px; color: var(--sb-text-dim, rgba(255,255,255,.35)); }

/* ─── NFL ────────────────────────────────────────────────────── */
.sb2-nfl-matchups { display: flex; flex-direction: column; gap: 12px; }
.sb-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--sb-border);
  background: rgba(255,255,255,.06);
  color: var(--sb-text);
  cursor: pointer;
  transition: var(--sb-transition);
  font-family: 'Inter', sans-serif;
}
.sb-btn-sm:hover { background: rgba(255,255,255,.12); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sb2-bankroll-hero { flex-direction: column; }
  .sb2-calc-result-row { grid-template-columns: 1fr; gap: 4px; }
  .sb2-calc-note { text-align: left; }
  .sb2-book-row { grid-template-columns: 1fr 1fr 1fr 1fr; font-size: 11px; }
  .sb2-book-name { display: none; }
  .sb2-h2h-record { flex-direction: column; gap: 8px; }
  .sb2-future-row { grid-template-columns: 1fr 1fr; }
  .sb2-futures-market-row { grid-template-columns: 24px 1fr 70px auto; }
  .sb2-futures-impl, .sb2-futures-move { display: none; }
  .sgp-leg { flex-direction: column; align-items: stretch; }
  .sb2-stat-row { grid-template-columns: 60px 1fr 50px; }
  .sb2-conf-bar-row { grid-template-columns: 100px 1fr 45px; }
  .sb2-conf-count { display: none; }
  .sb2-slip-floater { bottom: 16px; right: 16px; padding: 10px 16px; font-size: 13px; }
}