:root {
  --bg: #05070b;
  --bg-accent: #11161d;
  --panel: rgba(16, 22, 29, 0.92);
  --panel-strong: #0c1117;
  --panel-soft: #141b23;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f6f7fb;
  --muted: #97a3b3;
  --accent: #e10600;
  --accent-soft: rgba(225, 6, 0, 0.18);
  --green: #1ecb81;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(225, 6, 0, 0.24), transparent 28%),
    radial-gradient(circle at top right, rgba(46, 72, 111, 0.18), transparent 30%),
    linear-gradient(180deg, #07090d 0%, #0a0f15 100%);
}

button,
select {
  font: inherit;
}

.hidden {
  display: none !important;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 16px;
}

.auth-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.92);
  backdrop-filter: blur(6px);
}

.auth-gate-card {
  position: relative;
  width: min(420px, 100%);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(21, 27, 35, 0.98) 0%, rgba(12, 17, 23, 1) 100%);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.auth-gate-card h2 {
  font-size: 20px;
}

.auth-gate-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 12px;
}

.auth-gate-card .primary-btn {
  margin-top: 16px;
  min-height: 36px;
  padding: 0 20px;
  font-size: 13px;
}

.auth-gate-status {
  color: var(--accent) !important;
}

.app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px;
}

.hero,
.control-bar,
.status-card,
.summary-card,
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21, 27, 35, 0.95) 0%, rgba(12, 17, 23, 0.98) 100%);
  box-shadow: var(--shadow);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% 0 auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(225, 6, 0, 0.2) 0%, transparent 68%);
  pointer-events: none;
}

.hero-copy {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px 14px;
  max-width: 1100px;
}

.hero-copy .hero-text {
  margin: 0 0 2px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

h1,
h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 0.95;
}

.hero-title-accent {
  color: var(--accent);
}

.hero-title-light {
  font-weight: 300;
  color: var(--text);
}

h2 {
  font-size: 17px;
}

.hero-text,
.panel-note,
.live-copy p {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.5;
  font-size: 11px;
}

.hero-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 180px;
}

.mode-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.mode-btn,
.primary-btn,
.secondary-btn {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, opacity 120ms ease;
  font-size: 11px;
}

.mode-btn {
  color: var(--muted);
  background: transparent;
}

.mode-btn.active {
  background: var(--text);
  color: #07090d;
}

.primary-btn {
  background: linear-gradient(135deg, #ff2d20 0%, var(--accent) 100%);
  color: #fff;
  font-weight: 700;
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.mode-btn:not(:disabled):hover,
.primary-btn:not(:disabled):hover,
.secondary-btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.mode-btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 10px;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(30, 203, 129, 0.6);
  animation: pulse 1.8s infinite;
}

.control-bar {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 16px;
  margin-bottom: 12px;
}

.top-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.selector-stack {
  display: grid;
  gap: 6px;
}

.top-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.race-control-shell {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.weather-mini-panel {
  padding: 6px 8px;
}

.telemetry-empty-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.title-action-hint {
  display: inline-block;
  margin-left: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  vertical-align: baseline;
}

.lap-matrix-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-org-switcher {
  display: inline-flex;
  align-items: center;
}

.plot-select-pro-hint {
  font-size: 11px;
  color: rgb(251, 191, 36);
  align-self: center;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.auth-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.auth-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-user-label {
  font-size: 0.85em;
  opacity: 0.85;
  white-space: nowrap;
}

.weather-topbar-card {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-left: auto;
  max-width: min(980px, 72vw);
  min-width: 0;
  cursor: pointer;
}

.hero > .weather-topbar-card {
  flex: 0 1 auto;
  max-width: min(920px, 62vw);
}

.weather-topbar-card:hover,
.weather-topbar-card:focus-visible {
  border-color: rgba(111, 182, 255, 0.5);
  background: rgba(111, 182, 255, 0.08);
  outline: none;
}

.weather-topbar-card:not(.hidden) + .view-time-display {
  margin-left: 0;
}

.weather-mini-title {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.weather-mini-heading {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.weather-mini-heading h2 {
  font-size: 13px;
}

.weather-mini-stats {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.weather-mini-stat {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.weather-mini-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.weather-mini-value {
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  font-weight: 600;
}

.replay-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  margin-bottom: 12px;
}

.replay-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.replay-speed-group {
  display: inline-flex;
  gap: 6px;
}

.replay-speed-btn.active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text);
}

.replay-time-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 86px;
}

.replay-time-readout strong {
  font-size: 12px;
  color: var(--text);
}

.replay-step-group {
  display: inline-flex;
  gap: 6px;
}

.replay-step-negative {
  color: #ff6b6b;
}

.replay-step-positive {
  color: #54d98c;
}

.replay-track-shell {
  position: relative;
  padding-top: 14px;
}

.replay-track-markers {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 100%;
  pointer-events: none;
}

.replay-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.replay-marker-line {
  width: 2px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}

.replay-marker-label {
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.replay-marker-start .replay-marker-line,
.replay-marker-end .replay-marker-line {
  background: rgba(255,255,255,0.6);
}

.replay-marker-sc .replay-marker-line {
  background: #ffd60a;
}

.replay-marker-vsc .replay-marker-line {
  background: #4fb2ff;
}

.replay-marker-rf .replay-marker-line {
  background: #e10600;
}

.replay-marker-rf .replay-marker-label {
  color: #e10600;
  border-color: rgba(225, 6, 0, 0.4);
}

.replay-range {
  width: 100%;
  appearance: none;
  height: 28px;
  background: transparent;
}

.replay-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
}

.replay-range::-webkit-slider-thumb {
  appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e10600;
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.22);
  cursor: pointer;
}

.replay-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
}

.replay-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e10600;
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.22);
  cursor: pointer;
}

.control-bar-compact {
  padding: 10px 12px;
  gap: 8px;
  margin-bottom: 0;
}

.inline-status-card {
  display: grid;
  gap: 2px;
  min-width: 120px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.inline-status-card-update {
  flex: 0 0 120px;
}

.inline-status-card-session {
  flex: 1 1 280px;
  min-width: 240px;
  max-width: none;
}

.inline-status-card-session .card-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 210px;
  flex: 1 1 210px;
}

.compact-field {
  flex: 0 0 110px;
  min-width: 110px;
}

.compact-select-field {
  min-width: 108px;
  flex: 0 1 120px;
}

.field span {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

select {
  min-height: 30px;
  padding: 5px 8px;
  color: var(--text);
  background: #3a414c;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
}

select option {
  color: var(--text);
  background: #3a414c;
}

select:focus {
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: 1px;
}

input[type="number"] {
  min-height: 30px;
  padding: 5px 8px;
  color: var(--text);
  background: #3a414c;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
}

input[type="number"]:focus {
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: 1px;
}

.compact-btn {
  min-height: 30px;
  padding: 0 10px;
}

.live-copy {
  max-width: 500px;
}

.live-copy strong {
  display: block;
  font-size: 14px;
}

.status-grid,
.summary-grid,
.content-grid {
  display: grid;
  gap: 12px;
}

.status-grid {
  grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) minmax(110px, 0.6fr) minmax(120px, 0.7fr);
  margin-bottom: 12px;
}

.top-status-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.top-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0;
}

.status-card,
.summary-card {
  border-radius: 14px;
  padding: 8px;
}

.summary-card {
  min-width: 0;
}

.top-summary-grid .summary-card {
  padding: 6px 8px;
  border-radius: 9px;
  flex: 0 0 auto;
  min-width: 72px;
}

.top-summary-grid .summary-card--circuit {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.top-summary-grid .card-label {
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.top-summary-grid .card-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

/* Track Status in the aside — fills the full remaining space */
.race-control-shell .track-status-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px;
}

.race-control-shell .track-status-value {
  font-size: 30px;
  font-weight: 800;
  gap: 12px;
}

.race-control-shell .track-status-value::before {
  width: 16px;
  height: 16px;
}

.card-label {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-value {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}

.top-info-row .race-control-panel {
  min-height: 100%;
}

.top-info-row .top-summary-grid {
  padding-top: 2px;
}

.status-value {
  color: #ffd47f;
}

.track-status-value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  transition: color 0.3s;
}

.track-status-value::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  transition: background 0.3s;
}

.track-status-card {
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.track-status-card[data-status="green"] {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18) 0%, rgba(21, 128, 61, 0.12) 100%);
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12) inset;
}
.track-status-card[data-status="green"] .track-status-value  { color: #4ade80; }

.track-status-card[data-status="sc"] {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(180, 130, 10, 0.12) 100%);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12) inset;
}
.track-status-card[data-status="sc"] .track-status-value     { color: #fcd34d; }

.track-status-card[data-status="vsc"] {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.13) 0%, rgba(180, 130, 10, 0.09) 100%);
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08) inset;
}
.track-status-card[data-status="vsc"] .track-status-value    { color: #fbbf24; }

.track-status-card[data-status="red"] {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22) 0%, rgba(153, 27, 27, 0.15) 100%);
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15) inset;
}
.track-status-card[data-status="red"] .track-status-value    { color: #fca5a5; }

.track-status-card[data-status="clear"] {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0%, rgba(100, 116, 139, 0.08) 100%);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08) inset;
}
.track-status-card[data-status="clear"] .track-status-value { color: #cbd5e1; }

.track-status-card[data-status="chequered"] {
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, transparent 0% 50%)
    0 0 / 14px 14px,
    linear-gradient(180deg, rgba(21, 27, 35, 0.95) 0%, rgba(12, 17, 23, 0.98) 100%);
  border-color: rgba(255, 255, 255, 0.25);
}
.track-status-card[data-status="chequered"] .track-status-value {
  color: #f8fafc;
  gap: 5px;
}
.track-status-card[data-status="chequered"] .track-status-value::before {
  display: none;
}

.track-status-yellow-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.track-status-yellow-chip {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fde047;
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.4);
}

.track-status-yellow-chip.is-double {
  color: #fef08a;
  background: rgba(250, 204, 21, 0.22);
  border-color: rgba(250, 204, 21, 0.65);
}

.content-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(340px, 0.8fr);
  align-items: start;
}

.content-grid-full {
  grid-template-columns: minmax(0, 1fr);
}

.side-stack {
  display: grid;
  gap: 12px;
}

.race-control-panel {
  padding: 10px 12px;
  cursor: pointer;
  min-height: 0;
}

.race-control-panel .card-label {
  margin-bottom: 6px;
}

.race-control-expand-hint {
  margin-left: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
}

.race-control-list {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.race-control-list.race-control-flash {
  background: rgba(255, 213, 74, 0.3);
  border-color: rgba(255, 213, 74, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 213, 74, 0.28) inset;
}

.race-control-compact-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 68px;
  gap: 6px;
  padding: 5px 10px;
  align-items: center;
}

.race-control-compact-row + .race-control-compact-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.race-control-compact-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.race-control-compact-message {
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.race-control-compact-time {
  font-size: 9px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.race-control-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.03);
}

.race-control-compact-row[class*="race-control-tone-"],
.race-control-item[class*="race-control-tone-"] {
  border-color: var(--race-control-tone-border);
  background: var(--race-control-tone-bg);
  box-shadow: inset 3px 0 0 var(--race-control-tone-accent);
}

.race-control-compact-row[class*="race-control-tone-"] .race-control-compact-title,
.race-control-compact-row[class*="race-control-tone-"] .race-control-compact-message,
.race-control-item[class*="race-control-tone-"] .race-control-title,
.race-control-item[class*="race-control-tone-"] .race-control-message {
  color: var(--race-control-tone-text);
}

.race-control-tone-orange {
  --race-control-tone-accent: #fb923c;
  --race-control-tone-border: rgba(251, 146, 60, 0.46);
  --race-control-tone-bg: rgba(251, 146, 60, 0.12);
  --race-control-tone-text: #fdba74;
}

.race-control-tone-yellow {
  --race-control-tone-accent: #facc15;
  --race-control-tone-border: rgba(250, 204, 21, 0.48);
  --race-control-tone-bg: rgba(250, 204, 21, 0.12);
  --race-control-tone-text: #fde047;
}

.race-control-tone-red {
  --race-control-tone-accent: #ef4444;
  --race-control-tone-border: rgba(239, 68, 68, 0.5);
  --race-control-tone-bg: rgba(239, 68, 68, 0.13);
  --race-control-tone-text: #fca5a5;
}

.race-control-tone-stewards {
  --race-control-tone-accent: #ff1f2d;
  --race-control-tone-border: rgba(255, 31, 45, 0.62);
  --race-control-tone-bg: rgba(255, 31, 45, 0.15);
  --race-control-tone-text: #ff4d57;
}

.race-control-tone-stewards .race-control-compact-title,
.race-control-tone-stewards .race-control-compact-message,
.race-control-tone-stewards .race-control-title,
.race-control-tone-stewards .race-control-message {
  font-weight: 800;
}

.race-control-tone-green {
  --race-control-tone-accent: #22c55e;
  --race-control-tone-border: rgba(34, 197, 94, 0.46);
  --race-control-tone-bg: rgba(34, 197, 94, 0.12);
  --race-control-tone-text: #86efac;
}

.race-control-columns {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: start;
}


.race-control-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.race-control-time,
.race-control-message {
  font-size: 11px;
  color: var(--muted);
}



.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(21, 27, 35, 0.98) 0%, rgba(12, 17, 23, 1) 100%);
  box-shadow: var(--shadow);
  padding: 14px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.official-import-card {
  width: min(560px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.official-import-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.official-import-drop-zone {
  position: relative;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.official-import-drop-zone:hover,
.official-import-drop-zone.drag-over {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.03);
}

.official-import-file-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.official-import-file-label {
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
  display: block;
}

.official-import-status {
  font-size: 11px;
  color: var(--muted);
  min-height: 16px;
}

.official-import-status.ok {
  color: rgb(52, 211, 153);
}

.official-import-status.err {
  color: rgb(248, 113, 113);
}

.official-import-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#openf1-auth-modal label {
  display: block;
  margin-bottom: 10px;
}

#openf1-auth-modal label span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

#openf1-auth-modal input[type="text"],
#openf1-auth-modal input[type="password"],
#openf1-auth-modal select {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  color: var(--text);
  background: #3a414c;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
}

.official-active {
  border-color: rgba(52, 211, 153, 0.6);
  color: rgb(52, 211, 153);
}

.race-control-modal-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  max-height: calc(100vh - 150px);
  padding-right: 4px;
}

.race-control-modal-list .race-control-item:last-child {
  border-color: rgba(255, 255, 255, 0.2);
}


.panel {
  border-radius: 16px;
  padding: 12px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 10px;
}

.panel-heading-compact {
  margin-bottom: 8px;
}

.view-time-display {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.view-time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.view-time-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  line-height: 1;
}

.view-time-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.view-time-note {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.view-time-divider {
  width: 1px;
  height: 28px;
  background: var(--line);
  flex-shrink: 0;
}

.title-session-name {
  color: #6fb6ff;
}

.matrix-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px;
  margin-bottom: 8px;
}

.matrix-toolbar-status {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.matrix-toolbar-status .view-time-display {
  margin-left: 0;
}

.plot-select-field {
  min-width: 175px;
  flex: 0 0 175px;
}

.fuel-input-field {
  min-width: 96px;
  flex: 0 0 96px;
}

.cow-dry-ref-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0;
}

.cow-time-input {
  width: 72px;
  font-variant-numeric: tabular-nums;
}

.validity-select-field {
  min-width: 92px;
  flex: 0 0 92px;
}

.clean-air-gap-field {
  min-width: 78px;
  flex: 0 0 78px;
}

.lap-validation-controls {
  display: inline-flex;
  align-items: end;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.lap-validation-title {
  align-self: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 2px;
}

.toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
}

.toggle-option input {
  accent-color: var(--accent);
}

.toggle-option.mc-modified {
  border-color: #f59e0b;
  color: #f59e0b;
}

.mc-revert-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  white-space: nowrap;
}

.mc-revert-btn:hover {
  background: rgba(245, 158, 11, 0.25);
}

.empty-state,
.empty-mini {
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 11px;
}

.table-wrap {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.plot-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.plot-stage-with-summary {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.plot-stage-with-summary-compact {
  grid-template-columns: 440px minmax(0, 1fr);
}

.plot-stage-sidebar-right {
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "chart sidebar";
  align-items: start;
}

.plot-stage-sidebar-right .plot-wrap {
  grid-area: chart;
}

.plot-stage-sidebar-right .plot-summary-strip {
  grid-area: sidebar;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 24, 31, 0.58);
  backdrop-filter: blur(4px);
  height: min(74.8vh, 704px);
  max-height: min(74.8vh, 704px);
  overflow: auto;
}

.plot-stage-race-position {
  grid-template-columns: 175px minmax(0, 1fr) 374px;
  grid-template-areas: "grid chart sidebar";
  align-items: start;
}

.plot-stage-race-position .plot-grid-sidebar {
  grid-area: grid;
}

.plot-stage-race-position .plot-wrap {
  grid-area: chart;
  height: min(74.8vh, 704px);
  max-height: min(74.8vh, 704px);
}

.plot-stage-race-position .plot-summary-strip {
  grid-area: sidebar;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 24, 31, 0.58);
  backdrop-filter: blur(4px);
  height: min(74.8vh, 704px);
  max-height: min(74.8vh, 704px);
  overflow: auto;
}

.plot-grid-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 24, 31, 0.58);
  backdrop-filter: blur(4px);
  height: min(74.8vh, 704px);
  max-height: min(74.8vh, 704px);
  overflow: auto;
}

.plot-grid-card {
  display: grid;
  grid-template-columns: 22px 1fr 20px;
  align-items: center;
  column-gap: 5px;
  min-height: 22px;
  padding: 2px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 3px 0 0 var(--grid-accent, rgba(255,255,255,0.18));
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.plot-grid-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.plot-grid-card.is-selected {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 4px 0 0 var(--grid-accent, rgba(255,255,255,0.18));
}

.plot-grid-card.is-locked {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 4px 0 0 var(--grid-accent, rgba(255,255,255,0.18)), 0 0 0 1px rgba(255,255,255,0.06);
}

.plot-grid-title {
  margin: 2px 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.plot-grid-pos {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
}

.plot-grid-driver {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plot-summary-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plot-stage-with-summary .plot-summary-strip {
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 24, 31, 0.58);
  backdrop-filter: blur(4px);
  height: min(74.8vh, 704px);
  max-height: min(74.8vh, 704px);
  overflow: auto;
}

.plot-summary-strip-traffic {
  width: 100%;
  justify-self: start;
  align-self: start;
}

.plot-stage-with-summary .plot-summary-strip.plot-summary-strip-traffic {
  height: auto;
  max-height: min(74.8vh, 704px);
}

.plot-summary-free-stop {
  padding: 6px 7px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.plot-summary-section-title {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.plot-summary-section-title-free-stop {
  color: #ffd15c;
}

.plot-summary-section-title-sc {
  color: #6fb6ff;
}

.plot-summary-section-title-pit {
  color: #7df7c5;
}

.plot-summary-free-stop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.plot-summary-free-stop-item,
.plot-summary-free-stop-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.plot-summary-free-stop-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--free-stop-accent, #ffffff) 16%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 3px 0 0 var(--free-stop-accent, rgba(255,255,255,0.24));
  color: var(--text);
  cursor: pointer;
}

.plot-summary-free-stop-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.plot-summary-free-stop-item-selected {
  box-shadow: inset 3px 0 0 var(--free-stop-accent, rgba(255,255,255,0.24)), 0 0 0 1px color-mix(in srgb, var(--free-stop-accent, #ffffff) 60%, transparent);
}

.plot-summary-free-stop-driver {
  font-weight: 700;
  color: var(--free-stop-accent, var(--text));
}

.plot-summary-free-stop-gap {
  color: var(--muted);
  white-space: nowrap;
}

.plot-summary-pit-loss-neutralization {
  color: #6fb6ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.plot-summary-free-stop-empty {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.plot-summary-driver-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plot-summary-card {
  display: grid;
  grid-template-columns: 34px minmax(100px, 1fr) minmax(62px, 76px) minmax(64px, auto) 24px auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 3px 0 0 var(--summary-accent, rgba(255,255,255,0.18));
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.plot-summary-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.plot-summary-card.is-selected {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 4px 0 0 var(--summary-accent, rgba(255,255,255,0.18));
}

.plot-summary-card.is-locked {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 4px 0 0 var(--summary-accent, rgba(255,255,255,0.18)), 0 0 0 1px rgba(255,255,255,0.06);
}

.plot-summary-pos {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.plot-summary-driver {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plot-summary-team {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 5px;
}

.plot-summary-gap {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  justify-self: end;
  text-align: right;
  padding-left: 2px;
}

.plot-summary-ahead {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  justify-self: end;
  text-align: right;
  padding-left: 2px;
}

.plot-summary-tyre {
  justify-self: end;
}

.plot-summary-scvsc-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 4px;
  border-radius: 3px;
  background: #3a3f4a;
  color: #8a95a3;
  line-height: 1.4;
  align-self: center;
}
.plot-summary-scvsc-badge.is-stop-free {
  background: rgba(30, 203, 129, 0.2);
  color: #1ecb81;
}
.plot-summary-scvsc-badge.is-stop {
  background: rgba(250, 152, 0, 0.2);
  color: #fa9800;
}
.plot-summary-scvsc-badge.is-stay {
  background: rgba(225, 6, 0, 0.2);
  color: #e10600;
}

.plot-wrap {
  position: relative;
  height: min(68vh, 640px);
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  padding: 10px;
}

.plot-overlay-info {
  position: absolute;
  top: 44px;
  left: 58px;
  right: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(300px, calc(100% - 90px));
  pointer-events: none;
}

.plot-overlay-info .plot-summary-free-stop {
  background: rgba(12, 18, 24, 0.72);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.plot-summary-pit-loss-list {
  display: flex;
  flex-direction: column;
}

.plot-overlay-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.9fr);
  gap: 6px;
  align-items: start;
}

.plot-overlay-column {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.plot-overlay-column-right .plot-summary-free-stop {
  min-height: 100%;
}

.plot-stage-with-summary .plot-summary-strip {
  grid-column: 1;
  grid-row: 1;
}

.plot-stage-with-summary .plot-wrap {
  grid-column: 2;
  grid-row: 1;
  height: min(74.8vh, 704px);
}

.telemetry-wrap {
  position: relative;
  margin-top: 10px;
}

.telemetry-plot-wrap {
  height: min(84vh, 840px);
}

.telemetry-circuit-map-card {
  position: absolute;
  width: 420px;
  height: 260px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  z-index: 65;
  touch-action: none;
  user-select: none;
}

.telemetry-circuit-map-card canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.telemetry-cross-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: flex-start;
  gap: 6px;
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.telemetry-cross-select {
  min-width: 0;
  width: 88px;
  font-size: 13px;
  padding: 4px 6px;
}

#telemetry-cross-add-btn {
  font-size: 13px;
  padding: 4px 12px;
  min-height: 0;
}

.telemetry-cross-status {
  flex-basis: 100%;
  text-align: right;
  font-size: 12px;
  color: #97a3b3;
  min-height: 14px;
}

.tz-lap-option-fastest {
  color: #54d98c;
  font-weight: 700;
}

.telemetry-stats-sessiontag {
  font-size: 10px;
  font-weight: 400;
  color: #6fb6ff;
  opacity: 0.85;
  margin-left: 4px;
}

.telemetry-zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 2px 6px;
}

.tz-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #97a3b3;
  letter-spacing: 0.02em;
}

.telemetry-power-toggle {
  margin-left: auto;
  cursor: pointer;
}

.telemetry-accxy-toggle,
.telemetry-stepped-controls-toggle {
  cursor: pointer;
}

.telemetry-power-toggle input,
.telemetry-accxy-toggle input,
.telemetry-stepped-controls-toggle input {
  margin: 0;
  cursor: pointer;
}

.tz-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.tz-legend-swatch-full { background: rgba(84,217,140,0.45); }
.tz-legend-swatch-high { background: rgba(255,123,114,0.45); }
.tz-legend-swatch-mid { background: rgba(255,213,74,0.4); }
.tz-legend-swatch-low { background: rgba(111,182,255,0.45); }

.telemetry-scatter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  padding: 8px 0 0;
  overflow-x: auto;
}

.telemetry-scatter-panel {
  min-width: 220px;
  height: 300px;
}

.telemetry-selection-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.telemetry-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  font-size: 10px;
  color: var(--text);
}

.telemetry-controls-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.telemetry-stats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.telemetry-stats-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  min-width: 130px;
}

.telemetry-stats-card-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.telemetry-stats-laptime {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  opacity: 0.75;
}

.telemetry-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.telemetry-throttle-pct {
  font-size: 10px;
  font-weight: 700;
  color: #f0c040;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.telemetry-brake-pct {
  font-size: 10px;
  font-weight: 700;
  color: #ff6b6b;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.telemetry-zone-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tz-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.tz-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #697383;
}
.tz-pct {
  font-size: 14px;
  font-weight: 600;
  color: #c8d0dc;
}
.tz-delta-pos {
  font-size: 12px;
  font-weight: 600;
  color: #ff6b6b;
}
.tz-delta-neg {
  font-size: 12px;
  font-weight: 600;
  color: #6bcb77;
}
.tz-delta-zero {
  font-size: 12px;
  color: #697383;
}

.telemetry-braking-energy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.telemetry-braking-energy .tz-label {
  color: #ff6b6b;
}

.telemetry-clipping-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.telemetry-clipping-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.telemetry-clipping-cell .tz-pct {
  color: #ffd54a;
}
.telemetry-clipping-cell--super .tz-pct {
  color: #ff6b6b;
}
.telemetry-selection-chip button {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.12);
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
}

.plot-wrap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: min(72vh, 720px);
}

.plot-wrap-championship {
  height: auto;
  overflow-y: visible;
}

.plot-wrap-grid-tyre-deg {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  grid-template-rows: minmax(0, min(72vh, 720px)) 900px;
  height: auto;
}

.plot-panel-full-width {
  grid-column: 1 / -1;
  position: relative;
}

.stint-compound-filter {
  position: absolute;
  top: 10px;
  right: 14px;
  display: flex;
  gap: 5px;
  z-index: 4;
}

.stint-cmp-btn {
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid var(--cmp-color, #888);
  color: var(--cmp-color, #ccc);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
  letter-spacing: 0.03em;
}

.stint-cmp-btn.active {
  opacity: 1;
  background: color-mix(in srgb, var(--cmp-color, #888) 20%, transparent);
}

.stint-cmp-btn:hover {
  opacity: 0.8;
}

/* ── Strategy view layout ────────────────────────────────────────────────── */
.plot-stage.strategy-active {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: min(88vh, 900px);
  width: 100%;
}

.plot-stage.strategy-active #plot-wrap {
  flex: 1 !important;
  min-width: 0 !important;
  width: 0 !important;          /* flex-basis trick: flex:1 sets basis to 0, so this forces equal distribution */
  height: min(88vh, 900px) !important;
  max-height: none !important;
  border-radius: 0 14px 14px 0;
}

.plot-stage.strategy-active .plot-wrap-grid {
  grid-template-columns: 1fr !important;
}

.strategy-driver-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px 0 0 14px;
  border: 1px solid var(--line);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--panel-strong);
  overflow: hidden;
}

.strategy-driver-panel .sp-panel-heading {
  padding: 7px 10px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.strategy-driver-panel .sp-driver-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.sp-calc-wrap {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.sp-calc-btn {
  width: 100%;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  text-align: center;
}

.sp-calc-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.sp-calc-primary {
  background: rgba(79, 195, 247, 0.15);
  border-color: rgba(79, 195, 247, 0.4);
  color: #4fc3f7;
}

.sp-calc-primary:hover {
  background: rgba(79, 195, 247, 0.25);
}

.sp-empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  max-width: 280px;
  line-height: 1.6;
}

.sp-mc-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.sp-mc-error {
  color: #ef5350;
}

.sp-mc-table-wrap {
  overflow-x: auto;
}

.sp-mc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.sp-mc-table th,
.sp-mc-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.sp-qual-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.sp-qual-driver-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sp-qual-driver-row {
  display: grid;
  grid-template-columns: 18px 28px 26px 34px repeat(4, 26px) 62px 18px;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.sp-stop-pills {
  display: flex;
  gap: 2px;
  align-items: center;
}

.sp-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: background 0.1s, color 0.1s;
}

.sp-stop-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sp-stop-btn.sp-stop-active {
  background: rgba(80, 140, 255, 0.28);
  border-color: rgba(100, 160, 255, 0.65);
  color: #b8d0ff;
}

.sp-qual-sim-pos {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sp-qual-pos-gain {
  color: #81c784;
  font-size: 8px;
}

.sp-qual-pos-loss {
  color: #e57373;
  font-size: 8px;
}

.sp-qual-pos-same {
  color: rgba(255, 255, 255, 0.25);
  font-size: 8px;
}

.strategy-driver-panel.sp-panel-wide {
  width: 370px;
}

.sp-pace-delta-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sp-pace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}

.sp-pace-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sp-pace-lbl {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
  letter-spacing: -0.3px;
}

.sp-reopt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(100, 160, 255, 0.35);
  background: rgba(80, 140, 255, 0.1);
  color: rgba(140, 180, 255, 0.7);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}

.sp-reopt-btn:hover {
  background: rgba(80, 140, 255, 0.25);
  color: #b8d0ff;
}

.sp-qual-stint-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 26px;
  height: auto;
  border-radius: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 1px 0;
  transition: transform 0.1s;
}

.sp-stint-laps {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
  margin-top: 2px;
  pointer-events: none;
}

.sp-qual-stint-slot:hover {
  transform: scale(1.12);
}

.sp-qual-stint-slot.sp-stint-empty {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  cursor: default;
  font-size: 9px;
}

.sp-qual-stint-slot .tyre-badge {
  width: 16px;
  height: 16px;
  font-size: 8px;
  pointer-events: none;
}

.sp-compound-popup {
  position: fixed;
  z-index: 9999;
  background: #1a1d24;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  gap: 7px;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.sp-cmp-pick {
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
  cursor: pointer;
  border-width: 2px !important;
  border-color: transparent !important;
  transition: transform 0.1s, border-color 0.1s;
  flex-shrink: 0;
}

.sp-cmp-pick:hover {
  transform: scale(1.18);
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.sp-driver-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-driver-row {
  display: grid;
  grid-template-columns: 16px 28px 22px 38px 1fr;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
}

.sp-driver-row:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
}

.sp-driver-row.is-selected {
  border-left-color: var(--driver-color, #888);
  background: color-mix(in srgb, var(--driver-color, #888) 12%, transparent);
  color: rgba(255, 255, 255, 0.95);
}

.sp-pos {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sp-driver-code {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--driver-color, inherit);
  white-space: nowrap;
}

.sp-stops-done {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sp-stops-zero {
  color: rgba(255, 255, 255, 0.25);
}

.sp-gap {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.sp-tyre-history {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
}

.sp-hist-badge {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  font-size: 7px !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.sp-tyre-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-tyre-cell .tyre-badge {
  font-size: 9px;
  min-width: 20px;
  height: 18px;
  padding: 0 3px;
  line-height: 18px;
}

.sp-info-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.sp-gap-line {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-strat-line {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-driver-row.is-selected .sp-pos {
  color: rgba(255, 255, 255, 0.6);
}

.sp-driver-row.is-selected .sp-tyre-cell {
  color: rgba(255, 255, 255, 0.65);
}

.sp-driver-row.is-selected .sp-gap-line {
  color: rgba(255, 255, 255, 0.55);
}

.sp-driver-row.is-selected .sp-strat-line {
  color: rgba(255, 255, 255, 0.85);
}

.plot-wrap-grid-tyre-model {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Row 1 (raw Tyre Model chart) keeps its original height. Rows 2-3 (Editable
     Linear Tyre Model, Cumulative Time Lost, Power of Undercut) are 27.5% taller
     than row 1 (was 50% taller, reduced by 15%). */
  grid-template-rows: minmax(260px, 1fr) minmax(332px, 1.275fr) minmax(332px, 408px);
  height: calc(min(86vh, 900px) * 1.1375 + 421px);
}

.plot-wrap-grid-tyre-model .plot-panel:nth-child(1),
.plot-wrap-grid-tyre-model .plot-panel:nth-child(2) {
  grid-column: 1 / -1;
}

.plot-wrap-grid-top-speeds {
  grid-auto-rows: 345px;
  height: auto;
  overflow-y: visible;
}

.plot-wrap-grid-best-laps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* minmax(260px, 1fr) inside this auto-height container left 1fr undefined,
     which let rows balloon well past their 260px minimum. A fixed row height
     (same pattern as top-speeds/incidents below) avoids that and is ~50%
     shorter than the panels were rendering at. */
  grid-auto-rows: 380px;
  height: auto;
  overflow-y: visible;
}

.plot-wrap-grid-incidents {
  grid-auto-rows: 233px;
  height: auto;
  overflow-y: visible;
}

.plot-wrap-grid-weather {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  height: min(90vh, 792px);
}

.traffic-window-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}

.traffic-window-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.floating-traffic-overlay {
  position: fixed;
  top: 96px;
  right: 18px;
  width: 360px;
  height: 300px;
  min-width: 220px;
  min-height: 180px;
  overflow: hidden;
  z-index: 60;
  background: transparent;
  border: 0;
  cursor: move;
}

.floating-traffic-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

.floating-traffic-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.floating-traffic-close:hover {
  background: rgba(0, 0, 0, 0.68);
}

.plot-panel {
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px;
}

.plot-panel-title {
  font-size: 10px;
  color: #97a3b3;
  padding: 0 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
  letter-spacing: 0.01em;
}

.strategy-view-title {
  font-size: 10px;
  color: #97a3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
  margin-left: 8px;
  letter-spacing: 0.01em;
}

.plot-panel-editable-tyre-model {
  overflow: hidden;
}

.plot-panel-editable-overtaking-model {
  overflow: hidden;
}

.plot-panel-canvas {
  width: 100% !important;
  height: 100% !important;
  cursor: default;
}

.editable-tyre-model-table-wrap {
  position: absolute;
  top: 46px;
  right: 16px;
  z-index: 3;
  width: min(420px, calc(100% - 84px));
  max-height: calc(100% - 74px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(12, 18, 24, 0.82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  padding: 8px;
}

.fastest-stint-card {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  width: min(260px, calc(100% - 24px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(12, 18, 24, 0.82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  padding: 8px;
}

.fastest-stint-title {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}

.fastest-stint-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.fastest-stint-seg {
  height: 100%;
}

.fastest-stint-legend {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fastest-stint-legend-row {
  font-size: 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fastest-stint-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
  display: inline-block;
}

.editable-tyre-model-title {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}

.editable-tyre-model-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  color: var(--text);
}

.editable-tyre-model-table th,
.editable-tyre-model-table td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  white-space: nowrap;
}

.editable-tyre-model-table th {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.editable-tyre-model-compound {
  color: var(--compound-color);
  font-weight: 800;
}

.editable-tyre-model-table input {
  width: 68px;
  height: 22px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 10px;
}

.editable-tyre-model-table input:disabled {
  opacity: 0.45;
}

.championship-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.championship-card {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
}

.championship-card-full {
  grid-column: 1 / -1;
}

.championship-snapshot-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.championship-rounds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.championship-round-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.championship-round-chip.is-complete {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.championship-round-chip.is-current {
  border-color: rgba(255, 209, 92, 0.42);
  background: rgba(255, 209, 92, 0.12);
  color: #ffe7a2;
}

.championship-note {
  margin: 2px 0 0;
  font-size: 11px;
}

.championship-table-wrap {
  overflow: auto;
  width: fit-content;
  max-width: 100%;
}

.championship-table {
  width: fit-content;
  min-width: 0;
  table-layout: auto;
  font-size: 12px;
}

.championship-table th,
.championship-table td {
  padding: 2px 5px;
}

.championship-table tbody tr {
  border-left: 3px solid var(--champ-accent, transparent);
}

.championship-table .classification-col-pos,
.championship-table .classification-col-driver {
  width: auto;
}

.championship-table td.classification-col-driver,
.championship-table th.classification-col-driver,
.championship-table .classification-col-pos,
.championship-table .championship-col-team,
.championship-table .championship-col-points {
  width: auto !important;
  min-width: 0;
}

.championship-table .classification-col-driver {
  text-align: left;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.championship-col-team {
  text-align: left;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.championship-col-points {
  text-align: center;
  white-space: nowrap;
  width: 54px !important;
}

.championship-card {
  min-width: 0;
}

.championship-col-points strong,
.championship-name {
  font-size: inherit;
}

.championship-name {
  display: block;
  font-weight: 700;
}

.championship-subname {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.championship-chart-panel {
  height: 600px;
}

.championship-breakdown-chart-panel {
  height: 420px;
}

.championship-breakdown-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.championship-breakdown-table {
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
  width: 100%;
}

.championship-breakdown-table th,
.championship-breakdown-table td {
  padding: 2px 4px;
  border-bottom: 1px solid var(--line);
}

.championship-breakdown-table thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--panel-strong);
}

.championship-breakdown-name-col {
  text-align: left;
  min-width: 150px;
  position: sticky;
  left: 0;
  background: var(--panel-strong);
  z-index: 1;
  border-left: 3px solid var(--champ-accent, transparent);
  padding-left: 7px !important;
  font-weight: 600;
}

.championship-breakdown-table thead .championship-breakdown-name-col {
  border-left-color: transparent;
}

.championship-breakdown-round-col {
  text-align: center;
  min-width: 30px;
  width: 30px;
}

.championship-breakdown-cell {
  text-align: center;
  color: var(--text);
}

.championship-breakdown-zero {
  color: var(--muted);
}

.championship-breakdown-total-col {
  text-align: center;
  min-width: 44px;
  border-left: 1px solid var(--line-strong);
  font-weight: 600;
}

.championship-breakdown-forecast-col {
  border-left: 1px solid rgba(225, 160, 0, 0.35);
  border-right: 1px solid rgba(225, 160, 0, 0.35);
  background: rgba(225, 160, 0, 0.07);
  color: #f0c040;
}

.championship-breakdown-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.championship-breakdown-table tbody tr:hover .championship-breakdown-name-col {
  background: #161d26;
}

.championship-card .panel-heading-compact {
  margin-bottom: 4px;
}

.championship-card .panel-heading-compact h2 {
  font-size: 15px;
}

.championship-card .hero-text {
  font-size: 11px;
}

#plot-canvas {
  cursor: default;
}

#plot-canvas.is-axis-hover {
  cursor: ns-resize;
}

#plot-canvas.is-dragging {
  cursor: grabbing;
}

.timing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
}

.time-matrix-shell {
  overflow: hidden;
}

.time-matrix-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  background: linear-gradient(180deg, #181f28 0%, #10161d 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.time-matrix-axis-head,
.time-matrix-driver-head {
  padding: 6px 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.time-matrix-axis-head {
  position: sticky;
  left: 0;
  z-index: 5;
  background: linear-gradient(180deg, #181f28 0%, #10161d 100%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.time-matrix-driver-head {
  flex: 0 0 auto;
}

.time-matrix-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

.time-matrix-body {
  position: relative;
  background: var(--panel-strong);
}

.time-matrix-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
}

.time-matrix-tick,
.time-matrix-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.time-matrix-replay-cursor {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.time-matrix-tick-label,
.time-matrix-marker-label {
  position: absolute;
  left: 6px;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(13, 19, 26, 0.92);
  padding: 1px 4px;
  border-radius: 999px;
  z-index: 2;
}

.time-matrix-replay-label {
  position: absolute;
  left: 6px;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ff6b57;
  background: rgba(13, 19, 26, 0.96);
  padding: 1px 4px;
  border-radius: 999px;
  z-index: 3;
}

.time-matrix-tick-line,
.time-matrix-marker-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.time-matrix-replay-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 2px dashed rgba(255, 107, 87, 0.95);
}

.time-matrix-marker.is-start .time-matrix-marker-line,
.time-matrix-marker.is-end .time-matrix-marker-line {
  border-top-width: 2px;
  border-top-style: dashed;
  border-top-color: rgba(255, 255, 255, 0.72);
}

.time-matrix-marker.is-sc .time-matrix-marker-line {
  border-top-width: 2px;
  border-top-color: rgba(255, 213, 74, 0.92);
}

.time-matrix-marker.is-vsc .time-matrix-marker-line {
  border-top-width: 2px;
  border-top-color: rgba(79, 178, 255, 0.92);
}

.time-matrix-marker.is-start .time-matrix-marker-label,
.time-matrix-marker.is-end .time-matrix-marker-label {
  color: #ffffff;
}

.time-matrix-marker.is-sc .time-matrix-marker-label {
  color: #ffd54a;
}

.time-matrix-marker.is-vsc .time-matrix-marker-label {
  color: #4fb2ff;
}

.time-matrix-card {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 1px 4px;
  align-content: start;
  padding: 3px 5px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 24, 31, 0.94);
  box-shadow: inset 3px 0 0 var(--team-accent, rgba(255,255,255,0.2));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.time-matrix-card-time {
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
}

.time-matrix-card-tyre {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

.time-matrix-card-marker {
  color: #f59e0b;
  font-weight: 800;
}
.time-matrix-card-meta {
  grid-column: 1 / span 2;
  grid-row: 2;
  font-size: 8px;
  color: var(--muted);
  line-height: 1.15;
}

.classification-table {
  min-width: 1240px;
  table-layout: fixed;
}

.classification-table thead th {
  position: relative;
  overflow: hidden;
}

.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
}

.col-resize-handle:hover {
  background: rgba(255, 255, 255, 0.22);
}

body.col-resizing {
  cursor: col-resize !important;
  user-select: none;
}

body.col-resizing * {
  cursor: col-resize !important;
}

.classification-sectors-header {
  text-align: center;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}

.classification-best-times-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.classification-best-times-toggle input {
  margin: 0;
}

.classification-table.classification-table--race {
  min-width: 1260px;
}

.classification-table.classification-table--qualifying {
  min-width: 1480px;
}

.classification-table.classification-table--practice {
  min-width: 1320px;
}

.classification-table td:first-child,
.classification-table th:first-child {
  width: 40px;
}

.classification-table td,
.classification-table th {
  text-align: center;
  font-size: 13px;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  line-height: 1;
}

.classification-table tbody td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Consecutive progress band across S1 → S2 → S3.
   S1 is identified by .classification-sector-start; S2 and S3 via adjacent siblings.
   Each column gets its own fill variable so the band moves as one continuous sweep. */
.classification-table tbody tr[style*="--s1-fill"] td.classification-sector-start,
.classification-table tbody tr[style*="--s2-fill"] td.classification-sector-start + td.classification-col-sector,
.classification-table tbody tr[style*="--s3-fill"] td.classification-sector-start + td.classification-col-sector + td.classification-col-sector {
  background: linear-gradient(
    to right,
    rgba(84, 217, 140, 0.07) 0%,
    rgba(84, 217, 140, 0.07) var(--col-fill, 0%),
    transparent var(--col-fill, 0%),
    transparent 100%
  );
}
.classification-table tbody tr[style*="--s1-fill"] td.classification-sector-start { --col-fill: var(--s1-fill, 0%); }
.classification-table tbody tr[style*="--s2-fill"] td.classification-sector-start + td.classification-col-sector { --col-fill: var(--s2-fill, 0%); }
.classification-table tbody tr[style*="--s3-fill"] td.classification-sector-start + td.classification-col-sector + td.classification-col-sector { --col-fill: var(--s3-fill, 0%); }

/* Selected reference row */
.classification-table tbody tr.classification-selected-reference[style*="--s1-fill"] td.classification-sector-start,
.classification-table tbody tr.classification-selected-reference[style*="--s2-fill"] td.classification-sector-start + td.classification-col-sector,
.classification-table tbody tr.classification-selected-reference[style*="--s3-fill"] td.classification-sector-start + td.classification-col-sector + td.classification-col-sector {
  background: linear-gradient(
    to right,
    rgba(84, 217, 140, 0.12) 0%,
    rgba(84, 217, 140, 0.12) var(--col-fill, 0%),
    rgba(255, 255, 255, 0.08) var(--col-fill, 0%),
    rgba(255, 255, 255, 0.08) 100%
  );
}

/* Hover */
.classification-table tbody tr:hover[style*="--s1-fill"] td.classification-sector-start,
.classification-table tbody tr:hover[style*="--s2-fill"] td.classification-sector-start + td.classification-col-sector,
.classification-table tbody tr:hover[style*="--s3-fill"] td.classification-sector-start + td.classification-col-sector + td.classification-col-sector {
  background: linear-gradient(
    to right,
    rgba(84, 217, 140, 0.13) 0%,
    rgba(84, 217, 140, 0.13) var(--col-fill, 0%),
    rgba(255, 255, 255, 0.11) var(--col-fill, 0%),
    rgba(255, 255, 255, 0.11) 100%
  );
}

.classification-table tr.classification-free-stop-cut td {
  border-top: 2px solid #ff3d31;
}

.classification-table tr.classification-free-stop-sc-cut td {
  box-shadow: inset 0 2px 0 #22c55e;
}

/* Qualifying Q1/Q2 elimination cutoffs — permanent lines after P10 and P16. */
.classification-table tr.classification-quali-cutline td {
  border-top: 2px solid rgba(255, 255, 255, 0.4);
}

.classification-table tr.classification-quali-eliminated {
  opacity: 0.4;
}

.classification-table tr.classification-selected-reference td {
  background: rgba(255, 255, 255, 0.08);
}

.classification-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.35);
}

.classification-table tbody tr.classification-selected-reference:hover td {
  background: rgba(255, 255, 255, 0.15);
}

.classification-gap-cell {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.classification-col-pos {
  width: 40px;
}

.classification-table td.classification-col-driver,
.classification-table th.classification-col-driver {
  text-align: left;
  width: 320px;
}

.classification-col-gap,
.classification-col-gap-selected {
  width: 84px;
}

.classification-col-q {
  width: 78px;
}

.classification-phase-header {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.05;
}

.classification-phase-improvement {
  color: #54d98c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.classification-col-sector {
  width: 78px;
}

.classification-col-lap {
  width: 88px;
}

.classification-lap-value.is-lap-behind {
  color: #e10600;
  opacity: 0.85;
}


.classification-pit-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-block;
}

.classification-pit-status.is-in-pit {
  background: rgba(255, 180, 0, 0.18);
  color: #ffb400;
}

.classification-pit-status.is-out-lap {
  background: rgba(30, 203, 129, 0.18);
  color: #1ecb81;
}

.classification-col-scvsc {
  width: 68px;
}

.classification-table td.classification-col-scvsc,
.classification-table th.classification-col-scvsc {
  text-align: left;
}

.tyre-badge.tyre-scvsc-rec {
  opacity: 0.5;
  margin-left: 3px;
  vertical-align: middle;
}

.classification-col-tyre {
  width: 52px;
}

.classification-table td.classification-col-tyre,
.classification-table th.classification-col-tyre {
  text-align: left;
}

.classification-col-previous {
  width: 256px;
}

.classification-col-stops {
  width: 84px;
}

.classification-col-total-laps {
  width: 72px;
}

.classification-col-bestlap {
  width: 88px;
}

.classification-col-bestlap-tyre {
  width: 78px;
}

.classification-col-gainloss {
  width: 84px;
}


.classification-col-status {
  width: 92px;
}

.classification-driver-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.classification-driver-status.is-running {
  background: rgba(84, 217, 140, 0.14);
  color: #54d98c;
}

.classification-driver-status.is-slow-lap {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.classification-driver-status.is-yellow {
  background: rgba(250, 204, 21, 0.16);
  color: #facc15;
}

.classification-driver-status.is-pit {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.classification-driver-status.is-stop {
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
}

.classification-gain-pos {
  color: #54d98c;
  font-weight: 700;
}

.classification-gain-neg {
  color: #f87171;
  font-weight: 700;
}

.classification-gain-zero {
  color: #f6f7fb;
}

.classification-table--race .classification-col-driver {
  width: 320px;
}

.classification-table--race .classification-col-gap,
.classification-table--race .classification-col-gap-selected {
  width: 82px;
}

.classification-table--race .classification-col-sector {
  width: 76px;
}

.classification-table--race .classification-col-lap {
  width: 86px;
}

.classification-table--race .classification-col-scvsc {
  width: 68px;
}

.classification-table--race .classification-col-tyre {
  width: 56px;
}

.classification-table--race .classification-col-previous {
  width: 230px;
}

.classification-table--race .classification-col-stops {
  width: 72px;
}

.classification-table--race .classification-col-total-laps {
  width: 70px;
}

.classification-table--race .classification-col-bestlap {
  width: 88px;
}

.classification-table--race .classification-col-bestlap-tyre {
  width: 78px;
}

.classification-table--race .classification-col-status {
  width: 92px;
}

.classification-table--qualifying .classification-col-driver {
  width: 330px;
}

.classification-table--qualifying .classification-col-gap {
  width: 78px;
}

.classification-table--qualifying .classification-col-q {
  width: 82px;
}

.classification-table--qualifying .classification-col-sector {
  width: 74px;
}

.classification-table--qualifying .classification-col-lap {
  width: 82px;
}

.classification-table--qualifying .classification-col-tyre {
  width: 54px;
}

.classification-table--qualifying .classification-col-previous {
  width: 200px;
}

.classification-table--qualifying .classification-col-stops {
  width: 70px;
}

.classification-table--qualifying .classification-col-total-laps {
  width: 68px;
}

.classification-table--qualifying .classification-col-bestlap {
  width: 86px;
}

.classification-table--qualifying .classification-col-bestlap-tyre {
  width: 76px;
}

.classification-table--qualifying .classification-col-status {
  width: 92px;
}

.classification-table--practice .classification-col-driver {
  width: 360px;
}

.classification-table--practice .classification-col-gap {
  width: 72px;
}

.classification-table--practice .classification-col-sector {
  width: 80px;
}

.classification-table--practice .classification-col-lap {
  width: 88px;
}

.classification-table--practice .classification-col-tyre {
  width: 56px;
}

.classification-table--practice .classification-col-previous {
  width: 260px;
}

.classification-table--practice .classification-col-stops {
  width: 74px;
}

.classification-table--practice .classification-col-total-laps {
  width: 70px;
}

.classification-table--practice .classification-col-bestlap {
  width: 90px;
}

.classification-table--practice .classification-col-bestlap-tyre {
  width: 78px;
}

.classification-table--practice .classification-col-status {
  width: 92px;
}

.classification-pos {
  font-weight: 400;
  color: var(--text);
  font-size: 18px;
}

.classification-driver .driver-tag {
  min-width: 220px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  justify-items: unset;
  line-height: 0.95;
}

.classification-driver {
  display: flex;
  align-items: center;
  gap: 5px;
}

.classification-compare-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.classification-compare-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.classification-table .driver-code {
  font-size: 16px;
}

.classification-driver-team {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.classification-table .driver-number {
  font-size: 16px;
}

.classification-gap-cell {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 0.95;
}

.classification-compare-gap {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  line-height: 0.95;
}

.classification-sector-cell {
  position: relative;
  padding-bottom: 10px !important;
}

.classification-timing-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 0.95;
}

.classification-lap-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 0.95;
}

.classification-lap-value.classification-gain-pos {
  color: #54d98c;
}

.classification-lap-value.classification-gain-neg {
  color: #f87171;
}

.classification-lap-value.classification-gain-zero {
  color: #f6f7fb;
}

.classification-col-gap .classification-lap-value,
.classification-col-gap-selected .classification-lap-value {
  font-weight: 400;
}

.classification-bestlap-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 0.95;
}

.classification-pitlane {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffd54a;
  line-height: 0.95;
}

.classification-col-previous {
  text-align: left;
  padding-left: 16px;
  border-left: 3px solid rgba(255, 255, 255, 0.50);
}

.classification-previous {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 0.95;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.classification-previous-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.classification-current-tyre {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.classification-current-tyre-laps {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
}

.classification-previous-laps {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
}


.classification-sector-start {
  overflow: visible;
}

.classification-progress-shell {
  position: absolute;
  left: 9px;
  bottom: 2px;
  width: calc(300% + 1px);
  height: 2px;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.classification-progress-segment {
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(5, 7, 11, 0.2);
}

.classification-progress-segment:last-child {
  border-right: 0;
}

.classification-progress-segment.is-done {
  background: rgba(84, 217, 140, 0.78);
}

.classification-progress-segment.is-current {
  background: rgba(84, 217, 140, 0.42);
}

.classification-progress-segment.is-current {
  background: rgba(111, 182, 255, 0.82);
}

.classification-progress-segment.is-pending {
  background: rgba(255, 255, 255, 0.08);
}

.classification-progress-segment.is-green {
  background: rgba(84, 217, 140, 0.86);
}

.classification-progress-segment.is-purple {
  background: rgba(197, 118, 255, 0.9);
}

.classification-progress-segment.is-yellow {
  background: rgba(255, 213, 74, 0.9);
}

.classification-progress-segment.is-pitlane {
  background: rgba(255, 154, 60, 0.86);
}

.classification-progress-segment.is-unknown {
  background: rgba(255, 255, 255, 0.12);
}

.timing-table th,
.timing-table td {
  padding: 4px 5px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  font-size: 10px;
}

.timing-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #181f28 0%, #10161d 100%);
}

.timing-table th:first-child,
.timing-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #0d131a;
  text-align: left;
}

.timing-table thead th:first-child {
  z-index: 4;
}

.driver-tag {
  --team-accent: #ffffff;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding-left: 8px;
  border-left: 3px solid var(--team-accent);
}

.driver-code {
  font-size: 11px;
  font-weight: 700;
}

.driver-number,
.driver-team,
.lap-meta {
  color: var(--muted);
  font-size: 8px;
}

.lap-label {
  font-weight: 600;
  color: var(--text);
}

.lap-main {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.metric-best-personal {
  color: #54d98c;
}

.metric-best-overall {
  color: #b884ff;
}

.metric-sector-best-frozen {
  color: #facc15;
}

.lap-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.lap-meta {
  margin-top: 2px;
  line-height: 1.1;
  min-width: 82px;
}

.lap-main-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lap-main-button:hover {
  color: #f6f7fb;
}

.lap-main-button.metric-best-personal {
  color: #54d98c;
}

.lap-main-button.metric-best-overall {
  color: #b884ff;
}

.tyre-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  color: #05070b;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.tyre-new-used-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 900;
  flex: 0 0 auto;
  line-height: 1;
}

.tyre-new-used-badge--new {
  background: #1ecb81;
  color: #05070b;
  border: 1px solid #1ecb81;
  box-shadow: 0 0 4px rgba(30, 203, 129, 0.55);
}

.tyre-new-used-badge--used {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.tyre-badge.tyre-modified {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.tyre-badge.tyre-modified::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #4fb2ff;
  border: 1px solid #05070b;
}

.tyre-edit-button {
  appearance: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.tyre-edit-button:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.tyre-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 11, 0.56);
}

.tyre-editor-dialog {
  width: min(280px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #101722;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 14px;
}

.tyre-editor-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.tyre-editor-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

.tyre-editor-select {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: #0b111a;
  color: var(--text);
  padding: 8px;
}

.tyre-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.tyre-editor-actions button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 7px 10px;
  font-weight: 700;
  cursor: pointer;
}

.tyre-editor-apply {
  background: #4fb2ff !important;
  color: #05070b !important;
}

.tyre-soft {
  background: #f33b46;
  color: #fff;
}

.tyre-medium {
  background: #ffd54a;
}

.tyre-hard {
  background: #f1f4f8;
}

.tyre-intermediate {
  background: #3bd16f;
}

.tyre-wet {
  background: #4fb2ff;
}

.tyre-unknown {
  background: #6c7785;
  color: #fff;
}

.empty-cell {
  background: rgba(255, 255, 255, 0.02);
  cursor: default;
}

.selected-lap {
  background: rgba(225, 6, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(225, 6, 0, 0.45);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  background: rgba(5, 7, 11, 0.84);
  backdrop-filter: blur(8px);
  z-index: 99;
}

.loader-mark {
  width: 72px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-weight: 800;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff3d31 0%, var(--accent) 100%);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 203, 129, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(30, 203, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(30, 203, 129, 0);
  }
}


.plot-stage.strategy-active #plot-wrap.plot-wrap-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(430px, 1fr) minmax(190px, 0.42fr);
  height: min(88vh, 900px) !important;
}

.plot-stage.strategy-active .plot-panel-custom {
  overflow: hidden;
  padding: 10px 12px;
}

.sp-strategy-window-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.sp-strategy-window-main,
.sp-pit-loss-info {
  min-width: 0;
  min-height: 0;
}

.sp-strategy-window-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.sp-strategy-counts {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.sp-strategy-rows {
  display: grid;
  gap: 7px;
}

.sp-strategy-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.sp-strategy-name {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.sp-strategy-name span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  margin-top: 2px;
}

.sp-strategy-bar {
  position: relative;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sp-strategy-segment,
.sp-strategy-window {
  position: absolute;
  top: 0;
  bottom: 0;
}

.sp-strategy-compound-soft {
  background: #d43a2e;
}

.sp-strategy-compound-medium {
  background: #f8d64a;
}

.sp-strategy-compound-hard {
  background: #c8c8c8;
}

.sp-strategy-compound-intermediate {
  background: #49b839;
}

.sp-strategy-compound-wet {
  background: #2f82ff;
}

.sp-strategy-compound-unknown {
  background: rgba(255, 255, 255, 0.22);
}

.sp-strategy-window {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(149, 224, 139, 0.74);
  border-left: 1px solid rgba(35, 120, 45, 0.4);
  border-right: 1px solid rgba(35, 120, 45, 0.4);
  color: rgba(0, 0, 0, 0.62);
  font-size: 10px;
  font-weight: 800;
  z-index: 2;
}

.sp-strategy-window span {
  transform: translateY(1px);
}

.sp-strategy-delta {
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sp-strategy-axis {
  position: relative;
  height: 20px;
  margin: 6px 62px 0 90px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sp-strategy-axis span {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.sp-pit-loss-info {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.sp-pit-loss-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: stretch;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.sp-pit-loss-tag {
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
}

.sp-pit-loss-tag-green {
  background: #2b731f;
}

.sp-pit-loss-tag-sc {
  background: #a98824;
}

.sp-pit-loss-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: start;
  min-width: 82px;
  max-width: 100%;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.68);
}

.sp-pit-loss-bar-green {
  background: #4dbb33;
}

.sp-pit-loss-bar-sc {
  background: #f8d64a;
}

.sp-pit-loss-bar strong {
  font-size: 11px;
}

@media (max-width: 1200px) {
  .sp-strategy-window-layout {
    grid-template-columns: 1fr;
  }

  .sp-pit-loss-info {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 52px;
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .sp-pit-loss-info .sp-strategy-window-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
}
@media (max-width: 1200px) {
  .top-layout,
  .status-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plot-stage-with-summary {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .plot-stage-with-summary-compact {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .plot-stage-race-position {
    grid-template-columns: 150px minmax(0, 1fr) 286px;
  }

  .plot-summary-strip-traffic {
    width: 100%;
  }

  .hero {
    flex-direction: column;
  }

  .hero-actions {
    align-items: start;
    justify-content: flex-start;
  }

  .hero > .weather-topbar-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px;
  }

  .hero,
  .control-bar,
  .panel,
  .status-card,
  .summary-card {
    border-radius: 14px;
    padding: 10px;
  }

  h1 {
    font-size: 28px;
  }

  .card-value {
    font-size: 13px;
  }

  .mode-toggle {
    flex: 1 1 auto;
  }

  .mode-btn {
    flex: 1 1 0;
  }

  .matrix-toolbar {
    align-items: start;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plot-stage-with-summary {
    grid-template-columns: 1fr;
  }

  .plot-stage-with-summary .plot-summary-strip {
    max-height: none;
  }

}

/* Projection pit-stop popup */
.proj-pit-popup {
  position: fixed;
  z-index: 9999;
  background: #141b23;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  min-width: 150px;
  user-select: none;
}

.proj-pit-header {
  font-size: 11px;
  font-weight: 700;
  color: #97a3b3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.proj-pit-section {
  font-size: 10px;
  color: #636e7c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.proj-pit-compound-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.proj-pit-compound-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--compound-clr, #888);
  background: transparent;
  color: var(--compound-clr, #888);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}

.proj-pit-compound-btn:hover,
.proj-pit-compound-btn.is-active {
  background: var(--compound-clr, #888);
  color: #000;
}

.proj-pit-remove-btn {
  margin-top: 10px;
  width: 100%;
  background: rgba(255,60,60,0.12);
  border: 1px solid rgba(255,60,60,0.35);
  color: #ff6060;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.proj-pit-remove-btn:hover {
  background: rgba(255,60,60,0.25);
}

/* Pit stop badge drag ghost */
.proj-pit-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-pit-drag-ghost-badge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--compound-clr, #888);
  color: #05070b;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #05070b, 0 2px 8px rgba(0,0,0,0.6);
  opacity: 0.9;
}

/* ── Driver Times page ──────────────────────────────────────────────── */
.driver-times-wrap {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page, #05070b);
}

.driver-times-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.driver-times-sidebar {
  width: 130px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.07);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}

.dt-driver-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #97a3b3;
  user-select: none;
  border-left: 2px solid transparent;
  transition: background 0.1s;
}
.dt-driver-item:hover  { background: rgba(255,255,255,0.05); }
.dt-driver-item.is-selected {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  border-left-color: var(--team-color, #888);
}

.dt-driver-accent {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dt-driver-name {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.driver-times-main {
  flex: 1;
  overflow: auto;
}

.dt-driver-header {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.dt-driver-header .driver-tag {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding-left: 10px;
}
.dt-header-name   { font-size: 15px; font-weight: 700; color: #e2e8f0; }
.dt-header-team   { font-size: 13px; font-weight: 400; color: #97a3b3; }
.dt-header-number { font-size: 13px; font-weight: 400; color: #5a6478; }
.dt-header-sep    { font-size: 11px; font-weight: 400; color: #374151; }

.dt-prompt {
  padding: 24px 20px;
  color: #5a6478;
  font-size: 13px;
}

.driver-times-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.driver-times-table thead th {
  position: sticky;
  top: 0;
  background: #0d1018;
  color: #5a6478;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 10px;
  white-space: nowrap;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 1;
}
.driver-times-table thead th.dt-col-lap,
.driver-times-table thead th.dt-col-tod,
.driver-times-table thead th.dt-col-pos,
.driver-times-table thead th.dt-col-marker { text-align: left; }

.driver-times-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.driver-times-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.driver-times-table tbody tr[data-driver-number][data-lap-number] { cursor: zoom-in; }
.driver-times-table tbody tr.dt-row-pit { background: rgba(255,143,92,0.05); }
.driver-times-table tbody tr.dt-row-pit:hover { background: rgba(255,143,92,0.09); }

.driver-times-table td {
  padding: 5px 10px;
  white-space: nowrap;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #c8d0dc);
  line-height: 0.95;
}
.driver-times-table td.dt-col-lap {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  color: #5a6478;
}
.driver-times-table td.dt-col-pos {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  color: #97a3b3;
  min-width: 24px;
  width: 24px;
}
.driver-times-table td.dt-col-tod {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
.driver-times-table td.dt-col-laptime {
  color: var(--text, #c8d0dc);
}
.driver-times-table td.dt-col-speed {
  font-size: 16px;
  font-weight: 400;
  color: var(--text, #c8d0dc);
}
.driver-times-table td.dt-col-gap {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}
.driver-times-table td.dt-col-marker {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #f59e0b;
}

/* Sector/lap best-mark colours — match global classification definitions */
.driver-times-table td.metric-best-overall  { color: #b884ff; }
.driver-times-table td.metric-best-personal { color: #54d98c; }

/* Delta to driver's all-time personal best */
.dt-delta { font-weight: 400; font-size: 13px; color: #6b7280; margin-left: 4px; }
.dt-delta.dt-delta-ref { color: #4b5563; }

.driver-times-table td.dt-col-pit { font-size: 13px; font-weight: 400; color: #f59e0b; text-align: right; }
.driver-times-table td.dt-laptime-deleted { color: #ef4444 !important; opacity: 0.5; }
.dt-deleted-marker { color: #ef4444; opacity: 1; font-size: 11px; font-weight: 700; margin-left: 5px; vertical-align: middle; }
.driver-times-table td.dt-col-tyre { text-align: left; padding: 3px 8px; white-space: nowrap; }
.driver-times-table td.dt-col-tyre .tyre-badge { margin-left: 3px; }
.driver-times-table td.dt-col-tyre .dt-tyre-age { margin-left: 4px; font-size: 13px; font-weight: 400; color: #6b7280; }
.driver-times-table thead th.dt-col-track-status,
.driver-times-table td.dt-col-track-status {
  text-align: left;
  min-width: 112px;
}
.driver-times-table td.dt-col-track-status {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.driver-times-table td.dt-track-status-green { color: #54d98c; }
.driver-times-table td.dt-track-status-sc { color: #ffd60a; }
.driver-times-table td.dt-track-status-vsc { color: #4fb2ff; }
.driver-times-table td.dt-track-status-double-yellow { color: #fbbf24; }

/* ── Pit Stops page ─────────────────────────────────────────────── */
.pit-stops-wrap { display: flex; height: 100%; overflow: hidden; background: var(--bg-page, #05070b); }

.ps-layout { display: flex; width: 100%; height: 100%; gap: 12px; overflow: hidden; padding: 0 12px; box-sizing: border-box; background: var(--bg-page, #05070b); }
.ps-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; background: #05070b; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); border-radius: 6px; }
.ps-panel-chrono { flex: 0 0 594px; }
.ps-panel-best   { flex: 0 0 560px; }
.ps-panel-teams  { flex: 0 0 592px; }
.ps-panel-best .ps-col-rank { width: 14px; }
.ps-panel-best .ps-table td.ps-col-team { max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.ps-panel-title { flex-shrink: 0; padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #5a6478; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ps-panel-scroll { flex: 1; overflow: auto; }

.ps-table { width: 100%; border-collapse: collapse; }
.ps-table thead th { position: sticky; top: 0; background: #0d1018; color: #5a6478; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 10px; text-align: right; white-space: nowrap; }
.ps-table thead th:first-child { text-align: left; }
.ps-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.ps-table td { padding: 4px 10px; font-size: 13px; font-weight: 700; color: #c8d0dc; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.04); }

.ps-col-rank   { width: 26px; padding: 4px 6px; font-size: 11px; font-weight: 400; color: #5a6478; text-align: center; }
.ps-col-tod    { width: 72px; font-size: 11px; font-weight: 400; color: #6b7280; text-align: left; font-variant-numeric: tabular-nums; }
.ps-col-driver { text-align: left; font-size: 13px; font-weight: 700; white-space: nowrap; padding-left: 14px; }
.ps-table td.ps-col-team { text-align: left; font-size: 11px; font-weight: 400; color: #97a3b3; border-right: 1px solid rgba(255,255,255,0.07); padding-right: 14px; }
.ps-col-team-name { text-align: left; font-size: 12px; font-weight: 600; color: #c8d0dc; white-space: nowrap; border-right: 1px solid rgba(255,255,255,0.07); padding-right: 14px; }
.ps-col-tyre   { width: 26px; padding: 4px 5px; text-align: center; }
.ps-col-time   { width: 50px; font-variant-numeric: tabular-nums; color: #e2e8f0; }
.ps-col-loss   { width: 52px; font-size: 12px; font-weight: 400; color: #6b7280; font-variant-numeric: tabular-nums; }
.ps-col-loss.ps-best { color: #54d98c; font-weight: 700; }
.ps-col-neutral { width: 36px; padding: 4px 5px; text-align: center; }

.ps-driver-accent { display: inline-block; width: 3px; height: 14px; border-radius: 2px; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }

.ps-neutral-badge { display: inline-flex; align-items: center; justify-content: center; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; }
.ps-neutral-badge.ps-neutral-sc  { background: #f59e0b; color: #05070b; }
.ps-neutral-badge.ps-neutral-vsc { background: #3bd16f; color: #05070b; }


/* Tyre Usage page */

.event-summary-wrap {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--bg-page, #05070b);
}

.es-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--bg-page, #05070b);
}

.es-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.es-head h3 {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.es-head p {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

.es-head .es-error {
  color: #f87171;
}

.es-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 0;
  background: #05070b;
}

.es-table thead th {
  text-align: right;
}

.es-table thead th:nth-child(2) {
  text-align: left;
}

.es-sort-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.es-sort-btn:hover,
.es-sort-btn.is-active {
  color: #e2e8f0;
}

.es-sort-btn span {
  margin-left: 4px;
  color: #54d98c;
  font-size: 9px;
  font-weight: 800;
}

.es-table td {
  font-variant-numeric: tabular-nums;
}

.es-table th.es-session-start,
.es-table td.es-session-start {
  border-left: 2px solid rgba(148, 163, 184, 0.42);
}

.es-col-pos {
  width: 30px;
  text-align: center !important;
  font-weight: 400 !important;
  color: #8a95a8 !important;
}

.es-col-driver {
  min-width: 230px;
  text-align: left !important;
  font-variant-numeric: normal !important;
}

.es-table .classification-driver .driver-tag {
  min-width: 0;
}

.es-col-corrected {
  color: #54d98c !important;
}

.es-q-corrected-time {
  font-variant-numeric: tabular-nums;
}

.es-col-corrected-pct {
  color: #93c5fd !important;
  font-variant-numeric: tabular-nums;
}

.es-q-phase {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(84, 217, 140, 0.14);
  color: #54d98c;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  vertical-align: middle;
}

.es-q-phase-q1 {
  background: rgba(96, 165, 250, 0.16);
  color: #60a5fa;
}

.es-q-phase-q2 {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.es-q-phase-q3 {
  background: rgba(84, 217, 140, 0.16);
  color: #54d98c;
}
.es-col-deg {
  color: #fbbf24 !important;
}

.es-empty-cell {
  padding: 24px 10px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

.tyre-usage-wrap {
  display: flex;
  height: 100%;
  min-height: 504px;
  overflow: hidden;
  background: var(--bg-page, #05070b);
}

.tu-layout {
  --tu-driver-col: 112px;
  --tu-bar-gap: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 12px 10px;
  box-sizing: border-box;
  background: var(--bg-page, #05070b);
}

.tu-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 6px 2px 8px;
  flex-shrink: 0;
}

.tu-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.tu-head p {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.tu-key {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.tu-rows {
  display: grid;
  gap: 5px;
  overflow: auto;
  padding-right: 6px;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.tu-chart-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.tu-neutral-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tu-driver-col) + var(--tu-bar-gap));
  right: 6px;
  pointer-events: none;
  z-index: 3;
}

.tu-neutral-period {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 12px;
}

.tu-neutral-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}


.tu-neutral-sc { color: #ffd60a; }
.tu-neutral-sc .tu-neutral-label { background: #ffd60a; color: #1a1400; }
.tu-neutral-vsc { color: #4fb2ff; }
.tu-neutral-vsc .tu-neutral-label { background: #4fb2ff; color: #ffffff; }

.tu-driver-neutral {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.tu-driver-neutral-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  opacity: 1;
}

.tu-neutral-sc .tu-driver-neutral-fill { background: rgba(255, 214, 10, 0.28); }
.tu-neutral-vsc .tu-driver-neutral-fill { background: rgba(79, 178, 255, 0.26); }

.tu-driver-neutral-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1.5px dashed currentColor;
  opacity: 0.98;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.tu-driver-neutral-start { transform: translateX(-0.75px); }
.tu-driver-neutral-end { transform: translateX(-0.75px); }

.tu-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 30px;
}

.tu-driver {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #c8d0dc;
  font-size: 13px;
  font-weight: 850;
}

.tu-pos {
  width: 28px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.tu-accent {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.tu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tu-bar {
  position: relative;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}

.tu-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  box-sizing: border-box;
  background: var(--tu-color, #888);
  color: rgba(0, 0, 0, 0.76);
  font-size: 12px;
  font-weight: 950;
  min-width: 22px;
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.18);
}

.tu-start-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  flex: 0 0 auto;
}

.tu-badge-new {
  background: rgba(255, 255, 255, 0.88);
  color: #111827;
}

.tu-badge-used {
  background: rgba(17, 24, 39, 0.78);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.tu-compound-label {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.tu-stint-laps {
  margin-left: auto;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.32);
  color: rgba(0, 0, 0, 0.78);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tu-no-data {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 8px;
  color: var(--muted);
  font-size: 11px;
}

.tu-axis {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  height: 24px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.tu-axis-top {
  height: 18px;
}

.tu-axis-line {
  position: relative;
  grid-column: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tu-axis-line span {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
}

.tu-axis-label {
  grid-column: 2;
  text-align: center;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tu-empty {
  margin: auto;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .tu-layout {
    --tu-driver-col: 82px;
  }

  .tu-row,
  .tu-axis {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .tu-head {
    align-items: start;
    flex-direction: column;
  }
}

/* Season Summary page */

.season-summary-wrap {
  display: flex;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-page, #05070b);
}

.ss-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  overflow: visible;
  padding: 0 12px 12px;
  box-sizing: border-box;
  background: var(--bg-page, #05070b);
}

.ss-head {
  margin-bottom: 8px;
}

.ss-section {
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #05070b;
}

.ss-section h3 {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ss-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.ss-table {
  min-width: 980px;
}

.ss-table thead th {
  text-align: right;
  white-space: nowrap;
}

.ss-table thead th:first-child,
.ss-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #05070b;
  text-align: left;
}

.ss-table thead th:first-child {
  z-index: 3;
}

.ss-table td {
  min-width: 112px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.ss-col-driver {
  min-width: 230px !important;
  width: 230px;
  text-align: left !important;
  font-variant-numeric: normal !important;
}

.ss-time {
  display: inline-block;
  margin-right: 5px;
  color: #e5e7eb;
  font-weight: 800;
}

.ss-pct {
  display: inline-block;
  margin-left: 5px;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.ss-chart-grid {
  flex: 0 0 clamp(1380px, 128vh, 1920px);
  height: clamp(1380px, 128vh, 1920px);
  min-height: 1380px;
  max-height: 1920px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  margin-top: 8px;
}

.ss-chart-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #05070b;
  padding: 7px 10px 6px;
  box-sizing: border-box;
}

.ss-chart-panel canvas {
  width: 100% !important;
  height: 100% !important;
}

.ss-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-controls label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #6b7280;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ss-controls select {
  min-width: 112px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  background: #0b1018;
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 700;
}

.ss-col-check {
  width: 28px !important;
  min-width: 28px !important;
  text-align: center !important;
}

.ss-col-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
  accent-color: #54d98c;
}

.ss-summary-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #05070b;
}

.ss-summary-section h3 {
  margin: 0;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ss-summary-table-wrap {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.ss-summary-table th,
.ss-summary-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ss-summary-table th:nth-child(2),
.ss-summary-table td:nth-child(2) {
  text-align: left;
}

.ss-improvement-good {
  color: #54d98c !important;
}

.ss-improvement-bad {
  color: #f87171 !important;
}

.ss-chart-panel canvas {
  cursor: ns-resize;
}

.ss-chart-panel canvas.ss-chart-dragging {
  cursor: grabbing;
}
.ss-summary-grid {
  flex: 0 0 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  overflow: visible;
}

.ss-summary-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.ss-summary-panel:last-child {
  border-right: 0;
}

.ss-summary-panel h4 {
  margin: 0;
  padding: 5px 8px;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ss-summary-table {
  min-width: 430px;
}

.ss-summary-table th:first-child,
.ss-summary-table td:first-child {
  text-align: left;
}

.ss-summary-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 10px;
  margin-top: 10px;
  padding: 0 10px 10px;
  box-sizing: border-box;
}

.ss-summary-chart-panel {
  height: 442px;
  min-height: 442px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #05070b;
  padding: 7px 10px 6px;
  box-sizing: border-box;
}

.ss-summary-chart-panel canvas {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1100px) {
  .ss-summary-grid,
  .ss-summary-chart-grid {
    grid-template-columns: 1fr;
  }

  .ss-summary-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .ss-summary-panel:last-child {
    border-bottom: 0;
  }
}
/* Avg. Positions page */

.avg-positions-wrap {
  display: flex;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-page, #05070b);
}

.ap-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  overflow: visible;
  padding: 0 12px 12px;
  box-sizing: border-box;
  background: var(--bg-page, #05070b);
}

.ap-head {
  margin-bottom: 8px;
}

.ap-chart-grid {
  flex: 1 1 auto;
  min-height: 620px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(292px, 1fr);
  gap: 8px;
  overflow: visible;
}

.ap-chart-panel {
  min-height: 292px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #05070b;
  padding: 6px 8px 6px;
  box-sizing: border-box;
}

.ap-chart-panel canvas {
  width: 100% !important;
  height: 100% !important;
}

.ap-empty {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  background: #05070b;
}

@media (max-width: 900px) {
  .ap-chart-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }

  .ap-chart-panel {
    min-height: 300px;
  }
}