/* ─────────────────────────────────────────────────────────────
   DREV NETWORK — Mapbox + Three.js Open World
   Design: Palantir / Anduril — dark ground, no color saturation
   Typography: Orbitron (callsigns) · Rajdhani (data)
───────────────────────────────────────────────────────────── */
:root {
  --bg:       #020408;
  --surface:  rgba(4,10,20,0.82);
  --border:   rgba(255,255,255,0.07);
  --accent:   #00b4d8;
  --green:    #00e5a0;
  --amber:    #e5a000;
  --red:      #e53030;
  --text:     rgba(220,232,248,0.90);
  --muted:    rgba(220,232,248,0.38);
  --font-d:   'Orbitron', monospace;
  --font-ui:  'Rajdhani', system-ui, sans-serif;
  --font-data:'Rajdhani', monospace;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui);
}

/* ── Map container ────────────────────────────────────────── */
#map {
  position:fixed; inset:0; width:100%; height:100%;
}
/* Hide default Mapbox controls — we use our own UI */
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-top-left { display:none !important; }
.mapboxgl-canvas { outline:none; }

/* ── Boot screen ──────────────────────────────────────────── */
#boot {
  position:fixed; inset:0; z-index:9000;
  background:radial-gradient(ellipse at 50% 30%, #0a1628 0%, #030812 50%, #010204 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  transition:opacity .8s ease;
  overflow:hidden;
}
#boot.hidden { opacity:0; pointer-events:none; }
#boot-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
/* Canvas fallback: CSS-only static loader when canvas fails */
#boot.no-canvas #boot-canvas { display:none; }
#boot.no-canvas #boot-scanline { display:none; }
#boot.no-canvas #boot-content { margin-bottom:0; }
#boot.no-canvas .boot-fallback-msg {
  display:block; position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  font-family:var(--font-data); font-size:9px; letter-spacing:3px;
  color:rgba(0,212,255,0.2); text-transform:uppercase;
}
.boot-fallback-msg { display:none; }

#boot-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  margin-bottom:40px;
}

/* DREV emblem ring */
#boot-emblem {
  width:120px; height:120px;
  border:1.5px solid rgba(0,212,255,0.15);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  animation: emblem-pulse 3s ease-in-out infinite;
}
#boot-emblem::before {
  content:''; position:absolute; inset:-4px;
  border:1px solid rgba(0,212,255,0.06);
  border-radius:50%;
  animation: emblem-ring 4s linear infinite;
}
#boot-emblem::after {
  content:''; position:absolute; inset:-10px;
  border:1px solid rgba(100,100,255,0.04);
  border-radius:50%;
  animation: emblem-ring 6s linear infinite reverse;
}
@keyframes emblem-pulse {
  0%,100% { box-shadow:0 0 20px rgba(0,212,255,0.05), inset 0 0 20px rgba(0,212,255,0.02); }
  50% { box-shadow:0 0 40px rgba(0,212,255,0.12), inset 0 0 30px rgba(0,212,255,0.05); }
}
@keyframes emblem-ring {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
#boot-emblem-svg {
  width:52px; height:52px;
  fill:none; stroke:var(--accent); stroke-width:1.5;
  opacity:0.9;
  filter:drop-shadow(0 0 12px rgba(0,212,255,0.3));
}

#boot-logo {
  font-family:var(--font-d);
  font-size:clamp(28px,5vw,48px); font-weight:900;
  letter-spacing:12px; color:#fff;
  text-shadow:0 0 60px rgba(0,212,255,0.3), 0 0 120px rgba(0,212,255,0.1);
  opacity:0; transform:translateY(20px);
  animation: logo-fade-in 1.2s ease 0.3s forwards;
}
@keyframes logo-fade-in {
  to { opacity:1; transform:translateY(0); }
}

#boot-sub {
  font-family:var(--font-data); font-size:10px;
  letter-spacing:6px; color:rgba(255,255,255,0.25);
  text-transform:uppercase;
  opacity:0; animation: sub-fade-in 0.8s ease 0.8s forwards;
}
@keyframes sub-fade-in {
  to { opacity:1; }
}

/* Scan line that sweeps across the screen */
#boot-scanline {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0.15; z-index:1;
  animation: scanline 4s ease-in-out infinite;
}
@keyframes scanline {
  0% { top:-1px; opacity:0; }
  10% { opacity:0.15; }
  90% { opacity:0.15; }
  100% { top:100%; opacity:0; }
}

#boot-bar-wrap {
  width:min(360px,60vw); height:2px;
  background:rgba(0,212,255,0.08); position:relative;
  overflow:hidden;
  opacity:0; animation: bar-fade-in 0.6s ease 1.5s forwards;
}
@keyframes bar-fade-in {
  to { opacity:1; }
}
#boot-bar-wrap::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(100,100,255,0.3),transparent);
  animation: bar-shimmer 2s ease-in-out infinite;
}
@keyframes bar-shimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
#boot-bar {
  position:absolute; left:0; top:0; height:100%;
  background:linear-gradient(90deg,var(--accent),#6366f1,var(--accent));
  width:0%;
  transition:width .3s ease;
  box-shadow:0 0 12px var(--accent), 0 0 30px rgba(0,212,255,0.2);
}

#boot-msg {
  font-family:var(--font-data); font-size:10px;
  letter-spacing:3px; color:rgba(0,212,255,0.4);
  text-transform:uppercase; min-height:14px;
  opacity:0; animation: msg-fade-in 0.6s ease 1.7s forwards;
}
@keyframes msg-fade-in {
  to { opacity:1; }
}

/* Corner decorations */
#boot-corner-tl, #boot-corner-tr, #boot-corner-bl, #boot-corner-br {
  position:absolute; width:40px; height:40px;
  border-color:rgba(0,212,255,0.08);
  border-style:solid;
  z-index:3;
}
#boot-corner-tl { top:30px; left:30px; border-width:1px 0 0 1px; }
#boot-corner-tr { top:30px; right:30px; border-width:1px 1px 0 0; }
#boot-corner-bl { bottom:30px; left:30px; border-width:0 0 1px 1px; }
#boot-corner-br { bottom:30px; right:30px; border-width:0 1px 1px 0; }

/* Bottom status bar */
#boot-status {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; gap:24px; align-items:center;
  font-family:var(--font-data); font-size:9px;
  letter-spacing:2px; color:rgba(255,255,255,0.12);
  text-transform:uppercase;
  opacity:0; animation: status-fade 0.8s ease 2s forwards;
}
@keyframes status-fade {
  to { opacity:1; }
}
.boot-status-dot {
  width:3px; height:3px; border-radius:50%;
  background:var(--accent);
  animation: status-dot 1.5s ease-in-out infinite;
}
@keyframes status-dot {
  0%,100% { opacity:0.2; }
  50% { opacity:1; }
}

/* ── Floating nav (top-center, minimal) ──────────────────── */
#nav-bar {
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; gap:4px; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:5px 8px;
  backdrop-filter:blur(20px); pointer-events:auto;
}
.nav-btn {
  padding:4px 12px; border-radius:4px; cursor:pointer;
  font-family:var(--font-data); font-size:11px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  border:1px solid transparent; color:var(--muted);
  background:transparent; transition:all .12s;
  white-space:nowrap;
}
.nav-btn:hover { color:var(--text); border-color:var(--border); }
.nav-btn.active { color:var(--accent); border-color:rgba(0,180,216,.35); background:rgba(0,180,216,.07); }
.nav-btn.world-btn { color:var(--muted); }
.nav-btn.world-btn.active { color:var(--amber); border-color:rgba(229,160,0,.35); background:rgba(229,160,0,.07); }
.nav-sep { width:1px; height:16px; background:var(--border); margin:0 2px; }

/* ── Vehicle selector — left rail ────────────────────────── */
#fleet-rail {
  position:fixed; left:12px; top:50%; transform:translateY(-50%);
  z-index:500; display:flex; flex-direction:column; gap:4px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:8px 6px;
  backdrop-filter:blur(20px);
}
.fleet-item {
  width:36px; height:36px; border-radius:4px; cursor:pointer;
  border:1px solid transparent; display:flex; align-items:center;
  justify-content:center; transition:all .12s; position:relative;
  color:var(--muted); background:transparent; overflow:hidden;
}
.fleet-item:hover { color:var(--text); border-color:var(--border); background:rgba(255,255,255,.04); }
.fleet-item.active { border-color:currentColor; background:rgba(255,255,255,.06); }
.fleet-item.ev-type   { --t:#d44400; }
.fleet-item.vtol-type { --t:#4a9eff; }
.fleet-item.boat-type { --t:#00c8d4; }
.fleet-item.active { color:var(--t); }
.fleet-item .fi-img { width:28px; height:28px; object-fit:contain; }
.fleet-item svg { width:18px; height:18px; }
.fleet-tooltip {
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:rgba(4,10,20,.95); border:1px solid var(--border);
  border-radius:4px; padding:5px 10px; pointer-events:none;
  white-space:nowrap; opacity:0; transition:opacity .12s;
}
.fleet-item:hover .fleet-tooltip { opacity:1; }
.fleet-tooltip .tt-name { font-family:var(--font-data); font-size:11px; font-weight:600; color:var(--text); letter-spacing:.5px; }
.fleet-tooltip .tt-stats { font-family:var(--font-data); font-size:10px; color:var(--muted); margin-top:2px; }
#fleet-sep { width:28px; height:1px; background:var(--border); margin:2px auto; }
#spawn-btn {
  width:36px; height:28px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(0,180,216,.35); background:rgba(0,180,216,.08);
  color:var(--accent); font-family:var(--font-data); font-size:9px;
  font-weight:700; letter-spacing:1px; text-transform:uppercase; transition:all .12s;
}
#spawn-btn:hover { background:rgba(0,180,216,.18); }
#spawn-btn.exit-mode { border-color:rgba(229,48,48,.35); background:rgba(229,48,48,.08); color:var(--red); }

/* ── HUD — bottom strip ───────────────────────────────────── */
#hud {
  position:fixed; bottom:68px; left:0; right:0; z-index:500;
  height:72px;
  background:rgba(6,13,28,0.7); border-top:1px solid rgba(56,189,248,0.4);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.6), inset 0 2px 15px rgba(56,189,248,0.1);
  backdrop-filter:blur(24px) saturate(200%); -webkit-backdrop-filter:blur(24px) saturate(200%);
  display:flex; align-items:stretch;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
#hud.visible { transform:translateY(0); }
/* AI Fleet Swarm Module */
.ai-swarm-diag {
  display: flex; align-items: center; gap: 15px; padding: 0 20px;
  border-left: 1px solid var(--border);
}
.ai-swarm-diag button {
  background: rgba(56, 189, 248, 0.2); border: 1px solid #38bdf8;
  color: #38bdf8; padding: 8px 16px; border-radius: 4px; cursor: pointer;
  font-family: var(--font-data); font-weight: bold; text-transform: uppercase;
  transition: all 0.2s; box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.ai-swarm-diag button:hover { background: #38bdf8; color: #000; box-shadow: 0 0 15px #38bdf8; }
.ai-swarm-text { font-family: var(--font-data); font-size: 11px; color: #4ade80; text-shadow: 0 0 5px #4ade80; }
.hud-block {
  display:flex; flex-direction:column; justify-content:center;
  padding:0 20px; border-right:1px solid var(--border);
  min-width:90px;
}
.hud-block:last-child { border-right:none; }
.hud-label {
  font-family:var(--font-data); font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--muted);
  margin-bottom:3px;
}
.hud-value {
  font-family:var(--font-d); font-size:22px; font-weight:700;
  color:var(--text); line-height:1; letter-spacing:-.5px;
}
.hud-unit { font-family:var(--font-data); font-size:10px; color:var(--muted); margin-left:3px; }
.hud-veh-name {
  font-family:var(--font-d); font-size:11px; font-weight:700;
  color:var(--text); letter-spacing:1px; text-transform:uppercase;
}
.hud-veh-class {
  font-family:var(--font-data); font-size:9px; letter-spacing:2px;
  text-transform:uppercase; margin-top:3px; color:var(--accent);
}
.hud-center { flex:1; display:flex; align-items:center; gap:24px; padding:0 24px; }
.hud-right { display:flex; gap:0; margin-left:auto; }
#hud-exit-btn {
  padding:0 20px; cursor:pointer; border:none;
  background:rgba(229,48,48,.1); border-left:1px solid rgba(229,48,48,.2);
  color:var(--red); font-family:var(--font-data); font-size:10px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase; transition:background .12s;
}
#hud-exit-btn:hover { background:rgba(229,48,48,.2); }
#bat-bar-wrap { width:80px; height:3px; background:rgba(255,255,255,.07); border-radius:2px; margin-top:4px; }
#bat-bar { height:100%; border-radius:2px; transition:width .4s,background .4s; width:100%; background:var(--green); }

/* Cam strip */
#cam-strip {
  position:fixed; bottom:84px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; gap:3px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:5px; padding:4px;
  backdrop-filter:blur(20px); opacity:0; pointer-events:none;
  transition:opacity .2s;
}
#cam-strip.visible { opacity:1; pointer-events:auto; }
.cam-btn {
  padding:3px 10px; border-radius:3px; cursor:pointer;
  font-family:var(--font-data); font-size:9px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  border:1px solid transparent; color:var(--muted); background:transparent; transition:all .1s;
}
.cam-btn:hover { color:var(--text); }
.cam-btn.active { color:var(--accent); border-color:rgba(0,180,216,.3); background:rgba(0,180,216,.07); }

/* Controls hint */
#ctrl-hint {
  position:fixed; bottom:85px; left:50%; transform:translateX(-50%);
  z-index:500; padding:6px 16px; border-radius:4px;
  background:rgba(0,0,0,.65); border:1px solid rgba(0,180,216,.2);
  font-family:var(--font-data); font-size:10px; color:rgba(0,180,216,.75);
  letter-spacing:1.5px; text-transform:uppercase; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
#ctrl-hint.visible { opacity:1; }

/* Pointer-lock hint */
#ptr-hint {
    position:fixed; top:24px; right:24px;
    z-index:499; padding:8px 12px; border-radius:20px;
    background:rgba(0,0,0,.72); border:1px solid rgba(0,180,216,.4);
    font-size:20px; pointer-events:none;
    opacity:0; transition:all .3s;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
  }
  #ptr-hint.visible { opacity:1; }
  #ptr-hint::after {
    content: '🎥🔒';
    margin-left:0;
  }

/* Minimap - AAA High-Fidelity Tactical 2D Radar */
#minimap {
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  width:160px; height:160px; z-index:500;
  border-radius:50%; overflow:visible;
  border:2px solid rgba(0,212,255,0.45); background:rgba(2,6,14,.95);
  box-shadow:0 0 24px rgba(0,212,255,0.25), inset 0 0 16px rgba(0,212,255,0.15);
  backdrop-filter:blur(14px);
  cursor:pointer;
}
#minimap canvas { width:160px; height:160px; border-radius:50%; display:block; }
#minimap-label {
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--font-data); font-size:9px; font-weight:700; color:#00e5ff;
  letter-spacing:1px; text-transform:uppercase; white-space:nowrap; pointer-events:none;
  background:rgba(2,8,20,0.88); padding:3px 10px; border-radius:12px;
  border:1px solid rgba(0,212,255,0.3);
  box-shadow:0 4px 12px rgba(0,0,0,0.6);
}

/* Mode badge */
#mode-badge {
  position:fixed; top:50px; left:50%; transform:translateX(-50%);
  z-index:500; padding:4px 14px; border-radius:4px;
  background:rgba(0,0,0,.6); border:1px solid rgba(0,180,216,.2);
  font-family:var(--font-d); font-size:8px; color:var(--accent);
  letter-spacing:3px; text-transform:uppercase; pointer-events:none;
  transition:opacity .3s;
}

/* Station popup */
#station-popup {
  position:fixed; top:50%; left:50%; z-index:800;
  transform:translate(-50%,-50%) scale(.94);
  min-width:300px; max-width:360px;
  background:rgba(5,11,22,.98); border:1px solid rgba(0,180,216,.18);
  border-radius:10px; padding:24px 24px 20px;
  backdrop-filter:blur(40px);
  opacity:0; pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 24px 64px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}
#station-popup.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
#sp-close {
  position:absolute; top:12px; right:14px; background:none; border:none;
  color:var(--muted); font-size:18px; cursor:pointer; line-height:1; padding:4px;
  opacity:.6; transition:opacity .12s;
}
#sp-close:hover { opacity:1; }
#sp-name {
  font-family:var(--font-ui); font-size:15px; font-weight:700;
  color:var(--text); margin-bottom:3px; padding-right:24px;
}
#sp-type {
  font-family:var(--font-data); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
  opacity:.8;
}
.sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.sp-stat {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  padding:12px 14px; border-radius:8px;
}
.sp-stat-val {
  font-family:var(--font-ui); font-size:18px; font-weight:700; color:var(--text);
  line-height:1;
}
.sp-stat-lbl {
  font-family:var(--font-data); font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); margin-top:5px;
}
#sp-cta {
  display:block; width:100%; padding:12px; text-align:center;
  background:rgba(0,180,216,.12); border:1px solid rgba(0,180,216,.35);
  border-radius:8px; color:var(--accent); font-family:var(--font-ui);
  font-size:13px; font-weight:600; letter-spacing:.5px;
  cursor:pointer; text-decoration:none; transition:all .15s;
}
#sp-cta:hover { background:rgba(0,180,216,.22); box-shadow:0 0 14px rgba(0,180,216,.25); }

/* Network markers on map */
.drev-marker {
  cursor:pointer; transition:transform .12s, opacity .12s;
}
.drev-marker:hover { transform:scale(1.4) !important; }
.dm-ring {
  width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor;
  background:rgba(0,0,0,.5);
  box-shadow:0 0 8px currentColor;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.dm-ring::after {
  content:''; width:5px; height:5px;
  border-radius:50%; background:currentColor;
}
.drev-marker.charger  { color:#00e5a0; }
.drev-marker.vtol     { color:#4a9eff; }
.drev-marker.dock     { color:#00c8d4; }
.drev-marker.airport  { color:#e5a000; }
.drev-marker.lv-wall  { color:#e5a000; }

/* ── Cascade FAB (bottom-right, above minimap) ───────────────────────── */
#cascade-fab {
  position:fixed; right:14px; bottom:170px; z-index:600;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  pointer-events:auto;
}
#cascade-main-btn {
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.45);
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}
#cascade-main-btn:hover { background:linear-gradient(135deg,#252545 0%,#1d2d50 100%); }
#cascade-main-btn.open { transform:rotate(45deg); }
.cascade-action-btn {
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:0;
  transform:translateY(20px) scale(0.85); opacity:0; pointer-events:none;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.cascade-action-btn.visible { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.cascade-action-btn .cab-label {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px; font-weight:600; color:#fff;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(12px);
  padding:6px 12px; border-radius:10px; white-space:nowrap;
  border:1px solid rgba(255,255,255,0.12);
}
.cascade-action-btn .cab-icon {
  width:44px; height:44px; border-radius:14px; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 3px 14px rgba(0,0,0,0.4);
  cursor:pointer;
}
.cab-tesla .cab-icon { background:linear-gradient(135deg,#e82127,#b01519); }
.cab-v2h   .cab-icon { background:linear-gradient(135deg,#30d158,#1a8f35); }
.cab-icon svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; }
#map.map-drawer-open { opacity:0.92; transition:opacity 0.35s ease; }

/* ── Full-screen drawers ─────────────────────────────────────────────── */
.apple-drawer {
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column;
  pointer-events:none;
}
.apple-drawer.open { pointer-events:auto; }
.drawer-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,0); transition:background 0.4s ease;
}
.apple-drawer.open .drawer-backdrop { background:rgba(0,0,0,0.55); }
.drawer-sheet {
  position:absolute; bottom:0; left:0; right:0;
  background:#f5f5f7;
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 40px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.65) inset;
  transform:translateY(100%);
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  max-height:92vh; display:flex; flex-direction:column;
  overflow:hidden;
  backdrop-filter:blur(24px) saturate(180%);
}
.apple-drawer.open .drawer-sheet { transform:translateY(0); }
.drawer-handle-bar {
  display:flex; align-items:center; justify-content:center;
  padding:10px 0 4px; flex-shrink:0;
  position:relative;
}
.drawer-pill {
  width:36px; height:5px; border-radius:3px;
  background:rgba(0,0,0,0.18); cursor:pointer;
}
.drawer-close {
  position:absolute; right:16px; top:8px;
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,0.08); color:#1d1d1f;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:background 0.15s;
}
.drawer-close:hover { background:rgba(0,0,0,0.14); }
.drawer-body {
  flex:1; overflow-y:auto; padding:0 0 40px;
  -webkit-overflow-scrolling:touch;
}
.drawer-body::-webkit-scrollbar { width:4px; }
.drawer-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); border-radius:2px; }

/* Drawer typography & layout */
.dw-hero {
  padding:24px 24px 20px; background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.dw-hero-eye {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:6px;
}
.dw-hero-title {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:28px; font-weight:700; color:#1d1d1f; line-height:1.15; margin-bottom:8px;
}
.dw-hero-sub {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px; color:#6e6e73; line-height:1.6;
}
.dw-section {
  padding:20px 24px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.dw-section-title {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px; font-weight:700; color:#1d1d1f; margin-bottom:14px;
}
.dw-card {
  background:#fff; border-radius:14px;
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
  overflow:hidden; margin-bottom:14px;
}
.dw-card-body { padding:16px 18px; }
.dw-card-title {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px; font-weight:700; color:#1d1d1f; margin-bottom:4px;
}
.dw-card-sub {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px; color:#6e6e73; line-height:1.5;
}

/* Property stats grid */
.prop-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px;
}
.prop-stat-card {
  background:#f5f5f7; border-radius:12px; padding:12px 14px;
}
.prop-stat-val {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:20px; font-weight:700; color:#1d1d1f; line-height:1;
}
.prop-stat-lbl {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:11px; color:#6e6e73; margin-top:4px; letter-spacing:.3px;
}

/* Mapbox embed in drawer */
#fp-map-wrap {
  position:relative; height:300px; overflow:hidden; background:#1a1a2e;
}
#fp-map { width:100%; height:100%; }
.fp-map-badge {
  position:absolute; background:rgba(0,0,0,0.72); backdrop-filter:blur(8px);
  color:#fff; font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.15); pointer-events:none; white-space:nowrap;
}
#fp-blueprint-btn {
  position:absolute; bottom:10px; right:10px; z-index:5;
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:12px; font-weight:600; padding:7px 12px; border-radius:10px;
  background:rgba(255,255,255,0.92); color:#1d1d1f; border:none; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.3); transition:background 0.15s;
}
#fp-blueprint-btn:hover { background:#fff; }
#fp-blueprint-svg {
  position:absolute; inset:0; z-index:4; display:none;
  background:#f0ede4;
}

/* Pricing cards */
.pricing-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px; margin-bottom:4px;
}
.pricing-card {
  background:#fff; border-radius:14px; padding:20px;
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
  border:1px solid transparent;
}
.pricing-card.featured { border-color:#30d158; }
.pricing-name {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px; font-weight:700; color:#6e6e73; letter-spacing:.5px;
  text-transform:uppercase; margin-bottom:4px;
}
.pricing-price {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:28px; font-weight:700; color:#1d1d1f; margin-bottom:8px;
}
.pricing-desc {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px; color:#6e6e73; line-height:1.5;
}

/* How it works */
.hiw-row {
  display:flex; gap:0; overflow-x:auto; padding-bottom:4px;
}
.hiw-row::-webkit-scrollbar { display:none; }
.hiw-step {
  flex:1; min-width:100px; text-align:center; padding:0 8px;
  position:relative;
}
.hiw-step:not(:last-child)::after {
  content:''; position:absolute; top:20px; right:-2px; width:12px; height:2px;
  background:#e82127; border-radius:1px;
}
.hiw-icon {
  width:44px; height:44px; margin:0 auto 8px; border-radius:12px;
  background:#f5f5f7; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hiw-icon img { width:100%; height:100%; object-fit:cover; }
.hiw-label {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:12px; font-weight:600; color:#1d1d1f; line-height:1.4;
}

/* Stats bar */
.stats-bar {
  display:flex; flex-wrap:wrap; gap:4px; margin-top:12px;
}
.stats-pill {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:12px; font-weight:600; color:#30d158;
  background:rgba(48,209,88,0.1); border:1px solid rgba(48,209,88,0.25);
  padding:5px 10px; border-radius:20px; white-space:nowrap;
}

/* Apple-style forms inside drawers */
.dw-form-group {
  display:flex; flex-direction:column; gap:4px; margin-bottom:12px;
}
.dw-form-label {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:12px; font-weight:600; color:#6e6e73; letter-spacing:.3px;
}
.dw-form-input, .dw-form-select {
  width:100%; padding:11px 13px;
  background:#fff; border:1.5px solid rgba(0,0,0,0.12); border-radius:10px;
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px; color:#1d1d1f; outline:none;
  transition:border-color 0.15s;
  -webkit-appearance:none; appearance:none;
}
.dw-form-input:focus, .dw-form-select:focus { border-color:#06c; }
.dw-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dw-form-full { grid-column:1/-1; }
.dw-submit-btn {
  width:100%; padding:14px; border:none; border-radius:12px;
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px; font-weight:700; cursor:pointer;
  margin-top:8px; transition:opacity 0.15s;
}
.dw-submit-btn:hover { opacity:0.88; }
.dw-submit-tesla { background:#e82127; color:#fff; }
.dw-submit-v2h   { background:#30d158; color:#fff; }
.dw-btn-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.dw-btn {
  flex:1; min-width:140px; padding:12px 16px; border:none; border-radius:12px;
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:14px; font-weight:600; cursor:pointer; transition:opacity 0.15s, transform 0.12s;
}
.dw-btn:active { transform:scale(0.98); }
.dw-btn:disabled { opacity:0.55; cursor:wait; }
.dw-btn-primary { background:#1d1d1f; color:#fff; }
.dw-btn-tesla { background:#e82127; color:#fff; }
.dw-btn-v2h { background:#30d158; color:#fff; }
.dw-btn-ghost { background:rgba(0,0,0,0.06); color:#1d1d1f; }

.dw-media-hero {
  position:relative; min-height:220px; overflow:hidden; background:#1d1d1f;
}
.dw-media-hero img { width:100%; height:220px; object-fit:cover; display:block; }
.dw-media-hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.72) 100%);
}
.dw-media-hero-copy {
  position:absolute; left:0; right:0; bottom:0; padding:20px 24px 22px; z-index:1;
}
.dw-media-hero-copy .dw-hero-title { color:#fff; margin-bottom:6px; }
.dw-media-hero-copy .dw-hero-sub { color:rgba(255,255,255,0.82); }

.dw-video-wrap {
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:0; overflow:hidden;
}
.dw-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.dw-bento {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.dw-bento-card {
  background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow:0 2px 16px rgba(0,0,0,0.06);
}
.dw-bento-val {
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:22px; font-weight:700; color:#1d1d1f; line-height:1.1;
}
.dw-bento-lbl {
  font-size:12px; color:#6e6e73; margin-top:4px; line-height:1.35;
}

.dw-gallery {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory;
}
.dw-gallery::-webkit-scrollbar { height:4px; }
.dw-gallery-card {
  flex:0 0 min(78vw, 280px); scroll-snap-align:start;
  border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
}
.dw-gallery-card img { width:100%; height:140px; object-fit:cover; display:block; }
.dw-gallery-card .dw-card-body { padding:12px 14px; }

.dw-spec-list { margin:0; padding:0; list-style:none; }
.dw-spec-list li {
  display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:14px; color:#1d1d1f;
}
.dw-spec-list li span:last-child { color:#6e6e73; text-align:right; }

.fp-map-badge {
  font-size:10px; letter-spacing:0.02em;
}
.fp-map-badge::before { display:none; }

/* Planned stations world map */
#world-map-wrap { height:260px; border-radius:14px; overflow:hidden; }
#world-map { width:100%; height:100%; }

/* Pulsing planned marker */
@keyframes pulse-ring {
  0%   { transform:scale(0.6); opacity:1; }
  80%  { transform:scale(2.0); opacity:0; }
  100% { transform:scale(2.0); opacity:0; }
}
.planned-marker {
  position:relative; width:12px; height:12px; cursor:pointer;
}
.planned-marker .pm-core {
  width:12px; height:12px; border-radius:50%;
  background:#00e5ff; box-shadow:0 0 8px #00e5ff;
  position:absolute; inset:0;
}
.planned-marker .pm-ring {
  width:12px; height:12px; border-radius:50%;
  border:2px solid #00e5ff; position:absolute; inset:0;
  animation:pulse-ring 2s ease-out infinite;
}
.planned-marker .pm-tip {
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.82); color:#fff;
  font-family:-apple-system,SF Pro Display,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:11px; font-weight:600; padding:4px 8px; border-radius:8px;
  white-space:nowrap; pointer-events:none; display:none;
  backdrop-filter:blur(6px);
}
.planned-marker:hover .pm-tip { display:block; }

/* Flamingo Palms special marker */
.flamingo-marker { cursor:pointer; }
.fm-dot {
  width:16px; height:16px; border-radius:50%;
  background:#e82127; border:2px solid #fff;
  box-shadow:0 0 14px rgba(232,33,39,0.6);
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:#fff; font-weight:700;
}

@media(max-width:600px) {
  .dw-form-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .hiw-row { gap:0; }
}

/* ── Asset Console - AAA Small Floating Cockpit Cards ───────────────────── */
#asset-console {
  position:fixed; bottom:152px; left:16px; z-index:9550;
  width:420px; max-width:calc(100vw - 32px);
  height:auto; min-height:190px;
  border-radius:18px;
  background:transparent;
  transform:translateY(130%);
  transition:all .35s cubic-bezier(.16,1,.3,1);
  font-family:var(--font-ui);
  overflow:hidden;
  pointer-events:none;
  box-shadow:0 12px 48px rgba(0,0,0,0.78), 0 0 24px rgba(0,180,216,0.18);
  border:1.5px solid rgba(0,212,255,0.3);
}
#asset-console.visible { transform:translateY(0); pointer-events:auto; }
#asset-console.ev-active    { border-color:rgba(0,229,160,0.48); box-shadow:0 12px 48px rgba(0,0,0,0.78), 0 0 32px rgba(0,229,160,0.22); }
#asset-console.vtol-active  { border-color:rgba(74,158,255,0.48); box-shadow:0 12px 48px rgba(0,0,0,0.78), 0 0 32px rgba(74,158,255,0.22); }
#asset-console.boat-active  { border-color:rgba(0,200,212,0.48); box-shadow:0 12px 48px rgba(0,0,0,0.78), 0 0 32px rgba(0,200,212,0.22); }

/* ── Carbon fiber backdrop ───────────────────────────────────────────── */
#asset-console::before {
  content:'';
  position:absolute; inset:0;
  border-radius:16px;
  background:
    linear-gradient(45deg, rgba(0,0,0,0.15) 25%, transparent 25%,
      transparent 50%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.15) 75%,
      transparent 75%, transparent) 0 0 / 8px 8px,
    linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%,
      transparent 75%, transparent) 0 0 / 8px 8px,
    radial-gradient(ellipse at 50% 120%, rgba(0,180,216,0.1) 0%, transparent 70%),
    radial-gradient(ellipse at 20% 80%, rgba(0,229,160,0.05) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6,12,24,0.95) 0%, rgba(3,7,15,0.98) 100%);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:0 0 40px rgba(0,180,216,0.08) inset;
  pointer-events:none;
  z-index:1;
}
/* ── Glossy accent top edge per vehicle type ─────────────────────────── */
#asset-console.ev-active::after {
  content:''; position:absolute; top:0; left:15%; right:15%; height:2px;
  background:linear-gradient(90deg, transparent, #00e5a0, transparent);
  box-shadow:0 0 14px rgba(0,229,160,0.6);
  pointer-events:none;
}
#asset-console.vtol-active::after {
  content:''; position:absolute; top:0; left:15%; right:15%; height:2px;
  background:linear-gradient(90deg, transparent, #4a9eff, transparent);
  box-shadow:0 0 14px rgba(74,158,255,0.6);
  pointer-events:none;
}
#asset-console.boat-active::after {
  content:''; position:absolute; top:0; left:15%; right:15%; height:2px;
  background:linear-gradient(90deg, transparent, #00c8d4, transparent);
  box-shadow:0 0 14px rgba(0,200,212,0.6);
  pointer-events:none;
}

/* ── Floating 3D hover lift ──────────────────────────────────────────── */
#asset-console.visible {
  animation: consoleFloat 4s ease-in-out infinite;
}
@keyframes consoleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.console-panel {
  display:none;
  height:100%;
  padding:0;
  position:relative; z-index:2;
}
.console-panel.active { display:flex; align-items:stretch; }

/* Header row */
.cp-header {
  display:flex; align-items:center; gap:8px;
  position:absolute; top:4px; left:12px; right:12px; z-index:10;
}
.cp-vname {
  font-family:var(--font-d); font-size:11px; font-weight:700;
  letter-spacing:.12em; color:var(--text); text-transform:uppercase;
}
.cp-class-badge {
  font-size:8px; font-weight:700; letter-spacing:.14em;
  padding:2px 8px; border-radius:3px;
  border:1px solid currentColor;
}
.cp-class-badge.ev   { color:#00e5a0; }
.cp-class-badge.vtol { color:#4a9eff; }
.cp-class-badge.boat { color:#00c8d4; }
.cp-exit-btn {
  margin-left:auto; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:rgba(220,232,248,.7); font-size:9px; letter-spacing:.1em;
  padding:4px 10px; border-radius:4px;
  font-family:var(--font-d);
}
.cp-exit-btn:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ── EV Badges ───────────────────────────────────────────────────────── */
.ev-badge-pwt {
  font-family:var(--font-d); font-size:7px; letter-spacing:.1em;
  color:rgba(0,229,160,.6); border:1px solid rgba(0,229,160,.15);
  padding:2px 8px; border-radius:3px;
}
.ev-badge-tier {
  font-family:var(--font-d); font-size:7px; letter-spacing:.1em;
  color:rgba(232,33,39,.6); border:1px solid rgba(232,33,39,.15);
  padding:2px 8px; border-radius:3px;
}

/* ── EV Gear Indicator (P/R/N/D) ─────────────────────────────────────── */
.ev-gear-indicator {
  display:flex; gap:2px; margin-left:6px; align-items:center;
}
.ev-gear {
  font-family:var(--font-d); font-size:11px; font-weight:700;
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  border-radius:3px; background:rgba(255,255,255,.04);
  color:rgba(220,232,248,.3); border:1px solid rgba(255,255,255,.06);
  transition:all .12s;
}
.ev-gear-active {
  color:#00e5a0; background:rgba(0,229,160,.12);
  border-color:rgba(0,229,160,.4); box-shadow:0 0 6px rgba(0,229,160,.2);
}

/* ── EV Motor Temperature ────────────────────────────────────────────── */
.ev-motor-temp {
  display:flex; align-items:center; gap:4px; width:100%;
  margin-top:4px; padding:0 4px;
}
.ev-motor-temp-label {
  font-size:6px; letter-spacing:1px; color:rgba(0,229,160,.4);
  text-transform:uppercase; font-family:var(--font-data);
}
.ev-motor-temp-bar {
  flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:2px;
  overflow:hidden;
}
.ev-motor-temp-fill {
  height:100%; background:linear-gradient(90deg,#00e5a0,#e5a000);
  border-radius:2px; transition:width .15s;
}
.ev-motor-temp-val {
  font-size:7px; font-family:var(--font-d); color:rgba(220,232,248,.5);
  min-width:20px; text-align:right;
}

/* ── EV Regen Bar (center, below speed) ──────────────────────────────── */
.ev-regen-bar {
  width:80%; margin-top:2px; display:flex; align-items:center; gap:4px;
}
.ev-regen-track {
  flex:1; height:3px; background:rgba(255,255,255,.04); border-radius:2px;
  display:flex; overflow:hidden;
}
.ev-regen-fill {
  height:100%; background:rgba(0,229,160,.15); transition:width .1s;
}
.ev-regen-charge {
  height:100%; background:rgba(0,229,160,.6); transition:width .1s;
  box-shadow:0 0 4px rgba(0,229,160,.3);
}
.ev-regen-label {
  font-size:6px; letter-spacing:1px; color:rgba(0,229,160,.3);
  text-transform:uppercase; font-family:var(--font-data);
}
/* ── EV Regen Meter (right column) ───────────────────────────────────── */
.ev-regen-meter {
  width:100%; margin-top:4px; display:flex; flex-direction:column;
  align-items:center; gap:2px;
}
.ev-regen-meter-label {
  font-size:6px; letter-spacing:1px; color:rgba(0,229,160,.35);
  text-transform:uppercase; font-family:var(--font-data);
}
.ev-regen-meter-track {
  width:60px; height:4px; background:rgba(255,255,255,.06); border-radius:2px;
  overflow:hidden;
}
.ev-regen-meter-fill {
  height:100%; background:rgba(0,229,160,.5); border-radius:2px;
  transition:width .1s;
}

/* ── EV Trip / Odometer row ──────────────────────────────────────────── */
.ev-trip-row {
  display:flex; gap:10px; margin-top:2px; width:100%; justify-content:center;
}
.ev-trip-item {
  font-family:var(--font-data); font-size:8px; letter-spacing:.5px;
  color:rgba(220,232,248,.4); text-transform:uppercase;
}
.ev-trip-item span {
  font-family:var(--font-d); color:rgba(220,232,248,.7); font-weight:600;
}

/* ── VTOL Heading Tape ───────────────────────────────────────────────── */
.vtol-heading-tape {
  position:relative; width:100%; max-width:160px; height:14px;
  background:rgba(0,4,16,.8); border:1px solid rgba(74,158,255,.15);
  border-radius:2px; overflow:hidden; margin-top:2px;
}
.vtol-heading-tape-inner {
  display:flex; align-items:center; height:100%;
  transition:transform .15s; gap:0;
}
.vtol-hdg-tick {
  font-family:var(--font-d); font-size:7px; color:rgba(74,158,255,.4);
  min-width:20px; text-align:center; flex-shrink:0;
}
.vtol-hdg-tick-active {
  color:#4a9eff; font-size:8px; font-weight:700;
  text-shadow:0 0 4px rgba(74,158,255,.3);
}
.vtol-heading-bug {
  position:absolute; top:0; transform:translateX(-50%);
  font-size:8px; color:#ffcc00; line-height:1;
  text-shadow:0 0 4px rgba(255,204,0,.4);
}

/* ── VTOL Nav Mode ───────────────────────────────────────────────────── */
.vtol-nav-mode {
  font-family:var(--font-d); font-size:7px; letter-spacing:.1em;
  color:rgba(74,158,255,.6); border:1px solid rgba(74,158,255,.15);
  padding:2px 8px; border-radius:3px; margin-left:4px;
}

/* ── VTOL G-Meter ────────────────────────────────────────────────────── */
.vtol-g-meter {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.vtol-g-track {
  width:6px; height:30px; background:rgba(255,255,255,.06);
  border-radius:3px; overflow:hidden; position:relative;
}
.vtol-g-fill {
  position:absolute; bottom:0; width:100%;
  background:linear-gradient(to top,#4a9eff,#00e5a0);
  border-radius:3px; transition:height .1s;
}
.vtol-g-val {
  font-family:var(--font-d); font-size:9px; font-weight:700;
  color:rgba(220,232,248,.7);
}

/* ── VTOL Torque Bar ─────────────────────────────────────────────────── */
.vtol-data-cell-torque {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.vtol-torque-bar {
  width:100%; height:4px; background:rgba(255,255,255,.06);
  border-radius:2px; overflow:hidden;
}
.vtol-torque-fill {
  height:100%; background:linear-gradient(90deg,#4a9eff,#8b5cf6);
  border-radius:2px; transition:width .15s;
}
.vtol-torque-val {
  font-family:var(--font-d); font-size:8px; font-weight:600;
  color:rgba(74,158,255,.6);
}

/* ── Boat Anchor Status ──────────────────────────────────────────────── */
.boat-anchor-status {
  font-family:var(--font-d); font-size:7px; letter-spacing:.1em;
  color:rgba(0,200,212,.6); border:1px solid rgba(0,200,212,.15);
  padding:2px 8px; border-radius:3px; margin-left:4px;
}

/* ── Boat Water Temperature ──────────────────────────────────────────── */
.boat-water-temp {
  display:flex; align-items:center; gap:3px; margin-top:4px;
  justify-content:center;
}
.boat-water-temp-label {
  font-size:6px; letter-spacing:1px; color:rgba(0,200,212,.35);
  text-transform:uppercase; font-family:var(--font-data);
}
.boat-water-temp-value {
  font-family:var(--font-d); font-size:9px; color:rgba(0,200,212,.6);
  font-weight:600;
}

/* ── Boat Sonar Visualization ─────────────────────────────────────────── */
.boat-sonar-viz {
  width:100%; height:24px; background:rgba(0,16,24,.6);
  border:1px solid rgba(0,200,212,.08); border-radius:2px;
  position:relative; overflow:hidden; margin:2px 0;
}
.boat-sonar-bottom {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(0,200,212,.25), transparent);
  border-radius:2px; transition:height .3s;
}
.boat-sonar-fish {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:rgba(0,200,212,.5); animation:fishBlip 2s ease-in-out infinite;
}
@keyframes fishBlip {
  0%,100% { opacity:0.3; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.5); }
}
.boat-sonar-unit {
  font-size:10px; color:rgba(0,200,212,.4); margin-left:4px;
}

/* ── Boat Fuel Flow ──────────────────────────────────────────────────── */
.boat-fuel-flow {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:4px 0;
}
.boat-fuel-bar {
  width:100%; height:4px; background:rgba(255,255,255,.06);
  border-radius:2px; overflow:hidden;
}
.boat-fuel-fill {
  height:100%; background:linear-gradient(90deg,#00c8d4,#e5a000);
  border-radius:2px; transition:width .15s;
}
.boat-fuel-val {
  font-family:var(--font-d); font-size:8px; font-weight:600;
  color:rgba(0,200,212,.5);
}

/* ── Boat Trip Log ────────────────────────────────────────────────────── */
.boat-trip-log {
  display:flex; gap:8px; padding:2px 0;
}
.boat-trip-item {
  font-family:var(--font-data); font-size:8px; letter-spacing:.5px;
  color:rgba(220,232,248,.4);
}
.boat-trip-item span {
  font-family:var(--font-d); color:rgba(0,200,212,.6); font-weight:600;
}

/* ── EV Digital Instrument Cluster (SRT/Hummer style) ──────── */
.ev-dash {
  flex:1; display:grid; grid-template-columns:100px 1fr 100px; align-items:center;
  padding:28px 10px 32px; position:relative; height:100%;
  gap:8px;
}
.ev-left-gauge, .ev-right-gauge {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 8px; position:relative;
}
.ev-cluster-center {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding:4px 0;
}
.ev-speed-huge {
  font-family:'Orbitron',monospace; font-size:42px; font-weight:900;
  color:#fff; line-height:1; text-shadow:0 0 30px rgba(0,229,160,.2);
  letter-spacing:-1px;
}
.ev-speed-unit { font-size:10px; color:rgba(0,229,160,.5); letter-spacing:3px; margin-top:1px; }
.ev-speed-bar {
  width:85%; height:3px; background:rgba(255,255,255,.06); border-radius:2px;
  margin-top:4px; overflow:hidden;
}
.ev-speed-bar-fill {
  height:100%; background:linear-gradient(90deg, #00e5a0, #00ffc8);
  border-radius:2px; transition:width .1s; box-shadow:0 0 8px rgba(0,229,160,.3);
}
.ev-info-row {
  display:flex; gap:2px; margin-top:4px; width:95%; justify-content:center;
}
.ev-info-cell {
  flex:1; text-align:center; padding:3px 2px;
  border:1px solid rgba(0,229,160,.08); border-radius:3px;
}
.ev-info-cell .cp-metric-label { font-size:6px; color:rgba(0,229,160,.45); }
.ev-info-cell .cp-metric-value { font-size:12px; color:#d8f0e8; }
.ev-arc-gauge { width:90px; height:90px; }
.ev-cta-strip {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; gap:0; border-top:1px solid rgba(0,229,160,.08);
}
.ev-cta-strip a {
  flex:1; text-align:center; padding:5px 0; font-size:8px; font-weight:700;
  letter-spacing:.08em; color:rgba(0,229,160,.7); text-decoration:none;
  border-right:1px solid rgba(0,229,160,.06); transition:background .15s;
}
.ev-cta-strip a:last-child { border-right:none; }
.ev-cta-strip a:hover { background:rgba(0,229,160,.06); color:#00e5a0; }

/* ── VTOL Glass Cockpit PFD (F-35 / G1000 style) ─────────── */
.vtol-pfd {
  flex:1; display:grid; grid-template-columns:52px 52px 1fr 52px 106px; align-items:stretch;
  padding:26px 6px 28px; position:relative; height:100%;
  gap:3px;
}
.vtol-tape-col {
  display:flex; flex-direction:column; align-items:stretch; justify-content:stretch;
}
.vtol-tape {
  flex:1; background:rgba(0,12,36,.5); border:1px solid rgba(74,158,255,.1);
  position:relative; overflow:hidden;
}
.vtol-tape-label {
  font-size:6px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(74,158,255,.4); text-align:center; padding:2px 0;
}
.vtol-tape-value {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.7); border-top:1px solid rgba(74,158,255,.4);
  border-bottom:1px solid rgba(74,158,255,.4);
  font-family:'Orbitron',monospace; font-size:12px; font-weight:700;
  color:#b8d8ff; text-align:center; padding:3px 0; z-index:2;
}
.vtol-tape-ticks { position:absolute; inset:0; }
.vtol-adi-center {
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.vtol-adi-svg {
  width:100%; max-width:140px; aspect-ratio:1;
}
.vtol-data-col {
  display:flex; flex-direction:column; gap:2px; padding:0 2px;
  justify-content:center;
}
.vtol-data-cell {
  border:1px solid rgba(74,158,255,.06);
  padding:2px 4px; text-align:center;
}
.vtol-data-cell .cp-metric-label { font-size:6px; color:rgba(74,158,255,.35); }
.vtol-data-cell .cp-metric-value { font-size:11px; color:#b8d8ff; }
.vtol-cta-strip {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; gap:0; border-top:1px solid rgba(74,158,255,.08);
}
.vtol-cta-strip a {
  flex:1; text-align:center; padding:5px 0; font-size:8px; font-weight:700;
  letter-spacing:.08em; color:rgba(74,158,255,.7); text-decoration:none;
  border-right:1px solid rgba(74,158,255,.06); transition:background .15s;
}
.vtol-cta-strip a:last-child { border-right:none; }
.vtol-cta-strip a:hover { background:rgba(74,158,255,.06); color:#4a9eff; }

/* ── Boat Marine MFD (Garmin/Simrad style) ─────────────────── */
.boat-helm {
  flex:1; display:grid; grid-template-columns:130px 1fr 1fr; align-items:center;
  padding:28px 8px 28px; position:relative; height:100%;
  gap:4px;
}
.boat-compass-col {
  display:flex; align-items:center; justify-content:center;
}
.boat-compass-svg { width:120px; height:120px; }
.boat-data-panel {
  display:flex; flex-direction:column; gap:2px; padding:0 4px;
  justify-content:center;
}
.boat-data-cell {
  border:1px solid rgba(0,200,212,.06);
  padding:3px 6px; overflow:hidden;
}
.boat-data-cell .cp-metric-label { font-size:6px; color:rgba(0,200,212,.35); }
.boat-data-cell .cp-metric-value { font-size:13px; color:#c0f0f4; }
.boat-data-cell.big .cp-metric-value { font-size:20px; }
.boat-sonar-strip {
  height:30px; background:rgba(0,12,24,.4); border:1px solid rgba(0,200,212,.08);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.boat-sonar-strip::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:12px;
  background:linear-gradient(0deg, rgba(0,200,212,.1) 0%, transparent 100%);
  animation:wave-shift 3s ease-in-out infinite;
}
@keyframes wave-shift { 0%,100%{opacity:.5} 50%{opacity:1} }
.boat-sonar-label {
  position:absolute; top:2px; left:6px; font-size:5px; letter-spacing:2px;
  color:rgba(0,200,212,.3); text-transform:uppercase;
}
.boat-sonar-value {
  font-family:'Orbitron',monospace; font-size:14px; font-weight:700; color:#c0f0f4;
  position:relative; z-index:2;
}
.boat-cta-strip {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; gap:0; border-top:1px solid rgba(0,200,212,.08);
}
.boat-cta-strip a {
  flex:1; text-align:center; padding:5px 0; font-size:8px; font-weight:700;
  letter-spacing:.08em; color:rgba(0,200,212,.7); text-decoration:none;
  border-right:1px solid rgba(0,200,212,.06); transition:background .15s;
}
.boat-cta-strip a:last-child { border-right:none; }
.boat-cta-strip a:hover { background:rgba(0,200,212,.06); color:#00c8d4; }

/* Shared metric styles */
.cp-metric {
  display:flex; flex-direction:column; gap:1px;
}
.cp-metric-label {
  font-size:8px; font-weight:600; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--muted);
}
.cp-metric-value {
  font-family:var(--font-d); font-size:18px; font-weight:700;
  color:var(--text); line-height:1;
}
.cp-metric-value.large { font-size:28px; }
.cp-metric-unit { font-size:9px; color:var(--muted); margin-left:2px; }

/* CTA row */
.cp-cta-row {
  display:flex; gap:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06);
}
.cp-cta {
  flex:1; text-align:center; text-decoration:none;
  padding:7px 0; border-radius:5px; font-size:9px; font-weight:700;
  letter-spacing:.1em; cursor:pointer; border:1px solid currentColor;
  transition:background .15s;
}
.cp-cta:hover { background:rgba(255,255,255,.07); }
.cp-cta.green { color:#00e5a0; }
.cp-cta.blue  { color:#4a9eff; }
.cp-cta.cyan  { color:#00c8d4; }

/* Divider */
.cp-divider {
  width:1px; background:rgba(255,255,255,.06); margin:28px 0 0;
  flex-shrink:0;
}

/* Right stats column */
.cp-stats-col {
  width:160px; flex-shrink:0; display:flex; flex-direction:column;
  gap:6px; padding-top:36px;
}

/* ── Dashboard V2H energy-flow animation (was inline in dashboard drawer) ── */
.flow-anim { animation: flowDash 1s linear infinite; }
              .flow-anim-reverse { animation: flowDashRev 1s linear infinite; }
              @keyframes flowDash { to { stroke-dashoffset: -20; } }
              @keyframes flowDashRev { to { stroke-dashoffset: 20; } }