/* RADARADA leaderboard — unified Apple-style dark (black/grey). One type family
   throughout (the system "San Francisco" stack), tabular figures for all times,
   generous spacing, hairline separators, minimal colour. No navy, no mixed fonts. */
:root{
  --bg:#0a0a0b; --surface:#161618; --surface2:#1d1d20; --elevated:#242427;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#f5f5f7; --text2:rgba(235,235,245,.60); --text3:rgba(235,235,245,.34);
  --red:#ff453a; --green:#30d158; --cyan:#64d2ff; --gold:#ffd60a; --silver:#c7c7cc; --bronze:#d89461; --purple:#bf5af2;
  --r:16px; --r-sm:11px; --r-lg:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,Roboto,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--text); background:var(--bg);
  min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv01";letter-spacing:-.01em;overflow-x:hidden;
}
.grain{display:none}
.num,.tm,.last,.best,.rm,.pos,.lp,.dt-stat .v,.pod .tm{font-variant-numeric:tabular-nums;letter-spacing:0}
h1,h2,h3{letter-spacing:-.02em}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:26px clamp(18px,5vw,56px) 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.flag{width:30px;height:30px;border-radius:9px;flex:none;background:
  conic-gradient(from 45deg,#1c1c1f 0 25%,#3a3a3d 0 50%,#1c1c1f 0 75%,#3a3a3d 0)50%/10px 10px,#0e0e10;
  box-shadow:0 0 0 1px var(--line2) inset}
.brand-txt h1{font-weight:700;font-size:clamp(19px,2.4vw,24px);margin:0;line-height:1.05;color:var(--text)}
.tag{margin:3px 0 0;font-weight:500;letter-spacing:.01em;font-size:12.5px;color:var(--text3)}
.top-actions{display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12px;letter-spacing:.02em;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--text3);background:var(--surface)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.pill.on{color:var(--text);border-color:transparent;background:rgba(255,69,58,.14)}
.pill.on i{background:var(--red);box-shadow:0 0 8px var(--red);animation:beat 1.6s infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.4}}

/* server status strip */
.strip{display:flex;gap:8px;flex-wrap:wrap;padding:6px clamp(18px,5vw,56px) 0}
.svr{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;padding:7px 13px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text2)}
.svr i{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.svr.up i{background:var(--green);box-shadow:0 0 7px rgba(48,209,88,.7)}
.svr.down{opacity:.5}.svr.down i{background:var(--red)}
.svr .c{color:var(--text3);font-size:11.5px}

/* main tabs — segmented, Apple style */
.maintabs{display:inline-flex;gap:2px;margin:20px clamp(18px,5vw,56px) 0;padding:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px}
.mtab{font-weight:600;font-size:14.5px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:10px;border:none;color:var(--text2);background:transparent;cursor:pointer;
  transition:background .18s,color .18s}
.mtab .mi{font-size:13px}.mtab .mi.dotred{color:var(--text3);font-size:9px}
.mtab:hover{color:var(--text)}
.mtab.on{color:var(--text);background:var(--elevated);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.mtab.on .mi.dotred{color:var(--red);animation:beat 1.6s infinite}
.panel{padding-top:8px}

/* circuit tabs + car chips */
.circuits{display:flex;gap:8px;overflow-x:auto;padding:18px clamp(18px,5vw,56px) 2px;scrollbar-width:none}
.circuits::-webkit-scrollbar{display:none}
.tab{font-weight:600;font-size:15px;white-space:nowrap;padding:8px 15px;border-radius:10px;border:1px solid transparent;
  color:var(--text2);background:transparent;cursor:pointer;transition:.15s}
.tab:hover{color:var(--text);background:var(--surface)}
.tab.on{color:var(--text);background:var(--surface);border-color:var(--line)}
.cars{display:flex;gap:7px;flex-wrap:wrap;padding:10px clamp(18px,5vw,56px) 16px}
.chip{font-weight:500;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);color:var(--text2);background:var(--surface);transition:.15s}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.on{color:#06210f;background:var(--green);border-color:transparent;font-weight:600}
.chip .n{opacity:.6;font-size:11px;margin-left:5px;font-variant-numeric:tabular-nums}

.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.sec-head h2{font-weight:700;font-size:21px;margin:0}
.sec-head .ico{font-size:19px}.sec-head .sub{margin-left:auto;color:var(--text3);font-size:12.5px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:beat 1.6s infinite;flex:none}

/* cards */
.map-card,.tower-card,.detail-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;min-width:0}
.card-head{display:flex;align-items:center;gap:9px;margin:0 0 15px}
.card-head h3{font-weight:650;font-weight:600;font-size:17px;margin:0}
.card-head .sub{margin-left:auto;color:var(--text3);font-size:12px;text-align:right}

/* ===== HALL ===== */
.hall{padding:22px clamp(18px,5vw,56px) 48px}
.hall-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start;max-width:1180px}
@media(max-width:900px){.hall-grid{grid-template-columns:1fr}}
.podium{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:10px;align-items:end;margin-bottom:14px}
.pod{border-radius:var(--r);padding:15px 12px 16px;text-align:center;position:relative;overflow:hidden;
  background:var(--surface2);border:1px solid var(--line)}
.pod .pos{font-weight:700;font-size:30px;line-height:.9;color:var(--text2)}
.pod .nm{font-weight:600;font-size:16px;margin:7px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod .tm{font-weight:600;font-size:16px;color:var(--text)}
.pod .dt{color:var(--text3);font-size:11px;margin-top:4px}
.pod.p1{padding-top:22px;background:linear-gradient(180deg,rgba(255,214,10,.10),var(--surface2));border-color:rgba(255,214,10,.28)}
.pod.p1 .pos{color:var(--gold)}.pod.p2 .pos{color:var(--silver)}.pod.p3 .pos{color:var(--bronze)}
.pod .crown{position:absolute;top:6px;left:0;right:0;font-size:15px}
.board{display:flex;flex-direction:column;gap:3px}
.row{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;background:transparent;border:1px solid transparent;transition:background .15s}
.row:hover{background:var(--surface2)}
.row .rk{font-weight:600;font-size:15px;color:var(--text3);text-align:center;font-variant-numeric:tabular-nums}
.row .drv{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tm{font-weight:600;font-size:14px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.row .gap{font-size:12px;color:var(--cyan);text-align:right;min-width:60px;font-variant-numeric:tabular-nums}
.row .gap.lead{color:var(--gold)}

/* ===== LIVE ===== */
.live-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px clamp(18px,5vw,56px) 0}
.watch{display:flex;gap:7px;flex-wrap:wrap}
.wbtn{font-weight:600;font-size:14px;padding:8px 15px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);color:var(--text2);background:var(--surface);transition:.15s;display:inline-flex;align-items:center;gap:8px}
.wbtn i{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.wbtn.act i{background:var(--green);box-shadow:0 0 7px rgba(48,209,88,.7)}
.wbtn:hover{color:var(--text);border-color:var(--line2)}
.wbtn.on{color:var(--text);background:var(--elevated);border-color:var(--line2)}
.wbtn .ct{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.btn-spectate{font-weight:600;font-size:15px;text-decoration:none;color:#fff;padding:11px 20px;border-radius:13px;
  white-space:nowrap;background:var(--red);transition:transform .12s,filter .12s}
.btn-spectate:hover{filter:brightness(1.08)}.btn-spectate:active{transform:scale(.98)}

.bcast{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;padding:16px clamp(18px,5vw,56px) 8px}
@media(max-width:900px){.bcast{grid-template-columns:1fr}}
.map-box{position:relative;width:100%;height:clamp(300px,52vh,540px);border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#161619,#0d0d0f 75%);border:1px solid var(--line)}
#trackmap{position:absolute;inset:0;width:100%;height:100%}
.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 24px;color:var(--text3);font-size:14px}
.mp-edge{fill:none;stroke:#050506;stroke-width:15;stroke-linejoin:round;stroke-linecap:round}
.mp-track{fill:none;stroke:#3a3a3e;stroke-width:7.5;stroke-linejoin:round;stroke-linecap:round}
.car-g{transition:transform .55s linear;cursor:pointer}
.car-dot{fill:var(--cyan);stroke:#06222e;stroke-width:2}
.car-g.lead .car-dot{fill:var(--gold);stroke:#2a2400}
.car-halo{fill:var(--cyan);opacity:.16}.car-g.lead .car-halo{fill:var(--gold);opacity:.2}
.car-lbl{font-family:var(--font);font-weight:600;font-size:20px;fill:#fff;paint-order:stroke;stroke:#000a;stroke-width:5px;dominant-baseline:middle}
.car-g.lead .car-lbl{fill:var(--gold)}
.car-g.ai{cursor:default}
.car-g.ai .car-dot{fill:var(--text2);stroke:#111}
.car-g.ai .car-halo{fill:var(--text2);opacity:.1}
.car-g.ai .car-lbl{fill:var(--text2)}
.lrow.ai{opacity:.72}
.lrow.ai .lp{font-size:11px;font-weight:700;color:var(--text3)}
.lrow.ai .best,.lrow.ai .last{color:var(--text2)}

/* timing tower */
.tower{display:flex;flex-direction:column;gap:3px;max-height:clamp(300px,52vh,540px);overflow-y:auto;scrollbar-width:thin}
.lrow{display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:11px;
  padding:11px 13px;border-radius:12px;background:var(--surface2);border:1px solid transparent;cursor:pointer;transition:background .15s}
.lrow:hover{background:var(--elevated)}
.lrow.p1{background:linear-gradient(90deg,rgba(255,214,10,.10),var(--surface2));border-color:rgba(255,214,10,.22)}
.lrow .who{min-width:0}
.lrow .lp{font-weight:700;font-size:16px;color:var(--text3);text-align:center;font-variant-numeric:tabular-nums}
.lrow.p1 .lp{color:var(--gold)}
.lrow .ln{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lc{font-size:11.5px;color:var(--text3)}
.lrow .last{font-size:13px;color:var(--text2);text-align:right;font-variant-numeric:tabular-nums}
.lrow .best{font-weight:600;font-size:14px;color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums}
.lrow .best.fastest{color:var(--purple)}
.lab{font-size:10px;color:var(--text3);letter-spacing:.04em;text-transform:uppercase}

.empty{padding:30px 16px;text-align:center;color:var(--text3);border:1px dashed var(--line2);border-radius:var(--r);font-size:14px}

/* driver detail */
.live-detail{margin:8px clamp(18px,5vw,56px) 48px}
.hall-detail{position:sticky;top:14px}
.dt-ic{font-size:17px}.dt-body{margin-top:8px}
.dt-hint{color:var(--text3);font-size:13.5px;padding:26px 8px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r)}
.dt-stats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.dt-stat{flex:1;min-width:96px;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.dt-stat .v{font-weight:700;font-size:22px;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.dt-stat .k{font-size:11.5px;color:var(--text3);margin-top:5px}
.dt-sech{font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--text3);margin:6px 0 8px;text-transform:uppercase}
.dt-recs{display:flex;flex-direction:column;gap:4px}
.dt-rec{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 13px;border-radius:12px;background:var(--surface2)}
.dt-rec .rt{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-rec .rc{font-size:11px;color:var(--text3)}
.dt-rec .rm{font-weight:600;font-size:14px;color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums}
.dt-rec .rd{font-size:10px;color:var(--text3);text-align:right;margin-top:1px}
.lrow,.row,.pod{cursor:pointer}
.row.sel,.lrow.sel,.pod.sel{outline:2px solid var(--red);outline-offset:-2px}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text3);
  font-size:12.5px;padding:20px clamp(18px,5vw,56px) 40px;border-top:1px solid var(--line);margin-top:10px}
.foot code{color:var(--cyan);background:var(--surface);padding:2px 8px;border-radius:6px}