/* ============================================================
   RAPIGO — Professional design system  v3 (Premium)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* ── Brand ── */
  --brand:#0ac878; --brand-2:#00a85d; --brand-3:#007f48;
  --grad:linear-gradient(135deg,#0bd385 0%,#00a85d 100%);
  --grad-dark:linear-gradient(155deg,#123424 0%,#07150f 100%);
  --brand-soft:#dcf8e9; --brand-soft-2:#c7f3dc;

  /* ── Ink & Text ── */
  --ink:#07130d; --ink-2:#173127;
  --muted:#40594d; --muted-2:#587166;
  --text:#07130d; --text-2:#40594d;

  /* ── Surfaces ── */
  --bg:#edf5f1; --card:#fff;
  --surface:#fff; --border:rgba(6,35,21,.13);
  --line:rgba(6,35,21,.13); --line-2:rgba(6,35,21,.10);

  /* ── Status ── */
  --danger:#f2494f; --danger-soft:#fdeceb;
  --warn:#f6a609; --warn-soft:#fff5e2;
  --info:#2f7ccf; --info-soft:#e7f1fc;
  --gold:#f5b400;

  /* ── Shadows ── */
  --shadow-sm:0 2px 8px rgba(6,35,21,.04);
  --shadow:0 16px 34px rgba(6,35,21,.075),0 2px 8px rgba(6,35,21,.035);
  --shadow-lg:0 28px 70px rgba(6,35,21,.14),0 10px 24px rgba(6,35,21,.06);
  --shadow-brand:0 12px 32px rgba(0,195,113,.35);

  /* ── Radius Scale ── */
  --r-xs:8px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:32px; --r-full:9999px;

  /* ── Spacing Scale ── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* ── Typography Scale ── */
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-lg:18px;
  --text-xl:22px; --text-2xl:28px; --text-3xl:36px; --text-4xl:48px;

  /* ── Safe Areas ── */
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px);

  /* ── Showcase Tokens ── */
  --show-emerald:#00c978; --show-lime:#8affc2; --show-indigo:#5578ff; --show-coral:#ff6b78; --show-ink:#081a12;
  --midnight:#07120f; --forest:#0e241a; --panel:#102c20; --mint:#27e08a; --mint-2:#00b96d; --cloud:#eff8f3;
  --quiet:#5a7568; --indigo:#526cff;

  /* ── Rapido Signature ── */
  --rapido-yellow:#FFC800; --rapido-yellow-dark:#E6A100; --rapido-yellow-soft:#FFF9E6;
  --obsidian:#080D11; --obsidian-card:#11171E; --obsidian-border:rgba(255,255,255,0.08);
  --mint-soft:#E6FBF0;

  /* ── Easings ── */
  --spring:cubic-bezier(0.175,0.885,0.32,1.15);
  --smooth:cubic-bezier(0.2,0.8,0.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-y: visible;
}
h1,h2,h3{font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; margin:0}
.app{max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; background: radial-gradient(150% 100% at 50% 0%, #ffffff 0%, #f3f7f5 40%, #e2ece7 100%); position:relative; display:flex; flex-direction:column; overflow-x:clip; overflow-y:visible}
.hide{display:none!important}
a{color:var(--brand-3);text-decoration:none}
img{max-width:100%}
::selection{background:var(--brand-soft-2)}

/* scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d8e2dd;border-radius:8px}

/* ---------- animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
@keyframes popOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes btnShine{0%{left:-100%}60%,100%{left:120%}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.85)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes scaleUp{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes navSlide{from{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(8px) scale(.95)}}
@keyframes gradMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.animate>*{animation:fadeUp .6s var(--smooth) both}
.animate>*:nth-child(2){animation-delay:.06s}
.animate>*:nth-child(3){animation-delay:.12s}
.animate>*:nth-child(4){animation-delay:.18s}
.animate>*:nth-child(5){animation-delay:.24s}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:12px; padding:16px 20px; padding-top:calc(16px + var(--safe-t));
  background:rgba(243, 247, 245, 0.75); backdrop-filter:saturate(200%) blur(24px); -webkit-backdrop-filter:saturate(200%) blur(24px);
  border-bottom:1px solid rgba(255,255,255,0.4); position:sticky; top:0; z-index:40;
}
.topbar .brand{font-family:'Outfit';font-weight:900; letter-spacing:-.5px; font-size:22px; display:flex;align-items:center;gap:8px}
.topbar .brand .logo-mark{width:28px;height:28px;border-radius:9px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--shadow-brand)}
.topbar .brand .logo-mark svg{width:16px;height:16px;color:#fff}
.topbar .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .sub{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.topbar .spacer{flex:1}
.pill{font-size:12px; padding:7px 14px; border-radius:999px; background:var(--brand-soft); color:var(--brand-3); font-weight:800; display:inline-flex;align-items:center;gap:6px;box-shadow:inset 0 0 0 1px rgba(0,195,113,0.1)}
.pill .live{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulseDot 1.4s infinite}
.iconbtn{width:42px;height:42px;border-radius:14px;border:1px solid rgba(0,0,0,0.06);background:#fff;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;transition:all .2s var(--smooth);box-shadow:var(--shadow-sm)}
.iconbtn:active{transform:scale(0.92);background:var(--bg)}
.iconbtn svg{width:20px;height:20px}

/* ---------- content ---------- */
.content{flex:1; padding:20px; padding-bottom:120px; animation:fadeIn .4s var(--smooth)}
.section-title{font-family:'Outfit'; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; margin:12px 2px 14px; display:flex;align-items:center;gap:8px}
.section-title .sub{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:700;color:var(--muted-2);font-family:'Plus Jakarta Sans'}

.card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px; margin-bottom:18px; border:1px solid rgba(255,255,255,0.8); animation:fadeUp .5s var(--smooth) both; transition:box-shadow .25s var(--smooth), transform .25s var(--smooth)}
.card:not(.flat):not(.dark):not(.brand):hover{box-shadow:0 16px 40px rgba(10,21,18,.09),0 2px 8px rgba(10,21,18,.04)}
.card.tight{padding:16px}
.card.flat{box-shadow:none;border:1px solid var(--line);background:rgba(255,255,255,0.6)}
.card.dark{background:var(--grad-dark);color:#fff;border:none;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.card.dark::after{content:'';position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,118,.12) 0%,transparent 70%);pointer-events:none}
.card.brand{background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow-brand);background-size:200% 200%;animation:gradMove 4s ease infinite}

/* ---------- buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; border:none; cursor:pointer; font-weight:800; font-size:16px; font-family:inherit;
  padding:16px 20px; border-radius:18px; background:var(--grad); color:#fff; letter-spacing:-.01em;
  box-shadow:var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,0.3); transition:transform .18s var(--spring), box-shadow .2s;
  background-size:200% 200%;
}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);animation:btnShine 3.5s infinite 1s}
.btn svg{width:20px;height:20px;transition:transform .2s var(--spring)}
.btn:hover{box-shadow:0 16px 40px rgba(0,195,113,.4),inset 0 1px 0 rgba(255,255,255,0.4)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.94);box-shadow:0 4px 12px rgba(0,195,113,.25), inset 0 2px 4px rgba(0,0,0,0.1)}
/* ripple */
.ripple-wave{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.4);animation:ripple .6s var(--smooth) forwards;pointer-events:none}

/* ============================================================
   Showcase polish v4 — premium surfaces, hierarchy and focus
   ============================================================ */
/* Showcase v4 — shadow/line overrides consolidated into master :root */
body{background:
  radial-gradient(900px 480px at 50% -120px,rgba(0,230,118,.12),transparent 70%),
  linear-gradient(180deg,#f6faf8 0%,#eef5f1 48%,#e7f0eb 100%);
}
.app{max-width:520px;background:
  radial-gradient(540px 260px at 50% 0,rgba(255,255,255,.98),transparent 80%),
  linear-gradient(180deg,#f8fbf9 0%,#eef5f1 58%,#e8f1ec 100%);
}
.topbar{padding-left:22px;padding-right:22px;background:rgba(248,251,249,.84);border-bottom-color:rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(8,31,21,.025),0 8px 24px rgba(8,31,21,.035)}
.topbar .brand{font-size:23px;letter-spacing:-.7px}
.topbar .brand .logo-mark{width:31px;height:31px;border-radius:10px;box-shadow:0 8px 20px rgba(0,195,113,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.content{padding:24px 22px 124px}
.hero-head{padding-top:8px}
.hero-head h2{font-size:30px;line-height:1.05}
.section-title{margin-top:20px;color:#688075;font-size:11px;letter-spacing:.14em}
.card{border-color:rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:26px;padding:22px}
.card:hover{transform:translateY(-2px)}
.card.brand,.card.dark{box-shadow:var(--shadow-lg)}
.btn{min-height:54px;border-radius:17px;font-size:15px;letter-spacing:-.02em}
.btn.sm{min-height:42px;border-radius:14px}
.input,.select,input,select,textarea{border-color:rgba(8,31,21,.10);background:rgba(255,255,255,.88);box-shadow:inset 0 1px 2px rgba(8,31,21,.025),0 1px 0 rgba(255,255,255,.9);transition:border-color .2s,box-shadow .2s,background .2s}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(0,195,113,.62);background:#fff;box-shadow:0 0 0 4px rgba(0,195,113,.12),0 4px 12px rgba(8,31,21,.05)}
.bottomnav{height:78px;padding-bottom:var(--safe-b);background:rgba(250,252,251,.9);border-top:1px solid rgba(8,31,21,.07);box-shadow:0 -12px 32px rgba(8,31,21,.07);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.bottomnav a{min-width:74px;font-size:10px;font-weight:800;letter-spacing:.02em}
.bottomnav a .ic{width:24px;height:24px;margin-bottom:3px}
.map{border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 30px rgba(8,31,21,.08)}
.pill{box-shadow:0 4px 14px rgba(0,195,113,.08),inset 0 0 0 1px rgba(0,195,113,.12)}
.list-item{border-bottom-color:rgba(8,31,21,.07)}
.modal{border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 90px rgba(4,19,12,.22)}
button,a,input,select,textarea{outline-color:var(--brand)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #00d982 !important;outline-offset:2px !important;box-shadow:0 0 0 4px rgba(0,217,130,0.25) !important}
@media (min-width:700px){
  .app:not(.admin-app):not(.app-auth-full):not(.app-shell-view){margin:18px auto;min-height:calc(100vh - 36px);border:1px solid rgba(255,255,255,.9);border-radius:32px;overflow-y:visible;overflow-x:clip;box-shadow:0 30px 90px rgba(8,31,21,.14)}
  .topbar{border-radius:31px 31px 0 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Contrast pass — token overrides consolidated into master :root */
.input::placeholder{color:#647970}.input-ic svg{color:#536a60}.input-ic .pass-toggle{color:#536a60}
.li-sub,.tl-s,.chart-legend,.empty,.muted{color:#536a60}.section-title{color:#4c655a}.stat .l{color:#536a60}.tl-step.pending .tl-t{color:#647970}
.bottomnav{max-width:520px;background:rgba(255,255,255,.96);border-top-color:rgba(7,28,19,.10)}.bottomnav a{color:#647970}.bottomnav a.on{color:#008c51}
.card.flat{background:rgba(255,255,255,.82);border-color:rgba(7,28,19,.10)}
#map,.map{height:360px;border-color:rgba(7,28,19,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 16px 34px rgba(8,31,21,.10)}
.quick-chip,.chip{color:#334b40}
@media (max-width:380px){#map,.map{height:330px}.content{padding-left:16px;padding-right:16px}}

/* Showcase v6: contrast-first presentation layer — tokens consolidated into master :root */
body{background:radial-gradient(820px 520px at 50% -140px,rgba(0,209,106,.18),transparent 68%),linear-gradient(180deg,#f8fcfa 0%,#edf6f1 56%,#e6f0eb 100%);color:var(--ink)}
.app{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(243,249,246,.96) 46%,rgba(234,243,238,.98) 100%);border-color:rgba(5,45,27,.09)}
.app::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent 4%,#00c96b 35%,#8af5be 50%,#00a957 65%,transparent 96%);opacity:.9;z-index:60;pointer-events:none}
.topbar{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(6,35,21,.10);box-shadow:0 10px 26px rgba(6,35,21,.055)}
.topbar .sub{color:#4b6559}.section-title{color:#40594d}.muted,.li-sub,.tl-s,.chart-legend,.empty{color:#40594d}.small{color:inherit}
.card{border:1px solid rgba(6,35,21,.09);box-shadow:0 16px 34px rgba(6,35,21,.075),0 2px 8px rgba(6,35,21,.035)}
.card.flat{background:rgba(255,255,255,.9);border-color:rgba(6,35,21,.12)}
.input,.select,input,select,textarea{border-color:rgba(6,35,21,.15);color:#10291d}.input::placeholder{color:#587166}
.bottomnav{background:rgba(255,255,255,.98);border-top-color:rgba(6,35,21,.13);box-shadow:0 -14px 34px rgba(6,35,21,.10)}.bottomnav a{color:#587166}.bottomnav a.on{color:#007f48}.bottomnav a.on .ic{background:#d9f8e8}
.pill{border:1px solid rgba(0,170,89,.16)}
@media (min-width:700px){.app{box-shadow:0 32px 96px rgba(6,35,21,.16)}}

/* ============================================================
   RAPIGO visual overhaul v7 — Midnight Emerald Dark Mode System
   ============================================================ */
[data-theme="dark"], body.dark-mode, .app.dark-mode {
  --ink:#f4fff8;--ink-2:#d8eee2;--muted:#a3bdb0;--muted-2:#87a496;
  --text:#f4fff8;--text-2:#a3bdb0;
  --line:rgba(193,255,218,.15);--line-2:rgba(193,255,218,.11);
  --brand:#17e58b;--brand-2:#0ac878;--brand-3:#00a85d;
  --brand-soft:rgba(23,229,139,.13);--brand-soft-2:rgba(23,229,139,.20);
  --bg:#07140e;--card:#0d2118;--surface:#0d2118;--border:rgba(193,255,218,.15);
  --grad-dark:linear-gradient(155deg,#102c20 0%,#081710 100%);
  --shadow:0 18px 42px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18);
  --shadow-lg:0 28px 70px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.22);
}
body.dark-mode, [data-theme="dark"] body {background:radial-gradient(900px 600px at 50% -180px,rgba(0,229,139,.18),transparent 68%),linear-gradient(180deg,#06120d,#030907);color:var(--ink)}
.app.dark-mode, [data-theme="dark"] .app {background:radial-gradient(600px 360px at 50% 0,rgba(23,229,139,.07),transparent 70%),linear-gradient(180deg,#0a1c14 0%,#07150f 60%,#06110c 100%);border-color:rgba(193,255,218,.14);color:var(--ink)}
.topbar{background:rgba(255,255,255,.96);border-bottom-color:rgba(6,35,21,.10);box-shadow:0 10px 26px rgba(6,35,21,.055)}.topbar .brand{color:#07130d}.topbar .brand b{color:#007f48}.topbar .sub{color:#536a60}
.hero-head h2,h1,h2,h3{color:#07130d}.section-title{color:#40594d}.card,.stat{background:#fff;color:#07130d;border-color:rgba(6,35,21,.09);box-shadow:var(--shadow)}.card.brand,.stat.hl{color:#fff;background:linear-gradient(135deg,#0bd385,#00a85d)}.card.dark,.stat.dark{color:#f4fff8;background:var(--grad-dark)}
.input,.select,input,select,textarea{background:#fff;color:#10291d;border-color:rgba(6,35,21,.15)}.input::placeholder{color:#587166}.li-title,.kv .v,.tl-t{color:#07130d}.li-sub,.tl-s,.stat .l,.muted,.empty,.chart-legend{color:#40594d}.bottomnav{background:rgba(255,255,255,.98);border-top-color:rgba(6,35,21,.13);box-shadow:0 -14px 34px rgba(6,35,21,.10)}.bottomnav a{color:#587166}.bottomnav a.on{color:#007f48}.bottomnav a.on .ic{background:#dcf8e9}.svc{background:#fff;color:#07130d;border-color:rgba(6,35,21,.13)}.svc .fr{color:#536a60}.auth-wrap .card{background:rgba(255,255,255,.92);color:#07130d;border-color:rgba(6,35,21,.10)}.auth-logo .tag{color:#536a60}.iconbtn{background:#fff;color:#07130d;border-color:rgba(6,35,21,.12)}
@media (min-width:900px){.app.admin-app{background:#f5faf7!important;color:#07130d}.app.admin-app .topbar{background:rgba(255,255,255,.96);border-color:rgba(6,35,21,.10)}.app.admin-app .admin-nav-link{color:#40594d}.app.admin-app .admin-nav-link.on{background:#dcf8e9;color:#007f48}.app.admin-app .bento-card{background:#fff;color:#07130d;border-color:rgba(6,35,21,.09)}.app.admin-app .bento-card.primary{background:linear-gradient(135deg,#0bd385,#00a85d);color:#fff}.app.admin-app .bento-label{color:#536a60}.app.admin-app .bento-val{color:#07130d}.app.admin-app .bento-card.primary .bento-val{color:#fff}}

/* ============================================================
   RAPIGO immersive 3D showcase layer v9 — tokens in master :root
   ============================================================ */
body{background:radial-gradient(760px 420px at 50% -100px,rgba(0,201,120,.20),transparent 68%),radial-gradient(520px 360px at 100% 70%,rgba(85,120,255,.10),transparent 72%),#edf6f1}
.app{isolation:isolate;perspective:1400px;background:linear-gradient(145deg,#fbfefd 0%,#f1f8f4 54%,#e5f1ea 100%);box-shadow:0 30px 90px rgba(5,37,23,.14)}
.app::after{content:'';position:absolute;z-index:-1;inset:8% -18% auto;height:42%;background:radial-gradient(ellipse,rgba(0,201,120,.09),transparent 68%);filter:blur(34px);pointer-events:none}
.topbar{transform-style:preserve-3d;background:rgba(255,255,255,.90);border-bottom:1px solid rgba(5,37,23,.11);box-shadow:0 12px 28px rgba(5,37,23,.08),inset 0 1px 0 #fff}
.topbar .brand .logo-mark{transform:translateZ(14px);box-shadow:0 12px 22px rgba(0,201,120,.30),inset 0 1px 0 rgba(255,255,255,.65)}
.content{transform-style:preserve-3d}
.card,.stat,.bento-card,.svc{transform-style:preserve-3d;position:relative;overflow:hidden;border-color:rgba(5,37,23,.10);box-shadow:0 14px 30px rgba(5,37,23,.075),0 2px 7px rgba(5,37,23,.04),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}
.card::before,.stat::before,.bento-card::before,.svc::before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.42),transparent 32%,transparent 70%,rgba(0,201,120,.055));pointer-events:none;transform:translateZ(1px)}
.card:hover,.stat:hover,.bento-card:hover,.svc:hover{transform:translateY(-5px) rotateX(1.5deg) rotateY(-1deg);border-color:rgba(0,169,94,.24);box-shadow:0 26px 50px rgba(5,37,23,.13),0 0 0 1px rgba(0,201,120,.06),inset 0 1px 0 #fff}
.card.brand,.stat.hl{background:linear-gradient(135deg,#0bda88 0%,#00a85d 58%,#00844a 100%);box-shadow:0 22px 42px rgba(0,169,94,.30),inset 0 1px 0 rgba(255,255,255,.35)}
.card.dark,.stat.dark{background:linear-gradient(145deg,#163e2c,#071810 78%);box-shadow:0 24px 50px rgba(4,24,15,.28),inset 0 1px 0 rgba(255,255,255,.10)}
.svc{background:linear-gradient(160deg,#fff,#f3fbf7);box-shadow:0 10px 20px rgba(5,37,23,.06)}.svc.on{box-shadow:0 18px 34px rgba(0,169,94,.22),0 0 0 3px rgba(0,201,120,.12),inset 0 1px 0 #fff}
.btn{transform:translateZ(8px);box-shadow:0 14px 26px rgba(0,169,94,.24),inset 0 1px 0 rgba(255,255,255,.45)}.btn:hover{transform:translateZ(12px) translateY(-2px);box-shadow:0 20px 34px rgba(0,169,94,.32),inset 0 1px 0 rgba(255,255,255,.55)}
.iconbtn,.pill{transform:translateZ(8px)}
.admin-nav-desktop{transform-style:preserve-3d}.admin-nav-link{transform:translateZ(5px);transition:transform .25s,background .25s,box-shadow .25s}.admin-nav-link:hover{transform:translateZ(13px) translateY(-2px);box-shadow:0 10px 20px rgba(5,37,23,.10)}.admin-nav-link.on{box-shadow:0 10px 22px rgba(0,169,94,.14),inset 0 1px 0 #fff}
.bento-card.primary{background:linear-gradient(135deg,#0bd385,#00a85d 65%,#007c47);box-shadow:0 24px 48px rgba(0,169,94,.27)}
.map{box-shadow:0 20px 38px rgba(5,37,23,.14),inset 0 0 0 1px rgba(255,255,255,.72);transform:translateZ(3px)}
.bottomnav{background:rgba(255,255,255,.95);box-shadow:0 -18px 38px rgba(5,37,23,.12),inset 0 1px 0 #fff}
@media (max-width:699px){.card:hover,.stat:hover,.bento-card:hover,.svc:hover{transform:translateY(-2px)}.topbar{box-shadow:0 8px 20px rgba(5,37,23,.06)}}
@media (prefers-reduced-motion:reduce){.card,.stat,.bento-card,.svc,.btn,.admin-nav-link{transform:none!important;transition:none!important}}

/* ============================================================
   v10 — Midnight Mobility Command Center — tokens in master :root
   ============================================================ */
body{background:radial-gradient(800px 460px at 50% -110px,rgba(39,224,138,.24),transparent 68%),radial-gradient(460px 360px at 5% 85%,rgba(82,108,255,.08),transparent 74%),var(--cloud)}
.showcase-top,.command-header{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(7,18,15,.92);border-bottom:1px solid rgba(154,255,204,.14);backdrop-filter:blur(20px) saturate(150%);box-shadow:0 12px 30px rgba(3,16,10,.20)}
.showcase-brand,.command-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Outfit',sans-serif;font-weight:900;font-size:20px;letter-spacing:-.06em}.showcase-brand>span>span,.command-brand b span{color:var(--mint)}
.showcase-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,#35ef9a,#00a961);box-shadow:0 9px 20px rgba(0,201,120,.35),inset 0 1px 0 rgba(255,255,255,.55)}.showcase-mark svg{width:18px;height:18px}.showcase-brand small,.command-brand small{font:800 9px/1 'Plus Jakarta Sans';letter-spacing:.13em;color:#89ad9b;margin-left:1px}.showcase-live,.command-status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(39,224,138,.20);border-radius:999px;color:#9df4c6;background:rgba(39,224,138,.09);font-size:11px;font-weight:800;white-space:nowrap}.showcase-live i,.command-status i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint)}.showcase-live.offline{color:#ffc5c7;border-color:rgba(255,107,120,.20);background:rgba(255,107,120,.10)}.showcase-live.offline i{background:#ff6b78;box-shadow:none}.showcase-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(154,255,204,.15);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.showcase-icon svg{width:19px;height:19px}
.showcase-content{padding:28px 20px 112px;min-height:calc(100dvh - 64px);animation:stageIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes stageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.customer-content{background:linear-gradient(180deg,#f4fbf7 0%,#eaf4ee 100%)}.runner-content{background:radial-gradient(120% 80% at 50% 0%, #0d1b16 0%, #060e0a 100%), #060e0a; color:#e2ede7}.admin-content{background:linear-gradient(180deg,#f6fbf8 0%,#eaf3ed 100%)}
.showcase-dock{position:fixed;z-index:999 !important;bottom:18px;left:50%;transform:translateX(-50%);width:min(470px,calc(100% - 28px));display:flex;align-items:center;padding:7px;background:rgba(7,18,15,.94);border:1px solid rgba(154,255,204,.16);border-radius:20px;box-shadow:0 18px 42px rgba(3,16,10,.32),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px)}.showcase-dock a{flex:1;min-height:49px;display:grid;place-items:center;gap:2px;color:#93aa9d;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.showcase-dock a .ic{height:19px;display:grid;place-items:center}.showcase-dock a .ic svg{width:19px;height:19px}.showcase-dock a.on{color:#08120e;background:var(--mint);border-radius:14px;box-shadow:0 8px 18px rgba(39,224,138,.25)}
.eyebrow{display:block;margin-bottom:8px;color:#008c51;font:800 10px/1 'Plus Jakarta Sans';letter-spacing:.16em}.customer-hero,.runner-hero,.admin-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;padding:22px;border-radius:26px;overflow:hidden}.customer-hero{background:linear-gradient(135deg,#0c2117,#123e2a);color:#fff;box-shadow:0 18px 34px rgba(5,37,23,.18)}.customer-hero::after,.runner-hero::after,.admin-hero::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-85px;top:-115px;background:radial-gradient(circle,rgba(39,224,138,.42),transparent 65%);pointer-events:none}.customer-hero .eyebrow,.runner-hero .eyebrow{color:#9df4c6}.customer-hero h2,.runner-hero h2,.admin-hero h2{margin:0;font-size:27px;line-height:1.05;position:relative;z-index:1}.customer-hero p,.runner-hero p,.admin-hero p{margin:8px 0 0;color:#b6d1c1;font-size:13px;font-weight:600;position:relative;z-index:1}.hero-orb{position:relative;z-index:1;width:54px;height:54px;display:grid;place-items:center;flex:none;border-radius:18px;background:linear-gradient(145deg,#38ef9e,#00a961);box-shadow:0 14px 26px rgba(0,0,0,.24)}.hero-orb svg{width:26px;height:26px;color:#fff}
.runner-hero{background:linear-gradient(135deg,#0bd482,#00a35e);color:#fff;box-shadow:0 20px 38px rgba(0,169,94,.27)}.runner-power,.hero-action{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;flex:none;border:0;border-radius:15px;padding:13px 15px;background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);color:#fff;font:800 13px 'Plus Jakarta Sans';cursor:pointer}.runner-power svg,.hero-action svg{width:18px;height:18px}.runner-hero.offline{background:linear-gradient(135deg,#18241f,#0b1611)}
.command-header{border-radius:0;gap:18px;padding:15px 24px}.command-brand{font-size:19px}.command-brand>div{display:grid;gap:4px}.command-brand small{margin:0}.command-nav{align-items:center;gap:4px;margin-left:14px!important}.command-nav .admin-nav-link{padding:9px 12px!important;color:#b8ccbf!important;border-radius:11px;font-size:12px!important}.command-nav .admin-nav-link svg{width:16px;height:16px}.command-nav .admin-nav-link.on{background:rgba(39,224,138,.15)!important;color:#9df4c6!important;box-shadow:none!important}.command-status{border:0;background:#d9f8e8;color:#007f48;cursor:pointer}.command-status i{background:#00a85d;box-shadow:none}
.admin-hero{background:linear-gradient(135deg,#0c2117,#173e2b);color:#fff;box-shadow:0 20px 42px rgba(5,37,23,.18)}.admin-hero .eyebrow{color:#a3f7c9}.admin-hero h2{font-size:32px}.hero-action{background:linear-gradient(135deg,#526cff,#344ce3);box-shadow:0 12px 24px rgba(52,76,227,.28)}
.customer-content .card,.runner-content .card,.admin-content .card{border-radius:22px;border:1px solid rgba(9,45,27,.10);box-shadow:0 12px 28px rgba(5,37,23,.08);background:rgba(255,255,255,.92)}.customer-content .saved-places-bar{margin:-4px 0 15px}.customer-content #map{height:390px!important;border-radius:24px!important;box-shadow:0 18px 36px rgba(5,37,23,.16)!important}.runner-content .target-card{border-radius:22px}.admin-content .bento-grid{gap:16px}.admin-content .stat{min-height:146px;border-radius:22px}.admin-content .stat.hl{background:linear-gradient(135deg,#0bd482,#00a35e)}
.app.admin-app{max-width:100%!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow-y:visible!important;overflow-x:clip!important;min-height:100vh!important;height:auto!important}
@media (min-width:900px){.admin-content{padding:34px 36px 70px;max-width:1240px;margin:0 auto;min-height:calc(100vh - 70px);overflow-y:visible!important}.admin-dock{display:none}.command-header{position:sticky;top:0;z-index:100}.app.admin-app{max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow-y:visible!important;overflow-x:clip!important;min-height:100vh!important;height:auto!important}.admin-hero{padding:28px 30px}.admin-content .card:hover,.admin-content .stat:hover{transform:translateY(-4px)}}
@media (max-width:699px){.showcase-top{padding:14px 16px}.showcase-content{padding:20px 16px 104px}.customer-hero,.runner-hero,.admin-hero{padding:19px;border-radius:22px}.customer-hero h2,.runner-hero h2{font-size:24px}.admin-hero h2{font-size:25px}.hero-action{padding:12px}.hero-action span{display:none}.command-header{padding:14px 16px}.command-header .command-nav,.command-header #sos_badge_wrap{display:none!important}.command-brand small{display:none}}
@media (prefers-reduced-motion:reduce){.showcase-content{animation:none}}
.customer-hero h2,.admin-hero h2{color:#fff!important}.customer-hero p,.admin-hero p{color:#c6e3d1!important}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; filter:grayscale(.4); transform:none}
.btn.secondary{background:var(--brand-soft); color:var(--brand-3); box-shadow:none; border:1px solid rgba(0,195,113,0.1)}
.btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow-sm)}
.btn.danger{background:var(--danger-soft); color:var(--danger); box-shadow:none}
.btn.dark{background:var(--ink); box-shadow:0 12px 28px rgba(10,21,18,.25)}
.btn.gold{background:linear-gradient(135deg,#ffdf5d,#f5b400);color:#4a3500;box-shadow:0 12px 28px rgba(245,180,0,.3)}
.btn.sm{width:auto; padding:12px 18px; font-size:14.5px; border-radius:14px}
.btn.block{width:100%}
.row-btns{display:flex; gap:12px}
.row-btns .btn{flex:1}
.fab{position:fixed;right:calc(50% - 240px + 20px);bottom:100px;width:auto;z-index:45;border-radius:999px;padding:16px 24px}
@media(max-width:480px){.fab{right:20px}}

/* ---------- inputs ---------- */
.field{margin-bottom:18px; position:relative}
.field label{display:block; font-size:13px; font-weight:800; color:var(--muted); margin:0 4px 8px; letter-spacing:.02em; transition:all .25s var(--spring)}
.field:focus-within label{color:var(--brand-3); transform:translateY(-2px)}
.input,select,textarea{
  width:100%; padding:16px 18px; border:1.5px solid var(--line); border-radius:16px;
  font-size:16px; font-weight:600; background:#fff; color:var(--ink); outline:none; font-family:inherit; 
  transition:all .2s var(--smooth); box-shadow:var(--shadow-sm);
}
.input::placeholder{color:var(--muted-2); font-weight:500}
.input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 5px var(--brand-soft), var(--shadow-sm); transform:translateY(-1px)}
.input.err{border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-soft)}
textarea{resize:vertical; min-height:80px}
.input-ic{position:relative}
.input-ic svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);transition:color .2s}
.input-ic .pass-toggle{left:auto!important;right:14px!important;cursor:pointer;color:var(--muted-2);padding:4px;border-radius:8px;display:flex;align-items:center}
.input-ic .pass-toggle:hover{color:var(--brand-3);background:var(--brand-soft)}
.input-ic .input{padding-left:48px}
.input-ic:has(.pass-toggle) .input{padding-right:48px}
.input-ic .input:focus + svg, .input-ic:focus-within svg {color:var(--brand-3)}
.input-dot{position:relative;padding-left:42px!important}
.dot-lead{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%}

/* ---------- service chips ---------- */
.services{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.svc{
  position:relative; border:1.5px solid var(--line); border-radius:20px; padding:18px 8px 14px; text-align:center;
  cursor:pointer; background:#fff; transition:all .3s var(--spring); user-select:none; box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.svc::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity .3s}
.svc:active{transform:scale(.88)!important}
.svc .ic{font-size:32px; line-height:1; transition:transform .3s var(--spring); position:relative;z-index:1}
.svc .nm{font-size:13px; font-weight:800; margin-top:8px; font-family:'Outfit'; position:relative;z-index:1; transition:color .2s}
.svc .fr{font-size:12px; color:var(--muted); margin-top:3px; font-weight:700; position:relative;z-index:1; transition:color .2s}
.svc.on{border-color:var(--brand-2); background:linear-gradient(160deg,#e4fdf2,#f0fff8); box-shadow:0 16px 32px rgba(0,195,113,.2), 0 0 0 3px rgba(0,195,113,.12); transform:translateY(-6px) scale(1.03)}
.svc.on .ic{transform:scale(1.2)}
.svc.on .nm{color:var(--brand-3)}
.svc.on .fr{color:var(--brand-2); font-weight:800}
.svc.on::after{content:'✓';position:absolute;top:-9px;right:-9px;width:26px;height:26px;background:var(--grad);color:#fff;border-radius:50%;font-size:13px;display:grid;place-items:center;box-shadow:var(--shadow-brand);border:2.5px solid #fff; animation:popIn .35s var(--spring)}

/* ---------- map ---------- */
#map,.map{height:320px; border-radius:22px; overflow:hidden; border:1px solid rgba(0,0,0,0.08); z-index:1; box-shadow:inset 0 0 10px rgba(0,0,0,0.05), var(--shadow)}
.map.tall{height:60vh; border-radius: 0 0 32px 32px; border-top:none; box-shadow:var(--shadow-lg)}
.leaflet-container{font-family:inherit!important}

/* ---------- lists ---------- */
.list-item{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2); transition:background .2s}
.list-item:active{background:rgba(0,0,0,0.02); border-radius:12px}
.list-item:last-child{border-bottom:none}
.list-item > svg{width:18px;height:18px;flex-shrink:0;opacity:.35;color:var(--ink)}
.avatar{width:50px; height:50px; border-radius:16px; background:var(--brand-soft); color:var(--brand-3);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; flex-shrink:0; font-family:'Outfit'}
.avatar svg{width:22px;height:22px}
.avatar.grad{background:var(--grad);color:#fff;box-shadow:var(--shadow-brand)}
.li-main{flex:1; min-width:0}
.li-title{font-weight:800; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Outfit'; color:var(--ink)}
.li-sub{font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; font-weight:600}
.li-end{text-align:right; flex-shrink:0}

/* ---------- badges ---------- */
.badge{font-size:11px; font-weight:800; padding:6px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-requested{background:#eef1ff;color:#5b58e8}
.b-accepted{background:var(--warn-soft);color:#c07d05}
.b-arrived{background:var(--brand-soft);color:var(--brand-3)}
.b-ongoing{background:var(--info-soft);color:#1f6fc4}
.b-completed{background:var(--brand-soft);color:var(--brand-3)}
.b-cancelled{background:var(--danger-soft);color:var(--danger)}
.b-active{background:var(--brand-soft);color:var(--brand-3)}
.b-blocked{background:var(--danger-soft);color:var(--danger)}

/* ---------- stat cards ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.stat{position:relative; overflow:hidden; background:var(--card); border:1px solid rgba(255,255,255,0.5); border-radius:20px; padding:20px; box-shadow:var(--shadow); transition:transform .2s var(--smooth)}
.stat:hover{transform:translateY(-2px)}
.stat .ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-3);display:grid;place-items:center;margin-bottom:12px}
.stat .ic svg{width:20px;height:20px}
.stat .n{font-size:30px; font-weight:900; line-height:1; font-family:'Outfit'}
.stat .l{font-size:13px; color:var(--muted); margin-top:6px; font-weight:700}
.stat .trend{font-size:12px;font-weight:800;margin-top:8px;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;background:var(--bg)}
.trend.up{color:var(--brand-3);background:var(--brand-soft)} .trend.down{color:var(--danger);background:var(--danger-soft)}
.stat.hl{background:var(--grad); color:#fff; border:none; box-shadow:var(--shadow-brand)}
.stat.hl .l{color:rgba(255,255,255,.9)} .stat.hl .ic{background:rgba(255,255,255,.2);color:#fff} .stat.hl .trend{background:rgba(0,0,0,0.15);color:#fff}
.stat.dark{background:var(--grad-dark);color:#fff;border:none;box-shadow:var(--shadow-lg)}
.stat.dark .l{color:rgba(255,255,255,.75)} .stat.dark .ic{background:rgba(255,255,255,.12);color:#fff} .stat.dark .trend{background:rgba(0,0,0,0.25);color:#fff}

/* ---------- charts ---------- */
.chart{width:100%}
.chart svg{width:100%;display:block;overflow:visible}
.chart .bar{transition:.4s var(--smooth)}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted);font-weight:700}
.chart-legend i{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:middle}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut-center{font-family:'Outfit';font-weight:900;font-size:24px}

/* ---------- ride status timeline ---------- */
.timeline{position:relative;padding-left:8px}
.tl-step{position:relative;padding:0 0 26px 36px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:'';position:absolute;left:11px;top:24px;bottom:-4px;width:3px;background:var(--line);border-radius:2px}
.tl-step:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:#fff;border:2.5px solid var(--line);display:grid;place-items:center;transition:all .3s var(--smooth)}
.tl-dot svg{width:12px;height:12px;color:#fff;animation:popIn .3s var(--spring)}
.tl-step.done .tl-dot{background:var(--brand);border-color:var(--brand);box-shadow:0 4px 10px rgba(0,195,113,.2)}
.tl-step.done::before{background:var(--brand)}
.tl-step.active .tl-dot{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 6px var(--brand-soft);animation:pulseDot 2s infinite}
.tl-t{font-weight:800;font-size:15px;font-family:'Outfit'}
.tl-s{font-size:13.5px;color:var(--muted);margin-top:2px;font-weight:600}
.tl-step.pending .tl-t{color:var(--muted-2)}

/* ---------- bottom nav ---------- */
.bottomnav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  background:rgba(255,255,255,0.88); backdrop-filter:saturate(200%) blur(32px); -webkit-backdrop-filter:saturate(200%) blur(32px);
  border-top:1px solid rgba(0,0,0,0.05); display:flex; z-index:50; padding-bottom:var(--safe-b);
  box-shadow:0 -1px 0 rgba(0,0,0,0.04), 0 -16px 48px rgba(10,21,18,.06);
}
.bottomnav a{
  flex:1; text-align:center; padding:12px 0 14px; color:var(--muted-2); font-size:11px; font-weight:800; cursor:pointer;
  position:relative; transition:color .25s var(--smooth); letter-spacing:.02em; text-transform:uppercase;
}
.bottomnav a .ic{display:grid;place-items:center;height:28px;margin-bottom:3px;position:relative}
.bottomnav a .ic svg{width:22px;height:22px;transition:all .3s var(--spring)}
.bottomnav a:active .ic svg{transform:scale(.8)}
.bottomnav a.on{color:var(--brand-3)}
.bottomnav a.on .ic{background:var(--brand-soft);border-radius:14px;width:48px;margin:0 auto 3px}
.bottomnav a.on .ic svg{transform:scale(1.05);color:var(--brand-3)}
.bottomnav a.on::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--grad);animation:navSlide .3s var(--spring)}

/* ---------- helpers ---------- */
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:13.5px}
.mt{margin-top:16px}.mb{margin-bottom:16px}.mt-s{margin-top:10px}
.flex{display:flex; align-items:center; gap:12px}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.wrap{flex-wrap:wrap}
.big-fare{font-size:36px; font-weight:900; font-family:'Outfit'; letter-spacing:-.04em}
.divider{height:1px; background:var(--line-2); margin:20px 0}
.empty{text-align:center; color:var(--muted); padding:50px 20px; animation:fadeIn .5s var(--smooth)}
.empty .ic{width:80px;height:80px;border-radius:24px;background:var(--brand-soft);display:grid;place-items:center;margin:0 auto 16px;color:var(--brand-3);box-shadow:var(--shadow-sm)}
.empty .ic svg{width:36px;height:36px}
.empty h3{font-size:18px;margin-bottom:6px;color:var(--ink);font-family:'Outfit'}
.otp-box{font-family:'Outfit';font-size:38px; font-weight:900; letter-spacing:14px; text-align:center; color:var(--brand-3);
  background:var(--brand-soft); border-radius:20px; padding:20px 0 20px 14px; border:2px dashed var(--brand-2)}
.kv{display:flex;justify-content:space-between;padding:11px 0;font-size:14.5px;border-bottom:1px solid var(--line-2)}
.kv:last-child{border:none}.kv .k{color:var(--muted);font-weight:600}.kv .v{font-weight:800}
.rating-stars{color:var(--gold);letter-spacing:3px;font-size:18px}
.seg{display:flex;gap:6px;background:var(--line-2);padding:6px;border-radius:16px}
.seg .opt{flex:1;text-align:center;padding:11px;border-radius:12px;font-weight:800;font-size:14px;cursor:pointer;color:var(--muted);transition:all .25s var(--smooth)}
.seg .opt:active{transform:scale(.95)}
.seg .opt.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/* ---------- skeleton ---------- */
.sk{position:relative;overflow:hidden;background:#eef3f0;border-radius:12px}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:shimmer 1.5s infinite}
.sk-line{height:14px;margin:10px 0;border-radius:7px}
.sk-card{height:100px;border-radius:22px;margin-bottom:16px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(16px) scale(.95); bottom:108px; z-index:200;
  background:rgba(12,24,18,0.95); color:#fff; padding:13px 20px; border-radius:20px; font-size:14px; font-weight:700;
  box-shadow:0 20px 60px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0; transition:none; white-space:nowrap; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;gap:10px; border:1px solid rgba(255,255,255,.08);
}
.toast svg{width:18px;height:18px;flex-shrink:0;opacity:.9}
.toast.show{animation:toastIn .35s var(--spring) forwards}
.toast.hide{animation:toastOut .25s var(--smooth) forwards}
.toast.err{background:rgba(200,40,46,0.95);border-color:rgba(255,100,100,.2)}
.err-shake{animation:shake .4s var(--spring)}

/* ---------- splash auth hero ---------- */
.splash{position:fixed;inset:0;background:var(--bg);z-index:999;display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--smooth)}
.s-logo{text-align:center; animation:scaleUp .8s var(--spring)}
.s-mark{width:72px;height:72px;border-radius:22px;background:var(--grad);color:#fff;display:grid;place-items:center;margin:0 auto 20px;box-shadow:var(--shadow-brand)}
.s-mark svg{width:36px;height:36px}
.s-name{font-size:36px;font-weight:900;font-family:'Outfit';letter-spacing:-.05em}
.s-name b{color:var(--brand)}
.s-tag{font-size:14px;color:var(--muted);font-weight:700;margin-top:8px;letter-spacing:.05em;text-transform:uppercase}
.s-load{width:48px;height:4px;background:var(--line);border-radius:2px;margin:32px auto 0;overflow:hidden;position:relative}
.s-load i{position:absolute;left:0;top:0;height:100%;background:var(--brand);width:50%;border-radius:2px;animation:shimmer 1s infinite cubic-bezier(.2,.8,.2,1)}

.auth-wrap{padding:24px 20px; animation:fadeUp .6s var(--spring) both; display:flex; flex-direction:column; min-height:100dvh; justify-content:center}
.auth-wrap .card{background:rgba(255,255,255,0.72);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border:1px solid rgba(255,255,255,0.95);box-shadow:0 20px 60px rgba(10,21,18,0.1), inset 0 2px 0 rgba(255,255,255,0.8)}
.auth-logo{text-align:center;margin:0 0 32px}
.auth-logo .mark-ic{width:68px;height:68px;background:var(--grad);color:#fff;border-radius:22px;display:grid;place-items:center;margin:0 auto 20px;box-shadow:var(--shadow-brand), 0 0 0 8px var(--brand-soft);animation:floatY 4s ease-in-out infinite}
.auth-logo .mark-ic svg{width:34px;height:34px}
.auth-logo .mark{font-size:30px;font-weight:900;font-family:'Outfit';letter-spacing:-.04em}
.auth-logo .mark b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-logo .tag{color:var(--muted);font-size:14.5px;font-weight:600;margin-top:6px}

.spin{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
.switch-link{text-align:center;font-size:14px;font-weight:600;margin-top:20px;color:var(--muted)}
.switch-link a{font-weight:800;color:var(--brand-3);cursor:pointer;margin-left:4px}
.switch-link a:hover{text-decoration:underline}








.hero-head{padding:10px 0 24px; animation:scaleUp .6s var(--spring)}
.hero-head h2{font-size:26px;background:linear-gradient(135deg,var(--ink) 0%,var(--brand-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.modal-back{position:fixed;inset:0;background:rgba(8,16,13,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;transition:opacity .3s var(--smooth)}
.modal-back.show{opacity:1;pointer-events:auto}
.modal{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:480px;background:var(--bg);border-radius:32px 32px 0 0;padding:24px;z-index:101;pointer-events:none;transition:transform .4s var(--spring);box-shadow:0 -20px 60px rgba(0,0,0,0.15)}
.modal.show{transform:translateX(-50%) translateY(0);pointer-events:auto}
.modal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:18px;background:var(--line-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:all .2s}
.modal-close:active{transform:scale(0.9)}
.modal h2{font-size:22px;margin-bottom:24px}

.rider-card{background:var(--grad-dark);color:#fff;padding:20px;border-radius:24px;margin-bottom:20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:16px}
.rider-card .avatar{width:64px;height:64px;background:rgba(255,255,255,0.1);color:#fff;border-radius:20px;font-size:24px}
.rider-card .li-title{font-size:18px}
.rider-card .li-sub{color:rgba(255,255,255,0.7)}
.rider-card .btn.secondary{background:rgba(255,255,255,0.15);color:#fff;border:none}

.pulse-active{position:relative;}
.pulse-active::before{content:'';position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--brand);animation:pulseDot 2s infinite}

/* ---------- FAB Locate Button ---------- */
.fab-locate{
  position:absolute; left:16px; bottom:16px; z-index:10;
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink);
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,0.18);
  border:1.5px solid rgba(0,0,0,0.06); cursor:pointer; transition:transform .2s var(--spring);
}
.fab-locate:active{transform:scale(0.88)}
.fab-locate svg{width:22px;height:22px;color:var(--brand-3)}

/* ---------- SOS Emergency Button ---------- */
.btn-sos{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(135deg,#ff3b30,#c0150b); color:#fff; font-weight:800; font-size:13px;
  padding:8px 14px; border-radius:14px; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(255,59,48,0.35);
  transition:transform .2s var(--spring); position:relative;
}
.btn-sos:active{transform:scale(0.92)}
.btn-sos svg{width:16px;height:16px}
.btn-sos::before{content:'';position:absolute;inset:-3px;border-radius:inherit;border:2px solid #ff3b30;animation:pulseDot 1.5s infinite;opacity:0.6}

/* ---------- Promo Code Row ---------- */
.promo-row{display:flex;gap:8px;align-items:center;margin:14px 0 6px}
.promo-input{
  flex:1; padding:12px 14px; border:1.5px dashed var(--line); border-radius:14px;
  font-family:inherit; font-size:14px; font-weight:700; text-transform:uppercase;
  background:#fafcfb; color:var(--ink); outline:none; transition:border-color .2s;
}
.promo-input:focus{border-color:var(--brand);background:#fff}
.promo-btn{
  padding:12px 16px; border-radius:14px; background:var(--ink); color:#fff;
  border:none; font-weight:800; font-size:13px; cursor:pointer; transition:transform .15s;
}
.promo-btn:active{transform:scale(0.92)}
.promo-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--brand-soft);
  color:var(--brand-3); padding:6px 12px; border-radius:12px; font-size:12.5px;
  font-weight:800; margin-top:8px; border:1px solid rgba(0,195,113,0.2);
}
.promo-badge .rm{cursor:pointer;opacity:.6;margin-left:4px;font-size:14px}
.promo-badge .rm:hover{opacity:1}

/* ---------- Topup Preset Chips ---------- */
.topup-chips{display:flex;gap:10px;margin:16px 0}
.chip-btn{
  flex:1; text-align:center; padding:14px 8px; border-radius:14px; background:var(--line-2);
  border:1.5px solid transparent; font-weight:800; font-size:15px; cursor:pointer;
  transition:all .2s var(--spring); color:var(--ink);
}
.chip-btn:active{transform:scale(0.92)}
.chip-btn.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-3)}

/* ---------- Advanced Animation & 3D Motion System ---------- */

/* 1. New Keyframes */
@keyframes tilt3dReset {
  from { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
  to { transform: rotateX(0) rotateY(0); }
}
@keyframes auroraShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(0,185,104,0.4)); }
  50% { filter: drop-shadow(0 0 16px rgba(0,185,104,0.8)); }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}
@keyframes counterRoll {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes cardEntrance {
  from { transform: rotateX(8deg) translateY(30px); opacity: 0; }
  to { transform: rotateX(0) translateY(0); opacity: 1; }
}
@keyframes flipIn {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0); }
}
@keyframes flipOut {
  from { transform: rotateY(0); }
  to { transform: rotateY(-90deg); }
}
@keyframes confettiDrop {
  from { transform: translateY(-100vh) rotate(0deg) scale(0.5); }
  to { transform: translateY(100vh) rotate(720deg) scale(1); }
}
@keyframes neonTrail {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes elasticScale {
  0% { transform: scale(0); }
  40% { transform: scale(1.08); }
  70% { transform: scale(0.96); }
  90% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes morphReveal {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(100% at 50% 50%); }
}

/* 2. 3D Tilt Card System */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tilt-3d:hover {
  box-shadow: 0 25px 50px rgba(10,21,18,.12), 0 8px 20px rgba(10,21,18,.06);
}
.tilt-3d .tilt-inner {
  transform: translateZ(30px);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 3. Glassmorphism Depth Layers */
.glass-deep {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 
    0 8px 32px rgba(10,21,18,.06),
    0 2px 8px rgba(10,21,18,.03),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(255,255,255,0.2);
}

/* 4. Cursor Glow */
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,130,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: left, top;
}

/* 5. Magnetic Button */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* 6. Scroll Reveal */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 7. 3D Service Selector */
.svc-3d {
  perspective: 800px;
  transform-style: preserve-3d;
}
.svc-3d .svc {
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.svc-3d .svc.on {
  transform: translateY(-8px) scale(1.05) rotateY(8deg);
}

/* 8. Neon Route Glow */
.leaflet-overlay-pane svg path.neon-route {
  filter: drop-shadow(0 0 6px rgba(0,185,104,0.6)) drop-shadow(0 0 12px rgba(0,185,104,0.3));
}

/* 9. Confetti Canvas */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
}

/* 10. Splash Morph Exit */
.splash.morph-exit {
  animation: morphReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards reverse;
}
.splash .s-logo.flip-exit {
  animation: flipOut 0.5s cubic-bezier(0.6, 0, 0.4, 1) forwards;
  transform-style: preserve-3d;
}

/* 11. Animated Vehicle Marker */
.veh-marker-3d {
  position: relative;
  animation: floatY 3s ease-in-out infinite;
}
.veh-marker-3d::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(0,217,130,0.4);
  animation: radarSweep 2s linear infinite;
}
.veh-marker-3d .shadow-blob {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  filter: blur(3px);
}

/* 12. Skeleton 3D Upgrade */
.sk {
  perspective: 600px;
}
.sk::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.9) 50%, transparent 70%);
}

/* 13. View Transition Classes */
.view-exit {
  animation: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-name: viewExit;
}
.view-enter {
  animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15) both;
  animation-name: viewEnter;
}
@keyframes viewExit {
  to { opacity: 0; transform: translateX(-30px) scale(0.97); }
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateX(30px) scale(0.97); }
}

/* ---------- Skiper UI, Unlumen UI & SmoothUI Architecture ---------- */

/* 15. Animated Border Beam (Skiper UI) */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBeam {
  to { --beam-angle: 360deg; }
}
.border-beam {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.border-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--beam-angle), transparent 25%, #00E676 50%, #8affce 65%, transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotateBeam 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* 16. Dynamic Island Widget (SmoothUI) */
.dynamic-island {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 160;
  background: rgba(8, 20, 15, 0.94);
  color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 230, 118, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15);
  cursor: pointer;
  user-select: none;
  max-width: 90vw;
}
.dynamic-island:hover {
  transform: translateX(-50%) scale(1.03);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 230, 118, 0.35);
}
.dynamic-island .di-pill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E676;
  animation: pulseDot 1.4s infinite;
  box-shadow: 0 0 10px #00E676;
}
.dynamic-island .di-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.dynamic-island .di-badge {
  font-size: 11px;
  background: rgba(0, 230, 118, 0.2);
  color: #8affce;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.dynamic-island.di-active {
  padding: 10px 20px;
  border-radius: 24px;
  background: rgba(6, 16, 12, 0.97);
  border-color: rgba(0, 230, 118, 0.45);
}
.dynamic-island.di-sos {
  background: rgba(220, 38, 38, 0.95);
  border-color: rgba(255, 120, 120, 0.6);
  animation: pulseDot 1s infinite;
}

/* 17. Luminous Cyber Glass & Conic Glow Buttons (Unlumen UI) */
.glass-cyber {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(8, 20, 15, 0.85);
  backdrop-filter: blur(36px) saturate(220%);
  -webkit-backdrop-filter: blur(36px) saturate(220%);
  border: 1px solid rgba(138, 255, 206, 0.25);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 24px rgba(0, 230, 118, 0.15);
  color: #fff;
}
.btn-luminous {
  position: relative;
  background: linear-gradient(135deg, #00E676 0%, #00B368 100%);
  border: none;
  box-shadow: 0 12px 32px rgba(0, 230, 118, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.btn-luminous::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--beam-angle), #8affce, #00E676, #00B368, #8affce);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotateBeam 3s linear infinite;
  opacity: 0.85;
}

/* 18. Siri / Energy Radar Orb (SmoothUI + Unlumen) */
.energy-orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  position: relative;
}
.energy-orb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #8affce 0%, #00E676 40%, #00B368 75%, transparent 100%);
  box-shadow: 0 0 45px rgba(0, 230, 118, 0.65), 0 0 90px rgba(0, 230, 118, 0.35), inset 0 0 25px #fff;
  animation: pulseDot 2s ease-in-out infinite alternate;
  position: relative;
}
.energy-orb::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed rgba(0, 230, 118, 0.55);
  animation: radarSweep 8s linear infinite;
}
.energy-orb::after {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(138, 255, 206, 0.25);
  animation: radarSweep 14s linear infinite reverse;
}

/* 19. Fluid Morphing Segmented Switch (Skiper UI) */
.seg-fluid {
  position: relative;
  display: flex;
  background: rgba(0, 0, 0, 0.04);
  padding: 5px;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.seg-fluid .opt {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.seg-fluid .opt.on {
  color: var(--ink);
}
.seg-fluid-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(10, 21, 18, 0.08), 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
  z-index: 1;
  pointer-events: none !important;
}

/* 20. Bento Grid Layout (Skiper UI) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.bento-card-lg {
  grid-column: span 2;
}

/* Leaflet Flowing Route & Radar Beacon */
@keyframes antPathMarch {
  to {
    stroke-dashoffset: -40px;
  }
}
.leaflet-overlay-pane svg path.neon-route-flow {
  stroke-dasharray: 10, 14;
  animation: antPathMarch 1.4s linear infinite;
}

@keyframes beaconWave {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pin-beacon {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2.5px solid #00E676;
  animation: beaconWave 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  pointer-events: none;
}
.pin-beacon.drop {
  border-color: #f2494f;
}

/* 13. Quick Chips & Saved Places Bar */
.chip-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-bar::-webkit-scrollbar { display: none; }
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.quick-chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 185, 104, 0.15);
}
.quick-chip:active { transform: scale(0.95); }

/* Driver Card Pro & Plate Badge */
.driver-card-pro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  box-shadow: var(--shadow-sm);
}
.driver-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.driver-avatar-wrap img, .driver-avatar-wrap .av-fallback {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  background: #0a1f17;
  color: #00E676;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.driver-avatar-wrap .badge-veh {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}
.plate-badge {
  display: inline-block;
  background: #fffbdf;
  border: 1.5px solid #d4a017;
  color: #1a1a1a;
  font-family: monospace, sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Daily Target Progress */
.target-card {
  background: linear-gradient(135deg, #071a13 0%, #0d2e22 100%);
  border: 1px solid rgba(0, 230, 118, 0.25);
  border-radius: 20px;
  padding: 18px;
  color: #fff;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.target-bar-wrap {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.target-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d982, #8affce);
  border-radius: 999px;
  transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 10px rgba(0, 217, 130, 0.6);
}

/* Admin Desktop Layout & Grid */
@media (min-width: 900px) {
  .app.admin-app {
    max-width: 1240px;
    padding: 24px 36px 60px;
    background: #f8faf9;
    box-shadow: none;
  }
  .app.admin-app .topbar {
    width: 100%;
    border-radius: 18px;
    margin-top: 14px;
    padding: 14px 24px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
  }
  .app.admin-app .bottomnav {
    display: none;
  }
  .app.admin-app .admin-nav-desktop {
    display: flex !important;
    gap: 10px;
  }
  .app.admin-app .admin-nav-link {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .app.admin-app .admin-nav-link.on {
    background: var(--brand-soft);
    color: var(--brand-3);
  }
  .app.admin-app .admin-grid-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
  }
  .app.admin-app .bento-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .app.admin-app .bento-grid .bento-card-lg {
    grid-column: span 2 !important;
  }
}

/* 14. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tilt-3d, .btn-magnetic, .border-beam::before, .btn-luminous::before, .energy-orb, .energy-orb::before, .energy-orb::after {
    transform: none !important;
    animation: none !important;
  }
  .cursor-glow {
    display: none !important;
  }
}

/* ============================================================
   AI CHATBOT UI — RapiBot
   ============================================================ */

/* 1. Floating Action Button */
.chat-fab {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d982, #00b968);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,217,130,0.35);
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s;
  animation: fabPulse 3s ease-in-out infinite;
}

@keyframes fabPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0,217,130,0.35);
  }
  50% {
    box-shadow: 0 4px 30px rgba(0,217,130,0.55);
  }
}

.chat-fab:hover {
  transform: scale(1.08);
}

.chat-fab.active {
  transform: rotate(45deg);
  animation: none;
}

/* 2. Chat Panel */
.chat-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px 24px 0 0;
  transition: max-height 0.4s cubic-bezier(0.2,0.8,0.2,1), opacity 0.3s;
  opacity: 0;
  display: none;
  visibility: hidden;
  pointer-events: none;
  flex-direction: column;
}

.chat-drawer.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: 75vh;
  opacity: 1;
}

@media (min-width: 768px) {
  .chat-drawer {
    right: 20px;
    left: auto;
    bottom: 90px;
    width: 400px;
    border-radius: 24px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
  }
  
  .chat-drawer.open {
    max-height: 560px;
  }
}

/* 3. Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  border-radius: 24px 24px 0 0;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}

.chat-ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00d982, #00b968);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.chat-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.chat-close:hover {
  background: var(--line-2);
}

/* 4. Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  max-height: calc(75vh - 180px);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

@media (min-width: 768px) {
  .chat-messages {
    max-height: 340px;
  }
}

/* 5. Message Bubbles */
.chat-bubble {
  display: flex;
  gap: 8px;
  max-width: 85%;
  animation: chatBubbleIn 0.3s cubic-bezier(0.2,0.8,0.2,1) both;
}

@keyframes chatBubbleIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble.bot {
  align-self: flex-start;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00d982, #00b968);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.chat-content {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
}

.chat-bubble.bot .chat-content {
  background: var(--line-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.chat-bubble.user .chat-content {
  background: var(--brand);
  color: white;
  border-bottom-right-radius: 4px;
}

/* 6. Typing Indicator */
.typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  align-items: center;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-2);
  opacity: 0.4;
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* 7. Quick Reply Chips */
.chat-suggestions {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chat-suggestions::-webkit-scrollbar {
  display: none;
}

.chat-chip {
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--line-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-chip:hover {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

/* 8. Input Area */
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.chat-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  outline: none;
  background: var(--bg);
  transition: border-color 0.2s;
}

.chat-input:focus {
  border-color: var(--brand);
}

.chat-input::placeholder {
  color: var(--ink-2);
  opacity: 0.6;
}

.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}

.chat-send:hover {
  transform: scale(1.05);
  background: var(--brand-2);
}

.chat-send svg {
  width: 18px;
  height: 18px;
}

/* 9. Inline Action Buttons */
.chat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--brand);
  background: transparent;
  color: var(--brand);
  transition: all 0.2s;
}

.chat-action-btn:hover {
  background: var(--brand);
  color: white;
}

.chat-action-btn.danger {
  border-color: #ef4444;
  color: #ef4444;
}

.chat-action-btn.danger:hover {
  background: #ef4444;
  color: white;
}

/* ============================================================
   RAPIDO SUITE ENHANCEMENTS — Radar, Payment, Timer & Fleet
   ============================================================ */

/* 1. Radar Searching Animation */
.radar-box {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-center {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d982, #00b968);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,217,130,0.4);
}
.radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,217,130,0.6);
  animation: radarWave 2.4s cubic-bezier(0.1, 0.5, 0.4, 1) infinite;
  pointer-events: none;
}
.radar-ring:nth-child(2) { animation-delay: 0.8s; }
.radar-ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes radarWave {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 2. Payment Method Selector */
.pay-methods {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.pay-card {
  flex: 1;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pay-card:hover {
  border-color: var(--brand);
  background: #f0fdf4;
}
.pay-card.active {
  border-color: var(--brand);
  background: #f0fdf4;
  box-shadow: 0 4px 14px rgba(0,217,130,0.18);
}
.pay-card .p-icon { font-size: 22px; }
.pay-card .p-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.pay-card .p-sub { font-size: 11px; font-weight: 600; color: var(--ink-2); }

/* 3. Saved Places Chips Bar */
.saved-places-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 10px;
  scrollbar-width: none;
}
.saved-places-bar::-webkit-scrollbar { display: none; }
.place-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.place-chip:hover {
  border-color: var(--brand);
  color: var(--brand-2);
  background: #f0fdf4;
}

/* 4. Runner Incoming Job Offer Modal & Countdown */
.offer-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,21,18,0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: cardEntrance 0.3s ease-out;
}
.offer-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  text-align: center;
  position: relative;
}
.timer-container {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
}
.timer-svg {
  transform: rotate(-90deg);
  width: 76px;
  height: 76px;
}
.timer-svg circle {
  fill: none;
  stroke-width: 6;
}
.timer-bg { stroke: #edf1ef; }
.timer-progress {
  stroke: #00d982;
  stroke-dasharray: 201;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

/* 5. Tipping & Compliment Badges */
.tip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.tip-chip {
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--line-2);
  border: 1.5px solid transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.tip-chip.active {
  background: #f0fdf4;
  border-color: var(--brand);
  color: var(--brand-2);
}
.badge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.badge-chip {
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--line-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.badge-chip.active {
  background: #f0fdf4;
  border-color: var(--brand);
  color: var(--brand-2);
}

/* 6. Admin Live Fleet Marker */
.fleet-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 3px solid #00d982;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  font-size: 16px;
  position: relative;
}
.fleet-pin.busy {
  border-color: #f59e0b;
}
.fleet-pin.offline {
  border-color: #94a3b8;
  opacity: 0.6;
}
.fleet-dot-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00d982;
  border: 2px solid white;
}
.fleet-dot-indicator.busy { background: #f59e0b; }
.fleet-dot-indicator.offline { background: #94a3b8; }

/* 7. SOS Emergency Alert Card */
.sos-banner {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 12px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  animation: glowPulse 2s infinite;
}

/* ============================================================
   RAPIGO SIGNATURE RAPIDO MOBILITY DESIGN SYSTEM — tokens in master :root
   ============================================================ */

/* Full-bleed Map Canvas */
.fullbleed-map-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(10,21,18,0.08);
  border: 1.5px solid rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.fullbleed-map-wrap #map {
  width: 100%;
  height: 100%;
  border-radius: 22px;
}

/* Route Origin-Destination Connector */
.route-connector-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(10,21,18,0.04);
  position: relative;
  margin-bottom: 16px;
}
.route-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.route-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,210,106,0.2);
}
.route-dot.pickup { background: #00D26A; }
.route-dot.drop { background: #EF4444; border-radius: 3px; }
.route-line-vert {
  position: absolute;
  left: 22px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  border-left: 2px dashed #cbd5e1;
  z-index: 1;
}
.route-input {
  flex: 1;
  border: none;
  background: #f8fafc;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  transition: all 0.2s;
}
.route-input:focus {
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #00D26A, 0 2px 8px rgba(0,210,106,0.15);
}

/* Service Tier Cards */
.tier-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid transparent;
  box-shadow: 0 2px 10px rgba(10,21,18,0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2,0.8,0.2,1);
  margin-bottom: 8px;
}
.tier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10,21,18,0.06);
}
.tier-card.selected {
  border-color: #00D26A;
  background: linear-gradient(135deg, #fafffc 0%, #f0fdf4 100%);
  box-shadow: 0 8px 24px rgba(0,210,106,0.15);
}
.tier-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.tier-card.selected .tier-icon-wrap {
  background: #00D26A;
  color: white;
  transform: scale(1.05);
}

/* Sonar Radar Idle Sweep */
.sonar-radar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  position: relative;
}
.sonar-rings {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sonar-center-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00D26A, #00A854);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,210,106,0.4);
}
.sonar-pulse-ring {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 2px solid rgba(0,210,106,0.3);
  animation: sonarWave 2.4s cubic-bezier(0.1,0.7,0.1,1) infinite;
}
.sonar-pulse-ring:nth-child(2) {
  animation-delay: 0.8s;
}
.sonar-pulse-ring:nth-child(3) {
  animation-delay: 1.6s;
}
@keyframes sonarWave {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Digital Captain ID Card (Obsidian Metallic Hologram) */
.captain-id-card-wrap {
  background: radial-gradient(120% 120% at 10% 10%, #1e293b 0%, #0f172a 60%, #020617 100%);
  border-radius: 24px;
  padding: 24px;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 40px rgba(15,23,42,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.captain-id-card-wrap::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 200, 0, 0.08) 45%,
    rgba(0, 210, 106, 0.12) 50%,
    transparent 55%
  );
  transform: rotate(30deg);
  animation: hologramGleam 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hologramGleam {
  0%, 100% { transform: translateX(-100%) rotate(30deg); }
  50% { transform: translateX(100%) rotate(30deg); }
}
.kyc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,210,106,0.15);
  border: 1px solid rgba(0,210,106,0.4);
  color: #00E676;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* High-Contrast Bento Metric Grid (Admin) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.bento-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
  transition: all 0.25s cubic-bezier(0.2,0.8,0.2,1);
  position: relative;
  overflow: hidden;
}
.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.bento-card.primary {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 28px rgba(15,23,42,0.15);
}
.bento-card.primary .bento-label { color: rgba(255,255,255,0.7); }
.bento-card.primary .bento-val { color: #00E676; }
.bento-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 8px;
}
.bento-val {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
}
.bento-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #00D26A;
  background: rgba(0,210,106,0.12);
  padding: 3px 8px;
  border-radius: 12px;
  margin-top: 8px;
}

/* Final cascade for showcase mode */
body{background:radial-gradient(900px 480px at 50% -120px,rgba(0,230,118,.12),transparent 70%),linear-gradient(180deg,#f6faf8 0%,#eef5f1 48%,#e7f0eb 100%)}
.app{max-width:520px;background:radial-gradient(540px 260px at 50% 0,rgba(255,255,255,.98),transparent 80%),linear-gradient(180deg,#f8fbf9 0%,#eef5f1 58%,#e8f1ec 100%)}
.topbar{padding-left:22px;padding-right:22px;background:rgba(248,251,249,.86);border-bottom-color:rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(8,31,21,.025),0 8px 24px rgba(8,31,21,.035)}
.topbar .brand{font-size:23px;letter-spacing:-.7px}.topbar .brand .logo-mark{width:31px;height:31px;border-radius:10px;box-shadow:0 8px 20px rgba(0,195,113,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.content{padding:24px 22px 124px}.hero-head{padding-top:8px}.hero-head h2{font-size:30px;line-height:1.05}.section-title{margin-top:20px;color:#688075;font-size:11px;letter-spacing:.14em}
.card{border-color:rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(8,31,21,.07),0 2px 8px rgba(8,31,21,.035);border-radius:26px;padding:22px}.card:hover{transform:translateY(-2px)}.card.brand,.card.dark{box-shadow:0 28px 70px rgba(8,31,21,.14),0 10px 24px rgba(8,31,21,.06)}
.btn{min-height:54px;border-radius:17px;font-size:15px;letter-spacing:-.02em}.btn.sm{min-height:42px;border-radius:14px}
.input,.select,input:not(.form-ctrl),select,textarea{border-color:rgba(8,31,21,.10);background:rgba(255,255,255,.88);box-shadow:inset 0 1px 2px rgba(8,31,21,.025),0 1px 0 rgba(255,255,255,.9)}
.input:focus,input:not(.form-ctrl):focus,select:focus,textarea:focus{outline:none;border-color:rgba(0,195,113,.62);background:#fff;box-shadow:0 0 0 4px rgba(0,195,113,.12),0 4px 12px rgba(8,31,21,.05)}
.bottomnav{height:78px;padding-bottom:var(--safe-b);background:rgba(250,252,251,.92);border-top:1px solid rgba(8,31,21,.07);box-shadow:0 -12px 32px rgba(8,31,21,.07);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.bottomnav a{min-width:74px;font-size:10px;font-weight:800;letter-spacing:.02em}.bottomnav a .ic{width:24px;height:24px;margin-bottom:3px}.map{border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 30px rgba(8,31,21,.08)}
button:focus-visible,a:focus-visible,input:not(.form-ctrl):focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,195,113,.35);outline-offset:3px}
@media (min-width:700px){.app:not(.admin-app):not(.app-auth-full):not(.app-shell-view){margin:18px auto;min-height:calc(100vh - 36px);border:1px solid rgba(255,255,255,.9);border-radius:32px;overflow-y:visible;overflow-x:clip;box-shadow:0 30px 90px rgba(8,31,21,.14)}.topbar{border-radius:31px 31px 0 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* ============================================================
   IMMERSIVE RESPONSIVE ARCHITECTURE (DESKTOP DUAL-PANE & SPLIT AUTH)
   ============================================================ */

/* Fullscreen app wrappers */
.app.app-auth-full {
  max-width: 100% !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: #080D12 !important;
  overflow-y: visible !important;
  overflow-x: clip !important;
}

/* ============================================================
   CYBER-METROPOLITAN HYPER-MOBILITY & NEO-EMERALD GLASSMORPHISM AUTH
   ============================================================ */
@keyframes orbFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -24px) scale(1.1); }
}
@keyframes orbFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 30px) scale(0.92); }
}
@keyframes btnShimmer {
  0% { transform: translateX(-150%) skewX(-25deg); }
  35%, 100% { transform: translateX(250%) skewX(-25deg); }
}
@keyframes pulseRadarRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.auth-split-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  width: 100%;
  position: relative;
  overflow-y: visible;
  overflow-x: clip;
  background-color: #030705;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(0, 230, 118, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(0, 210, 106, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 50% 15%, rgba(255, 200, 0, 0.04) 0%, transparent 40%),
    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}

/* Left Showcase Panel (Desktop) */
.auth-showcase-panel {
  display: none;
  position: relative;
  background: linear-gradient(135deg, rgba(6, 16, 10, 0.9) 0%, rgba(3, 7, 5, 0.95) 100%);
  padding: 56px 48px;
  overflow: visible !important;
  color: #FFFFFF;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
}

.auth-showcase-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.65;
}
.auth-showcase-bg-orb.orb-1 {
  top: -80px;
  left: 5%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 230, 118, 0.18) 0%, rgba(0, 230, 118, 0) 70%);
  animation: orbFloatA 12s infinite ease-in-out;
}
.auth-showcase-bg-orb.orb-2 {
  bottom: -90px;
  right: 5%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 200, 0, 0.12) 0%, rgba(255, 200, 0, 0) 70%);
  animation: orbFloatB 14s infinite ease-in-out;
}

.showcase-content-inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
  margin-bottom: 24px;
}
.auth-brand-badge .badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #00E676 0%, #00B050 100%);
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(0, 230, 118, 0.4);
  color: #040906;
}
.auth-brand-badge .badge-title {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #FFFFFF !important;
}
.auth-brand-badge .badge-title b { color: #FFC800; }
.auth-brand-badge .badge-sub {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #00E676;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 6px;
}

/* Explicit High-Contrast Guarantee for Headlines */
.showcase-headline,
.auth-showcase-panel h1.showcase-headline {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  color: #FFFFFF !important;
  margin: 0 0 16px 0 !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.showcase-headline .mint-text {
  background: linear-gradient(135deg, #00E676 0%, #69F0AE 60%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(0, 230, 118, 0.35));
}
.showcase-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: #94A3B8 !important;
  margin: 0 0 24px 0;
  max-width: 520px;
}

/* Enterprise Network Showcase Card */
.auth-showcase-card {
  width: 100%;
  background: rgba(13, 24, 18, 0.72);
  border: 1px solid rgba(0, 230, 118, 0.25);
  border-radius: 20px;
  padding: 18px 20px;
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 28px rgba(0,230,118,0.08);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.auth-showcase-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 230, 118, 0.5), transparent);
}
.metric-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.metric-veh-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #00E676;
}
.metric-eta-badge {
  font-size: 12px;
  font-weight: 700;
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.metric-eta-badge .pulse-green-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
}

.sim-route-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 16px;
  padding: 0 4px;
}
.sim-route-line {
  position: absolute;
  left: 20px; right: 20px; top: 50%; height: 2px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  z-index: 1;
}
.sim-route-progress {
  position: absolute;
  left: 20px; width: 45%; top: 50%; height: 2px;
  background: linear-gradient(90deg, #00E676, #FFC800);
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.5);
}
.sim-node {
  position: relative;
  z-index: 3;
  width: 14px; height: 14px; border-radius: 50%;
  background: #030705;
  border: 3px solid #00E676;
  box-shadow: 0 0 10px rgba(0,230,118,0.6);
}
.sim-node.dest {
  border-color: #FFC800;
  box-shadow: 0 0 10px rgba(255,200,0,0.6);
}

.metric-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.sim-driver-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-driver-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: grid; place-items: center;
  font-size: 16px;
}
.sim-driver-text b { color: #FFFFFF; font-size: 13px; display: block; }
.sim-driver-text span { color: #94A3B8; font-size: 11px; }
.metric-tag-chip {
  background: rgba(0, 230, 118, 0.15);
  border: 1px dashed #00E676;
  color: #00E676;
  font-family: monospace;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 8px;
}

/* Feature Bento Grid */
.showcase-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.bento-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(14px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 230, 118, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 230, 118, 0.08);
}
.bento-ic { font-size: 22px; margin-bottom: 6px; }
.bento-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #FFFFFF !important;
  margin-bottom: 2px;
}
.bento-sub { font-size: 11.5px; color: #94A3B8; line-height: 1.4; }

.showcase-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.city-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #E2E8F0;
  backdrop-filter: blur(10px);
}
.city-tag .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
}

/* ============================================================
   RIGHT AUTH CONSOLE PANEL
   ============================================================ */
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  z-index: 2;
  overflow: visible !important;
  min-height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(0, 230, 118, 0.06) 0%, transparent 60%);
}

.auth-card-elevated {
  width: 100%;
  max-width: 440px;
  background: rgba(9, 18, 13, 0.84);
  border: 1px solid rgba(0, 230, 118, 0.22);
  border-radius: 28px;
  padding: 38px 32px;
  box-shadow: 
    0 24px 64px -12px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(0, 230, 118, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(32px) saturate(190%);
  position: relative;
  overflow: hidden;
}

.auth-mobile-logo {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.mobile-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00E676 0%, #00B050 100%);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #040906;
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.35);
}
.mobile-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #FFFFFF !important;
}
.mobile-logo-text b { color: #FFC800; }

.auth-card-hdr {
  margin-bottom: 24px;
  text-align: center;
}
.auth-card-hdr h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.025em;
}
.auth-card-hdr p {
  font-size: 14px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.5;
}

/* iOS-Style Segmented Tab Switcher */
.auth-tab-bar {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: #94A3B8;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.auth-tab:hover:not(.active) {
  color: #FFFFFF;
}
.auth-tab.active {
  background: #00E676;
  color: #040906;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.35);
}

.auth-inputs-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-lbl {
  font-size: 12.5px;
  font-weight: 700;
  color: #CBD5E1;
  letter-spacing: 0.02em;
}
.form-input-box {
  display: flex;
  align-items: center;
  background: rgba(4, 10, 7, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 14px;
  transition: all 0.2s ease;
  overflow: hidden;
}
.form-input-box:focus-within {
  border-color: #00E676;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.2);
  background: rgba(4, 10, 7, 0.95);
}
.input-icon {
  font-size: 16px;
  color: #64748B;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.country-prefix {
  font-size: 14px;
  font-weight: 800;
  color: #00E676;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-ctrl {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  padding: 14px 0 !important;
  font-family: inherit;
  outline: none !important;
}
.form-ctrl::placeholder {
  color: #475569;
}
.pass-eye-btn {
  background: none;
  border: none;
  color: #64748B;
  cursor: pointer;
  padding: 8px;
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.pass-eye-btn:hover { color: #FFFFFF; }

/* Shimmer Submit Button */
.auth-submit-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(135deg, #00E676 0%, #00C853 100%);
  color: #040906;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 16px 20px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 230, 118, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 6px;
}
.auth-submit-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: btnShimmer 3.5s infinite ease-in-out;
}
.auth-submit-btn:hover {
  box-shadow: 0 12px 32px rgba(0, 230, 118, 0.45);
  transform: translateY(-1px);
}
.auth-submit-btn:active {
  transform: scale(0.98);
}
.btn-arrow {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.auth-submit-btn:hover .btn-arrow {
  transform: translateX(3px);
}




.auth-footer-notice {
  font-size: 11.5px;
  color: #64748B;
  text-align: center;
  line-height: 1.5;
  margin-top: 20px;
}
.auth-footer-notice a {
  color: #00E676;
  text-decoration: underline;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES FOR AUTH
   ============================================================ */
@media (min-width: 860px) {
  .auth-split-wrapper {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .auth-showcase-panel {
    display: flex;
  }
}
@media (max-width: 859px) {
  .auth-mobile-logo { display: flex; }
  .auth-form-panel { 
    padding: 24px 16px; 
    align-items: flex-start;
  }
  .auth-card-elevated { 
    padding: 28px 20px; 
    border-radius: 22px;
  }
  .auth-card-hdr h2 { font-size: 22px !important; }
  .auth-submit-btn { padding: 14px 16px; font-size: 15px; }
}


/* ============================================================
   DESKTOP DUAL-PANE IN-APP ARCHITECTURE (SIDEBAR + FULL-BLEED MAP)
   ============================================================ */
@media (min-width: 960px) {
  .app.app-shell-view {
    max-width: 100% !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .app.app-shell-view .customer-top,
  .app.app-shell-view .runner-top {
    height: 64px !important;
    padding: 0 24px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    z-index: 100 !important;
  }

  .app.app-shell-view .customer-content {
    flex: 1 !important;
    display: block !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100vh - 64px) !important;
    position: relative !important;
  }

  .app.app-shell-view .customer-content > .desktop-dual-pane {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .app.app-shell-view .customer-content > :not(.desktop-dual-pane) {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 28px 24px 100px !important;
  }

  .app.app-shell-view .runner-content {
    flex: 1 !important;
    display: block !important;
    padding: 28px 24px 80px !important;
    overflow-y: auto !important;
    height: calc(100vh - 64px) !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .runner-nav-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
  }
  .runner-nav-desktop a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
  }
  .runner-nav-desktop a:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.06);
  }
  .runner-nav-desktop a.on {
    color: #08120E;
    background: #00E676;
  }
  .runner-nav-desktop a svg {
    width: 16px;
    height: 16px;
  }
  .runner-logout-btn {
    color: #EF4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    margin-left: 12px !important;
  }

  .app.app-shell-view .showcase-dock {
    display: none !important; /* Sidebar replaces bottom dock on desktop */
  }

  /* Dual Pane Wrappers */
  .desktop-dual-pane {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .pane-sidebar {
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 24px !important;
    background: #FFFFFF !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.04) !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .pane-map {
    flex: 1 !important;
    height: 100% !important;
    position: relative !important;
    background: #E5EEE8 !important;
  }

  .pane-map #map,
  .pane-map #track_map {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 959px) {
  .runner-nav-desktop { display: none !important; }
  .app.app-shell-view {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
  }
  .app.app-shell-view .customer-content,
  .app.app-shell-view .runner-content {
    display: block !important;
    height: auto !important;
    min-height: calc(100vh - 64px) !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
    padding: 16px 16px 120px !important;
  }
  .desktop-dual-pane {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  .pane-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 0 16px !important;
    box-shadow: none !important;
    border-right: none !important;
  }
  .pane-map {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    position: relative !important;
    margin-top: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .pane-map #map,
  .pane-map #track_map {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
  }
  .tracking-dual-pane {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .tracking-dual-pane #track_sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 16px !important;
  }
}


/* ============================================================
   MOBILE-FIRST MASTER SYSTEM (TOUCH-FIRST · SAFE-AREA · ZERO-JANK)
   ============================================================ */

/* 1. Eliminate iOS Safari auto-zoom on input focus by strictly enforcing 16px font-size on mobile */
@media (max-width: 859px) {
  input:not(.form-ctrl), select, textarea, .input, .route-input {
    font-size: 16px !important; /* Prevents iOS viewport distortion */
    border-radius: 14px !important;
  }
  .form-ctrl, .form-input-box input {
    font-size: 16px !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* 2. Global Touch Targets (Fitts's Law: Min 44-48px touch boundary) */
button, .btn, .auth-tab, .opt, .place-chip, .iconbtn, .fab-locate, .modal-close {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.modal-close {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}

/* 3. Safe-Area Inset Ergonomics — tokens consolidated in master :root */

/* ---------- Production Accessibility & Motion Utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Accessible focus visible rings */
:focus-visible {
  outline: 2.5px solid var(--brand) !important;
  outline-offset: 2px !important;
}

/* Contextual skeleton variants */
.sk-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.sk-text {
  height: 14px;
  border-radius: 6px;
  margin: 6px 0;
  width: 75%;
}
.sk-fare {
  height: 32px;
  width: 90px;
  border-radius: 8px;
}
.sk-map {
  width: 100%;
  height: 280px;
  border-radius: var(--r);
}

/* Multi-snap bottom sheet */
.bottom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: min(520px, 100%);
  background: var(--card);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.18);
  z-index: 80;
  transition: transform 0.35s var(--spring);
  will-change: transform;
}
.bottom-sheet.open {
  transform: translateX(-50%) translateY(0);
}
.bottom-sheet-handle {
  width: 40px;
  height: 5px;
  background: var(--muted-2);
  border-radius: 3px;
  margin: 10px auto 14px;
  opacity: 0.4;
  cursor: grab;
}

/* Mobile top navigation safe padding */
@media (max-width: 859px) {
  .customer-top, .runner-top, .command-header, .navbar {
    padding-top: max(14px, var(--safe-top)) !important;
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }

  /* Mobile bottom navigation thumb zone */
  .showcase-dock, .bottomnav {
    padding-bottom: max(14px, var(--safe-bottom)) !important;
    height: calc(64px + max(14px, var(--safe-bottom))) !important;
  }

  /* Bottom action buttons thumb clearance */
  .btn-bottom-bar, .sticky-bottom-action {
    padding-bottom: max(16px, var(--safe-bottom)) !important;
  }

  /* Modal bottom sheet thumb clearance */
  .modal {
    padding-bottom: max(28px, var(--safe-bottom)) !important;
  }
}

/* 4. Touch Gestures & Smooth Mobile Scrolling */
html, body {
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
  overflow-x: clip;
}

/* 5. Mobile Autocomplete Dropdown Touch Friendliness */
#pickup_res, #drop_res, .ac-results {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  margin-top: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.ac-item {
  padding: 14px 16px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  cursor: pointer;
  touch-action: manipulation;
}
.ac-item:active {
  background: rgba(0, 230, 118, 0.12) !important;
}

/* 6. Vehicle Selection Swipe Strip on Mobile */
@media (max-width: 859px) {
  .svc-list-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .svc-list-mobile::-webkit-scrollbar { display: none; }
  .svc-card-mobile {
    scroll-snap-align: start;
    flex: 0 0 85%;
  }
}

/* 7. Active Captain Job Mobile Urgency Card */
.captain-job-card {
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  margin-bottom: 16px;
}

/* ============================================================
   ADVANCED MOBILITY INTERACTION SUITE (TRACK 1 & 3)
   ============================================================ */

/* Vehicle Marker Heading & Gliding */
.runner-marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #06150D;
  border: 2.5px solid #00E676;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 230, 118, 0.4), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 20px;
}
.runner-marker-icon.heading-pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #00E676;
  animation: markerPulseRing 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes markerPulseRing {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Voice Search Microphone Button */
.voice-mic-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  touch-action: manipulation;
}
.voice-mic-btn:hover {
  color: #00E676;
  background: rgba(0, 230, 118, 0.1);
}
.voice-mic-btn.listening {
  color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  animation: micPulse 1s infinite alternate ease-in-out;
}
@keyframes micPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  100% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Smart Commute Quick Shortcuts */
.smart-commute-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.smart-commute-strip::-webkit-scrollbar { display: none; }
.smart-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #E2E8F0;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: manipulation;
}
.smart-chip:hover, .smart-chip:active {
  background: rgba(0, 230, 118, 0.15);
  border-color: #00E676;
  color: #00E676;
  transform: translateY(-1px);
}

/* Hands-Free Driver Voice Status Pill */
.voice-announcer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 200, 0, 0.12);
  border: 1px solid rgba(255, 200, 0, 0.3);
  color: #FFC800;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.voice-announcer-pill .wave-bar {
  width: 3px;
  height: 10px;
  background: #FFC800;
  border-radius: 2px;
  animation: soundWave 0.6s infinite alternate ease-in-out;
}
.voice-announcer-pill .wave-bar:nth-child(2) { animation-delay: 0.2s; height: 14px; }
.voice-announcer-pill .wave-bar:nth-child(3) { animation-delay: 0.4s; height: 8px; }
@keyframes soundWave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.2); }
}

/* WCAG Accessible Screen Reader Live Announcer */
.a11y-live-region {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   RESPONSIVE TRACKING DUAL-PANE LAYOUT
   ============================================================ */
.tracking-dual-pane {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 959px) {
  .desktop-track-map-pane {
    display: none !important;
  }
  .mobile-track-map-card {
    display: block !important;
  }
  .tracking-dual-pane #track_sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }
}

@media (min-width: 960px) {
  .mobile-track-map-card {
    display: none !important;
  }
  .desktop-track-map-pane {
    display: block !important;
    flex: 1 !important;
    height: 100% !important;
    position: relative !important;
    background: #E5EEE8 !important;
  }
  .desktop-track-map-pane #tmap {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .tracking-dual-pane #track_sidebar {
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 24px !important;
    background: #FFFFFF !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.04) !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
  }
}




/* Runner (Captain) Theme Modifiers */
.auth-showcase-panel.theme-runner {
  background: linear-gradient(135deg, rgba(22, 31, 23, 0.92) 0%, rgba(8, 14, 10, 0.98) 100%) !important;
}
.showcase-headline .amber-text {
  background: linear-gradient(135deg, #FFC800 0%, #FFE082 60%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(255, 200, 0, 0.35));
}
.auth-card-elevated.theme-runner {
  border-color: rgba(255, 200, 0, 0.25) !important;
  box-shadow: 0 24px 64px -12px rgba(0,0,0,0.85), 0 0 40px rgba(255, 200, 0, 0.08) !important;
}
.auth-tab.active.theme-runner {
  background: #FFC800 !important;
  color: #000 !important;
  box-shadow: 0 4px 16px rgba(255, 200, 0, 0.35) !important;
}
.auth-submit-btn.theme-runner {
  background: linear-gradient(135deg, #FFC800 0%, #E6A100 100%) !important;
  color: #000 !important;
  box-shadow: 0 8px 24px rgba(255, 200, 0, 0.35) !important;
}



/* Admin Theme Modifiers */
.auth-showcase-panel.theme-admin {
  background: linear-gradient(135deg, rgba(13, 22, 36, 0.92) 0%, rgba(6, 11, 18, 0.98) 100%) !important;
}
.showcase-headline .blue-text {
  background: linear-gradient(135deg, #3B82F6 0%, #93C5FD 60%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(59, 130, 246, 0.35));
}
.auth-card-elevated.theme-admin {
  border-color: rgba(59, 130, 246, 0.25) !important;
  box-shadow: 0 24px 64px -12px rgba(0,0,0,0.85), 0 0 40px rgba(59, 130, 246, 0.08) !important;
}
.auth-submit-btn.theme-admin {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35) !important;
}



/* ============================================================
   AUTHENTIC RAPIGO BRAND LOGO IDENTITY SYSTEM
   ============================================================ */
.brand-mark-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}
.brand-svg-mark {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 3px 10px rgba(0, 255, 163, 0.25));
}
.brand-title {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.brand-title .mint-accent {
  font-style: italic;
  color: #00FFA3;
  margin-left: 1px;
  text-shadow: 0 0 14px rgba(0, 255, 163, 0.35);
}
.brand-sub {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-top: 2px;
}
.showcase-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.showcase-brand .brand-svg-mark {
  width: 34px;
  height: 34px;
}
.showcase-brand .brand-title {
  font-size: 21px;
}
.captain-badge {
  display: inline-block;
  background: rgba(255, 200, 0, 0.15);
  color: #FFC800;
  border: 1px solid rgba(255, 200, 0, 0.3);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.08em;
  margin-left: 6px;
  vertical-align: middle;
}
.ops-badge {
  display: inline-block;
  background: rgba(0, 245, 255, 0.12);
  color: #00F5FF;
  border: 1px solid rgba(0, 245, 255, 0.28);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.08em;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================================
   CAPTAIN MOBILITY COCKPIT SYSTEM (Obsidian Glass & Cyber Mint)
   ============================================================ */
.runner-cockpit-layout {
  width: 100%;
}

.cockpit-bento-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}
@media (min-width: 960px) {
  .cockpit-col-radar {
    flex: 1.15;
    min-width: 0;
  }
  .cockpit-col-hud {
    flex: 0.85;
    min-width: 0;
  }
}
@media (max-width: 959px) {
  .cockpit-bento-grid {
    flex-direction: column;
    gap: 16px;
  }
  .cockpit-col-radar, .cockpit-col-hud {
    width: 100%;
  }
  .cockpit-hero-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px 18px;
  }
  .hero-chip-badge {
    white-space: nowrap;
  }
  .btn-cockpit-power {
    width: 100%;
    justify-content: center;
  }
}

/* Hero Shift Card */
.cockpit-hero-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-radius: 26px;
  margin-bottom: 20px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(18, 44, 33, 0.95) 0%, rgba(8, 18, 14, 0.98) 100%);
  border: 1px solid rgba(0, 255, 163, 0.22);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.35s ease;
}
.cockpit-hero-card::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  right: -80px;
  top: -120px;
  background: radial-gradient(circle, rgba(0, 255, 163, 0.18), transparent 70%);
  pointer-events: none;
}
.cockpit-hero-card.is-online {
  background: radial-gradient(120% 120% at 0% 0%, rgba(10, 58, 38, 0.96) 0%, rgba(5, 24, 16, 0.98) 100%);
  border-color: rgba(0, 255, 163, 0.45);
  box-shadow: 0 20px 50px rgba(0, 255, 163, 0.18), inset 0 1px 0 rgba(0, 255, 163, 0.35);
}
.cockpit-hero-card .hero-left {
  position: relative;
  z-index: 2;
  flex: 1;
}
.cockpit-hero-card .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #00FFA3;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FFA3;
  box-shadow: 0 0 12px #00FFA3;
  animation: pulseBeacon 1.5s infinite;
}
.is-offline .live-dot-pulse {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  animation: none;
}
@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}
.hero-chip-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cockpit-hero-card .hero-title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
  letter-spacing: -0.03em;
}
.cockpit-hero-card .hero-subtitle {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #9ec2b1;
  font-weight: 500;
  line-height: 1.4;
  max-width: 600px;
}
.cockpit-hero-card .hero-right {
  position: relative;
  z-index: 2;
  flex: none;
}
.btn-cockpit-power {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 18px;
  cursor: pointer;
  border: 1.5px solid rgba(0, 255, 163, 0.35);
  background: linear-gradient(135deg, rgba(0, 255, 163, 0.18), rgba(0, 217, 130, 0.06));
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-cockpit-power:hover {
  transform: translateY(-2px);
  border-color: #00FFA3;
  box-shadow: 0 14px 34px rgba(0, 255, 163, 0.25);
}
.btn-cockpit-power.online {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.08));
}
.btn-cockpit-power.online:hover {
  border-color: #ef4444;
  box-shadow: 0 14px 34px rgba(239, 68, 68, 0.25);
}
.power-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 255, 163, 0.18);
  color: #00FFA3;
}
.btn-cockpit-power.online .power-icon {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
.power-icon svg {
  width: 20px;
  height: 20px;
}
.power-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.power-state {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.power-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

/* Cyber Radar Visualizer */
.runner-content .sonar-radar-box {
  background: radial-gradient(circle at center, #10241b 0%, #08130e 100%) !important;
  border: 1px solid rgba(0, 255, 163, 0.2) !important;
  border-radius: 24px !important;
  padding: 36px 24px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}
.sonar-rings {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
}
.sonar-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 255, 163, 0.35);
  animation: radarPing 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.sonar-pulse-ring:nth-child(2) {
  animation-delay: 0.8s;
}
.sonar-pulse-ring:nth-child(3) {
  animation-delay: 1.6s;
}
@keyframes radarPing {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.sonar-center-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(145deg, #00FFA3, #00A961);
  color: #04140d;
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 0 24px rgba(0, 255, 163, 0.5);
  position: relative;
  z-index: 2;
}
.radar-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
}
.radar-sub {
  color: #8ea89c;
  font-size: 13px;
  margin: 6px auto 16px;
  max-width: 320px;
}
.radar-surge-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 255, 163, 0.1);
  border: 1px solid rgba(0, 255, 163, 0.3);
  color: #00FFA3;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Metric Tiles Grid */
.cockpit-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.cockpit-stat-tile {
  background: rgba(18, 34, 26, 0.72) !important;
  border: 1px solid rgba(0, 255, 163, 0.14) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
.cockpit-stat-tile .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0, 255, 163, 0.12);
  color: #00FFA3;
  display: grid;
  place-items: center;
  flex: none;
}
.cockpit-stat-tile .stat-icon svg {
  width: 20px;
  height: 20px;
}
.cockpit-stat-tile .stat-val {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
}
.cockpit-stat-tile .stat-lbl {
  font-size: 11px;
  color: #8ea89c;
  font-weight: 700;
  margin-top: 2px;
}

/* Dark Obsidian Card Overrides for runner-content */
.runner-content .card {
  background: rgba(14, 26, 20, 0.85) !important;
  border: 1px solid rgba(0, 255, 163, 0.14) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(20px) !important;
  color: #FFFFFF !important;
  border-radius: 22px !important;
}
.runner-content .card.flat {
  background: rgba(18, 34, 26, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.runner-content .section-title {
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.runner-content .section-title .sub {
  color: #8ea89c !important;
}
.runner-content .muted {
  color: #8ea89c !important;
}
.runner-content .input {
  background: rgba(8, 16, 12, 0.8) !important;
  border: 1.5px solid rgba(0, 255, 163, 0.2) !important;
  color: #FFFFFF !important;
}
.runner-content .input:focus {
  border-color: #00FFA3 !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 163, 0.2) !important;
}
.runner-content .list-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #FFFFFF !important;
}
.runner-content .list-item .li-title {
  color: #FFFFFF !important;
}
.runner-content .list-item .li-sub {
  color: #8ea89c !important;
}
.runner-content .kv .k {
  color: #8ea89c !important;
}
.runner-content .kv .v {
  color: #FFFFFF !important;
}
.runner-content select.input option {
  background: #0d1b15 !important;
  color: #FFFFFF !important;
}

.runner-content .stats .stat {
  background: rgba(14, 26, 20, 0.85) !important;
  border: 1px solid rgba(0, 255, 163, 0.14) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
  border-radius: 20px !important;
}
.runner-content .stats .stat .n {
  color: #FFFFFF !important;
}
.runner-content .stats .stat .l {
  color: #8ea89c !important;
}
.runner-content .stats .stat .ic {
  background: rgba(0, 255, 163, 0.12) !important;
  color: #00FFA3 !important;
}

/* ============================================================
   FINAL UI POLISH — layout, hierarchy, contrast & touch comfort
   CSS-only layer: preserves existing markup and interactions.
   ============================================================ */
:root {
  --ui-focus: #00c978;
  --ui-focus-ring: 0 0 0 4px rgba(0, 201, 120, .18);
  --ui-panel-border: rgba(7, 35, 22, .10);
  --ui-shadow: 0 16px 36px rgba(7, 35, 22, .08), 0 2px 8px rgba(7, 35, 22, .04);
}

button, a, input, select, textarea { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
button, .btn, .hero-action, .auth-submit-btn { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(0, 201, 120, .72) !important; outline-offset: 3px !important; box-shadow: var(--ui-focus-ring) !important; }

.showcase-top, .command-header, .customer-top, .runner-top {
  min-height: 64px;
  padding-top: max(12px, var(--safe-top));
  padding-bottom: 12px;
}
.showcase-content { width: 100%; }
.showcase-content > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.customer-content, .admin-content { color: var(--ink); }
.admin-content, .customer-content, .runner-content { text-rendering: optimizeLegibility; }

.customer-content .card, .admin-content .card, .admin-content .stat, .runner-content .card, .runner-content .stats .stat,
.bento-card, .target-card, .service-card, .safety-card {
  border-color: var(--ui-panel-border);
  box-shadow: var(--ui-shadow);
}
.customer-content .card:hover, .admin-content .card:hover, .admin-content .stat:hover, .runner-content .card:hover,
.runner-content .stats .stat:hover, .bento-card:hover, .target-card:hover, .service-card:hover, .safety-card:hover {
  border-color: rgba(0, 201, 120, .26);
  box-shadow: 0 20px 42px rgba(7, 35, 22, .12), 0 0 0 1px rgba(0, 201, 120, .05);
}

.section-title, .hero-head, .admin-hero, .customer-hero, .runner-hero { margin-bottom: 18px; }
.section-title { line-height: 1.2; }
.section-title .sub { margin-top: 4px; }
.admin-content .bento-grid, .admin-content .admin-grid-2, .admin-content .stats,
.runner-content .stats, .cockpit-stats-grid { gap: 14px; }
.admin-content .stat, .runner-content .stats .stat { min-height: 132px; }
.admin-content .stat .n, .runner-content .stats .stat .n { line-height: 1.05; }
.list-item { min-height: 64px; padding-top: 12px; padding-bottom: 12px; }

.auth-card-elevated { box-shadow: 0 24px 70px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 255, 163, .06); }
.form-group { gap: 8px; }
.form-lbl { letter-spacing: .01em; }
.form-input-box { min-height: 52px; }
.form-ctrl { min-height: 50px; }
.auth-submit-btn { min-height: 54px; letter-spacing: -.01em; }
.auth-submit-btn:hover { transform: translateY(-2px); filter: saturate(1.08); }
.auth-submit-btn:active { transform: translateY(0) scale(.985); }

@media (min-width: 960px) {
  .admin-content { max-width: 1320px; padding-left: 40px; padding-right: 40px; }
  .runner-content { max-width: 1320px; padding-left: 36px; padding-right: 36px; }
  .app.app-shell-view .customer-content { background: linear-gradient(135deg, #f7fbf9 0%, #edf6f0 100%); }
  .pane-sidebar { width: 420px !important; min-width: 420px !important; max-width: 420px !important; padding: 28px !important; }
  .pane-map { box-shadow: inset 12px 0 32px rgba(7, 35, 22, .05); }
  .command-header { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 859px) {
  .showcase-content { padding-left: 16px; padding-right: 16px; }
  .showcase-content > * { width: 100%; }
  .admin-content, .customer-content, .runner-content { padding-left: 16px !important; padding-right: 16px !important; }
  .admin-content .bento-grid, .admin-content .admin-grid-2, .admin-content .stats,
  .runner-content .stats, .cockpit-stats-grid { grid-template-columns: 1fr !important; }
  .admin-content .stat, .runner-content .stats .stat { min-height: 108px; }
  .admin-hero, .customer-hero, .runner-hero { padding: 20px !important; }
  .hero-action { width: 100%; justify-content: center; }
  .auth-form-panel { padding: 20px 16px 32px; }
  .auth-card-elevated { width: min(100%, 440px); padding: 26px 20px; }
  .auth-inputs-wrap { gap: 16px; }
  .showcase-dock { bottom: max(12px, var(--safe-bottom)); }
  .showcase-dock a { min-height: 50px; }
  .pane-map { min-height: 340px !important; height: 340px !important; }
}

@media (max-width: 520px) {
  .command-brand .brand-title { font-size: 16px !important; }
  .command-header { min-height: 58px; }
  .customer-top, .runner-top { min-height: 58px; }
  .customer-content, .runner-content, .admin-content { padding-top: 16px !important; }
  .card, .stat, .bento-card, .target-card { border-radius: 18px !important; }
  .modal { width: calc(100% - 24px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  button:hover, .btn:hover, .auth-submit-btn:hover, .card:hover, .stat:hover, .bento-card:hover { transform: none !important; }
}

/* Admin-only demo/live operation switch. */
.operation-mode-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 12px;
  border: 1px solid rgba(0, 255, 163, .28); border-radius: 999px; cursor: pointer;
  background: rgba(0, 255, 163, .08); color: #00FFA3; font-size: 10px; font-weight: 900;
  letter-spacing: .05em; white-space: nowrap;
}
.operation-mode-pill span { width: 7px; height: 7px; border-radius: 50%; background: #00FFA3; box-shadow: 0 0 9px #00FFA3; }
.operation-mode-pill.is-real { background: rgba(59, 130, 246, .12); border-color: rgba(96, 165, 250, .42); color: #60A5FA; }
.operation-mode-pill.is-real span { background: #60A5FA; box-shadow: 0 0 9px #60A5FA; }
.operation-mode-card { border: 1px solid rgba(0, 201, 120, .28) !important; background: linear-gradient(135deg, rgba(0, 201, 120, .08), rgba(255,255,255,.96)); }
.operation-mode-card.is-real { border-color: rgba(59, 130, 246, .32) !important; background: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(255,255,255,.96)); }
.section-kicker { color: var(--brand-2); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.operation-mode-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(7, 35, 22, .09); color: var(--muted); font-size: 11px; font-weight: 700; }
.operation-mode-note span { color: var(--brand-2); font-weight: 900; }
.operation-switch { display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.operation-switch input { position: absolute; opacity: 0; pointer-events: none; }
.operation-switch-track { width: 58px; height: 32px; padding: 4px; display: flex; align-items: center; border-radius: 999px; background: #b8c8bf; transition: background .2s ease, box-shadow .2s ease; }
.operation-switch-track > span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s ease; }
.operation-switch input:checked + .operation-switch-track { background: #2f7ccf; box-shadow: 0 0 0 4px rgba(47,124,207,.14); }
.operation-switch input:checked + .operation-switch-track > span { transform: translateX(26px); }
.operation-switch input:focus-visible + .operation-switch-track { outline: 3px solid rgba(0, 201, 120, .55); outline-offset: 3px; }
@media (max-width: 859px) {
  .operation-mode-pill { display: none; }
  .operation-mode-card .between { align-items: flex-start !important; }
}