:root{
  --ink:#0b1f2a; --ink-2:#13303d; --slate:#64748b; --slate-2:#94a3b8;
  --line:#e2e8f0; --paper:#f1f5f9; --paper-2:#f8fafc; --white:#fff;
  --cyan:#0891b2; --cyan-soft:#cffafe; --cyan-ink:#0e7490;
  --teal:#0d9488; --teal-soft:#ccfbf1;
  --amber:#d97706; --amber-soft:#fef3c7;
  --emerald:#059669; --emerald-soft:#d1fae5;
  --rose:#e11d48; --rose-soft:#ffe4e6;
  --sky:#0284c7; --sky-soft:#e0f2fe;
  --r:14px; --shadow:0 1px 2px rgba(11,31,42,.06),0 8px 24px rgba(11,31,42,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit}
.hidden{display:none!important}

/* ---------- login ---------- */
#login{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 70% -10%,#155e75 0%,var(--ink) 55%)}
.login-card{width:340px;background:var(--white);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand .logo{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#22d3ee,#0d9488);color:#fff}
.brand h1{font-size:18px;font-weight:700}
.brand small{color:var(--slate-2);font-size:11px;display:block}
.field{margin-bottom:12px}
.field label{font-size:12px;font-weight:600;color:var(--slate);display:block;margin-bottom:5px}
.field input{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--paper-2)}
.field input:focus{outline:2px solid var(--cyan-soft);border-color:var(--cyan)}
.login-err{color:var(--rose);font-size:13px;margin:6px 0;min-height:18px}
.hint{margin-top:14px;font-size:11px;color:var(--slate-2);line-height:1.7}
.hint code{background:var(--paper);padding:1px 5px;border-radius:5px;color:var(--ink-2)}

/* ---------- buttons / pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 14px;border-radius:12px;font-size:14px;font-weight:600;transition:.15s}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.cyan{background:var(--cyan);color:#fff} .btn.cyan:hover{background:var(--cyan-ink)}
.btn.emerald{background:var(--emerald);color:#fff} .btn.emerald:hover{filter:brightness(.95)}
.btn.slate{background:var(--paper);color:var(--ink-2)} .btn.slate:hover{background:var(--line)}
.btn.rose{background:var(--rose-soft);color:var(--rose)} .btn.rose:hover{filter:brightness(.97)}
.btn.full{width:100%}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:10px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:600;border:1px solid}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid}
.t-amber{background:var(--amber-soft);color:var(--amber);border-color:#fde68a}
.t-sky{background:var(--sky-soft);color:var(--sky);border-color:#bae6fd}
.t-cyan{background:var(--cyan-soft);color:var(--cyan-ink);border-color:#a5f3fc}
.t-emerald{background:var(--emerald-soft);color:var(--emerald);border-color:#a7f3d0}
.t-rose{background:var(--rose-soft);color:var(--rose);border-color:#fecdd3}
.t-teal{background:var(--teal-soft);color:var(--teal);border-color:#99f6e4}
.t-slate{background:var(--paper);color:var(--slate);border-color:var(--line)}

/* ---------- top bar ---------- */
#app{min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;background:var(--white);border-bottom:1px solid var(--line)}
.topbar .brand h1{font-size:16px}
.who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--slate)}
.who b{color:var(--ink)}

/* ---------- admin shell ---------- */
.shell{display:flex;min-height:calc(100vh - 57px)}
.side{width:210px;background:var(--ink);padding:14px 12px;flex-shrink:0}
.side .nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.side .nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  color:#94a3b8;font-size:14px;text-align:left;width:100%}
.side .nav button:hover{background:#13303d;color:#cbd5e1}
.side .nav button.on{background:rgba(34,211,238,.14);color:#67e8f9}
.main{flex:1;padding:22px;overflow:auto}
h2.page{font-size:18px;font-weight:700}
.sub{color:var(--slate-2);font-size:13px;margin-top:2px}

.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g3,.g4{grid-template-columns:1fr 1fr}}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.card.p{padding:16px}
.stat .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-2);font-weight:600}
.stat .val{font-size:24px;font-weight:700;margin-top:4px}
.stat .s{font-size:11px;color:var(--slate-2);margin-top:2px}
.stat .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;float:right}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--slate-2);padding:10px 14px;background:var(--paper-2)}
tbody td{padding:10px 14px;border-top:1px solid var(--paper)}
tbody tr:hover{background:var(--paper-2)}
.muted{color:var(--slate)}

.bar{height:8px;border-radius:999px;background:var(--paper);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:999px}
.gauge{width:18px;height:34px;border-radius:3px 3px 6px 6px;background:var(--paper);
  border:1px solid var(--line);position:relative;overflow:hidden;flex-shrink:0}
.gauge>span{position:absolute;bottom:0;left:0;right:0}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--white);color:var(--slate)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- phone (driver/customer) ---------- */
.phone-wrap{display:flex;flex-direction:column;align-items:center;padding:22px;gap:10px}
.phone-wrap .lead{max-width:420px;text-align:center;color:var(--slate-2);font-size:13px}
.phone{width:360px;max-width:94vw;background:#fff;border:1px solid var(--line);border-radius:26px;
  overflow:hidden;box-shadow:var(--shadow);min-height:660px;display:flex;flex-direction:column}
.phead{padding:26px 18px 16px;color:#fff}
.phead.cust{background:linear-gradient(135deg,#0891b2,#0d9488)}
.phead.drv{background:var(--ink)}
.phead .hi{font-size:11px;opacity:.8} .phead .nm{font-size:18px;font-weight:700}
.pbody{flex:1;overflow:auto;padding:16px}
.tabbar{display:flex;border-top:1px solid var(--line);background:#fff}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0;font-size:11px;color:var(--slate-2)}
.tabbar button.on{color:var(--cyan)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px}
.steps{display:flex;align-items:center;margin-top:12px}
.steps .dot{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:10px;background:var(--paper);color:var(--slate-2)}
.steps .dot.on{background:var(--cyan);color:#fff}
.steps .ln{flex:1;height:2px;background:var(--paper)}.steps .ln.on{background:var(--cyan)}
.prod{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px;
  border-radius:14px;border:1px solid var(--line);background:#fff;margin-bottom:8px;text-align:left}
.prod.on{border-color:var(--cyan);background:var(--cyan-soft)}
.prod .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--paper)}
.prod.on .ic{background:#a5f3fc}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:28px;height:28px;border-radius:9px;background:var(--paper);font-size:16px;display:grid;place-items:center}
.toggle{width:44px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:.15s}
.toggle.on{background:var(--emerald)}
.toggle>i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:#fff;transition:.15s}
.toggle.on>i{left:22px}
.note{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:12px;font-size:12px;margin-top:8px}
.modal-bg{position:fixed;inset:0;background:rgba(11,31,42,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal{width:100%;max-width:420px;background:#fff;border-radius:18px;padding:20px}
.row{display:flex;align-items:center;justify-content:space-between}
.mini{font-size:12px;color:var(--slate)}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.i.lg{width:20px;height:20px}
.geo-box{margin-top:6px;display:flex;flex-direction:column;gap:4px;max-height:190px;overflow:auto}
.geo-item{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--paper-2);font-size:13px;color:var(--ink-2);line-height:1.35}
.geo-item:hover{background:var(--cyan-soft);border-color:var(--cyan)}
.geo-empty{font-size:12px;color:var(--slate-2);padding:4px 2px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--slate-2)}.kv dd{color:var(--ink);font-weight:500}