:root{--bg: #0f172a;--bg-2: #1e293b;--panel: #1e293b;--panel-2: #273449;--border: #334155;--text: #e2e8f0;--muted: #94a3b8;--primary: #2563eb;--primary-2: #3b82f6;--success: #16a34a;--danger: #dc2626;--radius: 14px;font-family:system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;font-weight:600;transition:filter .15s,transform .05s}button:active{transform:translateY(1px)}button:disabled{opacity:.55;cursor:default}button.primary{background:var(--primary);color:#fff;padding:12px}button.primary:hover:not(:disabled){filter:brightness(1.1)}button.success{background:var(--success);color:#fff;padding:12px;width:100%}button.danger{background:var(--danger);color:#fff;padding:12px;width:100%}button.small{padding:7px 12px;font-size:13px}.provider-select{height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,#1e3a8a33,transparent),var(--bg)}.provider-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:40px;max-width:460px;width:100%;text-align:center;box-shadow:0 24px 60px #0008}.provider-card .logo{font-size:56px}.provider-card h1{margin:12px 0 6px;font-size:26px}.provider-card .subtitle{color:var(--muted);margin:0 0 24px;line-height:1.5}.provider-card code{background:#0b1220;padding:2px 6px;border-radius:6px;color:#93c5fd;font-size:.9em}.provider-options{display:grid;gap:14px}.provider-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:18px 20px;text-align:left}.provider-btn:hover{border-color:var(--primary)}.provider-btn .p-icon{font-size:26px}.provider-btn .p-name{font-size:17px;font-weight:700}.provider-btn .p-desc{color:var(--muted);font-size:13px}.provider-btn .badge{position:absolute;top:12px;right:12px;background:#f59e0b;color:#1f2937;font-size:11px;padding:2px 8px;border-radius:999px}.provider-card .hint{margin-top:20px;color:var(--muted);font-size:13px}.navigator{display:grid;grid-template-columns:380px 1fr;height:100%}.sidebar{background:var(--bg);border-right:1px solid var(--border);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}.app-header{display:flex;justify-content:space-between;align-items:center}.brand{font-size:20px;font-weight:800}.link-btn{background:var(--panel-2);color:var(--text);padding:6px 12px;font-size:13px}.map-area{position:relative}.map{width:100%;height:100%}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.panel h2{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.panel.muted .hint{margin:0}.hint{color:var(--muted);font-size:13px;line-height:1.5;margin:4px 0 0}.error-text{color:#fca5a5;font-size:13px;margin:8px 0 0}.route-panel form{display:flex;flex-direction:column;gap:10px}.route-panel label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.route-panel input{background:#0b1220;border:1px solid var(--border);color:var(--text);padding:11px 12px;border-radius:10px;font-size:15px}.route-panel input:focus{outline:none;border-color:var(--primary)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.dot.start{background:var(--success)}.dot.end{background:var(--danger)}.use-location{align-self:flex-start;background:transparent;color:var(--primary-2);font-size:13px;padding:2px 0}.route-summary{display:flex;gap:12px;margin-top:14px}.route-summary>div{flex:1;background:var(--panel-2);border-radius:10px;padding:10px;text-align:center}.route-summary strong{display:block;font-size:18px}.route-summary span{font-size:12px;color:var(--muted)}.route-panel .success,.route-panel .danger{margin-top:14px}.alt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.alt-item{width:100%;text-align:left;background:var(--panel-2);color:var(--text);border:1px solid transparent;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.alt-item.active{border-color:var(--primary);background:#1d2c4d}.alt-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.alt-via{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.traffic-badge{font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap}.traffic-badge.light{background:#14532d;color:#86efac}.traffic-badge.medium{background:#713f12;color:#fcd34d}.traffic-badge.heavy{background:#4c1d1d;color:#fca5a5}.alt-bottom{display:flex;align-items:baseline;gap:10px}.alt-bottom strong{font-size:17px;color:var(--primary-2)}.alt-bottom span{font-size:13px;color:var(--muted)}.alt-selected{margin-left:auto;color:#86efac!important;font-size:12px!important}.nav-banner{position:absolute;top:12px;left:12px;right:12px;z-index:6;display:flex;align-items:center;gap:14px;background:#1d4ed8ee;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;padding:14px 16px;box-shadow:0 8px 28px #0007}.nav-icon{font-size:34px;line-height:1}.nav-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.nav-distance{font-size:22px;font-weight:800;color:#fff}.nav-instruction{font-size:15px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-next{font-size:12px;color:#bfdbfe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-voice{background:#fff2;color:#fff;font-size:18px;padding:8px 10px;border-radius:10px}.nav-voice.on{background:#fff3}.obd-connect{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.obd-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.vehicle-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}.vehicle-list li{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:10px;padding:4px 8px 4px 4px;border:1px solid transparent}.vehicle-list li.active{border-color:var(--primary)}.vehicle-pick{flex:1;text-align:left;background:transparent;color:var(--text);padding:10px;display:flex;flex-direction:column;gap:2px}.v-name{font-weight:600;font-size:14px}.v-meta{font-size:12px;color:var(--muted)}.vehicle-form{display:flex;flex-direction:column;gap:10px}.vehicle-form h3{margin:0;font-size:14px;color:var(--muted)}.vehicle-form input{background:#0b1220;border:1px solid var(--border);color:var(--text);padding:11px 12px;border-radius:10px;font-size:15px;width:100%}.vehicle-row{display:flex;gap:10px}.fuel-tabs{display:flex;gap:6px}.fuel-tabs button{flex:1;background:var(--panel-2);color:var(--text);padding:9px;font-size:13px}.fuel-tabs button.active{background:var(--primary);color:#fff}.traffic-toggle{position:absolute;left:16px;bottom:24px;z-index:5;background:#1e293bdd;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);border:1px solid var(--border);padding:9px 14px;font-size:13px;box-shadow:0 6px 20px #0006}.traffic-toggle.on{border-color:var(--primary);color:#fff}.drive-stats{display:flex;gap:12px}.drive-stats>div{flex:1;text-align:center;background:var(--panel-2);border-radius:10px;padding:12px}.drive-stats strong{display:block;font-size:28px;color:var(--primary-2)}.drive-stats span{font-size:12px;color:var(--muted)}.category-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.category-tabs button{background:var(--panel-2);color:var(--text);padding:7px 10px;font-size:13px}.category-tabs button.active{background:var(--primary);color:#fff}.place-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}.place-list li{background:var(--panel-2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}.place-main{display:flex;justify-content:space-between;gap:8px}.place-name{font-weight:600;font-size:14px}.place-rating{font-size:13px;color:#fbbf24;white-space:nowrap}.place-vicinity{font-size:12px;color:var(--muted)}.place-open{font-size:11px;width:fit-content;padding:1px 8px;border-radius:999px}.place-open.open{background:#14532d;color:#86efac}.place-open.closed{background:#4c1d1d;color:#fca5a5}.obd-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.obd-header h2{margin:0}.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gauge{background:var(--panel-2);border-radius:10px;padding:12px 6px;text-align:center;display:flex;flex-direction:column}.gauge-value{font-size:22px;font-weight:700;color:var(--primary-2)}.gauge-unit{font-size:11px;color:var(--muted)}.gauge-label{font-size:12px;margin-top:4px}.weather-overlay{position:absolute;top:12px;left:50%;transform:translate(-50%);max-width:min(560px,92%);z-index:5}.weather-widget{display:flex;flex-direction:column;align-items:center;gap:8px}.weather-pill{display:inline-flex;align-items:center;gap:8px;background:#1e293be6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--text);padding:6px 14px;border-radius:999px;font-size:14px;box-shadow:0 6px 20px #0006}.weather-pill.muted{font-size:12px;color:var(--muted);cursor:default}.weather-pill .pill-now{font-weight:700;font-size:16px}.weather-pill .pill-range{color:var(--muted)}.weather-pill .pill-label{color:var(--muted);font-size:12px}.weather-pill .pill-chevron{font-size:10px;color:var(--muted)}.weather-cards{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:10px;background:#1e293be6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px #0006}.weather-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;background:var(--panel-2);border-radius:10px;padding:6px 10px;min-width:72px}.weather-card .eta{font-size:11px;color:var(--muted)}.weather-card .temp{font-size:17px;font-weight:700}.weather-card .city{font-size:11px;color:var(--muted)}.header-actions{display:flex;gap:8px}.history-modal{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px;width:min(560px,92vw);max-height:86vh;overflow-y:auto;box-shadow:0 24px 60px #000a}.history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.history-head h2{margin:0}.history-totals{display:flex;gap:10px;margin-bottom:16px}.history-totals>div{flex:1;background:var(--panel-2);border-radius:10px;padding:12px;text-align:center}.history-totals strong{display:block;font-size:22px;color:var(--primary-2)}.history-totals span{font-size:12px;color:var(--muted)}.trip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.trip-list li{background:var(--panel-2);border-radius:12px;padding:14px}.trip-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.trip-route{font-weight:600;font-size:15px}.trip-del{background:transparent;font-size:15px;padding:2px 6px}.trip-date{font-size:12px;color:var(--muted)}.trip-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px}.break-overlay{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.break-modal{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:32px;max-width:400px;text-align:center;box-shadow:0 24px 60px #000a}.break-icon{font-size:52px}.break-modal h2{margin:8px 0}.break-modal p{color:var(--muted);line-height:1.6;margin-bottom:20px}.break-modal button{width:100%}@media(max-width:820px){.navigator{grid-template-columns:1fr;grid-template-rows:45% 55%}.map-area{order:-1}}