:root {
  --ride-bg: #070b12;
  --ride-bg-deep: #04070c;
  --ride-panel: rgba(14, 22, 36, 0.86);
  --ride-panel-solid: #101929;
  --ride-panel-hi: rgba(20, 32, 52, 0.92);
  --ride-border: rgba(0, 245, 212, 0.22);
  --ride-border-subtle: #1e2d44;
  --ride-muted: #8ca0ba;
  --ride-text: #eaf4ff;
  --ride-accent: #00f5d4;
  --ride-cyan: #00bbf9;
  --ride-amber: #ffb703;
  --ride-danger: #ff2a85;
  --ride-success: #10b981;
  --ride-glow: 0 0 22px rgba(0, 245, 212, 0.16);
}

body {
  background-color: var(--ride-bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(0, 187, 249, 0.12), transparent 36%),
    radial-gradient(circle at 88% 14%, rgba(0, 245, 212, 0.10), transparent 40%),
    linear-gradient(180deg, #060a11 0%, #09101c 50%, #060911 100%);
  color: var(--ride-text);
  font-family: "JetBrains Mono", "Inter", system-ui, -apple-system, "Microsoft JhengHei", sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
}

.ride-shell {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: 26px 28px 42px;
  z-index: 1;
}

.hud-bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(0, 245, 212, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 187, 249, 0.035) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.9) 20%, transparent 85%);
}

/* Header HUD */
.ride-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(16, 26, 44, 0.92), rgba(10, 16, 28, 0.88));
  border: 1px solid var(--ride-border);
  border-left: 4px solid var(--ride-accent);
  border-radius: 14px;
  box-shadow: var(--ride-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

.brand-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ride-accent);
  box-shadow: 0 0 10px var(--ride-accent);
  animation: hudPulse 2.2s infinite ease-in-out;
}

@keyframes hudPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.sys-tag {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ride-cyan);
  font-weight: 700;
}

.hud-clock {
  font-size: 12px;
  color: var(--ride-muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 187, 249, 0.08);
  border: 1px solid rgba(0, 187, 249, 0.2);
}

.brand-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.05rem);
  letter-spacing: 3.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 245, 212, 0.28);
}

.brand b {
  color: var(--ride-accent);
}

.brand-sub {
  font-size: 12px;
  letter-spacing: 2.2px;
  color: var(--ride-muted);
  font-weight: 600;
}

.ride-header p {
  color: var(--ride-muted);
  margin: 6px 0 0;
  font-size: 13.5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-hud-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #2b3f5c;
  background: rgba(12, 20, 34, 0.9);
  color: var(--ride-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-hud-toggle:hover {
  border-color: var(--ride-cyan);
  color: #fff;
}

.btn-hud-toggle.active {
  border-color: var(--ride-accent);
  background: rgba(0, 245, 212, 0.14);
  color: var(--ride-accent);
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.25);
}

.live-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #526580;
}

.btn-hud-toggle.active .live-indicator {
  background: var(--ride-accent);
  box-shadow: 0 0 8px var(--ride-accent);
  animation: hudPulse 1.1s infinite;
}

.btn-hud-admin {
  border-radius: 20px;
  font-size: 12.5px;
  padding: 7px 15px;
  border-color: rgba(0, 187, 249, 0.4);
  color: var(--ride-cyan);
}

.read-badge {
  border: 1px solid rgba(0, 245, 212, 0.38);
  background: rgba(0, 245, 212, 0.08);
  border-radius: 20px;
  padding: 7px 14px;
  color: var(--ride-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Digital Garage Section */
.garage-section {
  margin-bottom: 18px;
}

.section-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 4px;
}

.section-caption span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ride-cyan);
}

.section-caption small {
  font-size: 12px;
  color: var(--ride-muted);
}

.garage-dock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.garage-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ride-panel);
  border: 1px solid var(--ride-border-subtle);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--ride-text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  overflow: hidden;
}

.garage-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: transparent;
  transition: background 0.18s ease;
}

.garage-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 187, 249, 0.5);
  background: var(--ride-panel-hi);
}

.garage-card.active {
  border-color: var(--ride-accent);
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.14), rgba(16, 28, 46, 0.95));
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.18);
}

.garage-card.active::before {
  background: var(--ride-accent);
}

.garage-thumb {
  width: 58px;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0a111d;
  border: 1px solid #243550;
  display: flex;
  align-items: center;
  justify-content: center;
}

.garage-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-thumb-icon {
  color: var(--ride-cyan);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.garage-info {
  min-width: 0;
  flex: 1;
}

.garage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.garage-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-volt-pill {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(0, 245, 212, 0.15);
  color: var(--ride-accent);
  border: 1px solid rgba(0, 245, 212, 0.35);
}

.garage-volt-pill.idle {
  background: rgba(140, 160, 186, 0.1);
  color: var(--ride-muted);
  border-color: rgba(140, 160, 186, 0.2);
}

.garage-model {
  display: block;
  font-size: 12px;
  color: var(--ride-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Toolbar & Presets */
.ride-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ride-border-subtle);
  border-radius: 14px;
  background: var(--ride-panel);
  backdrop-filter: blur(8px);
}

.toolbar-presets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #22324a;
}

.preset-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ride-muted);
  text-transform: uppercase;
}

.preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-preset {
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid #293c58;
  background: #0c1422;
  color: var(--ride-text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-preset:hover {
  border-color: var(--ride-cyan);
  color: var(--ride-cyan);
}

.btn-preset.active {
  background: rgba(0, 187, 249, 0.18);
  border-color: var(--ride-cyan);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 187, 249, 0.25);
}

.btn-preset-accent {
  border-color: rgba(0, 245, 212, 0.45);
  color: var(--ride-accent);
  background: rgba(0, 245, 212, 0.08);
}

.btn-preset-accent:hover {
  background: rgba(0, 245, 212, 0.2);
  border-color: var(--ride-accent);
  color: #fff;
}

.toolbar-inputs {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.toolbar-inputs label {
  flex: 1;
  color: var(--ride-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ride-toolbar input,
.ride-toolbar select {
  margin-top: 6px;
  min-height: 43px;
  background: #09101b;
  border: 1px solid #2b3d59;
  color: #eef4fa;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}

.ride-toolbar input:focus,
.ride-toolbar select:focus {
  border-color: var(--ride-accent);
  box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
  background: #0b1422;
  color: #fff;
}

.btn-primary {
  background: linear-gradient(135deg, #00f5d4 0%, #00bbf9 100%);
  border: none;
  color: #041c18;
  font-weight: 800;
  letter-spacing: 1px;
  min-height: 43px;
  padding: 9px 26px;
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0, 245, 212, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.1);
  transform: translateY(-1px);
  color: #021310;
  box-shadow: 0 6px 22px rgba(0, 245, 212, 0.38);
}

/* Status Strip */
.status-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 20px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(11, 18, 30, 0.78);
  border: 1px solid #1d2b40;
}

.status-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(0, 245, 212, 0.12);
  color: var(--ride-accent);
  white-space: nowrap;
}

#status {
  font-size: 13.5px;
  margin: 0;
  color: var(--ride-text);
  flex: 1;
  min-height: 20px;
}

.range-badge {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ride-cyan);
  white-space: nowrap;
}

/* Cockpit Grid */
.cockpit-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1.4fr;
  gap: 18px;
  margin-bottom: 22px;
}

.cockpit-card {
  container-type: inline-size;
  background: var(--ride-panel);
  border: 1px solid var(--ride-border-subtle);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cockpit-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(225deg, rgba(0, 245, 212, 0.16) 0%, transparent 60%);
  pointer-events: none;
}

.card-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(40, 58, 84, 0.65);
}

.card-hud-header span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--ride-muted);
}

.card-hud-header strong,
.card-hud-header small {
  font-size: 12px;
  color: var(--ride-cyan);
  font-weight: 700;
}

/* Vehicle HUD Stage */
.vehicle-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at center, #111d30 0%, #080e18 100%);
  border: 1px solid #233652;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-photo-panel {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.vehicle-photo-panel[hidden] {
  display: none !important;
}

.vehicle-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-reticle {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(0, 245, 212, 0.28);
  border-radius: 6px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.06) 0%, transparent 25%, transparent 75%, rgba(0, 10, 20, 0.65) 100%);
}

.photo-overlay-name {
  position: absolute;
  bottom: 12px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(6, 12, 22, 0.85);
  border: 1px solid rgba(0, 245, 212, 0.45);
  color: var(--ride-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.vehicle-wireframe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  width: 100%;
  height: 100%;
}

.vehicle-wireframe svg {
  width: 78%;
  max-width: 240px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.25));
}

.wireframe-caption {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--ride-muted);
  margin-top: 6px;
}

.vehicle-meta-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed #22334d;
}

.meta-label {
  display: block;
  font-size: 12px;
  color: var(--ride-muted);
}

.vehicle-meta-footer strong {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Primary Bus Voltage Card */
.metric.primary {
  border-color: rgba(0, 245, 212, 0.35);
  background: linear-gradient(160deg, rgba(16, 29, 48, 0.95) 0%, rgba(10, 18, 30, 0.92) 100%);
  box-shadow: var(--ride-glow);
}

.health-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.8px;
}

.health-charging {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.45);
}

.health-nominal {
  background: rgba(0, 245, 212, 0.15);
  color: var(--ride-accent);
  border: 1px solid rgba(0, 245, 212, 0.4);
}

.health-low {
  background: rgba(255, 183, 3, 0.16);
  color: var(--ride-amber);
  border: 1px solid rgba(255, 183, 3, 0.45);
}

.health-critical {
  background: rgba(255, 42, 133, 0.18);
  color: #ff5ca1;
  border: 1px solid rgba(255, 42, 133, 0.45);
}

.health-standby {
  background: rgba(140, 160, 186, 0.14);
  color: var(--ride-muted);
  border: 1px solid rgba(140, 160, 186, 0.3);
}

.primary-vehicle-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(8, 14, 24, 0.72);
  border: 1px solid #223550;
  margin-bottom: 6px;
}

.unit-code-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 187, 249, 0.16);
  color: var(--ride-cyan);
}

.primary-vehicle-name {
  font-size: 15px !important;
  font-weight: 800;
  color: #fff;
  display: inline !important;
}

.primary-vehicle-model {
  font-size: 12.5px;
  color: var(--ride-muted);
}

.primary-readout-wrap {
  margin: 6px 0 10px;
}

.metric > strong {
  display: block;
  font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.95rem);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

#latest {
  display: block;
  font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.55rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ride-accent);
  text-shadow: 0 0 24px rgba(0, 245, 212, 0.32);
  letter-spacing: 1px;
}

.metric small {
  font-size: 18px;
  font-weight: 600;
  color: var(--ride-cyan);
}

.metric p {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ride-muted);
}

.latest-global-hint strong {
  font-size: 12px !important;
  font-weight: 700;
  color: var(--ride-cyan);
  display: inline !important;
  text-shadow: none !important;
}

.voltage-gauge-strip {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(7, 12, 21, 0.75);
  border: 1px solid #1e2e46;
}

.gauge-scale,
.gauge-zones {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ride-muted);
  font-variant-numeric: tabular-nums;
}

.gauge-track {
  height: 10px;
  border-radius: 99px;
  background: #0d1624;
  margin: 6px 0;
  overflow: hidden;
  border: 1px solid #243652;
  position: relative;
}

.gauge-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff2a85 0%, #ffb703 35%, #00f5d4 70%, #00bbf9 100%);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.5);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gauge-zones {
  margin-top: 4px;
}

.zone-low { color: #ff9e44; }
.zone-nom { color: var(--ride-accent); }
.zone-chg { color: var(--ride-cyan); }

.latest-global-hint {
  font-size: 12px;
  color: var(--ride-muted);
  padding-top: 8px;
  border-top: 1px dashed #22334d;
}

/* 4-Cell Telemetry Matrix */
.telemetry-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Dual-Viewport Visual Grid */
.visual-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 20px;
}

.panel {
  background: var(--ride-panel);
  border: 1px solid var(--ride-border-subtle);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #22334c;
  background: rgba(10, 17, 29, 0.65);
}

.panel-kicker {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--ride-cyan);
  margin-bottom: 2px;
}

.panel h1,
.panel h2 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.panel-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cursor-readout {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 187, 249, 0.1);
  border: 1px solid rgba(0, 187, 249, 0.28);
  color: var(--ride-cyan);
}

.unit-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(140, 160, 186, 0.1);
  color: var(--ride-muted);
}

.panel-body {
  position: relative;
}

#voltage-chart,
#map {
  height: 410px;
  min-width: 0;
}

.map-hud-overlay {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 5;
}

.map-hud-overlay .corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--ride-accent);
  border-style: solid;
  opacity: 0.7;
}

.map-hud-overlay .tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.map-hud-overlay .tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.map-hud-overlay .bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.map-hud-overlay .br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.empty {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  text-align: center;
  color: var(--ride-muted);
  pointer-events: none;
  padding: 18px;
  border-radius: 10px;
  background: rgba(9, 15, 26, 0.82);
  border: 1px dashed #293c58;
}

.map-note {
  margin: 0;
  padding: 10px 18px;
  font-size: 12px;
  color: var(--ride-muted);
  background: #0b121e;
  border-top: 1px solid #1d2b40;
  min-height: 38px;
}

/* Footer */
.ride-footer {
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(10, 16, 27, 0.75);
  border: 1px solid #1a273b;
  color: var(--ride-muted);
  font-size: 12px;
  line-height: 1.75;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.footer-grid strong {
  color: var(--ride-cyan);
  letter-spacing: 1px;
}

.fixture-banner {
  background: #614b12;
  color: #ffedb1;
  padding: 12px;
  text-align: center;
  font-weight: 700;
}

/* Admin Panel Styling Compatibility */
.admin-panels {
  padding: 24px;
  background: var(--ride-panel);
  border: 1px solid var(--ride-border-subtle);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

.admin-panels p {
  color: var(--ride-muted);
  line-height: 1.8;
}

.admin-panels .vehicle-edit {
  margin: 18px 0;
  flex-direction: row;
  align-items: flex-end;
}

.admin-panels #photo-form {
  max-width: 650px;
}

.admin-panels #photo-form label {
  display: block;
  margin: 18px 0;
}

.admin-panels #photo-form input,
.admin-panels #photo-form select {
  margin-top: 7px;
}

/* Dynamic Breathing Aura & Cyber-Telemetry Motion */
@keyframes headerBreathe {
  0%, 100% {
    box-shadow: 0 0 18px rgba(0, 245, 212, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 245, 212, 0.22);
  }
  50% {
    box-shadow: 0 0 34px rgba(0, 245, 212, 0.34), 0 0 60px rgba(0, 187, 249, 0.14), inset 0 1px 0 rgba(0, 245, 212, 0.18);
    border-color: rgba(0, 245, 212, 0.55);
  }
}

@keyframes primaryCoreBreathe {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 245, 212, 0.16), inset 0 0 18px rgba(0, 245, 212, 0.04);
    border-color: rgba(0, 245, 212, 0.32);
  }
  50% {
    box-shadow: 0 0 38px rgba(0, 245, 212, 0.42), 0 0 70px rgba(0, 187, 249, 0.18), inset 0 0 28px rgba(0, 245, 212, 0.11);
    border-color: rgba(0, 245, 212, 0.78);
  }
}

@keyframes textGlowBreathe {
  0%, 100% {
    text-shadow: 0 0 14px rgba(0, 245, 212, 0.28), 0 0 28px rgba(0, 187, 249, 0.12);
  }
  50% {
    text-shadow: 0 0 26px rgba(0, 245, 212, 0.75), 0 0 48px rgba(0, 187, 249, 0.38);
  }
}

@keyframes garageActiveBreathe {
  0%, 100% {
    box-shadow: 0 0 14px rgba(0, 245, 212, 0.16), inset 0 0 10px rgba(0, 245, 212, 0.05);
    border-color: rgba(0, 245, 212, 0.65);
  }
  50% {
    box-shadow: 0 0 28px rgba(0, 245, 212, 0.45), 0 0 44px rgba(0, 187, 249, 0.2), inset 0 0 18px rgba(0, 245, 212, 0.14);
    border-color: #00f5d4;
  }
}

@keyframes laserScanY {
  0% { top: -8%; opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { top: 104%; opacity: 0; }
}

@keyframes topEdgeSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(220%); }
}

@keyframes energyStripeFlow {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 36px 0, 0 0; }
}

@keyframes wheelSpin {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}

@keyframes cornerPulse {
  0%, 100% { opacity: 0.45; filter: drop-shadow(0 0 2px rgba(0, 245, 212, 0.2)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 245, 212, 0.85)); }
}

@keyframes badgeBreatheCyan {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 245, 212, 0.15); }
  50% { box-shadow: 0 0 18px rgba(0, 245, 212, 0.55); }
}

@keyframes badgeBreatheAmber {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 183, 3, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 183, 3, 0.65); }
}

@keyframes badgeBreatheCritical {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 42, 133, 0.25); }
  50% { box-shadow: 0 0 22px rgba(255, 42, 133, 0.78); }
}

.ride-header {
  animation: headerBreathe 5.5s infinite ease-in-out;
}

.garage-card.active {
  animation: garageActiveBreathe 3.4s infinite ease-in-out;
}

.metric.primary {
  animation: primaryCoreBreathe 3.8s infinite ease-in-out;
}

.metric.primary::before,
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ride-accent), var(--ride-cyan), transparent);
  box-shadow: 0 0 12px var(--ride-accent);
  animation: topEdgeSweep 4.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 3;
}

.panel.map-panel::before {
  animation-delay: 2.4s;
}

#latest {
  animation: textGlowBreathe 3.2s infinite ease-in-out;
}

.health-charging,
.health-nominal {
  animation: badgeBreatheCyan 2.8s infinite ease-in-out;
}

.health-low {
  animation: badgeBreatheAmber 2.2s infinite ease-in-out;
}

.health-critical {
  animation: badgeBreatheCritical 1.6s infinite ease-in-out;
}

.gauge-fill {
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.22) 0,
      rgba(255, 255, 255, 0.22) 8px,
      transparent 8px,
      transparent 18px
    ),
    linear-gradient(90deg, #ff2a85 0%, #ffb703 35%, #00f5d4 70%, #00bbf9 100%);
  background-size: 36px 36px, 100% 100%;
  animation: energyStripeFlow 1.4s linear infinite;
}

.vehicle-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(0, 245, 212, 0.85) 50%, transparent 95%);
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.8), 0 0 28px rgba(0, 187, 249, 0.5);
  animation: laserScanY 4.2s infinite ease-in-out;
  pointer-events: none;
  z-index: 4;
}

.vehicle-wireframe svg circle[stroke-dasharray] {
  animation: wheelSpin 3.5s linear infinite;
}

.vehicle-wireframe svg {
  animation: badgeBreatheCyan 4s infinite ease-in-out;
}

.map-hud-overlay .corner {
  animation: cornerPulse 2.6s infinite ease-in-out;
}

.btn-primary,
.btn-preset-accent {
  animation: badgeBreatheCyan 3s infinite ease-in-out;
}

.status-strip {
  position: relative;
  overflow: hidden;
}

.status-strip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ride-cyan), var(--ride-accent), transparent);
  animation: topEdgeSweep 6s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Container Queries & Responsive Breakpoints */
@container (max-width: 260px) {
  .metric > strong {
    font-size: 1.35rem;
  }
}

@media (max-width: 1180px) {
  .cockpit-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .telemetry-matrix {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
  }
  .visual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .ride-shell {
    padding: 10px 10px 28px;
  }
  .ride-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 10px;
    gap: 8px;
  }
  .brand-sub,
  .ride-header p {
    display: none;
  }
  .garage-section {
    margin-bottom: 10px;
  }
  .section-caption {
    margin-bottom: 6px;
  }
  .garage-dock {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .garage-card {
    min-width: 148px;
    padding: 7px 10px;
    gap: 8px;
    flex-shrink: 0;
  }
  .garage-thumb {
    width: 38px;
  }
  .cockpit-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .cockpit-card {
    padding: 12px 14px;
  }
  #latest {
    font-size: 2.35rem;
  }
  .voltage-gauge-strip {
    margin-top: 8px;
    padding: 7px 10px;
  }
  .vehicle-stage {
    aspect-ratio: 21 / 9;
    margin-bottom: 0;
  }
  .telemetry-matrix {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ride-toolbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .toolbar-inputs {
    flex-wrap: wrap;
    gap: 10px;
  }
  .toolbar-inputs label:first-child {
    flex-basis: 100%;
  }
  .toolbar-inputs label {
    min-width: 135px;
  }
  .toolbar-inputs button {
    width: 100%;
  }
  .status-strip {
    margin: 10px 0 12px;
    padding: 8px 12px;
  }
  #voltage-chart,
  #map {
    height: 300px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .admin-panels .vehicle-edit {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Playback stays inside the existing map panel and wraps on small screens. */
.ride-playback{padding:0 16px 14px;border-top:1px solid var(--ride-border,#263854)}
#map .e8-label{padding:5px 10px;border:1px solid #f8ce54;border-radius:8px;background:#10233a;color:#fff4c4;font:700 14px/1.4 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 3px 10px #0006;pointer-events:none;cursor:default;z-index:2}
#map .e8-label::after{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:#10233a;border-right:1px solid #f8ce54;border-bottom:1px solid #f8ce54;transform:translateX(-50%) rotate(45deg)}
#map .e8-label:empty{display:none}
.replay-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:12px}
.replay-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ride-muted,#8ca0ba)}
.replay-toolbar .form-control,.replay-toolbar .form-select{background-color:#0a1525;color:#eaf4ff;border-color:#263854;min-height:38px}
.replay-toolbar button{min-height:38px}
#replay-play{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  flex:1 0 100%;order:1;
  min-width:138px;min-height:50px;padding:12px 24px;border:1px solid #8dfff0;border-radius:12px;
  background:linear-gradient(115deg,#00c5f5,#50f5ce);color:#042b37;
  font-size:16px;font-weight:800;letter-spacing:.08em;white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,220,222,.24),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
#replay-play::before{
  content:'';display:block;flex:0 0 16px;width:16px;height:18px;
  background:currentColor;clip-path:polygon(12% 0,100% 50%,12% 100%);
}
#replay-play:not(:disabled):not([aria-pressed="true"]){animation:replayInvite 3s ease-in-out 3}
#replay-play:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.1)}
#replay-play:not(:disabled):active{transform:translateY(1px);filter:brightness(.96)}
#replay-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
#replay-play[aria-pressed="true"]{
  background:linear-gradient(115deg,#ffd369,#ffb552);border-color:#ffe6a4;color:#392509;
  box-shadow:0 4px 18px rgba(255,186,69,.2);
}
#replay-play[aria-pressed="true"]::before{
  clip-path:none;background:linear-gradient(90deg,currentColor 0 32%,transparent 32% 68%,currentColor 68% 100%);
}
#replay-play:disabled{
  background:#172635;border-color:#344657;color:#8294a6;box-shadow:none;
  cursor:not-allowed;animation:none;
}
@keyframes replayInvite{
  0%,100%{box-shadow:0 4px 18px rgba(0,220,222,.24),0 0 0 0 rgba(48,238,218,.2)}
  50%{box-shadow:0 5px 24px rgba(0,220,222,.4),0 0 0 5px rgba(48,238,218,0)}
}
.replay-slider-label{display:block;margin:14px 0 7px;color:var(--ride-muted,#8ca0ba);font-size:12px}
.replay-trips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.replay-trip{border:1px solid #263854;border-radius:8px;background:#0a1525;color:#b9cde5;padding:8px 10px;min-height:40px;font-size:12px;font-variant-numeric:tabular-nums}
.replay-trip[aria-pressed="true"]{border-color:#20d7d1;background:#103039;color:#b9fff1}
.replay-trip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.replay-point-details{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin-top:14px;padding:12px 0;border-top:1px solid #263854;border-bottom:1px solid #263854}
.replay-point-details>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.replay-point-details span{font-size:11px;color:var(--ride-muted,#8ca0ba)}
.replay-point-details strong{font-size:14px;font-weight:600;color:#eaf4ff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.replay-point-details #replay-point-speed{font-size:22px;color:#52eadb}
.replay-point-location{grid-column:1/-1}
#replay-time{width:100%;accent-color:#80baff;touch-action:pan-y}
.ride-playback .map-note{padding:8px 0;margin:0;min-height:38px}
.replay-quality{color:var(--ride-muted,#8ca0ba);font-size:11px;margin:0;line-height:1.6}
.garage-speed{display:block;color:#afcaff;font-size:11px;margin-top:5px;white-space:normal;line-height:1.5}
@media(max-width:600px){.ride-playback{padding:0 10px 12px}.replay-toolbar{gap:8px}.replay-toolbar label:first-child{width:100%}.replay-toolbar button{flex:1}.replay-toolbar .form-control{max-width:100%}}
@media(max-width:600px){#replay-play{min-height:54px}}
@media(prefers-reduced-motion:reduce){#replay-play{animation:none!important;transition:none}}

/* Sensor administration: scoped cards keep review forms usable on phones. */
#sensors{min-width:0}
#sensors h2{font-size:1.25rem;margin:0 0 8px}
#sensors h3{font-size:1.1rem;margin:28px 0 8px}
#sensors .sensor-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
#sensors .sensor-toolbar>div{flex:1 1 300px;min-width:0}
#sensors .sensor-note{font-size:.85rem;margin:8px 0}
#sensors .sensor-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;align-items:start}
#sensors .sensor-card{min-width:0;padding:18px;border:1px solid var(--ride-border,#263854);border-radius:12px;background:#0a1525;overflow-wrap:anywhere}
#sensors .sensor-card-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
#sensors .sensor-card h4{font-size:1rem;margin:0;min-width:0;overflow-wrap:anywhere}
#sensors .sensor-badge{font-size:.8rem;padding:5px 9px;border:1px solid #46617c;border-radius:6px;color:#d9eaff;background:#172b3d}
#sensors .sensor-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px 12px;font-size:.875rem;margin-bottom:18px}
#sensors .sensor-details dt{font-weight:400;color:var(--ride-muted,#8ca0ba)}
#sensors .sensor-details dd{min-width:0;margin:0;color:#eaf4ff;font-variant-numeric:tabular-nums}
#sensors .sensor-review-form{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
#sensors .sensor-review-form>label{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:.9rem}
#sensors .sensor-review-form>.sensor-consent{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:9px;line-height:1.6}
#sensors .sensor-consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--ride-accent,#00f5d4)}
#sensors .form-control,#sensors .form-select{min-width:0;width:100%;min-height:44px;background-color:#101f32;border-color:#46617c;color:#eaf4ff;font-size:16px}
#sensors .sensor-pairing-code{max-width:200px;letter-spacing:.15em}
#sensors .btn{min-height:44px;white-space:normal;animation:none}
#sensors .sensor-actions{min-width:0;margin:0;padding:0;border:0}
#sensors .sensor-row-status{margin:12px 0 0;color:#c6f5eb}
#sensors .sensor-row-status:empty{display:none}
#sensors .sensor-empty{padding:16px;border:1px dashed #46617c;border-radius:8px}
@media(max-width:600px){#sensors .sensor-toolbar>button{width:100%}#sensors .sensor-card{padding:14px}#sensors .sensor-details{grid-template-columns:1fr;gap:3px}#sensors .sensor-details dd{margin-bottom:9px}#sensors .sensor-actions .btn{width:100%}}

/* 每裝置電壓校正：僅作用於感測裝置內的新區域。 */
#voltage-calibration{margin-top:32px;padding:24px;border:1px solid #355269;border-radius:16px;background:#091725;min-width:0}
#voltage-calibration h3{margin:0 0 8px;color:#90f5dd}
#voltage-calibration h4{font-size:1rem;margin:0 0 8px}
#voltage-calibration p{line-height:1.65;overflow-wrap:anywhere}
#voltage-calibration .voltage-toolbar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
#voltage-calibration .voltage-toolbar>div{flex:1 1 260px;min-width:0}
#voltage-calibration .voltage-toolbar p{margin-bottom:0}
#voltage-calibration .voltage-device-label,#voltage-calibration .voltage-input-grid label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:.9rem}
#voltage-calibration .voltage-device-label{max-width:720px}
#voltage-calibration .voltage-note,#voltage-calibration small{font-size:.8rem;color:#a9bdd0}
#voltage-calibration .voltage-note{margin:8px 0}
#voltage-calibration .voltage-readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 14px}
#voltage-calibration .voltage-readouts>div{display:flex;flex-direction:column;gap:7px;padding:16px;background:#102337;border:1px solid #2b465f;border-radius:10px;min-width:0}
#voltage-calibration .voltage-readouts span{font-size:.85rem;color:#c2d4e5}
#voltage-calibration .voltage-readouts strong{font-size:clamp(1.25rem,2.2vw,1.8rem);font-variant-numeric:tabular-nums;color:#f0f7ff;overflow-wrap:anywhere}
#voltage-calibration .voltage-readouts .voltage-preview{border-color:#388b84;background:#11302f}
#voltage-calibration .voltage-preview strong{color:#8ef8db}
#voltage-calibration .voltage-sample-meta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:start}
#voltage-calibration .voltage-sample-meta>span{padding:5px 9px;border-radius:6px;background:#25374a;color:#c9d9e9;font-size:.8rem}
#voltage-calibration [data-freshness="fresh"]{background:#113c34;color:#92f0d8}
#voltage-calibration [data-freshness="stale"],#voltage-calibration [data-freshness="unknown"]{background:#4a3517;color:#ffdc91}
#voltage-calibration .voltage-sample-meta dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:.8rem;margin:0}
#voltage-calibration .voltage-sample-meta dt{font-weight:400;color:#a9bdd0}
#voltage-calibration .voltage-sample-meta dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#voltage-calibration fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}
#voltage-calibration .voltage-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:680px}
#voltage-calibration .voltage-helper{margin:20px 0;padding:18px;border:1px dashed #42637c;border-radius:10px}
#voltage-calibration .voltage-helper>p{font-size:.85rem;color:#b9ccdd}
#voltage-calibration .voltage-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#voltage-calibration .voltage-effect-note{padding:12px;border-left:3px solid #49c6b5;background:#102c32;font-size:.85rem}
#voltage-calibration #voltage-save{min-width:180px;font-weight:700}
#voltage-calibration #voltage-status{margin:16px 0 0;color:#b6f1e4;min-height:1.65em}
@media(max-width:700px){#voltage-calibration{padding:16px}#voltage-calibration .voltage-readouts{grid-template-columns:1fr}#voltage-calibration .voltage-readouts strong{font-size:1.7rem}#voltage-calibration .voltage-toolbar>button{width:100%}}
@media(max-width:420px){#voltage-calibration .voltage-input-grid{grid-template-columns:1fr}#voltage-calibration .voltage-actions>.btn,#voltage-calibration #voltage-save{width:100%}#voltage-calibration .voltage-helper{padding:14px}}

.vehicle-photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:20px}
.vehicle-photo-card{border:1px solid #28516a;border-radius:12px;overflow:hidden;background:#0b1725}
.vehicle-photo-card img{width:100%;height:210px;object-fit:contain;background:#06111d}
.photo-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px}