:root {
  /* no blur / backdrop-filter / frosted overlays */
  --bg: #0a0a0a;
  --panel: #161616;
  --panel-2: #111111;
  --stroke: #333333;
  --text: #ffffff;
  --dim: #a0a0a0;
  --accent: #e5dd2c;
  --good: #3ee08f;
  --warn: #e5dd2c;
  --you: #00bcd4;
  --ideal: #c9a0ff;
  --pb: #8ec8ff;
  --wr: #e8d48b;
  --bad: #ff6b6b;
  --row-you: #0a0a0a;
  --mono: "Cascadia Mono", "Consolas", "Segoe UI Mono", monospace;
  --sans: "Inter", "Segoe UI", sans-serif;
  --display: "Exo", "Bahnschrift", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scrollbar-width: thin;
  scrollbar-color: #333 #0a0a0a;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #0a0a0a;
}

*::-webkit-scrollbar-thumb {
  background: #333;
  border: 1px solid #111;
}

*::-webkit-scrollbar-thumb:hover {
  background: #e5dd2c;
}

*::-webkit-scrollbar-corner {
  background: #0a0a0a;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
}

#app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

:fullscreen,
#app:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

:-webkit-full-screen,
#app:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

html:fullscreen body,
html:fullscreen #app {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

html:-webkit-full-screen body,
html:-webkit-full-screen #app {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 12px;
  border-bottom: 1px solid var(--stroke);
  background: #111;
}

.brand {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  justify-self: start;
}

.logo {
  height: 18px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.menu-wrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 40;
}

.menu-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: #000;
  border: 1px solid var(--stroke);
}

.menu-btn:hover,
.menu-wrap.open .menu-btn {
  background: var(--accent);
  border-color: var(--accent);
}

.menu-bars,
.menu-bars::before,
.menu-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  position: relative;
}

.menu-bars::before,
.menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bars::before { top: -5px; }
.menu-bars::after { top: 5px; }

.menu-btn:hover .menu-bars,
.menu-btn:hover .menu-bars::before,
.menu-btn:hover .menu-bars::after,
.menu-wrap.open .menu-bars,
.menu-wrap.open .menu-bars::before,
.menu-wrap.open .menu-bars::after {
  background: #111;
}

.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #0a0a0a;
  border: 1px solid var(--stroke);
}

.menu-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stroke);
  cursor: pointer;
}

.menu-item:last-child { border-bottom: 0; }

.menu-item:hover {
  color: var(--accent);
  background: #161616;
}

.menu-item.active {
  color: #111;
  background: var(--accent);
}

.menu-item-sub {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.menu-item-sub:empty { display: none; }

.menu-item.active .menu-item-sub {
  color: #111;
}

.brand-copy {
  min-width: 0;
}

.brand-copy {
  min-width: 0;
}

.brand-name {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-sub {
  display: none;
}

.clock-block {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 12px;
  white-space: nowrap;
}

.session-clock,
.session-laps {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1;
}

.session-laps:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
}

.session-laps:not([hidden])::before,
.you-pos-bar:not([hidden])::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--accent);
}

.you-pos-bar:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1;
}

.session-block {
  min-width: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-align: right;
}

.session-meta {
  color: var(--dim);
  font-size: 10px;
  min-width: 0;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-tools {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}

.radio-btn .radio-icon-on { display: none; }
.radio-btn.is-on .radio-icon-on { display: block; }
.radio-btn.is-on .radio-icon-off { display: none; }
.radio-btn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.radio-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 22px;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
}

.radio-vol::-webkit-slider-runnable-track {
  height: 4px;
  background: #333;
  border: 1px solid #333;
}

.radio-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  background: #ccc;
  border: 1px solid #333;
  cursor: pointer;
}

.radio-vol::-moz-range-track {
  height: 4px;
  background: #333;
  border: 1px solid #333;
}

.radio-vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #ccc;
  border: 1px solid #333;
  cursor: pointer;
}

.fs-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: #000;
  border: 1px solid var(--stroke);
  color: var(--dim);
}

.fs-btn:hover,
.fs-btn.is-fs {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.fs-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.fs-btn .fs-icon-exit { display: none; }
.fs-btn.is-fs .fs-icon-enter { display: none; }
.fs-btn.is-fs .fs-icon-exit { display: block; }

.fs-hint {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: #0a0a0a;
  border: 1px solid #333;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  white-space: nowrap;
}

.dot { margin: 0 8px; opacity: 0.5; }

.conn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d4d;
}

#app:not(.disconnected) .conn-dot {
  background: var(--good);
}

.dashboard {
  display: grid;
  grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #333 #0a0a0a;
}

#app.times-collapsed .dashboard {
  grid-template-columns: minmax(280px, 26%) minmax(280px, 1fr);
}

#app.times-collapsed .timing-panel {
  display: none;
}

#app.dash-mode .dashboard,
#app.dash-mode.times-collapsed .dashboard {
  grid-template-columns: minmax(280px, 26%) minmax(320px, 1fr);
}

#app.dash-mode.standings-collapsed .dashboard,
#app.dash-mode.times-collapsed.standings-collapsed .dashboard {
  grid-template-columns: 40px minmax(0, 1fr);
}

#app.dash-mode.times-collapsed .timing-panel {
  display: flex;
}

#app.dash-mode .map-panel,
#app.dash-mode .times-toggle,
#app:not(.dash-mode):not(.stream-mode) .times-toggle {
  display: none;
}

#app.dash-mode .timing-panel {
  border-right: 0;
  min-width: 0;
}

#app.test-mode {
  overflow: hidden;
}

#app.test-mode.dash-mode .dashboard,
#app.test-mode.dash-mode.times-collapsed .dashboard,
#app.test-mode.dash-mode.standings-collapsed .dashboard,
#app.test-mode.dash-mode.times-collapsed.standings-collapsed .dashboard,
#app.no-standings.dash-mode .dashboard,
#app.no-standings.dash-mode.times-collapsed .dashboard,
#app.no-standings.dash-mode.standings-collapsed .dashboard,
#app.no-standings.dash-mode.times-collapsed.standings-collapsed .dashboard {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  min-height: 0;
}

#app.test-mode .timing-panel {
  overflow: auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  align-self: stretch;
}

/* Testing is solo — no standings rail / collapse strip */
#app.test-mode .standings-panel,
#app.no-standings .standings-panel {
  display: none !important;
}

#app.tel-mode .you-card,
#app.tel-mode .race-pos,
#app.tel-mode .dash-kpis,
#app.tel-mode .dash-live,
#app.tel-mode .sector-board,
#app.tel-mode .lap-log-head,
#app.tel-mode .lap-log,
#app.tel-mode .race-glance {
  display: none !important;
}

.test-only { display: none; }
#app.tel-mode .test-viz {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

#app.test-mode .timing-body {
  overflow: visible;
  flex: 0 0 auto;
}

#app.tel-mode:not(.test-mode) .timing-panel {
  min-height: 0;
  overflow: hidden;
}

#app.tel-mode:not(.test-mode) .timing-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

#app.tel-mode .times-toggle,
#app.tel-mode.times-collapsed .times-toggle {
  display: none;
}

#app.tel-mode.times-collapsed .timing-panel {
  display: flex;
}

#app.stream-mode .map-panel,
#app.dash-mode .race-board,
#app.stream-mode .race-board {
  display: none;
}

#app.stream-mode .dashboard,
#app.stream-mode.times-collapsed .dashboard {
  grid-template-columns: minmax(280px, 26%) 1fr;
  background: #0a0a0a;
}

#app.stream-mode:not(.times-collapsed) .dashboard {
  grid-template-columns: minmax(280px, 26%) minmax(210px, 22%);
}

#app.stream-mode .standings-panel {
  border-right: 1px solid var(--stroke);
}

#app.stream-mode .timing-panel {
  border-right: 1px solid var(--stroke);
}

#app.stream-mode .you-pos-bar,
#app.test-mode .you-pos-bar {
  display: none !important;
}

.dash-only { display: none; }
#app.dash-mode .dash-only.you-dash-id,
#app.dash-mode .dash-kpis,
#app.dash-mode .dash-live {
  display: grid;
}
#app.dash-mode .sector-row.dash-only {
  display: grid;
}

.panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--stroke);
  background: var(--panel);
}

.map-panel { border-right: 0; }

.race-board {
  display: none;
  min-width: 0;
  min-height: 0;
}

#app:not(.dash-mode):not(.tel-mode):not(.stream-mode) .timing-panel {
  display: none;
}

#app:not(.dash-mode):not(.tel-mode):not(.stream-mode) .race-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--stroke);
}

.race-board > .panel {
  border-right: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #161616;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--stroke);
}

.panel-head h1 {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timing-panel .panel-head h1,
.standings-panel .panel-head h1 { flex: 1; }

.panel-head span {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seg-switch {
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;
  border: 1px solid #333;
  background: #0a0a0a;
}
.seg-switch[hidden] { display: none !important; }
.seg-opt {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 0;
  background: #111;
  color: var(--dim);
  cursor: pointer;
  line-height: 1.1;
}
.seg-opt + .seg-opt { border-left: 1px solid #333; }
.seg-opt:hover { color: var(--text); background: #161616; }
.seg-opt.on {
  background: var(--accent);
  color: #111;
}
.seg-opt.on:hover { background: var(--accent); color: #111; }

.table-head,
.standings-row {
  display: grid;
  grid-template-columns: max-content 52px 1fr 92px;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
}

#app.hide-posdelta .c-delta { display: none; }

.table-head {
  height: 28px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--stroke);
}

.standings-body {
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.standings-rest {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--stroke);
  background: #111;
}

.rest-label {
  flex: 0 0 auto;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--stroke);
}

.rest-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.holeshot-bar {
  flex: 0 0 auto;
  height: 32px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 52px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid #e5dd2c;
  background: #252010;
  font-size: 12px;
}
.holeshot-bar[hidden] { display: none; }
.holeshot-bar .hs-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.holeshot-bar .hs-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.holeshot-bar .hs-time {
  font-family: var(--mono);
  text-align: right;
  color: var(--dim);
  font-size: 12px;
}

.standings-you {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--you);
  background: #082022;
}
.standings-you[hidden] { display: none; }
.you-pin-label {
  flex: 0 0 auto;
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--you);
}
.you-body {
  flex: 0 0 auto;
  height: 40px;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.you-body .standings-row {
  background: transparent !important;
  border-bottom: 0;
  box-shadow: none;
}

.standings-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  border-bottom: 1px solid var(--stroke);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.standings-row.you {
  box-shadow: inset 3px 0 0 var(--you);
}
.standings-row.selected {
  background: var(--row-you);
  box-shadow: inset 3px 0 0 var(--you);
}
.standings-row.promoted::after,
.standings-row.demoted::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.standings-row.promoted::after {
  animation: tintGreen 1.5s ease-out forwards;
}
.standings-row.demoted::after {
  animation: tintRed 1.5s ease-out forwards;
}
@keyframes tintGreen {
  0% { background: #1a3328; }
  100% { background: transparent; }
}
@keyframes tintRed {
  0% { background: #331a1a; }
  100% { background: transparent; }
}
.standings-row.inactive { opacity: 0.45; }
.standings-row.pit .c-name::after {
  content: "PIT";
  margin-left: 8px;
  font-size: 10px;
  color: var(--warn);
  letter-spacing: 0.1em;
}

.c-rank {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.c-pos { font-family: var(--mono); font-size: 16px; }
.c-delta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  width: 3.2ch;
  flex: 0 0 3.2ch;
  padding: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.c-delta.up { color: var(--good); }
.c-delta.down { color: #ff6b6b; }
.c-delta.held { color: transparent; }
.c-num { font-family: var(--mono); }
.c-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-gap { font-family: var(--mono); text-align: right; color: var(--dim); }
.c-gap.leader { color: var(--good); }
.c-gap.finished { color: var(--accent); }

.plate {
  display: inline-flex;
  min-width: 36px;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 3px;
  background: #000;
  font-weight: 700;
  border-left: 3px solid var(--accent);
}

.map-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--panel);
}

#map {
  width: 100%;
  height: 100%;
  display: block;
}

.map-legend {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.leg { display: flex; align-items: center; gap: 6px; }
.leg i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.leg.you i { background: var(--you); }
.leg.other i { background: #d7dde6; }
.leg.sf i { border-radius: 2px; background: repeating-linear-gradient(90deg, #111 0 4px, #eee 4px 8px); }

.timing-panel { border-right: 1px solid var(--stroke); }

.times-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #111;
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.times-toggle:hover {
  background: #111;
  color: var(--accent);
  border-color: var(--accent);
}

.standings-toggle {
  display: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}
.standings-toggle:hover {
  color: var(--text);
  background: #111;
}
#app.dash-mode .standings-toggle { display: block; }
#app.dash-mode.standings-collapsed .standings-panel .table-head,
#app.dash-mode.standings-collapsed .standings-panel .standings-you,
#app.dash-mode.standings-collapsed .standings-panel .standings-body,
#app.dash-mode.standings-collapsed .standings-panel .standings-rest,
#app.dash-mode.standings-collapsed .standings-panel .holeshot-bar,
#app.dash-mode.standings-collapsed .standings-panel h1,
#app.dash-mode.standings-collapsed .standings-panel #field-count {
  display: none;
}
#app.dash-mode.standings-collapsed .standings-panel .panel-head {
  flex: 1;
  padding: 8px 0 0;
  border-bottom: 0;
  justify-content: center;
  align-items: flex-start;
}
#app.dash-mode.standings-collapsed .standings-toggle {
  width: 28px;
  height: 28px;
}

.timing-body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.back-to-me {
  display: none;
  margin: 0;
  width: auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #333;
  background: #111;
  color: var(--you);
  cursor: pointer;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.back-to-me:hover {
  background: #161616;
  color: var(--text);
}
#app:not(.dash-mode):not(.tel-mode):not(.stream-mode) .back-to-me:not([hidden]) {
  display: block;
}

.you-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
  background: var(--panel-2);
}
.you-card .you-stats { grid-column: 1 / -1; justify-content: space-between; }

#app.dash-mode .you-card {
  grid-template-columns: 72px 1fr auto;
}
#app.dash-mode .you-stats { display: none; }
#app.dash-mode .race-glance { display: none; }

#app:not(.dash-mode):not(.tel-mode) .you-card,
#app:not(.dash-mode):not(.tel-mode) .sector-board,
#app:not(.dash-mode):not(.tel-mode) .lap-log-head,
#app:not(.dash-mode):not(.tel-mode) .lap-log {
  display: none;
}

.you-dash-id {
  grid-template-columns: 1fr;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}
.you-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.chip {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--stroke);
  background: #000;
  color: var(--dim);
}
.chip-you { color: var(--you); border-color: var(--you); }
.chip-fastest { color: #c9a0ff; border-color: #c9a0ff; }
.chip-pit { color: var(--warn); border-color: var(--warn); }
.chip-penalty { color: #ff6b6b; border-color: #ff6b6b; }
.chip-finished { color: var(--text); border-color: var(--text); }

.dash-kpis,
.dash-live {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
.dash-live {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kpi {
  background: var(--panel-2);
  padding: 8px 12px 9px;
  min-width: 0;
}
.kpi label {
  display: block;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.kpi b {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-sub {
  display: block;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi b.neg, .kpi-sub.neg { color: var(--good); }
.kpi b.pos, .kpi-sub.pos { color: #ff6b6b; }
.kpi b.pb, .kpi-sub.pb { color: var(--pb); }
.kpi b.wr, .kpi-sub.wr { color: var(--wr); }
.kpi b.purple { color: #c9a0ff; }
.kpi b.warn { color: var(--warn); }
.kpi b.you { color: var(--you); }

.sector-board {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--stroke);
}
.sector-head,
.sector-row {
  display: grid;
  grid-template-columns: 52px repeat(4, 1fr);
  gap: 6px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
}
.sector-head {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sector-row { height: 26px; }
.sector-row span:first-child {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.sector-row span { text-align: right; }
.sec-purple { color: #c9a0ff; }
.sec-green { color: var(--good); }
.sec-yellow { color: var(--warn); }
.sec-red { color: var(--bad); }
.sec-live { color: var(--you); }
.sec-pb { color: var(--pb); }
.sec-wr { color: var(--wr); }
.sector-row.ideal span:not(:first-child) { color: #c9a0ff; }
.sector-row.rec-pb span:not(:first-child) { color: var(--pb); }
.sector-row.rec-wr span:not(:first-child) { color: var(--wr); }

.lap-log-head { border-top: 0; }
.lap-log {
  flex: 1;
  overflow: auto;
  padding: 6px 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: #333 #0a0a0a;
}
.lap-line {
  display: grid;
  grid-template-columns: 36px 1fr 72px 64px;
  gap: 8px;
  align-items: center;
  height: 26px;
  font-family: var(--mono);
  font-size: 13px;
  border-bottom: 1px solid var(--stroke);
}
#app.dash-mode .lap-line {
  grid-template-columns: 36px 1fr 72px 64px 40px;
}
#app.tel-mode .lap-line {
  grid-template-columns: 36px minmax(72px, 1fr) 72px 56px 48px 52px 28px 28px 28px minmax(64px, 0.8fr) 40px;
  height: 28px;
  font-size: 12px;
}
.lap-line .lap-n { color: var(--dim); }
.lap-line .lap-delta.neg { color: var(--good); }
.lap-line .lap-delta.pos { color: var(--bad); }
.lap-line.best { background: #111111; }
.lap-line.ideal .lap-n,
.lap-line.ideal span:nth-child(3) { color: var(--ideal); }
.lap-line.ideal { background: #111111; }
.lap-line.invalid { opacity: 0.55; }
.lap-secs { color: var(--dim); font-size: 11px; letter-spacing: 0.02em; }
.lap-flag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  text-align: right;
}
.lap-spd, .lap-fuel, .lap-gear { color: var(--you); text-align: right; }
.lap-gear { letter-spacing: 0.02em; }
.lap-setup {
  color: var(--dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lap-line.partial .lap-flag { color: var(--you); }

.leg.split i { border-radius: 0; width: 12px; height: 2px; background: #fff; }

.you-pos {
  font-family: var(--mono);
  font-size: 36px;
  color: var(--you);
  text-align: center;
}

.you-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.you-bike { color: var(--dim); font-size: 12px; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }

.you-stats {
  display: flex;
  gap: 22px;
  text-align: right;
}

.you-stats label {
  display: block;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.you-stats b {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}
.you-stats b.neg { color: var(--good); }
.you-stats b.pos { color: #ff6b6b; }

.race-glance {
  display: none;
}

#app:not(.dash-mode):not(.tel-mode) .race-glance {
  display: grid;
  grid-template-columns: 1fr;
  flex: 0 0 auto;
  align-content: start;
  gap: 1px;
  background: var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

.glance {
  background: #161616;
  padding: 7px 10px 8px;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.glance label {
  color: var(--dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

.glance b {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  flex: 0 0 auto;
}

.glance.pos b {
  font-size: 20px;
  color: var(--accent);
}

.glance b.neg { color: var(--good); }
.glance b.pos { color: #ff6b6b; }
.glance b.crash { color: var(--bad); }
.glance b.on { color: var(--good); }
.glance b.pit { color: var(--warn); }
.glance b.off { color: var(--dim); }
.glance b.last { color: var(--accent); }
.glance b.current { color: var(--you); }
.glance b.pace-fast { color: var(--good); }
.glance b.pace-slow { color: var(--bad); }
.glance b.last.is-best,
.glance b.best { color: var(--good); }
.glance b.fast { color: var(--good); }
.glance b.slow { color: var(--bad); }
.glance b.ideal { color: #c9a0ff; }
.glance b.pen { color: var(--bad); }
.glance b.nopen { color: var(--good); }

.race-you-glance,
.race-laps-glance {
  display: grid;
  flex: 1;
  min-height: 0;
  gap: 1px;
  background: var(--stroke);
}

.race-you-glance {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.race-laps-glance {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.race-you-glance .glance,
.race-laps-glance .glance {
  overflow: hidden;
}

.race-you-glance .glance {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 14px;
  gap: 6px;
}

.race-you-glance .glance b {
  font-size: clamp(28px, 7vh, 52px);
}

.race-you-glance .glance.pos b {
  font-size: clamp(36px, 9vh, 64px);
}

.race-laps-glance .glance {
  padding: 8px 14px;
}

.race-laps-glance .glance b {
  font-size: clamp(20px, 4.5vh, 32px);
}

.race-alerts {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 7vh, 64px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #0a0a0a;
}

.race-alerts-panel.is-alert .panel-head {
  display: none;
}

.race-board > .race-alerts-panel.alert-blue {
  background: #00bcd4;
}

.race-board > .race-alerts-panel.alert-hazard {
  background: #e5dd2c;
}

.race-board > .race-alerts-panel.alert-wrong {
  background: #e5dd2c;
}

.race-board > .race-alerts-panel.alert-last,
.race-board > .race-alerts-panel.alert-finished {
  background: #d7dde6;
}

.ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--stroke);
  background: #000;
  min-height: 36px;
}

.ticker-label {
  font-family: var(--display);
  font-weight: 800;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.16em;
  flex: 0 0 auto;
}

.ticker-items {
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.ticker .conn {
  flex: 0 0 auto;
  margin-left: 8px;
}

.event-chip + .event-chip::before {
  content: "  ·  ";
  color: #4a5564;
}

.sess-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0a0a0a;
  border-bottom: 1px solid #333;
}
.sess-bar.review {
  box-shadow: inset 3px 0 0 #00bcd4;
}
.sess-bar-note {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
}
.sess-bar.review .sess-bar-note { color: var(--text); }
.sess-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  background: #111;
  border: 1px solid #333;
  padding: 6px 12px;
  cursor: pointer;
}
.sess-btn:hover,
.sess-btn:focus {
  color: var(--text);
  border-color: var(--text);
}
.sess-btn[hidden] { display: none !important; }

.test-tabs {
  position: sticky;
  top: 0;
  z-index: 18;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  background: #111;
  border-bottom: 1px solid var(--stroke);
}
.test-tab {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  background: #000;
  border: 1px solid var(--stroke);
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.test-tab:hover { color: var(--text); border-color: #555; }
.test-tab.active {
  color: #111;
  background: var(--accent);
  border-color: var(--accent);
}
.test-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
}
.test-legend[hidden] { display: none !important; }
.leg-chip {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  background: #111;
  border: 1px solid #333;
  padding: 3px 7px;
  cursor: pointer;
}
.leg-chip.cur {
  color: var(--text);
  border-color: var(--text);
}
.leg-chip.avg {
  color: var(--you);
  border-color: var(--you);
}
.leg-chip.best {
  color: var(--good);
  border-color: var(--good);
}
.leg-chip.ideal {
  color: var(--ideal);
  border-color: var(--ideal);
}
.leg-chip.last {
  color: var(--accent);
  border-color: var(--accent);
}
.leg-chip.cur.on { background: var(--text); border-color: var(--text); color: #111; }
.leg-chip.avg.on { background: var(--you); border-color: var(--you); color: #111; }
.leg-chip.best.on { background: var(--good); border-color: var(--good); color: #111; }
.leg-chip.ideal.on { background: var(--ideal); border-color: var(--ideal); color: #111; }
.leg-chip.last.on { background: var(--accent); border-color: var(--accent); color: #111; }
.leg-chip.locked { cursor: default; }
.test-panel {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--stroke);
  border-bottom: 1px solid var(--stroke);
  scroll-margin-top: 52px;
}
.test-panel[hidden] { display: none !important; }
.test-current {
  background: #161616;
}
.test-current .hl-card.current {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px 24px;
  padding: 14px 18px 16px;
  background: #161616;
}
.test-current .hl-card.current .hl-current-main {
  flex: 0 0 auto;
  min-width: 168px;
}
.test-current .hl-card.current .hl-time {
  font-size: 36px;
  margin: 4px 0 2px;
}
.test-current .hl-card.current .hl-meta {
  margin-bottom: 0;
}
.test-current .hl-card.current .hl-secs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  min-width: 112px;
  margin-bottom: 0;
}
.test-current .hl-card.current .hl-secs > div {
  display: grid;
  grid-template-columns: 22px minmax(72px, auto) minmax(52px, auto);
  align-items: baseline;
  gap: 8px;
}
.test-current .hl-card.current .hl-secs label {
  display: block;
}
.test-current .hl-card.current .hl-secs b {
  font-size: 16px;
}
.test-current .hl-card.current .hl-secs .hl-sec-d {
  display: block;
  margin-top: 0;
  text-align: right;
}
.hl-current-chart {
  flex: 1 1 220px;
  min-width: 160px;
  position: relative;
  min-height: 96px;
  border: 1px solid var(--stroke);
  background: #111111;
}
.hl-current-chart canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.test-current .hl-card.current .hl-current-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  flex: 0 1 auto;
  width: auto;
  align-content: center;
}
.test-current .hl-card.current .hl-row {
  border-top: 0;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 88px;
  font-size: 14px;
}
.test-headlines {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--stroke);
}
.test-headlines .hl-card {
  flex: 1 1 0;
  min-width: 160px;
}
.hl-card {
  background: #161616;
  padding: 12px 14px 14px;
  min-width: 0;
  box-shadow: inset 4px 0 0 var(--stroke);
}
.hl-card header {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.hl-card.best { box-shadow: inset 4px 0 0 var(--good); }
.hl-card.best header,
.hl-card.best .hl-time { color: var(--good); }
.hl-card.avg { box-shadow: inset 4px 0 0 var(--you); }
.hl-card.avg header,
.hl-card.avg .hl-time { color: var(--you); }
.hl-card.last { box-shadow: inset 4px 0 0 var(--accent); }
.hl-card.last header,
.hl-card.last .hl-time { color: var(--accent); }
.hl-card.last.is-best { box-shadow: inset 4px 0 0 var(--good); }
.hl-card.last.is-best header,
.hl-card.last.is-best .hl-time { color: var(--good); }
.hl-card.current { box-shadow: inset 4px 0 0 var(--text); }
.hl-card.current header,
.hl-card.current .hl-time { color: var(--text); }
.hl-card.current.pace-fast { box-shadow: inset 4px 0 0 var(--good); }
.hl-card.current.pace-fast header,
.hl-card.current.pace-fast .hl-time { color: var(--good); }
.hl-card.current.pace-slow { box-shadow: inset 4px 0 0 var(--bad); }
.hl-card.current.pace-slow header,
.hl-card.current.pace-slow .hl-time { color: var(--bad); }
.hl-card.ideal { box-shadow: inset 4px 0 0 var(--ideal); }
.hl-card.ideal header,
.hl-card.ideal .hl-time { color: var(--ideal); }
.hl-card.pb { box-shadow: inset 4px 0 0 var(--pb); }
.hl-card.pb header,
.hl-card.pb .hl-time { color: var(--pb); }
.hl-card.wr { box-shadow: inset 4px 0 0 var(--wr); }
.hl-card.wr header,
.hl-card.wr .hl-time { color: var(--wr); }
.hl-time {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  margin: 6px 0 4px;
  line-height: 1.1;
}
.hl-meta {
  color: var(--dim);
  font-size: 11px;
  font-family: var(--mono);
  margin-bottom: 10px;
}
.hl-secs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.hl-secs label {
  display: block;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hl-secs b {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
}
.hl-sec-d {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 2px;
  color: var(--dim);
}
.hl-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--stroke);
}
.hl-row span { color: var(--dim); }
.hl-row b { font-family: var(--mono); font-weight: 600; }
.hl-row b.neg { color: var(--good); }
.hl-row b.pos { color: var(--bad); }

.test-hud {
  background: #0a0a0a;
  padding: 16px 18px 18px;
}
.test-hud header {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.test-hud-board {
  display: grid;
  gap: 0;
  max-width: 560px;
}
.hud-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 120px;
  align-items: baseline;
  gap: 16px;
  min-height: 42px;
  padding: 6px 0;
  border-bottom: 1px solid #222;
  font-family: var(--mono);
}
.hud-lab {
  color: var(--dim);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
}
.hud-time {
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  line-height: 1.05;
}
.hud-delta {
  font-size: 22px;
  text-align: right;
  color: var(--dim);
}
.hud-row.ideal .hud-lab,
.hud-row.ideal .hud-time { color: var(--ideal); }

.chart-card {
  background: #161616;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 6px;
}
.chart-card header {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
  flex: 0 0 auto;
}
.chart-live-val {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-left: 8px;
}
.chart-live-val.high { color: var(--bad); }
.chart-card canvas {
  width: 100%;
  display: block;
  cursor: crosshair;
}
.chart-card.chart-hero canvas { height: 200px; }
.chart-card.chart-spark canvas { height: 88px; }
.chart-card.chart-split canvas { height: 168px; }
.chart-card.chart-stack canvas { height: 78px; }
.chart-stack-div {
  height: 1px;
  margin: 4px -10px;
  background: var(--stroke);
}
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--stroke);
}
.chart-series {
  margin: 0 0 4px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
}
.chart-series .ser-front { color: var(--you); }
.chart-series .ser-rear { color: var(--warn); }
.chart-series .ser-eng { color: var(--bad); }
.chart-series .ser-water { color: var(--you); }
.test-lap-table {
  padding-bottom: 10px;
}
.test-lap-table header {
  font-size: 11px;
  letter-spacing: 0.14em;
}
.hm-caption {
  margin: 0 0 8px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  max-width: 72em;
}
.hm-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
}
.hm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 15px;
}
.hm-table th {
  background: #111111;
  color: var(--dim);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--stroke);
}
.hm-table th:first-child,
.hm-table td:first-child { text-align: left; }
.hm-table td {
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
  vertical-align: top;
}
.hm-sec { white-space: normal; }
.hm-sec-time { display: block; }
.hm-sec-gear {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 400;
}
.hm-sec-time.hm-best,
.hm-sec-time.hm-good,
.hm-sec-time.hm-slow,
.hm-sec-time.hm-bad { background: transparent; }
.hm-row { cursor: default; }
.hm-row:hover { background: #1c1c1c; }
.hm-row.on { outline: 1px solid #333; outline-offset: -1px; }
.hm-row.best { background: #111111; }
.hm-row.ideal { background: #111111; cursor: default; }
.hm-row.ideal td { color: var(--ideal); }
.hm-row.out { opacity: 0.5; }
.lap-eye-cell {
  width: 36px;
  text-align: center;
  padding-right: 8px;
}
.lap-eye {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--dim);
  background: #0a0a0a;
  border: 1px solid #333;
  cursor: pointer;
}
.lap-eye:hover,
.lap-eye:focus {
  color: var(--text);
  border-color: var(--text);
}
.hm-best { color: #c9a0ff; background: #111111; }
.hm-good { color: var(--good); }
.hm-slow { color: var(--warn); }
.hm-bad { color: var(--bad); }
.hm-setup {
  color: var(--dim);
  font-size: 13px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-fuel {
  color: var(--you);
  font-size: 15px;
}
.hm-table .lap-delta.neg { color: var(--good); }
.hm-table .lap-delta.pos { color: var(--bad); }
.test-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  min-width: 168px;
  max-width: 280px;
  padding: 8px 10px;
  background: #111;
  border: 1px solid var(--stroke);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
}
.test-tip b { color: var(--accent); }
.test-tip .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.test-tip .tip-dim { color: var(--dim); }
.test-note {
  padding: 6px 12px 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  background: #111;
  border-top: 1px solid var(--stroke);
}
.test-note.warn {
  color: var(--accent);
}

.lap-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.lap-modal[hidden] { display: none !important; }
.lap-modal-scrim {
  position: absolute;
  inset: 0;
  background: #000;
}
.lap-modal-panel {
  position: relative;
  z-index: 1;
  margin: 20px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #161616;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}
.lap-modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0a0a0a;
  border-bottom: 1px solid #333;
}
.lap-modal-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.lap-modal-head .test-legend {
  flex: 1;
  justify-content: flex-start;
}
.lap-modal-close {
  appearance: none;
  -webkit-appearance: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  background: #0a0a0a;
  border: 1px solid #333;
  cursor: pointer;
}
.lap-modal-close:hover { border-color: var(--text); }
.lap-modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.lap-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #333;
  border-bottom: 1px solid #333;
}
.lap-modal-meta .hl-card {
  flex: 1 1 220px;
  margin: 0;
  border: 0;
}
.lap-modal-charts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #333;
  padding: 0;
}
.lap-modal-charts .chart-card {
  background: #161616;
}
.lap-modal-charts canvas {
  width: 100%;
  display: block;
}
.lap-modal-spd { height: 140px; }
.lap-modal-charts .chart-split canvas { height: 140px; }
.lap-modal-charts .chart-stack canvas { height: 72px; }

/* CBR Live Timing — server tabs + layout (broadcast product) */
#app.cbr-live {
  /* tabs, topbar, dashboard, ticker — topbar must NOT be the 1fr row */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
#app.cbr-live > .server-tabs,
#app.cbr-live > .topbar {
  flex: 0 0 auto;
  min-height: 0;
  align-self: stretch;
}
.server-tabs {
  display: flex;
  gap: 0;
  background: #0a0a0a;
  border-bottom: 1px solid #333;
  padding: 0 12px;
  min-height: 0;
  align-items: stretch;
}
.server-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8a9098;
  font: 700 10px/1 Exo, Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
}
.server-tab:hover { color: #d7dde6; }
.server-tab.on {
  color: #d7dde6;
  border-bottom-color: #d7dde6;
}
#app.cbr-live .menu-wrap,
#app.cbr-live .radio-ctrl { display: none !important; }
#app.cbr-live .topbar {
  padding: 4px 12px;
}
#app.cbr-live .brand-sub {
  display: none;
}

/* CBR live: You + Lap Times stacked full width (same race-board area as before) */
#app.cbr-live:not(.dash-mode):not(.tel-mode):not(.stream-mode) .race-board {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
#app.cbr-live .race-you-glance {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
#app.cbr-live .race-laps-glance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#app.cbr-live .race-you-glance .glance b {
  font-size: clamp(22px, 4.5vh, 40px);
  overflow: visible;
}
#app.cbr-live .race-you-glance .glance.pos b {
  font-size: clamp(28px, 5.5vh, 48px);
}
#app.cbr-live .race-you-panel .panel-head h1 {
  flex: 0 1 auto;
  max-width: 42%;
}
#app.cbr-live .race-you-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #8a9098;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
#app.cbr-live .race-laps-glance .glance {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  overflow: visible;
}
#app.cbr-live .race-laps-glance .glance b {
  font-size: clamp(18px, 3.5vh, 28px);
  overflow: visible;
}

@media (max-width: 1100px) {
  .dashboard { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}