:root {
  --bg: rgba(10, 12, 16, 0.84);
  --border: rgba(255, 255, 255, 0.08);
  --text: #f1f5f9;
  --text-dim: rgba(241, 245, 249, 0.45);
  --accent: #22d3ee;
  --active: #34d399;
  --active-bg: rgba(52, 211, 153, 0.18);
  --warn: #fbbf24;
  --danger: #f87171;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent !important;
  font-family: system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}

#speedometer {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#speedometer.visible { opacity: 1; }
#speedometer.hidden { opacity: 0; display: none; }

.hud-card {
  min-width: 248px;
  padding: 7px 9px 6px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.hud-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fuel-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 38px;
}

.fuel-icon { width: 11px; height: 11px; fill: var(--warn); }

.fuel-bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.fuel-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width 0.2s ease;
}

.fuel-fill.low { background: linear-gradient(90deg, #f87171, #ef4444); }

.fuel-percent { font-size: 8px; font-weight: 600; color: var(--warn); }
.fuel-percent.low { color: var(--danger); }

.speed-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
}

.speed-arc { width: 72px; height: 38px; margin-bottom: -6px; }

.arc-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3;
  stroke-linecap: round;
}

.arc-fill {
  fill: none;
  stroke: #22d3ee;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.15s ease;
}

.speed-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.speed-unit {
  display: block;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.odo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 52px;
}

.odo-label {
  font-size: 7px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.odometer {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.status-chips {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
}

.chip svg { width: 10px; height: 10px; fill: currentColor; }

.chip span:last-child {
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
}

.chip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.chip.active { background: var(--active-bg); color: var(--active); }
.chip.active .chip-dot { background: var(--active); }
.chip.warn { background: rgba(251, 191, 36, 0.12); color: var(--warn); }
.chip.warn .chip-dot { background: var(--warn); }

body.dev-preview {
  background: radial-gradient(circle at 50% 80%, #111827, #030712) !important;
}