:root{
  --void:#050508; --void2:#0c0d14; --gold:#e8b84b; --saffron:#E8650A; --indigo:#1E2F8F;
  --ink:#f4f1e9; --dim:#9a96a6; --line:rgba(255,255,255,.10); --glass:rgba(255,255,255,.055);
  --ok:#3ecf8e; --bad:#ff6b6b;
  --serif:'Satoshi',system-ui,sans-serif; --body:'Satoshi',system-ui,sans-serif; --mono:'DM Mono',monospace;
  --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(--void);color:var(--ink);font-family:var(--body);font-size:18px;overflow:hidden}
b{font-weight:700}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
.mapscreen{display:none}.mapscreen.active{display:block}

.wordmark{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;font-size:30px}
.wordmark.sm{font-size:22px}
.wordmark .dot{color:var(--saffron)}
.tagline{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.role-pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;background:var(--glass);border:1px solid var(--line);padding:3px 8px;border-radius:20px;color:var(--gold);vertical-align:middle}

.btn{display:block;width:100%;border:0;border-radius:16px;padding:16px;font-family:var(--body);font-weight:700;font-size:18px;cursor:pointer;margin-top:12px;transition:transform .08s,opacity .2s}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--saffron));color:#1a1206}
.btn.primary:disabled{opacity:.4}
.btn.ghost{background:transparent;color:var(--dim);font-weight:700;border:1px solid var(--line)}
.btn.outline{background:rgba(232,184,75,.08);color:var(--gold);border:1px solid rgba(232,184,75,.35);font-weight:700}
.link{background:none;border:0;color:var(--gold);font-family:var(--body);font-size:14px;cursor:pointer}
.field{width:100%;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:15px 16px;color:var(--ink);font-family:var(--body);font-size:18px;outline:none}
.field:focus{border-color:var(--gold)}
.field.code{text-align:center;font-family:var(--mono);font-size:26px;letter-spacing:.4em}
.field.flush{background:none;border:0;padding:12px 0}

/* AUTH */
.auth-wrap{max-width:460px;width:100%;margin:auto;padding:calc(28px + var(--safe-t)) 26px calc(28px + var(--safe-b));overflow:auto}
.brand{margin-bottom:34px}
.auth-h{font-family:var(--serif);font-weight:700;font-size:clamp(40px,11vw,60px);line-height:.98;letter-spacing:-.03em;margin:0}
.auth-sub{color:var(--dim);margin:12px 0 24px;font-size:18px}
.seg{display:flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:18px}
.seg-btn{flex:1;border:0;background:none;color:var(--dim);font-family:var(--body);font-weight:700;padding:11px;border-radius:10px;cursor:pointer}
.seg-btn.active{background:rgba(232,184,75,.14);color:var(--gold)}
.auth-pane{display:none}.auth-pane.active{display:block}
.phone-row{display:flex;gap:8px}
.cc{display:flex;align-items:center;padding:0 14px;background:var(--glass);border:1px solid var(--line);border-radius:14px;font-family:var(--mono);color:var(--gold)}
.phone-row .field{flex:1}
.code-hint{color:var(--dim);font-size:16px;margin:0 0 14px}
.note{background:rgba(232,101,10,.12);border:1px solid rgba(232,101,10,.3);color:#ffba8a;padding:12px;border-radius:12px;font-size:16px;margin-bottom:12px}
.msg{margin-top:14px;min-height:22px;font-size:16px;text-align:center}.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
.legal-foot{text-align:center;margin-top:20px;font-size:14px;color:var(--dim)}.legal-foot a{color:var(--dim)}.legal-foot a:hover{color:var(--gold)}

/* ROLE */
.role-wrap{max-width:460px;width:100%;margin:auto;padding:30px 26px}
.role-h{font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:-.02em;margin:24px 0 22px}
.role-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:14px;cursor:pointer;color:var(--ink)}
.role-card:active{border-color:var(--gold)}
.role-emoji{font-size:32px}.role-txt{flex:1;display:flex;flex-direction:column}.role-txt b{font-size:20px}.role-txt small{color:var(--dim);font-size:16px;margin-top:3px}
.chev{font-size:28px;color:var(--dim)}

/* MAP */
.map{position:absolute;inset:0;background:#0c0d14;z-index:0}
.topbar{position:absolute;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-t)) 14px 10px}
.topbar-title{font-family:var(--serif);font-weight:700;font-size:18px;background:rgba(5,5,8,.7);backdrop-filter:blur(10px);padding:8px 16px;border-radius:30px;border:1px solid var(--line)}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(5,5,8,.7);backdrop-filter:blur(10px);color:var(--ink);font-size:20px;cursor:pointer}

/* SHEET */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:600;background:linear-gradient(180deg,var(--void2),var(--void));border-top-left-radius:26px;border-top-right-radius:26px;border-top:1px solid var(--line);padding:10px 22px calc(22px + var(--safe-b));box-shadow:0 -20px 60px rgba(0,0,0,.6);max-height:82vh;overflow:auto}
.grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:2px auto 14px}
.sheet-pane{display:none}.sheet-pane.active{display:block}
.pickup-line,.search-box{display:flex;align-items:center;gap:12px}
.pickup-line{color:var(--dim);font-size:15px;margin-bottom:10px}
.search-box{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:2px 16px;margin-bottom:10px}
.pin{width:11px;height:11px;flex:0 0 auto;border-radius:50%}
.pin-dot{background:var(--gold);box-shadow:0 0 0 3px rgba(232,184,75,.2)}
.pin-sq{border-radius:3px;background:var(--saffron)}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-row{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.saved-chip{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:10px 16px;font-size:15px;cursor:pointer;color:var(--ink)}
.saved-chip.add{color:var(--dim);border-style:dashed}
.results{display:flex;flex-direction:column}
.res{display:flex;flex-direction:column;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.res b{font-size:17px}.res small{color:var(--dim);font-size:14px;margin-top:2px}
.recent-wrap{margin-top:6px}.recent-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin:8px 0 4px}
.recent{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink)}
.recent .ri{color:var(--dim)}

.route-summary{display:flex;justify-content:space-between;align-items:center;color:var(--dim);font-size:15px;margin-bottom:8px}
.vlist{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.vrow{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;cursor:pointer;background:var(--glass)}
.vrow.sel{border-color:var(--gold);background:rgba(232,184,75,.10)}
.vrow .ve{font-size:26px}.vrow .vt{flex:1}.vrow .vt b{font-size:18px}.vrow .vt small{display:block;color:var(--dim);font-size:14px}
.vrow .vf{font-family:var(--serif);font-weight:700;font-size:19px}
.ride-opts{display:flex;gap:8px;overflow-x:auto;margin-bottom:6px;scrollbar-width:none}.ride-opts::-webkit-scrollbar{display:none}
.opt-chip{flex:0 0 auto;background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:11px 16px;font-family:var(--body);font-size:15px;color:var(--ink);cursor:pointer}
.opt-chip.on{border-color:var(--gold);color:var(--gold)}

.finding{text-align:center;padding:18px 0}.finding b{display:block;font-size:19px;margin:14px 0 4px}.finding small{color:var(--dim)}
.pulse{width:54px;height:54px;border-radius:50%;margin:0 auto;background:radial-gradient(circle,var(--gold),transparent 70%);animation:pulse 1.3s infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.5}50%{transform:scale(1.1);opacity:1}100%{transform:scale(.7);opacity:.5}}
.trip-status{font-family:var(--serif);font-weight:700;font-size:22px;margin-bottom:14px}
.driver-card{display:flex;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px}
.dav{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--saffron));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:22px}
.dinfo{flex:1}.dinfo b{font-size:18px}.dinfo small{display:block;color:var(--dim);font-size:14px;margin-top:2px}
.dplate{font-family:var(--mono);font-size:13px;background:#11121b;border:1px solid var(--line);padding:6px 10px;border-radius:8px}
.contact-row{display:flex;gap:8px;margin-top:12px}
.contact-btn{flex:1;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px 12px;color:var(--ink);font-family:var(--body);font-size:15px;cursor:pointer}
.contact-btn.sos{color:var(--bad);border-color:rgba(255,107,107,.35)}
.clean-badge{margin:12px 0;font-size:14px;color:var(--ok);background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.25);padding:10px 12px;border-radius:12px}
.trip-actions{display:flex;gap:10px}.trip-actions .btn{margin-top:0}
.done-fare{font-family:var(--serif);font-weight:700;font-size:54px;text-align:center}
.done-sub{text-align:center;color:var(--dim);margin:6px 0 16px}
.rate{text-align:center;font-size:34px;color:#3a3a44;letter-spacing:6px}.rate .on{color:var(--gold)}
.paybox{display:flex;gap:14px;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px;margin:14px 0}
.qrbox{width:98px;height:98px;flex:0 0 auto;background:#f4f1e9;border-radius:12px;padding:7px}.qrbox svg{display:block;width:100%;height:100%}
.payinfo{display:flex;flex-direction:column;gap:3px}.payinfo b{font-size:16px}.payinfo small{color:var(--dim);font-size:13px}.payinfo .dim2{color:#6e6a78;font-size:12px}
.tip-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:14px;color:var(--dim)}
.tips{display:flex;gap:6px}.tips button{background:var(--glass);border:1px solid var(--line);color:var(--ink);border-radius:30px;padding:10px 14px;font-family:var(--body);font-size:15px;cursor:pointer}
.tips button.on{border-color:var(--gold);color:var(--gold)}

/* DRIVER */
.dtop{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--safe-t)) 20px 14px;border-bottom:1px solid var(--line)}
.online-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}.online-toggle input{display:none}
.slider{width:46px;height:26px;border-radius:20px;background:#23242e;position:relative;transition:.2s}
.slider::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.online-toggle input:checked + .slider{background:var(--ok)}.online-toggle input:checked + .slider::after{left:23px}
.online-toggle em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--dim)}
.driver-body{flex:1;overflow:auto;padding:18px 20px calc(80px + var(--safe-b))}
.earn-card{display:flex;justify-content:space-between;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:18px}
.earn-card small{display:block;color:var(--dim);font-size:12px;font-family:var(--mono);letter-spacing:.06em}
.earn-card b{font-family:var(--serif);font-weight:700;font-size:24px}
.target{margin-top:14px}.target-top{display:flex;justify-content:space-between;color:var(--dim);font-size:13px;margin-bottom:6px}
.bar{height:8px;border-radius:8px;background:#1a1b24;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--saffron));transition:width .5s}
.target-msg{display:block;color:var(--dim);font-size:12px;margin-top:6px}
.mini-card{display:flex;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:12px}
.mini-card .mc-emoji{font-size:24px}.mini-card .mc-txt b{font-size:16px}.mini-card .mc-txt small{display:block;color:var(--dim);font-size:14px;margin-top:2px}
.mini-card.quest{border-color:rgba(232,184,75,.3)}.mini-card.demand{border-color:rgba(232,101,10,.3)}
.clean-chip{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;font-size:15px;border:1px solid var(--line)}
.clean-chip.ok{background:rgba(62,207,142,.08);border-color:rgba(62,207,142,.25)}
.clean-chip.due{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.35);color:#ffb0b0}
.cc-dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}.clean-chip.due .cc-dot{background:var(--bad)}
.clean-history{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.clean-history .ch{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);font-family:var(--mono)}
.sub-card{margin-top:16px;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:18px}
.sub-head b{font-family:var(--serif);font-weight:700;font-size:20px}.sub-head small{display:block;color:var(--dim);font-size:15px;margin-top:4px}
.plan-row{display:flex;gap:8px;overflow-x:auto;padding:16px 0 6px;scrollbar-width:none}.plan-row::-webkit-scrollbar{display:none}
.plan{flex:0 0 auto;min-width:96px;text-align:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;background:#0e0f17}
.plan.sel{border-color:var(--gold);background:rgba(232,184,75,.1)}
.plan .pn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.plan .pp{font-family:var(--serif);font-weight:700;font-size:20px;margin-top:4px}.plan .pd{font-size:11px;color:var(--dim);margin-top:2px}
.savings{color:var(--dim);font-size:14px;margin-top:12px}
.sub-card.pro{border-color:rgba(62,207,142,.4);background:rgba(62,207,142,.07)}
.hint{text-align:center;color:var(--dim);font-size:16px;margin-top:24px}

/* modals */
.modal{position:fixed;inset:0;z-index:900;background:rgba(3,3,6,.72);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
.modal-card{width:100%;max-width:460px;background:linear-gradient(180deg,var(--void2),var(--void));border-top-left-radius:26px;border-top-right-radius:26px;border:1px solid var(--line);padding:24px 22px calc(24px + var(--safe-b));max-height:92vh;overflow:auto}
.req-ring{position:relative;width:54px;height:54px;margin:0 auto}.req-ring svg{transform:rotate(-90deg)}
.req-ring circle{fill:none;stroke:var(--gold);stroke-width:4;stroke-dasharray:126;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.req-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px}
.req-fare{font-family:var(--serif);font-weight:700;font-size:42px;text-align:center;margin:10px 0}
.req-route div{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:15px}
.req-meta{text-align:center;color:var(--dim);font-size:14px;margin:10px 0 4px}
.req-actions{display:flex;gap:10px}.req-actions .btn{margin-top:8px}
.modal-card.clean h3{font-family:var(--serif);font-weight:700;font-size:22px;margin:0 0 6px}
.modal-card.clean p{color:var(--dim);font-size:16px;margin:0 0 14px}
.cam-wrap{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
#cam,#shot{width:100%;height:100%;object-fit:cover}
.cam-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dim);font-size:14px;padding:20px}
.clean-thumbs{display:flex;gap:8px;margin:12px 0 4px;min-height:4px}.clean-thumbs img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.clean-thumbs .ph{width:64px;height:48px;border-radius:8px;border:1px solid var(--line);background:#1a1b24;display:flex;align-items:center;justify-content:center;font-size:20px}
.clean-result{text-align:center;padding:14px;border-radius:14px;font-size:15px;margin-top:6px}
.clean-result.pass{background:rgba(62,207,142,.12);color:var(--ok)}.clean-result.fail{background:rgba(255,107,107,.12);color:var(--bad)}
.fab-back{position:absolute;left:16px;bottom:calc(16px + var(--safe-b));z-index:50;background:rgba(5,5,8,.8);border:1px solid var(--line);color:var(--dim);padding:10px 16px;border-radius:30px;font-family:var(--body);cursor:pointer}

/* slide-over overlay (menu/history/safety) */
.overlay{position:fixed;inset:0;z-index:950;background:rgba(3,3,6,.72);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
.over-card{width:100%;max-width:460px;background:linear-gradient(180deg,var(--void2),var(--void));border-top-left-radius:26px;border-top-right-radius:26px;border:1px solid var(--line);padding:22px 22px calc(22px + var(--safe-b));max-height:88vh;overflow:auto}
.over-card h3{font-family:var(--serif);font-weight:700;font-size:22px;margin:0 0 14px}
.over-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink)}
.over-row .oe{font-size:22px;width:28px;text-align:center}.over-row b{font-size:17px}.over-row small{display:block;color:var(--dim);font-size:14px}
.over-row.danger b{color:var(--bad)}
.hist-item{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.hist-item .hl small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.hist-item .hf{font-family:var(--serif);font-weight:700}
.empty{color:var(--dim);text-align:center;padding:30px 0;font-size:16px}

.toast{position:fixed;left:50%;bottom:calc(30px + var(--safe-b));transform:translateX(-50%) translateY(20px);background:#15161f;border:1px solid var(--line);color:var(--ink);padding:13px 20px;border-radius:30px;font-size:16px;opacity:0;pointer-events:none;transition:.25s;z-index:1100;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}
.leaflet-container{background:#0c0d14}
.leaflet-control-attribution{background:rgba(5,5,8,.6)!important;color:#666!important}.leaflet-control-attribution a{color:#888!important}
.car-marker{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}