:root {
  --bg: #070709;
  --bg-soft: #111217;
  --card: rgba(20,20,26,.86);
  --card-2: rgba(29,29,36,.76);
  --border: rgba(255,255,255,.08);
  --text: #f7f8fb;
  --muted: #a1a7b9;
  --red: #ff2b54;
  --red-2: #b7002e;
  --danger-glow: 0 0 0 1px rgba(255,43,84,.15), 0 12px 34px rgba(255,43,84,.18);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; background: radial-gradient(circle at top, #2b000d 0%, #08080a 32%, #050506 100%); color: var(--text); }
body { min-height: 100vh; }
a { color: inherit; }
button, input { font: inherit; }
.app-shell { max-width: 460px; margin: 0 auto; padding: 16px 16px 96px; }
.desktop-shell { display: grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 18px; min-height: 100vh; }
.main-panel { min-width: 0; }
.side-panel { padding: 22px; position: sticky; top: 18px; height: calc(100vh - 36px); display: flex; flex-direction: column; justify-content: space-between; }
.side-links { display: grid; gap: 10px; margin-top: 22px; }
.side-link { border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text); padding: 14px 16px; border-radius: 16px; text-align: left; }
.side-link.active, .side-link:hover { background: linear-gradient(135deg, rgba(255,43,84,.18), rgba(255,43,84,.05)); border-color: rgba(255,43,84,.35); }
.glass { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(0,0,0,.28); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; margin-bottom:14px; }
.topbar h1 { margin: 2px 0 0; font-size: 1.35rem; }
.eyebrow { text-transform: uppercase; font-size: .72rem; letter-spacing: .18em; color: var(--muted); }
.eyebrow.red { color: #ff8197; }
.top-actions { display:flex; gap:10px; }
.icon-btn, .avatar-btn, .small-btn, .chip, .primary-btn, .service-card, .nav-item { cursor:pointer; border:none; }
.icon-btn, .avatar-btn { width:42px; height:42px; border-radius:14px; background: rgba(255,255,255,.06); color:var(--text); }
.avatar-btn { font-weight: 700; }
.hero-wallet { padding:18px; display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; position: relative; overflow:hidden; }
.hero-wallet::after { content:""; position:absolute; inset:auto -40px -60px auto; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle, rgba(255,43,84,.32), transparent 70%); }
.balance-label { margin-top: 6px; color: var(--muted); font-size:.9rem; }
.balance { font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.wallet-actions { display:grid; gap:8px; }
.chip, .small-btn { padding:10px 14px; border-radius:14px; color:var(--text); background: rgba(255,255,255,.06); }
.chip.red, .primary-btn, .small-btn:hover { background: linear-gradient(135deg, #ff335d, #b4002f); box-shadow: var(--danger-glow); }
.primary-btn { padding:12px 16px; border-radius:16px; color:#fff; font-weight:700; }
.promo-strip { margin-bottom:14px; }
.promo-card { padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.promo-title { font-weight: 700; }
.promo-sub, .muted { color: var(--muted); }
.badge { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.07); font-size:.82rem; }
.pulse { animation: pulse 1.5s infinite; }
.red-glow { box-shadow: var(--danger-glow); }
.service-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-bottom:14px; }
.service-card { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:20px; min-height:88px; padding:14px 10px; color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; box-shadow: 0 10px 26px rgba(0,0,0,.18); transition:.2s transform,.2s box-shadow; }
.service-card:hover { transform: translateY(-2px); box-shadow: var(--danger-glow); }
.service-card.static { cursor: default; }
.service-icon { font-size: 1.6rem; }
.map-wrap, .panel, .live-status { padding:16px; margin-bottom:14px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.section-head h2 { margin:0; font-size:1rem; }
#mainMap { height: 340px; border-radius: 18px; overflow:hidden; background:#120b0d; }
.map-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:.86rem; }
.legend { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:5px; vertical-align:-2px; }
.legend.customer { background:#ffd166; }
.legend.driver { background:#ff2b54; }
.legend.resto { background:#51cf66; }
.legend.route { width:18px; height:4px; border-radius:4px; background:#ff89a0; }
.mini-status { color: var(--muted); font-size:.82rem; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.dot.online { background:#29e07f; box-shadow:0 0 10px rgba(41,224,127,.6); }
.status-timeline { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:14px; }
.step, .mini-step { padding:12px 14px; border-radius:14px; background: rgba(255,255,255,.04); color:var(--muted); border:1px solid rgba(255,255,255,.04); }
.step.active, .mini-step.active { color:#fff; background: linear-gradient(135deg, rgba(255,43,84,.24), rgba(255,43,84,.06)); border-color: rgba(255,43,84,.3); }
.driver-card, .incoming-order, .list-item, .cart-box, .qris-area { background: var(--card-2); border:1px solid var(--border); border-radius:18px; padding:14px; }
.driver-card { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.driver-name { font-weight:700; margin-bottom:4px; }
.eta-box, .rating-chip { background: rgba(255,255,255,.06); padding:10px 12px; border-radius:14px; font-weight:700; }
.panel-grid { display:grid; gap:14px; }
.cards-row { display:flex; gap:12px; overflow:auto; padding-bottom:4px; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius:999px; }
.restaurant-card { min-width: 200px; padding:14px; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); }
.restaurant-card h3 { margin:0 0 8px; font-size:1rem; }
.menus { display:grid; gap:8px; }
.menu-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px dashed rgba(255,255,255,.08); }
.menu-row:first-child { border-top:none; }
.add-btn { padding:8px 10px; border-radius:12px; background: linear-gradient(135deg, #ff335d, #b4002f); color:#fff; border:none; }
.cart-box { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.qris-area { display:grid; grid-template-columns: 150px 1fr; gap:14px; align-items:center; }
#qrisCode { width:150px; min-height:150px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:16px; padding:8px; }
.input { width:100%; padding:12px 14px; border-radius:14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#fff; margin:8px 0 10px; }
.list-stack { display:grid; gap:10px; }
.list-item { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.list-item h4 { margin:0 0 6px; }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; width:min(430px, calc(100% - 24px)); padding:10px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; z-index:2000; }
.nav-item { background:transparent; color:var(--muted); border-radius:16px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.nav-item.active { background: linear-gradient(135deg, rgba(255,43,84,.24), rgba(255,43,84,.08)); color:#fff; }
#toastContainer { position: fixed; right: 14px; bottom: 92px; display:grid; gap:10px; z-index:3000; }
.toast { padding:12px 14px; border-radius:16px; background: rgba(18,18,24,.95); border:1px solid rgba(255,43,84,.28); box-shadow: var(--danger-glow); min-width: 220px; animation: slideUp .35s ease; }
.switch { position: relative; display: inline-block; width: 56px; height: 34px; }
.switch input { display:none; }
.slider { position:absolute; inset:0; background: rgba(255,255,255,.08); border-radius:999px; cursor:pointer; transition:.25s; }
.slider:before { content:""; position:absolute; width:26px; height:26px; left:4px; top:4px; background:#fff; border-radius:50%; transition:.25s; }
.switch input:checked + .slider { background: linear-gradient(135deg, #ff335d, #b4002f); }
.switch input:checked + .slider:before { transform: translateX(22px); }
.driver-stats-grid { grid-template-columns: repeat(2, 1fr); }
.mini-route { display:grid; gap:10px; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin:14px 0; }
.kpi-card { padding:18px; border-radius:20px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); }
.kpi-card .big { font-size: 1.8rem; font-weight: 800; margin-top: 8px; }
.dual-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-bottom:14px; }
.triple-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.small-text { font-size:.85rem; color:var(--muted); }
.ripple { position:relative; overflow:hidden; }
.ripple::after { content:""; position:absolute; inset:auto; width:12px; height:12px; background: rgba(255,255,255,.26); border-radius:50%; transform:scale(1); opacity:0; pointer-events:none; }
.ripple:active::after { left:calc(50% - 6px); top:calc(50% - 6px); animation:ripple .5s ease-out; }
.shimmer { background-image: linear-gradient(110deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.04) 60%); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }
.leaflet-container { background: #120b0d; }
.driver-marker, .customer-marker, .resto-marker, .moving-bike { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.driver-marker { background:#ff2b54; box-shadow:0 0 12px rgba(255,43,84,.85); }
.customer-marker { background:#ffd166; box-shadow:0 0 12px rgba(255,209,102,.65); }
.resto-marker { background:#4cd964; box-shadow:0 0 12px rgba(76,217,100,.65); }
.moving-bike { width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #fff, #ff2b54); }
.heat-dot { border-radius:50%; background: radial-gradient(circle, rgba(255,43,84,.38), rgba(255,43,84,.08) 56%, transparent 72%); }
@keyframes pulse { 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,43,84,.48)} 70%{transform:scale(1.02);box-shadow:0 0 0 14px rgba(255,43,84,0)} 100%{transform:scale(1)} }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes ripple { from{transform:scale(1);opacity:.7} to{transform:scale(16);opacity:0} }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@media (max-width: 980px) {
  .desktop-shell { grid-template-columns: 1fr; }
  .side-panel { position: static; height: auto; }
  .kpi-grid, .dual-grid, .triple-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
  .service-card { min-height: 78px; font-size:.85rem; }
  #mainMap { height: 300px; }
  .qris-area { grid-template-columns: 1fr; }
  #qrisCode { margin:0 auto; }
}


.access-strip{margin-bottom:14px}.access-card{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.access-actions{display:flex;gap:8px;flex-wrap:wrap}.auth-body{display:flex;align-items:center;justify-content:center;padding:20px}.auth-shell{width:min(100%,460px)}.auth-card{padding:24px}.auth-card h1{margin:8px 0 10px}.auth-form{display:grid;gap:2px;margin:16px 0 10px}.demo-box{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--border)}.auth-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* admin hard fix */
.admin-shell-fixed{align-items:start}
.admin-sidebar-strong{z-index:50;pointer-events:auto}
.admin-nav-hardfix .side-link{
  display:block;
  width:100%;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
  position:relative;
  z-index:5;
  pointer-events:auto;
  min-height:56px;
  line-height:1.25;
}
.admin-nav-hardfix .side-link + .side-link{margin-top:2px}
.admin-nav-hardfix .side-link:hover,.admin-nav-hardfix .side-link:focus,.admin-nav-hardfix .side-link:active{
  outline:none;
  transform:translateX(2px);
}
.admin-main-fixed{min-height:calc(100vh - 36px)}
.admin-section{display:none;scroll-margin-top:24px}
.admin-section.is-active{display:block;animation:slideUp .22s ease}
.admin-overview-grid{margin-bottom:0}