* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Arial, Tahoma, sans-serif; }
html, body { margin: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
body { color: #f4f8ff; user-select: none; }
.hud {
  position: fixed; right: 2.3vw; bottom: 3.1vh; width: 318px;
  padding: 16px 17px 12px; border: 1px solid rgba(62,151,255,.42);
  border-radius: 15px; background: linear-gradient(145deg, rgba(7,17,32,.96), rgba(4,10,20,.95));
  box-shadow: 0 12px 38px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
  transition: opacity .16s ease, transform .16s ease;
}
.hud.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }
.header { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px; color: #fff; font-weight: 900; font-size: 20px; font-style: italic;
  background: linear-gradient(135deg,#137bff,#42d7ff); box-shadow: 0 0 17px #1684ff44;
}
.heading { flex: 1; }
.eyebrow { font-size: 8px; letter-spacing: 2px; color: #63b8ff; font-weight: 800; }
.title { margin-top: 2px; font-size: 15px; font-weight: 900; letter-spacing: 1.1px; }
.title span { color: #55baff; }
.pill { display:flex; align-items:center; gap:5px; padding:6px 7px; border-radius:6px; font-size:8px; font-weight:800; letter-spacing:.5px; }
.pill i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.off { color:#ff777d; background:#ff515115; }
.pill.on { color:#51e5a2; background:#2ce99c15; }
.speed-section { position:relative; height:172px; margin-top:8px; }
.gauge { position:absolute; left:50%; top:0; width:260px; height:155px; transform:translateX(-50%); }
.gauge-track, .gauge-progress { fill:none; stroke-width:9; stroke-linecap:round; }
.gauge-track { stroke:#22364e; }
.gauge-progress { stroke:url(#blueGradient); stroke-dasharray:317.3; stroke-dashoffset:317.3; filter:drop-shadow(0 0 4px #168cff88); transition:stroke-dashoffset .18s linear; }
.speed-readout { position:absolute; top:48px; left:0; width:100%; text-align:center; }
.speed { font-size:57px; line-height:1; font-weight:800; letter-spacing:-2px; font-variant-numeric:tabular-nums; text-shadow:0 0 18px #278eff20; }
.unit { margin-top:5px; font-size:10px; font-weight:800; color:#7e9bb9; letter-spacing:3px; }
.speed-label { position:absolute; bottom:3px; width:100%; text-align:center; color:#506b88; font-size:8px; letter-spacing:2px; }
.metrics { display:flex; flex-direction:column; gap:11px; }
.metric { display:flex; align-items:center; gap:10px; min-height:43px; }
.metric-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:9px; color:#5ab8ff; background:#102844; font-size:21px; font-weight:bold; }
.metric-icon.fuel { color:#ffc766; background:#302817; }
.metric-icon.engine { color:#59e4a2; background:#102b27; }
.metric-copy { min-width:0; flex:1; }
.label { display:flex; justify-content:space-between; gap:5px; font-size:10px; color:#c2d0e0; }
.label span { color:#58728e; font-size:8px; letter-spacing:.8px; }
.value { margin-top:3px; display:flex; align-items:baseline; gap:5px; }
.value strong { font-size:16px; font-variant-numeric:tabular-nums; }
.value small { color:#7290af; font-size:9px; font-weight:bold; }
.bar { height:3px; margin-top:5px; overflow:hidden; border-radius:4px; background:#1e3045; }
.bar-fill { height:100%; width:100%; border-radius:4px; transition:width .2s linear; }
.fuel-fill { background:#ffc766; }
.health-fill { background:#45dca0; }
.footer { display:flex; align-items:center; gap:6px; border-top:1px solid #1b2c41; margin-top:13px; padding-top:10px; color:#7e96b0; font-size:9px; letter-spacing:.7px; }
.live-dot { width:5px; height:5px; border-radius:50%; background:#44e4a0; box-shadow:0 0 7px #44e4a0; }
.footer-right { margin-left:auto; color:#58728e; }
.footer-right b { color:#54b9ff; }
@media (max-width: 700px) { .hud { right:12px; bottom:14px; transform:scale(.88); transform-origin:bottom right; } }