:root {
  --bg: #090909;
  --panel: #141414;
  --panel-2: #1b1b1b;
  --line: #2a2a2a;
  --text: #f3f3f3;
  --muted: #aaaaaa;
  --accent: #c90d05;
  --ok: #2ecc71;
  --warn: #f1c40f;
  --off: #7f8c8d;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Segoe UI, Arial, sans-serif; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background: linear-gradient(90deg, #0e0e0e, #1a1a1a); border-bottom:1px solid var(--line); }
.brand { display:flex; gap:16px; align-items:center; }
.welcome-hero { font-size: 22px; font-weight: 700; color: #f5f5f5; margin-left: 8px; }
.logo { display:block; object-fit:contain; }
.logo.nitro { height:34px; }
.top-actions { display:flex; gap:10px; align-items:center; }
.pill { border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; }
.pill.muted { color:var(--muted); }
.pill.state-running { border-color:#1f8a4b; color:#74e6a2; }
.pill.state-idle { border-color:#9f7d15; color:#ffd56b; }
.pill.state-off { border-color:#5a5a5a; color:#9d9d9d; }

.page { padding:12px; display:grid; gap:10px; }
.card { background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; }
.tabs-row { padding: 8px; }
.tabs, .subtabs { display:flex; gap:8px; flex-wrap:wrap; }
.subtabs { margin-top: 8px; }
.class-tabs { margin-bottom: 8px; }
.tab-btn { border:1px solid #3a3a3a; border-radius:999px; padding:7px 12px; background:#1c1c1c; color:#fff; cursor:pointer; display:flex; align-items:center; gap:8px; }
.tab-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tab-btn img { width: 20px; height: 20px; object-fit: contain; }
.provider-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid #5a5a5a;
  background:#111;
  color:#ddd;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
}

.empty-state { background:var(--panel); border:1px dashed var(--line); border-radius:10px; padding:24px; color:var(--muted); }
.info-card { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.title { margin:0; font-size:28px; color:var(--accent); }
.meta { margin:4px 0 0; color:var(--muted); }
.meta-chips { margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.meta-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #2f2f2f;
  background:#171717;
  color:#f0f0f0;
  font-size:12px;
  line-height:1;
}
.meta-chip .k { color:#a7a7a7; }
.meta-chip.weather { border-color:#2a6da8; background:#13263a; }
.meta-chip.temp { border-color:#8a5d1a; background:#30210e; }
.meta-chip.participants { border-color:#2d6f46; background:#122a1c; }
.meta-chip.stage { border-color:#6a4f9a; background:#1f1730; }
.meta-chip.phase { border-color:#0d6b6b; background:#0f2a2a; }
.meta-chip.elapsed { border-color:#4b5a95; background:#141d36; }
.meta-chip.remaining { border-color:#8f2a2a; background:#301313; }
.info-pills { display:flex; gap:8px; }

.content-grid { display:grid; grid-template-columns: 1.45fr .95fr; gap:10px; }
.left-col, .right-col { display:grid; gap:10px; align-content:start; }
.map-card { height: 100%; }
.map-wrap { width:100%; }
#mapCanvas {
  width:100%;
  height:auto;
  aspect-ratio: 6 / 5;
  background:#0f0f0f;
  border:1px solid #2c2c2c;
  border-radius:8px;
  display:block;
}

.card-title { font-weight:700; margin-bottom:8px; }
.table-wrap { max-height:52vh; overflow:auto; }
.table-wrap.short { max-height:none; overflow:visible; }
.table { width:100%; border-collapse:collapse; font-size:12px; }
.table th, .table td { border:1px solid #2b2b2b; padding:6px; white-space:nowrap; }
.table th { background:#202020; color:#f8f8f8; }
.table tbody tr:nth-child(even) td { background:#181818; }
.table td.center, .table th.center { text-align: center; }

.class-row td { background: rgba(201, 13, 5, 0.14); color: #ffd5bf; text-transform: uppercase; letter-spacing: .04em; }
.row-human td { background-color: rgba(73, 209, 127, 0.06); }
.row-ai td { background-color: rgba(255, 159, 67, 0.06); }
.name-cell { display:inline-flex; align-items:center; gap:6px; }
.driver-link {
  cursor:pointer;
  text-decoration:none;
}
.driver-link:hover { text-decoration:underline; }
.car-cell { display:inline-flex; align-items:center; gap:6px; }
.car-color-dot {
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.car-mini {
  width:30px;
  height:16px;
  object-fit:cover;
  border-radius:3px;
  border:1px solid #2f2f2f;
  background:#0f0f0f;
}
.car-logo {
  width:16px;
  height:16px;
  object-fit:contain;
  background:#0f0f0f;
  border:1px solid #2f2f2f;
  border-radius:3px;
  padding:1px;
}
.flag-icon { width:16px; height:12px; border:1px solid #2c2c2c; border-radius:2px; object-fit:cover; }
.ping-wrap { display:inline-flex; align-items:center; gap:6px; }
.ping-bars { display:inline-flex; align-items:flex-end; gap:2px; height:10px; }
.ping-bars i { display:block; width:3px; border-radius:2px; background:#3e3e3e; }
.ping-bars i:nth-child(1) { height:3px; }
.ping-bars i:nth-child(2) { height:5px; }
.ping-bars i:nth-child(3) { height:7px; }
.ping-bars i:nth-child(4) { height:9px; }
.ping-bars.l1 i:nth-child(-n+1) { background:#e67e22; }
.ping-bars.l2 i:nth-child(-n+2) { background:#f1c40f; }
.ping-bars.l3 i:nth-child(-n+3) { background:#2ecc71; }
.ping-bars.l4 i:nth-child(-n+4) { background:#2ecc71; }
.tipo-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid #444;
}
.tipo-badge.human {
  color:#78f0a9;
  border-color:#1f8a4b;
  background:rgba(31,138,75,.18);
}
.tipo-badge.ai {
  color:#ffd78a;
  border-color:#9f7d15;
  background:rgba(159,125,21,.2);
}
.pilot-focus {
  margin: 6px 0 10px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(80px, auto));
  gap: 8px;
}
.focus-pill {
  border:1px solid #3b3b3b;
  border-radius:8px;
  background:#121212;
  padding:6px 10px;
  font-size:12px;
}
.focus-pill strong { color:#f0f0f0; }
.focus-pill .k { color:#9f9f9f; margin-right:6px; }
.focus-main {
  border-color:#395d9d;
  background:linear-gradient(180deg, rgba(27,44,74,.45), rgba(18,18,18,.8));
}
.row-selected td {
  box-shadow: inset 0 0 0 1px #4aa3ff;
  background-color: rgba(46, 108, 180, 0.18) !important;
}
.row-selected .driver-link {
  color:#9fd3ff;
  font-weight:700;
}
.delta-cell.delta-neg {
  background-color: rgba(31, 138, 75, 0.34) !important;
  color: #d7ffe8;
  font-weight: 700;
}
.delta-cell.delta-pos {
  background-color: rgba(170, 46, 46, 0.34) !important;
  color: #ffdede;
  font-weight: 700;
}

.toast { position:fixed; right:18px; bottom:18px; background:#161616; border:1px solid var(--line); padding:10px 12px; border-radius:8px; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.58); }
.modal-card {
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid #2f2f2f;
  border-radius: 12px;
  background: #121212;
  padding: 12px;
}
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.lap-chip { border-radius:6px; padding:2px 6px; font-weight:700; display:inline-block; }
.lap-chip.best-overall { background:#7422d3; color:#fff; }
.lap-chip.best-personal { background:#1f8a4b; color:#fff; }
.tyre-cell {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.tyre-icon {
  width:16px;
  height:16px;
  object-fit:contain;
}
.tyre-history-text {
  color:#c7c7c7;
  font-size:11px;
}
.current-lap-cell {
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  font-size:11px;
}
.current-lap-lbl {
  display:inline-block;
  min-width:24px;
  border-radius:6px;
  padding:1px 6px;
  font-weight:700;
  color:#c9d9ff;
  background:#1a2440;
  border:1px solid #334d86;
}
.current-lap-lbl.valid {
  color:#ddffe9;
  background:rgba(31,138,75,.35);
  border-color:#1f8a4b;
}
.current-lap-lbl.invalid {
  color:#ffe1e1;
  background:rgba(170,46,46,.4);
  border-color:#aa2e2e;
}
.current-lap-clock {
  display:inline-block;
  min-width:52px;
  color:#f2f2f2;
  font-weight:700;
  border-radius:6px;
  padding:1px 6px;
  border:1px solid #2f2f2f;
  background:#151515;
}
.current-lap-clock.valid {
  background:rgba(31,138,75,.35);
  border-color:#1f8a4b;
  color:#ddffe9;
}
.current-lap-clock.invalid {
  background:rgba(170,46,46,.4);
  border-color:#aa2e2e;
  color:#ffe1e1;
}
.split-chip { border-radius:6px; padding:2px 6px; font-weight:700; display:inline-block; }
.split-chip.s-neutral { background:#1f1f1f; color:#e8e8e8; border:1px solid #3a3a3a; }
.split-chip.s-purple { background:#7422d3; color:#fff; }
.split-chip.s-green { background:#1f8a4b; color:#fff; }
.split-chip.s-yellow { background:#7f620f; color:#fff; }
.drs-dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
}
.drs-dot.on { background:#1f8a4b; }
.drs-dot.off { background:#7f620f; }
.ers-chip {
  display:inline-block;
  min-width:42px;
  text-align:center;
  border-radius:6px;
  padding:1px 6px;
  font-weight:700;
  border:1px solid #2f2f2f;
}
.ers-chip.save {
  background:rgba(31,138,75,.35);
  border-color:#1f8a4b;
  color:#ddffe9;
}
.ers-chip.deploy {
  background:rgba(127,98,15,.55);
  border-color:#7f620f;
  color:#fff6d5;
}
.tyre-wear-cell {
  font-size:10px;
  letter-spacing:.1px;
  white-space:nowrap;
}
.tyre-btn {
  border:1px solid #2d6f46;
  background:rgba(31,138,75,.2);
  color:#ddffe9;
  border-radius:6px;
  padding:1px 7px;
  font-weight:700;
  cursor:pointer;
  min-width:48px;
  pointer-events:auto;
  position:relative;
  z-index:2;
}
.tyre-btn:hover { border-color:#49b77a; }
.state-chip {
  display:inline-flex;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid #2f2f2f;
  font-size:12px;
}
.state-chip.st-racing { background:rgba(31,138,75,.35); border-color:#1f8a4b; }
.state-chip.st-garage { background:rgba(70,70,70,.45); border-color:#5a5a5a; }
.state-chip.st-outlap { background:rgba(46,108,180,.42); border-color:#2e6cb4; }
.state-chip.st-inlap { background:rgba(116,34,211,.42); border-color:#7422d3; }
.state-chip.st-pits { background:rgba(127,98,15,.55); border-color:#7f620f; }
.state-chip.st-paused { background:rgba(170,46,46,.4); border-color:#aa2e2e; }
.state-chip.st-finish { background:rgba(31,138,75,.45); border-color:#1f8a4b; }
.state-chip.st-warn { background:rgba(170,46,46,.45); border-color:#aa2e2e; }
.state-wrap {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.damage-btn {
  border:1px solid #3f3f3f;
  background:#171717;
  color:#f1f1f1;
  border-radius:6px;
  padding:1px 5px;
  line-height:1.1;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  z-index:2;
}
.damage-btn:hover { border-color:#6a6a6a; }
.lap-btn {
  pointer-events:auto;
  position:relative;
  z-index:2;
}
.damage-car {
  display:grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap:8px;
  align-items:stretch;
}
.damage-part {
  border:1px solid #2f2f2f;
  border-radius:8px;
  background:#131313;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:58px;
}
.damage-part strong { font-size:11px; color:#efefef; }
.damage-part span { font-size:13px; font-weight:700; }
.damage-part.ok { border-color:#1f8a4b; background:rgba(31,138,75,.16); }
.damage-part.ok span { color:#bff6d5; }
.damage-part.warn { border-color:#7f620f; background:rgba(127,98,15,.2); }
.damage-part.warn span { color:#ffe9a8; }
.damage-part.bad { border-color:#aa2e2e; background:rgba(170,46,46,.22); }
.damage-part.bad span { color:#ffd3d3; }
.damage-part.fw-l { grid-column: 1 / span 2; grid-row: 1; }
.damage-part.fw-r { grid-column: 5 / span 2; grid-row: 1; }
.damage-part.engine { grid-column: 3 / span 2; grid-row: 1; }
.damage-part.sidepod { grid-column: 1 / span 2; grid-row: 2; }
.damage-part.floor { grid-column: 3 / span 2; grid-row: 2; }
.damage-part.gearbox { grid-column: 5 / span 2; grid-row: 2; }
.damage-part.diffuser { grid-column: 2 / span 2; grid-row: 3; }
.damage-part.rw { grid-column: 4 / span 2; grid-row: 3; }
.tyre-car {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap:8px;
  align-items:center;
}
.tyre-chassis {
  grid-column: 2;
  grid-row: 2;
  border:1px solid #3b3b3b;
  border-radius:8px;
  background:#181818;
  text-align:center;
  padding:18px 6px;
  font-weight:700;
  color:#cfcfcf;
}
.tyre-box {
  border:1px solid #2f2f2f;
  border-radius:8px;
  background:#131313;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tyre-box strong { color:#f0f0f0; }
.tyre-box span { color:#9ff2bf; font-weight:700; }
.tyre-box small { color:#b2b2b2; }
.tyre-box.fl { grid-column: 1; grid-row: 1; }
.tyre-box.fr { grid-column: 3; grid-row: 1; }
.tyre-box.rl { grid-column: 1; grid-row: 3; }
.tyre-box.rr { grid-column: 3; grid-row: 3; }
.gap-chip {
  display:inline-block;
  border-radius:6px;
  padding:1px 6px;
  font-weight:700;
}
.gap-chip.gap-pos {
  background:rgba(170,46,46,.34);
  border:1px solid #aa2e2e;
  color:#ffdede;
}
.hidden { display:none !important; }

@media (max-width: 1200px) {
  .content-grid { grid-template-columns: 1fr; }
  #mapCanvas { aspect-ratio: 23 / 9; }
}
@media (max-width: 900px) {
  .table-wrap { overflow:auto; }
  .table { min-width:1450px; font-size:11px; }
  .table th, .table td { padding:5px 4px; }
  .meta-row { gap:6px; }
  .meta-chip { font-size:11px; padding:4px 8px; }
  .current-lap-cell { font-size:10px; gap:3px; }
  .split-chip { padding:1px 5px; font-size:10px; }
  .damage-car { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .damage-part.fw-l,
  .damage-part.fw-r,
  .damage-part.engine,
  .damage-part.sidepod,
  .damage-part.floor,
  .damage-part.gearbox,
  .damage-part.diffuser,
  .damage-part.rw { grid-column:auto; grid-row:auto; }
}
@media (max-width: 700px) {
  .welcome-hero { font-size: 16px; }
  .title { font-size: 20px; }
  .controls-row { gap:6px; }
  .server-select { min-width:180px; }
}