* { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* ── COLORS ── */
  --bg:      #080b12;
  --s1:      #0d1117;
  --s2:      #131a27;
  --s3:      #1a2332;
  --border:  rgba(136,180,255,0.06);
  --border2: rgba(136,180,255,0.12);
  --text:    #e1e7ef;
  --muted:   #8a9bb5;
  --muted2:  #96a7bf;
  --green:   #00e68a;
  --green2:  #00c974;
  --orange:  #f59e0b;
  --orange2: #fbbf24;
  --white:   #f7fafc;
  --red:     #f44060;
  --yellow:  #eab308;
  --blue:    #60a5fa;
  /* ── TIER THERMAL COLORS ── */
  --tier-s:      #ff3d5a;
  --tier-s-bg:   rgba(255,61,90,0.06);
  --tier-s-border: rgba(255,61,90,0.25);
  --tier-s-glow: 0 0 20px rgba(255,61,90,0.12);
  --tier-a:      #f59e0b;
  --tier-a-bg:   rgba(245,158,11,0.06);
  --tier-a-border: rgba(245,158,11,0.25);
  --tier-a-glow: 0 0 20px rgba(245,158,11,0.12);
  --tier-b:      #60a5fa;
  --tier-b-bg:   rgba(96,165,250,0.06);
  --tier-b-border: rgba(96,165,250,0.25);
  --tier-b-glow: 0 0 20px rgba(96,165,250,0.12);
  --tier-c:      #6b7280;
  --tier-c-bg:   rgba(107,114,128,0.06);
  --tier-c-border: rgba(107,114,128,0.2);
  --tier-c-glow: 0 0 20px rgba(107,114,128,0.08);
  /* ── TYPOGRAPHY ── */
  --mono:    'JetBrains Mono', monospace;
  --display: 'Clash Display', 'Bebas Neue', 'Orbitron', sans-serif;
  --sans:    'DM Sans', -apple-system, sans-serif;
  --text-2xs: 9px;
  --text-xs:  10px;
  --text-sm:  12px;
  --text-base: 14px;
  --text-lg:  16px;
  --text-xl:  20px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  /* ── SPACING ── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  /* ── EFFECTS ── */
  --glow:    0 0 20px rgba(0,230,138,0.08);
  --card-bg: linear-gradient(145deg, rgba(13,17,23,0.9), rgba(19,26,39,0.9));
  --glass:   rgba(19,26,39,0.6);
  /* ── RADIUS ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
a, button, [onclick], input, select, textarea {
  cursor: pointer;
}

/* ── AMBIENT GRADIENT ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0,230,138,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(96,165,250,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ── HEADER ── */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,11,18,0.88);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: none;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.logo-wrap:hover .logo-wordmark { opacity: 1; }

.logo-wordmark {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.95;
  transition: opacity 0.15s;
}
.logo-wordmark .tahma { color: var(--white); }
.logo-wordmark .lytics { color: var(--green); }
.logo-tag {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Green accent line under header */
header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,230,138,0.3) 30%, rgba(0,230,138,0.3) 70%, transparent 100%);
}
header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,230,138,0.012) 2px,
    rgba(0,230,138,0.012) 4px
  );
  z-index: -1;
}

.header-right { display:flex; gap:20px; align-items:center; }

/* ── NAV DROPDOWN ── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--muted2); text-decoration: none; cursor: pointer;
  transition: color 0.15s; padding: 4px 0; display: flex; align-items: center; gap: 4px;
  background: none; border: none;
}
.nav-dropdown-trigger:hover { color: var(--text); }
.nav-dropdown-trigger::after {
  content: '▾'; font-size: 9px; opacity: 0.6; transition: transform 0.15s;
}
.nav-dropdown:hover .nav-dropdown-trigger::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--s1); border: 1px solid var(--border2); border-radius: 10px;
  padding: 6px; min-width: 170px; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
  text-decoration: none; transition: all 0.1s; white-space: nowrap;
}
.nav-dropdown-item:hover {
  background: rgba(0,230,138,0.06); color: var(--text);
}
.nav-dropdown-item span.dd-icon { font-size: 14px; width: 20px; text-align: center; }

.nav-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--text); }

.pro-btn {
  background: linear-gradient(135deg, var(--green), var(--green2));
  border: none;
  color: #000;
  padding: 8px 20px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.25s;
  box-shadow: 0 2px 12px rgba(0,230,138,0.2);
}
.pro-btn:hover {
  box-shadow: 0 4px 20px rgba(0,230,138,0.35);
  transform: translateY(-1px);
}

/* ── SEARCH HERO ── */
.search-hero {
  padding: 40px 32px 32px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.7;
}
.hero-title {
  font-family: var(--sans);
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  color: var(--white);
  word-break: break-word;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--green), #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.search-bar {
  display: flex;
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.search-bar:focus-within {
  border-color: rgba(0,230,138,0.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 0 0 3px rgba(0,230,138,0.08);
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  letter-spacing: 0.2px;
}
.search-input::placeholder { color: var(--muted2); font-weight: 400; }

.search-lines { display:flex; border-left: 1px solid var(--border); }

.line-input {
  width: 76px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  padding: 16px 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--orange2);
  outline: none;
  text-align: center;
}
.line-input::placeholder { color: var(--muted2); font-size: 11px; font-weight: 400; }

.search-go {
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: #000;
  border: none;
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  white-space: nowrap;
}
.search-go:hover {
  filter: brightness(1.1);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.1);
}

.quick-search { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

.quick-search-item {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted2);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}
.quick-search-item:hover {
  border-color: var(--border2);
  color: var(--text);
  background: var(--s3);
}

/* ── DASHBOARD ── */
.dashboard {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 36px 80px;
  position: relative;
  z-index: 1;
}

/* ── PLAYER HEADER ── */
.player-header {
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  animation: fadeUp 0.4s ease both;
  box-shadow: 0 4px 32px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.player-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--green));
  opacity: 0.5;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

.player-header-inner { display:flex; align-items:flex-start; gap:20px; flex:1; }

/* headshot */
.headshot-wrap {
  width: 110px; height: 120px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--s2), var(--s3));
  border: 1px solid var(--border2);
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.headshot-wrap img {
  width:100%; height:100%;
  object-fit: cover;
  object-position: top center;
}
.headshot-wrap .headshot-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; color:var(--muted);
}
.headshot-glow {
  position:absolute; bottom:0; left:0; right:0; height:40%;
  background: linear-gradient(to top, var(--s1), transparent);
  pointer-events:none;
}

.player-main { display:flex; flex-direction:column; gap:6px; flex:1; }

.player-name-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }

.player-name {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-team-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--green);
  background: rgba(0,230,138,0.06);
  border: 1px solid rgba(0,230,138,0.15);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.player-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.meta-item {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted2);
}
.meta-item strong { color: var(--text); font-weight: 600; }

.injury-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244,64,96,0.06);
  border: 1px solid rgba(244,64,96,0.2);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.3px;
  margin-top: 6px;
}

/* lean pills */
.lean-pills { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; }

.lean-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 95px;
  gap: 4px;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.lean-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--muted);
  opacity: 0.3;
  transition: all 0.25s;
}
.lean-pill.signal-strong-over  { border-color: rgba(0,230,138,0.3); background: rgba(0,230,138,0.04); box-shadow: 0 4px 16px rgba(0,230,138,0.08); }
.lean-pill.signal-strong-over::before  { background: var(--green); opacity: 0.8; }
.lean-pill.signal-strong-under { border-color: rgba(244,64,96,0.3);  background: rgba(244,64,96,0.04);  box-shadow: 0 4px 16px rgba(244,64,96,0.08); }
.lean-pill.signal-strong-under::before { background: var(--red); opacity: 0.8; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,230,138,0.08); }
  50% { box-shadow: 0 4px 24px rgba(0,230,138,0.2), 0 0 8px rgba(0,230,138,0.12); }
}
@keyframes pulseGlowRed {
  0%, 100% { box-shadow: 0 4px 16px rgba(244,64,96,0.08); }
  50% { box-shadow: 0 4px 24px rgba(244,64,96,0.2), 0 0 8px rgba(244,64,96,0.12); }
}
.lean-pill.signal-strong-over  { animation: pulseGlow 3s ease-in-out infinite; }
.lean-pill.signal-strong-under { animation: pulseGlowRed 3s ease-in-out infinite; }
.lean-pill.signal-lean-over  { border-color: rgba(0,230,138,0.15); }
.lean-pill.signal-lean-under { border-color: rgba(244,64,96,0.15); }
.lean-pill:hover { border-color: var(--border2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

.lean-stat { font-family:var(--mono); font-size:9px; color:var(--muted2); letter-spacing:2px; text-transform:uppercase; }
.lean-line { font-family:var(--mono); font-size:17px; color:var(--muted2); }
.lean-direction { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:1px; }
.lean-pct { font-family:var(--mono); font-size:10px; }
.lean-signal {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.8px; padding: 2px 6px; border-radius: 3px;
  margin-top: 2px; white-space: nowrap;
}
.lean-signal.sig-strong-over   { background: rgba(0,255,128,0.15); color: var(--green); }
.lean-signal.sig-strong-under  { background: rgba(255,34,68,0.15);  color: var(--red); }
.lean-signal.sig-lean-over  { background: rgba(0,255,128,0.08);  color: var(--green); }
.lean-signal.sig-lean-under { background: rgba(255,34,68,0.08);  color: var(--red); }
.lean-signal.sig-pass       { background: rgba(255,255,255,0.05); color: var(--muted2); }

/* Season-avg proxy pill — muted, no glow */
.lean-season-avg {
    background: rgba(125,144,168,0.15);
    color: var(--muted);
    font-size: 8px;
    letter-spacing: 0.5px;
}

/* ── WATCHLIST ── */
#watchlist-toggle {
  position: fixed; bottom: 28px; right: 28px; z-index: 400;
  background: rgba(13,17,23,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,230,138,0.25);
  border-radius: 16px; padding: 14px 22px;
  font-family: var(--mono); font-size: 12px; color: var(--green);
  cursor: pointer; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,230,138,0.05);
  transition: all 0.25s;
  letter-spacing: 0.5px;
}
#watchlist-toggle:hover {
  border-color: rgba(0,230,138,0.5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 24px rgba(0,230,138,0.12);
  transform: translateY(-2px);
}
#watchlist-toggle .bs-astronaut {
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0,255,128,0.4));
}
#watchlist-toggle .bs-label {
  display: flex; flex-direction: column; gap: 1px;
}
#watchlist-toggle .bs-label-top {
  font-size: 9px; color: var(--muted2); letter-spacing: 1.5px; text-transform: uppercase;
}
#watchlist-toggle .bs-label-main {
  font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: 0.5px;
}
#watchlist-toggle .bs-count {
  background: var(--green); color: #000; border-radius: 8px;
  min-width: 24px; height: 24px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  box-shadow: 0 0 10px rgba(0,255,128,0.4);
}

#watchlist-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 400;
  width: min(360px, 85vw); background: rgba(13,17,23,0.97); border-left: 1px solid var(--border2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -12px 0 48px rgba(0,0,0,0.5);
}
#watchlist-drawer.open { transform: translateX(0); }

.bs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bs-header-title { font-family: var(--mono); font-size: 12px; color: var(--text); font-weight: 600; letter-spacing: 1px; }
.bs-header-sub   { font-family: var(--mono); font-size: 9px; color: var(--muted2); margin-top: 2px; }
.bs-close { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: 16px; padding: 4px; }
.bs-close:hover { color: var(--text); }

.bs-legs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.bs-leg {
  background: var(--s3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.bs-leg.leg-over  { border-left: 3px solid var(--green); }
.bs-leg.leg-under { border-left: 3px solid var(--red); }
.bs-leg.leg-push  { border-left: 3px solid var(--yellow); }
.bs-leg-info { flex: 1; min-width: 0; }
.bs-leg-player { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-leg-detail { font-family: var(--mono); font-size: 9px; color: var(--muted2); margin-top: 3px; }
.bs-leg-signal { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; margin-top: 4px; display: inline-block; }
.bs-leg-odds  { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.bs-leg-book  { font-family: var(--mono); font-size: 10px; color: var(--muted2); text-align: right; margin-top: 2px; }
.bs-leg-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 4px; flex-shrink: 0; }
.bs-leg-remove:hover { color: var(--red); }

.bs-parlay {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
}
.bs-parlay-row {
  background: var(--s3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.bs-parlay-label { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 1px; margin-bottom: 4px; }
.bs-parlay-book  { font-family: var(--mono); font-size: 10px; color: var(--text); font-weight: 600; }
.bs-parlay-odds  { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--green); }
.bs-parlay-legs  { font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-top: 3px; }
.bs-parlay-best  { border-color: rgba(0,255,128,0.3); background: rgba(0,255,128,0.04); }
.bs-parlay-theoretical { border-color: rgba(100,180,255,0.2); }
.bs-parlay-theoretical .bs-parlay-odds { color: #64b4ff; }

.bs-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 32px;
}
.bs-empty-icon { font-size: 32px; opacity: 0.6; }
.bs-empty-text { font-family: var(--mono); font-size: 10px; color: var(--muted2); text-align: center; line-height: 1.6; }

.bs-clear { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 5px 12px; font-family: var(--mono); font-size: 9px; color: var(--muted2); cursor: pointer; width: 100%; }
.bs-clear:hover { border-color: var(--red); color: var(--red); }

.lean-over  { color: var(--green); }
.lean-under { color: var(--red); }
.lean-push  { color: var(--yellow); }

/* ── RESEARCH MODE ── */
.research-mode-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(74,85,104,0.12), rgba(100,120,160,0.08));
  border: 1px solid rgba(100,130,180,0.25);
  border-radius: 10px;
  position: relative; overflow: hidden;
}
.research-mode-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #4a90d9, #7b6cf6, #4a90d9);
  background-size: 200% 100%;
  animation: research-shimmer 3s linear infinite;
}
@keyframes research-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.research-mode-icon  { font-size: 28px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(100,180,255,0.4)); }
.research-mode-text  { flex: 1; }
.research-mode-title { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #7eb8f7; letter-spacing: 1px; margin-bottom: 3px; }
.research-mode-sub   { font-family: var(--mono); font-size: 9px; color: var(--muted2); line-height: 1.6; }
.research-mode-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(100,180,255,0.1); color: #64b4ff;
  border: 1px solid rgba(100,180,255,0.2); letter-spacing: 1px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── HOW IT WORKS MODAL ── */
.hiw-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.hiw-modal {
  background: var(--s1); border: 1px solid var(--border2);
  border-radius: 16px; padding: 32px; max-width: 560px; width: 92%;
  max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.hiw-title { font-family: var(--mono); font-size: 13px; color: var(--green); font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; }
.hiw-section { margin-bottom: 16px; }
.hiw-section-title { font-family: var(--mono); font-size: 10px; color: var(--text); font-weight: 600; letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase; }
.hiw-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; }
.hiw-badge { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; margin-top: 1px; }
.hiw-desc { font-family: var(--mono); font-size: 9px; color: var(--muted2); line-height: 1.6; }
.hiw-close { background: var(--s3); border: 1px solid var(--border); border-radius: 6px; padding: 6px 16px; font-family: var(--mono); font-size: 10px; color: var(--muted2); cursor: pointer; margin-top: 8px; }
.hiw-close:hover { color: var(--text); border-color: var(--border2); }

/* ── HISTORY PANEL ── */
.hist-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.hist-stat-box { background: var(--s3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; text-align: center; }
.hist-stat-val { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--green); }
.hist-stat-lbl { font-family: var(--mono); font-size: 8px; color: var(--muted2); letter-spacing: 1px; margin-top: 3px; }
.hist-row { display: grid; grid-template-columns: 1fr 60px 60px 70px 60px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--mono); font-size: 9px; }
.hist-row-header { color: var(--muted); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.hist-hit  { color: var(--green); font-weight: 700; }
.hist-miss { color: var(--red); }
.hist-pending { color: var(--muted2); }

/* ── GRID ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:16px; }


/* ── CARD ── */
.card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  animation: fadeUp 0.4s ease both;
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,230,138,0.15), transparent);
}

.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted2);
}
.card-badge {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-green  { background:rgba(0,230,138,0.08); color:var(--green);  border:1px solid rgba(0,230,138,0.2); }
.badge-pro    { background:rgba(245,158,11,0.08); color:#fbbf24; border:1px solid rgba(245,158,11,0.25); font-size:var(--text-xs); padding:2px 7px; border-radius:4px; font-family:var(--mono); font-weight:600; letter-spacing:0.5px; vertical-align:middle; cursor:default; }
.badge-red    { background:rgba(244,64,96,0.08);  color:var(--red);   border:1px solid rgba(244,64,96,0.2); }
.badge-orange { background:rgba(245,158,11,0.08);  color:var(--orange2);border:1px solid rgba(245,158,11,0.2); }
.badge-blue   { background:rgba(96,165,250,0.08);  color:var(--blue);  border:1px solid rgba(96,165,250,0.2); }

.card-body { padding:14px 20px; }


/* ── TREND TABLE ── */
.trend-table { width:100%; border-collapse:collapse; }
.trend-table th {
  font-family:var(--mono); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted2); padding:0 10px 12px;
  text-align:right; font-weight:500;
}
.trend-table th:first-child { text-align:left; }
.trend-table td {
  font-family:var(--mono); font-size:12px; padding:8px 10px;
  border-top:1px solid rgba(136,180,255,0.04); text-align:right; vertical-align:middle;
}
.trend-table td:first-child { text-align:left; color:var(--muted2); }
.trend-table tr:hover td { background:rgba(136,180,255,0.03); }

.pct-val { font-weight:500; }
.pct-high { color:var(--green); }
.pct-med  { color:var(--yellow); }
.pct-low  { color:var(--red); }

.mini-bar { display:flex; height:4px; background:var(--s3); border-radius:3px; overflow:hidden; width:72px; }
.mini-bar-fill { height:100%; border-radius:3px; transition:width 0.6s ease; }
.bar-cell { padding-left:var(--sp-10); }

/* ── GAME LOG ── */
.game-log { width:100%; border-collapse:collapse; }
.game-log th {
  font-family:var(--mono); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted2); padding:0 8px 12px;
  text-align:right; font-weight:500;
}
.game-log th:first-child, .game-log th:nth-child(2), .game-log th:nth-child(3) { text-align:left; }
.game-log td {
  font-family:var(--mono); font-size:12px; padding:8px 8px;
  border-top:1px solid rgba(136,180,255,0.04); text-align:right; vertical-align:middle;
}
.game-log td:first-child { color:var(--muted2); white-space:nowrap; min-width:82px; }
.game-log td:nth-child(2) { color:var(--muted2); font-size:10px; }
.game-log td:nth-child(3) { color:var(--muted2); }
.game-log tr:hover td { background:rgba(136,180,255,0.03); }

.stat-hit  { color:var(--green); font-weight:600; }
.stat-miss { color:var(--text); }
.stat-dot  { font-size:10px; margin-left:2px; }

/* ── SEARCH HISTORY ── */
.search-history { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.search-history-pill {
  font-family:var(--mono); font-size:11px; padding:4px 10px;
  background:var(--s2); border:1px solid var(--border); border-radius:16px;
  color:var(--muted2); cursor:pointer; transition:all 0.15s; letter-spacing:0.3px;
}
.search-history-pill:hover { border-color:var(--green); color:var(--green); background:rgba(0,230,138,0.05); }

/* ── INLINE GAME LOG EXPANSION ── */
.trend-row-expandable { cursor:pointer; }
.trend-row-expandable:hover td:first-child { color:var(--green); }
.trend-row-expandable td:first-child::before { content:'▸ '; font-size:9px; color:var(--muted); }
.trend-row-expandable.expanded td:first-child::before { content:'▾ '; color:var(--green); }
.trend-table .trend-expand-row td { padding:0; border:none; }
.trend-expand-inner {
  background:rgba(0,0,0,0.2); border-radius:8px; margin:4px 10px 10px; padding:10px;
  max-height:0; overflow:hidden; transition:max-height 0.3s ease; opacity:0;
}
.trend-expand-inner.open { max-height:600px; overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:1; transition:max-height 0.4s ease, opacity 0.3s ease; }
.trend-expand-inner table { width:100%; }
.trend-table .trend-expand-inner td { font-size:11px; padding:var(--sp-4) var(--sp-6); }

/* ── SLATE TABLE ── */
.slate-table { width:100%; border-collapse:collapse; }
.slate-table th {
  font-family:var(--mono); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted2); padding:8px 10px;
  text-align:left; font-weight:500; cursor:pointer; user-select:none;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--s1); z-index:1;
}
.slate-table th:hover { color:var(--green); }
.slate-table th.sorted { color:var(--green); }
.slate-table th.sorted::after { content:' ▼'; font-size:8px; }
.slate-table th.sorted.asc::after { content:' ▲'; }
.slate-table td {
  font-family:var(--mono); font-size:12px; padding:8px 10px;
  border-top:1px solid rgba(136,180,255,0.04); vertical-align:middle;
}
.slate-table tr { transition: background 0.15s; }
.slate-table tr:hover td { background: rgba(136,180,255,0.05); }
.slate-table tbody tr:nth-child(even) td { background: rgba(136,180,255,0.02); }
.slate-table tbody tr:nth-child(even):hover td { background: rgba(136,180,255,0.05); }
.slate-table .player-link { color:var(--green); cursor:pointer; text-decoration:none; }
.slate-table .player-link:hover { text-decoration:underline; }

/* ── SEASON CHART ── */
.season-chart-wrap {
  position:relative; width:100%; height:200px; padding:10px 0;
}
.season-chart-wrap canvas { width:100%; height:100%; }

/* ── COMPARE MODE ── */
.compare-bar {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--s2); border:1px solid var(--border); border-radius:8px;
  margin-bottom:16px;
}
.compare-bar input {
  flex:1; font-family:var(--sans); font-size:13px; padding:6px 12px;
  background:var(--s1); border:1px solid var(--border); border-radius:6px;
  color:var(--text); outline:none;
}
.compare-bar input:focus { border-color:var(--green); }
.compare-bar { position: relative; }
.compare-suggest {
  position:absolute; top:100%; left:0; right:0; z-index:200;
  background:var(--s1); border:1px solid var(--border); border-radius:8px;
  margin-top:4px; max-height:240px; overflow-y:auto; -webkit-overflow-scrolling:touch; display:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.compare-suggest .suggest-item {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  cursor:pointer; border-bottom:1px solid var(--border);
  font-family:var(--sans); font-size:13px; color:var(--text);
}
.compare-suggest .suggest-item:last-child { border-bottom:none; }
.compare-suggest .suggest-item:hover { background:rgba(0,255,128,0.06); }
.compare-suggest .suggest-meta { font-family:var(--mono); font-size:10px; color:var(--muted2); }
.compare-suggest .suggest-pos { font-family:var(--mono); font-size:10px; color:var(--muted2); background:var(--s2); padding:1px 5px; border-radius:3px; }
.compare-bar button {
  font-family:var(--mono); font-size:11px; padding:6px 14px;
  background:rgba(0,230,138,0.08); border:1px solid rgba(0,230,138,0.2);
  border-radius:6px; color:var(--green); cursor:pointer; letter-spacing:0.5px;
}
.compare-container { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare-player-card {
  background:var(--s1); border:1px solid var(--border); border-radius:14px;
  padding:16px; overflow:hidden;
}
.compare-player-card .player-name { font-size:16px; }
.compare-stat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(136,180,255,0.04);
  font-family:var(--mono); font-size:12px;
}
@media(max-width:768px) {
  .compare-container { grid-template-columns:1fr; }
  .slate-filters { flex-direction:column; align-items:stretch; }
  .slate-card {
    grid-template-columns: 1fr; gap: 10px; padding: 14px 14px;
  }
  .slate-card-right {
    text-align: left; flex-direction: row; align-items: center; gap: 10px;
    flex-wrap: wrap; white-space: normal;
  }
  .slate-card-signals span { display: block; margin-right: 0; }
  .slate-card-player { font-size: 12px; }
  .slate-card-meta { font-size: 10px; }
  .slate-card-prop { font-size: 12px; }
  .slate-locked-wrap .slate-card { grid-template-columns: 1fr; }
}

/* ── SKELETON SHIMMER ── */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 50%, var(--s2) 75%);
  background-size: 200% 100%;
  animation: skeletonSweep 1.8s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 20px; margin-bottom: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  position: relative; overflow: hidden;
}
.skeleton-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(0,230,138,0.03) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: skeletonSweep 2s ease-in-out infinite;
}
.skeleton-line {
  height: 12px; border-radius: 4px; margin-bottom: 8px;
}
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-circle {
  width: 44px; height: 44px; border-radius: 50%;
}

/* ── STAT TABS ── */
.stat-tabs {
  display:flex; gap:2px; margin-bottom:14px;
  background:var(--s2); border-radius:8px; padding:3px;
  border: 1px solid var(--border);
}
.stat-tab {
  flex:1; padding:7px; border:none; border-radius:6px;
  background:transparent; color:var(--muted2);
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.5px;
  cursor:pointer; transition:background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; text-transform:uppercase;
}
.stat-tab.active { background:var(--s3); color:var(--green); box-shadow:0 2px 8px rgba(0,0,0,0.15); }

/* ── TAB CONTENT TRANSITIONS ── */
.tab-content {
  animation: tabFadeIn 0.2s ease both;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── ODDS GRID ── */
.odds-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.odds-book {
  background:var(--s2); border:1px solid var(--border);
  border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:6px;
  transition: all 0.2s;
}
.odds-book:hover { border-color: var(--border2); box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.book-name { font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.book-line { font-family:var(--display); font-size:20px; font-weight:900; color:var(--white); letter-spacing:0; }
.odds-row { display:flex; justify-content:space-between; align-items:center; }
.odds-label { font-family:var(--mono); font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.odds-price { font-family:var(--mono); font-size:11px; padding:2px 6px; border-radius:3px; }
.odds-over  { background:rgba(0,255,128,0.08); color:var(--green); }
.odds-under { background:rgba(255,34,68,0.08);  color:var(--red); }
.odds-best  { border:1px solid rgba(0,255,128,0.4); box-shadow:0 0 6px rgba(0,255,128,0.15); }
.odds-book.odds-best { position: relative; }
.odds-book.odds-best::after {
  content: 'BEST';
  position: absolute; top: 6px; right: 6px;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 1px; color: var(--green);
  background: rgba(0,230,138,0.1); border: 1px solid rgba(0,230,138,0.25);
  border-radius: 3px; padding: 1px 5px;
}
.odds-outlier { border-color: rgba(255,107,0,0.3); box-shadow:0 0 8px rgba(255,107,0,0.08); }
.novig-row {
  display:flex; justify-content:space-between;
  background:var(--s3); border-radius:4px; padding:6px 8px; margin-top:4px;
}
.novig-label { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.5px; text-transform:uppercase; }
.novig-val   { font-family:var(--mono); font-size:11px; font-weight:500; }

/* ── ODDS HEATMAP ── */
.odds-book[data-rank="best"] {
  border-color: rgba(0,230,138,0.35);
  background: linear-gradient(145deg, rgba(0,230,138,0.06), var(--s2));
  box-shadow: 0 0 16px rgba(0,230,138,0.1);
}
.odds-book[data-rank="worst"] {
  border-color: rgba(244,64,96,0.15);
  background: linear-gradient(145deg, rgba(244,64,96,0.03), var(--s2));
  opacity: 0.75;
}
.odds-book[data-rank="mid"] {
  opacity: 0.88;
}

/* ── MONTHLY SPLITS ── */
.month-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid rgba(0,255,128,0.04); }
.month-name { font-family:var(--mono); font-size:10px; color:var(--muted2); width:32px; text-transform:uppercase; }
.month-bar-bg { flex:1; height:5px; background:var(--s3); border-radius:2px; overflow:hidden; }
.month-bar-fill { height:100%; border-radius:2px; }
.month-pct { font-family:var(--mono); font-size:10px; width:34px; text-align:right; }
.month-avg { font-family:var(--mono); font-size:10px; color:var(--muted); width:34px; text-align:right; }
.month-n   { font-family:var(--mono); font-size:9px; color:var(--muted); width:20px; text-align:right; }

/* ── TEAMMATE ROW ── */
.teammate-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; border-top:1px solid rgba(0,255,128,0.04);
}
.teammate-info { display:flex; align-items:center; gap:10px; }
.teammate-name { font-size:13px; font-weight:500; color:var(--text); }
.teammate-injury { font-family:var(--mono); font-size:10px; color:var(--muted2); }
.status-out          { color:var(--red); }
.status-questionable { color:var(--orange2); }
.status-dtd          { color:var(--blue); }
.status-probable     { color:var(--green); }

/* ── COMBO GRID ── */
.combo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.combo-card {
  background:var(--s2); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  transition: border-color 0.2s;
}
.combo-card:hover { border-color: var(--border2); }
.combo-label { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--muted2); margin-bottom:6px; text-transform:uppercase; }
.combo-line  { font-family:var(--display); font-size:20px; font-weight:900; color:var(--white); margin-bottom:8px; }
.combo-stats { display:flex; flex-direction:column; gap:4px; }
.combo-row   { display:flex; justify-content:space-between; }
.combo-window{ font-family:var(--mono); font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.combo-pct   { font-family:var(--mono); font-size:10px; }

/* ── BANNERS ── */
.streak-banner {
  display:flex; align-items:center; gap:10px;
  background:rgba(0,230,138,0.04); border:1px solid rgba(0,230,138,0.1);
  border-radius:10px; padding:12px 16px; margin-bottom:10px;
}
.streak-text { font-family:var(--mono); font-size:12px; color:var(--green); letter-spacing:0.3px; }

.warn-banner {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(245,158,11,0.04); border:1px solid rgba(245,158,11,0.12);
  border-radius:10px; padding:12px 16px; margin-bottom:14px;
}
.warn-text { font-family:var(--sans); font-size:12px; color:var(--orange2); line-height:1.6; }

/* ── EMPTY / LOADING ── */
.empty-state { text-align:center; padding:100px 40px; color:var(--muted); }
.empty-big { font-family:var(--display); font-size:clamp(28px,8vw,48px); font-weight:900; color:var(--s3); line-height:1; margin-bottom:20px; letter-spacing:2px; background: linear-gradient(135deg, var(--s3), rgba(136,180,255,0.15)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.empty-msg { font-family:var(--sans); font-size:14px; color:var(--muted2); line-height:1.8; letter-spacing:0.2px; }

@keyframes pulse-fade { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes oddsShimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(400%); } }

/* ── Share button ── */
.share-btn {
  background: rgba(0, 230, 138, 0.06);
  border: 1px solid rgba(0, 230, 138, 0.2);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.share-btn:hover {
  background: rgba(0, 230, 138, 0.12);
  border-color: rgba(0, 230, 138, 0.4);
}

/* ── Report tab nav (sticky within player report) ── */
.report-tab-nav {
  position: sticky;
  top: 52px; /* below main header */
  z-index: 50;
  display: flex;
  gap: 2px;
  padding: 6px 0;
  margin-bottom: 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.report-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.report-tab:hover {
  color: var(--text);
  background: var(--s2);
}
.report-tab.active {
  color: var(--green);
  background: rgba(0, 230, 138, 0.08);
  border-color: rgba(0, 230, 138, 0.25);
}

/* scanning line animation */
@keyframes scan {
  0%   { top: 0%; }
  100% { top: 100%; }
}

/* card stagger */
.card:nth-child(1) { animation-delay:0.05s; }
.card:nth-child(2) { animation-delay:0.1s; }
.card:nth-child(3) { animation-delay:0.15s; }
.card:nth-child(4) { animation-delay:0.2s; }

/* ── TIER-CODED CARDS ── */
.card[data-tier="S"],
.slate-card[data-tier="S"] {
  border-left: 3px solid var(--tier-s);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), var(--tier-s-glow);
}
.card[data-tier="S"]::before,
.slate-card[data-tier="S"]::before {
  background: linear-gradient(90deg, transparent, rgba(255,61,90,0.2), transparent);
}
.card[data-tier="A"],
.slate-card[data-tier="A"] {
  border-left: 3px solid var(--tier-a);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), var(--tier-a-glow);
}
.card[data-tier="A"]::before,
.slate-card[data-tier="A"]::before {
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.2), transparent);
}
.card[data-tier="B"],
.slate-card[data-tier="B"] {
  border-left: 3px solid var(--tier-b);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), var(--tier-b-glow);
}
.card[data-tier="B"]::before,
.slate-card[data-tier="B"]::before {
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.15), transparent);
}
.card[data-tier="C"],
.slate-card[data-tier="C"] {
  border-left: 3px solid var(--tier-c);
}

/* Tier badge redesign — embossed feel */
.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  position: relative;
}
.tier-badge--s {
  background: linear-gradient(135deg, rgba(255,61,90,0.15), rgba(255,61,90,0.08));
  color: var(--tier-s);
  border: 1px solid var(--tier-s-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(255,61,90,0.15);
  text-shadow: 0 0 12px rgba(255,61,90,0.4);
}
.tier-badge--a {
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
  color: var(--tier-a);
  border: 1px solid var(--tier-a-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(245,158,11,0.15);
  text-shadow: 0 0 12px rgba(245,158,11,0.4);
}
.tier-badge--b {
  background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(96,165,250,0.05));
  color: var(--tier-b);
  border: 1px solid var(--tier-b-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.tier-badge--c {
  background: linear-gradient(135deg, rgba(107,114,128,0.1), rgba(107,114,128,0.05));
  color: var(--tier-c);
  border: 1px solid var(--tier-c-border);
}

/* ── SIGNAL SCORE GAUGE ── */
.signal-gauge {
  width: 44px;
  height: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.signal-gauge svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.signal-gauge-track {
  fill: none;
  stroke: var(--s3);
  stroke-width: 3;
}
.signal-gauge-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}
.signal-gauge-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  z-index: 1;
}

/* ── WITHOUT FILTER ── */
.without-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,170,255,0.04);
  border: 1px solid rgba(0,170,255,0.15);
  border-radius: 7px;
  padding: 10px 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.without-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.without-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,170,255,0.08);
  border: 1px solid rgba(0,170,255,0.25);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.without-chip:hover { background: rgba(0,170,255,0.15); }
.without-chip.active {
  background: var(--blue);
  color: #000;
  font-weight: 700;
}
.without-chip .chip-x {
  font-size: 12px;
  opacity: 0.6;
  margin-left: 2px;
}
.without-active-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,170,255,0.06);
  border: 1px solid rgba(0,170,255,0.2);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue);
}
.clear-filter-btn {
  background: none;
  border: 1px solid rgba(0,170,255,0.3);
  border-radius: 3px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s;
}
.clear-filter-btn:hover { background: rgba(0,170,255,0.1); }


/* ── GAME LINES CARD ── */
.game-lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.game-line-book {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
}
.game-line-book:hover { border-color: var(--border2); }
.game-line-book-name {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.game-line-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.game-line-section-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 5px;
}
.game-line-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.game-line-team {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
}
.game-line-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}
.gl-fav  { color: var(--green); }
.gl-dog  { color: var(--orange2); }
.gl-even { color: var(--yellow); }
.gl-total-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
}
.matchup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 16px;
}
.matchup-team {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}
.matchup-team.highlighted { color: var(--green); }
.matchup-vs {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  text-align: center;
}
.matchup-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
  text-align: center;
  margin-top: 2px;
}


/* ── QUICK PANELS ── */
.quick-panels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.panel-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted2);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: all 0.2s;
  white-space: nowrap;
}
.panel-btn:hover, .panel-btn.active {
  border-color: rgba(0,230,138,0.25);
  color: var(--green);
  background: rgba(0,230,138,0.04);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.panel-btn .panel-icon { font-size: 11px; opacity: 0.8; }

/* Panel overlay drawer */
.panel-drawer {
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 14px;
  margin-top: 12px;
  overflow: hidden;
  animation: fadeUp 0.25s ease both;
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.panel-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.panel-drawer-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
}
.panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.1s;
}
.panel-close:hover { color: var(--text); }
.panel-body { padding: 14px 18px; max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Panel table */
.panel-table { width: 100%; border-collapse: collapse; }
.panel-table th {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); padding: 0 10px 8px;
  text-align: left; font-weight: 400;
}
.panel-table th:not(:first-child) { text-align: right; }
.panel-table td {
  font-family: var(--mono); font-size: 11px; padding: 6px 10px;
  border-top: 1px solid rgba(0,255,128,0.04); vertical-align: middle;
}
.panel-table td:not(:first-child) { text-align: right; }
.panel-table tr:hover td { background: rgba(0,255,128,0.02); }
.panel-table tr.highlight-row td { background: rgba(0,255,128,0.06); }

/* Matchup card grid */
.matchup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.matchup-mini {
  background: var(--s2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  transition: all 0.2s;
}
.matchup-mini:hover { border-color: rgba(0,230,138,0.25); box-shadow: 0 4px 16px rgba(0,0,0,0.15); transform: translateY(-1px); }
.matchup-mini-teams { font-family: var(--mono); font-size: 11px; color: var(--text); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matchup-mini-time  { font-family: var(--mono); font-size: 9px; color: var(--muted2); }
.matchup-mini-lines { display: flex; gap: 5px; margin-top: 7px; }
.matchup-line-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 3px; display: flex; align-items: center; gap: 3px; }
.matchup-line-spread { background: rgba(0,255,128,0.07); color: var(--green); border: 1px solid rgba(0,255,128,0.2); }
.matchup-line-total  { background: rgba(100,180,255,0.07); color: #64b4ff; border: 1px solid rgba(100,180,255,0.2); }
.panel-loading { font-family: var(--mono); font-size: 11px; color: var(--muted2); padding: 20px 0; text-align: center; letter-spacing: 1px; }


/* ── ROSTER MODAL (fullscreen overlay) ── */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.roster-modal {
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 16px;
  width: 640px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.2s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
@keyframes slideUp { from { transform:translateY(16px);opacity:0; } to { transform:translateY(0);opacity:1; } }

.roster-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.roster-modal-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}
.roster-modal-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 1px;
}
.roster-modal-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted2);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 8px;
  transition: all 0.15s;
}
.roster-modal-close:hover { border-color: var(--border2); color: var(--text); }

.roster-team {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}
.roster-team:last-child { border-right: none; }

/* ── ROSTER PICKER (fullscreen overlay modal) ── */
.roster-picker {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.roster-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--s2);
}
.roster-picker-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.roster-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.roster-team-col {
  padding: 12px 16px;
}
.roster-team-col:first-child {
  border-right: 1px solid var(--border);
}
.roster-team-name {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.roster-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}
.roster-player:hover {
  background: rgba(0,255,128,0.06);
}
.roster-player-name {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.roster-player-pos {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  background: var(--s3);
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.roster-loading {
  padding: 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: 1px;
}

#odds-body::-webkit-scrollbar { display: none; }

/* Mobile line inputs — hidden on desktop, shown via media query below */
.mobile-line-inputs { display: none; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — 768px (tablets + phones)
══════════════════════════════════════════════════════ */
/* ── INTERMEDIATE BREAKPOINT — nav gets cramped ── */
@media (max-width:1440px) {
  .header-right { gap: 14px; }
  .nav-link { font-size: var(--text-sm); padding: var(--sp-4) var(--sp-8); }
  header .logo-wordmark { font-size: 18px; letter-spacing: 2px; }
}
@media (max-width:1200px) {
  .header-right { gap: var(--sp-10); }
  .nav-link { font-size: var(--text-xs); padding: var(--sp-4) var(--sp-6); }
  .pro-btn { font-size: var(--text-xs); padding: 5px var(--sp-10); }
  .logo-tag { display: none; }
  #auth-area button { font-size: var(--text-2xs); padding: var(--sp-4) var(--sp-8); }
  #auth-area span { font-size: var(--text-2xs); }
}
@media (max-width:1000px) {
  .nav-link { display: none; }
  .nav-dropdown { display: none; }
  header .hamburger { display: flex; }
}

@media (max-width:768px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .odds-grid { grid-template-columns:1fr 1fr; }
  .combo-grid { grid-template-columns: repeat(2, 1fr); }
  .search-lines { display:none; }

  /* ── PANEL DRAWERS (mobile full-screen sheet) ── */
  .panel-drawer {
    position: fixed;
    inset: 0;
    z-index: 400;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    animation: none;
  }
  .panel-body {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }
  .panel-table {
    font-size: 10px;
  }
  .panel-table td {
    padding: 8px 6px;
    font-size: 10px;
  }
  .panel-table th {
    padding: 0 6px 6px;
    font-size: 8px;
  }
  .panel-body .matchup-grid {
    grid-template-columns: 1fr;
  }

  /* ── HEADER ── */
  header {
    padding: 0 12px;
    height: 60px;
  }
  header .logo-wrap img { height: 40px; }
  header .logo-wordmark { font-size: var(--text-lg); letter-spacing: 2px; }
  .logo-tag { display: none; }
  .header-right {
    gap: var(--sp-8);
    flex-shrink: 0;
    min-width: 0;
  }
  .nav-link { display: none; }
  .nav-dropdown { display: none; }
  .pro-btn {
    display: none; /* hide on mobile — accessible via hamburger menu */
  }
  /* Hamburger — ensure it fits and has good touch target */
  header .hamburger {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: var(--sp-10);
    flex-shrink: 0;
  }

  /* ── SEARCH HERO ── */
  .search-hero {
    padding: 20px 12px 18px;
  }
  .hero-title {
    font-size: clamp(20px, 7vw, 36px);
    line-height: 1.1;
    margin-bottom: 18px;
    word-break: break-word;
  }
  /* Search bar stays horizontal on mobile */
  .search-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
  }
  .search-input {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 14px 12px;
  }
  .search-go {
    flex-shrink: 0;
    padding: 0 18px;
    font-size: 11px;
    min-height: 44px;
    min-width: 72px;
    white-space: nowrap;
    border-radius: 0 11px 11px 0;
  }

  /* ── DASHBOARD ── */
  .dashboard {
    padding: 0 10px 60px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ── PANEL BUTTONS ── */
  .quick-panels {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .quick-panels::-webkit-scrollbar { display: none; }
  .panel-btn {
    font-size: 10px;
    padding: 10px 14px;
    min-height: 44px;
    flex-shrink: 0;
  }

  /* ── PLAYER HEADER ── */
  .player-header {
    padding: 14px;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .player-header-inner {
    flex-direction: row;
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .player-header .headshot-wrap {
    width: 68px;
    height: 76px;
    flex-shrink: 0;
  }
  /* Info column — must not overflow */
  .player-header-inner > div:last-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .player-header .player-name {
    font-size: clamp(14px, 4.5vw, 22px);
    letter-spacing: 0;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.2;
  }
  .player-name-row {
    flex-wrap: wrap;
    gap: var(--sp-4);
    min-width: 0;
  }
  .player-header .player-team-badge {
    font-size: 8px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .player-meta {
    gap: 5px;
    flex-wrap: wrap;
  }
  .meta-item {
    font-size: 10px;
  }

  /* ── LEAN PILLS — 3 col grid ── */
  .lean-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: 100%;
  }
  .lean-pill {
    min-width: unset;
    padding: 8px 4px;
  }
  .lean-pills .lean-stat      { font-size: 8px; }
  .lean-pills .lean-line      { font-size: 15px; }
  .lean-pills .lean-direction { font-size: var(--text-2xs); }
  .lean-pills .lean-pct       { font-size: 11px; }
  /* Add to watchlist button — 44px touch target */
  .lean-pills .lean-pill button {
    min-height: 44px;
    font-size: 9px;
  }

  /* ── CARDS ── */
  .card { border-radius: 8px; overflow: hidden; }
  .card-header { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  .card-body   { padding: 10px 12px; }

  /* Stat tab buttons — 44px touch targets (WCAG/Apple minimum) */
  .card-header .card-badge,
  .card-header button,
  [onclick^="switchStat"] {
    min-height: 44px;
    padding: var(--sp-6) var(--sp-12);
    font-size: var(--text-xs);
  }

  /* ── TREND TABLE — horizontal scroll ── */
  #trend-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  #trend-body > * { padding: 10px 12px; }
  .trend-table { min-width: 380px; }
  .trend-table th, .trend-table td {
    font-size: 11px;
    padding: 5px 5px;
    white-space: nowrap;
  }
  /* Scroll hint shadow on right edge */
  #trend-body {
    background:
      linear-gradient(to right, var(--s2) 0%, transparent 20px),
      linear-gradient(to left,  var(--s2) 0%, transparent 20px) right,
      linear-gradient(to right, rgba(0,255,128,0.06) 0%, transparent 20px),
      linear-gradient(to left,  rgba(0,255,128,0.06) 0%, transparent 20px) right;
    background-attachment: local, local, scroll, scroll;
    background-size: 40px 100%, 40px 100%, 40px 100%, 40px 100%;
    background-repeat: no-repeat;
  }

  /* ── GAME LOG TABLE — horizontal scroll ── */
  #gamelog-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .game-log { min-width: 540px; }
  .game-log th, .game-log td {
    font-size: 11px;
    padding: 5px 4px;
    white-space: nowrap;
  }

  /* ── ODDS — horizontal scroll ── */
  #odds-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #odds-body > div {
    padding: var(--sp-10) var(--sp-8);
  }

  /* ── WATCHLIST DRAWER ── */
  #watchlist-drawer {
    width: 100%;
    top: 60px;
  }

  /* ── WATCHLIST TOGGLE — compact pill ── */
  #watchlist-toggle {
    bottom: var(--sp-16);
    right: var(--sp-12);
    padding: var(--sp-10) var(--sp-16);
    border-radius: 50px;
    gap: var(--sp-8);
    min-height: 44px;
  }
  #watchlist-toggle .bs-label { display: none; }
  #watchlist-toggle .bs-astronaut { font-size: 18px; }

  /* ── MODALS ── */
  .hiw-modal {
    width: 96%;
    max-width: 96%;
    padding: 18px var(--sp-16);
    max-height: 88vh;
  }

  /* ── MONTHLY SPLITS ── */
  .month-row { font-size: var(--text-xs); }

  /* ── INSIGHTS ── */
  .dashboard .insights-grid { grid-template-columns: 1fr; }

  /* ── ODDS STAT TABS — scrollable on mobile ── */
  #odds-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
  }
  #odds-tabs .stat-tab {
    flex-shrink: 0;
    min-height: 44px;
    padding: var(--sp-6) var(--sp-12);
    font-size: var(--text-xs);
  }

  /* ── LIVE BADGE — don't push tabs off screen ── */
  .card-header > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  /* ── FONT SIZE FLOOR — 10px minimum for readability ── */
  .dashboard .lean-stat, .dashboard .lean-direction, .dashboard .lean-pct,
  .dashboard .card-title, .dashboard .card-badge,
  .dashboard .player-team-badge,
  .dashboard .meta-item,
  .dashboard .month-name, .dashboard .month-n,
  .dashboard .suggest-name, .dashboard .suggest-meta,
  .dashboard .panel-btn,
  .dashboard .bs-leg-detail, .dashboard .bs-leg-book {
    font-size: var(--text-xs);
  }
  /* Slightly larger for key interactive labels */
  .dashboard .lean-direction { font-size: 11px; }
  .dashboard .lean-pct       { font-size: var(--text-sm); }
  .search-hero .search-go    { font-size: 11px; }

  /* ── TOUCH TARGETS — 44px minimum ── */
  .dashboard .lean-pill button,
  .dashboard [onclick^="switchStat"],
  .dashboard [onclick^="switchOddsStat"],
  .dashboard .card-badge[onclick],
  .dashboard .panel-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── SCROLL HINT SHADOWS on scrollable tables ── */
  #gamelog-body, #odds-body {
    background-image:
      linear-gradient(to right, var(--s2), transparent 20px),
      linear-gradient(to left,  var(--s2), transparent 20px),
      linear-gradient(to right, rgba(0,255,128,0.05), transparent),
      linear-gradient(to left,  rgba(0,255,128,0.05), transparent);
    background-position: left, right, left, right;
    background-size: 20px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* ── SUGGEST DROPDOWN ── */
  .suggest-dropdown { left: 0; right: 0; }

  /* ── MOBILE LINE INPUTS ── */
  .mobile-line-inputs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .mobile-line-inputs input {
    flex: 1;
    background: var(--s2);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 12px 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--orange2);
    text-align: center;
    outline: none;
    min-height: 44px;
    box-sizing: border-box;
  }
  .mobile-line-inputs input::placeholder { color: var(--muted); font-size: 10px; }
  .mobile-line-inputs input:focus { border-color: var(--orange2); }

  /* ── WATCHLIST PADDING OVERRIDE ── */
  .dashboard[style*="padding-right"] {
    padding-right: var(--sp-10);
  }

  /* ── LEGAL & PROFILE PAGES ── */
  .legal-page { padding: 16px 0; }
  .legal-page h1 { font-size: 20px; }
  .legal-page p, .legal-page li { font-size: 11px; }
  .legal-page .contact-card { padding: 16px; }
  .site-footer { margin-top: 40px; padding: 32px 16px 20px; }
  .footer-links { gap: 4px 14px; }
  .footer-gambling { font-size: 10px; padding: 8px 12px; }

  /* ── TOAST ON MOBILE ── */
  #toast-container { top: 64px; right: 12px; left: 12px; }
  .toast { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — 480px (large phones / phablets)
══════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .hero-title { font-size: clamp(18px, 6.5vw, 28px); }
  .search-go  { font-size: 10px; padding: 0 14px; min-width: 64px; }
  .lean-pills { grid-template-columns: repeat(2, 1fr); }
  .player-header .player-name { font-size: clamp(16px, 4.5vw, 20px); }
  .player-header .headshot-wrap { width: 56px; height: 62px; }
  .card-header { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .card-header > div { overflow-x: auto; width: 100%; }
  .game-log { min-width: 420px; }
  .insights-grid > div { padding: var(--sp-10); }
  /* Legal / profile pages */
  .legal-page { padding: var(--sp-12) 0; }
  .legal-page h1 { font-size: 18px; }
  .legal-page h2 { font-size: 13px; }
  /* Footer */
  .site-footer { padding: 28px var(--sp-12) var(--sp-16); }
  .footer-links { gap: var(--sp-4) var(--sp-12); }
  /* Toast */
  #toast-container { top: var(--sp-12); right: var(--sp-12); left: var(--sp-12); }
  .toast { font-size: 11px; padding: var(--sp-10) var(--sp-16); max-width: 100%; }
  /* Live badge */
  .live-badge { font-size: 8px; }
  .odds-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — 400px (small phones, iPhone SE)
══════════════════════════════════════════════════════ */
@media (max-width:400px) {
  header { padding: 0 var(--sp-8); height: 56px; }
  header .logo-wrap img { height: 42px; }
  .hero-title { font-size: clamp(16px, 6vw, 22px); }
  .player-header .player-name { font-size: var(--text-lg); line-height: 1.15; }
  .player-header .headshot-wrap { width: 50px; height: 56px; }
  .lean-pills { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .lean-pills .lean-line { font-size: 13px; }
  .panel-btn { font-size: var(--text-2xs); padding: var(--sp-6) var(--sp-8); }
  .dashboard { padding: 0 var(--sp-8) 60px; }
  .card-body { padding: var(--sp-8) var(--sp-10); }
  .card-header { padding: var(--sp-8) var(--sp-10); }
  #watchlist-drawer { top: 56px; }
  .game-log { min-width: 380px; }
}
/* ── Search Bar Glow ── */
@keyframes searchGlow {
  0% { box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 0 20px rgba(0,230,138,0.15), 0 0 40px rgba(0,230,138,0.08); border-color: rgba(0,230,138,0.4); }
  100% { box-shadow: 0 4px 24px rgba(0,0,0,0.2); border-color: rgba(136,180,255,0.12); }
}
.search-bar.glow-intro {
  animation: searchGlow 2s ease-out forwards;
}

/* ── Watchlist Bounce ── */
@keyframes wlBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.12); }
  60% { transform: scale(0.96); }
}
#watchlist-toggle.bounce { animation: wlBounce 0.4s ease; }

/* ── Back-to-Top Button ── */
#back-to-top {
  position: fixed; bottom: 28px; left: 28px; z-index: 300;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(13,17,23,0.95); border: 1px solid var(--border2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--muted2);
  font-size: 18px; cursor: pointer; display: none;
  align-items: center; justify-content: center;
  transition: all 0.25s; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#back-to-top:hover { color: var(--green); border-color: rgba(0,230,138,0.3); transform: translateY(-2px); }
#back-to-top.visible { display: flex; }

/* ── TYPEAHEAD DROPDOWN ── */
.suggest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: rgba(13,17,23,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 200;
  overflow: hidden;
  animation: fadeUp 0.15s ease both;
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.active {
  background: rgba(0,255,128,0.07);
}
.suggest-item.active { background: rgba(0,255,128,0.1); }
.suggest-name {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  flex: 1;
}
.suggest-name em {
  font-style: normal;
  color: var(--green);
}
.suggest-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted2);
  white-space: nowrap;
}
.suggest-pos {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  background: var(--s3);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.suggest-alias {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--green);
  background: rgba(0,255,128,0.1);
  border: 1px solid rgba(0,255,128,0.2);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.suggest-empty {
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
  text-align: center;
}

.hamburger {
  display: none; /* shown via @media below */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV DRAWER ── */
.mobile-nav {
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  z-index: 150;
  background: var(--s1);
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: fadeUp 0.2s ease both;
}
.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  padding: 12px 0 16px;
}
.mobile-nav-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  padding: 12px 20px;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}
.mobile-nav-link:hover, .mobile-nav-link:active { background: var(--s2); color: var(--green); }
.mobile-nav-divider { height: 1px; background: var(--border); margin: 8px 0; }
.mobile-nav-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 2px;
  padding: 4px 20px 8px;
}

/* ── MOBILE LINE INPUTS (shown under search on mobile via @media 768px) ── */
/* Base: hidden on desktop. Overridden to display:flex in @media (max-width:768px) above. */

/* ── VOTING ── */
.vote-bar { display:flex; gap:4px; margin-top:8px; }
.vote-btn {
  flex:1; padding:6px 0; border-radius:6px; font-family:var(--mono); font-size:10px;
  font-weight:700; letter-spacing:0.5px; cursor:pointer; transition:all 0.15s;
  border:1px solid; text-align:center;
}
.vote-btn.over  { background:rgba(0,230,138,0.06); border-color:rgba(0,230,138,0.25); color:var(--green); }
.vote-btn.under { background:rgba(244,64,96,0.06); border-color:rgba(244,64,96,0.25); color:var(--red); }
.vote-btn.over:hover  { background:rgba(0,230,138,0.15); }
.vote-btn.under:hover { background:rgba(244,64,96,0.15); }
.vote-btn.voted { opacity:1; font-weight:900; }
.vote-btn.voted.over  { background:rgba(0,230,138,0.2); border-color:var(--green); }
.vote-btn.voted.under { background:rgba(244,64,96,0.2); border-color:var(--red); }
.vote-btn.disabled { opacity:0.3; cursor:default; pointer-events:none; }
.vote-community {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:9px; color:var(--muted); margin-top:4px;
}
.vote-community-bar {
  flex:1; height:4px; background:var(--s3); border-radius:2px; margin:0 8px; overflow:hidden;
}
.vote-community-fill {
  height:100%; border-radius:2px; transition:width 0.3s;
  background: linear-gradient(90deg, var(--green), var(--green));
}
.badge-planet { display:inline-flex; align-items:center; gap:2px; font-size:12px; }
.badge-planet-icon { font-size:16px; }

/* ── USERNAME MODAL ── */
.username-modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:500;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.username-modal-box {
  background:var(--s1); border:1px solid var(--border2); border-radius:16px;
  padding:32px; max-width:380px; width:90%; text-align:center;
}

/* ── SLATE VIEW ── */
/* ── DASHBOARD HOME ──────────────────────────────────────────── */
.dash-results-banner {
  background: linear-gradient(135deg, rgba(0,230,138,0.04), rgba(0,230,138,0.02));
  border: 1px solid rgba(0,230,138,0.12); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.dash-results-banner-left { display: flex; align-items: center; gap: 12px; }
.dash-results-banner-icon { font-size: 20px; }
.dash-results-banner-text { font-family: var(--mono); font-size: 12px; color: var(--text); }
.dash-results-banner-text strong { font-weight: 700; }
.dash-results-banner-sub { font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-top: 3px; }
.dash-results-banner-btn {
  background: none; border: 1px solid var(--border2); color: var(--muted2);
  padding: 6px 14px; border-radius: 6px; font-family: var(--mono); font-size: 10px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.dash-results-banner-btn:hover { border-color: rgba(0,230,138,0.3); color: var(--text); }

.dash-slate-preview {
  background: var(--s1); border: 1px solid var(--border2); border-radius: 12px;
  padding: 20px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.dash-slate-preview::before {
  content: ''; position: absolute; top: -1px; left: 30px; right: 30px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,230,138,0.2), transparent);
}
.dash-slate-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.dash-slate-title {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
  letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase;
}
.dash-slate-btn {
  background: rgba(0,230,138,0.08); border: 1px solid rgba(0,230,138,0.2);
  color: var(--green); padding: 6px 14px; border-radius: 6px;
  font-family: var(--mono); font-size: 10px; cursor: pointer; font-weight: 600;
  transition: all 0.15s;
}
.dash-slate-btn:hover { background: rgba(0,230,138,0.14); }
.dash-slate-counts {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.dash-slate-count {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.dash-slate-count .badge-green {
  background: rgba(0,230,138,0.15); color: var(--green);
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.dash-slate-count .badge-blue {
  background: rgba(96,165,250,0.15); color: #60a5fa;
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.dash-slate-preview-list {
  margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px;
}
.dash-slate-preview-row {
  display: flex; justify-content: space-between; align-items: center; padding: 7px 0;
}
.dash-slate-preview-player {
  font-family: var(--sans); font-size: 13px; color: var(--text); font-weight: 600;
}
.dash-slate-preview-meta {
  font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-left: 8px;
}
.dash-slate-preview-prop {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.dash-slate-preview-prop.over { color: var(--green); }
.dash-slate-preview-prop.under { color: var(--red); }

.dash-actions-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.dash-action-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px 20px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.dash-action-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,230,138,0.03), transparent);
  opacity: 0; transition: opacity 0.2s;
}
.dash-action-card:hover {
  border-color: rgba(0,230,138,0.25); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.dash-action-card:hover::before { opacity: 1; }
.dash-action-icon { font-size: 24px; margin-bottom: 10px; position: relative; }
.dash-action-title {
  font-family: var(--sans); font-size: 14px; color: var(--text);
  font-weight: 600; margin-bottom: 4px; position: relative;
}
.dash-action-desc {
  font-family: var(--mono); font-size: 10px; color: var(--muted2); position: relative;
}
.dash-disclaimer {
  text-align: center; font-family: var(--mono); font-size: 9px; color: var(--muted);
  padding: 20px 0; opacity: 0.6;
}

/* ── WELCOME STATE ──────────────────────────────────────────── */
.welcome-wrap {
  max-width: 560px; margin: 0 auto; padding: 20px 0 40px; text-align: center;
}
.welcome-icon { font-size: 40px; margin-bottom: 16px; }
.welcome-title {
  font-family: var(--display); font-size: 22px; color: var(--text); margin-bottom: 10px;
}
.welcome-sub {
  font-family: var(--sans); font-size: 14px; color: var(--muted2);
  line-height: 1.7; margin-bottom: 28px;
}
.welcome-label {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: 1px; margin-bottom: 14px; text-transform: uppercase;
}
.welcome-demos {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px;
}
.welcome-demo-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 20px; cursor: pointer; text-align: left; transition: all 0.2s;
  min-width: 150px; position: relative; overflow: hidden;
}
.welcome-demo-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,230,138,0.04), transparent);
  opacity: 0; transition: opacity 0.2s;
}
.welcome-demo-card:hover {
  border-color: rgba(0,230,138,0.3); transform: translateY(-2px);
}
.welcome-demo-card:hover::before { opacity: 1; }
.welcome-demo-name {
  font-family: var(--sans); font-size: 14px; color: var(--text);
  font-weight: 600; position: relative;
}
.welcome-demo-meta {
  font-family: var(--mono); font-size: 10px; color: var(--muted); position: relative;
}
.welcome-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; text-align: center; margin-bottom: 28px;
}
.welcome-step-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 12px;
}
.welcome-step-icon { font-size: 20px; margin-bottom: 8px; }
.welcome-step-title {
  font-family: var(--sans); font-size: 12px; color: var(--text); font-weight: 600;
}
.welcome-step-desc {
  font-family: var(--mono); font-size: 9px; color: var(--muted2); margin-top: 4px;
}
.welcome-quota {
  font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 8px;
}
.welcome-quota a { color: var(--green); }

/* ── SLATE SECTION ──────────────────────────────────────────── */
.slate-section { margin-bottom: 28px; }
.slate-section-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--muted2); letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.slate-tier-badge {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 800;
  padding: 3px 10px; border-radius: 4px; margin-right: 8px; vertical-align: middle;
  letter-spacing: 1px; border: 1px solid transparent;
}
.slate-tier-badge.s-tier {
  background: linear-gradient(135deg, rgba(255,61,90,0.15), rgba(255,61,90,0.08));
  color: var(--tier-s); border-color: var(--tier-s-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(255,61,90,0.15);
  text-shadow: 0 0 12px rgba(255,61,90,0.4);
}
.slate-tier-badge.a {
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
  color: var(--tier-a); border-color: var(--tier-a-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(245,158,11,0.15);
  text-shadow: 0 0 12px rgba(245,158,11,0.4);
}
.slate-tier-badge.b {
  background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(96,165,250,0.05));
  color: var(--tier-b); border-color: var(--tier-b-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.slate-tier-badge.c {
  background: linear-gradient(135deg, rgba(107,114,128,0.1), rgba(107,114,128,0.05));
  color: var(--tier-c); border-color: var(--tier-c-border);
}

.slate-tier-divider {
  margin: 20px 0 10px; display: flex; align-items: center; gap: 10px;
}
.slate-tier-count {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
}

.slate-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 10px;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
}
.slate-card:hover {
  border-color: rgba(0,230,138,0.2); transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.slate-card-left { min-width: 0; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.slate-card-headshot {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border2); flex-shrink: 0; margin-top: 2px;
  background: var(--s2);
}
.slate-card-info { min-width: 0; }
.slate-card-player {
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.slate-card-meta {
  font-family: var(--mono); font-size: 11px; color: var(--muted2); margin-top: 4px;
}
.slate-card-signals {
  font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-top: 6px;
  line-height: 1.6;
}
.slate-card-signals span { display: inline-block; margin-right: 10px; }
.slate-card-right { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.slate-card-prop {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
}
.slate-card-prop.over  { color: var(--green); }
.slate-card-prop.under { color: var(--red); }
.slate-card-score {
  font-family: var(--mono); font-size: 10px; color: var(--muted2);
}
.slate-card-score-bar {
  width: 48px; height: 4px; background: var(--s3); border-radius: 2px; overflow: hidden;
  margin-top: 2px;
}
.slate-card-score-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--green2), var(--green));
}
.slate-card-watchlist-btn {
  grid-column: 1 / -1; padding: 6px 0; margin-top: 4px;
  background: rgba(0,230,138,0.04); border: 1px solid rgba(0,230,138,0.1);
  border-radius: 6px; font-family: var(--mono); font-size: 10px;
  color: var(--green); cursor: pointer; transition: all 0.15s;
  letter-spacing: 0.5px; text-align: center; width: 100%;
}
.slate-card-watchlist-btn:hover { background: rgba(0,230,138,0.1); border-color: rgba(0,230,138,0.25); }
.slate-no-results {
  text-align: center; padding: 30px; font-family: var(--mono);
  font-size: 12px; color: var(--muted2);
}
.slate-locked-wrap {
  position: relative; margin-top: 8px;
}
.slate-locked-cards {
  filter: blur(6px); pointer-events: none; user-select: none; opacity: 0.5;
}
.slate-locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(8,11,18,0.85) 40%);
  border-radius: 12px; padding: 24px; text-align: center;
}
.slate-locked-count {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--green); margin-bottom: 6px;
}
.slate-locked-sub {
  font-family: var(--sans); font-size: 12px; color: var(--muted2);
  margin-bottom: 16px; max-width: 300px;
}
.slate-locked-cta {
  padding: 11px 30px; background: linear-gradient(135deg, var(--green), var(--green2));
  border: none; border-radius: 8px; font-family: var(--sans); font-size: 13px;
  font-weight: 700; color: #000; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,230,138,0.25); transition: all 0.2s;
}
.slate-locked-cta:hover { box-shadow: 0 4px 20px rgba(0,230,138,0.35); transform: translateY(-1px); }

.slate-results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.slate-stat-box {
  background: var(--s1); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; text-align: center;
}
.slate-stat-box .stat-value {
  font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--text);
}
.slate-stat-box .stat-label {
  font-family: var(--mono); font-size: 10px; color: var(--muted2);
  text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px;
}
.slate-result-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 11px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.slate-result-row:last-child { border-bottom: none; }
.slate-result-icon { font-size: 13px; text-align: center; }
.slate-result-player { color: var(--text); }
.slate-result-actual { color: var(--muted2); text-align: right; }
.slate-back-btn {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 14px; cursor: pointer; margin-bottom: 16px;
  transition: border-color 0.15s, color 0.15s;
}
.slate-back-btn:hover { border-color: var(--green); color: var(--text); }
.slate-empty {
  text-align: center; padding: 60px 20px; color: var(--muted2);
  font-family: var(--sans); font-size: 14px;
}
/* Slate filter bar */
.slate-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center;
}
.slate-filter-btn {
  font-family: var(--mono); font-size: 10px; padding: 4px 12px;
  border-radius: 20px; border: 1px solid var(--border); background: var(--s2);
  color: var(--muted2); cursor: pointer; transition: all 0.12s; letter-spacing: 0.3px;
}
.slate-filter-btn:hover { border-color: var(--green); color: var(--text); }
.slate-filter-btn.active { background: rgba(0,230,138,0.12); border-color: rgba(0,230,138,0.3); color: var(--green); }
.slate-filter-sep {
  width: 1px; height: 18px; background: var(--border); margin: 0 4px;
}
.slate-refresh-btn {
  font-family: var(--mono); font-size: 10px; padding: 4px 12px;
  border-radius: 20px; border: 1px solid rgba(96,165,250,0.3); background: rgba(96,165,250,0.08);
  color: #60a5fa; cursor: pointer; transition: all 0.15s; margin-left: auto;
}
.slate-refresh-btn:hover { background: rgba(96,165,250,0.15); }
.slate-refresh-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Signal breakdown expand */
.slate-card-expand {
  grid-column: 1 / -1; padding-top: 10px; margin-top: 8px;
  border-top: 1px solid var(--border); display: none;
}
.slate-card.expanded .slate-card-expand { display: block; }
.slate-card-expand-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; padding: 3px 0;
}
.slate-card-expand-row .sig-name { color: var(--muted2); }
.slate-card-expand-row .sig-pts { font-weight: 700; min-width: 35px; text-align: right; }
.slate-card-expand-row .sig-pts.pos { color: var(--green); }
.slate-card-expand-row .sig-pts.neg { color: var(--red); }
.slate-expand-toggle {
  font-family: var(--mono); font-size: 9px; color: var(--muted2);
  cursor: pointer; margin-top: 4px; text-align: center; padding: 4px;
  border-radius: 4px; transition: color 0.12s;
}
.slate-expand-toggle:hover { color: var(--text); }
/* Accuracy chart */
.slate-chart-wrap {
  background: var(--s1); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 20px;
}
.slate-chart-canvas { width: 100%; height: 120px; }
.slate-by-stat { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.slate-by-stat .stat-pill {
  font-family: var(--mono); font-size: 10px; padding: 3px 10px;
  border-radius: 20px; background: var(--s2); color: var(--muted2);
  border: 1px solid var(--border);
}

/* ── LIVE badge ───────────────────────────────────────────────────────── */
.live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: #ff4444; letter-spacing: 1px; text-transform: uppercase;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #ff4444;
  animation: livePulse 1.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,68,68,.5); }
  50% { opacity: .7; box-shadow: 0 0 0 4px rgba(255,68,68,0); }
}
.final-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.5px;
}

/* ── Site footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 60px; padding: var(--sp-40) var(--sp-20) var(--sp-24);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
  text-align: center;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-6) var(--sp-16); margin-bottom: var(--sp-16);
}
.footer-links a { color: var(--muted2); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: var(--green); }
.site-footer .footer-social {
  display: flex; gap: var(--sp-16); justify-content: center; margin: var(--sp-12) 0;
}
.site-footer .footer-social a {
  color: var(--muted2); transition: color .15s, transform .15s; display: flex; align-items: center;
}
.site-footer .footer-social a:hover { color: var(--green); transform: translateY(-1px); }
.footer-gambling {
  margin-top: var(--sp-12); padding: var(--sp-10) var(--sp-16);
  background: rgba(255,170,50,.04); border: 1px solid rgba(255,170,50,.08);
  border-radius: var(--radius-sm); display: inline-block; max-width: 500px; line-height: 1.7;
}
.footer-gambling a { color: var(--orange); }
.footer-copy { margin-top: var(--sp-16); }

/* ── Legal page styles ────────────────────────────────────────────────── */
.legal-page { max-width: 720px; margin: 0 auto; padding: var(--sp-20) 0; }
.legal-page h1 {
  font-family: var(--display); font-size: 22px; color: var(--text);
  margin-bottom: var(--sp-6); letter-spacing: 0.5px;
}
.legal-page .legal-updated {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
  margin-bottom: var(--sp-32);
}
.legal-page h2 {
  font-family: var(--sans); font-size: var(--text-base); color: var(--text);
  margin: var(--sp-24) 0 var(--sp-8); font-weight: 600;
  padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border);
}
.legal-page p, .legal-page li {
  font-family: var(--sans); font-size: var(--text-sm); color: var(--muted2);
  line-height: 1.8; margin-bottom: var(--sp-10);
}
.legal-page ul { padding-left: var(--sp-20); }
.legal-page .legal-back {
  background: none; border: 1px solid var(--border); color: var(--muted2);
  padding: var(--sp-6) var(--sp-16); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 11px; cursor: pointer; margin-bottom: var(--sp-20);
  transition: all 0.15s;
}
.legal-page .legal-back:hover { border-color: var(--green); color: var(--green); }
.legal-page .contact-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-24); margin-top: var(--sp-16);
}
.legal-page .contact-card a { color: var(--green); text-decoration: none; }

/* ── Toast notifications ──────────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 700;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto;
  font-family: var(--mono); font-size: 12px;
  padding: 12px 20px; border-radius: 10px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  animation: toastIn .3s ease, toastOut .3s ease 3.2s forwards;
  max-width: 360px; line-height: 1.4;
}
.toast.success { background: rgba(0,230,138,.12); color: var(--green); border-color: rgba(0,230,138,.25); }
.toast.error   { background: rgba(255,72,72,.12); color: var(--red);   border-color: rgba(255,72,72,.25); }
.toast.warn    { background: rgba(255,170,50,.12); color: var(--orange); border-color: rgba(255,170,50,.25); }
.toast.info    { background: rgba(100,140,255,.12); color: #8ab4ff;   border-color: rgba(100,140,255,.25); }
@keyframes toastIn  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }
@media (max-width: 480px) {
  .toast { left: 12px !important; right: 12px !important; max-width: calc(100vw - 24px) !important; }
}

/* ── ACCESSIBILITY ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus-visible outlines for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── ANALYST TAKE CARD STYLES ────────────────────────────────── */
.analyst-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-12);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.analyst-card:hover {
  border-color: var(--border2); transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.analyst-card-header { display: flex; align-items: center; gap: var(--sp-12); }
.analyst-card-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--s2);
  flex-shrink: 0;
}
.analyst-card-name { font-family: var(--sans); font-size: var(--text-base); font-weight: 700; color: var(--text); }
.analyst-card-tagline { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.analyst-card-prop {
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
  padding: var(--sp-10) var(--sp-12); background: var(--s2); border-radius: var(--radius-sm);
}
.analyst-card-player { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text); }
.analyst-card-line { font-family: var(--mono); font-size: var(--text-sm); font-weight: 700; }
.analyst-card-tier {
  font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted);
  background: var(--s3); padding: 2px var(--sp-6); border-radius: 4px;
}
.analyst-card-text {
  font-family: var(--sans); font-size: var(--text-sm); color: var(--muted2);
  line-height: 1.7; font-style: italic; flex: 1;
}
.analyst-card-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: var(--sp-8); border-top: 1px solid var(--border);
}
.analyst-card-verdict { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.analyst-card-result {
  padding: 3px var(--sp-8); border-radius: 4px; font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 700;
}
.analyst-card-votes {
  display: flex; align-items: center; gap: var(--sp-8);
  border-top: 1px solid var(--border); padding-top: var(--sp-10); margin-top: var(--sp-4);
}
.analyst-vote-btn {
  flex: 1; padding: 8px 0; border-radius: var(--radius-sm); font-family: var(--mono);
  font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border);
  background: var(--s2); color: var(--muted2); transition: all .15s; text-align: center;
}
.analyst-vote-btn:hover { border-color: var(--border2); color: var(--text); background: var(--s3); }
.analyst-vote-btn.active-agree { border-color: var(--green); background: rgba(0,230,138,0.12); color: var(--green); }
.analyst-vote-btn.active-disagree { border-color: var(--red); background: rgba(244,64,96,0.12); color: var(--red); }

/* ── ANALYST PAGE LAYOUT ────────────────────────────────────── */
.analyst-page-header {
  display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-24);
}
.analyst-page-icon { font-size: 28px; }
.analyst-page-title {
  font-family: var(--display); font-size: var(--text-xl); font-weight: 700;
  color: var(--text); letter-spacing: 1px;
}
.analyst-page-sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.analyst-page-sub a { color: var(--green); }
.analyst-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-16); margin-bottom: var(--sp-32);
}
.analyst-empty {
  text-align: center; padding: var(--sp-40); font-family: var(--mono);
  font-size: var(--text-sm); color: var(--muted2);
}

/* ── ANALYST LEADERBOARD ────────────────────────────────────── */
.analyst-lb-title {
  font-family: var(--display); font-size: var(--text-base); font-weight: 700;
  color: var(--text); letter-spacing: 1px; margin-bottom: var(--sp-12);
  display: flex; align-items: center; gap: var(--sp-8);
}
.analyst-lb-icon { font-size: 16px; }
.analyst-lb-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.analyst-lb-row {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-16); display: flex; align-items: center; gap: var(--sp-12);
  transition: border-color 0.15s;
}
.analyst-lb-row:hover { border-color: var(--border2); }
.analyst-lb-rank {
  font-family: var(--mono); font-size: var(--text-lg); color: var(--muted);
  width: 20px; text-align: center; flex-shrink: 0;
}
.analyst-lb-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--s2); flex-shrink: 0;
}
.analyst-lb-info { flex: 1; min-width: 0; }
.analyst-lb-name {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text);
}
.analyst-lb-meta {
  font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted);
}
.analyst-lb-stats { text-align: right; }
.analyst-lb-accuracy {
  font-family: var(--mono); font-size: var(--text-base); font-weight: 700;
}
.analyst-lb-record {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted2);
}

/* ── OPPORTUNITY SIGNALS ────────────────────────────────────── */
.opp-signal-card {
  display: flex; gap: var(--sp-12); align-items: flex-start;
  padding: var(--sp-16); border-radius: var(--radius-lg); min-width: 0;
}
.opp-signal-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.opp-signal-body { flex: 1; min-width: 0; }
.opp-signal-header {
  display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-4);
}
.opp-signal-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.opp-signal-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.opp-signal-detail {
  font-family: var(--mono); font-size: var(--text-sm); color: var(--text);
  line-height: 1.5; margin-bottom: 3px;
}
.opp-signal-impact {
  font-family: var(--sans); font-size: 11px; color: var(--muted2); line-height: 1.5;
}

/* ── LEAN PILL WATCHLIST BUTTONS ────────────────────────────── */
.lean-wl-btn-over {
  flex: 1; background: rgba(0,230,138,0.08); border: 1px solid rgba(0,230,138,0.2);
  border-radius: 3px; padding: 5px var(--sp-4); font-family: var(--mono);
  font-size: var(--text-xs); color: var(--green); cursor: pointer;
  letter-spacing: 0.3px; transition: all 0.15s;
}
.lean-wl-btn-over:hover { background: rgba(0,230,138,0.18); }
.lean-wl-btn-under {
  flex: 1; background: rgba(244,64,96,0.08); border: 1px solid rgba(244,64,96,0.2);
  border-radius: 3px; padding: 5px var(--sp-4); font-family: var(--mono);
  font-size: var(--text-xs); color: var(--red); cursor: pointer;
  letter-spacing: 0.3px; transition: all 0.15s;
}
.lean-wl-btn-under:hover { background: rgba(244,64,96,0.18); }

/* ── LOADING STATE ──────────────────────────────────────────── */
.loading-state {
  text-align: center; padding: 60px; font-family: var(--mono);
  font-size: var(--text-sm); color: var(--muted2);
}

/* ── COMMUNITY PAGE SHARED ──────────────────────────────────── */
.page-container {
  max-width: 900px; margin: 0 auto; padding: var(--sp-24) var(--sp-16);
}
.page-back-row { margin-bottom: var(--sp-16); }

/* ── VOTING PAGE ────────────────────────────────────────────── */
.voting-qotd {
  background: linear-gradient(135deg, rgba(0,230,138,0.04), rgba(96,165,250,0.04));
  border: 1px solid rgba(0,230,138,0.15); border-radius: var(--radius-xl);
  padding: var(--sp-32) var(--sp-24); text-align: center;
}
.voting-qotd-question {
  font-family: var(--sans); font-size: var(--text-xl); color: var(--text);
  font-weight: 600; line-height: 1.5; margin-bottom: var(--sp-6);
}
.voting-qotd-meta {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-20);
}
.voting-qotd-btns {
  display: flex; gap: var(--sp-12); justify-content: center; max-width: 320px; margin: 0 auto;
}
.voting-prop-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-16) 18px; margin-bottom: var(--sp-8);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-12); align-items: center;
  transition: border-color 0.15s;
}
.voting-prop-card:hover { border-color: var(--border2); }
.voting-prop-name {
  font-family: var(--sans); font-size: var(--text-base); font-weight: 600; color: var(--text);
}
.voting-prop-meta {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted2);
}
.voting-prop-line { font-family: var(--mono); font-size: var(--text-sm); font-weight: 700; margin-top: var(--sp-4); }
.voting-prop-line.over { color: var(--green); }
.voting-prop-line.under { color: var(--red); }
.voting-prop-score {
  font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted); margin-top: var(--sp-2);
}
.voting-prop-actions {
  display: flex; flex-direction: column; gap: var(--sp-4); min-width: 140px;
}
.voting-empty {
  text-align: center; padding: var(--sp-40);
}
.voting-empty-icon { font-size: 36px; margin-bottom: var(--sp-12); }
.voting-empty-title {
  font-family: var(--mono); font-size: 13px; color: var(--text); margin-bottom: var(--sp-6);
}
.voting-empty-sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
}
.voting-result-row {
  display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
}
.voting-result-icon {
  font-family: var(--mono); font-size: var(--text-base); font-weight: 700; width: 16px;
}
.voting-result-player {
  font-family: var(--mono); font-size: 11px; color: var(--text); flex: 1;
}
.voting-result-actual {
  font-family: var(--mono); font-size: var(--text-xs);
}

/* ── LEADERBOARD PAGE ───────────────────────────────────────── */
.lb-period-btns { display: flex; gap: var(--sp-4); }
.lb-period-btn {
  padding: var(--sp-4) var(--sp-10); border-radius: 4px; font-family: var(--mono);
  font-size: var(--text-xs); cursor: pointer; transition: all 0.15s; border: 1px solid var(--border);
  background: var(--s3); color: var(--muted2);
}
.lb-period-btn.active {
  background: rgba(0,230,138,0.1); border-color: rgba(0,230,138,0.3); color: var(--green);
}
.lb-empty { text-align: center; padding: 60px; }
.lb-empty-icon { font-size: 48px; margin-bottom: var(--sp-16); }
.lb-empty-title {
  font-family: var(--mono); font-size: var(--text-base); color: var(--text); margin-bottom: var(--sp-8);
}
.lb-empty-sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
}
.lb-podium { display: flex; gap: var(--sp-12); margin-bottom: var(--sp-24); justify-content: center; flex-wrap: wrap; }
.lb-podium-card {
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--sp-20); text-align: center; min-width: 120px; flex: 1; max-width: 200px;
  transition: all 0.2s;
}
.lb-podium-card:hover { border-color: var(--border2); }
.lb-podium-card.highlight { border-color: rgba(0,230,138,0.3); }
.lb-podium-card.gold { transform: scale(1.05); order: 0; }
.lb-podium-medal { font-size: 28px; margin-bottom: var(--sp-6); }
.lb-podium-name {
  font-family: var(--display); font-size: var(--text-base); color: var(--text); font-weight: 700; margin-bottom: var(--sp-4);
}
.lb-podium-pts {
  font-family: var(--mono); font-size: 22px; color: var(--green); font-weight: 700; margin-bottom: var(--sp-4);
}
.lb-podium-record {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted2);
}
.lb-podium-badges { margin-top: var(--sp-6); }
.lb-table-wrap {
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.lb-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.lb-table th {
  padding: var(--sp-10) var(--sp-12); text-align: left; color: var(--muted);
  font-size: var(--text-2xs); letter-spacing: 1px; border-bottom: 1px solid var(--border);
}
.lb-table th.right { text-align: right; }
.lb-table th.center { text-align: center; }
.lb-table td { padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--border); }
.lb-table td.right { text-align: right; }
.lb-table td.center { text-align: center; }
.lb-table tr.me { background: rgba(0,230,138,0.04); }
.lb-badge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-8);
}
.lb-badge-card {
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-10) var(--sp-12); display: flex; align-items: center; gap: var(--sp-10);
}
.lb-badge-icon { font-size: 22px; }
.lb-badge-name { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 600; }
.lb-badge-req { font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted2); }

/* ── PROFILE PAGE ───────────────────────────────────────────── */
.profile-page { max-width: 640px; }
.profile-header {
  display: flex; align-items: center; gap: var(--sp-16); margin-bottom: var(--sp-32);
}
.profile-avatar-wrap {
  position: relative; cursor: pointer;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
}
.profile-avatar-placeholder {
  width: 56px; height: 56px; border-radius: 50%; background: var(--s2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: var(--text-xl);
}
.profile-avatar-edit {
  position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--s1); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: var(--text-xs);
}
.profile-name {
  font-family: var(--display); font-size: 18px; color: var(--text);
}
.profile-username {
  font-family: var(--mono); font-size: 11px; color: var(--muted2);
}
.profile-joined {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
}
.profile-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--sp-10); margin-bottom: var(--sp-24);
}
.profile-stat-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-16); text-align: center;
}
.profile-stat-value {
  font-family: var(--display); font-size: var(--text-xl);
}
.profile-stat-label {
  font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted);
  letter-spacing: 0.5px; margin-top: var(--sp-4);
}
.profile-section {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: var(--sp-24);
}
.profile-section-title {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
  letter-spacing: 1px; margin-bottom: var(--sp-12); text-transform: uppercase;
}
.profile-section-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-8) 0; border-bottom: 1px solid var(--border);
}
.profile-section-row:last-child { border-bottom: none; }
.profile-section-label {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.profile-section-value {
  font-family: var(--mono); font-size: 11px; color: var(--text);
}
.profile-danger {
  background: rgba(255,72,72,.03); border: 1px solid rgba(255,72,72,.15);
  border-radius: var(--radius-lg); padding: 18px;
}
.profile-danger-title {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--red);
  letter-spacing: 1px; margin-bottom: var(--sp-12); text-transform: uppercase;
}
.profile-danger-text {
  font-family: var(--sans); font-size: 11px; color: var(--muted);
  margin-bottom: var(--sp-12); line-height: 1.5;
}
.profile-danger-btn {
  background: none; border: 1px solid var(--red); border-radius: var(--radius-sm);
  padding: var(--sp-6) var(--sp-16); color: var(--red); font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 700; cursor: pointer; letter-spacing: 0.5px;
  transition: all 0.15s;
}
.profile-danger-btn:hover { background: rgba(255,72,72,.08); }

/* ── VERDICT CARD ───────────────────────────────────────────── */
.verdict-card {
  margin-bottom: var(--sp-16); padding: var(--sp-12) var(--sp-16);
  background: rgba(255,255,255,0.02); border-radius: var(--radius-sm);
  display: flex; gap: var(--sp-12); align-items: flex-start;
}
.verdict-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.verdict-body { flex: 1; min-width: 0; }
.verdict-label {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 1px; margin-bottom: var(--sp-4); text-transform: uppercase;
}
.verdict-text {
  font-family: var(--mono); font-size: var(--text-sm); color: var(--text); line-height: 1.6;
}

/* ── MOBILE FONT FLOOR ────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard .lean-stat, .bs-header-sub, .bs-leg-detail, .bs-leg-signal,
  .bs-parlay-label, .bs-clear, .research-mode-sub, .hiw-badge, .hiw-desc,
  .analyst-card-tagline, .analyst-card-tier {
    font-size: var(--text-xs);
  }
}

/* ── ONBOARDING TOUR ───────────────────────────────────── */
.tour-overlay {
  position: fixed; inset: 0; z-index: 600; pointer-events: none;
}
.tour-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 590;
  transition: opacity 0.3s;
}
.tour-spotlight {
  position: absolute; border-radius: 10px; z-index: 600;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.65);
  transition: all 0.35s ease;
}
.tour-tooltip {
  position: absolute; z-index: 610; pointer-events: auto;
  background: var(--s1); border: 1px solid var(--green); border-radius: 12px;
  padding: 20px; max-width: 320px; min-width: 240px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(0,230,138,0.08);
  animation: tourFadeIn 0.25s ease;
}
@keyframes tourFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.tour-tooltip-step { font-family: var(--mono); font-size: 9px; color: var(--green); letter-spacing: 1.5px; margin-bottom: 8px; }
.tour-tooltip-title { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tour-tooltip-desc { font-family: var(--sans); font-size: 13px; color: var(--muted2); line-height: 1.6; margin-bottom: 16px; }
.tour-tooltip-actions { display: flex; justify-content: space-between; align-items: center; }
.tour-btn-next {
  background: var(--green); color: #000; border: none; border-radius: 6px;
  padding: 8px 20px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s;
}
.tour-btn-next:hover { background: #00ff9d; }
.tour-btn-skip {
  background: none; border: none; color: var(--muted); font-family: var(--mono);
  font-size: 10px; cursor: pointer;
}
.tour-btn-skip:hover { color: var(--muted2); }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transition: background 0.2s; }
.tour-dot.active { background: var(--green); }

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: rgba(8,11,18,0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid var(--border2);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}
.mobile-bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.15s;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.mobile-bottom-nav-item svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-bottom-nav-item.active {
  color: var(--green);
}
.mobile-bottom-nav-item:active {
  color: var(--green);
  transform: scale(0.95);
}
.mobile-bottom-nav-item .nav-badge {
  position: absolute;
  top: 2px; right: 6px;
  background: var(--tier-s);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

@media (max-width: 768px) {
  .mobile-bottom-nav { display: block; }
  /* Add bottom padding to dashboard so content isn't hidden behind nav */
  .dashboard { padding-bottom: max(90px, calc(60px + env(safe-area-inset-bottom, 0px) + 20px)) !important; }
  /* Move watchlist toggle above bottom nav */
  #watchlist-toggle { bottom: 72px; }
  #back-to-top { bottom: 72px; }
}

/* ── DENSE MODE ── */
.dense-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted2);
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s;
  background: none;
  border: none;
}
.dense-toggle:hover { color: var(--text); }
.dense-toggle .toggle-track {
  width: 28px;
  height: 14px;
  background: var(--s3);
  border-radius: 7px;
  position: relative;
  transition: background 0.2s;
  border: 1px solid var(--border2);
}
.dense-toggle .toggle-thumb {
  width: 10px;
  height: 10px;
  background: var(--muted2);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform 0.2s, background 0.2s;
}
.dense-toggle.active .toggle-track { background: rgba(0,230,138,0.15); border-color: rgba(0,230,138,0.3); }
.dense-toggle.active .toggle-thumb { transform: translateX(14px); background: var(--green); }

/* Dense mode overrides */
body.dense .card { border-radius: 8px; }
body.dense .card-header { padding: 8px 12px; }
body.dense .card-body { padding: 8px 12px; }
body.dense .card-title { font-size: 10px; }
body.dense .player-header { padding: 16px 20px; margin-bottom: 12px; }
body.dense .player-name { font-size: 18px !important; }
body.dense .grid-2, body.dense .grid-3 { gap: 10px; margin-bottom: 10px; }
body.dense .slate-card { padding: 10px 14px; margin-bottom: 6px; }
body.dense .slate-card-player { font-size: 13px; }
body.dense .slate-card-signals { font-size: 9px; margin-top: 3px; }
body.dense .lean-pill { padding: 8px 10px; }
body.dense .trend-table td, body.dense .game-log td { padding: 5px 6px; font-size: 11px; }
body.dense .odds-grid { gap: 5px; }
body.dense .search-hero { padding: 28px 32px 20px; }
body.dense .dashboard { padding: 0 24px 60px; }


/* ══════════════════════════════════════════════════════
   MOBILE UX POLISH — touch targets, modal overflow, nudge
══════════════════════════════════════════════════════ */

/* Vote buttons — larger touch target on mobile */
@media (pointer: coarse), (max-width: 768px) {
  .vote-btn {
    min-height: 44px;
    padding: 10px 0;
    font-size: 11px;
  }
}

/* Auth / profile modals — scrollable and padded correctly on small screens */
@media (max-width: 480px) {
  .username-modal-box {
    padding: 20px 18px;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 94%;
    border-radius: 12px;
  }
  /* Upgrade / limit modals */
  .hiw-modal {
    padding: 20px 16px !important;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Quota nudge banner — reflow on narrow screens */
@media (max-width: 480px) {
  #quota-nudge {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
    padding: 12px 14px;
  }
  #quota-nudge > div:first-child {
    width: 100%;
  }
}

.phase2-error {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--orange);
    padding: 12px 16px;
    background: rgba(255,165,0,0.05);
    border: 1px solid rgba(255,165,0,0.15);
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0.3px;
}