:root{
  --bg:#0b0f14; --card:#151c25; --card2:#1d2633; --border:#263240;
  --text:#e6edf5; --muted:#8aa0b8; --primary:#22c55e; --primary-2:#16a34a;
  --danger:#ef4444; --warning:#f59e0b;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:rgba(11,15,20,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{font-weight:800;letter-spacing:.5px}
.badge{background:var(--card2);border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px}
.badge.hidden{display:none}
#router{padding:16px 16px 120px;max-width:480px;margin:0 auto;min-height:100vh}

/* ===== BOTTOM NAV BESAR PROPER MENARIK ===== */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
  background:rgba(15,23,42,0.94);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:12px 10px calc(12px + env(safe-area-inset-bottom));
  max-width:480px;
  margin:0 auto;
  z-index:40;
  box-shadow:0 -10px 40px rgba(0,0,0,0.45), 0 -1px 0 rgba(255,255,255,0.07) inset;
  border-radius:24px 24px 0 0;
}
.bottom-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--muted);
  font-weight:700;
  padding:9px 5px 8px;
  border-radius:18px;
  position:relative;
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  min-height:62px;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.bottom-nav a .nav-icon{
  font-size:22px;
  line-height:1;
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1), filter 0.28s;
  filter:grayscale(0.15);
}
.bottom-nav a .nav-label{
  font-size:10px;
  line-height:1;
  margin-top:2px;
}
.bottom-nav a.active{
  color:#052e16;
  background:linear-gradient(135deg,var(--primary),#86efac);
  box-shadow:0 6px 20px rgba(34,197,94,0.38), 0 1px 0 rgba(255,255,255,0.35) inset;
  transform:translateY(-4px) scale(1.02);
}
.bottom-nav a.active .nav-icon{
  transform:scale(1.12);
  filter:grayscale(0) drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.bottom-nav a.active::after{
  content:'';
  position:absolute;
  bottom:-7px;
  width:28px;
  height:5px;
  background:var(--primary);
  border-radius:99px;
}
.bottom-nav a:not(.active):hover{
  color:var(--text);
  background:rgba(255,255,255,0.07);
}
.bottom-nav a:not(.active):active{
  transform:scale(0.94);
}
.bottom-nav a[href="#/passenger"].active{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}
.bottom-nav a[href="#/driver"].active{
  background:linear-gradient(135deg,#3b82f6,#60a5fa);
  color:white;
}
.bottom-nav a[href="#/profile"].active{
  background:linear-gradient(135deg,var(--primary),#86efac);
  color:#052e16;
}
.bottom-nav a[style*="display: none"]{display:none !important;}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:12px 0}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;width:100%;transition:all 0.25s}
.btn.primary{background:var(--primary);color:#052e16}
.btn.primary:hover{background:var(--primary-2)}
.btn.secondary{background:var(--card2);color:var(--text);border:1px solid var(--border);opacity:0.6}
.btn.online-active{background:linear-gradient(135deg,var(--primary),#86efac);color:#052e16;border:1px solid var(--primary);box-shadow:0 0 18px rgba(34,197,94,0.6);transform:scale(1.02);opacity:1}
.btn.offline-active{background:linear-gradient(135deg,var(--danger),#f87171);color:white;border:1px solid var(--danger);box-shadow:0 0 18px rgba(239,68,68,0.6);transform:scale(1.02);opacity:1}
.btn.google{background:white;color:#111;display:flex;align-items:center;justify-content:center;gap:10px}
.muted{color:var(--muted);font-size:13px}
.status{font-size:13px;margin-top:8px}
.input, input, select, textarea{width:100%;background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:12px;margin-top:6px}
label{display:block;margin:10px 0;font-size:13px;font-weight:600}
.row{display:flex;gap:10px;margin-top:12px}
.kpi{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0}
.kpi div{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}
.kpi b{display:block;font-size:18px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--primary)} .dot.err{background:var(--danger)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.open{display:flex}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;width:100%;max-width:420px}
.list{display:flex;flex-direction:column;gap:10px}
.driver-card{display:flex;justify-content:space-between;align-items:center;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px}
.map-placeholder{height:180px;background:linear-gradient(135deg,#122, #223);border:1px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);margin:12px 0}

/* ===== LIVE TRACKING v7.0 ===== */
.tracking-card{border:2px solid var(--primary) !important;background:linear-gradient(180deg, rgba(34,197,94,0.08), var(--card));animation:trackingPulse 2s infinite}
@keyframes trackingPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.driver-icon, .pass-icon{font-size:28px;line-height:1;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}