:root { color-scheme: dark; font-family: Arial, "Rubik", sans-serif; --green:#22c55e; --panel:#182231; --muted:#9ca3af; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at top,#243248,#0b1018 62%); color:#f8fafc; }
button,input { font:inherit; }
main { width:min(100%,720px); min-height:100vh; margin:auto; padding:max(22px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom)); }
.panel { padding-top:8vh; }
.brand { display:inline-block; color:#04120a; background:var(--green); font-weight:900; padding:7px 11px; border-radius:9px; letter-spacing:.08em; }
h1 { font-size:clamp(2.3rem,9vw,4.7rem); margin:24px 0 4px; letter-spacing:-.05em; }
.muted,.status { color:var(--muted); }
form { margin-top:42px; }
label { display:block; margin-bottom:9px; font-weight:700; }
.origin-choice { border:0; padding:0; margin:0 0 22px; }
.origin-choice legend { font-weight:800; margin-bottom:10px; }
.origin-choice label { display:inline-flex; align-items:center; gap:7px; margin:0 0 8px 18px; color:var(--muted); }
.origin-choice input { min-width:auto; flex:none; accent-color:var(--green); }
#origin-address-wrap { margin-bottom:20px; }
#origin-address-wrap input { width:100%; }
.search-row { display:flex; gap:8px; }
input { min-width:0; flex:1; background:#f8fafc; color:#111827; border:0; border-radius:14px; padding:16px; outline:3px solid transparent; }
input:focus { outline-color:#4ade80; }
.route-option { display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 16px; border:1px solid #334155; border-radius:14px; background:#141e2c; cursor:pointer; }
.route-option input { flex:none; width:22px; height:22px; min-width:22px; padding:0; accent-color:var(--green); }
.route-option span { display:flex; flex-direction:column; gap:3px; }
.route-option strong { color:#f8fafc; }
.route-option small { color:var(--muted); font-weight:400; }
button { border:0; border-radius:14px; padding:13px 18px; cursor:pointer; font-weight:800; }
.search-row button,.results button { background:var(--green); color:#052e16; }
.results { display:grid; gap:8px; margin-top:16px; }
.results button { text-align:right; background:var(--panel); color:white; padding:16px; }
.results button:hover { background:#26364d; }
.results-group { display:grid; gap:8px; }
.results button.selected { outline:3px solid var(--green); background:#26364d; }
.hidden { display:none !important; }
.nav-screen { min-height:calc(100vh - 44px); display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:14px; }
header div { display:flex; flex-direction:column; gap:4px; overflow:hidden; }
header strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eyebrow { color:var(--muted); font-size:.75rem; }
.stop { width:44px; height:44px; padding:0; border-radius:50%; background:#ef4444; color:#fff; font-size:1.8rem; }
.instruction-card { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; gap:18px; background:#f8fafc; color:#111827; border-radius:26px; padding:24px; margin-top:40px; min-height:190px; box-shadow:0 20px 50px #0008; }
.direction { width:92px; font-size:5rem; line-height:1; text-align:center; color:#16a34a; font-weight:900; }
.turn-distance { color:#16a34a; font-size:1.15rem; font-weight:900; }
.instruction-card h2 { font-size:clamp(1.5rem,6vw,2.5rem); line-height:1.12; margin:8px 0; }
.progress { height:7px; border-radius:9px; overflow:hidden; background:#334155; margin-top:28px; }
#progress-bar { height:100%; width:0; background:var(--green); transition:width .5s; }
.map-panel { margin-top:18px; background:var(--panel); border-radius:18px; overflow:hidden; }
.map-title { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; }
.map-title button { padding:7px 11px; background:#334155; color:white; font-size:.8rem; }
.map-controls { display:flex; gap:7px; }
#recenter-map.following { background:var(--green); color:#052e16; }
#route-map { height:min(52vh,480px); min-height:340px; background:#dce7ef; }
.map-loading { position:absolute; z-index:900; left:50%; top:12px; transform:translateX(-50%); padding:7px 12px; border-radius:20px; background:#ffffffea; color:#334155; font-size:.78rem; font-weight:800; box-shadow:0 2px 8px #0004; pointer-events:none; white-space:nowrap; }
.map-loading.hidden { display:none; }
.map-panel.collapsed #route-map,.map-panel.collapsed .map-legend { display:none; }
.map-legend { display:flex; flex-wrap:wrap; gap:12px; padding:10px 13px; font-size:.75rem; color:#d1d5db; }
.map-legend span { display:flex; align-items:center; gap:5px; }
.map-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.legend-turn { background:#ef4444; }.legend-straight { background:#22c55e; }.legend-roundabout { background:#f59e0b; }.legend-destination { background:#7357ff; }
.maneuver-marker { display:flex; align-items:center; justify-content:center; width:25px!important; height:25px!important; border:2px solid white; border-radius:50%; color:white; font-weight:900; box-shadow:0 2px 7px #0008; }
.maneuver-turn { background:#ef4444; }.maneuver-straight { background:#22c55e; }.maneuver-roundabout { background:#f59e0b; }.maneuver-destination { background:#8b5cf6; }
.driver-marker-shell { background:transparent!important; border:0!important; }
.driver-navigation-arrow { display:block; width:52px; height:64px; overflow:visible; transform-origin:50% 64%; transition:transform .18s ease; }
.driver-arrow-outline { fill:#fff; stroke:#fff; stroke-width:5; stroke-linejoin:round; }
.driver-arrow-fill { fill:#1677ff; stroke:#075dd1; stroke-width:1.5; stroke-linejoin:round; }
.driver-arrow-glint { fill:#65adff; opacity:.72; }
.destination-pin-shell { background:transparent!important; border:0!important; }
.destination-pin { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50% 50% 50% 8px; transform:rotate(-45deg); background:#7357ff; border:4px solid #fff; box-shadow:0 4px 12px #0007; }
.destination-pin span { transform:rotate(45deg); color:#fff; font-size:20px; font-weight:900; }
.trip-info { display:grid; grid-template-columns:repeat(3,1fr); margin-top:auto; padding:30px 0; }
.trip-info div { display:flex; flex-direction:column; align-items:center; border-left:1px solid #334155; }
.trip-info div:last-child { border-left:0; }
.trip-info strong { font-size:1.55rem; }
.trip-info span { color:var(--muted); font-size:.8rem; margin-top:5px; }
.gps-state { text-align:center; color:var(--muted); min-height:22px; }
.nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.repeat,.next-instruction { background:#26364d; color:white; width:100%; }
.next-instruction { background:var(--green); color:#052e16; }
.next-instruction:disabled { opacity:.45; cursor:not-allowed; }
.wrong-turn { background:#f59e0b; color:#3b2000; }
.alternatives { background:#38bdf8; color:#082f49; }
.alternatives:disabled { opacity:.45; cursor:not-allowed; }
.wrong-turn:disabled { opacity:.45; cursor:not-allowed; }
.mistake-panel { margin-top:12px; padding:16px; border-radius:18px; background:var(--panel); border:2px solid #f59e0b; }
.mistake-panel h3 { margin:0 0 6px; }
.mistake-where { margin:0 0 12px; color:var(--muted); min-height:1.2em; }
.mistake-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; }
.mistake-choices button { background:#26364d; color:white; }
.mistake-choices button:disabled,.mistake-footer button:disabled { opacity:.45; cursor:wait; }
.mistake-footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.mistake-reroute { background:var(--green); color:#052e16; }
.mistake-cancel { background:#334155; color:white; grid-column:-2; }
#routes-panel { border-color:#38bdf8; }
.routes-reverse { background:#e0f2fe; color:#075985; }
.routes-current { margin:0 0 12px; padding:12px 14px; border-radius:14px; background:#0c4a6e; color:#e0f2fe; font-weight:700; }
.routes-current strong { display:block; color:#7dd3fc; margin-bottom:3px; }
.routes-list { display:grid; gap:8px; }
.routes-list button { text-align:right; background:#26364d; color:white; font-weight:700; }
.routes-list button strong { display:block; color:#7dd3fc; margin-bottom:3px; }
.routes-list button:disabled { opacity:.45; cursor:wait; }
.mistake-marker { width:18px; height:18px; border-radius:50%; background:#f59e0b; border:3px solid #fff; box-shadow:0 2px 8px #0008; }
@media (max-width:420px) { .instruction-card { grid-template-columns:75px 1fr; padding:18px; }.direction{width:68px;font-size:3.8rem}.search-row{flex-direction:column}.search-row button{width:100%} }