:root {
  --bg: #0b1e2d; --panel: #122b3f; --panel2: #183650; --text: #e6eef5; --muted: #8ea4b8;
  --accent: #35c2ff; --live: #ff3b5c; --ok: #38d39f; --border: #244761;
  --sel: #1f4a6a; --overlay: rgba(0,0,0,.45); --row-line: rgba(255,255,255,.05); --swatch-border: rgba(255,255,255,.6);
  --band: rgba(255,255,255,.35); --on-accent: #042033; --nodata-bg: #5a4a12; --nodata-fg: #ffd86b;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef3f7; --panel: #ffffff; --panel2: #e6edf3; --text: #14273a; --muted: #5d7186;
  --accent: #0a84c6; --live: #e0244a; --ok: #1e9e6e; --border: #c9d6e2;
  --sel: #d3e8f7; --overlay: rgba(255,255,255,.8); --row-line: rgba(0,0,0,.06); --swatch-border: rgba(0,0,0,.45);
  --band: rgba(20,39,58,.3); --on-accent: #ffffff; --nodata-bg: #fff1c2; --nodata-fg: #7a5a00;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }
body { display: flex; flex-direction: column; height: 100vh; }
#topbar, #timeline { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
#timeline { border-bottom: 0; border-top: 1px solid var(--border); }
#timeline.hidden { display: none; }
.spacer { flex: 1; }
button, select, input[type=number] { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font: inherit; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.ghost { background: transparent; }
select { max-width: 40vw; }
input[type=number] { width: 90px; cursor: text; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
#homeLink { text-decoration: none; font-size: 18px; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--panel2); color: var(--muted); letter-spacing: .3px; }
.badge.live { background: var(--live); color: #fff; }
.badge.finished { background: var(--panel2); color: var(--text); }
.badge.nodata { background: var(--nodata-bg); color: var(--nodata-fg); }
#clock { font-variant-numeric: tabular-nums; font-weight: 600; }
#windInfo { color: var(--muted); }
#main { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
#mapWrap { flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map.grabbing { cursor: grabbing; }
#overlay { position: absolute; left: 10px; top: 10px; pointer-events: none; }
#status { background: var(--overlay); padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--muted); display: inline-block; }
#status:empty { display: none; }
#board { flex: 0 0 290px; overflow: auto; background: var(--panel); border-left: 1px solid var(--border); }
#board.hidden { display: none; }
#boardTable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#boardTable tr { cursor: pointer; border-bottom: 1px solid var(--row-line); }
#boardTable tr:hover { background: var(--panel2); }
#boardTable tr.sel { background: var(--sel); }
#boardTable tr.stale { opacity: .45; }
#boardTable td { padding: 4px 6px; white-space: nowrap; }
#boardTable td.rank { width: 26px; text-align: right; color: var(--muted); }
#boardTable td.sw { width: 14px; padding: 0; }
#boardTable td.sw span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--swatch-border); }
#boardTable td.name { overflow: hidden; text-overflow: ellipsis; }
#boardTable td.spd { width: 58px; } #boardTable td.gap { width: 62px; } #boardTable td.leg { width: 30px; }
#boardTable td.num { text-align: right; color: var(--muted); }
#boardTable td.num b { color: var(--text); font-weight: 600; }
#home { position: absolute; inset: 0; overflow: auto; padding: 24px; background: var(--bg); }
#home.hidden, #banner.hidden, #settings.hidden { display: none; }
#home h1 { margin: 0 0 8px; font-size: 22px; }
.muted { color: var(--muted); }
.raceRow { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.raceRow:hover { background: var(--panel); }
.raceRow .d { flex: 1; font-weight: 600; }
.raceRow .t { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
#banner { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--sel); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.4); max-width: 90%; }
#settings { position: absolute; right: 10px; top: 10px; width: 360px; max-width: 95%; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
#settings h3 { margin: 0 0 8px; }
#settings label { display: block; margin: 8px 0; }
#settings input[type=range] { width: 140px; vertical-align: middle; }
#tlWrap { flex: 1; position: relative; padding-top: 30px; }
#slider { width: 100%; display: block; margin: 0; }
#tlMarks { position: absolute; left: 8px; right: 8px; top: 0; height: 30px; }
.tlMark { position: absolute; top: 12px; transform: translateX(-50%); font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 3px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); cursor: pointer; white-space: nowrap; user-select: none; }
.tlMark::after { content: ''; position: absolute; left: 50%; top: 14px; width: 1px; height: 14px; background: currentColor; opacity: .7; }
.tlMark.row2 { top: 0; } .tlMark.row2::after { height: 26px; }
.tlMark:hover { border-color: var(--accent); z-index: 2; }
.tlMark.start { background: var(--ok); color: #042; border-color: var(--ok); }
.tlMark.finish { background: var(--live); color: #fff; border-color: var(--live); }
.tlBand { position: absolute; top: 27px; height: 3px; background: var(--band); border-radius: 2px; pointer-events: none; }
.tlBand.finish { background: rgba(255,59,92,.6); }
#tlTime { font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
#btnLive { color: var(--live); font-weight: 700; }
#btnLive.on { background: var(--live); color: #fff; }
@media (max-width: 760px) {
  #board { position: absolute; right: 0; top: 0; bottom: 0; flex: none; width: 240px; }
  select { max-width: 32vw; }
  #settings { width: 95%; }
}