@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}:root{--transition-smooth:all .4s cubic-bezier(.16, 1, .3, 1);--transition-fluid:all .5s cubic-bezier(.19, 1, .22, 1);--transition-fast:all .2s cubic-bezier(.16, 1, .3, 1);--border-radius-xl:32px;--border-radius-lg:24px;--border-radius-md:16px;--border-radius-sm:12px;--shadow-premium:0 16px 40px #0000000a, 0 4px 12px #00000005;--shadow-active:0 20px 48px #00000014, 0 8px 16px #0000000a;--shadow-glow:0 0 20px #8b5cf640;--bg-gradient:linear-gradient(135deg, #f5f2fe 0%, #e9e2f9 100%);--accent-color:#8b5cf6;--accent-gradient:linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);--accent-hover:#7c3aed;--accent-pastel:#eedefa;--glass-bg:#ffffff73;--glass-border:#fff9;--glass-input-bg:#ffffff59;--text-main:#2e2545;--text-muted:#6e6485;--text-on-accent:#fff;--speed-color:#ef4444;--map-overlay-opacity:.15}body.theme-mint{--bg-gradient:linear-gradient(135deg, #f0fdf4 0%, #dbf8e8 100%);--accent-color:#10b981;--accent-gradient:linear-gradient(135deg, #10b981 0%, #06b6d4 100%);--accent-hover:#059669;--accent-pastel:#d1fae5;--text-main:#113527;--text-muted:#4e6d60;--shadow-glow:0 0 20px #10b98140}body.theme-peach{--bg-gradient:linear-gradient(135deg, #fffaf7 0%, #ffece4 100%);--accent-color:#f97316;--accent-gradient:linear-gradient(135deg, #f97316 0%, #ec4899 100%);--accent-hover:#ea580c;--accent-pastel:#ffedd5;--text-main:#3f1e10;--text-muted:#7c5847;--shadow-glow:0 0 20px #f9731640}body.theme-sky{--bg-gradient:linear-gradient(135deg, #f0f9ff 0%, #daf0ff 100%);--accent-color:#3b82f6;--accent-gradient:linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);--accent-hover:#2563eb;--accent-pastel:#dbeafe;--text-main:#0e2a47;--text-muted:#4b6685;--shadow-glow:0 0 20px #3b82f640}body.night-mode{--glass-bg:#14121ea6;--glass-border:#ffffff14;--glass-input-bg:#00000040;--text-main:#f1edfa;--text-muted:#a39bb8;--map-overlay-opacity:.5}body.night-mode.theme-lavender{--bg-gradient:linear-gradient(135deg, #13101c 0%, #0a0812 100%)}body.night-mode.theme-mint{--bg-gradient:linear-gradient(135deg, #091a13 0%, #030b08 100%);--glass-bg:#0c1612a6;--text-main:#e6f9f0;--text-muted:#8ab6a3}body.night-mode.theme-peach{--bg-gradient:linear-gradient(135deg, #1c0e08 0%, #0a0402 100%);--glass-bg:#19100ca6;--text-main:#ffebe3;--text-muted:#cfa898}body.night-mode.theme-sky{--bg-gradient:linear-gradient(135deg, #091524 0%, #030811 100%);--glass-bg:#0c141ea6;--text-main:#e0f0ff;--text-muted:#8ca2bf}body{background:var(--bg-gradient);min-height:100vh;transition:var(--transition-smooth);justify-content:center;align-items:center;display:flex;overflow:hidden}.device-frame{width:100%;max-width:412px;height:892px;transition:var(--transition-smooth);background:#000;border:10px solid #1a1a24;border-radius:48px;position:relative;overflow:hidden;box-shadow:0 32px 80px #00000059,inset 0 4px 10px #ffffff26,inset 0 -4px 10px #0006}@media (width<=500px){body{background:#000}.device-frame{max-width:100%;height:100vh;box-shadow:none;border:none;border-radius:0}}.screen-content{background:var(--bg-gradient);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.device-frame:after{content:"";pointer-events:none;z-index:999;background:linear-gradient(115deg,#ffffff14 0%,#fff0 50%);width:200%;height:100%;position:absolute;top:0;left:0}.dynamic-island-container{z-index:1000;pointer-events:none;justify-content:center;width:100%;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.dynamic-island{color:#fff;transition:var(--transition-fluid);pointer-events:auto;background:#000;border:1px solid #ffffff0d;border-radius:26px;justify-content:center;align-items:center;display:flex;overflow:hidden;box-shadow:0 10px 30px #0003}.dynamic-island.state-idle{width:110px;height:28px}.dynamic-island-content-idle{letter-spacing:.8px;color:#ffffffd9;opacity:1;align-items:center;gap:6px;font-size:.7rem;font-weight:700;transition:opacity .2s;display:flex}.gps-dot{background-color:#10b981;border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulse-gps}@keyframes pulse-gps{0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}.dynamic-island.state-menu{border-radius:28px;width:370px;height:80px}.dynamic-island-content-menu{justify-content:space-around;align-items:center;width:100%;height:100%;padding:0 12px;display:flex}.island-tab-btn{color:#fff9;cursor:pointer;height:100%;transition:var(--transition-fast);background:0 0;border:none;border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;font-size:.65rem;font-weight:500;display:flex}.island-tab-btn:hover,.island-tab-btn.active{color:#fff}.island-tab-btn.active{color:var(--accent-color);background:#ffffff1a}.island-tab-icon{justify-content:center;align-items:center;transition:transform .2s;display:flex}.island-tab-btn:active .island-tab-icon{transform:scale(.9)}.dynamic-island.state-nav{border-radius:20px;width:280px;height:52px;padding:0 16px}.dynamic-island-content-nav{justify-content:flex-start;align-items:center;gap:12px;width:100%;height:100%;display:flex}.island-nav-icon{color:#10b981;justify-content:center;align-items:center;animation:2s ease-in-out infinite pulse-nav-icon;display:flex}@keyframes pulse-nav-icon{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.island-nav-text{text-align:left;flex-direction:column;justify-content:center;line-height:1.2;display:flex}.island-nav-dist{color:#fff;font-size:.85rem;font-weight:700}.island-nav-road{color:#ffffffb3;text-overflow:ellipsis;white-space:nowrap;max-width:190px;font-size:.65rem;overflow:hidden}.dynamic-island-click-shield{cursor:pointer;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.map-viewport{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.map-tint-overlay{width:100%;height:100%;opacity:var(--map-overlay-opacity);pointer-events:none;z-index:2;background:#000;transition:opacity .5s;position:absolute;top:0;left:0}.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:120px!important}.floating-stats-pill{z-index:10;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px)saturate(180%);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-premium);transition:var(--transition-smooth);flex-direction:column;gap:8px;padding:12px 18px;display:flex;position:absolute;bottom:24px;left:16px;right:16px}.stats-grid{justify-content:space-between;align-items:center;display:flex}.stat-item{flex-direction:column;flex:1;align-items:center;display:flex}.stat-item.border-x{border-left:1px solid #8b5cf626;border-right:1px solid #8b5cf626}.stat-val{color:var(--text-main);letter-spacing:-.5px;font-size:1.1rem;font-weight:700}.stat-lbl{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;font-size:.65rem}.stats-street-row{color:var(--accent-color);background:#8b5cf614;border-radius:12px;justify-content:center;align-items:center;gap:6px;max-width:100%;padding:4px 10px;font-size:.75rem;font-weight:600;display:flex}.stats-street-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.glass-overlay-panel{z-index:8;-webkit-backdrop-filter:blur(14px)saturate(140%);width:100%;height:100%;transition:var(--transition-fluid);background:#fff3;flex-direction:column;padding:86px 20px 24px;display:flex;position:absolute;top:0;left:0;overflow-y:auto}body.night-mode .glass-overlay-panel{-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);background:#0f0c1873}.glass-overlay-panel.hidden{opacity:0;pointer-events:none;transform:translateY(100%)scale(.95)}.panel-header{text-align:left;margin-bottom:20px}.panel-header h2{color:var(--text-main);letter-spacing:-.5px;font-size:1.6rem;font-weight:700}.panel-header p{color:var(--text-muted);margin-top:4px;font-size:.8rem}.input-group{flex-direction:column;gap:6px;margin-bottom:14px;display:flex;position:relative}.input-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:.75rem;font-weight:600}.input-wrapper{align-items:center;display:flex;position:relative}.input-icon{color:var(--accent-color);align-items:center;display:flex;position:absolute;left:14px}.input-wrapper input{border-radius:var(--border-radius-md);border:1px solid var(--glass-border);background:var(--glass-input-bg);width:100%;height:48px;color:var(--text-main);transition:var(--transition-fast);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);outline:none;padding:0 16px 0 42px;font-size:.9rem;font-weight:600}.input-wrapper input:focus{border-color:var(--accent-color);box-shadow:var(--shadow-glow);background:#ffffffbf}body.night-mode .input-wrapper input:focus{background:#00000073}.btn-locate{color:var(--text-muted);cursor:pointer;width:32px;height:32px;transition:var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;right:10px}.btn-locate:hover,.btn-locate.active{color:var(--accent-color);background:#8b5cf61a}.swap-row{justify-content:flex-end;margin:-6px 12px 6px 0;display:flex}.btn-swap{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);cursor:pointer;width:32px;height:32px;box-shadow:var(--shadow-premium);transition:var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.btn-swap:hover{color:var(--accent-color);transform:rotate(180deg)}.suggestions-box{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(24px)saturate(180%);border-radius:var(--border-radius-md);width:100%;box-shadow:var(--shadow-active);z-index:100;max-height:220px;position:absolute;top:76px;left:0;overflow:hidden auto}.suggestion-item{cursor:pointer;transition:var(--transition-fast);text-align:left;border-bottom:1px solid #ffffff1a;align-items:center;gap:12px;padding:12px 16px;display:flex}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background:#8b5cf61a}.suggestion-title{color:var(--text-main);font-size:.85rem;font-weight:700}.suggestion-desc{color:var(--text-muted);margin-top:2px;font-size:.7rem}.profile-selector{gap:8px;margin-bottom:18px;display:flex}.profile-btn{border-radius:var(--border-radius-md);border:1px solid var(--glass-border);background:var(--glass-bg);height:42px;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);flex:1;justify-content:center;align-items:center;gap:6px;font-size:.8rem;font-weight:600;display:flex}.profile-btn:hover,.profile-btn.active{background:var(--accent-gradient);color:var(--text-on-accent);box-shadow:var(--shadow-glow);border-color:#0000}.routes-container{flex-direction:column;gap:10px;margin-top:10px;display:flex}.routes-container h3{color:var(--text-main);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:.85rem;font-weight:700}.route-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);cursor:pointer;box-shadow:var(--shadow-premium);transition:var(--transition-smooth);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.route-card:hover,.route-card.active{border-color:var(--accent-color);background:#fffc}body.night-mode .route-card:hover,body.night-mode .route-card.active{background:#14121ee6}.route-card-info{text-align:left;flex-direction:column;gap:4px;display:flex}.route-badge-row{align-items:center;gap:6px;display:flex}.route-badge{text-transform:uppercase;color:#fff;border-radius:6px;padding:2px 6px;font-size:.6rem;font-weight:700}.badge-fastest{background:#8b5cf6}.badge-eco{background:#10b981}.badge-alt{background:#3b82f6}.route-title{color:var(--text-main);font-size:.9rem;font-weight:700}.route-desc{color:var(--text-muted);font-size:.75rem}.route-card-metrics{flex-direction:column;align-items:flex-end;gap:2px;display:flex}.route-time{color:var(--text-main);font-size:1.1rem;font-weight:700}.route-distance{color:var(--text-muted);font-size:.75rem}.recents-list-container{flex-direction:column;gap:10px;margin-bottom:24px;display:flex}.recent-trip-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast);box-shadow:var(--shadow-premium);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.recent-trip-card:hover{border-color:var(--accent-color);transform:translateY(-2px)}.recent-trip-info{text-align:left;align-items:center;gap:12px;display:flex}.recent-clock-icon{color:var(--accent-color);font-size:1.2rem}.recent-destination-names{flex-direction:column;gap:2px;display:flex}.recent-name-title{color:var(--text-main);font-size:.9rem;font-weight:700}.recent-name-subtitle{color:var(--text-muted);font-size:.75rem}.recent-metrics{flex-direction:column;align-items:flex-end;display:flex}.recent-duration{color:var(--text-main);font-size:.95rem;font-weight:700}.recent-dist{color:var(--text-muted);font-size:.75rem}.empty-state{color:var(--text-muted);flex-direction:column;align-items:center;padding:30px 20px;display:flex}.empty-icon{margin-bottom:8px;font-size:2rem}.favorites-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;display:grid}.fav-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast);box-shadow:var(--shadow-premium);text-align:left;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;display:flex}.fav-card:hover{border-color:var(--accent-color);box-shadow:var(--shadow-active);transform:translateY(-2px)}.fav-icon{font-size:1.2rem}.fav-name{color:var(--text-main);font-size:.85rem;font-weight:700}.fav-desc{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.7rem;overflow:hidden}.settings-list{flex-direction:column;gap:16px;padding-bottom:40px;display:flex}.settings-group{text-align:left;flex-direction:column;gap:8px;display:flex}.settings-group h3{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:2px;font-size:.8rem;font-weight:700}.theme-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.theme-option{border:1px solid var(--glass-border);border-radius:var(--border-radius-md);cursor:pointer;color:#2e2545;transition:var(--transition-fast);box-shadow:var(--shadow-premium);text-align:left;align-items:center;gap:8px;padding:10px 14px;font-size:.85rem;font-weight:600;display:flex}.theme-option.active{border-color:var(--accent-color);font-weight:700;box-shadow:0 0 10px #8b5cf626}.theme-dot{border-radius:50%;width:10px;height:10px}.settings-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-premium);text-align:left;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.settings-card-label{flex-direction:column;gap:2px;display:flex}.settings-card-title{color:var(--text-main);font-size:.9rem;font-weight:700}.settings-card-desc{color:var(--text-muted);font-size:.7rem}.switch-control{width:44px;height:24px;display:inline-block;position:relative}.switch-control input{opacity:0;width:0;height:0}.switch-slider{cursor:pointer;background-color:#8b5cf626;border-radius:24px;transition:all .3s;position:absolute;inset:0}.switch-slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:3px;left:3px;box-shadow:0 2px 4px #0000001a}.switch-control input:checked+.switch-slider{background-color:var(--accent-color)}.switch-control input:checked+.switch-slider:before{transform:translate(20px)}.select-wrapper{align-items:center;display:flex;position:relative}.select-wrapper select{border-radius:var(--border-radius-md);border:1px solid var(--glass-border);background:var(--glass-input-bg);width:100%;height:44px;color:var(--text-main);cursor:pointer;appearance:none;transition:var(--transition-fast);outline:none;padding:0 34px 0 16px;font-size:.85rem;font-weight:600}.select-wrapper:after{content:"▼";color:var(--text-muted);pointer-events:none;font-size:.65rem;position:absolute;right:14px}.flags-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;display:grid}.flag-btn{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-main);transition:var(--transition-fast);flex-direction:column;align-items:center;gap:4px;padding:8px;font-size:.7rem;font-weight:600;display:flex}.flag-btn:hover,.flag-btn.active{border-color:var(--accent-color);background:#8b5cf61a}.flag-icon{font-size:1.3rem}.system-credit{text-align:center;color:var(--text-muted);margin-top:14px;font-size:.7rem;line-height:1.4}.hud-layer{z-index:5;pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:76px;left:16px;right:16px}.speed-limit-sign{color:#000;pointer-events:auto;background:#fff;border:4px solid #ef4444;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1rem;font-weight:800;display:flex;box-shadow:0 4px 10px #00000026}.speedometer{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-premium);pointer-events:auto;border-radius:14px;flex-direction:column;align-items:center;padding:6px 12px;display:flex}.speed-num{color:var(--text-main);letter-spacing:-.5px;font-size:1.4rem;font-weight:800;line-height:1}.speed-unit{color:var(--text-muted);margin-top:1px;font-size:.55rem;font-weight:600}.speedometer.speeding{background:#ef444433;border-color:#ef4444;animation:1s infinite alternate speed-warning-flash}@keyframes speed-warning-flash{0%{box-shadow:0 0 5px #ef44444d}to{box-shadow:0 0 15px #ef4444cc}}.floating-hud-controls{z-index:5;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;top:140px;right:16px}.hud-btn{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);width:38px;height:38px;color:var(--text-main);cursor:pointer;box-shadow:var(--shadow-premium);transition:var(--transition-fast);pointer-events:auto;border-radius:50%;justify-content:center;align-items:center;display:flex}.hud-btn:hover{border-color:var(--accent-color);transform:scale(1.05)}.hud-btn.active{color:var(--accent-color);border-color:var(--accent-color);background:var(--accent-pastel)}body.night-mode .hud-btn.active{background:#8b5cf640}.hud-btn-primary{background:var(--accent-gradient);color:#fff;width:44px;height:44px;box-shadow:var(--shadow-glow);border-color:#0000}.hud-btn-primary:hover{box-shadow:0 0 25px #8b5cf673}.speeding-screen-flash{pointer-events:none;z-index:99;opacity:0;background:#ef444426;border:4px solid #ef4444;width:100%;height:100%;transition:opacity .2s;position:absolute;top:0;left:0}.speeding-screen-flash.active{opacity:1}.ios-home-indicator{background-color:var(--text-main);opacity:.35;z-index:1001;pointer-events:none;border-radius:3px;width:120px;height:5px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}body.night-mode .ios-home-indicator{opacity:.45;background-color:#fff}.hidden{display:none!important}.glass-overlay-panel::-webkit-scrollbar{width:4px}.glass-overlay-panel::-webkit-scrollbar-track{background:0 0}.glass-overlay-panel::-webkit-scrollbar-thumb{background:#8b5cf633;border-radius:2px}.glass-overlay-panel::-webkit-scrollbar-thumb:hover{background:#8b5cf666}