*{box-sizing:border-box}
html,body,#map{height:100%;width:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{overflow:hidden;color:#222;background:#f4f4f2}
#panel{position:fixed;z-index:5;top:8px;bottom:8px;left:8px;width:390px;max-height:none;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;background:rgba(255,255,255,.95);padding:14px;border-radius:14px;box-shadow:0 5px 22px #0003;overscroll-behavior:contain}
.title{font-size:21px;font-weight:750}
.title span{float:right;font-size:12px;color:#667;max-width:180px}
.row{display:flex;gap:8px;margin-top:8px}
.row>*{flex:1;min-width:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
label{display:block;font-size:12px;color:#667;margin-top:8px}
input,button,select{width:100%;height:42px;border-radius:9px;font:inherit}
input,select{border:1px solid #ddd;padding:8px;background:#fff}
button{border:0;background:#27a9ff;color:#fff;font-weight:700;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:#e9edf1;color:#222}
.full{margin-top:8px}
.summary{margin-top:9px;padding:10px;background:#f5f7f9;border-radius:9px;line-height:1.5}
.hidden{display:none!important}
.result,.camera-item{padding:9px;border-bottom:1px solid #eee}
.result{cursor:pointer}
.result:hover{background:#f5f7f9}
.camera-item{display:flex;align-items:center;gap:8px;font-size:12px}
.camera-item span{flex:1;overflow-wrap:anywhere}
.camera-item button{height:28px;width:auto;flex-shrink:0;background:#d33;padding:0 8px}
.marker{width:28px;height:28px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;color:#fff;font-weight:bold;box-shadow:0 2px 8px #0006}
.tesla{background:#e82127}.charger{background:#1976d2}.camera{background:#111}.alert{background:#ff9800}
.vehicle-marker{filter:drop-shadow(0 3px 5px #0008);pointer-events:none}
.check{display:flex;gap:7px;align-items:center}
.check input{width:auto;height:auto}
#speedHud{position:absolute;z-index:6;right:18px;bottom:20px;width:112px;padding:8px;background:rgba(255,255,255,.95);border-radius:16px;box-shadow:0 4px 18px #0004;text-align:center}
.gps-speed{font-size:42px;font-weight:800;line-height:42px}
.unit{font-size:12px;color:#555}
.speed-limit{width:58px;height:58px;margin:8px auto 0;border:6px solid #e02020;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:23px;font-weight:800}
.speed-limit.unknown{border-color:#aaa;color:#777}
.gps-speed.overspeed{color:#d71920}
.camera-alert{position:absolute;z-index:7;top:18px;left:50%;transform:translateX(-50%);background:#151515;color:#fff;border-radius:12px;padding:12px 18px;font-size:18px;font-weight:750;box-shadow:0 5px 20px #0005;max-width:calc(100vw - 32px);pointer-events:none}
.small{font-size:11px;color:#667}
details{margin-top:12px}
summary{cursor:pointer;font-weight:650}
#turnPanel{border-left:5px solid #27a9ff;background:#fff;font-size:16px}
.maplibregl-popup-content{font-size:13px;border-radius:8px;max-width:340px}
#panelToggle{width:auto;height:30px;padding:0 10px;font-size:12px;background:#e9edf1;color:#222;margin-bottom:8px}
.compact .expanded-only{display:none!important}
.compact{bottom:auto!important;max-height:220px!important}
.compact #destination{font-size:13px}
.compact #turnPanel{margin-top:8px}
#tripMini{font-size:12px;line-height:1.5;margin-top:8px;color:#445}
.compact .search-row{display:none}
.trip-details-title{margin-top:12px;font-weight:700}

/* Route preferences and alternatives */
#routePreferencePanel{margin-top:9px}
#routePreferencePanel .check{padding:5px 0}
#alternativeRoutes{display:grid;gap:6px;margin-top:8px}
.route-option{height:auto;min-height:40px;text-align:left;padding:8px 10px;background:#e9edf1;color:#222}
.route-option.selected{background:#27a9ff;color:#fff}

/* Charging plan and stop cards */
.charging-plan-heading{font-weight:750;margin-bottom:8px}
.charging-stop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:9px;background:#fff;border:1px solid #e4e8ec;border-radius:9px}
.charging-stop-information{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.charging-stop-information strong{overflow-wrap:anywhere}
.charging-stop-information span{font-size:12px;color:#667}
.charging-stop-actions{display:flex;gap:5px;flex-shrink:0}
.charging-stop-actions button{width:auto;height:34px;padding:0 9px}
.choose-charger-button{width:auto;min-width:132px;height:34px;padding:0 10px;flex-shrink:0}
.charging-stop-empty,.planner-warning{margin-top:8px;font-size:12px;color:#667}
.charger-alternatives{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid #ddd}
.alternative-charger-card{height:auto;min-height:42px;text-align:left;padding:9px;background:#e9edf1;color:#222}

/* Charger popup */
.charger-popup{min-width:240px;color:#111}
.charger-popup strong{display:block;margin-bottom:8px;font-size:15px}
.charger-popup>div{margin-bottom:8px;line-height:1.4}
.charger-popup button{display:block;width:100%;margin-top:6px;padding:8px 10px}

@media(max-width:700px){
  #panel{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:52vh;border-radius:16px;overflow-y:auto;scrollbar-width:none}
  #speedHud{right:10px;bottom:10px}
  .camera-alert{top:auto;bottom:190px;width:calc(100vw - 32px);font-size:15px}
  .charging-stop-row{align-items:stretch;flex-direction:column}
  .choose-charger-button{width:100%}
  .charging-stop-actions{width:100%}
  .charging-stop-actions button{flex:1}
}

.advanced-planner-settings{margin-top:12px;padding-top:8px;border-top:1px solid #dde2e6}
.advanced-planner-settings summary{font-size:13px}
.advanced-planner-settings .small{margin:8px 0 0}

/* Adaptive SOC and consumption monitor */
.adaptive-panel{margin-top:9px}
.adaptive-panel .row{align-items:end}.adaptive-panel button{margin-top:8px}
.soc-comparison{margin-top:6px;padding:7px 9px;border-radius:8px;background:#e9edf1;font-weight:700}
.soc-green{background:#dff5e5;color:#11652b}.soc-amber{background:#fff1c6;color:#7a5200}.soc-red{background:#ffd9dc;color:#a31220}

.weather-hud{position:absolute;z-index:7;top:16px;right:16px;display:flex;align-items:flex-start;gap:8px;font-variant-numeric:tabular-nums}
#weatherMain{width:auto;height:42px;padding:0 12px;display:flex;align-items:center;gap:7px;border-radius:12px;background:rgba(20,24,28,.88);color:#fff;box-shadow:0 3px 12px #0004;backdrop-filter:blur(10px)}
#weatherIcon{font-size:21px}#weatherTemp{font-size:18px;font-weight:750}
.weather-details{min-width:210px;padding:11px 12px;border-radius:12px;background:rgba(20,24,28,.92);color:#fff;box-shadow:0 3px 12px #0004;backdrop-filter:blur(10px);font-size:12px;line-height:1.55}
.weather-details strong{display:block;font-size:13px;margin-bottom:3px}.weather-source{margin-top:5px;color:#abb6c2;font-size:10px}
@media(max-width:700px){.weather-hud{top:auto;right:10px;bottom:135px}.weather-details{position:absolute;right:0;bottom:50px}}

.traffic-check{margin-top:8px}.traffic-alert{position:absolute;z-index:8;top:68px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:11px 15px;border-radius:12px;background:rgba(30,30,30,.93);color:#fff;font-weight:750;box-shadow:0 4px 18px #0005;pointer-events:none}
@media(max-width:700px){.traffic-alert{top:auto;bottom:245px;font-size:13px}}

#panel::-webkit-scrollbar{display:none;width:0;height:0}

.new-trip-button{width:auto;height:30px;padding:0 10px;margin:0 0 8px 8px;background:#e9edf1;color:#222;font-size:12px}