:root{--bg-dark: #070a12;--bg-card: #0f172a;--bg-surface: #1e293b;--border-color: #334155;--text-main: #f8fafc;--text-sub: #94a3b8;--accent-cyan: #38bdf8;--accent-amber: #f59e0b;--accent-emerald: #10b981;--accent-red: #ef4444;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);-webkit-user-select:none;user-select:none}.mobile-cockpit-body{display:flex;flex-direction:column;height:100vh;height:100dvh}.hud-banner{background:#0f172af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:2px solid var(--border-color);padding:10px 14px;display:flex;align-items:center;gap:12px;z-index:100}.turn-icon-box{width:48px;height:48px;background:#1e293b;border:2px solid var(--accent-cyan);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--accent-cyan);flex-shrink:0}.turn-info{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.turn-distance{font-family:var(--font-mono);font-size:1.35rem;font-weight:900;color:var(--accent-cyan);line-height:1.1}.turn-instruction{font-size:.85rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-meta-group{display:flex;flex-direction:column;gap:4px;align-items:flex-end}.hud-chip{font-family:var(--font-mono);font-size:.65rem;font-weight:800;padding:4px 8px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-surface);display:inline-flex;align-items:center;gap:5px;cursor:pointer}.chip-auth{color:var(--accent-cyan);border-color:#38bdf866;background:#38bdf81a}.chip-voice{color:var(--accent-amber);border-color:#f59e0b66;background:#f59e0b1a}.chip-wakelock{color:var(--accent-emerald);border-color:#10b98166}.wakelock-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-emerald);box-shadow:0 0 6px var(--accent-emerald)}.map-viewport{flex-grow:1;position:relative;width:100%}.mobile-map-container{width:100%;height:100%}.vehicle-arrow-marker{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}.arrow-inner{width:36px;height:36px;background:var(--bg-dark);border:3px solid var(--accent-cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--accent-cyan);box-shadow:0 0 16px #38bdf8cc,inset 0 0 8px #38bdf866;transition:transform .2s ease-out;z-index:2}.arrow-pulse{position:absolute;width:44px;height:44px;border-radius:50%;background:#38bdf84d;animation:pulseAura 2s infinite ease-out;z-index:1}@keyframes pulseAura{0%{transform:scale(.8);opacity:.8}to{transform:scale(1.6);opacity:0}}.speedometer-box{position:absolute;top:14px;left:14px;background:#0f172ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--border-color);border-radius:16px;padding:8px 16px;text-align:center;min-width:90px;box-shadow:0 8px 24px #00000080;z-index:10}.speed-value{font-family:var(--font-mono);font-size:2.2rem;font-weight:900;color:var(--text-main);line-height:1}.speed-unit{font-family:var(--font-mono);font-size:.65rem;font-weight:800;color:var(--text-sub);letter-spacing:.1em}.speed-warning-badge{font-family:var(--font-mono);font-size:.6rem;font-weight:900;background:var(--accent-red);color:#fff;padding:2px 4px;border-radius:4px;margin-top:4px}.map-floating-controls{position:absolute;right:14px;bottom:20px;display:flex;flex-direction:column;gap:12px;z-index:10}.floating-btn{width:48px;height:48px;border-radius:50%;background:#0f172ae6;border:2px solid var(--border-color);color:var(--text-main);font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #0006;cursor:pointer}.btn-debug{border-color:#f59e0b99;background:#f59e0b26}.btn-debug.active{border-color:var(--accent-amber);background:var(--accent-amber);color:#000;box-shadow:0 0 18px var(--accent-amber)}.floating-btn:active{transform:scale(.95)}.compass-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#070a12f2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:20px}.compass-ring-container{position:relative;width:260px;height:260px;border-radius:50%;border:4px solid var(--border-color);box-shadow:0 0 30px #38bdf826;display:flex;align-items:center;justify-content:center}.compass-dial{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;border:1px dashed var(--border-color);transition:transform .2s ease-out}.cardinal{position:absolute;font-family:var(--font-mono);font-size:1.1rem;font-weight:900;color:var(--accent-cyan)}.cardinal-n{top:6px;left:50%;transform:translate(-50%);color:var(--accent-red)}.cardinal-e{right:8px;top:50%;transform:translateY(-50%)}.cardinal-s{bottom:6px;left:50%;transform:translate(-50%)}.cardinal-w{left:8px;top:50%;transform:translateY(-50%)}.target-bearing-pointer{font-size:2rem;color:var(--accent-amber);text-shadow:0 0 10px var(--accent-amber)}.compass-readout{position:absolute;bottom:-70px;text-align:center}.heading-deg{font-family:var(--font-mono);font-size:1.8rem;font-weight:900;color:var(--text-main)}.target-wp-name{font-family:var(--font-mono);font-size:.75rem;color:var(--accent-amber)}.cockpit-dock{background:#0f172afa;border-top:2px solid var(--border-color);padding:12px 14px 16px;display:flex;flex-direction:column;gap:12px;z-index:100}.dock-metrics-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}.metric-cell{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:6px 10px}.metric-label{font-family:var(--font-mono);font-size:.58rem;font-weight:800;color:var(--text-sub)}.metric-val{font-family:var(--font-mono);font-size:.95rem;font-weight:900;color:var(--text-main)}.trip-title-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-actions-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}.dock-btn{height:46px;border-radius:10px;font-family:var(--font-mono);font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:1px solid var(--border-color)}.btn-primary{background:var(--accent-cyan);color:#000;border:none}.btn-secondary{background:var(--bg-surface);color:var(--text-main)}.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-main);padding:8px 16px;border-radius:8px}.btn-sm{font-size:.75rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px}.modal-card{width:100%;max-width:480px;max-height:85vh;background:var(--bg-card);border:2px solid var(--border-color);border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.modal-header{padding:14px 16px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:flex-start}.modal-title{font-family:var(--font-mono);font-size:1rem;font-weight:900;color:var(--accent-cyan)}.modal-subtitle{font-size:.75rem;color:var(--text-sub)}.btn-icon{background:transparent;border:none;color:var(--text-sub);font-size:1.5rem;cursor:pointer}.modal-body{padding:14px;overflow-y:auto}.mobile-trips-list{display:flex;flex-direction:column;gap:10px}.trip-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}.trip-card-head{display:flex;justify-content:space-between;align-items:center}.trip-title{font-weight:800;font-size:.95rem}.badge{font-family:var(--font-mono);font-size:.6rem;font-weight:800;background:var(--accent-cyan);color:#000;padding:2px 6px;border-radius:4px}.trip-card-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--text-sub)}.loading-spinner{font-family:var(--font-mono);font-size:.8rem;color:var(--accent-amber);text-align:center;padding:20px}.toast-container{position:fixed;top:70px;left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px}.toast{background:#0f172af2;border:1px solid var(--accent-cyan);color:var(--text-main);padding:8px 16px;border-radius:8px;font-family:var(--font-mono);font-size:.75rem;font-weight:800;box-shadow:0 4px 12px #00000080;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}