/* ═══════════════════════════════════════════════════════════
   F1X – Formula 1 Exchange · Styles
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161f;
  --bg-elevated: #1c1c28;
  --border: #2a2a3a;
  --border-active: #3a3a5a;
  --text-primary: #e8e8f0;
  --text-secondary: #8888a0;
  --text-muted: #555570;
  --accent-red: #e10600;
  --accent-red-dim: #a00400;
  --accent-yellow: #ffd700;
  --accent-green: #00d46a;
  --accent-blue: #0090ff;
  --accent-purple: #8b5cf6;
  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; }
body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); min-height: 100vh; }

/* ── Auth Screen ──────────────────────────────────────────── */
.auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem; background:radial-gradient(ellipse at 30% 20%,#1a0a0a 0%,var(--bg-primary) 60%); }
.auth-box { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; width:100%; max-width:420px; overflow:hidden; position:relative; }
.auth-brand { text-align:center; padding:2.5rem 2rem 1.5rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-card) 100%); }
.auth-brand .logo { font-family:var(--font-display); font-weight:700; font-size:2.8rem; letter-spacing:.08em; }
.auth-brand .logo .f1 { color:var(--accent-red); }
.auth-brand .logo .x  { color:var(--text-primary); }
.auth-brand .sub { font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.15em; margin-top:.4rem; }
.auth-tabs { display:flex; border-bottom:1px solid var(--border); }
.auth-tab { flex:1; padding:.8rem; text-align:center; cursor:pointer; font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); border:none; background:none; transition:all .2s; }
.auth-tab.active { color:var(--accent-red); border-bottom:2px solid var(--accent-red); }
.auth-tab:hover { color:var(--text-primary); }
.auth-form { padding:1.5rem 2rem 2rem; }
.auth-form .form-group { margin-bottom:1rem; }
.auth-form label { display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }
.auth-form input { width:100%; padding:.65rem .9rem; background:var(--bg-primary); border:1px solid var(--border); border-radius:5px; color:var(--text-primary); font-family:var(--font-mono); font-size:.82rem; transition:border-color .2s; }
.auth-form input:focus { outline:none; border-color:var(--accent-red); }
.btn-auth { width:100%; padding:.75rem; margin-top:.5rem; background:var(--accent-red); color:#fff; border:none; border-radius:5px; font-family:var(--font-display); font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.btn-auth:hover { background:#ff1a0e; }
.auth-error { color:var(--accent-red); font-family:var(--font-mono); font-size:.72rem; margin-top:.8rem; text-align:center; min-height:1.2em; }
.auth-close { position:absolute; top:.8rem; right:.8rem; background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; padding:.3rem .5rem; border-radius:4px; transition:all .15s; z-index:1; line-height:1; }
.auth-close:hover { color:var(--text-primary); background:rgba(255,255,255,.06); }
.app-shell { display:none; }
.app-shell.visible { display:block; }
.auth-screen.hidden { display:none; }

/* ── Header ───────────────────────────────────────────────── */
.header { background:linear-gradient(180deg,#12121a 0%,var(--bg-primary) 100%); border-bottom:1px solid var(--border); padding:.9rem 2rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; backdrop-filter:blur(20px); }
.logo-sm { font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:.08em; }
.logo-sm .f1 { color:var(--accent-red); }
.logo-sm .x  { color:var(--text-primary); }
.header-right { display:flex; align-items:center; gap:1.2rem; }
.header-meta { font-family:var(--font-mono); font-size:.7rem; color:var(--text-secondary); display:flex; align-items:center; gap:1rem; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent-green); display:inline-block; margin-right:.3rem; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.user-pill { display:flex; align-items:center; gap:.6rem; padding:.35rem .5rem .35rem .8rem; background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; font-family:var(--font-mono); font-size:.72rem; }
.user-pill .user-name { color:var(--text-primary); }
.user-pill .user-role { color:var(--accent-purple); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; }
.btn-logout { background:none; border:1px solid var(--border); color:var(--text-muted); padding:.3rem .7rem; border-radius:4px; cursor:pointer; font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; transition:all .2s; }
.btn-logout:hover { border-color:var(--accent-red); color:var(--accent-red); }

/* ── Hamburger (hidden on desktop) ───────────────────────── */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:4px; width:28px; height:24px; position:relative; }
.hamburger span { display:block; width:100%; height:2px; background:var(--text-primary); border-radius:2px; position:absolute; left:0; transition:all .25s; }
.hamburger span:nth-child(1) { top:3px; }
.hamburger span:nth-child(2) { top:11px; }
.hamburger span:nth-child(3) { top:19px; }
.hamburger.open span:nth-child(1) { top:11px; transform:rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { top:11px; transform:rotate(-45deg); }

/* ── Season Timeline ─────────────────────────────────────── */
.timeline-bar { background:var(--bg-secondary); border-bottom:1px solid var(--border); overflow:hidden; }
.timeline-mobile { display:none; }
.timeline-desktop { display:flex; overflow-x:auto; padding:.5rem 0; gap:0; scrollbar-width:none; -ms-overflow-style:none; justify-content:stretch; }
.timeline-desktop::-webkit-scrollbar { display:none; }

.tl-stop { display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:0; padding:.3rem .1rem; position:relative; cursor:default; }
.tl-stop::before { content:''; position:absolute; top:14px; left:0; right:0; height:2px; background:var(--border); z-index:0; }
.tl-stop:first-child::before { left:50%; }
.tl-stop:last-child::before { right:50%; }
.tl-dot { width:8px; height:8px; border-radius:50%; background:var(--border); z-index:1; position:relative; margin-bottom:3px; transition:all .2s; }
.tl-flag { font-size:.85rem; line-height:1; margin-bottom:1px; }
.tl-label { font-family:var(--font-mono); font-size:.55rem; color:var(--text-muted); letter-spacing:.06em; }
.tl-name { font-family:var(--font-mono); font-size:.48rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tl-past .tl-dot { background:var(--accent-green); }
.tl-past .tl-label, .tl-past .tl-name { color:var(--text-secondary); }
.tl-past::before { background:var(--accent-green); }
.tl-active .tl-dot { background:var(--accent-red); width:10px; height:10px; box-shadow:0 0 8px rgba(225,6,0,.6); }
.tl-active .tl-label { color:var(--accent-red); font-weight:700; }
.tl-active .tl-name { color:var(--text-primary); font-weight:600; }
.tl-active.tl-locked .tl-dot { background:var(--accent-yellow); box-shadow:0 0 8px rgba(255,215,0,.6); }
.tl-active.tl-locked .tl-label { color:var(--accent-yellow); }
.tl-future .tl-dot { background:var(--text-muted); opacity:.4; }
.tl-future .tl-label, .tl-future .tl-name, .tl-future .tl-flag { opacity:.35; }
.tl-stop:hover .tl-dot { transform:scale(1.5); }
.tl-stop:hover .tl-name { color:var(--text-primary); opacity:1; }

/* ── Impersonate Bar ──────────────────────────────────────── */
.impersonate-bar { display:none; padding:.6rem 2rem; background:var(--accent-purple); font-family:var(--font-mono); font-size:.72rem; color:#fff; align-items:center; gap:1rem; }
.impersonate-bar.visible { display:flex; }

/* ── Deadline Countdown Bar ──────────────────────────────── */
.deadline-bar {
  display:none; /* shown by JS when deadlines exist */
  align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
  padding:.45rem 1rem;
  background:linear-gradient(90deg, #0a0a14 0%, #12121e 50%, #0a0a14 100%);
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.68rem;
}
.dl-item {
  display:flex; align-items:center; gap:.4rem;
  padding:.2rem .6rem; border-radius:4px;
  background:var(--bg-elevated); border:1px solid var(--border);
  transition:all .3s;
}
.dl-next { border-color:var(--accent-yellow); }
.dl-next .dl-time { color:var(--accent-yellow); font-weight:700; }
.dl-urgent { border-color:var(--accent-red); animation:dl-pulse 2s ease-in-out infinite; }
.dl-urgent .dl-time { color:var(--accent-red); font-weight:700; }
.dl-passed { opacity:.4; }
.dl-passed .dl-time { color:var(--text-muted); }
.dl-flag { font-size:.8rem; }
.dl-label { color:var(--text-secondary); font-size:.62rem; white-space:nowrap; }
.dl-time { color:var(--text-primary); font-size:.72rem; font-variant-numeric:tabular-nums; min-width:6rem; text-align:right; font-weight:500; }

@keyframes dl-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(225,6,0,0); }
  50% { box-shadow:0 0 8px 2px rgba(225,6,0,.25); }
}

@media (max-width:600px) {
  .deadline-bar { gap:.6rem; padding:.35rem .5rem; }
  .dl-item { padding:.15rem .4rem; }
  .dl-label { display:none; }
  .dl-time { min-width:auto; font-size:.65rem; }
}
.impersonate-bar select { padding:.3rem .5rem; border-radius:4px; background:#2a1a4a; border:1px solid #5a3a8a; color:#fff; font-family:var(--font-mono); font-size:.72rem; }

/* ── Nav ──────────────────────────────────────────────────── */
.nav { display:flex; gap:2px; padding:0 2rem; background:var(--bg-secondary); border-bottom:1px solid var(--border); overflow-x:auto; }
.nav-btn { background:none; border:none; color:var(--text-secondary); font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.85rem 1.2rem; cursor:pointer; position:relative; transition:color .2s; white-space:nowrap; }
.nav-btn:hover { color:var(--text-primary); }
.nav-btn.active { color:var(--accent-red); }
.nav-btn.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent-red); }
.nav-btn.admin-only { color:var(--accent-purple); opacity:.7; }
.nav-btn.admin-only.active { color:var(--accent-purple); opacity:1; }
.nav-btn.admin-only.active::after { background:var(--accent-purple); }

/* ── Main Layout ──────────────────────────────────────────── */
.main { padding:2rem; max-width:1400px; margin:0 auto; }
.panel { display:none; }
.panel.active { display:block; }

/* ── MOTD Modal ────────────────────────────────────────────── */
.motd-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:blur(4px); animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.motd-modal { background:var(--bg-card); border:1px solid var(--accent-blue); border-radius:10px; width:100%; max-width:520px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(0,144,255,.15); animation:modalIn .25s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
.motd-modal-header { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid rgba(0,144,255,.15); background:rgba(0,144,255,.04); font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--accent-blue); letter-spacing:.04em; }
.motd-close { background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; padding:.2rem .4rem; border-radius:4px; line-height:1; transition:all .15s; }
.motd-close:hover { color:var(--text-primary); background:rgba(255,255,255,.06); }
.motd-modal-body { padding:1.2rem 1.4rem; max-height:50vh; overflow-y:auto; }
.motd-modal-body p { color:var(--text-secondary); font-size:.88rem; line-height:1.7; margin-bottom:.6rem; }
.motd-modal-body p:last-child { margin-bottom:0; }
.motd-modal-body strong { color:var(--text-primary); }

/* Profile popup */
.profile-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.profile-row:last-of-type { border-bottom:none; }
.profile-label { font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.profile-value { font-size:.88rem; font-weight:500; color:var(--text-primary); font-family:var(--font-mono); }

/* Lock banner */
.lock-banner { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.5rem 1rem;
  background:linear-gradient(90deg, rgba(231,76,60,.15), rgba(231,76,60,.08));
  border:1px solid rgba(231,76,60,.3); border-radius:8px; margin:0 1rem .5rem;
  animation: lockPulse 2s ease-in-out infinite; }
.lock-banner-rates {
  background:linear-gradient(90deg, rgba(255,193,7,.12), rgba(255,193,7,.06));
  border-color:rgba(255,193,7,.3); animation:ratesPulse 3s ease-in-out infinite; }
@keyframes ratesPulse { 0%,100%{opacity:1} 50%{opacity:.8} }

/* ── Staged Results ──────────────────────────────────── */
.staged-card { border-color:var(--accent-yellow); border-width:1px; position:relative; }
.staged-card .card-header { border-bottom-color:rgba(255,215,0,.15); }
.staged-badge {
  font-family:var(--font-mono); font-size:.58rem; font-weight:700; letter-spacing:.06em;
  padding:.15rem .5rem; border-radius:3px; text-transform:uppercase;
}
.staged-pending { background:rgba(255,193,7,.15); color:#ffc107; }
.staged-partial { background:rgba(255,152,0,.15); color:#ff9800; }
.staged-final   { background:rgba(76,175,80,.15); color:#4caf50; }
.staged-meta {
  display:flex; justify-content:space-between; padding:.4rem .8rem;
  font-family:var(--font-mono); font-size:.62rem; color:var(--text-muted);
  border-bottom:1px solid var(--border); background:rgba(255,215,0,.03);
}
.staged-footer { padding:.4rem .8rem; text-align:center; border-top:1px solid var(--border); }

/* ── Rental Summary ──────────────────────────────────── */
.rental-summary {
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:.7rem 1rem;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px;
  font-family:var(--font-mono); font-size:.78rem;
}
.rental-sum-item { display:flex; flex-direction:column; align-items:center; min-width:80px; }
.rental-sum-label { font-size:.55rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.15rem; }
.rental-sum-value { font-weight:700; font-size:.9rem; }
.rental-sum-divider { width:1px; height:2rem; background:var(--border); margin:0 .4rem; }
.rental-sum-danger { background:rgba(231,76,60,.1); border-radius:4px; padding:.2rem .5rem; }
.rental-sum-danger .rental-sum-value { color:var(--accent-red); }
@media (max-width:600px) {
  .rental-summary { gap:.6rem; padding:.5rem .6rem; }
  .rental-sum-item { min-width:60px; }
  .rental-sum-value { font-size:.78rem; }
  .rental-sum-divider { display:none; }
}

/* ── Race Schedule Popup ─────────────────────────────── */
.sched-header { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.sched-loc { font-family:var(--font-display); font-size:.9rem; color:var(--text-primary); font-weight:600; }
.sched-status { font-family:var(--font-mono); font-size:.6rem; padding:.15rem .4rem; border-radius:3px; }
.sched-complete { background:rgba(76,175,80,.15); color:#4caf50; }
.sched-active { background:rgba(225,6,0,.15); color:var(--accent-red); }
.sched-upcoming { background:rgba(255,193,7,.12); color:#ffc107; }
.sched-sprint { font-family:var(--font-mono); font-size:.58rem; padding:.15rem .4rem; border-radius:3px; background:rgba(0,144,255,.15); color:#0090ff; }
.sched-row {
  display:flex; align-items:center; gap:.6rem; padding:.5rem 0;
  border-bottom:1px solid var(--border); font-size:.82rem;
}
.sched-row:last-child { border-bottom:none; }
.sched-row-major { font-weight:600; }
.sched-icon { font-size:.9rem; width:1.4rem; text-align:center; flex-shrink:0; }
.sched-event { color:var(--text-secondary); min-width:100px; }
.sched-time { color:var(--text-primary); font-family:var(--font-mono); font-size:.75rem; margin-left:auto; text-align:right; }

/* ── Feedback FAB ────────────────────────────────────── */
.feedback-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--accent-blue); color:#fff; border:none;
  font-size:1.2rem; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:all .2s;
}
.feedback-fab:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(0,144,255,.4); }
@media (max-width:600px) { .feedback-fab { bottom:1rem; right:1rem; width:42px; height:42px; font-size:1rem; } }

.fb-item {
  padding:.6rem 0; border-bottom:1px solid var(--border); font-size:.78rem;
}
.fb-item:last-child { border-bottom:none; }
.fb-meta { display:flex; gap:.6rem; align-items:center; margin-bottom:.3rem; }
.fb-name { font-weight:600; color:var(--text-primary); }
.fb-cat { font-family:var(--font-mono); font-size:.58rem; padding:.1rem .4rem; border-radius:3px; background:var(--bg-elevated); color:var(--text-muted); }
.fb-time { font-family:var(--font-mono); font-size:.58rem; color:var(--text-muted); margin-left:auto; }
.fb-msg { color:var(--text-secondary); line-height:1.5; }
.lock-banner .lock-icon { font-size:1rem; }
.lock-banner .lock-text { font-size:.78rem; font-weight:600; color:#e74c3c; letter-spacing:.03em; text-transform:uppercase; }
@keyframes lockPulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.motd-modal-footer { padding:.8rem 1.2rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; background:var(--bg-elevated); }

/* ── Score Breakdown Modal ─────────────────────────────────── */
.breakdown-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:blur(4px); animation:fadeIn .2s ease; }
.breakdown-modal { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; width:100%; max-width:460px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.5); animation:modalIn .25s ease; }
.breakdown-header { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid var(--border); background:var(--bg-elevated); font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--accent-yellow); letter-spacing:.04em; }
.breakdown-body { padding:1rem 1.2rem; }
.breakdown-body table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.76rem; }
.breakdown-body th { text-align:left; padding:.4rem .5rem; color:var(--text-muted); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--border); }
.breakdown-body td { padding:.4rem .5rem; border-bottom:1px solid #1a1a28; }
.breakdown-body .bd-total { font-weight:700; border-top:2px solid var(--border); border-bottom:none; }
.breakdown-body .bd-section { font-family:var(--font-display); font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; padding:.6rem .5rem .3rem; border-bottom:none; }
.bd-mult { color:var(--accent-purple); font-weight:700; }
.bd-penalty { color:var(--accent-red); font-style:italic; }

/* ── Cards ────────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.5rem; transition:border-color .2s ease, box-shadow .2s ease; }
.card:hover { border-color:rgba(255,255,255,.08); box-shadow:0 2px 12px rgba(0,0,0,.15); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.card-title { font-family:var(--font-display); font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
.card-body { padding:1.2rem; }

/* ── Grids ────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:1rem; }
@media(max-width:900px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* ── Data Table ───────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.76rem; }
.data-table th { text-align:left; padding:.65rem .8rem; color:var(--text-muted); font-weight:500; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--border); background:var(--bg-card); }
.data-table td { padding:.55rem .8rem; border-bottom:1px solid #1a1a28; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }
.pos   { font-weight:700; font-family:var(--font-display); font-size:1rem; width:2.5rem; text-align:center; }
.pos-1 { color:var(--accent-yellow); }
.pos-2 { color:#c0c0c0; }
.pos-3 { color:#cd7f32; }
.money { color:var(--accent-green); }
.money.negative { color:var(--accent-red); }
.points { color:var(--accent-yellow); font-weight:700; }
.is-me td { background:rgba(225,6,0,.06); }

/* ── Stat Block ───────────────────────────────────────────── */
.stat-block { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1.1rem; text-align:center; }
.stat-value { font-family:var(--font-display); font-size:1.8rem; font-weight:700; line-height:1; margin-bottom:.3rem; }
.stat-label { font-family:var(--font-mono); font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }
.form-input, .form-select { width:100%; padding:.55rem .8rem; background:var(--bg-primary); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); font-family:var(--font-mono); font-size:.78rem; }
.form-input:focus, .form-select:focus { outline:none; border-color:var(--accent-red); }
textarea.form-input { resize:vertical; }
.section-desc { color:var(--text-secondary); font-size:.8rem; margin-bottom:1.2rem; line-height:1.5; }

/* ── Inline Auction Bid Inputs ────────────────────────────── */
.auction-bid-cell { padding:.3rem .4rem !important; }
.bid-inline-input { width:80px; padding:.4rem .5rem; background:var(--bg-primary); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); font-family:var(--font-mono); font-size:.78rem; text-align:right; transition:border-color .2s; }
.bid-inline-input:focus { outline:none; border-color:var(--accent-red); background:#0f0f18; }
.bid-inline-input::placeholder { color:var(--text-muted); font-size:.68rem; }
.has-bid .bid-inline-input { border-color:var(--accent-green); background:rgba(0,212,106,.04); }
.data-table tr.has-bid td { background:rgba(0,212,106,.03); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1.1rem; font-family:var(--font-display); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; transition:all .15s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--accent-red); color:#fff; }
.btn-primary:hover { background:#ff1a0e; box-shadow:0 2px 8px rgba(225,6,0,.25); }
.btn-secondary { background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent-red); color:var(--text-primary); }
.btn-sm { padding:.3rem .7rem; font-size:.68rem; }
.btn-danger { background:transparent; color:var(--accent-red); border:1px solid var(--accent-red-dim); }
.btn-danger:hover { background:var(--accent-red); color:#fff; }

/* ── Badges ───────────────────────────────────────────────── */
.badge { display:inline-block; padding:.12rem .45rem; font-family:var(--font-mono); font-size:.58rem; border-radius:3px; text-transform:uppercase; letter-spacing:.08em; }
.badge-owner     { background:#1a3a1a; color:var(--accent-green); border:1px solid #2a5a2a; }
.badge-rented    { background:#1a2a3a; color:var(--accent-blue);  border:1px solid #2a4a6a; }
.badge-available { background:#2a2a1a; color:var(--accent-yellow);border:1px solid #4a4a2a; }
.badge-mine      { background:#3a1a1a; color:var(--accent-red);   border:1px solid #5a2a2a; }
.badge-pu        { background:#3a1a3a; color:var(--accent-purple);border:1px solid #5a2a5a; }
.badge-sale      { background:#3a2a1a; color:#f39c12; border:1px solid #5a3a1a; }
.btn-xs          { font-size:.6rem; padding:.15rem .5rem; line-height:1.2; }

/* ── Team Color Bars ──────────────────────────────────────── */
.tb { width:4px; height:20px; border-radius:2px; display:inline-block; margin-right:.4rem; vertical-align:middle; }
.t-redbull     { background:#3671C6; }
.t-ferrari     { background:#E8002D; }
.t-mclaren     { background:#FF8000; }
.t-mercedes    { background:#27F4D2; }
.t-astonmartin { background:#229971; }
.t-alpine      { background:#0093cc; }
.t-rb          { background:#6692FF; }
.t-audi        { background:#ff5e00; }
.t-sauber      { background:#ff5e00; }
.t-williams    { background:#64C4FF; }
.t-haas        { background:#B6BABD; }
.t-cadillac    { background:#2ecc71; }

/* ── Toast ────────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:2rem; right:2rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { padding:.7rem 1.1rem; background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; font-family:var(--font-mono); font-size:.72rem; animation:slideIn .3s ease; max-width:350px; border-left:3px solid var(--accent-green); pointer-events:auto; white-space:pre-line; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.toast.error { border-left-color:var(--accent-red); }
.toast.locked { border-left-color:var(--accent-yellow); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Misc ─────────────────────────────────────────────────── */
.race-stripe { height:3px; background:repeating-linear-gradient(90deg,var(--accent-red) 0px,var(--accent-red) 30px,transparent 30px,transparent 40px); }

/* ── Guest / Spectator Mode ──────────────────────────────── */
body.guest-mode .authed-only { display:none !important; }
.btn-signin { background:var(--accent-blue); color:#fff; border:none; padding:.4rem .9rem; border-radius:4px; font-family:var(--font-mono); font-size:.7rem; cursor:pointer; letter-spacing:.04em; transition:background .15s; }
.btn-signin:hover { background:#0090ff; }
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--text-muted); font-family:var(--font-mono); font-size:.78rem; }
.empty-state .ei { font-size:2rem; margin-bottom:.5rem; opacity:.3; }
.log-entry { font-family:var(--font-mono); font-size:.68rem; color:var(--text-secondary); padding:.25rem 0; border-bottom:1px solid #13131d; }
.log-entry .lt { color:var(--text-muted); margin-right:.6rem; }
.weekend-card { border-left:3px solid var(--accent-red); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── Bid Table ─────────────────────────────────────────── */
.bid-summary { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:.8rem 0; margin-bottom:.5rem; font-family:var(--font-mono); font-size:.78rem; color:var(--text-secondary); }
.bid-table tr.bid-over td { opacity:.5; }
.bid-table tr.bid-over td:first-child::after { content:' ⚠'; color:var(--accent-yellow); }
.btn-move { background:none; border:1px solid var(--border); color:var(--text-muted); width:26px; height:22px; border-radius:3px; cursor:pointer; font-size:.65rem; margin:0 1px; transition:all .15s; padding:0; text-align:center; line-height:20px; }
.btn-move:hover:not(:disabled) { border-color:var(--accent-blue); color:var(--accent-blue); background:rgba(0,144,255,.08); }
.btn-move:disabled { opacity:.25; cursor:default; }
.priority-input { width:36px; padding:.2rem .3rem; background:var(--bg-primary); border:1px solid var(--border); border-radius:3px; color:var(--accent-yellow); font-family:var(--font-display); font-size:.9rem; font-weight:700; text-align:center; -moz-appearance:textfield; }
.priority-input::-webkit-outer-spin-button,
.priority-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.priority-input:focus { outline:none; border-color:var(--accent-red); background:#0f0f18; }
.bid-x { cursor:pointer; color:var(--text-muted); font-size:1rem; padding:.1rem .3rem; border-radius:50%; font-weight:700; }
.bid-x:hover { color:var(--accent-red); background:rgba(225,6,0,.15); }

/* ── Rules Page ───────────────────────────────────────── */
.rules-content { max-width:900px; }
.rules-content h2 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--accent-red); margin:2rem 0 .8rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); letter-spacing:.04em; }
.rules-content h2:first-child { margin-top:0; }
.rules-content h3 { font-family:var(--font-display); font-size:.88rem; font-weight:600; color:var(--text-primary); margin:1.2rem 0 .5rem; }
.rules-content p { color:var(--text-secondary); line-height:1.7; margin-bottom:.8rem; font-size:.88rem; }
.rules-content strong { color:var(--text-primary); }
.rules-content .rule-box { background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; padding:1rem 1.2rem; margin:.8rem 0; border-left:3px solid var(--accent-blue); }
.rules-content .rule-box p { margin-bottom:.4rem; font-size:.84rem; }
.rules-content .rule-box p:last-child { margin-bottom:0; }
.rules-content .rule-box-warn { border-left-color:var(--accent-yellow); }
.rules-content .rule-box-tip { border-left-color:var(--accent-green); }
.rules-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.76rem; margin:.8rem 0 1.2rem; }
.rules-table th { text-align:left; padding:.5rem .6rem; color:var(--text-muted); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--border); }
.rules-table td { padding:.4rem .6rem; border-bottom:1px solid #1a1a28; color:var(--text-secondary); }
.rules-table td:first-child { color:var(--text-primary); font-weight:600; }
.rules-quickref { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:.8rem; margin:1rem 0; }
.rules-quickref-item { background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; padding:.8rem; text-align:center; }
.rules-quickref-value { font-family:var(--font-mono); font-size:1.4rem; font-weight:700; color:var(--accent-yellow); }
.rules-quickref-label { font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.2rem; }

/* ── Score Breakdown Popup ────────────────────────────────── */
.score-clickable { cursor:pointer; color:var(--accent-yellow) !important; font-weight:700; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.score-clickable:hover { color:#fff !important; background:rgba(255,215,0,.08); }
.bd-title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:.8rem; }
.bd-section { font-family:var(--font-display); font-size:.78rem; font-weight:600; color:var(--accent-red); text-transform:uppercase; letter-spacing:.06em; margin:.8rem 0 .3rem; }
.bd-table { margin-bottom:.5rem; }
.bd-total-row { display:flex; align-items:center; gap:1.5rem; padding:.8rem 0 0; margin-top:.6rem; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.82rem; color:var(--text-secondary); flex-wrap:wrap; }

.bd-asset-header {
  display:flex; align-items:center; gap:.5rem; padding:.5rem 0 .2rem;
  font-family:var(--font-mono); font-size:.8rem;
  border-bottom:1px solid var(--border);
}
.bd-asset-total { margin-left:auto; font-size:.75rem; color:var(--text-secondary); white-space:nowrap; }
.bd-items { padding:.3rem 0 .5rem .5rem; }
.bd-session {
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
  padding:.15rem 0; font-family:var(--font-mono); font-size:.7rem;
}
.bd-session-label {
  color:var(--text-muted); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.04em; min-width:5rem;
}
.bd-item {
  background:var(--bg-elevated); padding:.1rem .4rem; border-radius:3px;
  color:var(--accent-green); font-size:.68rem;
}
.bd-item-neg { color:var(--accent-red); }
.bd-session-total {
  color:var(--text-secondary); font-size:.68rem; margin-left:.2rem;
}

/* ── Championship Chart ─────────────────────────────────── */
#championshipChart svg { display:block; }
.champ-legend {
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; padding:.5rem 0 0;
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-secondary);
}
.champ-legend-item { display:flex; align-items:center; gap:.3rem; }
.champ-legend-me { font-weight:700; color:var(--text-primary); }
.champ-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Finance Tab ─────────────────────────────────────────── */
#financeChart svg { display:block; }

/* ── Inline Rental Pricing ──────────────────────────────── */
.rental-price-row {
  display:flex; align-items:center; flex-wrap:wrap;
  padding:.6rem .8rem; border-bottom:1px solid var(--border); gap:.4rem .8rem;
}
.rental-price-row:last-child { border-bottom:none; }
.rental-price-asset {
  display:flex; align-items:center; gap:.5rem; min-width:0; flex-shrink:1;
}
.rental-price-control {
  display:flex; align-items:center; gap:.4rem; flex-shrink:0; margin-left:auto;
}
.rental-price-input {
  width:60px; background:var(--bg-secondary); border:1px solid var(--accent-yellow);
  color:var(--accent-yellow); text-align:center; font-family:var(--font-mono);
  font-size:.8rem; padding:.3rem .2rem; border-radius:4px;
  -moz-appearance:textfield;
}
.rental-price-input::-webkit-inner-spin-button,
.rental-price-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.rental-price-input:focus {
  outline:none; border-color:var(--accent-red); background:var(--bg-elevated);
}
.rental-price-bound {
  font-family:var(--font-mono); font-size:.6rem; color:var(--text-muted);
  min-width:2.2rem; text-align:center;
}
.rental-price-unit {
  font-family:var(--font-mono); font-size:.65rem; color:var(--text-secondary);
}
.rental-slider-wrap {
  width:100%; padding:0 .5rem;
}
.rental-slider {
  width:100%; height:4px; -webkit-appearance:none; appearance:none;
  background:linear-gradient(90deg, var(--accent-blue), var(--accent-yellow));
  border-radius:2px; outline:none; cursor:pointer;
}
.rental-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent-yellow); border:2px solid var(--bg-primary); cursor:pointer;
  box-shadow:0 0 4px rgba(255,204,0,.4);
}
.rental-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--accent-yellow); border:2px solid var(--bg-primary); cursor:pointer;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — max 768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent iOS zoom on input focus — minimum 16px */
  .form-input, .form-select, .auth-form input, textarea.form-input, .bid-inline-input,
  .impersonate-bar select, .priority-input, .rental-price-input {
    font-size: 16px !important;
  }

  /* Header compact */
  .header { padding:.7rem 1rem; }
  .header-meta { display:none; }
  /* Compact user pill: name only, truncated, still tappable for profile */
  .user-pill { padding:.25rem .6rem; gap:0; max-width:110px; }
  .user-pill .user-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.68rem; }
  .user-pill .user-role { display:none; }

  /* Show hamburger, hide desktop logout/signin (move into menu or keep simple) */
  .hamburger { display:block; }
  .btn-logout, .btn-signin { font-size: .6rem; padding: .25rem .5rem; }

  /* Nav as dropdown */
  .nav {
    display:none; flex-direction:column; padding:0;
    position:fixed; top:var(--nav-top, 52px); left:0; right:0;
    background:var(--bg-secondary); border-bottom:2px solid var(--accent-red);
    z-index:99; box-shadow:0 8px 24px rgba(0,0,0,.5);
    max-height:calc(100vh - var(--nav-top, 52px)); overflow-y:auto;
  }
  .nav.nav-open { display:flex; }
  .nav-btn { text-align:left; padding:.9rem 1.5rem; border-bottom:1px solid var(--border); }
  .nav-btn.active::after { display:none; }
  .nav-btn.active { background:rgba(225,6,0,.08); }

  /* Timeline: hide desktop, show mobile */
  .timeline-desktop { display:none !important; }
  .timeline-mobile {
    display:flex !important; align-items:center; gap:.6rem;
    padding:.6rem 1rem; font-family:var(--font-mono);
  }
  .tl-current-flag { font-size:1.2rem; }
  .tl-current-name { font-size:.78rem; font-weight:700; color:var(--text-primary); }
  .tl-next { font-size:.65rem; color:var(--text-muted); margin-left:auto; }
  .tl-final { color:var(--accent-yellow); }

  /* Main padding */
  .main { padding:.75rem; }

  /* Cards tighter on mobile */
  .card { padding:.8rem; margin-bottom:.6rem; }
  .card h3 { font-size:.82rem; }

  /* Tables: keep real table layout (header/body columns aligned) and
     scroll the container horizontally instead */
  .card table { display:table; white-space:nowrap; min-width:100%; }
  .card-body, .card > div[style*="overflow-y"] { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Touch-friendly buttons */
  .btn, .btn-sm { min-height:36px; padding:.45rem .8rem; }

  /* Inline bid inputs wider on mobile */
  .bid-inline-input { width:70px; }

  /* Lock banner mobile */
  .lock-banner { margin:0 .5rem .4rem; padding:.4rem .6rem; }
  .lock-banner .lock-text { font-size:.68rem; }

  /* Toast bottom-center on mobile */
  .toast-container { right:50%; transform:translateX(50%); bottom:1rem; }
  .toast { max-width:280px; text-align:center; }

  /* Impersonate bar */
  .impersonate-bar { padding:.5rem 1rem; font-size:.65rem; flex-wrap:wrap; }

  /* Auth form wider on mobile */
  .auth-box { width:92vw; max-width:380px; }
}

/* ── Small phones ──────────────────────────────────────── */
@media (max-width: 380px) {
  .nav-btn { padding:.75rem 1rem; font-size:.7rem; }
  .deadline-bar { padding:.25rem .4rem; }
  .dl-item { padding:.1rem .25rem; }
  .brand { font-size:.8rem; }
}