:root{--brom:#e0a100;--car:#6b7280;--bike:#16a34a;--ink:#14213d;--bg:#fff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
#map{position:absolute;inset:0}
.panel{position:absolute;top:12px;left:12px;width:380px;max-height:calc(100% - 24px);overflow:auto;background:var(--bg);
  border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:12px 14px 14px;z-index:2}
.grab{display:none}
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.brand{font-weight:700;font-size:17px}
.beta{font-size:10px;font-weight:600;background:#eef;color:#447;padding:2px 6px;border-radius:8px;vertical-align:middle}
#lang{border:1px solid #ddd;border-radius:8px;padding:3px 4px;background:#fff}
.vehicle{display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px;margin-bottom:10px}
.vehicle small{display:block;font-weight:400;font-size:11px;color:#666}
.plate{font-size:10px;font-weight:800;text-transform:uppercase;padding:4px 5px;border-radius:4px;border:1.5px solid #333;min-width:38px;text-align:center}
.plate.yellow{background:#facc15;color:#111}
.inputs{position:relative}
.field{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.field input{flex:1;min-width:0;border:1px solid #d1d5db;border-radius:10px;padding:10px;font-size:15px}
.dot{width:22px;height:22px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.dot.a{background:#10b981}.dot.b{background:#ef4444}
.icon{border:1px solid #d1d5db;background:#fff;border-radius:10px;width:40px;height:40px;font-size:18px;cursor:pointer;flex:none}
.sugg{position:absolute;left:28px;right:46px;top:44px;margin:0;padding:0;list-style:none;background:#fff;border:1px solid #ddd;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);z-index:5;max-height:240px;overflow:auto}
.sugg:empty{display:none}
.sugg li{padding:8px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid #f1f1f1}
.sugg li:hover{background:#f3f4f6}
.hint{font-size:12px;color:#666;margin:2px 0 6px 28px}
.compare{display:flex;gap:12px;font-size:13px;align-items:center;color:#444;margin:4px 0 8px}
.result.hidden,.hidden{display:none}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;margin:6px 0}
.summary b{display:block;font-size:20px}
.summary small{color:#666;font-size:11px}
.bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#eee;margin-top:6px}
.bar span{display:block;height:100%}
.legend{font-size:11px;color:#555;margin:4px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;vertical-align:middle}
.cmp{display:flex;justify-content:space-between;font-size:13px;padding:5px 8px;border-radius:8px;background:#f6f7f9;margin-top:4px}
.actions{display:flex;gap:8px;margin:10px 0 4px}
.btn{flex:1;text-align:center;text-decoration:none;font:inherit;font-size:13px;font-weight:600;padding:9px;border-radius:10px;border:0;
  background:var(--ink);color:#fff;cursor:pointer}
.btn.ghost{background:#eef0f4;color:var(--ink)}
.btn.start{background:#1f6feb;font-size:15px}
.steps{margin:6px 0 0;padding-left:0;list-style:none;font-size:13px}
.steps li{display:flex;gap:8px;padding:7px 2px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.steps li .d{margin-left:auto;color:#777;white-space:nowrap;font-size:12px}
.steps li .n{color:#999;width:18px;flex:none}
.note{font-size:11px;color:#666;margin:8px 0 0}
.error{background:#fee2e2;color:#991b1b;font-size:13px;padding:8px 10px;border-radius:10px;margin-top:8px}
.maplibregl-ctrl-attrib{font-size:10px}
@media (max-width:640px){
  .panel{top:auto;bottom:0;left:0;right:0;width:auto;max-height:55%;border-radius:16px 16px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .panel.collapsed{max-height:150px;overflow:hidden}
  .grab{display:block;width:44px;height:5px;border-radius:3px;background:#ccc;margin:-4px auto 8px;cursor:pointer}
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:150px}
}

.gear{font-size:20px;text-decoration:none;color:inherit;margin-left:auto;margin-right:8px;line-height:1}
.srvwarn{background:#fef3c7;color:#92400e;border-radius:10px;padding:8px 10px;font-size:13px;margin:6px 0}
.srvwarn a,.error a{color:inherit;font-weight:700}

/* home / work / recents (v0.2.0) */
.places{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 8px}
.place{display:flex;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;overflow:hidden}
.place .go{flex:1;min-width:0;display:flex;gap:8px;align-items:center;border:0;background:none;padding:8px 6px 8px 10px;font:inherit;text-align:left;cursor:pointer;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.place .go b{display:block;font-size:14px}.place .go small{display:block;font-size:11px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.place .pi{font-size:20px}
.place .pe{border:0;border-left:1px solid #e5e7eb;background:none;width:34px;font-size:15px;color:#64748b;cursor:pointer}
.place.unset .go small{color:#b45309}
.recents{margin:0 0 8px}.rh{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#475569;margin:6px 2px 2px}
.link{border:0;background:none;color:#1f6feb;font:inherit;font-size:12px;cursor:pointer;padding:0}
#recent-list{list-style:none;margin:0;padding:0}
#recent-list li{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid #f1f1f1;font-size:13px;cursor:pointer}
#recent-list li span.t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#recent-list li .x{border:0;background:none;color:#94a3b8;font-size:15px;cursor:pointer}
.timing{font-size:11px;color:#666;margin:0 0 4px;text-align:center}
.dlg{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:10;display:flex;align-items:flex-end;justify-content:center}
.dlg-card{background:#fff;width:100%;max-width:440px;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
@media (min-width:641px){.dlg{align-items:center}.dlg-card{border-radius:18px}}
.dlg-card h3{margin:0 0 4px}.dlg-cur{font-size:12px;color:#666;margin:0 0 10px}
.dlg-card .field input{width:100%}.dlg-card .sugg{left:0;right:0}
.dlg-btns{display:grid;gap:8px;margin-top:8px}.dlg-btns .btn{font-size:14px;padding:11px}
.btn.danger{color:#b91c1c}
.dlg.hidden,.recents.hidden,.dlg-btns .hidden{display:none}