/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-page); color: var(--text-primary); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input { font-family: inherit; }
a { color: var(--color-accent); text-decoration: none; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-box { background:var(--bg-surface); border-radius:16px; padding:40px 32px; width:100%; max-width:360px; box-shadow:0 8px 32px rgba(0,0,0,.4); text-align:center; }
.login-logo { font-size:64px; margin-bottom:12px; }
.login-box h1 { font-size:22px; font-weight:700; margin-bottom:28px; color:var(--text-white); }
.login-box input { display:block; width:100%; padding:12px 16px; margin-bottom:14px; background:var(--bg-input); border:1px solid var(--border-panel); border-radius:10px; color:var(--text-white); font-size:16px; }
.login-box input:focus { outline:none; border-color:var(--color-accent); }
.login-box button { width:100%; padding:14px; background:var(--color-danger); border-radius:10px; color:var(--text-white); font-size:16px; font-weight:700; margin-top:4px; transition:background .2s; }
.login-box button:hover { background:var(--color-danger-dim); }
.error-msg { color:var(--color-danger); font-size:14px; margin-top:12px; min-height:20px; }

/* ── App Shell ─────────────────────────────────────────────────────────── */
#mainApp { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.app-header { background:var(--bg-surface); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border-panel); flex-shrink:0; }
.header-title { font-size:18px; font-weight:700; color:var(--text-white); }
.header-info { display:flex; gap:12px; font-size:13px; color:var(--text-secondary); align-items:center; }
.main-content { flex:1; overflow-y:auto; padding:12px; min-height:0; }
.bottom-nav { display:flex; background:var(--bg-surface); border-top:1px solid var(--border-panel); flex-shrink:0; position:sticky; bottom:0; z-index:100; }
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; padding:8px 4px 10px; color:var(--text-muted); font-size:10px; transition:color .15s; }
.nav-btn.active { color:var(--color-accent); }
.nav-icon { font-size:22px; margin-bottom:2px; }
.nav-label { font-size:10px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card { background:var(--bg-surface); border-radius:var(--radius-card); padding:16px; margin-bottom:12px; }
.card-title { font-size:14px; font-weight:600; color:var(--text-secondary); margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em; }

/* ── Standings ─────────────────────────────────────────────────────────── */
.standings-row { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-subtle); gap:12px; }
.standings-row:last-child { border-bottom:none; }
.standings-rank { width:28px; font-size:13px; color:var(--text-muted); text-align:center; }
.standings-name { flex:1; font-weight:600; font-size:15px; }
.standings-score { font-size:18px; font-weight:700; color:var(--color-accent); }
.standings-weekly { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ── Grid ──────────────────────────────────────────────────────────────── */
.grid-controls { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.grid-controls select { background:var(--bg-input); border:1px solid var(--border-panel); color:var(--text-white); padding:8px 12px; border-radius:var(--radius-btn); font-size:14px; }
.grid-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.grid-table { border-collapse:collapse; table-layout:fixed; font-size:11px; }
.grid-table th { background:var(--bg-input); padding:4px 2px; text-align:center; position:sticky; top:0; z-index:2; color:var(--text-secondary); font-weight:600; white-space:nowrap; width:28px; }
.grid-table th.team-col { position:sticky; left:0; z-index:3; text-align:center; width:32px; min-width:32px; }
.grid-table td { padding:0; text-align:center; border:1px solid var(--border-subtle); width:28px; height:24px; line-height:24px; white-space:nowrap; overflow:hidden; }
.grid-table td.team-col { position:sticky; left:0; background:var(--bg-surface); font-weight:700; font-size:10px; text-align:center; z-index:1; width:32px; min-width:32px; }
.cell-win    { background:var(--win-bg);  color:var(--win-text);  font-weight:700; }
.cell-loss   { background:var(--loss-bg); color:var(--loss-text); }
.cell-double { outline:2px solid var(--double-color); outline-offset:-2px; }
.cell-bye    { color:var(--bye-text); }
.cell-active { background:var(--pick-active-bg); color:var(--pick-active-text); animation:pulse 1.5s infinite; }
.cell-pick   { background:var(--pick-bg); color:var(--pick-text); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.week-header-active { color:var(--color-accent) !important; font-weight:800 !important; }
.grid-table tr.row-even td          { background:var(--bg-row-even); }
.grid-table tr.row-odd  td          { background:var(--bg-row-odd); }
.grid-table tr.row-even td.team-col { background:var(--bg-row-even); }
.grid-table tr.row-odd  td.team-col { background:var(--bg-row-odd); }

/* ── Matchups ──────────────────────────────────────────────────────────── */
.week-selector { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.week-selector button { background:var(--bg-input); color:var(--text-white); border:1px solid var(--border-panel); border-radius:6px; padding:4px 12px; font-size:13px; }
.week-selector span { font-size:14px; font-weight:700; color:var(--text-white); }
.matchup-card { background:var(--bg-surface); border-radius:6px; padding:3px 8px; margin-bottom:3px; display:flex; align-items:center; gap:6px; overflow:hidden; }
.matchup-card:nth-child(even) { background:var(--bg-surface-alt); }
.matchup-main { flex:1; min-width:0; }
.matchup-teams { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.matchup-team { flex:1; text-align:center; }
.matchup-abbr { font-size:12px; font-weight:800; line-height:1; }
.team-logo { width:22px; height:22px; object-fit:contain; display:block; margin:0 auto 1px; }
.matchup-score { font-size:13px; font-weight:800; color:var(--text-white); text-align:center; white-space:nowrap; }
.matchup-status-col { width:60px; flex-shrink:0; font-size:9px; color:var(--text-muted); text-align:center; line-height:1.3; }
.matchup-status-col.score-live  { color:var(--live-color); font-weight:700; }
.matchup-status-col.score-final { color:var(--text-very-faint); }
.matchup-pickers { display:flex; justify-content:space-between; font-size:9px; color:var(--text-secondary); margin-top:1px; }
.pick-btn { padding:3px 8px; border-radius:6px; border:1px solid var(--border-panel); color:var(--text-secondary); font-size:11px; font-weight:600; }
.pick-btn.picked { background:var(--pick-bg); border-color:var(--color-accent); color:var(--color-accent); }
.pick-btn.double { background:var(--double-bg); border-color:var(--double-color); color:var(--double-color); }
.locked-badge { background:var(--color-danger); color:var(--text-white); border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700; }
.team-win    .matchup-abbr { color:var(--win-text); }
.team-loss   .matchup-abbr { color:var(--loss-text); }
.team-active .matchup-abbr { color:var(--live-color); }

/* ── Matchup pickers layout ─────────────────────────────────────────────── */
.matchup-row { display:flex; align-items:center; gap:4px; }
.picker-names { flex:1; display:flex; flex-direction:column; min-width:0; }
.away-names { align-items:flex-end; }
.home-names { align-items:flex-start; }
.picker-pill { display:inline-block; font-size:11px; padding:1px 5px; border-radius:3px; background:var(--bg-surface-alt); color:var(--text-secondary); white-space:nowrap; margin:1px; }
.picker-name { display:inline-block; background:var(--pill-bg); border-radius:3px; padding:1px 4px; margin:1px; font-size:10px; }
.pill-win  { background:var(--pill-win-bg);  color:var(--pill-win-text); }
.pill-loss { background:var(--pill-loss-bg); color:var(--pill-loss-text); }
.pill-row       { display:flex; flex-wrap:wrap; gap:2px; justify-content:inherit; margin-bottom:1px; }
.pill-row-away  { justify-content:flex-end; }
.pill-row-home  { justify-content:flex-start; }
.both-sides { border-left:3px solid var(--color-gold); border-right:3px solid var(--color-gold); }

/* ── Team as pick button ────────────────────────────────────────────────── */
.team-pick-btn { background:none; border:1px solid var(--border-panel); border-radius:6px; padding:3px 6px; cursor:pointer; text-align:center; flex:1; }
.team-pick-btn:hover { border-color:var(--color-accent); }
.team-pick-btn.picked { background:var(--pick-bg); border-color:var(--color-accent); }
.team-pick-btn.double { background:var(--double-bg); border-color:var(--double-color); }
.team-pick-btn.team-win    .matchup-abbr { color:var(--win-text); }
.team-pick-btn.team-loss   .matchup-abbr { color:var(--loss-text); }
.team-pick-btn.team-active .matchup-abbr { color:var(--live-color); }

/* ── Scoreboard ────────────────────────────────────────────────────────── */
.score-card { background:var(--bg-surface); border-radius:var(--radius-card); padding:12px 16px; margin-bottom:8px; }
.score-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.score-logo { width:32px; text-align:center; font-size:11px; font-weight:700; color:var(--text-secondary); }
.score-name { flex:1; font-size:14px; font-weight:600; }
.score-pts { font-size:22px; font-weight:800; width:48px; text-align:right; }
.score-divider { border:none; border-top:1px solid var(--border-subtle); margin:4px 0; }
.score-status { font-size:11px; color:var(--text-muted); text-align:center; margin-top:4px; }
.score-live   { color:var(--color-accent); }
.score-final  { color:var(--text-muted); }
.score-winner { color:var(--color-success); }

/* ── Schedule ──────────────────────────────────────────────────────────── */
.schedule-week { margin-bottom:20px; }
.schedule-week-title { font-size:14px; font-weight:700; color:var(--color-accent); margin-bottom:8px; padding:4px 0; border-bottom:1px solid var(--border-panel); }
.schedule-game { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border-subtle); }
.schedule-game:last-child { border-bottom:none; }

/* ── Account ───────────────────────────────────────────────────────────── */
.account-name   { font-size:24px; font-weight:700; margin-bottom:4px; }
.account-league { font-size:14px; color:var(--text-muted); margin-bottom:20px; }
.stat-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle); font-size:14px; }
.stat-val { font-weight:700; color:var(--color-accent); }
.btn-signout { background:var(--color-danger); color:var(--text-white); border-radius:10px; padding:12px 24px; font-size:15px; font-weight:700; margin-top:20px; width:100%; }

/* ── Status bar ─────────────────────────────────────────────────────────── */
.status-bar { display:flex; align-items:center; gap:10px; padding:4px 12px; background:var(--bg-deep); border-bottom:1px solid var(--border-subtle); font-size:11px; flex-wrap:wrap; }
.status-bar .pill { padding:1px 8px; border-radius:4px; font-weight:700; font-size:11px; }
.commit-btn { margin-left:auto; padding:2px 12px; border-radius:5px; border:1px solid var(--color-success); background:var(--win-bg-dark); color:var(--color-success); font-size:11px; font-weight:700; cursor:pointer; }
.commit-btn.uncommitted { border-color:var(--color-gold-dim); background:#2a2a1a; color:var(--color-gold-dim); }

/* ── Pills ──────────────────────────────────────────────────────────────── */
.pill        { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }
.pill-open   { background:#1a3a1a; color:var(--color-success); }
.pill-locked { background:#3a1a1a; color:var(--color-danger); }

/* ── Team blobs ─────────────────────────────────────────────────────────── */
.team-blob { display:inline-block; width:28px; height:18px; line-height:18px; border-radius:3px; margin:1px; font-size:10px; font-weight:700; text-align:center; overflow:hidden; }

/* ── Loading / Misc ────────────────────────────────────────────────────── */
.loading { text-align:center; padding:40px; color:var(--text-muted); font-size:14px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:400px) {
  .matchup-abbr  { font-size:18px; }
  .matchup-score { font-size:22px; }
}