:root {
  color-scheme: dark;
  --bg:#07110f; --surface:#0d1916; --surface-2:#12211d; --surface-3:#172a25;
  --text:#f5fbf8; --muted:#93a8a2; --line:rgba(232,255,247,.10);
  --accent:#54e0b0; --accent-2:#34c896; --accent-soft:rgba(84,224,176,.14);
  --danger:#ff6b72; --warning:#f8c86b; --blue:#79a9ff;
  --shadow:0 16px 50px rgba(0,0,0,.32); --shadow-strong:0 24px 70px rgba(0,0,0,.46);
  --safe-top:max(12px, env(safe-area-inset-top)); --safe-bottom:max(10px, env(safe-area-inset-bottom));
  --radius:24px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hidden { display:none !important; }
.app-shell { position:relative; width:100%; height:100%; overflow:hidden; background:var(--bg); }
.map { position:absolute; inset:0; background:#d8dfdc; }
.map-vignette { pointer-events:none; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(7,17,15,.08), transparent 23%, transparent 72%, rgba(7,17,15,.13)); z-index:2; }
.elevation-2 { box-shadow:0 10px 30px rgba(0,0,0,.18); }
.elevation-3 { box-shadow:var(--shadow); }
.elevation-4 { box-shadow:var(--shadow-strong); }

.topbar { position:absolute; z-index:15; top:var(--safe-top); left:12px; right:12px; pointer-events:none; }
.search-card { min-height:68px; border-radius:22px; padding:8px; display:grid; grid-template-columns:48px 1fr 44px; align-items:center; background:rgba(10,23,19,.96); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(16px); pointer-events:auto; }
.round-icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--text); }
.round-icon.subtle { border-color:transparent; background:rgba(255,255,255,.055); }
.brand-icon { background:var(--accent); color:#062019; border:0; }
.brand-icon svg { width:27px; height:27px; stroke-width:1.7; }
.search-input-wrap { min-width:0; padding:0 8px; }
.search-input-wrap label { display:block; font-size:11px; font-weight:700; color:var(--accent); margin-bottom:2px; }
.search-input-wrap input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:16px; font-weight:680; padding:2px 0; }
.search-input-wrap input::placeholder { color:#b0bdb9; font-weight:500; }
.search-results { pointer-events:auto; max-height:min(55vh, 480px); overflow:auto; margin-top:8px; border-radius:20px; background:rgba(10,23,19,.98); border:1px solid var(--line); padding:7px; backdrop-filter:blur(18px); }
.search-result { width:100%; display:grid; grid-template-columns:42px 1fr; gap:9px; align-items:center; min-height:62px; text-align:left; padding:7px 9px; background:transparent; border:0; color:var(--text); border-radius:14px; }
.search-result:hover, .search-result:focus-visible { background:rgba(255,255,255,.06); }
.result-icon { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.result-icon svg { width:20px; height:20px; }
.search-result strong, .search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-result strong { font-size:14px; }
.search-result small { color:var(--muted); font-size:11px; margin-top:3px; }
.status-badges { pointer-events:none; display:flex; justify-content:center; align-items:center; gap:6px; margin:8px auto 0; }
.location-badge, .network-badge { width:max-content; min-height:31px; padding:5px 9px; border-radius:99px; border:1px solid var(--line); background:rgba(8,20,17,.92); backdrop-filter:blur(12px); font-size:9px; }
.location-badge { display:grid; grid-template-columns:8px auto; align-items:center; gap:7px; color:var(--text); }
.location-badge strong, .location-badge small { display:block; line-height:1.1; }
.location-badge strong { font-size:9px; }.location-badge small { color:var(--muted); font-size:7px; margin-top:2px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#f2c86c; box-shadow:0 0 0 4px rgba(242,200,108,.12); }
[data-state="strong"] .status-dot, [data-state="good"] .status-dot { background:var(--accent); box-shadow:0 0 0 4px rgba(84,224,176,.12); }
[data-state="weak"] .status-dot, [data-state="poor"] .status-dot, [data-state="stale"] .status-dot, [data-state="warning"] .status-dot { background:var(--warning); }
[data-state="error"] .status-dot { background:var(--danger); box-shadow:0 0 0 4px rgba(255,107,114,.12); }
[data-state="demo"] .status-dot { background:var(--blue); box-shadow:0 0 0 4px rgba(121,169,255,.12); }
.network-badge { display:grid; place-items:center; border-color:transparent; background:#f2c86c; color:#2b2414; font-size:9px; font-weight:850; }

.map-actions { position:absolute; z-index:10; right:12px; bottom:326px; display:grid; gap:9px; transition:bottom .25s ease; }
.map-fab { width:48px; height:48px; border:1px solid rgba(0,0,0,.06); border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.97); color:#17231f; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.map-fab svg { width:22px; height:22px; }
.map-fab.primary-fab { background:var(--accent); color:#072019; }
#northNeedle { font-weight:900; font-size:14px; }

.sheet { position:absolute; z-index:12; left:10px; right:10px; bottom:calc(78px + var(--safe-bottom)); border-radius:28px; background:rgba(9,21,18,.97); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); }
.sheet-handle { width:38px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); margin:8px auto 4px; }
.home-sheet { padding:6px 14px 13px; max-height:42vh; overflow:auto; }
.home-title-row { display:flex; align-items:center; justify-content:space-between; padding:8px 2px 10px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:10px; letter-spacing:.09em; font-weight:850; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.home-title-row h1 { margin:0; font-size:22px; letter-spacing:-.03em; }
.profile-chip { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:white; border:5px solid #ea4b51; color:#111; font-size:16px; font-weight:900; }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-place { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:9px; min-height:64px; text-align:left; padding:8px 10px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.045); color:var(--text); }
.quick-place-icon { width:39px; height:39px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.055); }
.quick-place-icon svg { width:20px; height:20px; }
.quick-place strong, .quick-place small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-place strong { font-size:13px; }
.quick-place small { color:var(--muted); margin-top:3px; font-size:10px; }
.section-head { display:flex; justify-content:space-between; align-items:center; padding:13px 2px 7px; }
.section-head h2 { margin:0; font-size:13px; }
.text-button { border:0; background:transparent; color:var(--accent); font-size:11px; font-weight:800; }
.recent-list { display:grid; gap:4px; }
.recent-item { min-height:48px; display:grid; grid-template-columns:34px 1fr 20px; gap:8px; align-items:center; width:100%; border:0; background:transparent; color:var(--text); text-align:left; border-radius:12px; padding:5px 4px; }
.recent-item:hover { background:rgba(255,255,255,.04); }
.recent-clock { width:32px; height:32px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.05); color:var(--muted); }
.recent-clock svg { width:17px; height:17px; }
.recent-item strong, .recent-item small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.recent-item strong { font-size:12px; }
.recent-item small { color:var(--muted); font-size:10px; margin-top:2px; }
.empty-copy { color:var(--muted); font-size:11px; padding:9px 4px 12px; }
.rules-summary { display:grid; grid-template-columns:10px 1fr 28px; gap:10px; align-items:center; margin-top:8px; padding:10px 8px 6px; border-top:1px solid var(--line); }
.rules-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(84,224,176,.09); }
.rules-summary strong, .rules-summary small { display:block; }
.rules-summary strong { font-size:11px; }
.rules-summary small { color:var(--muted); font-size:9px; margin-top:2px; line-height:1.35; }
.chevron-button { border:0; background:transparent; color:var(--muted); font-size:25px; }

.bottom-nav { position:absolute; z-index:14; left:10px; right:10px; bottom:var(--safe-bottom); height:66px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; border:1px solid rgba(255,255,255,.08); border-radius:23px; background:rgba(8,19,16,.98); backdrop-filter:blur(18px); padding:5px 6px; }
.nav-tab { border:0; background:transparent; color:#7d918b; height:54px; border-radius:16px; display:grid; place-items:center; align-content:center; gap:3px; }
.nav-tab svg { width:21px; height:21px; }
.nav-tab span { font-size:9px; font-weight:750; }
.nav-tab.active { color:var(--accent); background:rgba(84,224,176,.08); }

.route-sheet { padding:4px 14px 14px; bottom:var(--safe-bottom); max-height:62vh; overflow:auto; }
.route-destination-row { display:grid; grid-template-columns:44px 1fr 44px; gap:9px; align-items:center; padding:7px 0 10px; }
.route-destination-row > div { min-width:0; }
.route-destination-row small, .route-destination-row strong, .route-destination-row span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.route-destination-row small { color:var(--accent); font-size:10px; font-weight:800; }
.route-destination-row strong { font-size:16px; margin-top:2px; }
.route-destination-row span { color:var(--muted); font-size:10px; margin-top:2px; }
.route-status { display:flex; align-items:center; gap:8px; min-height:36px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.045); color:var(--muted); font-size:10px; }
.spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex:0 0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.route-choices { display:grid; gap:8px; margin-top:9px; }
.route-choice { width:100%; display:grid; grid-template-columns:1fr auto; gap:8px 12px; text-align:left; padding:12px 13px; border-radius:17px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text); }
.route-choice.active { border-color:rgba(84,224,176,.58); background:rgba(84,224,176,.075); box-shadow:inset 0 0 0 1px rgba(84,224,176,.08); }
.route-choice h3 { margin:0; font-size:14px; }
.route-choice .route-time { color:var(--accent); font-size:15px; font-weight:900; }
.route-choice .route-meta { grid-column:1/-1; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.route-meta .dot { width:3px; height:3px; border-radius:50%; background:currentColor; }
.route-choice p { grid-column:1/-1; margin:0; color:#b9c8c3; font-size:10px; line-height:1.35; }
.route-highlights { display:flex; gap:7px; overflow:auto; padding:9px 0 1px; }
.highlight-pill { white-space:nowrap; padding:7px 9px; border-radius:99px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:#c8d8d3; font-size:9px; }
.route-action-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; margin-top:10px; }
.primary-button, .secondary-button { min-height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:7px; font-weight:850; border:1px solid transparent; }
.primary-button svg, .secondary-button svg { width:19px; height:19px; }
.primary-button { background:var(--accent); color:#062019; }
.primary-button:disabled { opacity:.42; cursor:not-allowed; }
.secondary-button { background:rgba(255,255,255,.055); color:var(--text); border-color:var(--line); }
.full-width { width:100%; }
.micro-disclaimer { margin:8px 2px 0; color:var(--muted); font-size:8.5px; line-height:1.45; }

.navigation-mode { position:absolute; inset:0; z-index:30; pointer-events:none; background:linear-gradient(to bottom, rgba(3,10,8,.56), transparent 32%, transparent 67%, rgba(3,10,8,.58)); }
.nav-guidance { pointer-events:auto; position:absolute; top:var(--safe-top); left:10px; right:10px; min-height:112px; display:grid; grid-template-columns:72px 1fr 44px; gap:12px; align-items:center; padding:12px; border-radius:25px; background:rgba(8,20,17,.985); border:1px solid rgba(255,255,255,.08); }
.nav-guidance[data-guidance="rule"] { border-color:rgba(88,166,255,.42); box-shadow:0 14px 38px rgba(21,82,142,.22); }
.nav-guidance[data-guidance="rule"] .maneuver-icon { background:#58a6ff; }
.maneuver-icon { width:70px; height:82px; border-radius:20px; display:grid; place-items:center; background:var(--accent); color:#062019; font-size:43px; font-weight:900; }
.maneuver-copy { min-width:0; }
.maneuver-copy strong { color:var(--accent); font-size:12px; }
.maneuver-copy h2 { margin:3px 0 2px; font-size:19px; line-height:1.1; letter-spacing:-.02em; }
.maneuver-copy p { margin:0; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-voice { background:rgba(255,255,255,.05); }
.segment-banner { pointer-events:auto; position:absolute; top:calc(var(--safe-top) + 122px); left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); display:grid; grid-template-columns:8px auto; column-gap:7px; padding:8px 12px; border-radius:14px; background:rgba(8,20,17,.92); border:1px solid var(--line); backdrop-filter:blur(12px); }
.segment-banner > span { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:3px; }
.segment-banner strong { font-size:10px; }
.segment-banner small { grid-column:2; color:var(--muted); font-size:8px; margin-top:1px; }
.nav-dashboard { pointer-events:auto; position:absolute; left:10px; right:10px; bottom:var(--safe-bottom); padding:12px; border-radius:26px; background:rgba(8,20,17,.985); border:1px solid rgba(255,255,255,.08); }
.nav-gps-status { min-height:26px; display:grid; grid-template-columns:8px auto 1fr; align-items:center; gap:7px; margin:-2px 0 8px; padding:0 2px 8px; border-bottom:1px solid var(--line); }
.nav-gps-status strong { font-size:9px; }.nav-gps-status small { justify-self:end; color:var(--muted); font-size:8px; }
.speed-cluster { display:flex; align-items:center; gap:12px; float:left; }
.speed-cluster > div:first-child { display:flex; align-items:baseline; gap:3px; min-width:70px; }
.speed-cluster #speedNow { font-size:35px; font-weight:900; letter-spacing:-.06em; }
.speed-cluster small { color:var(--muted); font-size:9px; }
.speed-sign { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:white; border:5px solid #e64b50; color:#111; font-size:18px; font-weight:900; }
.trip-cluster { float:right; text-align:right; padding-top:4px; }
.trip-cluster strong { display:block; font-size:22px; letter-spacing:-.03em; }
.trip-cluster small { color:var(--muted); font-size:10px; }
.nav-report-button { clear:both; width:100%; min-height:48px; margin-top:12px; border:1px solid rgba(255,107,114,.34); border-radius:15px; display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,107,114,.11); color:#ffc5c8; }
.nav-report-button span { font-size:18px; }.nav-report-button strong { font-size:11px; }
.nav-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-top:7px; }
.nav-button { min-height:54px; display:grid; place-items:center; align-content:center; gap:2px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--text); }
.nav-button svg { width:19px; height:19px; }
.nav-button span { font-size:8px; font-weight:750; }
.nav-button.active { color:var(--accent); border-color:rgba(84,224,176,.25); background:var(--accent-soft); }
.nav-button.danger { color:#ffadb1; background:rgba(255,107,114,.07); }

.full-panel { position:absolute; inset:0; z-index:50; overflow:auto; background:var(--bg); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.panel-header { position:sticky; z-index:2; top:0; min-height:82px; display:grid; grid-template-columns:48px 1fr; align-items:center; gap:8px; padding:var(--safe-top) 14px 10px; background:rgba(7,17,15,.94); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.panel-header h2 { margin:0; font-size:20px; letter-spacing:-.025em; }
.panel-content { max-width:720px; margin:0 auto; padding:14px; }
.settings-card { background:var(--surface-2); border:1px solid var(--line); border-radius:21px; padding:14px; margin-bottom:11px; }
.settings-card h3 { margin:0 0 8px; font-size:13px; }
.profile-row, .setting-action, .select-row, .switch-row { width:100%; min-height:62px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; text-align:left; border:0; border-top:1px solid var(--line); color:var(--text); background:transparent; padding:10px 1px; }
.settings-card > :nth-child(2) { border-top:0; }
.profile-row strong, .profile-row small, .setting-action strong, .setting-action small, .switch-row strong, .switch-row small, .select-row strong, .select-row small { display:block; }
.profile-row strong, .setting-action strong, .switch-row strong, .select-row strong { font-size:12px; }
.profile-row small, .setting-action small, .switch-row small, .select-row small { color:var(--muted); font-size:9px; margin-top:3px; line-height:1.35; }
.profile-row.disabled { opacity:.42; }
.plate { width:44px; height:25px; border-radius:5px; display:grid; place-items:center; color:#111; font-weight:900; font-size:10px; border:2px solid rgba(0,0,0,.35); }
.plate.yellow { background:#f4d31f; }.plate.blue { background:#57a5ef; }
.checkmark { color:var(--accent); font-weight:900; }
.switch-row { grid-template-columns:1fr auto; }
.switch-row input { appearance:none; width:43px; height:26px; border-radius:99px; background:#3b4a46; position:relative; outline:0; transition:.2s; }
.switch-row input::after { content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:white; left:3px; top:3px; transition:.2s; }
.switch-row input:checked { background:var(--accent-2); }.switch-row input:checked::after { transform:translateX(17px); }
.select-row { grid-template-columns:1fr auto; }
.select-row select { border:1px solid var(--line); border-radius:11px; background:var(--surface-3); color:var(--text); padding:8px 28px 8px 9px; }
.settings-note { margin:7px 1px 1px; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:8.5px; line-height:1.45; }
.setting-action { grid-template-columns:1fr auto; }
.warning-card { border-color:rgba(248,200,107,.24); background:rgba(248,200,107,.07); }
.warning-card strong { color:#f9d88f; font-size:12px; }.warning-card p { color:#cdbf9f; margin:5px 0 0; font-size:10px; line-height:1.5; }
.version-label { text-align:center; color:#667a74; font-size:9px; margin:20px 0; }
.card-list { display:grid; gap:8px; }
.saved-card, .report-card { width:100%; text-align:left; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); color:var(--text); }
.saved-card strong, .saved-card small, .report-card strong, .report-card small { display:block; }
.saved-card small, .report-card small { color:var(--muted); font-size:9px; margin-top:3px; }

.confidence-card { display:grid; grid-template-columns:86px 1fr; gap:14px; align-items:center; padding:14px; border-radius:22px; background:linear-gradient(145deg, rgba(84,224,176,.12), rgba(84,224,176,.025)); border:1px solid rgba(84,224,176,.18); margin-bottom:10px; }
.confidence-card h3 { margin:0 0 4px; font-size:15px; }.confidence-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.confidence-gauge { width:80px; height:80px; border-radius:50%; display:grid; place-items:center; align-content:center; border:7px solid rgba(84,224,176,.42); background:rgba(84,224,176,.05); }
.confidence-gauge span { font-size:19px; font-weight:900; }.confidence-gauge small { font-size:8px; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px; }
.stat-card { padding:11px 9px; border-radius:15px; border:1px solid var(--line); background:var(--surface-2); }
.stat-card strong { display:block; font-size:14px; }.stat-card small { color:var(--muted); font-size:8px; }
.control-items { display:grid; gap:7px; margin-bottom:10px; }
.control-item { display:grid; grid-template-columns:34px 1fr; gap:9px; align-items:start; padding:11px; border-radius:15px; border:1px solid var(--line); background:var(--surface-2); }
.control-item-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:900; }
.control-item strong, .control-item small { display:block; }.control-item strong { font-size:11px; }.control-item small { color:var(--muted); font-size:9px; line-height:1.4; margin-top:3px; }
.guidance-preview { display:grid; gap:7px; }
.guidance-preview-item { display:grid; grid-template-columns:38px 1fr; gap:9px; align-items:center; padding:9px; border-radius:14px; background:rgba(88,166,255,.07); border:1px solid rgba(88,166,255,.16); }
.guidance-preview-item > span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:rgba(88,166,255,.14); font-size:19px; }
.guidance-preview-item strong, .guidance-preview-item small { display:block; }
.guidance-preview-item strong { font-size:10px; }.guidance-preview-item small { margin-top:2px; color:var(--muted); font-size:8.5px; line-height:1.35; }
.rule-line { display:grid; grid-template-columns:36px 1fr; gap:9px; align-items:center; padding:10px 1px; border-top:1px solid var(--line); }
.rule-line:first-of-type { border-top:0; }
.rule-line > span { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:900; }
.rule-line.allowed > span { color:var(--accent); background:var(--accent-soft); }.rule-line.forbidden > span { color:#ff9da2; background:rgba(255,107,114,.09); }.rule-line.neutral > span { color:#12201c; background:#fff; border:4px solid #e94e53; border-radius:50%; font-size:10px; }
.rule-line strong, .rule-line small { display:block; }.rule-line strong { font-size:11px; }.rule-line small { color:var(--muted); font-size:9px; margin-top:3px; line-height:1.4; }

.report-types { display:grid; grid-template-columns:1fr; gap:7px; margin:8px 0 13px; }
.report-types button { min-height:50px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); color:var(--text); font-size:10px; padding:8px 11px; text-align:left; display:flex; align-items:center; gap:9px; }
.report-types button::before { content:""; width:16px; height:16px; flex:0 0 16px; border-radius:50%; border:2px solid #647973; box-shadow:inset 0 0 0 3px var(--surface-2); }
.report-types button.selected { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.report-types button.selected::before { background:var(--accent); border-color:var(--accent); }
.field-label { display:block; color:var(--muted); font-size:10px; font-weight:750; margin:9px 2px 6px; }
.text-area, .panel-input { width:100%; border:1px solid var(--line); border-radius:14px; background:#0a1815; color:var(--text); padding:12px; outline:none; resize:vertical; }
.panel-input { min-height:50px; }
.location-box { margin:9px 0; padding:10px; border-radius:13px; background:rgba(255,255,255,.035); color:var(--muted); font-size:9px; line-height:1.4; }
.panel-results { margin-top:8px; }
.body-copy { color:var(--muted); font-size:10px; line-height:1.55; margin:0; }
.hero-rule { display:grid; grid-template-columns:70px 1fr; gap:14px; align-items:center; padding:15px; border-radius:22px; background:linear-gradient(145deg, rgba(84,224,176,.13), rgba(84,224,176,.02)); border:1px solid rgba(84,224,176,.18); margin-bottom:10px; }
.big-plate { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:white; border:7px solid #e94e53; color:#111; font-size:20px; font-weight:900; }
.hero-rule h3 { margin:0 0 5px; font-size:14px; }.hero-rule p { margin:0; color:var(--muted); font-size:9px; line-height:1.45; }

.onboarding { position:absolute; inset:0; z-index:80; display:grid; place-items:end center; padding:12px; background:radial-gradient(circle at 50% 10%, rgba(84,224,176,.18), transparent 34%), rgba(4,11,9,.94); }
.onboarding-card { width:min(100%, 540px); border-radius:30px; border:1px solid var(--line); background:#0b1916; padding:22px 18px 18px; margin-bottom:var(--safe-bottom); }
.onboarding-brand { display:flex; align-items:center; gap:9px; color:var(--accent); font-size:12px; font-weight:850; }
.logo-mark { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; background:var(--accent); color:#062019; }.logo-mark svg { width:27px; height:27px; }
.onboarding h1 { font-size:30px; line-height:1.02; letter-spacing:-.05em; margin:17px 0 8px; }.onboarding .lead { color:var(--muted); font-size:13px; line-height:1.5; }
.onboarding-list { margin:13px 0; }.onboarding-list > div { display:grid; grid-template-columns:34px 1fr; gap:10px; padding:9px 0; }.onboarding-list > div > span { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-size:9px; font-weight:900; }
.onboarding-list strong, .onboarding-list small { display:block; }.onboarding-list strong { font-size:12px; }.onboarding-list small { color:var(--muted); font-size:9px; margin-top:3px; line-height:1.4; }
.onboarding-warning { padding:10px; margin:10px 0 13px; border-radius:13px; background:rgba(248,200,107,.08); color:#ddcead; font-size:9px; line-height:1.45; }
.toast { position:absolute; z-index:100; left:50%; transform:translateX(-50%); bottom:calc(86px + var(--safe-bottom)); max-width:calc(100% - 28px); padding:10px 13px; border-radius:13px; background:#f4fbf8; color:#10211c; font-size:10px; font-weight:800; box-shadow:var(--shadow); }

.user-marker { position:relative; width:28px; height:28px; }
.user-marker-dot { position:absolute; z-index:2; inset:2px; border-radius:50%; background:#4285f4; border:4px solid #fff; box-shadow:0 0 0 8px rgba(66,133,244,.18), 0 4px 12px rgba(0,0,0,.3); }
.user-marker-heading { position:absolute; z-index:1; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:20px solid #4285f4; transform-origin:8px 34px; left:6px; top:-19px; opacity:.95; filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.dest-marker { width:30px; height:30px; border-radius:50% 50% 50% 7px; transform:rotate(45deg); background:var(--accent); border:3px solid #062019; box-shadow:0 5px 14px rgba(0,0,0,.3); }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index:3; }.maplibregl-ctrl-attrib { font-size:8px !important; opacity:.78; }

html[data-theme="light"] { color-scheme:light; --bg:#edf3f0; --surface:#fff; --surface-2:#fff; --surface-3:#eef5f2; --text:#10201c; --muted:#63756f; --line:rgba(10,32,27,.10); --shadow:0 18px 48px rgba(26,57,49,.16); }
html[data-theme="light"] .search-card, html[data-theme="light"] .sheet, html[data-theme="light"] .bottom-nav, html[data-theme="light"] .nav-guidance, html[data-theme="light"] .nav-dashboard, html[data-theme="light"] .segment-banner, html[data-theme="light"] .location-badge { background:rgba(255,255,255,.96); }
html[data-theme="light"] .navigation-mode { background:linear-gradient(to bottom, rgba(237,243,240,.36), transparent 30%, transparent 68%, rgba(237,243,240,.42)); }
html[data-theme="light"] .nav-report-button { color:#a62f36; }
html[data-theme="light"] .route-choice p, html[data-theme="light"] .highlight-pill { color:var(--muted); }
html[data-theme="light"] .full-panel { background:var(--bg); }
html[data-theme="light"] .panel-header { background:rgba(237,243,240,.95); }
html[data-theme="light"] .panel-input, html[data-theme="light"] .text-area { background:#fff; }

@media (min-width:760px) {
  .topbar, .sheet, .bottom-nav { width:430px; right:auto; left:18px; }
  .topbar { top:18px; }.bottom-nav { bottom:18px; }.sheet { bottom:96px; }
  .map-actions { right:18px; bottom:18px; }
  .nav-guidance { width:560px; right:auto; left:18px; top:18px; }
  .segment-banner { left:298px; transform:none; top:142px; }
  .nav-dashboard { width:560px; left:50%; right:auto; transform:translateX(-50%); bottom:18px; }
}
@media (max-height:700px) {
  .home-sheet { max-height:37vh; }.home-title-row { padding-top:3px; }.quick-place { min-height:56px; }.rules-summary { display:none; }
  .route-sheet { max-height:69vh; }
  .nav-guidance { min-height:98px; grid-template-columns:62px 1fr 42px; padding:9px; }
  .maneuver-icon { width:60px; height:72px; font-size:36px; }
  .segment-banner { top:calc(var(--safe-top) + 106px); }
  .nav-dashboard { padding:9px; border-radius:22px; }
  .nav-report-button { min-height:42px; margin-top:8px; }
  .nav-button { min-height:47px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}