:root {
  --bg: #0b0b0d; --card: #161619; --card2: #1d1d22; --fg: #f2f2f2; --muted: #8e8e96; --line: #26262c;
  --alive: #37c45f; --out: #e0433d; --lead: #ffc82e; --tie: #ff9a2e; --accent: #e10600;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif; font-size: 15px; }
body { padding-bottom: calc(64px + var(--safe-bottom)); }

/* App bar */
header { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: calc(10px + var(--safe-top)) 16px 10px;
  border-bottom: 1px solid var(--line); }
header h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .01em; }
header h1 span { color: var(--accent); }
header .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
header .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.install { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }

main { padding: 12px 16px; max-width: 720px; margin: 0 auto; }

/* Summary card */
.summary { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.summary .big { font-size: 26px; font-weight: 700; line-height: 1.1; }
.summary .big small { font-size: 14px; font-weight: 400; color: var(--muted); }
.summary .names { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.4; }
.summary .next { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.summary .note { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* Segmented tabs */
.tabs { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.tabs button { flex: 1; background: none; border: 0; color: var(--muted); padding: 8px 0; font-size: 14px; border-radius: 8px; cursor: pointer; }
.tabs button.on { background: var(--card2); color: var(--fg); font-weight: 600; }

.legend { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; margin: 0 2px 6px; }
.legend button { background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; padding: 0; cursor: pointer; }
.help { display: none; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin-bottom: 10px; color: var(--fg); }
.help.show { display: block; }
.help b { color: var(--lead); }

/* Driver rows: #, driver, status / pts, wins, max, gap, team */
.list { display: flex; flex-direction: column; gap: 6px; }
.row { background: var(--card); border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 9px 12px 9px 10px; }
.row.alive { border-left-color: var(--alive); }
.row.lead  { border-left-color: var(--lead); }
.row.tie   { border-left-color: var(--tie); }
.row.out   { border-left-color: var(--out); opacity: .55; }
.row .top { display: flex; align-items: center; gap: 8px; }
.row .pos { width: 26px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.row.lead .pos { color: var(--lead); }
.row .drv { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.row .code { font-weight: 700; letter-spacing: .03em; }
.row .name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--card2); white-space: nowrap; }
.tag.alive { color: var(--alive); } .tag.out { color: var(--out); } .tag.lead { color: var(--lead); }
.tag.tie { color: var(--tie); } .tag.champ { background: var(--lead); color: #000; }
.row .stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 2fr; gap: 4px; margin-top: 7px; padding-left: 30px; min-width: 0;
  font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stat .v { font-weight: 600; }
.stat .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.stat { min-width: 0; }
.stat.team .v { font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Teams & calendar */
.trow, .crow { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.trow .pos, .crow .pos { width: 26px; font-weight: 700; color: var(--muted); }
.trow .t, .crow .t { flex: 1; min-width: 0; }
.trow .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.trow .d, .crow .d { color: var(--muted); font-size: 12.5px; }
.crow.done { opacity: .5; }
.crow .pts { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.crow.next { border-color: var(--accent); }
.crow.live { border-color: var(--alive); }

footer { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 18px 2px 0; }
footer a { color: inherit; }
footer .alt { display: inline-block; margin-top: 4px; }

/* Bottom bar */
nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
  display: flex; padding: 6px 0 calc(6px + var(--safe-bottom)); }
nav button { flex: 1; background: none; border: 0; color: var(--muted); font-size: 13px; padding: 10px 0; border-top: 2px solid transparent; cursor: pointer; }
nav button.on { color: var(--fg); font-weight: 600; border-top-color: var(--accent); }
.hidden { display: none !important; }
.error { color: var(--out); }