/* Namma Payaṇa — "Canopy & Marigold" (vibrant, sidebar edition) */
:root {
  --canopy: #0f3b2c; --canopy-2: #12472f; --leaf: #1f7a4d; --leaf-soft: #e7f2ec;
  --marigold: #f7941d; --marigold-2: #ff7a00; --marigold-deep: #d97706;
  --mist: #eef2ee; --card: #ffffff; --ink: #17231d; --ink-soft: #66756c; --line: #e2e8e2;
  --alert: #e0492c; --alert-deep: #b5341c; --ok: #1f9d57; --info: #2f80ed; --violet:#7b61ff;
  --radius: 16px; --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15,59,44,.05), 0 8px 24px rgba(15,59,44,.06);
  --shadow-lg: 0 12px 40px rgba(15,59,44,.14);
  --side-w: 248px; --side-collapsed: 76px;
  --font-display: 'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;
  --font-mono: 'IBM Plex Mono',ui-monospace,monospace;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: var(--font-body); background: var(--mist); color: var(--ink);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: var(--leaf); }
code { font-family: var(--font-mono); font-size: .85em; }
svg { display: block; }

/* ============ APP LAYOUT (sidebar + content) ============ */
.app { display: flex; min-height: 100dvh; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- Sidebar (hover to expand) ---- */
.sidebar { width: var(--side-collapsed); flex: none; background: linear-gradient(180deg,var(--canopy),var(--canopy-2));
  color: #fff; position: sticky; top: 0; height: 100dvh; z-index: 50;
  display: flex; flex-direction: column; padding: 14px 12px; gap: 8px;
  transition: width .22s cubic-bezier(.4,0,.2,1); overflow: hidden; }
.side-brand { flex: none; }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.side-user { flex: none; margin-top: auto; }
.sidebar:hover, .sidebar:focus-within { width: var(--side-w); box-shadow: var(--shadow-lg); }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; white-space: nowrap; }
.side-brand .mark { width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--marigold); display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; color: #3a2400; font-size: 20px; }
.side-brand .txt { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em;
  opacity: 0; transition: opacity .2s; }
.sidebar:hover .side-brand .txt, .sidebar:focus-within .side-brand .txt { opacity: 1; }

.side-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; flex: 1; }
.side-nav a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px;
  color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.side-nav a svg { width: 22px; height: 22px; flex: none; }
.side-nav a span { opacity: 0; transition: opacity .2s; }
.sidebar:hover .side-nav a span, .sidebar:focus-within .side-nav a span { opacity: 1; }
.side-nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.side-nav a.active { background: var(--marigold); color: #3a2400; box-shadow: 0 6px 16px rgba(247,148,29,.35); }

.side-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid rgba(255,255,255,.12);
  white-space: nowrap; }
.side-user .who { opacity: 0; transition: opacity .2s; min-width: 0; }
.sidebar:hover .side-user .who, .sidebar:focus-within .side-user .who { opacity: 1; }
.side-user .who b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.side-user form { margin-left: auto; opacity: 0; transition: opacity .2s; }
.sidebar:hover .side-user form, .sidebar:focus-within .side-user form { opacity: 1; }
.side-user button { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 9px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.side-user button:hover { background: rgba(255,255,255,.24); }

.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff; }

/* ---- Topbar ---- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--canopy);
  display: flex; align-items: center; gap: 14px; padding: 12px 20px; color: #fff; }
.topbar .menu-toggle { display: none; background: rgba(255,255,255,.14); border: 0; color: #fff;
  width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; }
.topbar .search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border-radius: 12px; padding: 9px 14px; color: rgba(255,255,255,.9); }
.topbar .search input { flex: 1; background: transparent; border: 0; color: #fff; outline: none; }
.topbar .search input::placeholder { color: rgba(255,255,255,.6); }
.topbar .spacer { flex: 1; }
.topbar .date { font-size: 13px; opacity: .9; white-space: nowrap; }
.topbar .bell { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.12);
  display: grid; place-items: center; position: relative; }
.topbar .bell::after { content: ''; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--marigold); }

.main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px 20px 40px; }
.credit { text-align: center; font-size: 12px; color: var(--ink-soft); padding: 8px 0 20px; }

/* ============ Bare layout (login/register/pending) ============ */
.bare { min-height: 100dvh; display: flex; flex-direction: column; }
.bare .bare-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.bare .credit { padding: 16px; }

/* ============ Type ============ */
h1,h2,h3 { font-family: var(--font-display); letter-spacing: -.02em; }
h1 { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
h2 { font-size: 19px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 700; }
.sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }
.center { text-align: center; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); margin-bottom: 6px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* ============ Cards ============ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
a.card { display: block; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; }
a.ridecard:hover { border-color: var(--leaf); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid2 > * { margin-bottom: 0; }

/* Route signature */
.route { display: grid; grid-template-columns: 14px 1fr; gap: 0 10px; }
.route .rail { display: flex; flex-direction: column; align-items: center; padding-top: 5px; }
.route .rail .o { width: 10px; height: 10px; border-radius: 50%; background: var(--marigold); flex: none; }
.route .rail .dash { flex: 1; width: 0; min-height: 16px; margin: 3px 0; border-left: 2px dashed var(--leaf); }
.route .rail .d { width: 10px; height: 10px; flex: none; background: var(--canopy);
  clip-path: polygon(50% 100%, 0 35%, 25% 0, 75% 0, 100% 35%); }
.route .pts { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.route .pts b { font-weight: 600; font-size: 15px; }
.route .pts .via { color: var(--ink-soft); font-size: 12.5px; }

.ride-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ride-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; color: var(--ink-soft); font-size: 13px; align-items: center; }
.ride-meta .fare { font-family: var(--font-mono); font-weight: 600; color: var(--canopy); font-size: 15px; }
.rating { color: var(--marigold-deep); font-weight: 700; font-size: 13px; }
.plate { font-family: var(--font-mono); font-size: 12px; font-weight: 600; border: 1.5px solid var(--ink);
  border-radius: 5px; padding: 1px 7px; background: #fff; letter-spacing: .04em; color: var(--ink); }
.chip { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--leaf-soft); color: var(--leaf); }
.chip.women { background: #fbe9f1; color: #b2306d; }
.chip.warn { background: #fdf1dc; color: var(--marigold-deep); }
.chip.alert { background: #fbe5e0; color: var(--alert-deep); }
.chip.ok { background: #e2f2e8; color: var(--ok); }

/* ============ Dashboard ============ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px; }
.kpi .ico { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; }
.kpi .ico svg { width: 24px; height: 24px; }
.kpi .ico.green { background: linear-gradient(135deg,var(--leaf),#0f6b41); }
.kpi .ico.orange { background: linear-gradient(135deg,var(--marigold),var(--marigold-2)); }
.kpi .ico.violet { background: linear-gradient(135deg,#8b74ff,#6a4bff); }
.kpi .ico.blue { background: linear-gradient(135deg,#4a9bf5,#2f80ed); }
.kpi .ico.red  { background: linear-gradient(135deg,#f06a4d,var(--alert)); }
.kpi b { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--ink); display: block; line-height: 1.1; }
.kpi span { font-size: 12.5px; color: var(--ink-soft); }

.chart-card h2 { display: flex; justify-content: space-between; align-items: center; }
.chart-wrap { width: 100%; overflow: hidden; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }

.mini-list .row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.mini-list .row:first-child { border-top: 0; }
.mini-list .row .grow { flex: 1; min-width: 0; }
.mini-list .row b { font-size: 14px; }
.mini-list .row .muted { font-size: 12px; color: var(--ink-soft); }

/* ============ Forms ============ */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field.checkbox label { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.field.checkbox input { width: auto; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
button:focus-visible, a:focus-visible, .otp-input:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
.hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: end; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline-form input, .inline-form select { flex: 1; min-width: 120px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.list-row { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.passenger { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  padding: 11px 18px; font-weight: 700; font-size: 14px; background: var(--canopy); color: #fff; transition: background .15s, transform .1s; text-decoration: none; }
.btn:hover { background: var(--leaf); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.gold { background: var(--marigold); color: #3a2a00; }
.btn.gold:hover { background: var(--marigold-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--canopy); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--leaf-soft); color: var(--canopy); }
.btn.danger { background: var(--alert); } .btn.danger:hover { background: var(--alert-deep); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.block { width: 100%; }
.otp-input { width: 130px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--font-mono); letter-spacing: .1em; }

.notice { border-radius: 12px; padding: 11px 15px; font-size: 13.5px; margin-bottom: 16px; }
.notice.err { background: #fbe5e0; color: var(--alert-deep); }
.notice.ok { background: #e2f2e8; color: var(--ok); }

/* ============ Profile ============ */
.profile-hero { display: flex; align-items: center; gap: 18px; }
.profile-hero .avatar { width: 76px; height: 76px; font-size: 26px; }
.profile-hero h1 { margin: 0; }
.profile-hero .role-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 16px 24px; }
.kv .k { font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
.kv .v { font-weight: 600; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.kv > div { min-width: 0; }
.editable[hidden] { display: none; }

/* ============ Tables ============ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--ink-soft); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }

.otp-big { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: .28em;
  color: var(--canopy); background: var(--leaf-soft); border-radius: 12px; padding: 12px 6px 12px 18px; text-align: center; margin: 10px 0; }
.empty { text-align: center; color: var(--ink-soft); padding: 32px 12px; }
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters input, .filters select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.filters input[type="search"] { flex: 1; min-width: 160px; }
.segmented { display: flex; background: var(--leaf-soft); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.segmented a, .segmented button { flex: 1; border: 0; background: transparent; padding: 9px; font-weight: 700; border-radius: 9px; color: var(--leaf); text-align: center; text-decoration: none; }
.segmented a.on, .segmented button.on { background: var(--card); color: var(--canopy); box-shadow: var(--shadow); }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ============ Auth ============ */
.auth-wrap { width: 100%; max-width: 460px; }
.auth-hero { background: linear-gradient(140deg,var(--canopy),var(--leaf)); color: #fff; border-radius: 20px; padding: 30px 24px; margin-bottom: 18px; overflow: hidden; position: relative; }
.auth-hero h1 { font-size: 32px; color: #fff; }
.auth-hero .kn { color: var(--marigold); }
.auth-hero p { opacity: .9; font-size: 14px; margin-top: 8px; max-width: 42ch; }
.auth-hero svg.bg { position: absolute; right: -20px; bottom: -14px; opacity: .25; }

/* ============ SOS ============ */
.sos-fab { position: fixed; right: 20px; bottom: 24px; z-index: 60; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e85a3f, var(--alert) 65%); color: #fff; border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(224,73,44,.5); font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: .04em; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: none; }
.sos-fab .ring { position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(var(--marigold) calc(var(--p,0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); }
.sos-sheet { position: fixed; inset: 0; z-index: 70; background: rgba(15,35,28,.55); display: flex; align-items: flex-end; justify-content: center; }
.sos-sheet[hidden] { display: none; }
.sos-sheet .panel { background: var(--card); border-radius: 20px 20px 0 0; width: 100%; max-width: 560px; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
.sos-sheet h2 { color: var(--alert-deep); }
.sos-actions { display: grid; gap: 10px; margin-top: 14px; }
.sos-actions a { text-decoration: none; }
.sos-item { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.sos-item:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* ============ Mobile bottom bar ============ */
.tabbar { display: none; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .topbar .menu-toggle { display: none; }
  .main { padding-bottom: 108px; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; background: var(--card);
    border-top: 1px solid var(--line); justify-content: space-between; gap: 2px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a { text-decoration: none; color: var(--ink-soft); font-size: 10.5px; font-weight: 600; display: flex;
    flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px; flex: 1 0 auto;
    min-width: 60px; white-space: nowrap; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--canopy); background: var(--leaf-soft); }
  .grid2 { grid-template-columns: 1fr; }
  .topbar .search { display: none; }
  .topbar .date { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============ Live map ============ */
.map { width: 100%; height: 260px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--leaf-soft); z-index: 0; }
.map.map-lg { height: 420px; }
.leaflet-container { border-radius: 12px; font: inherit; }

/* ============ Chat ============ */
.chat-thread { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 6px 2px; margin-bottom: 12px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.msg .who { font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.msg .at { font-size: 10px; opacity: .55; margin-top: 3px; text-align: right; }
.msg.them { align-self: flex-start; background: var(--leaf-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--canopy); color: #fff; border-bottom-right-radius: 4px; }
.msg.me .who { color: rgba(255,255,255,.75); }
.chat-compose { display: flex; gap: 8px; align-items: center; }
.chat-compose input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.chat-compose .btn { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none; }

/* ============ Responsive tables ============ */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .tbl { min-width: 520px; }

@media (max-width: 700px) {
  .main { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 22px; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .kpi b { font-size: 21px; }
  .profile-hero { flex-direction: column; text-align: center; align-items: center; }
  .profile-hero .role-chip { justify-content: center; }
  .kv { grid-template-columns: 1fr 1fr; }
  .page-head { align-items: flex-start; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input, .inline-form select, .inline-form .btn { width: 100%; }
  .map { height: 220px; } .map.map-lg { height: 300px; }
  .msg { max-width: 88%; }
}
@media (max-width: 420px) {
  .kv { grid-template-columns: 1fr; }
}

/* ============ RiDE Pilot ============ */
.pilot-thread { min-height: 260px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 10px; padding: 8px 2px; margin-bottom: 12px; }
.pilot .msg { max-width: 82%; }
.pilot .msg.typing { opacity: .6; font-style: italic; }
.pilot .msg.err-msg { background: #fbe5e0; color: var(--alert-deep); }
.pilot-suggests { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip-btn { border: 1px solid var(--line); background: var(--leaf-soft); color: var(--canopy); font-weight: 600;
  font-size: 12.5px; border-radius: 999px; padding: 7px 14px; }
.chip-btn:hover { background: #d6ecdf; }
details summary::-webkit-details-marker { color: var(--leaf); }

/* ============ Payments / UPI ============ */
.pay-card { border-top: 1px solid var(--line); padding-top: 14px; }
.pay-opt { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font-weight: 600; cursor: pointer; }
.pay-opt input { width: auto; }
.pay-opt:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); }
.qr-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.qr-wrap canvas { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 8px; }

/* ============ Star picker + reviews ============ */
.star-pick { display: flex; gap: 4px; font-size: 30px; line-height: 1; margin-bottom: 10px; }
.star-pick .star { border: 0; background: none; color: #d9e2dc; padding: 0; cursor: pointer; transition: color .1s; }
.star-pick .star.on { color: var(--marigold); }
.stars-static { color: var(--marigold); letter-spacing: 2px; }
.review { border-top: 1px solid var(--line); padding: 12px 0; }
.review:first-of-type { border-top: 0; }

/* ============ Completed archive ============ */
.archive-group { margin-bottom: 18px; }
.archive-head { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--canopy); }
.segmented a { display: block; }

/* ============ v6 — media, route match, auto match, recurring ============ */

/* Map picker */
.map-pick { height: 280px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); z-index: 0; }
.map-pick-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.map-pick-controls .btn.active { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.leaflet-div-icon.pin, .pin { background: var(--leaf); color: #fff; border-radius: 50% 50% 50% 2px; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); width: 26px; height: 26px; }
.pin.pin-d { background: var(--alert); }

/* Route search card */
.route-search .row2 { margin-top: 12px; }

/* Match badge on ride cards */
.match-badge { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05;
  padding: 4px 10px; border-radius: 10px; font-weight: 800; font-size: 15px; background: var(--leaf-soft); color: var(--leaf); }
.match-badge small { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.match-badge.full { background: #e4f7ec; color: #0f9d58; }
.match-badge.good { background: #eaf3ff; color: var(--info); }
.match-badge.low  { background: #fdf0e6; color: var(--marigold-deep); }
.mini-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); vertical-align: middle; }

/* Profile photo */
.avatar-wrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.avatar.photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; cursor: zoom-in; }
.photo-edit { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--leaf); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid #fff; box-shadow: var(--shadow); }
.photo-edit:hover { background: var(--canopy); }

/* Documents */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.doc-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: #fbfdfb; }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.doc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.doc-upload { display: flex; gap: 8px; align-items: center; }
.doc-upload input[type=text], .doc-upload input:not([type]) { flex: 1; min-width: 0; }
.file-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: var(--leaf-soft); color: var(--leaf); font-weight: 700; font-size: 13px; white-space: nowrap; border: 1px solid transparent; }
.file-btn:hover { border-color: var(--leaf); }

/* Vehicle photo strip */
.vehicle-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb { position: relative; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.thumb-del { position: absolute; top: 2px; right: 2px; margin: 0; }
.thumb-del button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.add-thumb { display: flex; align-items: center; justify-content: center; border-style: dashed; }
.add-thumb label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; color: var(--leaf); font-weight: 700; font-size: 13px; }

/* Lightbox */
.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; background: rgba(10,20,15,.86); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: var(--shadow-lg); }

/* Auto Match */
.am-hero { background: linear-gradient(135deg, var(--leaf) 0%, var(--canopy) 100%); color: #fff; border-radius: var(--radius);
  padding: 20px 22px; display: flex; align-items: center; gap: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.am-hero-body { flex: 1; }
.am-hero-body h2 { margin: 0 0 6px; color: #fff; }
.am-hero-body p { margin: 0 0 10px; opacity: .92; font-size: 14px; }
.am-hero-body ul { margin: 0; padding-left: 18px; font-size: 13.5px; opacity: .95; }
.am-hero-body li { margin: 3px 0; }
.switch { position: relative; display: inline-block; width: 58px; height: 32px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: rgba(255,255,255,.35); border-radius: 999px; transition: .2s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; height: 26px; width: 26px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--marigold); }
.switch input:checked + .slider::before { transform: translateX(26px); }
.am-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 10px; }
.am-audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.am-opt { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; font-weight: 600; background: #fff; transition: .15s; }
.am-opt:hover { border-color: var(--leaf); }
.am-opt.on { border-color: var(--info); background: #eef5ff; color: var(--info); box-shadow: 0 0 0 3px rgba(47,128,237,.12); }
.am-ico { font-size: 16px; }
.am-peers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.peer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.peer-chip input { accent-color: var(--leaf); }
.peer-chip.fav { border-color: var(--alert); color: var(--alert-deep); background: #fdeeea; }
input[type=range] { width: 100%; accent-color: var(--leaf); }

/* Recurring */
.recur-box { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px; background: #fbfdfb; }
.day-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.day-chip { position: relative; }
.day-chip input { position: absolute; opacity: 0; }
.day-chip span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line); font-weight: 700; cursor: pointer; user-select: none; }
.day-chip input:checked + span { background: var(--leaf); color: #fff; border-color: var(--leaf); }

/* ============ v7 — notifications, integrations, map settings ============ */
.notif-bell { position: fixed; top: 14px; right: 16px; z-index: 1200; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; }
.notif-bell svg { width: 20px; height: 20px; }
.notif-bell:hover { border-color: var(--leaf); color: var(--leaf); }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--alert); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.notif-panel { position: fixed; top: 62px; right: 16px; z-index: 1200; width: min(340px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; }
.notif-item { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--leaf-soft); }
.notif-item b { display: block; font-size: 14px; }
.notif-item span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.notif-item.unseen { background: #f0f7f2; }
.notif-item.unseen b::before { content: "●"; color: var(--leaf); font-size: 10px; margin-right: 6px; vertical-align: middle; }
.notif-empty { padding: 18px; text-align: center; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 700px) { .notif-bell { top: auto; bottom: 76px; } .notif-panel { top: auto; bottom: 124px; } }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.feat { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.feat input { margin-top: 3px; accent-color: var(--leaf); }
.feat small { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.reco { margin: 0; padding-left: 18px; }
.reco li { margin: 6px 0; font-size: 14px; }

/* ============ payouts / earnings stats ============ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.stat-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-value { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--canopy); margin: 4px 0 2px; }
.btn.sm { padding: 5px 12px; font-size: 13px; }

/* ============ v8 — Record & Replay ============ */
.rec-chip{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#e5533c;letter-spacing:.06em;
  vertical-align:middle;margin-left:8px;animation:recblink 1.6s steps(2,start) infinite}
@keyframes recblink{50%{opacity:.35}}
.replay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.replay-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.replay-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rc-map{position:relative;height:120px;background:#0e2f22}
.rc-map svg{width:100%;height:100%;display:block}
.rc-badge{position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.35);padding:3px 8px;border-radius:8px}
.rc-badge.ok{color:#F7941D}
.rc-status{position:absolute;right:12px;top:10px}
.rc-body{padding:16px 18px}
.rc-body b{color:var(--canopy);display:block;margin-bottom:2px}
.rc-actions{margin-top:12px;display:flex;gap:8px}
.rc-actions .btn.sm svg{margin-right:2px}
.replay-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line);background:var(--mist)}
.rp-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--canopy);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.rp-btn:hover{background:var(--leaf)}
.rp-seek{flex:1;accent-color:var(--marigold);height:4px}
.rp-time{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);min-width:96px;text-align:right}
.rp-speed{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff;font-family:var(--font-mono);font-size:13px}
.replay-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.replay-stats>div{background:#fff;padding:14px 18px;text-align:center}
.replay-stats .l{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.replay-stats b{font-family:var(--font-display);font-size:20px;color:var(--canopy)}
@media(max-width:600px){.replay-stats{grid-template-columns:repeat(2,1fr)}}

/* ============ v8 — System console ============ */
.systabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px}
.systabs .tab{padding:10px 18px;font-weight:600;font-size:14.5px;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.systabs .tab.on{color:var(--marigold-deep);border-bottom-color:var(--marigold)}
.systabs .tab:hover{color:var(--canopy)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px}
.metric .ml{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.metric .mv{font-family:var(--font-display);font-weight:800;font-size:40px;color:var(--canopy);line-height:1;margin:10px 0}
.metric .mbar{height:6px;border-radius:6px;background:var(--mist);overflow:hidden;margin-bottom:10px}
.metric .mbar i{display:block;height:100%;border-radius:6px;transition:width .5s ease}
.metric .ms{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft)}
.live-line{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin:16px 0;overflow:hidden}
.sys-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.kvrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kvrow:last-child{border-bottom:0}
.kvrow span{color:var(--ink-soft)}
.kvrow b.mono,.kvrow .mono{font-family:var(--font-mono);font-size:12.5px;color:var(--canopy)}
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rec{background:var(--mist);border-radius:10px;padding:12px;text-align:center}
.rec b{display:block;font-family:var(--font-display);font-size:22px;color:var(--canopy)}
.rec span{font-size:11.5px;color:var(--ink-soft)}
.upload-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.upload-row input[type=file]{flex:1;min-width:200px;font-size:13px}
.log{background:#0e2f22;color:#bfe4d0;font-family:var(--font-mono);font-size:12px;line-height:1.7;padding:16px;border-radius:12px;overflow-x:auto;white-space:pre-wrap;margin:0}
@media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,1fr)}.sys-cols{grid-template-columns:1fr}.rec-grid{grid-template-columns:repeat(2,1fr)}}

/* ============ v8 — company & employee cards ============ */
.company-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.co-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--card);transition:transform .2s,box-shadow .2s}
.co-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.co-top{display:flex;align-items:center;gap:12px}
.co-logo{width:46px;height:46px;border-radius:12px;color:#fff;font-family:var(--font-display);font-weight:800;font-size:22px;display:grid;place-items:center;flex:none}
.co-id{flex:1;min-width:0}
.co-id b{display:block;color:var(--canopy);font-size:16px;line-height:1.2}
.co-dom{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.co-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 4px;font-size:12.5px;color:var(--ink-soft)}
.co-stats,.emp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden;margin:14px 0}
.co-stats .cs,.emp-stats>div{background:var(--mist);padding:12px 6px;text-align:center}
.co-stats .cs b,.emp-stats b{display:block;font-family:var(--font-display);font-size:20px;color:var(--canopy)}
.co-stats .cs span,.emp-stats span{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
.co-pending{background:#fff3e0;color:#a15c00;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9px;margin-bottom:12px}
.co-actions,.emp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.co-actions form,.emp-actions form{margin:0}

.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.emp-card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--card);transition:transform .2s,box-shadow .2s}
.emp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.emp-top{display:flex;align-items:center;gap:11px}
.emp-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.emp-av.ph{color:#fff;font-family:var(--font-display);font-weight:800;font-size:18px;display:grid;place-items:center}
.emp-id{flex:1;min-width:0}
.emp-id b{color:var(--canopy);font-size:15px;display:flex;align-items:center;gap:5px}
.emp-id .hint{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verif{color:var(--leaf);font-size:12px}
.emp-flags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:12px}
.flag{padding:3px 9px;border-radius:8px;background:var(--mist);color:var(--ink-soft)}
.flag.on{background:#e4f1e9;color:var(--leaf)}
.flag.off{background:#fdecea;color:#c0392b}
.flag.link{color:var(--canopy)}
.emp-more{position:relative}
.emp-more summary{list-style:none;cursor:pointer}
.emp-more summary::-webkit-details-marker{display:none}
.emp-more-body{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--mist)}
.emp-more-body input{width:100%;margin-bottom:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}

/* ---------------- Security posture page ---------------- */
.sec-score{text-align:right}
.sec-score .big{display:block;font-size:30px;font-weight:800;color:var(--canopy,#0f3b2c);line-height:1}
.sec-score .lbl{font-size:12px;color:#6b7d74;text-transform:uppercase;letter-spacing:.08em}
.sec-note{background:#fff6e6;border:1px solid #f0d9a8;color:#7a5a12;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.sec-card{background:#fff;border:1px solid #e2e9e4;border-radius:14px;padding:18px 18px 16px;border-left:4px solid #2f9e63}
.sec-card.warn{border-left-color:#e0a53a}
.sec-top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.sec-top .dot{width:9px;height:9px;border-radius:50%;background:#2f9e63;flex:none}
.sec-card.warn .sec-top .dot{background:#e0a53a}
.sec-top h3{font-size:15.5px;margin:0;color:#12241c;flex:1}
.sec-card p{margin:0;font-size:13.5px;color:#4c5f56;line-height:1.5}
.pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.green{background:#e4f1e9;color:#1a6b45}
.pill.amber{background:#fbeccd;color:#8a5a12}
.sec-headers{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed #e2e9e4}
.sec-headers li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0;color:#4c5f56}
.sec-headers code{background:#f1f5f2;padding:1px 6px;border-radius:5px;color:#0f3b2c;font-size:12px}
.sec-live{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.sec-live .tile{background:#0f3b2c;color:#fff;border-radius:14px;padding:16px 18px;text-align:center}
.sec-live .tile .n{display:block;font-size:26px;font-weight:800;line-height:1}
.sec-live .tile .l{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.foot-credit{text-align:center;color:#8aa196;font-size:12px;margin-top:26px}
@media(max-width:560px){.sec-live{grid-template-columns:1fr}}

/* ---------------- PWA install banner ---------------- */
.np-install{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;display:flex;align-items:center;gap:12px;
background:#0f3b2c;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);
max-width:520px;margin:0 auto;font-size:14px;line-height:1.4}
.np-install span{flex:1}
.np-install-add{background:#f7941d;color:#3a2500;font-weight:700;border:none;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.np-install-add:hover{background:#ffa733}
.np-install-x{background:transparent;color:#cfe0d7;border:none;font-size:16px;cursor:pointer;padding:4px 6px;line-height:1}
@media(min-width:900px){.np-install{left:auto;right:20px;bottom:20px}}

/* ---------------- Login boarding animation ---------------- */
.auth-scene{margin-top:18px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.auth-scene svg{display:block;width:100%;height:auto}
/* lane dashes scroll left to imply motion */
.np-lane{animation:npLane 1.1s linear infinite}
@keyframes npLane{from{transform:translateX(0)}to{transform:translateX(-60px)}}
/* wheels spin */
.np-wheel{transform-box:fill-box;transform-origin:center;animation:npSpin .9s linear infinite}
/* car: drive in from left, idle while boarding, drive off right, loop */
.np-car{animation:npCar 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes npCar{
  0%{transform:translateX(-140px)}
  22%{transform:translateX(150px)}
  30%{transform:translateX(150px)}
  70%{transform:translateX(150px)}
  92%{transform:translateX(430px)}
  100%{transform:translateX(430px)}
}
/* passenger: appear at right of the stopped car, walk to the door, then board (shrink+fade) */
.np-rider{animation:npRider 9s ease-in-out infinite;opacity:0}
@keyframes npRider{
  0%,30%{transform:translate(250px,0) scale(1);opacity:0}
  34%{opacity:1}
  48%{transform:translate(196px,0) scale(1);opacity:1}
  60%{transform:translate(178px,6px) scale(.5);opacity:0}
  100%{opacity:0}
}
.np-legs{transform-box:fill-box;transform-origin:top center;animation:npWalk .32s ease-in-out infinite alternate}
@keyframes npWalk{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
/* background bike crosses on its own, faster cadence */
.np-bike{animation:npBike 6s linear infinite;opacity:.85}
@keyframes npBike{0%{transform:translateX(-60px)}100%{transform:translateX(400px)}}
/* destination pin gentle drop + pulse */
.np-pin{animation:npPin 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes npPin{0%,100%{transform:translate(300px,52px) translateY(0)}50%{transform:translate(300px,52px) translateY(-6px)}}
.np-win{animation:npFlicker 3s steps(1) infinite}
@keyframes npFlicker{0%,100%{opacity:.55}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){
  .np-lane,.np-wheel,.np-car,.np-rider,.np-legs,.np-bike,.np-pin,.np-win{animation:none}
  .np-rider{opacity:0}
  .np-car{transform:translateX(150px)}
}

/* ---------------- Fleet live map ---------------- */
.fleet-count{text-align:right}
.fleet-count span{display:block;font-size:30px;font-weight:800;color:var(--canopy,#0f3b2c);line-height:1}
.fleet-count small{font-size:11.5px;color:#6b7d74;text-transform:uppercase;letter-spacing:.08em}
.fleet-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:stretch}
.fleet-map{height:66vh;min-height:420px;border-radius:14px;overflow:hidden;border:1px solid #e2e9e4;background:#eef3ef}
.fleet-list{height:66vh;min-height:420px;overflow-y:auto;background:#fff;border:1px solid #e2e9e4;border-radius:14px;padding:8px}
.fleet-empty{color:#6b7d74;font-size:13.5px;padding:18px;line-height:1.5}
.fleet-row{display:flex;gap:10px;align-items:flex-start;padding:11px 10px;border-bottom:1px solid #eef3ef}
.fleet-row:last-child{border-bottom:0}
.fleet-sw{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.fleet-body{min-width:0}
.fleet-route{font-weight:700;font-size:14px;color:#12241c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fleet-meta{font-size:12.5px;color:#4c5f56;margin-top:2px}
.fleet-sub{font-size:11.5px;color:#8aa196;margin-top:2px}
@media(max-width:760px){.fleet-wrap{grid-template-columns:1fr}.fleet-map,.fleet-list{height:auto}.fleet-map{height:52vh}.fleet-list{max-height:340px}}

/* ============ Global overflow guard (fit-to-viewport) ============ */
html, body { overflow-x: hidden; }
.app, .col, .main, .bare, .bare-main { min-width: 0; max-width: 100%; }
img, svg, canvas, video, iframe { max-width: 100%; }
.leaflet-container, .map, .fleet-map { max-width: 100%; }

/* ============ Two-column auth ============ */
.bare-main:has(.auth-2col) { max-width: 1060px; width: 100%; }
.auth-wrap:has(.auth-2col) { max-width: 1060px; width: 100%; }
.auth-2col { display: grid; grid-template-columns: 1.04fr .96fr; background: var(--card);
  border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.auth-left { background: linear-gradient(158deg,var(--canopy),var(--leaf)); color:#fff;
  padding: 36px 34px; display: flex; flex-direction: column; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-brand .mark { width: 44px; height: 44px; border-radius: 13px; background: var(--marigold);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #3a2400; font-size: 22px; }
.auth-brand b { font-family: var(--font-display); font-size: 18px; display: block; letter-spacing: -.02em; }
.auth-brand small { font-size: 11.5px; opacity: .78; letter-spacing: .04em; }
.auth-left h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.12; color: #fff; letter-spacing: -.02em; }
.auth-left h1 .kn { color: var(--marigold); }
.auth-left .lede { opacity: .9; font-size: 14.5px; margin-top: 10px; max-width: 40ch; }
.auth-left .auth-scene { margin: 20px 0; }
.auth-feats { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.auth-feats li { display: flex; gap: 12px; align-items: flex-start; }
.auth-feats .fi { width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: var(--marigold); }
.auth-feats .fi svg { width: 19px; height: 19px; }
.auth-feats b { display: block; font-size: 14px; }
.auth-feats small { font-size: 12.5px; opacity: .82; line-height: 1.45; }
.auth-credit { margin-top: auto; padding-top: 18px; font-size: 11.5px; opacity: .62; }
.auth-right { padding: 34px 32px; display: flex; align-items: center; background: var(--card); }
.auth-right .auth-card { width: 100%; box-shadow: none; border: 0; padding: 0; margin: 0; background: transparent; }

@media (max-width: 860px) {
  .auth-2col { grid-template-columns: 1fr; }
  .auth-left { padding: 26px 22px; }
  .auth-left h1 { font-size: 25px; }
  .auth-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .auth-right { padding: 22px 20px; }
}
@media (max-width: 520px) {
  .auth-feats { grid-template-columns: 1fr; }
  .auth-left .auth-scene { margin: 14px 0; }
}

/* ============ Mobile "More" nav drawer ============ */
.tab-more { background: none; border: 0; color: var(--ink-soft); font-size: 10.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px;
  flex: 1 0 auto; min-width: 60px; }
.tab-more svg { width: 22px; height: 22px; }
.tab-more[aria-expanded="true"] { color: var(--canopy); background: var(--leaf-soft); }
.nav-drawer { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-end; }
.nav-drawer.open { display: flex; }
.nav-drawer-backdrop { position: absolute; inset: 0; background: rgba(10,26,20,.5); }
.nav-drawer-sheet { position: relative; width: 100%; background: var(--card); border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg);
  animation: npSheetUp .22s cubic-bezier(.4,0,.2,1); }
@keyframes npSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nav-drawer-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.nav-drawer-head .who b { display: block; font-size: 14px; }
.nav-drawer-head .who span { font-size: 12px; color: var(--ink-soft); }
.nav-drawer-x { margin-left: auto; background: var(--mist); border: 0; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: var(--ink-soft); }
.nav-drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav-drawer-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
  color: var(--ink); font-size: 11.5px; font-weight: 600; text-align: center; padding: 14px 6px; border-radius: 14px;
  background: var(--mist); }
.nav-drawer-grid a svg { width: 24px; height: 24px; }
.nav-drawer-grid a.active { background: var(--leaf-soft); color: var(--canopy); }
.nav-drawer-out { margin-top: 12px; }
.nav-drawer-out button { width: 100%; background: var(--canopy); color: #fff; border: 0; border-radius: 12px; padding: 12px; font-weight: 700; }
.tab-more { display: none; }
@media (max-width: 900px) { .tab-more { display: flex; } }

/* ============ Floating RiDE Pilot widget ============ */
.pilot-fab-wrap { position: fixed; right: 20px; bottom: 22px; z-index: 90; }
.pilot-fab { width: 56px; height: 56px; border-radius: 50%; border: 0; background: linear-gradient(150deg,var(--marigold),var(--marigold-2));
  color: #3a2400; box-shadow: 0 10px 26px rgba(247,148,29,.42); display: grid; place-items: center; }
.pilot-fab svg { width: 26px; height: 26px; }
.pilot-fab:hover { filter: brightness(1.05); }
.pilot-fab-wrap.open .pilot-fab { background: var(--canopy); color: #fff; }
.pilot-pop { position: absolute; right: 0; bottom: 70px; width: min(360px, calc(100vw - 32px));
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden;
  display: none; flex-direction: column; animation: npPopIn .18s ease; }
.pilot-pop.open { display: flex; }
@keyframes npPopIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pilot-pop-head { background: linear-gradient(135deg,var(--canopy),var(--leaf)); color: #fff; padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between; }
.pilot-pop-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pilot-pop-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #7ef0b0; box-shadow: 0 0 0 3px rgba(126,240,176,.25); }
.pilot-pop-x { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; }
.pilot-pop-thread { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 46vh; overflow-y: auto; }
.pilot-pop-thread .msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.pilot-pop-thread .msg.them { align-self: flex-start; background: var(--leaf-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.pilot-pop-thread .msg.me { align-self: flex-end; background: var(--canopy); color: #fff; border-bottom-right-radius: 4px; }
.pilot-pop-thread .msg.typing { opacity: .6; letter-spacing: 2px; }
.pilot-pop-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; }
.pilot-pop-compose input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; background: #fff; font-size: 14px; }
.pilot-pop-compose button { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--marigold); color: #3a2400; display: grid; place-items: center; }
.pilot-pop-compose button svg { width: 19px; height: 19px; }
/* keep pilot fab clear of the SOS fab + mobile tabbar */
.sos-fab ~ .pilot-fab-wrap { bottom: 112px; }
@media (max-width: 900px) { .pilot-fab-wrap { bottom: 92px; right: 14px; } .pilot-pop { bottom: 66px; } .sos-fab ~ .pilot-fab-wrap { bottom: 172px; } }

/* ============ FIXES: hidden overlays + login fit-to-viewport ============ */
/* The [hidden] attribute must win over display:flex/grid on these overlays */
.nav-drawer[hidden] { display: none !important; }
.pilot-pop[hidden]  { display: none !important; }

/* Login: fit the viewport, no page scroll, balanced columns */
.bare .bare-main:has(.auth-2col) { padding: 16px; align-items: center; }
.auth-2col { height: min(660px, calc(100dvh - 32px)); }
.auth-left { justify-content: center; overflow: hidden; padding: 30px 32px; }
.auth-left h1 { font-size: 27px; }
.auth-left .auth-scene { margin: 16px 0; max-width: 320px; }
.auth-feats { gap: 10px; }
.auth-feats small { font-size: 12px; }
.auth-right { align-items: center; overflow-y: auto; }
@media (max-width: 860px) {
  .auth-2col { height: auto; }
  .auth-left { justify-content: flex-start; overflow: visible; }
  .auth-right { overflow: visible; }
}

/* ============ Employee card vehicles ============ */
.emp-vehicles { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.veh-none { font-size: 12px; color: var(--ink-soft); font-style: italic; }
.veh-chip { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: var(--mist);
  border-left: 3px solid var(--leaf); }
.veh-chip.pending { border-left-color: #e0a53a; }
.veh-ic { width: 26px; height: 26px; flex: none; color: var(--canopy); }
.veh-ic svg { width: 22px; height: 22px; }
.veh-info { flex: 1; min-width: 0; }
.veh-info b { display: block; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-plate { font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, monospace; letter-spacing: .04em; }
.veh-badge { flex: none; font-size: 13px; }
.veh-badge.ok { color: var(--leaf); }
.veh-manage { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--canopy); text-decoration: none; }
.veh-manage:hover { text-decoration: underline; }

/* ============ Admin employee profile ============ */
.emp-profile { display: grid; gap: 16px; max-width: 720px; }
.ep-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.ep-card h2 { margin: 0 0 12px; font-size: 16px; }
.ep-hero { display: flex; align-items: center; gap: 14px; }
.ep-av { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex: none; }
.ep-av.ph { display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 700; }
.ep-hero b { font-size: 17px; display: block; }
.ep-idstate { margin-top: 8px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.ep-veh-list, .ep-doc-list { display: flex; flex-direction: column; gap: 10px; }
.ep-veh { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ep-veh.pending { background: #fff9ef; border-color: #f0d9a8; }
.ep-veh-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--canopy);
  background: var(--leaf-soft); padding: 4px 8px; border-radius: 6px; flex: none; }
.ep-veh-main { flex: 1; min-width: 0; }
.ep-veh-main b { display: block; }
.ep-veh-main .plate { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .05em; color: var(--canopy); font-size: 13px; }
.ep-veh-main .hint { display: block; }
.ep-doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ep-doc-view { flex: 1; font-weight: 600; color: var(--canopy); text-decoration: none; }
.ep-doc-view:hover { text-decoration: underline; }
.chip.warn { background: #fbeccd; color: #8a5a12; }

/* ============ Driver request reminder popup ============ */
.req-pop { position: fixed; left: 20px; bottom: 22px; z-index: 88; width: min(340px, calc(100vw - 32px));
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid var(--line); animation: npPopIn .2s ease; display: none; }
.req-pop.show { display: block; }
.req-pop[hidden] { display: none !important; }
.req-pop-head { background: linear-gradient(135deg,#e5533c,#c0392b); color: #fff; padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between; }
.req-pop-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.req-pop-title .pulse { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: npPulse 1.2s infinite; }
@keyframes npPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { opacity: .6; box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.req-pop-min { background: rgba(255,255,255,.2); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; }
.req-pop-list { max-height: 46vh; overflow-y: auto; }
.req-pop.mini .req-pop-list { display: none; }
.req-row { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.req-row:last-child { border-bottom: 0; }
.req-info b { display: block; font-size: 13.5px; }
.req-info span { font-size: 12px; color: var(--ink-soft); }
.req-acts { display: flex; gap: 8px; }
.req-acts button { flex: 1; border: 0; border-radius: 9px; padding: 8px; font-weight: 700; font-size: 13px; }
.req-yes { background: var(--leaf); color: #fff; }
.req-no { background: var(--mist); color: var(--ink-soft); }
@media (max-width: 900px) { .req-pop { left: 14px; right: 14px; width: auto; bottom: 92px; } }

/* ================= v-fix: typography (smaller, lighter) ================= */
body { font-size: 14px; line-height: 1.48; }
h1 { font-size: 23px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
.side-brand .txt, .auth-brand b { font-weight: 700; }
.page-head h1 { font-size: 22px; }
.sub, .hint { font-weight: 400; }

/* ================= v-fix: FULL-SCREEN login (DriverGuardian-style) ================= */
.bare:has(.auth-2col) { min-height: 100dvh; }
.bare:has(.auth-2col) .bare-main { padding: 0 !important; align-items: stretch !important; max-width: none !important; width: 100% !important; }
.bare:has(.auth-2col) .credit { display: none; }
.auth-wrap:has(.auth-2col) { max-width: none !important; width: 100% !important; }
.auth-2col { height: 100dvh; width: 100%; border-radius: 0; box-shadow: none; grid-template-columns: 1fr 1fr; }
.auth-left { padding: clamp(24px, 4vw, 52px); justify-content: flex-start; overflow-y: auto; }
.auth-left .auth-scene { order: 2; margin: 18px 0; max-width: 320px; flex: none; }
.auth-left .auth-feats { order: 3; }
.auth-left .auth-credit { order: 4; }
.auth-right { padding: clamp(24px, 4vw, 56px); align-items: center; justify-content: center; overflow-y: auto; background: var(--mist); }
.auth-right .auth-card { width: 100%; max-width: 400px; }
@media (max-width: 860px) {
  .auth-2col { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }
  .auth-left { padding: 26px 22px; justify-content: flex-start; }
  .auth-left .auth-scene { margin: 16px 0; }
  .auth-right { min-height: auto; }
  .auth-feats { display: flex; }
}
@media (max-width: 520px) {
  .auth-left .auth-scene { display: none; }
}

/* ================= v-fix: floating buttons never cover content ================= */
.sos-fab { bottom: 20px; }
.pilot-fab-wrap { bottom: 20px; }
.sos-fab ~ .pilot-fab-wrap { bottom: 106px; }
@media (max-width: 900px) {
  .sos-fab { bottom: 78px; }               /* clear the bottom tab bar */
  .pilot-fab-wrap { bottom: 150px; right: 14px; }
  .sos-fab ~ .pilot-fab-wrap { bottom: 150px; }
  .req-pop.show { bottom: 150px; }
  .main, .col { padding-bottom: 76px; }    /* content never hidden under tab bar */
}

/* ================= Verify identities — card view ================= */
.verify-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.verify-card { display: block; text-decoration: none; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; transition: box-shadow .15s, transform .15s; }
.verify-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.verify-card.has-pending { border-left: 4px solid #e0a53a; }
.verify-card.all-done { border-left: 4px solid var(--leaf); }
.vc-head { display: flex; align-items: center; gap: 11px; }
.vc-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; flex: none; }
.vc-who { flex: 1; min-width: 0; }
.vc-who b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-who span { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vc-badge { flex: none; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.vc-badge.pending { background: #fbeccd; color: #8a5a12; }
.vc-badge.ok { background: var(--leaf-soft); color: var(--leaf-deep, #1a6b45); }
.vc-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.vc-doc { font-size: 11.5px; padding: 4px 9px; border-radius: 8px; background: var(--mist); color: var(--ink-soft); }
.vc-doc.ok { background: var(--leaf-soft); color: var(--leaf-deep, #1a6b45); }
.vc-doc.wait { background: #fff4e2; color: #8a5a12; }
.vc-cta { font-size: 13px; font-weight: 700; color: var(--canopy); }
.nav-drawer-install { display: block; text-align: center; margin-top: 10px; padding: 11px; border-radius: 12px;
  background: var(--marigold); color: #3a2400; font-weight: 700; text-decoration: none; }

/* ================= install float (Android + iOS) ================= */
.np-install { align-items: center; gap: 12px; }
.np-install-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.np-install span { flex: 1; font-size: 13px; line-height: 1.35; }
.np-install span b { font-size: 13.5px; }
.np-install-ios .np-install-add { display: none; }

/* ================= Full-colour dashboard cards + 2-col mobile ================= */
.kpi.kpi-green  { background: linear-gradient(135deg,var(--leaf),#0d6b40); border-color: transparent; }
.kpi.kpi-orange { background: linear-gradient(135deg,var(--marigold),var(--marigold-2)); border-color: transparent; }
.kpi.kpi-violet { background: linear-gradient(135deg,#8b74ff,#6a4bff); border-color: transparent; }
.kpi.kpi-blue   { background: linear-gradient(135deg,#4a9bf5,#2f80ed); border-color: transparent; }
.kpi.kpi-red    { background: linear-gradient(135deg,#f06a4d,var(--alert)); border-color: transparent; }
.kpi[class*="kpi-"] b { color: #fff; }
.kpi[class*="kpi-"] span { color: rgba(255,255,255,.9); }
.kpi[class*="kpi-"] .ico { background: rgba(255,255,255,.22) !important; color: #fff; }
.kpi.kpi-orange b, .kpi.kpi-orange span { color: #3a2400; }
.kpi.kpi-orange span { color: rgba(58,36,0,.8); }
.kpi.kpi-orange .ico { background: rgba(255,255,255,.35) !important; color: #3a2400; }
@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 13px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .kpi .ico { width: 38px; height: 38px; border-radius: 11px; }
  .kpi .ico svg { width: 20px; height: 20px; }
  .kpi b { font-size: 21px; }
  .kpi span { font-size: 11.5px; }
}

/* ================= Live SOS alert popup (admins) ================= */
.sos-pop { position: fixed; right: 20px; top: 74px; z-index: 95; width: min(340px, calc(100vw - 32px));
  background: var(--card); border-radius: 16px; box-shadow: 0 14px 40px rgba(192,57,43,.32); overflow: hidden;
  border: 2px solid var(--alert); display: none; animation: npPopIn .2s ease; }
.sos-pop.show { display: block; }
.sos-pop-head { background: linear-gradient(135deg,#e5533c,#c0392b); color: #fff; padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between; }
.sos-pop-title { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sos-pop-title .pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: npPulse 1s infinite; }
.sos-pop-min { background: rgba(255,255,255,.22); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; }
.sos-pop-list { max-height: 60vh; overflow-y: auto; }
.sos-pop.mini .sos-pop-list { display: none; }
.sos-row { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sos-row:last-child { border-bottom: 0; }
.sos-info b { display: block; font-size: 14px; }
.sos-info span { font-size: 12px; color: var(--ink-soft); display: block; margin-top: 1px; }
.sos-map { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--alert); text-decoration: none; }
.sos-acts { display: flex; gap: 8px; margin-top: 9px; }
.sos-acts .sos-call, .sos-acts .sos-resolve { flex: 1; text-align: center; border: 0; border-radius: 9px; padding: 8px; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; }
.sos-call { background: var(--alert); color: #fff; }
.sos-resolve { background: var(--leaf); color: #fff; }
@media (max-width: 900px) { .sos-pop { right: 12px; left: 12px; width: auto; top: 64px; } }

/* verify card: not-submitted + partial states */
.vc-doc.verified { background: var(--leaf-soft); color: var(--leaf-deep, #1a6b45); }
.vc-doc.pending { background: #fff4e2; color: #8a5a12; }
.vc-doc.missing { background: var(--mist); color: #9aa8a0; }
.verify-card.partial { border-left: 4px solid #b8c2bc; }
.vc-badge.partial { background: #eef3ef; color: #556; }

/* ================= Mobile login: centred brand + form ================= */
.auth-mobile-brand { display: none; }
@media (max-width: 860px) {
  .auth-2col { grid-template-columns: 1fr; min-height: 100dvh; height: auto; }
  .auth-left { display: none; }                 /* hide the marketing panel on phones */
  .auth-right { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
    align-items: center; background: linear-gradient(170deg,#123f2e 0%,#0f3b2c 42%,var(--mist) 42%); padding: 0 22px; }
  .auth-mobile-brand { display: flex; flex-direction: column; align-items: center; text-align: center;
    color: #fff; margin-bottom: 22px; }
  .auth-mobile-brand .mark { width: 60px; height: 60px; border-radius: 18px; background: var(--marigold);
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #3a2400;
    font-size: 32px; margin-bottom: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
  .auth-mobile-brand b { font-family: var(--font-display); font-size: 22px; }
  .auth-mobile-brand small { font-size: 12.5px; opacity: .85; margin-top: 2px; }
  .auth-right .auth-card { max-width: 420px; width: 100%; background: var(--card); border-radius: 18px;
    padding: 22px 20px; box-shadow: 0 12px 34px rgba(0,0,0,.14); }
  .auth-right .sub.center { margin-bottom: 6px; }
}
@media (max-width: 520px) {
  .auth-right { background: linear-gradient(170deg,#123f2e 0%,#0f3b2c 38%,var(--mist) 38%); }
}

/* ================= v-fix: smaller + thinner typography (web & mobile) ================= */
body { font-size: 13px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15.5px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
.page-head h1 { font-size: 20px; font-weight: 600; }
.kpi b { font-weight: 600; }
.sub, .hint, label, .fine { font-weight: 400; }
b, strong { font-weight: 600; }             /* trim heavy bolds to a lighter weight */
.btn { font-weight: 600; }
.side-nav a, .tabbar a { font-weight: 500; }
@media (max-width: 640px) {
  body { font-size: 12.5px; }
  h1 { font-size: 19px; }
  .page-head h1 { font-size: 18px; }
}

/* Keyless Google Maps route embed (free, no API key) */
.route-embed { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.route-embed iframe { width: 100%; height: 260px; border: 0; display: block; }
@media (max-width: 640px) { .route-embed iframe { height: 200px; } }

/* ================= Extra-compact, thin fonts on mobile / native app ================= */
@media (max-width: 640px) {
  body { font-size: 12px; line-height: 1.45; font-weight: 400; }
  h1 { font-size: 18px; font-weight: 600; }
  h2 { font-size: 14.5px; font-weight: 600; }
  h3 { font-size: 13px; font-weight: 600; }
  .page-head h1 { font-size: 17px; }
  .sub, .hint, label, .fine, small { font-size: 11.5px; font-weight: 400; }
  .btn { font-size: 13px; font-weight: 600; }
  b, strong { font-weight: 600; }
}
/* When wrapped in the native app, trim weights a touch more for a crisp, light look. */
.native-app body, body.native-app { font-weight: 400; }
.native-app h1, .native-app h2, .native-app h3 { font-weight: 600; }

/* Verify identities search */
.verify-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 14px; max-width: 420px; }
.verify-search svg { width: 17px; height: 17px; color: var(--ink-soft); flex: none; }
.verify-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13.5px; color: var(--ink); }

/* ================= Security activity log ================= */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); color: var(--ink-soft); font-weight: 600; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log-list { display: flex; flex-direction: column; }
.log-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.log-row:last-child { border-bottom: 0; }
.log-ic { width: 30px; text-align: center; font-size: 16px; flex: none; }
.log-main { flex: 1; min-width: 0; }
.log-main b { display: block; font-size: 13px; font-weight: 600; }
.log-who { font-size: 11.5px; color: var(--ink-soft); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-meta { text-align: right; flex: none; font-size: 11px; color: var(--ink-soft); }
.log-ip { display: block; font-family: ui-monospace, monospace; opacity: .7; }
.log-row.log-bad { background: #fdf0ee; border-radius: 8px; }
.log-row.log-warn .log-ic { filter: saturate(1.2); }
.log-row.log-bad b { color: var(--alert); }

/* ================= Record & Replay — driver cards ================= */
.rr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rr-driver { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.rr-head { display: flex; align-items: center; gap: 12px; }
.rr-av { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; flex: none; }
.rr-av.ph { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 19px; }
.rr-who b { display: block; font-size: 15px; }
.rr-who span { font-size: 12px; color: var(--ink-soft); }
.rr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.rr-stat { background: var(--mist); border-radius: 11px; padding: 9px 6px; text-align: center; }
.rr-stat b { display: block; font-size: 17px; font-weight: 700; color: var(--canopy); line-height: 1.1; }
.rr-stat span { font-size: 10.5px; color: var(--ink-soft); }
.rr-rides { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow-y: auto; }
.rr-ride { display: block; text-decoration: none; color: var(--ink); background: var(--mist); border-radius: 10px; padding: 9px 11px; border-left: 3px solid var(--leaf); transition: background .12s; }
.rr-ride:hover { background: var(--leaf-soft); }
.rr-ride.disabled { border-left-color: #c9d2cc; opacity: .6; pointer-events: none; }
.rr-route { display: block; font-size: 12.5px; }
.rr-when { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 640px) { .rr-grid { grid-template-columns: 1fr; } }

/* ================= Profile — rich banner + stat tiles ================= */
.profile-banner { border-radius: 18px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--canopy) 0%, #135438 55%, #1a6b45 100%); color: #fff; }
.pb-top { display: flex; align-items: center; gap: 18px; padding: 22px 22px 18px; }
.pb-top .avatar-wrap { position: relative; flex: none; }
.pb-top .avatar { width: 78px; height: 78px; border-radius: 20px; font-size: 30px; border: 3px solid rgba(255,255,255,.25); }
.pb-top .photo-edit { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--marigold); color: #3a2400; display: grid; place-items: center; cursor: pointer; border: 2px solid #fff; }
.pb-id h1 { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #fff; }
.pb-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.2); }
.pb-badge.ok { background: #d5f5e3; color: #12603a; }
.pb-badge.warn { background: #fbeccd; color: #8a5a12; }
.pb-meta { margin-top: 6px; font-size: 13px; opacity: .9; display: flex; gap: 6px; flex-wrap: wrap; }
.btn.ghost.light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.pb-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,.15); }
.pb-stat { background: rgba(0,0,0,.14); padding: 14px 10px; text-align: center; }
.pb-stat b { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.pb-stat span { font-size: 11px; opacity: .85; }
.pb-stat.s-gold b { color: var(--marigold); }
@media (max-width: 720px) {
  .pb-stats { grid-template-columns: repeat(3, 1fr); }
  .pb-top { flex-direction: column; text-align: center; }
  .pb-id h1 { justify-content: center; }
  .pb-meta { justify-content: center; }
}
@media (max-width: 420px) { .pb-stats { grid-template-columns: repeat(2, 1fr); } }

/* ================= Brand seal + wordmark (Namma bold · Payaṇa thin) ================= */
.mark.seal { background: transparent !important; display: grid; place-items: center; color: var(--marigold); }
.side-brand .mark.seal { width: 40px; height: 40px; }
.seal-svg { width: 100%; height: 100%; display: block; }
.side-brand .txt b, .wordmark .w-bold, .auth-mobile-brand .w-bold { font-weight: 800; }
.side-brand .txt i, .wordmark .w-thin, .auth-mobile-brand .w-thin { font-weight: 300; font-style: normal; opacity: .95; }
.side-brand .txt { font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em; }
.auth-brand .mark.seal { width: 52px; height: 52px; color: #fff; }
.auth-mobile-brand .mark.seal { width: 60px; height: 60px; color: #fff; background: transparent !important; box-shadow: none; }
.wordmark { font-family: var(--font-display); }

/* ================= Vehicles — per-owner card view ================= */
.veh-search { display: flex; align-items: center; gap: 8px; background: var(--mist); border: 1px solid var(--line);
  border-radius: 11px; padding: 8px 11px; margin-bottom: 14px; max-width: 400px; }
.veh-search svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.veh-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13px; color: var(--ink); }
.vcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.vcard { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 15px; padding: 15px; transition: box-shadow .15s, transform .15s; }
.vcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.vcard.has-pending { border-left: 4px solid #e0a53a; }
.vcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.vcard-av { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.vcard-who { flex: 1; min-width: 0; }
.vcard-who b { display: block; font-size: 14px; }
.vcard-who span { font-size: 11.5px; color: var(--ink-soft); }
.vcard-badge { flex: none; font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px; }
.vcard-badge.pending { background: #fbeccd; color: #8a5a12; }
.vcard-badge.ok { background: var(--leaf-soft); color: #1a6b45; }
.vcard-list { display: flex; flex-direction: column; gap: 7px; }
.vcard-veh { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: var(--mist); border-left: 3px solid var(--leaf); }
.vcard-veh.pending { border-left-color: #e0a53a; }
.vcard-ic { width: 24px; height: 24px; color: var(--canopy); flex: none; }
.vcard-ic svg { width: 22px; height: 22px; }
.vcard-info { flex: 1; min-width: 0; }
.vcard-info b { display: block; font-size: 12.5px; }
.vcard-info .plate { font-size: 10.5px; color: var(--ink-soft); font-family: ui-monospace, monospace; }
.vcard-flag { flex: none; }
.vcard-cta { display: inline-block; margin-top: 11px; font-size: 12.5px; font-weight: 700; color: var(--canopy); }