:root{
  --bg:#0f1419; --panel:#161d24; --panel2:#1e2730; --line:#2a3540;
  --text:#eef2f5; --muted:#8fa0ad; --accent:#ffb020; --accent-ink:#1a1200;
  --blue:#2f80ff; --red:#e5484d; --green:#30a46c;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
#map{position:fixed;inset:0}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:var(--text)}

.card{position:fixed;left:12px;right:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:10px;box-shadow:0 8px 30px rgba(0,0,0,.45);z-index:5}
.card.top{top:calc(10px + var(--safe-t))}
@media(min-width:720px){.card{left:16px;right:auto;width:400px}}

.field{display:flex;align-items:center;gap:8px;background:var(--panel2);border-radius:10px;padding:0 6px 0 10px;margin-bottom:6px}
.field input{flex:1;background:none;border:0;outline:0;padding:12px 0;min-width:0}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.o{background:var(--green)} .dot.d{background:var(--red)}
.icon{width:40px;height:40px;font-size:20px;color:var(--accent)}
.sugg{list-style:none;margin:-2px 0 6px;padding:0;max-height:220px;overflow:auto}
.sugg li{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.sugg li small{display:block;color:var(--muted)}
.sugg li:hover{background:var(--panel2)}

.row{display:flex;align-items:center}.between{justify-content:space-between}.gap{gap:8px}.grow{flex:1}
.primary{background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:12px;padding:12px 16px}
.secondary{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.danger{background:var(--red);color:#fff;font-weight:700;border-radius:12px;padding:12px 16px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;color:var(--muted)}
.link{color:var(--muted);text-decoration:underline;padding:6px 0}
button:disabled{opacity:.5}

/* nav banner */
.nav{display:flex;gap:12px;align-items:center;background:#0b5c3b;border-color:#13774f}
.mIcon{width:56px;height:56px;border-radius:12px;background:rgba(0,0,0,.25);display:grid;place-items:center;font-size:34px;font-weight:700}
.big{font-size:28px;font-weight:800;line-height:1.1}
.mtext{font-size:16px}
.fab{position:fixed;right:14px;bottom:calc(46vh + 10px);z-index:6;width:48px;height:48px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--accent);font-size:22px}

/* sheet */
.sheet{position:fixed;left:0;right:0;bottom:calc(60px + var(--safe-b));height:34vh;background:var(--panel);
  border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid var(--line);z-index:4;
  padding:4px 14px 14px;overflow:auto;transition:height .25s}
.sheet.tall{height:72vh}
.sheet.mini{height:84px}
@media(min-width:720px){.sheet{left:16px;right:auto;width:400px;bottom:calc(72px + var(--safe-b));border-radius:18px;height:calc(100vh - 340px)}}
.grab{display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 10px;padding:0}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}
.muted{color:var(--muted)} .small{font-size:12px}

.stats,.hosgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.hosgrid{grid-template-columns:repeat(2,1fr)}
.stats div,.hosgrid div{background:var(--panel2);border-radius:12px;padding:10px;text-align:center}
.stats b,.hosgrid b{display:block;font-size:20px}
.stats span,.hosgrid span{font-size:12px;color:var(--muted)}
.hosgrid b.low{color:var(--red)}
.warn{background:#3a2a05;border:1px solid #6b4d0a;color:#ffd58a;border-radius:10px;padding:10px;margin-bottom:10px;font-size:13px}

.wx{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.wx div{flex:none;background:var(--panel2);border-radius:10px;padding:8px 10px;min-width:92px;font-size:12px;text-align:center}
.wx b{display:block;font-size:16px}
.wx .gust{color:#ffd58a}

.dirs{margin:0;padding-left:22px}
.dirs li{padding:8px 0;border-bottom:1px solid var(--line)}
.dirs li small{color:var(--muted);display:block}
.dirs li.cur{color:var(--accent)}

.filters{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px}
.filters button{flex:none;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px}
.filters button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.stops{list-style:none;margin:0;padding:0}
.stops li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.stops .mi{flex:none;width:58px;font-weight:700;color:var(--accent);font-size:13px}
.stops small{display:block;color:var(--muted)}

.status-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.status-btns button{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 4px;font-size:13px}
.status-btns button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}

.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
.form input[type=number]{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.form .check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.form button{grid-column:1/-1}

.plan{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}
.plan-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:17px}
.plan-h b{color:var(--accent);font-size:22px} .plan-h small{font-size:12px;color:var(--muted)}
.plan ul{padding-left:18px;margin:12px 0}
.plan .primary{width:100%}

#tabs{position:fixed;left:0;right:0;bottom:0;height:calc(60px + var(--safe-b));padding-bottom:var(--safe-b);
  display:flex;background:var(--bg);border-top:1px solid var(--line);z-index:7}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
#tabs button i{font-style:normal;font-size:19px}
#tabs button.on{color:var(--accent)}

.toast{position:fixed;left:50%;top:40%;transform:translateX(-50%);background:#000c;padding:10px 16px;border-radius:10px;
  z-index:20;opacity:0;pointer-events:none;transition:opacity .2s;max-width:86vw;text-align:center}
.toast.show{opacity:1}

.me{width:26px;height:26px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,128,255,.25);
  display:grid;place-items:center;color:#fff;font-size:12px}
.me.nav{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.maplibregl-popup-content{background:var(--panel);color:var(--text);border-radius:10px}
.maplibregl-popup-tip{border-top-color:var(--panel)!important;border-bottom-color:var(--panel)!important}

/* ---------- Road Help ---------- */
.sos{width:100%;background:var(--red);color:#fff;font-weight:800;font-size:18px;border-radius:14px;padding:16px;letter-spacing:.02em;
  box-shadow:0 0 0 4px rgba(229,72,77,.25)}
.helptab i{filter:saturate(1.3)}
.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.helpgrid button{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 4px;font-size:22px;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.helpgrid button span{font-size:12px;color:var(--text)}
.helpgrid button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.flow{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:6px}
.flow h4{margin:0 0 6px;font-size:15px}
.flow .loc{font-size:13px;color:var(--muted);margin-bottom:8px}
.svc{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:0}
.svc .grow small{display:block;color:var(--muted)}
.svc .btns{display:flex;gap:6px;flex:none}
.btn-s{border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700;text-decoration:none;display:inline-block}
.btn-ai{background:var(--accent);color:var(--accent-ink)}
.btn-call{background:var(--panel);border:1px solid var(--line);color:var(--text)}
.wrap{flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.sm{padding:6px 8px;font-size:13px}
.form input[type=text],.form input[type=tel],.form input:not([type]),.form select,.flow input,.flow select{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;width:100%}
.flow .form input,.flow .form select{background:var(--bg)}
.form .full{grid-column:1/-1}
.status{font-size:12px;font-weight:700}
.status.ok{color:var(--green)} .status.err{color:var(--red)} .status.wait{color:var(--accent)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:30;display:grid;place-items:center;padding:16px}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;width:100%;max-width:420px;text-align:center}
.modal-box h2{margin:0 0 6px}
.modal-box p{color:var(--muted);margin:0 0 14px}
.modal-box .stack{display:grid;gap:8px}
.call911{display:block;background:var(--red);color:#fff;font-weight:800;font-size:22px;border-radius:14px;padding:18px;text-decoration:none}
.countdown{font-size:44px;font-weight:800;color:var(--accent);margin:4px 0 10px}