/* ============================================
   ALLDAY EDGE - App Dashboard Styles
   Premium MLB DFS Analytics Tool
   Psychology: Green = Money, Gold = Winner
   ============================================ */

/* === VARIABLES === */
:root {
  --bg: #060e1a;
  --bg2: #0b1623;
  --bg3: #0f1d2f;
  --card: #0b1623;
  --line: #1e293b;
  --text: #e8f0fa;
  --muted: #64748b;
  --green: #00C2FF;
  --green-dim: rgba(0,194,255,.12);
  --gold: #ffd000;
  --gold-dim: rgba(255,208,0,.12);
  --red: #ff3b3b;
  --red-dim: rgba(255,59,59,.12);
  --blue: #00C2FF;
  --blue-dim: rgba(0,194,255,.12);
  --purple: #7B61FF;
  --purple-dim: rgba(123,97,255,.12);
  --orange: #ff9f43;
  --accent: #7B61FF;
  --accent-dim: rgba(123,97,255,.12);
  --primary: #00C2FF;
  --primary-dim: rgba(0,194,255,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.3);
}

/* === RESET === */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── APP BACKGROUND IMAGE ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('./images/app-bg.jpg') center center / cover no-repeat;
  z-index: -2;
  pointer-events: none;
}
/* Dark overlay so UI stays readable */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,14,26,.82) 0%,
    rgba(6,14,26,.75) 40%,
    rgba(6,14,26,.85) 100%
  );
  z-index: -1;
  pointer-events: none;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,194,255,.2); border-radius: 3px; }

/* === AUTH GATE === */
#authGate { position: fixed; inset: 0; z-index: 10000; background: rgba(5,11,20,.97); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); }
#authGate.hidden { display: none; }
.ag-box { background: linear-gradient(180deg,#0f2038,#091525); border: 1px solid rgba(0,194,255,.2); border-radius: 24px; padding: 40px 36px 32px; max-width: 480px; width: 100%; box-shadow: 0 32px 80px rgba(0,0,0,.6); }
.ag-brand { font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; color: #00C2FF; font-weight: 900; margin-bottom: 8px; font-family: 'Barlow Condensed', sans-serif; }
.ag-box h2 { margin: 0 0 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 36px; letter-spacing: 1px; text-transform: uppercase; }
.ag-box p { color: #94a3b8; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.ag-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: #64748b; font-weight: 800; margin-bottom: 5px; }
.ag-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(55,98,145,.4); background: #060e1a; color: #e8f0fa; font-size: 14px; margin-bottom: 14px; }
.ag-input:focus { outline: none; border-color: rgba(0,194,255,.5); box-shadow: 0 0 12px rgba(0,194,255,.1); }
.ag-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ag-btn { flex: 1; padding: 14px 16px; border-radius: 12px; border: none; font-weight: 800; font-size: 14px; cursor: pointer; transition: all .2s; }
.ag-btn.primary { background: linear-gradient(135deg,#00C2FF,#0099d4); color: #060e1a; }
.ag-btn.primary:hover { box-shadow: 0 0 20px rgba(0,194,255,.4); }
.ag-btn.secondary { background: rgba(255,255,255,.06); color: #e8f0fa; border: 1px solid rgba(255,255,255,.1); }
.ag-btn.full { width: 100%; margin-top: 10px; background: rgba(255,255,255,.04); color: #94a3b8; border: 1px solid rgba(255,255,255,.08); }
.ag-divider { text-align: center; color: #334155; font-size: 12px; margin: 14px 0 12px; }
#agMsg { margin-top: 12px; font-size: 13px; padding: 8px 12px; border-radius: 8px; display: none; }
.ag-note { margin-top: 14px; font-size: 11px; color: #334155; text-align: center; }

/* === TOP BAR === */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(6,14,26,.80); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,194,255,.06); }
.topbar-inner { max-width: 100%; margin: 0 auto; padding: 12px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 240px; }
.logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#00C2FF,#0099d4); display: grid; place-items: center; font-size: 22px; box-shadow: 0 4px 16px rgba(0,194,255,.3); }
.title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; letter-spacing: 2px; font-size: 26px; color: #00C2FF; text-shadow: 0 0 20px rgba(0,194,255,.3); }
.subtitle { font-size: 10px; letter-spacing: 3px; color: var(--green); font-weight: 800; text-transform: uppercase; margin-top: 2px; opacity: .6; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.date-display { font-size: 12px; color: var(--muted); font-weight: 700; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.error { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* === BUTTONS & FIELDS === */
.field, .button, .small-field { border: 1px solid var(--line); background: var(--bg2); color: var(--text); border-radius: 10px; }
.field { padding: 10px 12px; }
.small-field { padding: 8px 10px; font-size: 12px; }
.button { padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; letter-spacing: .3px; }
.button:hover { border-color: #334155; transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg,var(--green),#0099d4); color: #060e1a; border: none; font-weight: 800; }
.button.primary:hover { box-shadow: 0 0 20px rgba(0,194,255,.3); }
.button.gold { background: linear-gradient(135deg,var(--gold),#ffb800); color: #060e1a; border: none; }
.button.danger { background: var(--red-dim); color: var(--red); border-color: rgba(255,59,59,.2); }

/* === LAYOUT === */
.app-body { display: flex; min-height: calc(100vh - 68px);  background: transparent; }

/* === SIDEBAR === */
.sidebar { width: 220px; flex-shrink: 0; background: rgba(6,14,26,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid rgba(0,194,255,.1); position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-section { padding: 18px 16px 6px; color: #334155; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.sidebar-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-radius: 10px; margin: 2px 8px; transition: all .2s; color: #64748b; font-size: 13px; font-weight: 600; }
.sidebar-nav-item:hover { background: rgba(0,194,255,.05); color: #e8f0fa; }
.sidebar-nav-item.active { background: rgba(0,194,255,.08); color: #00C2FF; font-weight: 700; border-left: 3px solid #00C2FF; }
.sidebar-nav-icon { font-size: 15px; width: 20px; text-align: center; }
.sidebar-badge { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 10px; margin-left: auto; }
.sidebar-badge.g { background: var(--green); color: #060e1a; }
.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid var(--line); }
.sidebar-footer-brand { color: var(--green); font-weight: 900; font-size: 12px; letter-spacing: 1px; }
.sidebar-footer-version { color: #334155; font-size: 10px; margin-top: 2px; }

/* === MAIN CONTENT === */
.main-content { flex: 1; overflow-x: hidden; padding: 24px; display: flex; flex-direction: column; gap: 20px; background: transparent; }

/* === CARDS === */
.card { background: linear-gradient(180deg,rgba(11,22,35,.98),rgba(8,16,28,.98)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.card-header { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.card-body { padding: 20px; }
.card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

/* === SECTION TITLES === */
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 16px; }
.section-title h2 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 30px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 900; }
.section-title .meta { color: var(--muted); font-size: 12px; }

/* === GRIDS === */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* === GAMES TAB === */
.game-card { padding: 20px; cursor: pointer; transition: all .25s; border-radius: 18px; border: 1px solid rgba(30,41,59,.5); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); position: relative; overflow: hidden; }
.game-card:hover { transform: translateY(-3px); border-color: rgba(0,194,255,.2); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.game-card.top-game { border-color: rgba(0,194,255,.35); }
.game-card.top-game::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#00C2FF,#0099d4); }
.game-score-bar { height: 6px; border-radius: 3px; background: var(--line); margin: 12px 0; overflow: hidden; }
.game-score-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
.run-score { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; line-height: 1; }
.run-score.high { color: var(--green); text-shadow: 0 0 20px rgba(0,194,255,.4); }
.run-score.medium { color: var(--gold); }
.run-score.low { color: var(--red); }
.game-teams { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.game-team { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.game-vs { color: var(--muted); font-size: 12px; font-weight: 700; }
.game-details { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.game-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.game-chip { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: var(--muted); }
.game-chip.weather { background: var(--blue-dim); color: var(--blue); border-color: rgba(0,194,255,.2); }
.game-chip.park { background: var(--green-dim); color: var(--green); border-color: rgba(0,194,255,.2); }
.game-chip.vegas { background: var(--gold-dim); color: var(--gold); border-color: rgba(255,208,0,.2); }

/* === PITCHING EDGE TAB === */
.pitcher-card { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.7),rgba(6,14,26,.4)); transition: all .25s; }
.pitcher-card:hover { border-color: rgba(0,194,255,.15); }
.pitcher-name { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.pitcher-team { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.pitcher-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.pitcher-stat { background: rgba(6,14,26,.5); border: 1px solid rgba(30,41,59,.4); border-radius: 10px; padding: 10px; text-align: center; }
.pitcher-stat .label { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pitcher-stat .value { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; margin-top: 4px; }
.arsenal-bar { margin: 6px 0; }
.arsenal-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.arsenal-track { height: 5px; background: var(--line); border-radius: 3px; }
.arsenal-fill { height: 100%; border-radius: 3px; }
.pitch-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin: 2px; }
.pitch-tag.fb { background: rgba(255,59,59,.1); color: #ff6b6b; border: 1px solid rgba(255,59,59,.15); }
.pitch-tag.sl { background: rgba(255,208,0,.1); color: #ffd000; border: 1px solid rgba(255,208,0,.15); }
.pitch-tag.cu { background: rgba(124,58,237,.1); color: #7B61FF; border: 1px solid rgba(124,58,237,.15); }
.pitch-tag.ch { background: rgba(0,212,106,.1); color: #22c55e; border: 1px solid rgba(0,212,106,.15); }

/* === SCOUTING TAB === */
.player-card { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.7),rgba(6,14,26,.3)); margin-bottom: 12px; transition: all .25s; cursor: pointer; align-items: start; }
.player-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); border-color: rgba(0,194,255,.15); }
.player-card.grade-a-plus { border-color: rgba(0,194,255,.3); box-shadow: 0 0 20px rgba(0,194,255,.06); }
.player-card.grade-a { border-color: rgba(0,170,238,.2); }
.player-card.grade-b-plus { border-color: rgba(255,208,0,.2); }
.player-avatar { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,rgba(0,194,255,.08),rgba(6,14,26,.6)); display: flex; align-items: center; justify-content: center; font-size: 28px; border: 1px solid rgba(30,41,59,.5); position: relative; }
.player-avatar .jersey { position: absolute; bottom: -4px; right: -4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; font-size: 9px; font-weight: 800; padding: 1px 4px; color: var(--muted); }
.player-name { font-weight: 800; font-size: 16px; }
.player-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.player-grade { text-align: right; }
.player-grade .grade { font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 900; line-height: 1; }
.player-grade .score { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.player-grade .fires { font-size: 14px; margin-top: 4px; letter-spacing: 1px; }
.grade-aplus { color: #00ff9c !important; text-shadow: 0 0 20px rgba(0,255,156,.6); }
.grade-a { color: #00C2FF !important; text-shadow: 0 0 14px rgba(0,194,255,.5); }
.grade-bplus { color: #ffe600 !important; text-shadow: 0 0 12px rgba(255,230,0,.4); }
.grade-b { color: #ffd000 !important; text-shadow: 0 0 10px rgba(255,208,0,.3); }
.grade-c { color: #ff9f43 !important; text-shadow: 0 0 8px rgba(255,159,67,.25); }
.grade-d { color: #ff5f6d !important; }
.grade-f { color: #ff3b3b !important; text-shadow: 0 0 16px rgba(255,59,59,.6); }

/* Grade glow animation for A+ */
@keyframes gradeGlow { 0%,100% { text-shadow: 0 0 15px rgba(0,255,156,.5); } 50% { text-shadow: 0 0 40px rgba(0,255,156,.9), 0 0 70px rgba(0,255,156,.3); } }
.grade-aplus-glow { animation: gradeGlow 2s ease-in-out infinite; }

/* Factor chips */
.factor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.factor-chip { padding: 8px 12px; border-radius: 10px; background: rgba(6,14,26,.4); border: 1px solid rgba(30,41,59,.4); font-size: 12px; }
.factor-chip .f-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.factor-chip .f-value { font-weight: 800; margin-top: 3px; }

/* Synopsis */
.synopsis { font-size: 12px; color: #94a3b8; line-height: 1.6; margin-top: 8px; padding: 10px 12px; background: rgba(0,194,255,.02); border-radius: 10px; border: 1px solid rgba(0,194,255,.06); }

/* === STACK RECS TAB === */
.stack-position { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); margin-bottom: 10px; align-items: center; transition: all .2s; }
.stack-position:hover { border-color: rgba(0,194,255,.15); }
.stack-pos-label { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; color: var(--green); letter-spacing: 1px; text-transform: uppercase; }
.stack-player { font-weight: 800; font-size: 16px; }
.stack-detail { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stack-salary { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--gold); text-align: right; }

/* === AI STACK TAB === */
.lineup-card { border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.7),rgba(6,14,26,.4)); overflow: hidden; }
.lineup-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.lineup-label { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--green); letter-spacing: 1px; }
.lineup-total { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--gold); }
.lineup-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; padding: 10px 20px; border-bottom: 1px solid rgba(30,41,59,.3); align-items: center; font-size: 13px; }
.lineup-row:last-child { border-bottom: none; }
.lineup-pos { font-weight: 800; color: var(--green); font-size: 12px; letter-spacing: .5px; }

/* === OPTIMIZER TAB === */
.opt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt-form .full { grid-column: 1 / -1; }
.opt-result { margin-top: 16px; }

/* === ALERTS TAB === */
.alert-item { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); margin-bottom: 10px; display: flex; gap: 14px; align-items: start; }
.alert-icon { font-size: 20px; flex-shrink: 0; }
.alert-content { flex: 1; }
.alert-title { font-weight: 700; font-size: 14px; }
.alert-body { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.alert-time { font-size: 11px; color: #334155; margin-top: 6px; }
.alert-item.injury { border-color: rgba(255,59,59,.2); }
.alert-item.weather { border-color: rgba(0,194,255,.2); }
.alert-item.lineup { border-color: rgba(0,194,255,.2); }
.alert-item.news { border-color: rgba(255,208,0,.2); }

/* === PRICING TAB === */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card { padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.8),rgba(6,14,26,.5)); position: relative; }
.price-card.featured { border-color: rgba(0,194,255,.35); box-shadow: 0 0 30px rgba(0,194,255,.1); }
.price-card .plan-name { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.price-card .plan-price { font-family: 'Barlow Condensed', sans-serif; font-size: 52px; font-weight: 900; margin: 8px 0; }
.price-card .plan-period { color: var(--muted); font-size: 14px; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0; }
.price-card li { padding: 8px 0; border-bottom: 1px solid rgba(30,41,59,.4); font-size: 14px; color: #cbd5e1; display: flex; align-items: center; gap: 8px; }

/* === TABLE === */
.table-wrap { overflow: auto; border-radius: 16px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 14px; border-bottom: 1px solid rgba(30,41,59,.3); text-align: left; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px; color: #64748b; font-weight: 800; background: rgba(6,14,26,.4); }
td { font-size: 13px; }

/* === TAGS === */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.tag.smash { background: var(--green-dim); color: #73ffbb; border: 1px solid rgba(0,194,255,.2); }
.tag.strong { background: var(--gold-dim); color: #ffe280; border: 1px solid rgba(255,208,0,.2); }
.tag.watch { background: var(--blue-dim); color: #8fc6ff; border: 1px solid rgba(0,194,255,.2); }
.tag.fade { background: var(--red-dim); color: #ff98a2; border: 1px solid rgba(255,59,59,.2); }

/* === PILLS === */
.pill { padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.pill.live { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,59,59,.2); }
.pill.preview { background: rgba(100,116,139,.08); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }

/* === SETTINGS === */
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.settings-card { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); }
.settings-card h3 { margin: 0 0 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; }
.settings-card label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 12px; }

/* === DISCLAIMER BAR === */
.disclaimer-bar { background: rgba(255,208,0,.03); border-top: 1px solid rgba(255,208,0,.1); padding: 10px 20px; text-align: center; font-size: 10px; color: #475569; line-height: 1.5; }
.disclaimer-bar a { color: var(--gold); }

/* === EMPTY/LOADING === */
.empty, .loading { padding: 40px; text-align: center; color: #64748b; }
.loading strong { color: var(--text); }

/* === STAT BOXES === */
.stat-box { padding: 14px; border-radius: 14px; background: rgba(6,14,26,.4); border: 1px solid rgba(30,41,59,.4); }
.stat-box .label { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.stat-box .value { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 900; margin-top: 6px; line-height: 1; }
.stat-box .detail { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .grid-3, .grid-4, .pricing-grid, .settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sidebar { display: none; }
  .app-body { flex-direction: column; }
  .grid-3, .grid-4, .grid-2, .pricing-grid, .settings-grid { grid-template-columns: 1fr; }
  .main-content { padding: 16px; }
  .topbar-inner { padding: 10px 14px; }
  .pitcher-stats { grid-template-columns: repeat(2, 1fr); }
  .player-card { grid-template-columns: 1fr auto; }
  .player-avatar { display: none; }
}
@media (max-width: 600px) {
  .toolbar { margin-left: 0; }
  .brand { min-width: auto; }
  .title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH — Visual Refinements v2.1
   Glow effects, micro-animations, refined cards, premium feel
   ═══════════════════════════════════════════════════════════════ */

/* === GLOBAL BACKGROUND TEXTURE === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* background removed - using app-bg.jpg */
  pointer-events: none;
  z-index: 0;
}

/* === SIDEBAR POLISH === */
.sidebar {
  background: linear-gradient(180deg, #0b1623 0%, #081019 100%);
  border-right: 1px solid rgba(0,194,255,.06);
}
.sidebar-nav-item {
  position: relative;
  overflow: hidden;
}
.sidebar-nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,194,255,.06), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.sidebar-nav-item:hover::before { opacity: 1; }
.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(0,194,255,.1), rgba(0,194,255,.02));
  border-left: 3px solid #00C2FF;
  box-shadow: inset 4px 0 12px rgba(0,194,255,.06);
}
.sidebar-nav-item.active .sidebar-nav-icon {
  filter: drop-shadow(0 0 4px rgba(0,194,255,.5));
}
.sidebar-badge.g {
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  box-shadow: 0 0 8px rgba(0,194,255,.3);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0,194,255,.2); }
  50% { box-shadow: 0 0 14px rgba(0,194,255,.5); }
}

/* === TOPBAR POLISH === */
.topbar {
  background: linear-gradient(180deg, rgba(6,14,26,.97), rgba(6,14,26,.92));
  border-bottom: 1px solid rgba(0,194,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.logo {
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  box-shadow: 0 4px 20px rgba(0,194,255,.35);
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,194,255,.3); }
  50% { box-shadow: 0 4px 28px rgba(0,194,255,.5), 0 0 40px rgba(0,194,255,.1); }
}
.status-dot {
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px var(--green); }
  50% { box-shadow: 0 0 14px var(--green), 0 0 24px rgba(0,194,255,.2); }
}

/* === CARD PREMIUM EFFECTS === */
.card {
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
  border: 1px solid rgba(30,41,59,.5);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* === GAME CARDS PREMIUM === */
.game-card {
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.4));
  border: 1px solid rgba(30,41,59,.4);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0,194,255,.03), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.game-card:hover::after { opacity: 1; }
.game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,194,255,.2);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(0,194,255,.04);
}
.game-card.top-game {
  border-color: rgba(0,194,255,.3);
  box-shadow: 0 0 30px rgba(0,194,255,.08), inset 0 0 40px rgba(0,194,255,.01);
}
.game-card.top-game::before {
  height: 3px;
  background: linear-gradient(90deg, #00C2FF, #0099d4, #00C2FF);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.game-score-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(30,41,59,.6);
  overflow: hidden;
}
.game-score-fill {
  border-radius: 4px;
  box-shadow: 0 0 8px currentColor;
  transition: width 1s cubic-bezier(.22,1,.36,1);
}
.run-score {
  font-size: 52px;
  letter-spacing: -1px;
}
.run-score.high {
  filter: drop-shadow(0 0 12px rgba(0,194,255,.3));
}
.game-team {
  font-size: 24px;
  letter-spacing: 2px;
}
.game-chip {
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.game-chip:hover { transform: translateY(-1px); }

/* === PLAYER CARD PREMIUM === */
.player-card {
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.3));
  border: 1px solid rgba(30,41,59,.4);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.player-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0,194,255,.04), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.player-card:hover::after { opacity: 1; }
.player-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  border-color: rgba(0,194,255,.15);
}
.player-card.grade-a-plus {
  border-color: rgba(0,194,255,.35);
  box-shadow: 0 0 25px rgba(0,194,255,.08), inset 0 0 30px rgba(0,194,255,.01);
}
.player-card.grade-a-plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00C2FF, #0099d4, #00C2FF);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.player-avatar {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,194,255,.08), rgba(0,194,255,.05));
  border: 1px solid rgba(30,41,59,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  font-size: 30px;
}
.player-name {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .3px;
}
.player-grade .grade {
  font-size: 44px;
  letter-spacing: -1px;
}
.player-grade .fires {
  font-size: 16px;
  letter-spacing: 2px;
}

/* === GRADE GLOW ENHANCED === */
.grade-aplus {
  color: #00C2FF !important;
  text-shadow: 0 0 20px rgba(0,194,255,.6), 0 0 40px rgba(0,194,255,.2);
}
.grade-a { color: #00aaee !important; text-shadow: 0 0 14px rgba(0,170,238,.4); }
.grade-bplus { color: #ffd000 !important; text-shadow: 0 0 14px rgba(255,208,0,.4); }
.grade-b { color: #f59e0b !important; text-shadow: 0 0 8px rgba(245,158,11,.2); }
.grade-c { color: #ff9f43 !important; text-shadow: 0 0 6px rgba(255,159,67,.15); }
.grade-d { color: #ff5f6d !important; }
.grade-f { color: #ff3b3b !important; text-shadow: 0 0 8px rgba(255,59,59,.2); }

@keyframes gradeGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(0,194,255,.5), 0 0 40px rgba(0,194,255,.15); }
  50% { text-shadow: 0 0 35px rgba(0,194,255,.8), 0 0 70px rgba(0,194,255,.25), 0 0 100px rgba(0,194,255,.08); }
}

/* === FACTOR CHIPS PREMIUM === */
.factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.factor-chip {
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(13,24,40,.5), rgba(6,14,26,.3));
  border: 1px solid rgba(30,41,59,.35);
  font-size: 12px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.factor-chip:hover {
  border-color: rgba(0,194,255,.12);
  transform: translateY(-1px);
}
.factor-chip .f-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 4px;
}
.factor-chip .f-value {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
}

/* === SYNOPSIS PREMIUM === */
.synopsis {
  font-size: 13px;
  color: #b0c4d8;
  line-height: 1.7;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0,194,255,.03), rgba(0,194,255,.02));
  border-radius: 14px;
  border: 1px solid rgba(0,194,255,.08);
  border-left: 3px solid rgba(0,194,255,.2);
}

/* === PITCHER CARD PREMIUM === */
.pitcher-card {
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.4));
  border: 1px solid rgba(30,41,59,.4);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  margin-bottom: 16px;
}
.pitcher-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,194,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.pitcher-stat {
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(6,14,26,.4));
  border: 1px solid rgba(30,41,59,.4);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  transition: all .2s;
}
.pitcher-stat:hover {
  border-color: rgba(0,194,255,.1);
  transform: translateY(-1px);
}
.pitcher-stat .value {
  font-size: 26px;
  margin-top: 6px;
}

/* === TAGS PREMIUM === */
.tag {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.tag:hover { transform: translateY(-1px); }
.tag.smash {
  background: linear-gradient(135deg, rgba(0,194,255,.12), rgba(0,194,255,.06));
  color: #73ffbb;
  border: 1px solid rgba(0,194,255,.25);
  box-shadow: 0 0 12px rgba(0,194,255,.06);
}
.tag.strong {
  background: linear-gradient(135deg, rgba(255,208,0,.12), rgba(255,208,0,.06));
  color: #ffe280;
  border: 1px solid rgba(255,208,0,.25);
}
.tag.fade {
  background: linear-gradient(135deg, rgba(255,59,59,.12), rgba(255,59,59,.06));
  color: #ff98a2;
  border: 1px solid rgba(255,59,59,.25);
}

/* === BUTTONS PREMIUM === */
.button {
  border-radius: 12px;
  font-weight: 800;
  transition: all .25s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.button:hover::after { opacity: 1; }
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.button.primary {
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  box-shadow: 0 4px 16px rgba(0,194,255,.25);
}
.button.primary:hover {
  box-shadow: 0 6px 24px rgba(0,194,255,.35);
}
.button.gold {
  box-shadow: 0 4px 16px rgba(255,208,0,.2);
}
.button.gold:hover {
  box-shadow: 0 6px 24px rgba(255,208,0,.3);
}

/* === STACK POSITION PREMIUM === */
.stack-position {
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(8,16,28,.3));
  margin-bottom: 12px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.stack-position:hover {
  transform: translateX(4px);
  border-color: rgba(0,194,255,.15);
  box-shadow: -4px 0 20px rgba(0,194,255,.04);
}
.stack-pos-label {
  font-size: 22px;
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === LINEUP CARD PREMIUM === */
.lineup-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.4));
}
.lineup-header {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(0,194,255,.04), transparent);
  border-bottom: 1px solid rgba(0,194,255,.08);
}
.lineup-row {
  padding: 12px 22px;
  transition: background .2s;
}
.lineup-row:hover {
  background: rgba(0,194,255,.02);
}
.lineup-row:nth-child(even) {
  background: rgba(6,14,26,.2);
}

/* === STAT BOX PREMIUM === */
.stat-box {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.5), rgba(6,14,26,.3));
  border: 1px solid rgba(30,41,59,.4);
  transition: all .2s;
}
.stat-box:hover {
  border-color: rgba(0,194,255,.1);
  transform: translateY(-2px);
}

/* === ALERT PREMIUM === */
.alert-item {
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(8,16,28,.3));
  transition: all .2s;
}
.alert-item:hover {
  transform: translateX(4px);
}
.alert-item.injury { border-left: 3px solid var(--red); }
.alert-item.weather { border-left: 3px solid var(--blue); }
.alert-item.lineup { border-left: 3px solid var(--green); }
.alert-item.news { border-left: 3px solid var(--gold); }

/* === PILL PREMIUM === */
.pill.live {
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,59,59,.2); }
  50% { box-shadow: 0 0 12px rgba(255,59,59,.4); }
}

/* === SECTION TITLE ACCENT === */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #00C2FF, transparent);
  border-radius: 2px;
}

/* === LOADING ANIMATION === */
.loading {
  position: relative;
}
.loading::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  border: 3px solid rgba(0,194,255,.15);
  border-top-color: #00C2FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === EMPTY STATE === */
.empty {
  background: linear-gradient(180deg, rgba(13,24,40,.3), rgba(8,16,28,.2));
  border: 1px dashed rgba(30,41,59,.5);
  border-radius: 20px;
  padding: 48px 32px;
}

/* === SMOOTH PAGE TRANSITIONS === */
.main-content > section {
  animation: fadeInUp .4s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === SETTINGS CARD POLISH === */
.settings-card {
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(8,16,28,.3));
  border-radius: 20px;
  padding: 24px;
  transition: all .2s;
}
.settings-card:hover {
  border-color: rgba(0,194,255,.1);
}
.settings-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #e8f0fa, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === PRICING CARD POLISH === */
.price-card {
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
.price-card.featured:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 40px rgba(0,194,255,.1);
}

/* === DISCLAIMER POLISH === */
.disclaimer-bar {
  background: linear-gradient(90deg, rgba(255,208,0,.02), rgba(255,208,0,.04), rgba(255,208,0,.02));
  backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER CARD V2 — Premium Sports Card Style
   Inspired by Premier League / FIFA card design
   ═══════════════════════════════════════════════════════════════ */

.pcard-v2 {
  border-radius: 20px;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
  overflow: hidden;
  margin-bottom: 16px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.pcard-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.pcard-v2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.pcard-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 20px var(--accent-dim);
  border-color: var(--accent);
}
.pcard-v2.grade-a-plus {
  border-color: rgba(0,194,255,.3);
  box-shadow: 0 0 30px rgba(0,194,255,.08);
}
.pcard-v2.grade-a-plus::before {
  background: linear-gradient(90deg, #00C2FF, #0099d4, #00C2FF);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* Top section: avatar + info + grade */
.pcard-top {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 20px 20px 16px;
  position: relative;
  z-index: 1;
}

/* Avatar */
.pcard-avatar {
  position: relative;
}
.pcard-silhouette {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-dim), rgba(6,14,26,.8));
  border: 2px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.pcard-lineup-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--accent);
  color: #060e1a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Player info */
.pcard-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.pcard-team-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}
.pcard-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-pos {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.pcard-salary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: #ffd000;
  margin-top: 2px;
}
.pcard-matchup {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: .5px;
}

/* Grade box */
.pcard-grade-box {
  text-align: center;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.pcard-grade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}
.pcard-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  margin-top: 2px;
}
.pcard-score-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #334155;
  text-transform: uppercase;
}
.pcard-fires {
  font-size: 14px;
  margin-top: 4px;
  letter-spacing: 2px;
}

/* Stat boxes at bottom (Premier League style) */
.pcard-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(30,41,59,.4);
  background: rgba(6,14,26,.4);
  position: relative;
  z-index: 1;
}
.pcard-stat {
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid rgba(30,41,59,.3);
  transition: background .2s;
}
.pcard-stat:last-child { border-right: none; }
.pcard-stat:hover { background: rgba(0,194,255,.03); }
.pcard-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.pcard-stat-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #475569;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Expandable 10-factor details */
.pcard-details {
  position: relative;
  z-index: 1;
}
.pcard-expand {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top: 1px solid rgba(30,41,59,.3);
  transition: all .2s;
  list-style: none;
}
.pcard-expand::-webkit-details-marker { display: none; }
.pcard-expand::before { content: '\u25BC '; font-size: 8px; }
.pcard-details[open] .pcard-expand::before { content: '\u25B2 '; }
.pcard-expand:hover {
  color: var(--green);
  background: rgba(0,194,255,.03);
}
.pcard-details[open] > .factor-grid,
.pcard-details[open] > .synopsis {
  padding: 0 20px;
  animation: fadeInUp .3s ease;
}
.pcard-details[open] > .synopsis {
  margin: 12px 20px 16px;
}
.pcard-details[open] > .factor-grid {
  padding-bottom: 8px;
}

/* Grid display for cards */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .pcard-top { grid-template-columns: 60px 1fr auto; gap: 12px; padding: 16px; }
  .pcard-silhouette { width: 56px; height: 56px; font-size: 28px; }
  .pcard-name { font-size: 20px; }
  .pcard-grade { font-size: 40px; }
  .pcard-stats { grid-template-columns: repeat(5, 1fr); }
  .pcard-stat-val { font-size: 18px; }
}
@media (max-width: 600px) {
  .pcard-top { grid-template-columns: 1fr auto; }
  .pcard-avatar { display: none; }
  .pcard-stats { grid-template-columns: repeat(3, 1fr); }
  .pcard-stat:nth-child(n+4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — SportX-inspired layout
   Live ticker, top players, attack targets, stats table
   ═══════════════════════════════════════════════════════════════ */

.dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section header */
.dash-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8f0fa;
  margin-bottom: 12px;
}
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}
.dash-dot.live {
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b;
  animation: dotPulse 1.5s ease-in-out infinite;
}
.dash-count {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}

/* Live Games Ticker */
.dash-ticker {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.dash-ticker::-webkit-scrollbar { height: 4px; }
.dash-ticker::-webkit-scrollbar-thumb { background: rgba(0,194,255,.15); border-radius: 2px; }
.dash-game {
  min-width: 160px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.8), rgba(8,16,28,.6));
  border: 1px solid rgba(30,41,59,.4);
  cursor: pointer;
  transition: all .25s;
}
.dash-game:hover {
  transform: translateY(-2px);
  border-color: rgba(0,194,255,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.dash-game.live {
  border-color: rgba(255,59,59,.3);
  box-shadow: 0 0 16px rgba(255,59,59,.06);
}
.dash-game.live::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff3b3b;
}
.dash-game.final { border-color: rgba(0,194,255,.15); }
.dash-game-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b3b;
  animation: dotPulse 1s ease-in-out infinite;
}
.dash-game-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-game-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}
.dash-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 800;
}

/* Dashboard grid */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Dashboard card */
.dash-card {
  border-radius: 20px;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.9), rgba(8,16,28,.95));
  overflow: hidden;
}
.dash-card-title {
  padding: 16px 20px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8f0fa;
  border-bottom: 1px solid rgba(30,41,59,.3);
}

/* Top Players */
.dash-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(30,41,59,.3);
}
.dash-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
  cursor: pointer;
  transition: all .2s;
}
.dash-player:hover {
  background: rgba(0,194,255,.03);
}
.dash-player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(6,14,26,.5);
  border: 2px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.dash-player-info {
  flex: 1;
  min-width: 0;
}
.dash-player-name {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-player-pos {
  font-size: 11px;
  color: #64748b;
}
.dash-player-grade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.dash-player-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #64748b;
  text-align: right;
}

/* Attack Targets (momentum bars) */
.dash-targets {
  padding: 8px 0;
}
.dash-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(30,41,59,.2);
  transition: background .2s;
}
.dash-target:last-child { border-bottom: none; }
.dash-target:hover { background: rgba(0,194,255,.02); }
.dash-target-info {
  width: 140px;
  flex-shrink: 0;
}
.dash-target-name {
  font-weight: 700;
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-target-opp {
  font-size: 11px;
  color: #64748b;
  display: block;
}
.dash-target-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(30,41,59,.5);
  overflow: hidden;
}
.dash-target-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .8s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 6px currentColor;
}
.dash-target-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  width: 32px;
  text-align: right;
}

/* Stats Table */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  min-width: auto;
}
.dash-table th {
  font-size: 10px;
  padding: 10px 14px;
  color: #475569;
  border-bottom: 1px solid rgba(30,41,59,.4);
  background: transparent;
}
.dash-table td {
  font-size: 13px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(30,41,59,.2);
}
.dash-table tr:hover td {
  background: rgba(0,194,255,.02);
}
.dash-table .mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
}

/* Slate Status Grid */
.dash-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(30,41,59,.3);
  padding: 0;
}
.dash-status-item {
  padding: 16px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
}
.dash-status-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.dash-status-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #475569;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 900px) {
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-players { grid-template-columns: 1fr; }
  .dash-status-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER AVATAR — Team Color Batter Silhouette
   ═══════════════════════════════════════════════════════════════ */

.pcard-silhouette {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--team-color, #1e293b), rgba(6,14,26,.8));
  border: 2px solid var(--team-color, #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 12px var(--team-color-dim, rgba(30,41,59,.3));
  position: relative;
  overflow: hidden;
}
.pcard-silhouette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.4));
  pointer-events: none;
}
.pcard-batter-svg {
  width: 44px;
  height: 55px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* Team color stripe on card */
.pcard-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--team-color, var(--accent)), var(--accent), transparent);
}

/* Also update dash player avatars */
.dash-player-avatar {
  background: linear-gradient(135deg, rgba(6,14,26,.5), rgba(6,14,26,.8));
  border: 2px solid;
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   DFS CARD — Dark fantasy card with batter silhouette
   Click to reveal full scouting report
   ═══════════════════════════════════════════════════════════════ */

.dfs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.dfs-card {
  cursor: pointer;
  position: relative;
}
.dfs-card-inner {
  border-radius: 16px;
  border: 1px solid rgba(30,41,59,.5);
  background: linear-gradient(180deg, #0d1828 0%, #070d16 100%);
  overflow: hidden;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.dfs-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid var(--glow);
  opacity: .15;
  pointer-events: none;
}
.dfs-card-inner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--glow-dim), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.dfs-card:hover .dfs-card-inner {
  transform: translateY(-6px);
  border-color: var(--glow);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 20px var(--glow-dim);
}
.dfs-card:hover .dfs-card-inner::after { opacity: 1; }
.dfs-card:hover .dfs-card-inner::before { opacity: .4; }

/* Header: team + pos */
.dfs-card-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px 0;
  position: relative;
  z-index: 1;
}
.dfs-card-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--glow);
  text-transform: uppercase;
}
.dfs-card-pos {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Grade badge */
.dfs-card-grade-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  z-index: 2;
  line-height: 1;
}

/* Batter body */
.dfs-card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  min-height: 140px;
  position: relative;
  z-index: 1;
}
.dfs-batter-svg {
  width: 80px;
  height: 104px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}

/* Name */
.dfs-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

/* Bottom stats */
.dfs-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(30,41,59,.4);
  background: rgba(6,14,26,.5);
  position: relative;
  z-index: 1;
}
.dfs-card-stat {
  padding: 8px 12px;
  text-align: center;
}
.dfs-card-stat:first-child {
  border-right: 1px solid rgba(30,41,59,.3);
}
.dfs-stat-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #475569;
  text-transform: uppercase;
}
.dfs-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}
.dfs-stat-value.gold { color: #ffd000; }

/* Score bar at very bottom */
.dfs-card-score-bar {
  height: 3px;
  background: rgba(30,41,59,.5);
}
.dfs-card-score-fill {
  height: 100%;
  transition: width .8s ease;
  box-shadow: 0 0 6px currentColor;
}

/* Scouting Report (hidden, shows on click) */
.scout-report {
  margin-bottom: 16px;
  grid-column: 1 / -1;
  animation: fadeInUp .3s ease;
}
.scout-report-inner {
  border-radius: 18px;
  border: 1px solid rgba(0,194,255,.15);
  background: linear-gradient(180deg, rgba(13,24,40,.98), rgba(8,16,28,.99));
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 20px rgba(0,194,255,.04);
}
.scout-report-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(30,41,59,.4);
}
.scout-report-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scout-report-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
.scout-report-grade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .dfs-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .dfs-card-body { min-height: 120px; }
  .dfs-batter-svg { width: 60px; height: 78px; }
}
@media (max-width: 600px) {
  .dfs-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   OVER/UNDER PARLAYS — Player Props
   ═══════════════════════════════════════════════════════════════ */

/* Pick cards (top parlay section) */
.ou-pick-card {
  border-radius: 14px;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.8), rgba(8,16,28,.6));
  padding: 14px 16px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.ou-pick-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ou-color);
  opacity: .6;
}
.ou-pick-card:hover {
  transform: translateY(-3px);
  border-color: var(--ou-color);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--ou-color) 15%, transparent);
}
.ou-pick-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 6px;
}
.ou-pick-verdict {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
}
.ou-pick-prop {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 8px;
}
.ou-pick-nums {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.ou-pick-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(30,41,59,.5);
  overflow: hidden;
}
.ou-pick-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .8s ease;
  box-shadow: 0 0 6px currentColor;
}

/* Props table */
.ou-table { min-width: 600px; }
.ou-table th { font-size: 10px; padding: 10px 12px; }
.ou-table td { font-size: 13px; padding: 10px 12px; }
.ou-table tr:hover td { background: rgba(0,194,255,.02); }
.ou-table .mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* O/U tag */
.ou-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMIZER — DK Classic Lineup Builder
   ═══════════════════════════════════════════════════════════════ */
.opt-row {
  display: grid;
  grid-template-columns: 50px 40px 1fr 60px 90px 80px 60px;
  gap: 8px;
  padding: 10px 20px;
  align-items: center;
  border-bottom: 1px solid rgba(30,41,59,.25);
  font-size: 13px;
  transition: background .15s;
}
.opt-cell-img { display: flex; align-items: center; justify-content: center; }
.opt-row:hover { background: rgba(0,194,255,.02); }
.opt-row:nth-child(even) { background: rgba(6,14,26,.15); }
.opt-row.opt-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #475569;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(30,41,59,.4);
  background: rgba(6,14,26,.3);
  padding: 8px 20px;
}
.opt-row.opt-header:hover { background: rgba(6,14,26,.3); }
.opt-pos {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 1px;
}
.opt-name { font-weight: 800; }
.opt-salary {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #ffd000;
}
.opt-proj {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #00C2FF;
}
@media (max-width: 700px) {
  .opt-row { grid-template-columns: 40px 1fr 80px 70px; }
  .opt-row .opt-cell-img,
  .opt-row .opt-cell:nth-child(4),
  .opt-row .opt-cell:nth-child(7) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BUDGET BEASTS — Salary Slider
   ═══════════════════════════════════════════════════════════════ */
.budget-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #00C2FF, #ffd000, #ff9f43, #ff3b3b);
  outline: none;
  cursor: pointer;
}
.budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd000;
  border: 3px solid #060e1a;
  box-shadow: 0 0 16px rgba(255,208,0,.5), 0 2px 8px rgba(0,0,0,.4);
  cursor: grab;
  transition: all .15s;
}
.budget-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 24px rgba(255,208,0,.7), 0 4px 12px rgba(0,0,0,.5);
}
.budget-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}
.budget-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd000;
  border: 3px solid #060e1a;
  box-shadow: 0 0 16px rgba(255,208,0,.5);
  cursor: grab;
}

/* Updated batter SVG sizing for new detailed silhouette */
.dfs-batter-svg {
  width: 85px;
  height: 120px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(200,210,224,.1));
}
.dfs-card-body {
  min-height: 150px;
}

/* Cartoon batter SVG — larger viewBox */
.dfs-batter-svg {
  width: 90px;
  height: 130px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
}
.dfs-card-body {
  min-height: 155px;
  padding: 4px 0;
}

/* AI-generated player avatar image */
.dfs-batter-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
  border-radius: 8px;
}

/* Dashboard game buttons */
.dash-game-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.8), rgba(8,16,28,.6));
  border: 1px solid rgba(30,41,59,.4);
  color: #e8f0fa;
  cursor: pointer;
  transition: all .25s;
  text-align: left;
  font-family: inherit;
}
.dash-game-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(0,194,255,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 12px rgba(0,194,255,.06);
}
.dash-game-btn.selected {
  border-color: #00C2FF;
  box-shadow: 0 0 20px rgba(0,194,255,.15);
  background: linear-gradient(180deg, rgba(0,194,255,.06), rgba(8,16,28,.8));
}
.dash-game-btn.live {
  border-color: rgba(255,59,59,.3);
}

/* Ensure main content is above body::before overlay */
.main-content { position: relative; z-index: 1; }
.topbar { position: relative; z-index: 50; }
.sidebar { position: relative; z-index: 10; }
.dash-game-btn { position: relative; z-index: 2; }


/* ==========================================================================
   ELITE PREMIUM OVERHAUL
   Dramatic visual upgrade — glassmorphism, animated gradients, glow effects
   ========================================================================== */

/* ------------------------------------------------------------------
   1. BACKGROUND — Animated gradient mesh
   ------------------------------------------------------------------ */
body {
  background: #050a12 !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* bg removed */
  animation: eliteBgShift 20s ease-in-out infinite alternate;
}
@keyframes eliteBgShift {
  0%   { opacity: .7; transform: scale(1); }
  50%  { opacity: 1;  transform: scale(1.08); }
  100% { opacity: .7; transform: scale(1); }
}

/* ------------------------------------------------------------------
   2. GLASSMORPHISM CARDS
   ------------------------------------------------------------------ */
.card,
.dash-card,
.lineup-card,
.dfs-card-inner,
.stat-card,
.matchup-card,
.projection-card,
.analysis-card {
  background: rgba(10,18,36,.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 .5px rgba(255,255,255,.06);
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.card:hover,
.dash-card:hover,
.lineup-card:hover,
.dfs-card-inner:hover,
.stat-card:hover,
.matchup-card:hover,
.projection-card:hover,
.analysis-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 .5px rgba(255,255,255,.08),
    0 0 30px rgba(0,255,135,.04);
}

/* ------------------------------------------------------------------
   3. TOPBAR UPGRADE
   ------------------------------------------------------------------ */
.topbar {
  background: rgba(8,14,28,.75) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: 0 1px 40px rgba(0,0,0,.4);
}
.topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,135,.25) 30%, rgba(0,120,255,.25) 70%, transparent);
  pointer-events: none;
}
.topbar .logo,
.topbar-brand,
.sidebar-brand {
  background: linear-gradient(135deg, #00ff87, #00b4ff, #00ff87);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: eliteLogoGrad 4s ease-in-out infinite;
}
@keyframes eliteLogoGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------------------
   4. SIDEBAR UPGRADE
   ------------------------------------------------------------------ */
.sidebar {
  background: rgba(6,12,24,.8) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,.04) !important;
}
.sidebar a,
.sidebar .nav-link,
.sidebar-link {
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
  border-radius: 8px;
  position: relative;
}
.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar-link:hover {
  background: rgba(0,255,135,.05) !important;
}
.sidebar a.active,
.sidebar .nav-link.active,
.sidebar-link.active,
.sidebar a.router-link-active,
.sidebar .nav-link.router-link-active {
  background: linear-gradient(90deg, rgba(0,255,135,.12), rgba(0,255,135,.03)) !important;
  box-shadow: inset 3px 0 0 0 #00ff87;
}

/* ------------------------------------------------------------------
   5. TYPOGRAPHY UPGRADE
   ------------------------------------------------------------------ */
.section-title,
.page-title,
h1.title,
h2.title,
.dash-section-title {
  background: linear-gradient(135deg, #00ff87 0%, #00b4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
.stat-value,
.dfs-proj-val,
.matchup-stat-val,
.lineup-pts {
  font-weight: 800 !important;
  letter-spacing: -.03em;
}
.text-muted,
.muted,
.sub-label,
.meta-text {
  color: rgba(255,255,255,.5) !important;
}

/* ------------------------------------------------------------------
   6. BUTTON UPGRADE
   ------------------------------------------------------------------ */
.btn-primary,
.btn-accent,
button[class*="primary"] {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0,255,135,.2),
    inset 0 1px 0 rgba(255,255,255,.1);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.btn-primary::before,
.btn-accent::before,
button[class*="primary"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.btn-primary:hover::before,
.btn-accent:hover::before,
button[class*="primary"]:hover::before {
  transform: translateX(100%);
}
.btn-primary:hover,
.btn-accent:hover,
button[class*="primary"]:hover {
  box-shadow:
    0 8px 24px rgba(0,255,135,.3),
    inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-1px);
}
.btn-gold,
button[class*="gold"] {
  box-shadow:
    0 4px 20px rgba(255,200,0,.25),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-gold:hover,
button[class*="gold"]:hover {
  box-shadow:
    0 8px 32px rgba(255,200,0,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
}
button, .btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ------------------------------------------------------------------
   7. GRADE COLORS UPGRADE
   ------------------------------------------------------------------ */
.grade-a-plus,
.grade[data-grade="A+"],
[class*="grade-a-plus"] {
  text-shadow: 0 0 12px rgba(0,255,135,.6), 0 0 4px rgba(0,255,135,.3);
  animation: eliteGradePulse 2.5s ease-in-out infinite;
}
@keyframes eliteGradePulse {
  0%, 100% { text-shadow: 0 0 12px rgba(0,255,135,.6), 0 0 4px rgba(0,255,135,.3); }
  50%      { text-shadow: 0 0 20px rgba(0,255,135,.8), 0 0 8px rgba(0,180,255,.4), 0 0 40px rgba(0,255,135,.2); }
}
.grade-a,
.grade-b,
.grade-c,
.grade-d,
.grade-f,
[class*="grade-"] {
  text-shadow: 0 0 8px currentColor;
  font-weight: 800 !important;
}
.fire-emoji,
[data-emoji="fire"],
.emoji-fire {
  filter: drop-shadow(0 0 6px rgba(255,100,0,.7)) drop-shadow(0 0 12px rgba(255,60,0,.4));
}

/* ------------------------------------------------------------------
   8. STAT BOXES
   ------------------------------------------------------------------ */
.stat-box,
.stat-cell,
.stat-mini,
.kpi-box {
  background: rgba(10,18,36,.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.stat-box::before,
.stat-cell::before,
.kpi-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #00ff87), rgba(0,180,255,.6));
  opacity: .7;
}
.stat-box .stat-value,
.stat-cell .value,
.kpi-box .kpi-value {
  text-shadow: 0 0 12px rgba(0,255,135,.3);
}

/* ------------------------------------------------------------------
   9. TABLE UPGRADES
   ------------------------------------------------------------------ */
table thead tr,
.table-header,
.tbl-head {
  background: linear-gradient(90deg, rgba(0,255,135,.08), rgba(0,120,255,.06)) !important;
}
table tbody tr:nth-child(even),
.table-row:nth-child(even) {
  background: rgba(255,255,255,.015) !important;
}
table tbody tr:nth-child(odd),
.table-row:nth-child(odd) {
  background: rgba(255,255,255,.005) !important;
}
table tbody tr:hover,
.table-row:hover {
  background: rgba(0,255,135,.06) !important;
  transition: background .2s ease;
}
table th {
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: .75em;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55) !important;
}

/* ------------------------------------------------------------------
   10. SCROLL / ENTRANCE ANIMATIONS
   ------------------------------------------------------------------ */
@keyframes eliteFadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content > section,
.main-content > div,
.main-content > .card,
.main-content > .dash-card,
.page-content > section {
  animation: eliteFadeSlideUp .5s cubic-bezier(.4,0,.2,1) both;
}
.main-content > :nth-child(1) { animation-delay: 0s; }
.main-content > :nth-child(2) { animation-delay: .06s; }
.main-content > :nth-child(3) { animation-delay: .12s; }
.main-content > :nth-child(4) { animation-delay: .14s; }
.main-content > :nth-child(5) { animation-delay: .18s; }
.main-content > :nth-child(6) { animation-delay: .22s; }
.main-content > :nth-child(7) { animation-delay: .26s; }
.main-content > :nth-child(8) { animation-delay: .30s; }

/* Staggered grid children */
.grid > *,
.card-grid > *,
.dash-grid > *,
.stats-grid > * {
  animation: eliteFadeSlideUp .4s cubic-bezier(.4,0,.2,1) both;
}
.grid > :nth-child(1), .card-grid > :nth-child(1), .dash-grid > :nth-child(1), .stats-grid > :nth-child(1) { animation-delay: .05s; }
.grid > :nth-child(2), .card-grid > :nth-child(2), .dash-grid > :nth-child(2), .stats-grid > :nth-child(2) { animation-delay: .10s; }
.grid > :nth-child(3), .card-grid > :nth-child(3), .dash-grid > :nth-child(3), .stats-grid > :nth-child(3) { animation-delay: .15s; }
.grid > :nth-child(4), .card-grid > :nth-child(4), .dash-grid > :nth-child(4), .stats-grid > :nth-child(4) { animation-delay: .20s; }
.grid > :nth-child(5), .card-grid > :nth-child(5), .dash-grid > :nth-child(5), .stats-grid > :nth-child(5) { animation-delay: .25s; }
.grid > :nth-child(6), .card-grid > :nth-child(6), .dash-grid > :nth-child(6), .stats-grid > :nth-child(6) { animation-delay: .30s; }

/* ------------------------------------------------------------------
   11. LOADING SPINNER — Dual-ring + pulsing text
   ------------------------------------------------------------------ */
@keyframes eliteDualRingSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes elitePulseText {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}
.loading-spinner,
.spinner,
.loader {
  width: 48px !important;
  height: 48px !important;
  border: 3px solid rgba(255,255,255,.08) !important;
  border-top-color: #00ff87 !important;
  border-right-color: #00b4ff !important;
  border-radius: 50% !important;
  animation: eliteDualRingSpin .8s linear infinite !important;
  background: none !important;
  box-shadow: 0 0 20px rgba(0,255,135,.15), inset 0 0 20px rgba(0,180,255,.08);
}
.loading-text,
.spinner-text {
  animation: elitePulseText 2s ease-in-out infinite;
  background: linear-gradient(135deg, #00ff87, #00b4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------
   12. RESPONSIVE POLISH
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn,
  button,
  .nav-link,
  .sidebar-link,
  .tab-btn,
  a.card {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing */
  .main-content {
    padding: 12px !important;
  }
  .card,
  .dash-card,
  .stat-box {
    border-radius: 12px !important;
  }

  /* Reduce heavy effects on mobile for performance */
  body::before {
    animation: none;
    opacity: .5;
  }
  .card:hover,
  .dash-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 8px !important;
  }
  .section-title,
  .page-title {
    font-size: 1.3rem !important;
  }
}

/* ==========================================================================
   END ELITE PREMIUM OVERHAUL
   ========================================================================== */
/* ============================================
   ALLDAY EDGE - App Dashboard Styles
   Premium MLB DFS Analytics Tool
   Psychology: Green = Money, Gold = Winner
   ============================================ */

/* === VARIABLES === */
:root {
  --bg: #060e1a;
  --bg2: #0b1623;
  --bg3: #0f1d2f;
  --card: #0b1623;
  --line: #1e293b;
  --text: #e8f0fa;
  --muted: #64748b;
  --green: #00C2FF;
  --green-dim: rgba(0,194,255,.12);
  --gold: #ffd000;
  --gold-dim: rgba(255,208,0,.12);
  --red: #ff3b3b;
  --red-dim: rgba(255,59,59,.12);
  --blue: #00C2FF;
  --blue-dim: rgba(0,194,255,.12);
  --purple: #7B61FF;
  --purple-dim: rgba(123,97,255,.12);
  --orange: #ff9f43;
  --accent: #7B61FF;
  --accent-dim: rgba(123,97,255,.12);
  --primary: #00C2FF;
  --primary-dim: rgba(0,194,255,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.3);
}

/* === RESET === */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── APP BACKGROUND IMAGE ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('./images/app-bg.jpg') center center / cover no-repeat;
  z-index: -2;
  pointer-events: none;
}
/* Dark overlay so UI stays readable */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,14,26,.82) 0%,
    rgba(6,14,26,.75) 40%,
    rgba(6,14,26,.85) 100%
  );
  z-index: -1;
  pointer-events: none;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,194,255,.2); border-radius: 3px; }

/* === AUTH GATE === */
#authGate { position: fixed; inset: 0; z-index: 10000; background: rgba(5,11,20,.97); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); }
#authGate.hidden { display: none; }
.ag-box { background: linear-gradient(180deg,#0f2038,#091525); border: 1px solid rgba(0,194,255,.2); border-radius: 24px; padding: 40px 36px 32px; max-width: 480px; width: 100%; box-shadow: 0 32px 80px rgba(0,0,0,.6); }
.ag-brand { font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; color: #00C2FF; font-weight: 900; margin-bottom: 8px; font-family: 'Barlow Condensed', sans-serif; }
.ag-box h2 { margin: 0 0 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 36px; letter-spacing: 1px; text-transform: uppercase; }
.ag-box p { color: #94a3b8; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.ag-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: #64748b; font-weight: 800; margin-bottom: 5px; }
.ag-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(55,98,145,.4); background: #060e1a; color: #e8f0fa; font-size: 14px; margin-bottom: 14px; }
.ag-input:focus { outline: none; border-color: rgba(0,194,255,.5); box-shadow: 0 0 12px rgba(0,194,255,.1); }
.ag-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ag-btn { flex: 1; padding: 14px 16px; border-radius: 12px; border: none; font-weight: 800; font-size: 14px; cursor: pointer; transition: all .2s; }
.ag-btn.primary { background: linear-gradient(135deg,#00C2FF,#0099d4); color: #060e1a; }
.ag-btn.primary:hover { box-shadow: 0 0 20px rgba(0,194,255,.4); }
.ag-btn.secondary { background: rgba(255,255,255,.06); color: #e8f0fa; border: 1px solid rgba(255,255,255,.1); }
.ag-btn.full { width: 100%; margin-top: 10px; background: rgba(255,255,255,.04); color: #94a3b8; border: 1px solid rgba(255,255,255,.08); }
.ag-divider { text-align: center; color: #334155; font-size: 12px; margin: 14px 0 12px; }
#agMsg { margin-top: 12px; font-size: 13px; padding: 8px 12px; border-radius: 8px; display: none; }
.ag-note { margin-top: 14px; font-size: 11px; color: #334155; text-align: center; }

/* === TOP BAR === */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(6,14,26,.80); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,194,255,.06); }
.topbar-inner { max-width: 100%; margin: 0 auto; padding: 12px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 240px; }
.logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#00C2FF,#0099d4); display: grid; place-items: center; font-size: 22px; box-shadow: 0 4px 16px rgba(0,194,255,.3); }
.title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; letter-spacing: 2px; font-size: 26px; color: #00C2FF; text-shadow: 0 0 20px rgba(0,194,255,.3); }
.subtitle { font-size: 10px; letter-spacing: 3px; color: var(--green); font-weight: 800; text-transform: uppercase; margin-top: 2px; opacity: .6; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.date-display { font-size: 12px; color: var(--muted); font-weight: 700; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.error { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* === BUTTONS & FIELDS === */
.field, .button, .small-field { border: 1px solid var(--line); background: var(--bg2); color: var(--text); border-radius: 10px; }
.field { padding: 10px 12px; }
.small-field { padding: 8px 10px; font-size: 12px; }
.button { padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; letter-spacing: .3px; }
.button:hover { border-color: #334155; transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg,var(--green),#0099d4); color: #060e1a; border: none; font-weight: 800; }
.button.primary:hover { box-shadow: 0 0 20px rgba(0,194,255,.3); }
.button.gold { background: linear-gradient(135deg,var(--gold),#ffb800); color: #060e1a; border: none; }
.button.danger { background: var(--red-dim); color: var(--red); border-color: rgba(255,59,59,.2); }

/* === LAYOUT === */
.app-body { display: flex; min-height: calc(100vh - 68px);  background: transparent; }

/* === SIDEBAR === */
.sidebar { width: 220px; flex-shrink: 0; background: rgba(6,14,26,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid rgba(0,194,255,.1); position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-section { padding: 18px 16px 6px; color: #334155; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.sidebar-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-radius: 10px; margin: 2px 8px; transition: all .2s; color: #64748b; font-size: 13px; font-weight: 600; }
.sidebar-nav-item:hover { background: rgba(0,194,255,.05); color: #e8f0fa; }
.sidebar-nav-item.active { background: rgba(0,194,255,.08); color: #00C2FF; font-weight: 700; border-left: 3px solid #00C2FF; }
.sidebar-nav-icon { font-size: 15px; width: 20px; text-align: center; }
.sidebar-badge { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 10px; margin-left: auto; }
.sidebar-badge.g { background: var(--green); color: #060e1a; }
.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid var(--line); }
.sidebar-footer-brand { color: var(--green); font-weight: 900; font-size: 12px; letter-spacing: 1px; }
.sidebar-footer-version { color: #334155; font-size: 10px; margin-top: 2px; }

/* === MAIN CONTENT === */
.main-content { flex: 1; overflow-x: hidden; padding: 24px; display: flex; flex-direction: column; gap: 20px; background: transparent; }

/* === CARDS === */
.card { background: linear-gradient(180deg,rgba(11,22,35,.98),rgba(8,16,28,.98)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.card-header { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.card-body { padding: 20px; }
.card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

/* === SECTION TITLES === */
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 16px; }
.section-title h2 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 30px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 900; }
.section-title .meta { color: var(--muted); font-size: 12px; }

/* === GRIDS === */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* === GAMES TAB === */
.game-card { padding: 20px; cursor: pointer; transition: all .25s; border-radius: 18px; border: 1px solid rgba(30,41,59,.5); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); position: relative; overflow: hidden; }
.game-card:hover { transform: translateY(-3px); border-color: rgba(0,194,255,.2); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.game-card.top-game { border-color: rgba(0,194,255,.35); }
.game-card.top-game::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#00C2FF,#0099d4); }
.game-score-bar { height: 6px; border-radius: 3px; background: var(--line); margin: 12px 0; overflow: hidden; }
.game-score-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
.run-score { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; line-height: 1; }
.run-score.high { color: var(--green); text-shadow: 0 0 20px rgba(0,194,255,.4); }
.run-score.medium { color: var(--gold); }
.run-score.low { color: var(--red); }
.game-teams { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.game-team { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.game-vs { color: var(--muted); font-size: 12px; font-weight: 700; }
.game-details { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.game-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.game-chip { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: var(--muted); }
.game-chip.weather { background: var(--blue-dim); color: var(--blue); border-color: rgba(0,194,255,.2); }
.game-chip.park { background: var(--green-dim); color: var(--green); border-color: rgba(0,194,255,.2); }
.game-chip.vegas { background: var(--gold-dim); color: var(--gold); border-color: rgba(255,208,0,.2); }

/* === PITCHING EDGE TAB === */
.pitcher-card { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.7),rgba(6,14,26,.4)); transition: all .25s; }
.pitcher-card:hover { border-color: rgba(0,194,255,.15); }
.pitcher-name { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.pitcher-team { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.pitcher-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.pitcher-stat { background: rgba(6,14,26,.5); border: 1px solid rgba(30,41,59,.4); border-radius: 10px; padding: 10px; text-align: center; }
.pitcher-stat .label { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pitcher-stat .value { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; margin-top: 4px; }
.arsenal-bar { margin: 6px 0; }
.arsenal-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.arsenal-track { height: 5px; background: var(--line); border-radius: 3px; }
.arsenal-fill { height: 100%; border-radius: 3px; }
.pitch-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin: 2px; }
.pitch-tag.fb { background: rgba(255,59,59,.1); color: #ff6b6b; border: 1px solid rgba(255,59,59,.15); }
.pitch-tag.sl { background: rgba(255,208,0,.1); color: #ffd000; border: 1px solid rgba(255,208,0,.15); }
.pitch-tag.cu { background: rgba(124,58,237,.1); color: #7B61FF; border: 1px solid rgba(124,58,237,.15); }
.pitch-tag.ch { background: rgba(0,212,106,.1); color: #22c55e; border: 1px solid rgba(0,212,106,.15); }

/* === SCOUTING TAB === */
.player-card { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.7),rgba(6,14,26,.3)); margin-bottom: 12px; transition: all .25s; cursor: pointer; align-items: start; }
.player-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); border-color: rgba(0,194,255,.15); }
.player-card.grade-a-plus { border-color: rgba(0,194,255,.3); box-shadow: 0 0 20px rgba(0,194,255,.06); }
.player-card.grade-a { border-color: rgba(0,170,238,.2); }
.player-card.grade-b-plus { border-color: rgba(255,208,0,.2); }
.player-avatar { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,rgba(0,194,255,.08),rgba(6,14,26,.6)); display: flex; align-items: center; justify-content: center; font-size: 28px; border: 1px solid rgba(30,41,59,.5); position: relative; }
.player-avatar .jersey { position: absolute; bottom: -4px; right: -4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; font-size: 9px; font-weight: 800; padding: 1px 4px; color: var(--muted); }
.player-name { font-weight: 800; font-size: 16px; }
.player-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.player-grade { text-align: right; }
.player-grade .grade { font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 900; line-height: 1; }
.player-grade .score { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.player-grade .fires { font-size: 14px; margin-top: 4px; letter-spacing: 1px; }
.grade-aplus { color: #00ff9c !important; text-shadow: 0 0 20px rgba(0,255,156,.6); }
.grade-a { color: #00C2FF !important; text-shadow: 0 0 14px rgba(0,194,255,.5); }
.grade-bplus { color: #ffe600 !important; text-shadow: 0 0 12px rgba(255,230,0,.4); }
.grade-b { color: #ffd000 !important; text-shadow: 0 0 10px rgba(255,208,0,.3); }
.grade-c { color: #ff9f43 !important; text-shadow: 0 0 8px rgba(255,159,67,.25); }
.grade-d { color: #ff5f6d !important; }
.grade-f { color: #ff3b3b !important; text-shadow: 0 0 16px rgba(255,59,59,.6); }

/* Grade glow animation for A+ */
@keyframes gradeGlow { 0%,100% { text-shadow: 0 0 15px rgba(0,255,156,.5); } 50% { text-shadow: 0 0 40px rgba(0,255,156,.9), 0 0 70px rgba(0,255,156,.3); } }
.grade-aplus-glow { animation: gradeGlow 2s ease-in-out infinite; }

/* Factor chips */
.factor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.factor-chip { padding: 8px 12px; border-radius: 10px; background: rgba(6,14,26,.4); border: 1px solid rgba(30,41,59,.4); font-size: 12px; }
.factor-chip .f-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.factor-chip .f-value { font-weight: 800; margin-top: 3px; }

/* Synopsis */
.synopsis { font-size: 12px; color: #94a3b8; line-height: 1.6; margin-top: 8px; padding: 10px 12px; background: rgba(0,194,255,.02); border-radius: 10px; border: 1px solid rgba(0,194,255,.06); }

/* === STACK RECS TAB === */
.stack-position { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); margin-bottom: 10px; align-items: center; transition: all .2s; }
.stack-position:hover { border-color: rgba(0,194,255,.15); }
.stack-pos-label { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; color: var(--green); letter-spacing: 1px; text-transform: uppercase; }
.stack-player { font-weight: 800; font-size: 16px; }
.stack-detail { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stack-salary { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--gold); text-align: right; }

/* === AI STACK TAB === */
.lineup-card { border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.7),rgba(6,14,26,.4)); overflow: hidden; }
.lineup-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.lineup-label { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--green); letter-spacing: 1px; }
.lineup-total { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--gold); }
.lineup-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; padding: 10px 20px; border-bottom: 1px solid rgba(30,41,59,.3); align-items: center; font-size: 13px; }
.lineup-row:last-child { border-bottom: none; }
.lineup-pos { font-weight: 800; color: var(--green); font-size: 12px; letter-spacing: .5px; }

/* === OPTIMIZER TAB === */
.opt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt-form .full { grid-column: 1 / -1; }
.opt-result { margin-top: 16px; }

/* === ALERTS TAB === */
.alert-item { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); margin-bottom: 10px; display: flex; gap: 14px; align-items: start; }
.alert-icon { font-size: 20px; flex-shrink: 0; }
.alert-content { flex: 1; }
.alert-title { font-weight: 700; font-size: 14px; }
.alert-body { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.alert-time { font-size: 11px; color: #334155; margin-top: 6px; }
.alert-item.injury { border-color: rgba(255,59,59,.2); }
.alert-item.weather { border-color: rgba(0,194,255,.2); }
.alert-item.lineup { border-color: rgba(0,194,255,.2); }
.alert-item.news { border-color: rgba(255,208,0,.2); }

/* === PRICING TAB === */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card { padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.8),rgba(6,14,26,.5)); position: relative; }
.price-card.featured { border-color: rgba(0,194,255,.35); box-shadow: 0 0 30px rgba(0,194,255,.1); }
.price-card .plan-name { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.price-card .plan-price { font-family: 'Barlow Condensed', sans-serif; font-size: 52px; font-weight: 900; margin: 8px 0; }
.price-card .plan-period { color: var(--muted); font-size: 14px; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0; }
.price-card li { padding: 8px 0; border-bottom: 1px solid rgba(30,41,59,.4); font-size: 14px; color: #cbd5e1; display: flex; align-items: center; gap: 8px; }

/* === TABLE === */
.table-wrap { overflow: auto; border-radius: 16px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 14px; border-bottom: 1px solid rgba(30,41,59,.3); text-align: left; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px; color: #64748b; font-weight: 800; background: rgba(6,14,26,.4); }
td { font-size: 13px; }

/* === TAGS === */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.tag.smash { background: var(--green-dim); color: #73ffbb; border: 1px solid rgba(0,194,255,.2); }
.tag.strong { background: var(--gold-dim); color: #ffe280; border: 1px solid rgba(255,208,0,.2); }
.tag.watch { background: var(--blue-dim); color: #8fc6ff; border: 1px solid rgba(0,194,255,.2); }
.tag.fade { background: var(--red-dim); color: #ff98a2; border: 1px solid rgba(255,59,59,.2); }

/* === PILLS === */
.pill { padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.pill.live { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,59,59,.2); }
.pill.preview { background: rgba(100,116,139,.08); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }

/* === SETTINGS === */
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.settings-card { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(11,22,35,.6),rgba(6,14,26,.3)); }
.settings-card h3 { margin: 0 0 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; }
.settings-card label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 12px; }

/* === DISCLAIMER BAR === */
.disclaimer-bar { background: rgba(255,208,0,.03); border-top: 1px solid rgba(255,208,0,.1); padding: 10px 20px; text-align: center; font-size: 10px; color: #475569; line-height: 1.5; }
.disclaimer-bar a { color: var(--gold); }

/* === EMPTY/LOADING === */
.empty, .loading { padding: 40px; text-align: center; color: #64748b; }
.loading strong { color: var(--text); }

/* === STAT BOXES === */
.stat-box { padding: 14px; border-radius: 14px; background: rgba(6,14,26,.4); border: 1px solid rgba(30,41,59,.4); }
.stat-box .label { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.stat-box .value { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 900; margin-top: 6px; line-height: 1; }
.stat-box .detail { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .grid-3, .grid-4, .pricing-grid, .settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sidebar { display: none; }
  .app-body { flex-direction: column; }
  .grid-3, .grid-4, .grid-2, .pricing-grid, .settings-grid { grid-template-columns: 1fr; }
  .main-content { padding: 16px; }
  .topbar-inner { padding: 10px 14px; }
  .pitcher-stats { grid-template-columns: repeat(2, 1fr); }
  .player-card { grid-template-columns: 1fr auto; }
  .player-avatar { display: none; }
}
@media (max-width: 600px) {
  .toolbar { margin-left: 0; }
  .brand { min-width: auto; }
  .title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH — Visual Refinements v2.1
   Glow effects, micro-animations, refined cards, premium feel
   ═══════════════════════════════════════════════════════════════ */

/* === GLOBAL BACKGROUND TEXTURE === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* bg removed */
  pointer-events: none;
  z-index: 0;
}

/* === SIDEBAR POLISH === */
.sidebar {
  background: linear-gradient(180deg, #0b1623 0%, #081019 100%);
  border-right: 1px solid rgba(0,194,255,.06);
}
.sidebar-nav-item {
  position: relative;
  overflow: hidden;
}
.sidebar-nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,194,255,.06), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.sidebar-nav-item:hover::before { opacity: 1; }
.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(0,194,255,.1), rgba(0,194,255,.02));
  border-left: 3px solid #00C2FF;
  box-shadow: inset 4px 0 12px rgba(0,194,255,.06);
}
.sidebar-nav-item.active .sidebar-nav-icon {
  filter: drop-shadow(0 0 4px rgba(0,194,255,.5));
}
.sidebar-badge.g {
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  box-shadow: 0 0 8px rgba(0,194,255,.3);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0,194,255,.2); }
  50% { box-shadow: 0 0 14px rgba(0,194,255,.5); }
}

/* === TOPBAR POLISH === */
.topbar {
  background: linear-gradient(180deg, rgba(6,14,26,.97), rgba(6,14,26,.92));
  border-bottom: 1px solid rgba(0,194,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.logo {
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  box-shadow: 0 4px 20px rgba(0,194,255,.35);
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,194,255,.3); }
  50% { box-shadow: 0 4px 28px rgba(0,194,255,.5), 0 0 40px rgba(0,194,255,.1); }
}
.status-dot {
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px var(--green); }
  50% { box-shadow: 0 0 14px var(--green), 0 0 24px rgba(0,194,255,.2); }
}

/* === CARD PREMIUM EFFECTS === */
.card {
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
  border: 1px solid rgba(30,41,59,.5);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* === GAME CARDS PREMIUM === */
.game-card {
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.4));
  border: 1px solid rgba(30,41,59,.4);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0,194,255,.03), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.game-card:hover::after { opacity: 1; }
.game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,194,255,.2);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(0,194,255,.04);
}
.game-card.top-game {
  border-color: rgba(0,194,255,.3);
  box-shadow: 0 0 30px rgba(0,194,255,.08), inset 0 0 40px rgba(0,194,255,.01);
}
.game-card.top-game::before {
  height: 3px;
  background: linear-gradient(90deg, #00C2FF, #0099d4, #00C2FF);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.game-score-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(30,41,59,.6);
  overflow: hidden;
}
.game-score-fill {
  border-radius: 4px;
  box-shadow: 0 0 8px currentColor;
  transition: width 1s cubic-bezier(.22,1,.36,1);
}
.run-score {
  font-size: 52px;
  letter-spacing: -1px;
}
.run-score.high {
  filter: drop-shadow(0 0 12px rgba(0,194,255,.3));
}
.game-team {
  font-size: 24px;
  letter-spacing: 2px;
}
.game-chip {
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.game-chip:hover { transform: translateY(-1px); }

/* === PLAYER CARD PREMIUM === */
.player-card {
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.3));
  border: 1px solid rgba(30,41,59,.4);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.player-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0,194,255,.04), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.player-card:hover::after { opacity: 1; }
.player-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  border-color: rgba(0,194,255,.15);
}
.player-card.grade-a-plus {
  border-color: rgba(0,194,255,.35);
  box-shadow: 0 0 25px rgba(0,194,255,.08), inset 0 0 30px rgba(0,194,255,.01);
}
.player-card.grade-a-plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00C2FF, #0099d4, #00C2FF);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.player-avatar {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,194,255,.08), rgba(0,194,255,.05));
  border: 1px solid rgba(30,41,59,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  font-size: 30px;
}
.player-name {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .3px;
}
.player-grade .grade {
  font-size: 44px;
  letter-spacing: -1px;
}
.player-grade .fires {
  font-size: 16px;
  letter-spacing: 2px;
}

/* === GRADE GLOW ENHANCED === */
.grade-aplus {
  color: #00C2FF !important;
  text-shadow: 0 0 20px rgba(0,194,255,.6), 0 0 40px rgba(0,194,255,.2);
}
.grade-a { color: #00aaee !important; text-shadow: 0 0 14px rgba(0,170,238,.4); }
.grade-bplus { color: #ffd000 !important; text-shadow: 0 0 14px rgba(255,208,0,.4); }
.grade-b { color: #f59e0b !important; text-shadow: 0 0 8px rgba(245,158,11,.2); }
.grade-c { color: #ff9f43 !important; text-shadow: 0 0 6px rgba(255,159,67,.15); }
.grade-d { color: #ff5f6d !important; }
.grade-f { color: #ff3b3b !important; text-shadow: 0 0 8px rgba(255,59,59,.2); }

@keyframes gradeGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(0,194,255,.5), 0 0 40px rgba(0,194,255,.15); }
  50% { text-shadow: 0 0 35px rgba(0,194,255,.8), 0 0 70px rgba(0,194,255,.25), 0 0 100px rgba(0,194,255,.08); }
}

/* === FACTOR CHIPS PREMIUM === */
.factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.factor-chip {
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(13,24,40,.5), rgba(6,14,26,.3));
  border: 1px solid rgba(30,41,59,.35);
  font-size: 12px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.factor-chip:hover {
  border-color: rgba(0,194,255,.12);
  transform: translateY(-1px);
}
.factor-chip .f-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 4px;
}
.factor-chip .f-value {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
}

/* === SYNOPSIS PREMIUM === */
.synopsis {
  font-size: 13px;
  color: #b0c4d8;
  line-height: 1.7;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0,194,255,.03), rgba(0,194,255,.02));
  border-radius: 14px;
  border: 1px solid rgba(0,194,255,.08);
  border-left: 3px solid rgba(0,194,255,.2);
}

/* === PITCHER CARD PREMIUM === */
.pitcher-card {
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.4));
  border: 1px solid rgba(30,41,59,.4);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  margin-bottom: 16px;
}
.pitcher-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,194,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.pitcher-stat {
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(6,14,26,.4));
  border: 1px solid rgba(30,41,59,.4);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  transition: all .2s;
}
.pitcher-stat:hover {
  border-color: rgba(0,194,255,.1);
  transform: translateY(-1px);
}
.pitcher-stat .value {
  font-size: 26px;
  margin-top: 6px;
}

/* === TAGS PREMIUM === */
.tag {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.tag:hover { transform: translateY(-1px); }
.tag.smash {
  background: linear-gradient(135deg, rgba(0,194,255,.12), rgba(0,194,255,.06));
  color: #73ffbb;
  border: 1px solid rgba(0,194,255,.25);
  box-shadow: 0 0 12px rgba(0,194,255,.06);
}
.tag.strong {
  background: linear-gradient(135deg, rgba(255,208,0,.12), rgba(255,208,0,.06));
  color: #ffe280;
  border: 1px solid rgba(255,208,0,.25);
}
.tag.fade {
  background: linear-gradient(135deg, rgba(255,59,59,.12), rgba(255,59,59,.06));
  color: #ff98a2;
  border: 1px solid rgba(255,59,59,.25);
}

/* === BUTTONS PREMIUM === */
.button {
  border-radius: 12px;
  font-weight: 800;
  transition: all .25s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.button:hover::after { opacity: 1; }
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.button.primary {
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  box-shadow: 0 4px 16px rgba(0,194,255,.25);
}
.button.primary:hover {
  box-shadow: 0 6px 24px rgba(0,194,255,.35);
}
.button.gold {
  box-shadow: 0 4px 16px rgba(255,208,0,.2);
}
.button.gold:hover {
  box-shadow: 0 6px 24px rgba(255,208,0,.3);
}

/* === STACK POSITION PREMIUM === */
.stack-position {
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(8,16,28,.3));
  margin-bottom: 12px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.stack-position:hover {
  transform: translateX(4px);
  border-color: rgba(0,194,255,.15);
  box-shadow: -4px 0 20px rgba(0,194,255,.04);
}
.stack-pos-label {
  font-size: 22px;
  background: linear-gradient(135deg, #00C2FF, #0099d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === LINEUP CARD PREMIUM === */
.lineup-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,16,28,.4));
}
.lineup-header {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(0,194,255,.04), transparent);
  border-bottom: 1px solid rgba(0,194,255,.08);
}
.lineup-row {
  padding: 12px 22px;
  transition: background .2s;
}
.lineup-row:hover {
  background: rgba(0,194,255,.02);
}
.lineup-row:nth-child(even) {
  background: rgba(6,14,26,.2);
}

/* === STAT BOX PREMIUM === */
.stat-box {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.5), rgba(6,14,26,.3));
  border: 1px solid rgba(30,41,59,.4);
  transition: all .2s;
}
.stat-box:hover {
  border-color: rgba(0,194,255,.1);
  transform: translateY(-2px);
}

/* === ALERT PREMIUM === */
.alert-item {
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(8,16,28,.3));
  transition: all .2s;
}
.alert-item:hover {
  transform: translateX(4px);
}
.alert-item.injury { border-left: 3px solid var(--red); }
.alert-item.weather { border-left: 3px solid var(--blue); }
.alert-item.lineup { border-left: 3px solid var(--green); }
.alert-item.news { border-left: 3px solid var(--gold); }

/* === PILL PREMIUM === */
.pill.live {
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,59,59,.2); }
  50% { box-shadow: 0 0 12px rgba(255,59,59,.4); }
}

/* === SECTION TITLE ACCENT === */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #00C2FF, transparent);
  border-radius: 2px;
}

/* === LOADING ANIMATION === */
.loading {
  position: relative;
}
.loading::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  border: 3px solid rgba(0,194,255,.15);
  border-top-color: #00C2FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === EMPTY STATE === */
.empty {
  background: linear-gradient(180deg, rgba(13,24,40,.3), rgba(8,16,28,.2));
  border: 1px dashed rgba(30,41,59,.5);
  border-radius: 20px;
  padding: 48px 32px;
}

/* === SMOOTH PAGE TRANSITIONS === */
.main-content > section {
  animation: fadeInUp .4s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === SETTINGS CARD POLISH === */
.settings-card {
  background: linear-gradient(180deg, rgba(13,24,40,.6), rgba(8,16,28,.3));
  border-radius: 20px;
  padding: 24px;
  transition: all .2s;
}
.settings-card:hover {
  border-color: rgba(0,194,255,.1);
}
.settings-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #e8f0fa, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === PRICING CARD POLISH === */
.price-card {
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
.price-card.featured:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 40px rgba(0,194,255,.1);
}

/* === DISCLAIMER POLISH === */
.disclaimer-bar {
  background: linear-gradient(90deg, rgba(255,208,0,.02), rgba(255,208,0,.04), rgba(255,208,0,.02));
  backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER CARD V2 — Premium Sports Card Style
   Inspired by Premier League / FIFA card design
   ═══════════════════════════════════════════════════════════════ */

.pcard-v2 {
  border-radius: 20px;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
  overflow: hidden;
  margin-bottom: 16px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.pcard-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.pcard-v2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.pcard-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 20px var(--accent-dim);
  border-color: var(--accent);
}
.pcard-v2.grade-a-plus {
  border-color: rgba(0,194,255,.3);
  box-shadow: 0 0 30px rgba(0,194,255,.08);
}
.pcard-v2.grade-a-plus::before {
  background: linear-gradient(90deg, #00C2FF, #0099d4, #00C2FF);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* Top section: avatar + info + grade */
.pcard-top {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 20px 20px 16px;
  position: relative;
  z-index: 1;
}

/* Avatar */
.pcard-avatar {
  position: relative;
}
.pcard-silhouette {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-dim), rgba(6,14,26,.8));
  border: 2px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.pcard-lineup-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--accent);
  color: #060e1a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Player info */
.pcard-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.pcard-team-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}
.pcard-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-pos {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.pcard-salary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: #ffd000;
  margin-top: 2px;
}
.pcard-matchup {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: .5px;
}

/* Grade box */
.pcard-grade-box {
  text-align: center;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.pcard-grade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}
.pcard-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  margin-top: 2px;
}
.pcard-score-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #334155;
  text-transform: uppercase;
}
.pcard-fires {
  font-size: 14px;
  margin-top: 4px;
  letter-spacing: 2px;
}

/* Stat boxes at bottom (Premier League style) */
.pcard-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(30,41,59,.4);
  background: rgba(6,14,26,.4);
  position: relative;
  z-index: 1;
}
.pcard-stat {
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid rgba(30,41,59,.3);
  transition: background .2s;
}
.pcard-stat:last-child { border-right: none; }
.pcard-stat:hover { background: rgba(0,194,255,.03); }
.pcard-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.pcard-stat-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #475569;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Expandable 10-factor details */
.pcard-details {
  position: relative;
  z-index: 1;
}
.pcard-expand {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top: 1px solid rgba(30,41,59,.3);
  transition: all .2s;
  list-style: none;
}
.pcard-expand::-webkit-details-marker { display: none; }
.pcard-expand::before { content: '\u25BC '; font-size: 8px; }
.pcard-details[open] .pcard-expand::before { content: '\u25B2 '; }
.pcard-expand:hover {
  color: var(--green);
  background: rgba(0,194,255,.03);
}
.pcard-details[open] > .factor-grid,
.pcard-details[open] > .synopsis {
  padding: 0 20px;
  animation: fadeInUp .3s ease;
}
.pcard-details[open] > .synopsis {
  margin: 12px 20px 16px;
}
.pcard-details[open] > .factor-grid {
  padding-bottom: 8px;
}

/* Grid display for cards */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .pcard-top { grid-template-columns: 60px 1fr auto; gap: 12px; padding: 16px; }
  .pcard-silhouette { width: 56px; height: 56px; font-size: 28px; }
  .pcard-name { font-size: 20px; }
  .pcard-grade { font-size: 40px; }
  .pcard-stats { grid-template-columns: repeat(5, 1fr); }
  .pcard-stat-val { font-size: 18px; }
}
@media (max-width: 600px) {
  .pcard-top { grid-template-columns: 1fr auto; }
  .pcard-avatar { display: none; }
  .pcard-stats { grid-template-columns: repeat(3, 1fr); }
  .pcard-stat:nth-child(n+4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — SportX-inspired layout
   Live ticker, top players, attack targets, stats table
   ═══════════════════════════════════════════════════════════════ */

.dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section header */
.dash-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8f0fa;
  margin-bottom: 12px;
}
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}
.dash-dot.live {
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b;
  animation: dotPulse 1.5s ease-in-out infinite;
}
.dash-count {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}

/* Live Games Ticker */
.dash-ticker {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.dash-ticker::-webkit-scrollbar { height: 4px; }
.dash-ticker::-webkit-scrollbar-thumb { background: rgba(0,194,255,.15); border-radius: 2px; }
.dash-game {
  min-width: 160px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.8), rgba(8,16,28,.6));
  border: 1px solid rgba(30,41,59,.4);
  cursor: pointer;
  transition: all .25s;
}
.dash-game:hover {
  transform: translateY(-2px);
  border-color: rgba(0,194,255,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.dash-game.live {
  border-color: rgba(255,59,59,.3);
  box-shadow: 0 0 16px rgba(255,59,59,.06);
}
.dash-game.live::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff3b3b;
}
.dash-game.final { border-color: rgba(0,194,255,.15); }
.dash-game-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b3b;
  animation: dotPulse 1s ease-in-out infinite;
}
.dash-game-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-game-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}
.dash-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 800;
}

/* Dashboard grid */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Dashboard card */
.dash-card {
  border-radius: 20px;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.9), rgba(8,16,28,.95));
  overflow: hidden;
}
.dash-card-title {
  padding: 16px 20px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8f0fa;
  border-bottom: 1px solid rgba(30,41,59,.3);
}

/* Top Players */
.dash-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(30,41,59,.3);
}
.dash-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
  cursor: pointer;
  transition: all .2s;
}
.dash-player:hover {
  background: rgba(0,194,255,.03);
}
.dash-player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(6,14,26,.5);
  border: 2px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.dash-player-info {
  flex: 1;
  min-width: 0;
}
.dash-player-name {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-player-pos {
  font-size: 11px;
  color: #64748b;
}
.dash-player-grade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.dash-player-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #64748b;
  text-align: right;
}

/* Attack Targets (momentum bars) */
.dash-targets {
  padding: 8px 0;
}
.dash-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(30,41,59,.2);
  transition: background .2s;
}
.dash-target:last-child { border-bottom: none; }
.dash-target:hover { background: rgba(0,194,255,.02); }
.dash-target-info {
  width: 140px;
  flex-shrink: 0;
}
.dash-target-name {
  font-weight: 700;
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-target-opp {
  font-size: 11px;
  color: #64748b;
  display: block;
}
.dash-target-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(30,41,59,.5);
  overflow: hidden;
}
.dash-target-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .8s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 6px currentColor;
}
.dash-target-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  width: 32px;
  text-align: right;
}

/* Stats Table */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  min-width: auto;
}
.dash-table th {
  font-size: 10px;
  padding: 10px 14px;
  color: #475569;
  border-bottom: 1px solid rgba(30,41,59,.4);
  background: transparent;
}
.dash-table td {
  font-size: 13px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(30,41,59,.2);
}
.dash-table tr:hover td {
  background: rgba(0,194,255,.02);
}
.dash-table .mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
}

/* Slate Status Grid */
.dash-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(30,41,59,.3);
  padding: 0;
}
.dash-status-item {
  padding: 16px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(13,24,40,.95), rgba(8,16,28,.98));
}
.dash-status-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.dash-status-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #475569;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 900px) {
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-players { grid-template-columns: 1fr; }
  .dash-status-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER AVATAR — Team Color Batter Silhouette
   ═══════════════════════════════════════════════════════════════ */

.pcard-silhouette {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--team-color, #1e293b), rgba(6,14,26,.8));
  border: 2px solid var(--team-color, #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 12px var(--team-color-dim, rgba(30,41,59,.3));
  position: relative;
  overflow: hidden;
}
.pcard-silhouette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.4));
  pointer-events: none;
}
.pcard-batter-svg {
  width: 44px;
  height: 55px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* Team color stripe on card */
.pcard-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--team-color, var(--accent)), var(--accent), transparent);
}

/* Also update dash player avatars */
.dash-player-avatar {
  background: linear-gradient(135deg, rgba(6,14,26,.5), rgba(6,14,26,.8));
  border: 2px solid;
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   DFS CARD — Dark fantasy card with batter silhouette
   Click to reveal full scouting report
   ═══════════════════════════════════════════════════════════════ */

.dfs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.dfs-card {
  cursor: pointer;
  position: relative;
}
.dfs-card-inner {
  border-radius: 16px;
  border: 1px solid rgba(30,41,59,.5);
  background: linear-gradient(180deg, #0d1828 0%, #070d16 100%);
  overflow: hidden;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.dfs-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid var(--glow);
  opacity: .15;
  pointer-events: none;
}
.dfs-card-inner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--glow-dim), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.dfs-card:hover .dfs-card-inner {
  transform: translateY(-6px);
  border-color: var(--glow);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 20px var(--glow-dim);
}
.dfs-card:hover .dfs-card-inner::after { opacity: 1; }
.dfs-card:hover .dfs-card-inner::before { opacity: .4; }

/* Header: team + pos */
.dfs-card-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px 0;
  position: relative;
  z-index: 1;
}
.dfs-card-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--glow);
  text-transform: uppercase;
}
.dfs-card-pos {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Grade badge */
.dfs-card-grade-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  z-index: 2;
  line-height: 1;
}

/* Batter body */
.dfs-card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  min-height: 140px;
  position: relative;
  z-index: 1;
}
.dfs-batter-svg {
  width: 80px;
  height: 104px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}

/* Name */
.dfs-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

/* Bottom stats */
.dfs-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(30,41,59,.4);
  background: rgba(6,14,26,.5);
  position: relative;
  z-index: 1;
}
.dfs-card-stat {
  padding: 8px 12px;
  text-align: center;
}
.dfs-card-stat:first-child {
  border-right: 1px solid rgba(30,41,59,.3);
}
.dfs-stat-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #475569;
  text-transform: uppercase;
}
.dfs-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}
.dfs-stat-value.gold { color: #ffd000; }

/* Score bar at very bottom */
.dfs-card-score-bar {
  height: 3px;
  background: rgba(30,41,59,.5);
}
.dfs-card-score-fill {
  height: 100%;
  transition: width .8s ease;
  box-shadow: 0 0 6px currentColor;
}

/* Scouting Report (hidden, shows on click) */
.scout-report {
  margin-bottom: 16px;
  grid-column: 1 / -1;
  animation: fadeInUp .3s ease;
}
.scout-report-inner {
  border-radius: 18px;
  border: 1px solid rgba(0,194,255,.15);
  background: linear-gradient(180deg, rgba(13,24,40,.98), rgba(8,16,28,.99));
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 20px rgba(0,194,255,.04);
}
.scout-report-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(30,41,59,.4);
}
.scout-report-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scout-report-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
.scout-report-grade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .dfs-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .dfs-card-body { min-height: 120px; }
  .dfs-batter-svg { width: 60px; height: 78px; }
}
@media (max-width: 600px) {
  .dfs-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   OVER/UNDER PARLAYS — Player Props
   ═══════════════════════════════════════════════════════════════ */

/* Pick cards (top parlay section) */
.ou-pick-card {
  border-radius: 14px;
  border: 1px solid rgba(30,41,59,.4);
  background: linear-gradient(180deg, rgba(13,24,40,.8), rgba(8,16,28,.6));
  padding: 14px 16px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.ou-pick-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ou-color);
  opacity: .6;
}
.ou-pick-card:hover {
  transform: translateY(-3px);
  border-color: var(--ou-color);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--ou-color) 15%, transparent);
}
.ou-pick-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 6px;
}
.ou-pick-verdict {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
}
.ou-pick-prop {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 8px;
}
.ou-pick-nums {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.ou-pick-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(30,41,59,.5);
  overflow: hidden;
}
.ou-pick-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .8s ease;
  box-shadow: 0 0 6px currentColor;
}

/* Props table */
.ou-table { min-width: 600px; }
.ou-table th { font-size: 10px; padding: 10px 12px; }
.ou-table td { font-size: 13px; padding: 10px 12px; }
.ou-table tr:hover td { background: rgba(0,194,255,.02); }
.ou-table .mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* O/U tag */
.ou-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMIZER — DK Classic Lineup Builder
   ═══════════════════════════════════════════════════════════════ */
.opt-row {
  display: grid;
  grid-template-columns: 50px 40px 1fr 60px 90px 80px 60px;
  gap: 8px;
  padding: 10px 20px;
  align-items: center;
  border-bottom: 1px solid rgba(30,41,59,.25);
  font-size: 13px;
  transition: background .15s;
}
.opt-cell-img { display: flex; align-items: center; justify-content: center; }
.opt-row:hover { background: rgba(0,194,255,.02); }
.opt-row:nth-child(even) { background: rgba(6,14,26,.15); }
.opt-row.opt-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #475569;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(30,41,59,.4);
  background: rgba(6,14,26,.3);
  padding: 8px 20px;
}
.opt-row.opt-header:hover { background: rgba(6,14,26,.3); }
.opt-pos {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 1px;
}
.opt-name { font-weight: 800; }
.opt-salary {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #ffd000;
}
.opt-proj {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #00C2FF;
}
@media (max-width: 700px) {
  .opt-row { grid-template-columns: 40px 1fr 80px 70px; }
  .opt-row .opt-cell-img,
  .opt-row .opt-cell:nth-child(4),
  .opt-row .opt-cell:nth-child(7) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BUDGET BEASTS — Salary Slider
   ═══════════════════════════════════════════════════════════════ */
.budget-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #00C2FF, #ffd000, #ff9f43, #ff3b3b);
  outline: none;
  cursor: pointer;
}
.budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd000;
  border: 3px solid #060e1a;
  box-shadow: 0 0 16px rgba(255,208,0,.5), 0 2px 8px rgba(0,0,0,.4);
  cursor: grab;
  transition: all .15s;
}
.budget-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 24px rgba(255,208,0,.7), 0 4px 12px rgba(0,0,0,.5);
}
.budget-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}
.budget-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd000;
  border: 3px solid #060e1a;
  box-shadow: 0 0 16px rgba(255,208,0,.5);
  cursor: grab;
}

/* Updated batter SVG sizing for new detailed silhouette */
.dfs-batter-svg {
  width: 85px;
  height: 120px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(200,210,224,.1));
}
.dfs-card-body {
  min-height: 150px;
}

/* Cartoon batter SVG — larger viewBox */
.dfs-batter-svg {
  width: 90px;
  height: 130px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
}
.dfs-card-body {
  min-height: 155px;
  padding: 4px 0;
}

/* AI-generated player avatar image */
.dfs-batter-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
  border-radius: 8px;
}

/* Dashboard game buttons */
.dash-game-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,24,40,.8), rgba(8,16,28,.6));
  border: 1px solid rgba(30,41,59,.4);
  color: #e8f0fa;
  cursor: pointer;
  transition: all .25s;
  text-align: left;
  font-family: inherit;
}
.dash-game-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(0,194,255,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 12px rgba(0,194,255,.06);
}
.dash-game-btn.selected {
  border-color: #00C2FF;
  box-shadow: 0 0 20px rgba(0,194,255,.15);
  background: linear-gradient(180deg, rgba(0,194,255,.06), rgba(8,16,28,.8));
}
.dash-game-btn.live {
  border-color: rgba(255,59,59,.3);
}

/* Ensure main content is above body::before overlay */
.main-content { position: relative; z-index: 1; }
.topbar { position: relative; z-index: 50; }
.sidebar { position: relative; z-index: 10; }
.dash-game-btn { position: relative; z-index: 2; }


/* ==========================================================================
   ELITE PREMIUM OVERHAUL
   Dramatic visual upgrade — glassmorphism, animated gradients, glow effects
   ========================================================================== */

/* ------------------------------------------------------------------
   1. BACKGROUND — Animated gradient mesh
   ------------------------------------------------------------------ */
body {
  background: #050a12 !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* bg removed */
  animation: eliteBgShift 20s ease-in-out infinite alternate;
}
@keyframes eliteBgShift {
  0%   { opacity: .7; transform: scale(1); }
  50%  { opacity: 1;  transform: scale(1.08); }
  100% { opacity: .7; transform: scale(1); }
}

/* ------------------------------------------------------------------
   2. GLASSMORPHISM CARDS
   ------------------------------------------------------------------ */
.card,
.dash-card,
.lineup-card,
.dfs-card-inner,
.stat-card,
.matchup-card,
.projection-card,
.analysis-card {
  background: rgba(10,18,36,.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 .5px rgba(255,255,255,.06);
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.card:hover,
.dash-card:hover,
.lineup-card:hover,
.dfs-card-inner:hover,
.stat-card:hover,
.matchup-card:hover,
.projection-card:hover,
.analysis-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 .5px rgba(255,255,255,.08),
    0 0 30px rgba(0,255,135,.04);
}

/* ------------------------------------------------------------------
   3. TOPBAR UPGRADE
   ------------------------------------------------------------------ */
.topbar {
  background: rgba(8,14,28,.75) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: 0 1px 40px rgba(0,0,0,.4);
}
.topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,135,.25) 30%, rgba(0,120,255,.25) 70%, transparent);
  pointer-events: none;
}
.topbar .logo,
.topbar-brand,
.sidebar-brand {
  background: linear-gradient(135deg, #00ff87, #00b4ff, #00ff87);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: eliteLogoGrad 4s ease-in-out infinite;
}
@keyframes eliteLogoGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------------------
   4. SIDEBAR UPGRADE
   ------------------------------------------------------------------ */
.sidebar {
  background: rgba(6,12,24,.8) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,.04) !important;
}
.sidebar a,
.sidebar .nav-link,
.sidebar-link {
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
  border-radius: 8px;
  position: relative;
}
.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar-link:hover {
  background: rgba(0,255,135,.05) !important;
}
.sidebar a.active,
.sidebar .nav-link.active,
.sidebar-link.active,
.sidebar a.router-link-active,
.sidebar .nav-link.router-link-active {
  background: linear-gradient(90deg, rgba(0,255,135,.12), rgba(0,255,135,.03)) !important;
  box-shadow: inset 3px 0 0 0 #00ff87;
}

/* ------------------------------------------------------------------
   5. TYPOGRAPHY UPGRADE
   ------------------------------------------------------------------ */
.section-title,
.page-title,
h1.title,
h2.title,
.dash-section-title {
  background: linear-gradient(135deg, #00ff87 0%, #00b4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
.stat-value,
.dfs-proj-val,
.matchup-stat-val,
.lineup-pts {
  font-weight: 800 !important;
  letter-spacing: -.03em;
}
.text-muted,
.muted,
.sub-label,
.meta-text {
  color: rgba(255,255,255,.5) !important;
}

/* ------------------------------------------------------------------
   6. BUTTON UPGRADE
   ------------------------------------------------------------------ */
.btn-primary,
.btn-accent,
button[class*="primary"] {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0,255,135,.2),
    inset 0 1px 0 rgba(255,255,255,.1);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.btn-primary::before,
.btn-accent::before,
button[class*="primary"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.btn-primary:hover::before,
.btn-accent:hover::before,
button[class*="primary"]:hover::before {
  transform: translateX(100%);
}
.btn-primary:hover,
.btn-accent:hover,
button[class*="primary"]:hover {
  box-shadow:
    0 8px 24px rgba(0,255,135,.3),
    inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-1px);
}
.btn-gold,
button[class*="gold"] {
  box-shadow:
    0 4px 20px rgba(255,200,0,.25),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-gold:hover,
button[class*="gold"]:hover {
  box-shadow:
    0 8px 32px rgba(255,200,0,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
}
button, .btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ------------------------------------------------------------------
   7. GRADE COLORS UPGRADE
   ------------------------------------------------------------------ */
.grade-a-plus,
.grade[data-grade="A+"],
[class*="grade-a-plus"] {
  text-shadow: 0 0 12px rgba(0,255,135,.6), 0 0 4px rgba(0,255,135,.3);
  animation: eliteGradePulse 2.5s ease-in-out infinite;
}
@keyframes eliteGradePulse {
  0%, 100% { text-shadow: 0 0 12px rgba(0,255,135,.6), 0 0 4px rgba(0,255,135,.3); }
  50%      { text-shadow: 0 0 20px rgba(0,255,135,.8), 0 0 8px rgba(0,180,255,.4), 0 0 40px rgba(0,255,135,.2); }
}
.grade-a,
.grade-b,
.grade-c,
.grade-d,
.grade-f,
[class*="grade-"] {
  text-shadow: 0 0 8px currentColor;
  font-weight: 800 !important;
}
.fire-emoji,
[data-emoji="fire"],
.emoji-fire {
  filter: drop-shadow(0 0 6px rgba(255,100,0,.7)) drop-shadow(0 0 12px rgba(255,60,0,.4));
}

/* ------------------------------------------------------------------
   8. STAT BOXES
   ------------------------------------------------------------------ */
.stat-box,
.stat-cell,
.stat-mini,
.kpi-box {
  background: rgba(10,18,36,.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.stat-box::before,
.stat-cell::before,
.kpi-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #00ff87), rgba(0,180,255,.6));
  opacity: .7;
}
.stat-box .stat-value,
.stat-cell .value,
.kpi-box .kpi-value {
  text-shadow: 0 0 12px rgba(0,255,135,.3);
}

/* ------------------------------------------------------------------
   9. TABLE UPGRADES
   ------------------------------------------------------------------ */
table thead tr,
.table-header,
.tbl-head {
  background: linear-gradient(90deg, rgba(0,255,135,.08), rgba(0,120,255,.06)) !important;
}
table tbody tr:nth-child(even),
.table-row:nth-child(even) {
  background: rgba(255,255,255,.015) !important;
}
table tbody tr:nth-child(odd),
.table-row:nth-child(odd) {
  background: rgba(255,255,255,.005) !important;
}
table tbody tr:hover,
.table-row:hover {
  background: rgba(0,255,135,.06) !important;
  transition: background .2s ease;
}
table th {
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: .75em;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55) !important;
}

/* ------------------------------------------------------------------
   10. SCROLL / ENTRANCE ANIMATIONS
   ------------------------------------------------------------------ */
@keyframes eliteFadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content > section,
.main-content > div,
.main-content > .card,
.main-content > .dash-card,
.page-content > section {
  animation: eliteFadeSlideUp .5s cubic-bezier(.4,0,.2,1) both;
}
.main-content > :nth-child(1) { animation-delay: 0s; }
.main-content > :nth-child(2) { animation-delay: .06s; }
.main-content > :nth-child(3) { animation-delay: .12s; }
.main-content > :nth-child(4) { animation-delay: .14s; }
.main-content > :nth-child(5) { animation-delay: .18s; }
.main-content > :nth-child(6) { animation-delay: .22s; }
.main-content > :nth-child(7) { animation-delay: .26s; }
.main-content > :nth-child(8) { animation-delay: .30s; }

/* Staggered grid children */
.grid > *,
.card-grid > *,
.dash-grid > *,
.stats-grid > * {
  animation: eliteFadeSlideUp .4s cubic-bezier(.4,0,.2,1) both;
}
.grid > :nth-child(1), .card-grid > :nth-child(1), .dash-grid > :nth-child(1), .stats-grid > :nth-child(1) { animation-delay: .05s; }
.grid > :nth-child(2), .card-grid > :nth-child(2), .dash-grid > :nth-child(2), .stats-grid > :nth-child(2) { animation-delay: .10s; }
.grid > :nth-child(3), .card-grid > :nth-child(3), .dash-grid > :nth-child(3), .stats-grid > :nth-child(3) { animation-delay: .15s; }
.grid > :nth-child(4), .card-grid > :nth-child(4), .dash-grid > :nth-child(4), .stats-grid > :nth-child(4) { animation-delay: .20s; }
.grid > :nth-child(5), .card-grid > :nth-child(5), .dash-grid > :nth-child(5), .stats-grid > :nth-child(5) { animation-delay: .25s; }
.grid > :nth-child(6), .card-grid > :nth-child(6), .dash-grid > :nth-child(6), .stats-grid > :nth-child(6) { animation-delay: .30s; }

/* ------------------------------------------------------------------
   11. LOADING SPINNER — Dual-ring + pulsing text
   ------------------------------------------------------------------ */
@keyframes eliteDualRingSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes elitePulseText {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}
.loading-spinner,
.spinner,
.loader {
  width: 48px !important;
  height: 48px !important;
  border: 3px solid rgba(255,255,255,.08) !important;
  border-top-color: #00ff87 !important;
  border-right-color: #00b4ff !important;
  border-radius: 50% !important;
  animation: eliteDualRingSpin .8s linear infinite !important;
  background: none !important;
  box-shadow: 0 0 20px rgba(0,255,135,.15), inset 0 0 20px rgba(0,180,255,.08);
}
.loading-text,
.spinner-text {
  animation: elitePulseText 2s ease-in-out infinite;
  background: linear-gradient(135deg, #00ff87, #00b4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------
   12. RESPONSIVE POLISH
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn,
  button,
  .nav-link,
  .sidebar-link,
  .tab-btn,
  a.card {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing */
  .main-content {
    padding: 12px !important;
  }
  .card,
  .dash-card,
  .stat-box {
    border-radius: 12px !important;
  }

  /* Reduce heavy effects on mobile for performance */
  body::before {
    animation: none;
    opacity: .5;
  }
  .card:hover,
  .dash-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 8px !important;
  }
  .section-title,
  .page-title {
    font-size: 1.3rem !important;
  }
}

/* ==========================================================================
   END ELITE PREMIUM OVERHAUL
   ========================================================================== */


/* === PROJECTIONS TAB === */

.proj-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.proj-status-pill.proj-ok {
  background: rgba(0, 255, 156, 0.12);
  color: #00ff9c;
  border: 1px solid rgba(0, 255, 156, 0.25);
}
.proj-status-pill.proj-loading {
  background: rgba(255, 208, 0, 0.10);
  color: #ffd000;
  border: 1px solid rgba(255, 208, 0, 0.25);
}
.proj-status-pill.proj-error {
  background: rgba(255, 95, 109, 0.10);
  color: #ff5f6d;
  border: 1px solid rgba(255, 95, 109, 0.25);
}

.projections-table { font-family: inherit; }
.projections-table .proj-th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b7d8e;
  padding: 10px 12px;
  border-bottom: 1px solid #111d2e;
  user-select: none;
  white-space: nowrap;
}
.projections-table .proj-th:hover { color: #00ff9c; }
.projections-table .proj-row { transition: background 0.15s; }
.projections-table .proj-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
.projections-table .proj-row:hover { background: #0d1a29; }
.projections-table .proj-td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e8f0fa;
  white-space: nowrap;
}

.projections-stack-card {
  padding: 14px 16px;
  background: linear-gradient(180deg, #0b1623 0%, #0d1a29 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 168px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.projections-stack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 255, 156, 0.10);
}
.projections-stack-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.projections-stack-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--muted, #6b7d8e);
}
.projections-stack-stats > div span {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.projections-stack-stats > div strong {
  font-size: 13px;
  color: #e8f0fa;
  font-weight: 700;
}

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

.proj-mode-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #0b1623;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.proj-mode-btn {
  background: transparent;
  border: none;
  color: #6b7d8e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.proj-mode-btn:hover { color: #e8f0fa; }
.proj-mode-btn.active {
  background: rgba(0, 255, 156, 0.12);
  color: #00ff9c;
}

.proj-stack-inline {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 6px;
  transition: background 0.15s;
}
.proj-stack-inline:hover {
  background: rgba(0, 255, 156, 0.04);
}