:root{--bg:#090b0e;--surface:#13171c;--surface2:#1a2026;--surface3:#20272f;--line:#29323b;--text:#f7f9fa;--muted:#98a3ad;--accent:#b9ff39;--accentSoft:rgba(185,255,57,.11);--danger:#ff6270;--warning:#ffcf4a;--radius:24px;--shadow:0 24px 70px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{background:radial-gradient(circle at 8% -10%,rgba(185,255,57,.08),transparent 28%),var(--bg)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}.app-shell{min-height:100vh;max-width:1540px;margin:0 auto;padding:20px}.topbar{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{font-weight:950;letter-spacing:-1.4px;font-size:29px}.brand span{color:var(--accent)}.subtitle{margin-top:3px;color:var(--muted);font-size:13px}.status-pill,.online-toggle{border:1px solid rgba(185,255,57,.32);background:var(--accentSoft);color:var(--accent);border-radius:999px;padding:9px 13px;font-weight:900;font-size:12px}.layout{display:grid;grid-template-columns:minmax(380px,510px) 1fr;gap:18px}.panel,.map-card{background:rgba(19,23,28,.96);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:26px}.booking-panel{overflow:visible}.eyebrow{color:var(--accent);font-size:11px;font-weight:950;letter-spacing:1.2px;margin-bottom:7px}h1,h2,h3,p{margin-top:0}h1{margin-bottom:8px;font-size:34px;letter-spacing:-1.2px}h2{margin-bottom:6px;font-size:25px;letter-spacing:-.6px}.muted{color:var(--muted)}.field-group{margin-top:18px}label{display:block;margin-bottom:7px;color:#c7cdd2;font-size:12px;font-weight:800}.optional{color:var(--muted);font-weight:500}input,textarea,select{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:15px;padding:14px 15px;outline:none}textarea{resize:vertical;min-height:84px}input:focus,textarea:focus,select:focus{border-color:#7ea924}.search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.primary,.secondary,.danger-outline,.segment{border-radius:14px;padding:13px 16px;font-weight:900}.primary{border:0;background:var(--accent);color:#0d100b}.primary:hover{filter:brightness(1.06)}.secondary{border:1px solid var(--line);background:var(--surface2);color:var(--text)}.compact{padding-inline:18px}.danger-outline{border:1px solid rgba(255,98,112,.45);color:var(--danger);background:rgba(255,98,112,.06)}.wide{width:100%;margin-top:18px}.link-button{margin-top:8px;padding:3px 0;border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:800}.results{display:grid;gap:7px;margin-top:9px}.result-item{width:100%;display:grid;gap:3px;text-align:left;border:1px solid var(--line);background:#0f1317;color:var(--text);border-radius:13px;padding:12px}.result-item:hover{border-color:rgba(185,255,57,.45)}.result-item strong{font-size:13px}.result-item span{font-size:11px;color:var(--muted);line-height:1.3}.booking-time{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:20px;padding:5px;background:#0f1317;border:1px solid var(--line);border-radius:17px}.segment{border:0;background:transparent;color:var(--muted)}.segment.active{background:var(--surface3);color:var(--text);box-shadow:inset 0 0 0 1px rgba(185,255,57,.16)}.field-help,.terms-note{margin-top:7px;color:var(--muted);font-size:10px;line-height:1.4}.fare-card{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid var(--line);border-radius:19px;padding:14px;background:var(--surface2)}.metric{padding:9px 10px;border-radius:13px;background:#11161a}.metric span,.summary-grid span{display:block;color:var(--muted);font-size:10px}.metric strong{display:block;margin-top:3px;font-size:18px}.fare-breakdown{grid-column:1/-1;display:grid;gap:7px;padding:12px 4px;border-top:1px solid var(--line)}.fare-breakdown>div{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.fare-breakdown strong{color:#dbe0e4}.price-box{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--accent);color:#0d100b}.price-box span{display:block;font-size:11px;font-weight:800}.price-box small{display:block;max-width:250px;margin-top:3px;opacity:.7;font-size:9px}.price-box strong{white-space:nowrap;font-size:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payment-row{margin-top:18px;display:flex;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:#11161a}.payment-row strong,.payment-row span{display:block}.payment-row span{margin-top:2px;color:var(--muted);font-size:11px}.coming-soon{align-self:center;padding:6px 9px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:10px;font-weight:800}.order-button{padding:16px}.notice{min-height:18px;margin-top:12px;color:var(--warning);font-size:11px}.hidden{display:none!important}.status-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}.status-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:var(--accent);font-size:27px}.ride-summary{margin-top:20px;border:1px solid var(--line);border-radius:18px;padding:15px;background:var(--surface2)}.summary-route{display:grid;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}.summary-route>div{display:grid;grid-template-columns:14px 1fr;gap:9px;line-height:1.3;font-size:12px}.dot{width:9px;height:9px;margin-top:3px;border-radius:50%}.pickup-dot{background:var(--accent)}.destination-dot{background:#fff}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding-top:14px}.summary-grid strong{display:block;margin-top:3px;font-size:13px}.driver-tracker{margin-top:14px;display:flex;align-items:center;gap:11px;padding:13px;border:1px solid rgba(185,255,57,.25);background:var(--accentSoft);border-radius:15px}.live-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(185,255,57,.08)}.ride-id{margin-top:13px;color:#63707b;font-size:9px;word-break:break-all}.map-card{min-height:760px;position:relative;overflow:hidden}#map{width:100%;height:100%;min-height:760px;background:#11161a}.map-overlay{position:absolute;z-index:500;left:16px;top:16px;max-width:280px;padding:11px 13px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(9,11,14,.88);backdrop-filter:blur(12px)}.map-overlay strong,.map-overlay span{display:block}.map-overlay strong{font-size:12px}.map-overlay span{margin-top:2px;color:var(--muted);font-size:10px}.map-credit{position:absolute;z-index:500;bottom:8px;left:8px;padding:5px 8px;border-radius:8px;background:rgba(9,11,14,.84);color:#aab3ba;font-size:9px}.custom-map-pin,.driver-map-icon{background:transparent;border:0}.map-pin{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:4px solid #0b0d10;box-shadow:0 5px 16px rgba(0,0,0,.35);font-weight:950}.pickup-pin{background:var(--accent);color:#0b0d10}.destination-pin{background:#fff;color:#111}.car-bubble{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--accent);border:4px solid #101216;font-size:23px;box-shadow:0 7px 20px rgba(0,0,0,.38)}footer{padding:18px 4px 6px;color:#66717b;text-align:center;font-size:10px}
/* backup web driver */.driver-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.section-title{display:flex;justify-content:space-between;gap:15px;align-items:center}.rides-list{display:grid;gap:12px;margin-top:18px}.ride-card{background:var(--surface2);border:1px solid var(--line);border-radius:17px;padding:16px}.ride-top{display:flex;justify-content:space-between;gap:12px}.ride-price{font-size:22px;font-weight:900;color:var(--accent)}.route-line{margin:13px 0;display:grid;gap:8px}.route-point{display:grid;grid-template-columns:18px 1fr;gap:8px}.ride-actions,.gps-controls{display:flex;gap:8px;flex-wrap:wrap}.action-btn{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:850}.action-btn.primary-action{background:var(--accent);color:#111;border-color:var(--accent)}.empty-state{color:var(--muted);border:1px dashed var(--line);border-radius:16px;padding:24px;text-align:center}.mini-stat{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:10px 0}.gps-badge{font-size:11px;font-weight:900;border-radius:999px;padding:7px 10px}.gps-badge.off{background:var(--surface2);color:var(--muted)}.gps-badge.live{background:var(--accentSoft);color:var(--accent)}.gps-badge.waiting{background:rgba(255,207,74,.1);color:var(--warning)}.gps-badge.error{background:rgba(255,98,112,.1);color:var(--danger)}.driver-security{margin-bottom:18px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;color:var(--muted);font-size:12px;background:var(--surface)}
@media(max-width:900px){.app-shell{padding:10px}.topbar{min-height:66px;padding-inline:3px}.brand{font-size:22px}.subtitle{display:none}.status-pill{font-size:10px;padding:7px 10px}.layout,.driver-layout{grid-template-columns:1fr}.panel{padding:20px}h1{font-size:30px}.map-card{min-height:400px;order:2}#map{min-height:400px}.form-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:480px){.app-shell{padding:0}.topbar{padding:10px 15px}.panel,.map-card{border-left:0;border-right:0;border-radius:0;box-shadow:none}.layout{gap:8px}.panel{padding:20px 16px}.compact{padding-inline:13px}.fare-card{padding:11px}.price-box{align-items:flex-end}.price-box strong{font-size:24px}}

.simple-fare .price-box { margin-top: 2px; }


/* v0.9 ride progress + driver identity + road ETA */
.ride-progress {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: start;
  gap: 5px;
}

.progress-step {
  min-width: 56px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #64707a;
  text-align: center;
}

.progress-step span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #101419;
  font-size: 10px;
  font-weight: 900;
}

.progress-step small {
  font-size: 8px;
  line-height: 1.15;
}

.progress-step.active {
  color: var(--text);
}

.progress-step.active span {
  border-color: var(--accent);
  background: var(--accent);
  color: #101309;
}

.progress-line {
  height: 2px;
  margin-top: 12px;
  background: var(--line);
  border-radius: 999px;
}

.progress-line.active {
  background: var(--accent);
}

.driver-profile-card {
  margin-top: 15px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 17px;
  border: 1px solid var(--line);
  background: #11161a;
}

.driver-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-weight: 950;
  letter-spacing: -.5px;
}

.driver-profile-main {
  min-width: 0;
}

.driver-label {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .9px;
}

.driver-profile-main strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

.driver-car {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.driver-plate {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #fff;
  color: #111;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .8px;
}

.call-driver {
  text-decoration: none;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(185,255,57,.34);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

.eta-card {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 15px;
  padding: 14px;
  border-radius: 17px;
  background: var(--accent);
  color: #101309;
}

.eta-card span {
  display: block;
  font-size: 9px;
  font-weight: 800;
}

.eta-card strong {
  display: block;
  margin-top: 1px;
  font-size: 27px;
  line-height: 1;
}

.eta-distance {
  font-size: 10px;
  font-weight: 850;
  opacity: .72;
}

.cancel-panel {
  margin-top: 15px;
  padding: 14px;
  border: 1px solid rgba(255,98,112,.28);
  border-radius: 16px;
  background: rgba(255,98,112,.05);
}

.cancel-panel > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
}

.cancel-warning {
  margin-top: 8px;
  color: var(--warning);
  font-size: 10px;
}

.cancel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.danger-solid {
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--danger);
  color: white;
  font-weight: 900;
}

@media (max-width: 480px) {
  .ride-progress {
    gap: 2px;
  }

  .progress-step {
    min-width: 45px;
  }

  .progress-step small {
    font-size: 7px;
  }

  .driver-profile-card {
    grid-template-columns: auto minmax(0,1fr);
  }

  .call-driver {
    grid-column: 1 / -1;
    text-align: center;
  }
}


/* v1.0 waiting meter */
.waiting-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 17px;
  border: 1px solid rgba(255,207,74,.28);
  background: rgba(255,207,74,.07);
}

.waiting-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
}

.waiting-header span {
  display: block;
  color: var(--warning);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .6px;
}

.waiting-header strong {
  display: block;
  margin-top: 3px;
  font-size: 27px;
  line-height: 1;
}

.waiting-fee {
  text-align: right;
}

.waiting-fee strong {
  color: var(--warning);
  font-size: 20px;
}

.waiting-rule {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,207,74,.17);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

/* v1.0 customer-driver chat */
.chat-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: #11161a;
}

.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.chat-head span {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .8px;
}

.chat-head strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.chat-live {
  color: var(--accent);
  font-size: 9px;
  font-weight: 950;
}

.chat-messages {
  max-height: 240px;
  min-height: 74px;
  overflow-y: auto;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.chat-empty {
  align-self: center;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.chat-row {
  display: flex;
}

.chat-row.mine {
  justify-content: flex-end;
}

.chat-row.theirs {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 82%;
  padding: 9px 11px 7px;
  border-radius: 14px;
  background: var(--surface-3);
  font-size: 11px;
  line-height: 1.3;
}

.chat-row.mine .chat-bubble {
  background: var(--accent);
  color: #101309;
}

.chat-bubble span {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble small {
  display: block;
  margin-top: 4px;
  text-align: right;
  opacity: .58;
  font-size: 7px;
}

.chat-compose {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.chat-compose input {
  padding: 11px 12px;
}


/* v1.1 waiting states */
.waiting-card.billing-active {
  border-color: rgba(255,98,112,.42);
  background: rgba(255,98,112,.08);
}

.waiting-card.billing-active .waiting-header span,
.waiting-card.billing-active .waiting-fee strong {
  color: var(--danger);
}

/* v1.1 quick chat replies */
.quick-replies {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 9px 10px 0;
  scrollbar-width: none;
}

.quick-replies::-webkit-scrollbar {
  display: none;
}

.quick-replies button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--surface-2);
  color: #d8dee3;
  font-size: 9px;
  font-weight: 800;
}

/* v1.1 receipt */
.receipt-card {
  margin-top: 15px;
  padding: 16px;
  border: 1px solid rgba(185,255,57,.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(185,255,57,.08), rgba(19,23,28,.94));
}

.receipt-success {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #0d100b;
  font-weight: 950;
  font-size: 22px;
}

.receipt-title {
  margin-top: 11px;
}

.receipt-title span,
.rating-card > div > span {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .9px;
}

.receipt-title strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 15px;
  background: var(--accent);
  color: #101309;
}

.receipt-total span {
  font-size: 10px;
  font-weight: 800;
}

.receipt-total strong {
  font-size: 27px;
  line-height: 1;
}

.receipt-lines {
  display: grid;
  gap: 7px;
  padding: 13px 3px;
  border-bottom: 1px solid var(--line);
}

.receipt-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 10px;
}

.receipt-lines strong {
  color: #dce2e6;
}

.receipt-meta {
  display: grid;
  gap: 3px;
  padding-top: 11px;
  color: var(--muted);
  font-size: 9px;
}

/* v1.1 rating */
.rating-card {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #11161a;
}

.rating-card strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.rating-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 15px 0 12px;
}

.rating-stars button {
  border: 0;
  background: transparent;
  color: #4d5861;
  padding: 0;
  font-size: 33px;
  line-height: 1;
}

.rating-stars button.selected {
  color: var(--warning);
}

.rating-thanks {
  text-align: center;
  padding: 8px;
}

.rating-thanks span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}


/* ==============================
   v1.2 availability
   ============================== */
.status-pill.busy {
  border-color: rgba(255,207,74,.35);
  background: rgba(255,207,74,.10);
  color: var(--warning);
}

.status-pill.offline {
  border-color: rgba(152,163,173,.25);
  background: rgba(152,163,173,.08);
  color: var(--muted);
}

/* ==============================
   v1.2 modern web Driver
   ============================== */
.modern-driver-page {
  min-height: 100vh;
}

.driver-app-shell {
  max-width: 1540px;
}

.driver-topbar {
  position: relative;
  z-index: 10;
}

.driver-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.driver-version-badge {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.online-toggle.busy {
  border-color: rgba(255,207,74,.34);
  background: rgba(255,207,74,.08);
  color: var(--warning);
}

.driver-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7,9,11,.94);
  backdrop-filter: blur(12px);
}

.driver-login-card {
  width: min(440px, 100%);
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.driver-login-card .brand {
  margin-bottom: 20px;
}

.driver-login-card h2 {
  margin-bottom: 6px;
}

.driver-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 6px 0 16px;
}

.driver-stat-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}

.driver-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.driver-stat-card strong {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  font-weight: 950;
}

.modern-driver-grid {
  display: grid;
  grid-template-columns: minmax(460px, .92fr) minmax(540px, 1.08fr);
  gap: 14px;
  align-items: start;
}

.driver-orders-panel,
.modern-active-panel {
  min-height: 610px;
}

.modern-active-panel {
  position: sticky;
  top: 12px;
}

.compact-section-title h2 {
  margin-bottom: 0;
}

.modern-ride-card {
  padding: 16px;
}

.new-ride-badge,
.active-status-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .7px;
}

.ride-customer-name {
  display: block;
  font-size: 18px;
}

.driver-route-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 50%;
}

.driver-route-dot.pickup {
  background: var(--accent);
}

.driver-route-dot.dropoff {
  background: #fff;
}

.driver-trip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.driver-trip-chips span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #11161a;
  color: var(--muted);
  font-size: 9px;
}

.driver-note {
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid rgba(255,207,74,.18);
  border-radius: 12px;
  background: rgba(255,207,74,.06);
  font-size: 10px;
}

.driver-order-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 13px;
}

.driver-order-actions button {
  min-height: 43px;
}

.driver-history-section {
  margin-top: 26px;
}

.driver-history-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.driver-history-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #11161a;
}

.history-state {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 950;
}

.history-state.success {
  background: var(--accent-soft);
  color: var(--accent);
}

.history-main {
  min-width: 0;
}

.history-main strong,
.history-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-main strong {
  font-size: 10px;
}

.history-main span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.history-price {
  color: var(--accent);
}

.compact-empty {
  padding: 16px;
}

.modern-active-ride {
  display: grid;
  gap: 12px;
}

.active-ride-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.active-ride-head h3 {
  margin: 0;
  font-size: 23px;
}

.driver-customer-phone {
  display: inline-block;
  margin-top: 3px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
}

.active-total {
  text-align: right;
}

.active-total span {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.active-total strong {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 25px;
}

.active-route-box {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #11161a;
}

.driver-waiting-box {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  padding: 13px;
  border: 1px solid rgba(255,207,74,.26);
  border-radius: 14px;
  background: rgba(255,207,74,.06);
}

.driver-waiting-box.billing-active {
  border-color: rgba(255,98,112,.38);
  background: rgba(255,98,112,.07);
}

.driver-waiting-box span,
.driver-waiting-box strong {
  display: block;
}

.driver-waiting-box span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.driver-waiting-box > div:first-child strong {
  margin-top: 2px;
  font-size: 24px;
}

.driver-waiting-right {
  text-align: right;
}

.driver-waiting-right strong {
  margin-top: 2px;
  color: var(--warning);
  font-size: 18px;
}

.driver-waiting-box.billing-active .driver-waiting-right strong {
  color: var(--danger);
}

.driver-chat-box {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #11161a;
}

.driver-chat-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.driver-chat-title span {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
}

.driver-chat-title strong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.driver-quick-replies {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 9px 0;
}

.driver-quick-replies button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: #dce2e6;
  padding: 6px 9px;
  font-size: 8px;
  font-weight: 800;
}

.driver-chat-messages {
  min-height: 110px;
  max-height: 250px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.driver-chat-row {
  display: flex;
}

.driver-chat-row.mine {
  justify-content: flex-end;
}

.driver-chat-bubble {
  max-width: 82%;
  padding: 8px 10px 6px;
  border-radius: 12px;
  background: var(--surface-3);
  font-size: 10px;
  line-height: 1.3;
}

.driver-chat-row.mine .driver-chat-bubble {
  background: var(--accent);
  color: #0d100b;
}

.driver-chat-bubble span,
.driver-chat-bubble small {
  display: block;
}

.driver-chat-bubble small {
  margin-top: 3px;
  text-align: right;
  opacity: .55;
  font-size: 7px;
}

.driver-chat-compose {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid var(--line);
}

.driver-chat-compose input {
  padding: 10px 11px;
}

.driver-active-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.driver-active-controls button {
  min-height: 42px;
}

.driver-main-action {
  margin-top: 0;
  min-height: 53px;
  font-size: 13px;
}

.driver-toast {
  position: fixed;
  z-index: 4000;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 24px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-3);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.driver-toast.message {
  border-color: rgba(185,255,57,.35);
  color: var(--accent);
}

.driver-toast.error {
  border-color: rgba(255,98,112,.4);
  color: var(--danger);
}

@media (max-width: 1000px) {
  .driver-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .modern-driver-grid {
    grid-template-columns: 1fr;
  }

  .modern-active-panel {
    position: static;
  }
}

@media (max-width: 600px) {
  .driver-top-actions {
    gap: 5px;
  }

  .driver-version-badge,
  #driverLogoutBtn {
    display: none;
  }

  .driver-stats-grid {
    grid-template-columns: 1fr 1fr;
    padding-inline: 6px;
  }

  .driver-stat-card strong {
    font-size: 17px;
  }

  .modern-driver-page .panel {
    border-radius: 16px;
  }

  .driver-active-controls {
    grid-template-columns: 1fr;
  }

  .active-ride-head {
    display: grid;
  }

  .active-total {
    text-align: left;
  }

  .driver-waiting-box {
    align-items: flex-start;
  }
}


/* ==============================
   v1.3 route selection
   ============================== */
.route-input-card {
  position: relative;
  margin-top: 18px;
  padding: 0 13px 13px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #11161a;
}

.route-field {
  margin-top: 0;
  padding-top: 13px;
}

.route-field.first {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 25px;
}

.map-pick-button.active {
  color: var(--warning);
}

.swap-route-button {
  position: absolute;
  z-index: 3;
  top: 81px;
  right: 22px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 4px solid #11161a;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 5px 14px rgba(0,0,0,.25);
}

.swap-route-button:hover {
  background: var(--accent);
  color: #0d100b;
}

.map-pick-hint {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(255,207,74,.28);
  border-radius: 14px;
  background: rgba(255,207,74,.07);
}

.map-pick-hint strong {
  font-size: 11px;
  color: var(--warning);
}

.map-pick-hint span {
  grid-column: 1;
  color: var(--muted);
  font-size: 9px;
}

.map-pick-hint button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

#map.map-picking {
  cursor: crosshair;
}

.route-confirmation {
  margin-top: 11px;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #11161a;
}

.route-confirmation > div {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  align-items: start;
}

.route-confirmation small,
.route-confirmation strong {
  display: block;
}

.route-confirmation small {
  color: var(--muted);
  font-size: 8px;
}

.route-confirmation strong {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.route-confirm-dot {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
}

.route-confirm-dot.pickup {
  background: var(--accent);
}

.route-confirm-dot.dropoff {
  background: white;
}

@media (max-width: 480px) {
  .route-input-card {
    padding-inline: 11px;
  }

  .swap-route-button {
    right: 17px;
  }

  .location-actions {
    gap: 10px;
  }
}


/* v1.4 driver accounts + customer rating */
.login-field-gap { height: 10px; }

.driver-account-badge {
  max-width: 180px;
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid rgba(185,255,57,.25);
  border-radius: 999px;
  background: rgba(185,255,57,.07);
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 900;
}

.rating-history-row { align-items: start; }

.rate-customer-button {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--warning);
  font-size: 8px;
  font-weight: 850;
  text-align: left;
}

.driver-rating-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6,8,10,.86);
  backdrop-filter: blur(9px);
}

.driver-rating-modal-card {
  width: min(460px, 100%);
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.driver-rating-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0;
}

.driver-rating-stars button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #46515b;
  font-size: 36px;
}

.driver-rating-stars button.selected { color: var(--warning); }

.driver-rating-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: 12px;
}


/* v1.5 driver selection */
.driver-choice-card {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #11161a;
}

.driver-choice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.driver-choice-head span {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .8px;
}

.driver-choice-head strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.driver-options-list {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

.driver-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: #fff;
  text-align: left;
}

.driver-option.fastest {
  grid-template-columns: auto minmax(0,1fr) auto;
}

.driver-option-vehicle {
  width: 84px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.driver-option-vehicle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.driver-option.selected {
  border-color: rgba(185,255,57,.45);
  background: rgba(185,255,57,.07);
}

.driver-option.unavailable {
  opacity: .45;
  cursor: not-allowed;
}

.driver-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #101309;
  font-weight: 950;
}

.driver-option-main {
  min-width: 0;
}

.driver-option-main strong,
.driver-option-main span,
.driver-option-main small {
  display: block;
}

.driver-option-main > span {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}

.driver-option-main small {
  margin-top: 3px;
  color: #b8c2ca;
  font-size: 8px;
}

.driver-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.favorite-label {
  display: inline-block !important;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,207,74,.10);
  color: var(--warning) !important;
  font-size: 6px !important;
  font-weight: 950;
}

.favorite-driver-button {
  padding: 5px;
  color: var(--muted);
  font-size: 20px;
}

.favorite-driver-button.active {
  color: var(--warning);
}

.driver-option-check {
  min-width: 17px;
  color: var(--accent);
  font-weight: 950;
}

.driver-choice-note {
  margin-top: 9px;
  color: var(--muted);
  font-size: 8px;
}

/* mandatory post-ride customer rating */
.mandatory-rating-note {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(185,255,57,.20);
  border-radius: 12px;
  background: rgba(185,255,57,.06);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.driver-rating-actions.single {
  grid-template-columns: 1fr;
}


.driver-photo {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
}

.driver-profile-card {
  align-items: start;
}

.driver-option .driver-photo {
  width: 38px;
  height: 38px;
}

.driver-icon-wrap {
  width: 58px;
  height: 58px;
  position: relative;
}

.driver-icon-photo {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(185,255,57,.28);
  background: #0e1116;
}

.driver-vehicle-preview {
  margin-top: 10px;
  width: 100%;
  max-width: 210px;
  height: 90px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.driver-vehicle-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}


/* ==============================
   v1.7 saved + recent places
   ============================== */
.saved-places-card {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #11161a;
}

.saved-places-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.saved-places-head span {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .8px;
}

.saved-places-head strong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.quick-place-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.quick-place-pill {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: white;
  text-align: left;
}

.quick-place-pill > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #1a2026;
  color: var(--muted);
  font-size: 15px;
}

.quick-place-pill.configured > span {
  background: rgba(185,255,57,.12);
  color: var(--accent);
}

.quick-place-pill strong,
.quick-place-pill small {
  display: block;
}

.quick-place-pill strong {
  font-size: 9px;
}

.quick-place-pill small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
}

.saved-places-body {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.saved-section + .saved-section {
  margin-top: 15px;
}

.saved-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.saved-section-title strong {
  font-size: 10px;
}

.saved-section-title span {
  color: var(--muted);
  font-size: 7px;
}

.saved-place-list {
  display: grid;
  gap: 6px;
}

.saved-place-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0e1317;
}

.saved-place-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(185,255,57,.08);
  color: var(--accent);
  font-size: 14px;
}

.recent-place-item .saved-place-icon {
  background: #171d23;
  color: var(--muted);
}

.saved-place-main {
  min-width: 0;
}

.saved-place-main strong,
.saved-place-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-place-main strong {
  font-size: 9px;
}

.saved-place-main span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.saved-place-actions {
  display: flex;
  gap: 4px;
}

.saved-place-actions button {
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171d23;
  color: #dce5eb;
  font-size: 6px;
  font-weight: 900;
}

.saved-place-actions button:last-child {
  border-color: rgba(185,255,57,.20);
  color: var(--accent);
}

.saved-place-remove {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #75818b;
  font-size: 17px;
}

.saved-place-empty {
  padding: 12px 8px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
}

.save-place-button:disabled {
  opacity: .35;
  cursor: default;
}

.saved-place-modal {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5,7,9,.86);
  backdrop-filter: blur(10px);
}

.saved-place-modal-card {
  width: min(430px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.saved-place-modal-card h2 {
  margin: 4px 0 4px;
}

.saved-place-modal-card > label {
  display: block;
  margin: 17px 0 6px;
  color: #dfe7ec;
  font-size: 9px;
  font-weight: 850;
}

.saved-place-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 520px) {
  .saved-place-item {
    grid-template-columns: auto minmax(0,1fr) auto;
  }

  .saved-place-actions {
    grid-column: 2 / span 2;
  }

  .saved-place-remove {
    grid-column: 3;
    grid-row: 1;
  }

  .saved-section-title {
    display: block;
  }

  .saved-section-title span {
    display: block;
    margin-top: 2px;
  }
}


/* v1.8.1 non-blocking driver rating reminder */
.pending-rating-reminder {
  margin: 0 auto 12px;
  max-width: 1500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 207, 74, .28);
  border-radius: 15px;
  background: rgba(255, 207, 74, .07);
}
.pending-rating-reminder span {
  display: block;
  color: var(--warning);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .7px;
}
.pending-rating-reminder strong {
  display: block;
  margin-top: 2px;
  font-size: 10px;
}
.rating-card.required-rating {
  border-color: rgba(185,255,57,.38);
  box-shadow: 0 0 0 1px rgba(185,255,57,.08);
}


/* ==============================
   v1.9 precision pickup
   ============================== */
.pickup-precision-card {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(185,255,57,.20);
  border-radius: 17px;
  background: rgba(185,255,57,.035);
}

.pickup-precision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pickup-precision-head span {
  display: block;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .8px;
}

.pickup-precision-head strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.pickup-precision-status {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  align-items: center;
  margin-top: 11px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #11161a;
}

.pickup-crosshair {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #101309;
  font-size: 20px;
  font-weight: 950;
}

.pickup-precision-status strong,
.pickup-precision-status span {
  display: block;
}

.pickup-precision-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.pickup-precision-status span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.pickup-refine-controls {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(255,207,74,.25);
  border-radius: 13px;
  background: rgba(255,207,74,.06);
}

.pickup-refine-controls strong,
.pickup-refine-controls span {
  display: block;
}

.pickup-refine-controls strong {
  color: var(--warning);
  font-size: 10px;
}

.pickup-refine-controls span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.pickup-refine-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 8px;
  margin-top: 10px;
}

.pickup-note-label {
  display: block;
  margin-top: 11px;
  font-size: 9px;
  font-weight: 900;
}

.pickup-note-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.pickup-note-chips button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #14191e;
  color: #c8d1d8;
  font-size: 8px;
}

.pickup-note-chips button:hover {
  border-color: rgba(185,255,57,.30);
  color: var(--accent);
}

.customer-pickup-note {
  margin: -2px 0 6px 21px;
  padding: 7px 9px;
  border-left: 2px solid var(--accent);
  background: rgba(185,255,57,.055);
  color: #dce6cf;
  font-size: 9px;
  line-height: 1.45;
}

.driver-pickup-instruction {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(185,255,57,.24);
  border-radius: 13px;
  background: rgba(185,255,57,.055);
}

.driver-pickup-instruction span,
.driver-pickup-instruction strong {
  display: block;
}

.driver-pickup-instruction span {
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .7px;
}

.driver-pickup-instruction strong {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
}

.driver-pickup-detail {
  margin-top: 5px;
  color: #f3f7ed;
  font-size: 9px;
  line-height: 1.45;
}


/* ==============================
   v1.10 matching + live tracking
   ============================== */
.matching-experience {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(185,255,57,.18);
  border-radius: 19px;
  background:
    radial-gradient(circle at 12% 50%, rgba(185,255,57,.09), transparent 32%),
    #10151a;
  overflow: hidden;
}
.matching-visual {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
}
.radar-ring {
  position: absolute;
  inset: 50%;
  width: 20px;
  height: 20px;
  margin: -10px;
  border: 1px solid rgba(185,255,57,.48);
  border-radius: 50%;
  opacity: 0;
}
.matching-experience.searching .radar-ring { animation: nextgenRadar 2.4s infinite ease-out; }
.matching-experience.searching .radar-ring-two { animation-delay: .8s; }
.matching-experience.searching .radar-ring-three { animation-delay: 1.6s; }
@keyframes nextgenRadar {
  0% { transform: scale(.7); opacity: .9; }
  100% { transform: scale(4.2); opacity: 0; }
}
.matching-car,
.matching-check {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #0d100b;
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
  font-size: 23px;
  font-weight: 950;
}
.matching-check { font-size: 25px; }
.matching-experience.matched .matching-check,
.matching-experience.arrived .matching-check { animation: nextgenMatchPop .4s ease both; }
@keyframes nextgenMatchPop {
  from { transform: scale(.65); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.matching-experience.arriving .matching-car,
.matching-experience.driving .matching-car { animation: nextgenCarFloat 1.8s infinite ease-in-out; }
@keyframes nextgenCarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.matching-copy { min-width: 0; }
.matching-copy > strong { display: block; font-size: 15px; }
.matching-copy > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.matching-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .9px;
}
.matching-meta {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  align-items: center;
  color: #aab4bc;
  font-size: 8px;
}
.matching-live { color: var(--accent); font-weight: 950; }
.matching-experience.matched,
.matching-experience.arrived {
  border-color: rgba(185,255,57,.36);
  background: linear-gradient(135deg, rgba(185,255,57,.09), #10151a 50%);
}
.ride-progress-five {
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
}
.ride-progress-five .progress-step small { max-width: 62px; }
.driver-map-icon { overflow: visible !important; }
.driver-car-marker {
  --heading: 0deg;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(9,12,15,.92);
  border: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,.46), 0 0 0 6px rgba(185,255,57,.08);
}
.driver-car-heading {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: rotate(var(--heading));
  transition: transform .35s ease;
  color: var(--accent);
}
.driver-car-heading svg { width: 32px; height: 32px; fill: currentColor; }
.incoming-driver-route {
  stroke: var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.36));
}
.driver-tracker {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
}
.driver-tracker-copy { min-width: 0; }
.tracking-last-update {
  margin-top: 3px;
  color: #81909a;
  font-size: 8px;
}
.tracking-quality {
  align-self: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(185,255,57,.10);
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
}
.tracking-quality.stale {
  background: rgba(255,207,74,.08);
  color: var(--warning);
}
.eta-card small {
  display: block;
  margin-top: 4px;
  color: #77838c;
  font-size: 7px;
}
@media (max-width: 720px) {
  .matching-experience {
    grid-template-columns: 70px minmax(0,1fr);
    gap: 11px;
    padding: 13px;
  }
  .matching-visual { width: 64px; height: 64px; }
  .matching-car,
  .matching-check { width: 42px; height: 42px; font-size: 20px; }
  .ride-progress-five .progress-step small { font-size: 7px; }
}

.driver-rating-summary {
  margin-top: 4px;
  color: var(--warning);
  font-size: 9px;
  font-weight: 850;
}


/* v1.11 smart dispatch */
.dispatch-offer-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(185,255,57,.22);
  border-radius: 14px;
  background: rgba(185,255,57,.055);
}
.dispatch-offer-strip span { display:block; color:var(--accent); font-size:7px; font-weight:950; letter-spacing:.8px; }
.dispatch-offer-strip strong { display:block; margin-top:3px; font-size:10px; }
.dispatch-rank { min-width:42px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--accent); color:#0d100b; font-size:13px; font-weight:950; }
.dispatch-offer-strip.wave-2 { border-color:rgba(255,207,74,.25); background:rgba(255,207,74,.05); }
.dispatch-offer-strip.wave-2 span { color:var(--warning); }
.dispatch-offer-strip.wave-3 { border-color:var(--line); background:rgba(255,255,255,.025); }


/* ==============================
   v1.12 customer account
   ============================== */
.customer-account-card {
  margin: 15px 0 12px;
  padding: 13px;
  border: 1px solid rgba(185,255,57,.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(185,255,57,.055), transparent 50%),
    #10151a;
}

#customerLoggedOut,
#customerLoggedIn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}

.customer-account-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.customer-account-main > div:last-child {
  min-width: 0;
}

.customer-account-main span,
.customer-account-main strong,
.customer-account-main small {
  display: block;
}

.customer-account-main span {
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .8px;
}

.customer-account-main strong {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.customer-account-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.customer-account-icon,
.customer-account-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(185,255,57,.10);
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.customer-account-avatar {
  background: var(--accent);
  color: #101309;
  font-size: 15px;
}

#customerLoggedIn {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
}

.customer-account-stats {
  display: flex;
  gap: 7px;
}

.customer-account-stats > div {
  min-width: 66px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.customer-account-stats span,
.customer-account-stats strong {
  display: block;
}

.customer-account-stats span {
  color: var(--muted);
  font-size: 6px;
  text-transform: uppercase;
}

.customer-account-stats strong {
  margin-top: 2px;
  font-size: 10px;
}

.customer-account-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.customer-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.customer-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.customer-history-head strong {
  font-size: 10px;
}

.customer-history-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.055);
}

.customer-history-row:first-child {
  border-top: 0;
}

.customer-history-row > div {
  min-width: 0;
}

.customer-history-row strong,
.customer-history-row span,
.customer-history-row small {
  display: block;
}

.customer-history-row > div > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.customer-history-row span,
.customer-history-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
}

.customer-history-row small {
  color: var(--warning);
}

.customer-login-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6,8,10,.87);
  backdrop-filter: blur(10px);
}

.customer-login-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.customer-login-card h2 {
  margin: 5px 0;
}

.customer-login-close {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: #fff;
  font-size: 19px;
}

.customer-code-step {
  margin-top: 13px;
}

.dev-code-box {
  margin-bottom: 13px;
  padding: 12px;
  border: 1px solid rgba(255,207,74,.25);
  border-radius: 14px;
  background: rgba(255,207,74,.06);
  text-align: center;
}

.dev-code-box span,
.dev-code-box strong,
.dev-code-box small {
  display: block;
}

.dev-code-box span {
  color: var(--warning);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .9px;
}

.dev-code-box strong {
  margin-top: 4px;
  font-size: 25px;
  letter-spacing: 5px;
}

.dev-code-box small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
}

#nameInput[readonly],
#phoneInput[readonly] {
  opacity: .78;
  cursor: default;
}

@media (max-width: 560px) {
  #customerLoggedOut {
    align-items: stretch;
    flex-direction: column;
  }

  #customerLoggedOut .primary {
    width: 100%;
  }

  #customerLoggedIn {
    grid-template-columns: 1fr;
  }

  .customer-account-stats {
    margin-top: 9px;
  }

  .customer-account-actions {
    grid-column: 1;
  }
}


/* ==============================
   v1.13 driver profile
   ============================== */
.driver-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(5,7,9,.88);
  backdrop-filter: blur(10px);
}

.driver-profile-modal-card {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.driver-profile-close {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: #fff;
  font-size: 20px;
}

.driver-profile-editor-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  margin-top: 18px;
}

.driver-photo-editor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0e1317;
}

.driver-profile-photo-preview {
  width: 128px;
  height: 128px;
  align-self: center;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 3px solid rgba(185,255,57,.30);
  border-radius: 50%;
  background: #171d22;
}

.driver-profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driver-profile-photo-preview > div {
  color: var(--accent);
  font-size: 36px;
  font-weight: 950;
}

.driver-photo-editor > strong {
  margin-top: 3px;
  font-size: 11px;
  text-align: center;
}

.driver-photo-editor > span {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
}

.driver-photo-editor input[type="file"] {
  width: 100%;
  font-size: 8px;
}

.driver-crop-editor {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.driver-crop-editor canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(185,255,57,.35);
  background: #080b0e;
}

.driver-crop-editor label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
}

.driver-crop-editor input[type="range"] {
  width: 100%;
}

.driver-crop-editor .primary {
  margin-top: 12px;
}

.driver-profile-fields {
  min-width: 0;
}

.driver-password-box {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.driver-password-box > strong {
  display: block;
  margin: 3px 0 10px;
  font-size: 12px;
}

.driver-profile-fields #driverProfileNotice {
  margin-top: 12px;
}

/* ==============================
   v1.13 admin
   ============================== */
.admin-page {
  min-height: 100vh;
  background: var(--background);
}

.admin-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 40px;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
  gap: 16px;
}

.admin-driver-list {
  display: grid;
  gap: 9px;
}

.admin-driver-row {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-2);
}

.admin-driver-row.inactive {
  opacity: .58;
}

.admin-driver-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(185,255,57,.11);
  color: var(--accent);
  font-weight: 950;
}

.admin-driver-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-driver-main {
  min-width: 0;
}

.admin-driver-main strong,
.admin-driver-main span,
.admin-driver-main small {
  display: block;
}

.admin-driver-main strong {
  font-size: 10px;
}

.admin-driver-main span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.admin-driver-main small {
  margin-top: 4px;
  color: #b9c3cb;
  font-size: 7px;
}

.admin-driver-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.admin-driver-tag {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 6px;
  font-weight: 900;
}

.admin-driver-tag.admin {
  background: rgba(185,255,57,.10);
  color: var(--accent);
}

.admin-driver-tag.off {
  background: rgba(255,90,90,.09);
  color: #ff8d8d;
}

.admin-driver-actions {
  display: grid;
  gap: 5px;
  min-width: 116px;
}

.admin-form-card .field-group {
  margin-top: 10px;
}

.admin-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 11px 0;
  color: var(--muted);
  font-size: 8px;
}

.admin-check-row input {
  width: auto;
}

.admin-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5,7,9,.92);
}

.admin-login-card {
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}

@media (max-width: 820px) {
  .driver-profile-editor-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .driver-photo-editor {
    max-width: 360px;
    width: 100%;
    justify-self: center;
  }

  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==============================
   v1.14 operations admin
   ============================== */
.admin-page { background: var(--bg); }
.admin-shell { width: min(1380px, calc(100% - 28px)); }
.admin-driver-row { background: var(--surface2); }

.admin-v114-header h1 { margin-bottom: 3px; }

.admin-tabs {
  position: sticky;
  top: 8px;
  z-index: 1200;
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(13,17,21,.93);
  backdrop-filter: blur(12px);
}

.admin-tabs button {
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .5px;
}

.admin-tabs button.active {
  background: var(--accent);
  color: #11150b;
}

.admin-tab-panel { display: grid; gap: 16px; }

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
}

.admin-kpi-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}

.admin-kpi-card.accent { border-color: rgba(185,255,57,.32); background: rgba(185,255,57,.055); }
.admin-kpi-card.warning { border-color: rgba(255,207,74,.25); }
.admin-kpi-card.danger { border-color: rgba(255,98,112,.24); }
.admin-kpi-card span,
.admin-kpi-card strong,
.admin-kpi-card small { display: block; }
.admin-kpi-card span { color: var(--muted); font-size: 7px; font-weight: 950; letter-spacing: .7px; }
.admin-kpi-card strong { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; font-size: 21px; white-space: nowrap; }
.admin-kpi-card.accent strong { color: var(--accent); }
.admin-kpi-card small { margin-top: 5px; color: #aab4bc; font-size: 7px; line-height: 1.35; }

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(310px,.55fr);
  gap: 16px;
}

.admin-live-map-card { overflow: hidden; }
#adminLiveMap {
  height: 390px;
  margin: 15px -26px -1px;
  background: #11161a;
  border-top: 1px solid var(--line);
}

.admin-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
}
.admin-live-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(185,255,57,.08);
}

.admin-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 7px;
}
.admin-map-legend > span { display: flex; align-items: center; gap: 5px; }
.driver-dot, .ride-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.driver-dot.available { background: var(--accent); }
.driver-dot.busy { background: var(--warning); }
.ride-dot { background: #66b7ff; }

.admin-map-div-icon { background: transparent; border: 0; }
.admin-map-driver {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 3px solid #0b0e11;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.34);
  font-size: 18px;
}
.admin-map-driver.busy { background: var(--warning); }
.admin-map-driver.offline { background: #707a83; filter: grayscale(1); }
.admin-map-driver.stale { opacity: .48; }
.admin-map-ride {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 3px solid #0b0e11;
  border-radius: 50%;
  background: #66b7ff;
  color: #071019;
  font-size: 10px;
  font-weight: 950;
  box-shadow: 0 5px 14px rgba(0,0,0,.3);
}
.admin-map-ride.active { background: #fff; }

.admin-revenue-card { min-height: 470px; }
.admin-revenue-chart {
  height: 345px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  align-items: end;
  gap: 7px;
  margin-top: 20px;
}
.admin-revenue-column {
  height: 100%;
  display: grid;
  grid-template-rows: 24px minmax(0,1fr) 18px 16px;
  align-items: end;
  text-align: center;
}
.admin-revenue-column > strong { overflow: hidden; color: #d9e1e6; font-size: 7px; }
.admin-revenue-bar-wrap {
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.admin-revenue-bar {
  width: min(28px, 72%);
  min-height: 3px;
  border-radius: 8px 8px 2px 2px;
  background: var(--accent);
}
.admin-revenue-column > span { margin-top: 5px; color: var(--muted); font-size: 7px; font-weight: 900; }
.admin-revenue-column > small { color: #64717b; font-size: 6px; }

.admin-live-rides { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.admin-live-ride-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface2);
}
.admin-live-ride-card.warning { border-color: rgba(255,207,74,.28); }
.admin-live-ride-card.live { border-color: rgba(185,255,57,.20); }
.admin-live-ride-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.admin-live-ride-head > div:first-child { min-width: 0; }
.admin-live-ride-head strong, .admin-live-ride-head small { display: block; }
.admin-live-ride-head > div:first-child > strong { margin-top: 6px; font-size: 12px; }
.admin-live-ride-head small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.admin-live-price { text-align: right; }
.admin-live-price strong { color: var(--accent); font-size: 16px; }
.admin-live-price span { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.admin-status-pill {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(185,255,57,.08);
  color: var(--accent);
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .4px;
  white-space: nowrap;
}
.admin-status-pill.warning { background: rgba(255,207,74,.10); color: var(--warning); }
.admin-status-pill.danger { background: rgba(255,98,112,.10); color: var(--danger); }
.admin-status-pill.success { background: rgba(185,255,57,.10); color: var(--accent); }
.admin-live-route { display: grid; gap: 7px; margin-top: 12px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.16); }
.admin-live-route > div { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 7px; align-items: start; font-size: 8px; line-height: 1.35; }
.admin-live-route i { width: 7px; height: 7px; margin-top: 2px; border-radius: 50%; background: #fff; }
.admin-live-route i.pickup { background: var(--accent); }
.admin-ride-note { margin-top: 7px; color: #bdc6cd; font-size: 7px; line-height: 1.4; }
.admin-live-meta { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-top: 9px; color: var(--muted); font-size: 6px; }
.admin-live-meta strong { color: #d9e0e5; }
.admin-ride-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.admin-ride-actions select { width: auto; min-width: 180px; flex: 1 1 190px; padding: 8px 10px; border-radius: 10px; font-size: 8px; }
.admin-ride-actions .compact { padding: 8px 10px; font-size: 7px; }

.admin-section-with-controls { align-items: flex-end; }
.admin-inline-controls { display: flex; gap: 7px; align-items: center; }
.admin-inline-controls select { min-width: 180px; padding: 9px 11px; font-size: 8px; }
.admin-search-input { width: min(330px, 100%); padding: 9px 12px; font-size: 9px; }

.admin-table-wrap { margin-top: 13px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th, .admin-table td { padding: 10px 11px; border-bottom: 1px solid rgba(255,255,255,.055); text-align: left; vertical-align: middle; }
.admin-table th { position: sticky; top: 0; z-index: 2; background: #11161b; color: var(--muted); font-size: 7px; font-weight: 950; letter-spacing: .5px; text-transform: uppercase; }
.admin-table td { color: #d9dfe4; font-size: 8px; }
.admin-table td strong, .admin-table td small { display: block; }
.admin-table td small { margin-top: 3px; color: var(--muted); font-size: 6px; }
.admin-row-inactive { opacity: .5; }

.admin-feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-feed-list { display: grid; gap: 8px; margin-top: 12px; }
.admin-feed-item { padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface2); }
.admin-feed-item > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.admin-feed-item > div > span { color: var(--muted); font-size: 7px; }
.admin-feed-item > div > strong { font-size: 9px; }
.admin-feed-item p { margin: 8px 0; color: #c6ced4; font-size: 8px; line-height: 1.4; }
.admin-feed-item > small { display: block; color: #6f7b84; font-size: 6px; }
.admin-feed-item.cancellation { border-color: rgba(255,98,112,.15); }
.admin-feed-item.audit { border-left: 3px solid rgba(185,255,57,.38); }
.admin-stars { color: var(--warning); letter-spacing: 1px; }
.admin-stars small { color: var(--muted); letter-spacing: 0; }

@media (max-width: 1120px) {
  .admin-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .admin-dashboard-grid { grid-template-columns: 1fr; }
  .admin-revenue-card { min-height: 360px; }
  .admin-revenue-chart { height: 250px; }
}

@media (max-width: 760px) {
  .admin-shell { width: min(100% - 16px, 1380px); padding-top: 9px; }
  .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-live-rides, .admin-feedback-grid { grid-template-columns: 1fr; }
  #adminLiveMap { height: 330px; margin-inline: -20px; }
  .admin-header-actions { flex-wrap: wrap; }
  .admin-section-with-controls { align-items: stretch; flex-direction: column; }
  .admin-inline-controls { width: 100%; }
  .admin-inline-controls select { flex: 1; min-width: 0; }
  .admin-search-input { width: 100%; }
}


/* ==============================
   v1.28 production system status
   ============================== */
.admin-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-system-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-2);
}

.admin-system-card span,
.admin-system-card strong,
.admin-system-card small {
  display: block;
}

.admin-system-card span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .7px;
}

.admin-system-card strong {
  margin-top: 5px;
  font-size: 15px;
}

.admin-system-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.4;
  word-break: break-word;
}

.admin-system-status-block {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #0d1216;
}

.admin-system-ok,
.admin-system-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 11px;
}

.admin-system-ok {
  background: rgba(185,255,57,.06);
  color: var(--accent);
}

.admin-system-alert {
  background: rgba(255,190,60,.07);
  color: #ffd477;
}

.admin-system-ok strong,
.admin-system-alert strong {
  font-size: 10px;
}

.admin-system-ok span,
.admin-system-alert span {
  color: #cbd4da;
  font-size: 8px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .admin-system-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .admin-system-grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   v1.17 payments + cancellation
   ============================== */
.customer-payment-card {
  margin: 14px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0e1317;
}

.customer-payment-head span,
.customer-payment-head strong {
  display: block;
}

.customer-payment-head span {
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .8px;
}

.customer-payment-head strong {
  margin-top: 3px;
  font-size: 11px;
}

.customer-payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.customer-payment-option {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 22px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: #fff;
  text-align: left;
}

.customer-payment-option.selected {
  border-color: rgba(185,255,57,.50);
  background: rgba(185,255,57,.065);
}

.customer-payment-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(185,255,57,.10);
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.customer-payment-option strong,
.customer-payment-option span {
  display: block;
}

.customer-payment-option strong {
  font-size: 9px;
}

.customer-payment-option span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.35;
}

.customer-payment-check {
  visibility: hidden;
  color: var(--accent);
  font-weight: 950;
}

.customer-payment-option.selected .customer-payment-check {
  visibility: visible;
}

.cancel-warning.free-cancel {
  border-color: rgba(185,255,57,.22);
  background: rgba(185,255,57,.06);
  color: #dfffb0;
}

.cancel-warning.fee-cancel {
  border-color: rgba(255,180,70,.28);
  background: rgba(255,180,70,.07);
  color: #ffd184;
}

#customerBalanceStat.balance-due {
  border-color: rgba(255,96,96,.30);
  background: rgba(255,96,96,.06);
}

#customerBalanceStat.balance-due strong {
  color: #ff9696;
}

@media (max-width: 560px) {
  .customer-payment-options {
    grid-template-columns: 1fr;
  }
}


.admin-debt-value {
  color: #ff9696;
}

.admin-debt-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.admin-paid-ok {
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
}


/* ==============================
   v1.28 ride support
   ============================== */
.support-modal-card {
  width: min(620px, 100%);
}

.support-case-list {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}

.support-case-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #0d1216;
}

.support-case-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.support-case-head span,
.support-case-head strong {
  display: block;
}

.support-case-head span {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.support-case-head strong {
  margin-top: 3px;
  font-size: 10px;
}

.support-case-card > p {
  margin: 10px 0;
  color: #d8e0e5;
  font-size: 9px;
  line-height: 1.5;
}

.support-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 950;
}

.support-status.open {
  background: rgba(255,190,60,.10);
  color: #ffd477;
}

.support-status.in_progress {
  background: rgba(90,170,255,.10);
  color: #9ecbff;
}

.support-status.resolved {
  background: rgba(185,255,57,.09);
  color: var(--accent);
}

.support-public-response {
  padding: 9px;
  margin: 9px 0;
  border: 1px solid rgba(185,255,57,.18);
  border-radius: 11px;
  background: rgba(185,255,57,.05);
}

.support-public-response strong,
.support-public-response span {
  display: block;
}

.support-public-response strong {
  color: var(--accent);
  font-size: 7px;
}

.support-public-response span {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.45;
}

.support-thread {
  display: grid;
  gap: 6px;
  margin: 9px 0;
}

.support-message {
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--surface-2);
}

.support-message.admin {
  border-left: 2px solid var(--accent);
}

.support-message strong,
.support-message span {
  display: block;
}

.support-message strong {
  font-size: 7px;
}

.support-message span {
  margin-top: 3px;
  color: #cdd6dc;
  font-size: 8px;
  line-height: 1.4;
}

.customer-history-support {
  margin-top: 5px;
}

.driver-history-support {
  margin-top: 5px;
}


.admin-support-list {
  display: grid;
  gap: 12px;
}

.admin-support-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #0d1216;
}

.admin-support-card.high {
  border-color: rgba(255,96,96,.32);
}

.admin-support-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-support-head span,
.admin-support-head strong,
.admin-support-head small {
  display: block;
}

.admin-support-head span {
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .5px;
}

.admin-support-head strong {
  margin-top: 4px;
  font-size: 11px;
}

.admin-support-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
}

.admin-support-route,
.admin-support-description {
  margin-top: 11px;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
}

.admin-support-route strong,
.admin-support-route span,
.admin-support-route small {
  display: block;
}

.admin-support-route strong {
  font-size: 9px;
}

.admin-support-route span,
.admin-support-route small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
}

.admin-support-description {
  color: #d8e0e5;
  font-size: 9px;
  line-height: 1.5;
}

.admin-support-messages {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.admin-support-message {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.admin-support-message.internal {
  border-color: rgba(255,190,60,.22);
  background: rgba(255,190,60,.04);
}

.admin-support-message strong,
.admin-support-message span,
.admin-support-message small {
  display: block;
}

.admin-support-message strong {
  font-size: 7px;
}

.admin-support-message span {
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.45;
}

.admin-support-message small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 6px;
}

.admin-support-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


/* ==============================
   v1.28 admin pricing
   ============================== */
.admin-pricing-warning {
  margin: 13px 0 16px;
  padding: 12px 13px;
  border: 1px solid rgba(185,255,57,.22);
  border-radius: 14px;
  background: rgba(185,255,57,.055);
}

.admin-pricing-warning strong,
.admin-pricing-warning span {
  display: block;
}

.admin-pricing-warning strong {
  color: var(--accent);
  font-size: 9px;
}

.admin-pricing-warning span {
  margin-top: 4px;
  color: #c8d1d7;
  font-size: 8px;
  line-height: 1.45;
}

.admin-pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 14px;
  align-items: start;
}

.admin-pricing-form,
.admin-pricing-preview {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0d1216;
}

.admin-pricing-section + .admin-pricing-section {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.admin-pricing-preview {
  position: sticky;
  top: 14px;
}

.admin-pricing-preview h3 {
  margin: 5px 0 13px;
}

.admin-pricing-total {
  margin: 14px 0 10px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(185,255,57,.07);
  border: 1px solid rgba(185,255,57,.20);
}

.admin-pricing-total span,
.admin-pricing-total strong {
  display: block;
}

.admin-pricing-total span {
  color: var(--muted);
  font-size: 7px;
}

.admin-pricing-total strong {
  margin-top: 4px;
  color: var(--accent);
  font-size: 22px;
}

.admin-pricing-breakdown,
.admin-pricing-policy-summary {
  display: grid;
  gap: 6px;
}

.admin-pricing-policy-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-pricing-breakdown > div,
.admin-pricing-policy-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 8px;
}

.admin-pricing-breakdown span,
.admin-pricing-policy-summary span {
  color: var(--muted);
}

@media (max-width: 900px) {
  .admin-pricing-layout {
    grid-template-columns: 1fr;
  }

  .admin-pricing-preview {
    position: static;
  }
}


/* ==============================
   v1.28 driver finance
   ============================== */
.driver-earnings-panel {
  margin: 12px 0;
}

.driver-earnings-title {
  align-items: flex-start;
}

.driver-period-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.driver-period-switch button.active {
  border-color: rgba(185,255,57,.42);
  color: var(--accent);
  background: rgba(185,255,57,.07);
}

.driver-earnings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.driver-earnings-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0d1216;
}

.driver-earnings-card.accent {
  border-color: rgba(185,255,57,.22);
}

.driver-earnings-card.warning {
  border-color: rgba(255,190,60,.22);
}

.driver-earnings-card span,
.driver-earnings-card strong,
.driver-earnings-card small {
  display: block;
}

.driver-earnings-card span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
}

.driver-earnings-card strong {
  margin-top: 5px;
  font-size: 16px;
}

.driver-earnings-card.accent strong {
  color: var(--accent);
}

.driver-earnings-card.warning strong {
  color: #ffd477;
}

.driver-earnings-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
}

.driver-finance-details {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.driver-finance-details > div {
  padding: 9px;
  border-radius: 11px;
  background: var(--surface-2);
}

.driver-finance-details span,
.driver-finance-details strong {
  display: block;
}

.driver-finance-details span {
  color: var(--muted);
  font-size: 7px;
}

.driver-finance-details strong {
  margin-top: 3px;
  font-size: 9px;
}

.driver-finance-chart {
  height: 125px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin-top: 13px;
  padding: 8px 4px 0;
  overflow-x: auto;
}

.driver-finance-bar-column {
  min-width: 24px;
  flex: 1 0 24px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 5px;
  text-align: center;
}

.driver-finance-bar-track {
  display: flex;
  align-items: flex-end;
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.driver-finance-bar {
  width: 100%;
  min-height: 2px;
  background: var(--accent);
  border-radius: 5px 5px 0 0;
}

.driver-finance-bar-column small {
  color: var(--muted);
  font-size: 6px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .driver-earnings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-finance-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .driver-earnings-title {
    display: block;
  }

  .driver-period-switch {
    margin-top: 9px;
  }
}


/* ==============================
   v1.28 admin finance
   ============================== */
.admin-period-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-period-switch button.active {
  color: var(--accent);
  border-color: rgba(185,255,57,.42);
  background: rgba(185,255,57,.06);
}

.admin-finance-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-finance-kpi {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0d1216;
}

.admin-finance-kpi.accent {
  border-color: rgba(185,255,57,.24);
}

.admin-finance-kpi.warning {
  border-color: rgba(255,190,60,.26);
}

.admin-finance-kpi.danger {
  border-color: rgba(255,96,96,.26);
}

.admin-finance-kpi span,
.admin-finance-kpi strong,
.admin-finance-kpi small {
  display: block;
}

.admin-finance-kpi span {
  color: var(--muted);
  font-size: 6px;
  font-weight: 950;
}

.admin-finance-kpi strong {
  margin-top: 5px;
  font-size: 15px;
}

.admin-finance-kpi.accent strong {
  color: var(--accent);
}

.admin-finance-kpi.warning strong,
.warning-text {
  color: #ffd477 !important;
}

.admin-finance-kpi.danger strong {
  color: #ff9696;
}

.admin-finance-kpi small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 6px;
}

.admin-finance-secondary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.admin-finance-secondary > div {
  padding: 9px;
  border-radius: 11px;
  background: var(--surface-2);
}

.admin-finance-secondary span,
.admin-finance-secondary strong {
  display: block;
}

.admin-finance-secondary span {
  color: var(--muted);
  font-size: 6px;
}

.admin-finance-secondary strong {
  margin-top: 3px;
  font-size: 9px;
}

.admin-finance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr);
  gap: 12px;
  margin-top: 13px;
}

.admin-finance-chart-card,
.admin-finance-payment-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0d1216;
}

.admin-finance-chart {
  height: 190px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  overflow-x: auto;
  margin-top: 12px;
}

.admin-finance-day {
  flex: 1 0 28px;
  min-width: 28px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  text-align: center;
}

.admin-finance-day-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}

.admin-finance-gross-bar,
.admin-finance-collected-bar {
  width: 42%;
  min-height: 1px;
  border-radius: 4px 4px 0 0;
}

.admin-finance-gross-bar {
  background: rgba(185,255,57,.30);
}

.admin-finance-collected-bar {
  background: var(--accent);
}

.admin-finance-day small {
  color: var(--muted);
  font-size: 6px;
  white-space: nowrap;
}

.admin-finance-payment-list {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.admin-finance-payment-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
}

.admin-finance-payment-row span {
  color: var(--muted);
}

.admin-finance-payment-track {
  height: 6px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}

.admin-finance-payment-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.admin-finance-payment-fill.pending {
  background: #ffd477;
}

.admin-finance-driver-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 6px;
}

@media (max-width: 1180px) {
  .admin-finance-kpis,
  .admin-finance-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .admin-finance-grid {
    grid-template-columns: 1fr;
  }

  .admin-finance-kpis,
  .admin-finance-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.driver-finance-footnote {
  margin: 7px 3px 0;
  font-size: 7px;
  line-height: 1.45;
}


/* ==============================
   v1.28 customer service state
   ============================== */
.service-policy-banner {
  margin: 10px 0 13px;
  padding: 10px 11px;
  border: 1px solid rgba(185,255,57,.18);
  border-radius: 13px;
  background: rgba(185,255,57,.045);
}

.service-policy-banner.closed {
  border-color: rgba(255,190,60,.24);
  background: rgba(255,190,60,.055);
}

.service-policy-banner strong,
.service-policy-banner span {
  display: block;
}

.service-policy-banner strong {
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .5px;
}

.service-policy-banner.closed strong {
  color: #ffd477;
}

.service-policy-banner span {
  margin-top: 4px;
  color: #c9d2d8;
  font-size: 8px;
  line-height: 1.45;
}


/* ==============================
   v1.28 admin service operations
   ============================== */
.admin-service-current {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0d1216;
}

.admin-service-current.open {
  border-color: rgba(185,255,57,.25);
  background: rgba(185,255,57,.05);
}

.admin-service-current.closed {
  border-color: rgba(255,190,60,.28);
  background: rgba(255,190,60,.05);
}

.admin-service-current strong,
.admin-service-current span {
  display: block;
}

.admin-service-current strong {
  color: var(--accent);
  font-size: 9px;
}

.admin-service-current.closed strong {
  color: #ffd477;
}

.admin-service-current span {
  color: #cbd4da;
  font-size: 8px;
  text-align: right;
}

.admin-service-warning {
  margin-bottom: 14px;
  padding: 11px 12px;
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-2);
}

.admin-service-warning strong,
.admin-service-warning span {
  display: block;
}

.admin-service-warning strong {
  font-size: 8px;
}

.admin-service-warning span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.45;
}

.admin-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: 14px;
  align-items: start;
}

.admin-service-form,
.admin-service-summary {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0d1216;
}

.admin-service-section + .admin-service-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-service-section h3,
.admin-service-summary h3 {
  margin: 4px 0 0;
}

.admin-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

.admin-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #20262c;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: .18s ease;
}

.admin-switch span::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #78838b;
  transition: .18s ease;
}

.admin-switch input:checked + span {
  background: rgba(185,255,57,.12);
  border-color: rgba(185,255,57,.4);
}

.admin-switch input:checked + span::after {
  transform: translateX(20px);
  background: var(--accent);
}

.admin-service-schedule {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.admin-service-day {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) 105px 20px 105px;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border-radius: 11px;
  background: var(--surface-2);
}

.admin-service-day label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 800;
}

.admin-service-day > span {
  color: var(--muted);
  text-align: center;
}

.admin-service-day input[type="time"] {
  width: 100%;
}

.admin-service-area-map {
  height: 330px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #101419;
}

.admin-service-summary {
  position: sticky;
  top: 14px;
}

.admin-service-summary-list {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.admin-service-summary-list > div {
  padding: 9px;
  border-radius: 11px;
  background: var(--surface-2);
}

.admin-service-summary-list span,
.admin-service-summary-list strong {
  display: block;
}

.admin-service-summary-list span {
  color: var(--muted);
  font-size: 7px;
}

.admin-service-summary-list strong {
  margin-top: 3px;
  font-size: 9px;
}

.admin-service-logic {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 11px;
  border: 1px solid rgba(185,255,57,.15);
  border-radius: 12px;
  background: rgba(185,255,57,.035);
}

.admin-service-logic strong {
  color: var(--accent);
  font-size: 8px;
}

.admin-service-logic span {
  color: #cbd4da;
  font-size: 7px;
}

@media (max-width: 900px) {
  .admin-service-layout {
    grid-template-columns: 1fr;
  }

  .admin-service-summary {
    position: static;
  }
}

@media (max-width: 620px) {
  .admin-service-day {
    grid-template-columns: 1fr 1fr;
  }

  .admin-service-day > span {
    display: none;
  }
}


/* ==============================
   v1.28 safe ride sharing
   ============================== */
.share-body {
  min-height: 100vh;
  background: #090b0e;
}

.share-shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 34px;
}

.share-header,
.share-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.share-header {
  margin-bottom: 12px;
}

.share-hero {
  margin-bottom: 12px;
}

.share-ride-id {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
}

.share-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 12px;
}

.share-map-panel {
  padding: 0;
  overflow: hidden;
}

#shareMap {
  min-height: 540px;
}

.share-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.share-map-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 7px;
}

.share-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.share-dot.pickup {
  background: var(--accent);
}

.share-dot.destination {
  background: #ffffff;
}

.share-dot.driver {
  background: #ffd477;
}

.share-map-div-icon {
  background: transparent;
  border: 0;
}

.share-map-marker {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #090b0e;
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
}

.share-map-marker.pickup {
  background: var(--accent);
  color: #090b0e;
}

.share-map-marker.destination {
  background: #f5f7f8;
  color: #090b0e;
}

.share-map-marker.driver {
  background: #ffd477;
  color: #090b0e;
  font-size: 15px;
}

.share-info-panel {
  align-self: start;
}

.share-route {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}

.share-route > div {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: start;
}

.share-route i {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
}

.share-route i.pickup {
  background: var(--accent);
}

.share-route i.dropoff {
  background: #ffffff;
}

.share-route span {
  font-size: 9px;
  line-height: 1.4;
}

.share-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.share-metrics > div {
  padding: 9px;
  border-radius: 11px;
  background: var(--surface-2);
}

.share-metrics span,
.share-metrics strong {
  display: block;
}

.share-metrics span {
  color: var(--muted);
  font-size: 7px;
}

.share-metrics strong {
  margin-top: 3px;
  font-size: 10px;
}

.share-driver-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 10px;
  border: 1px solid rgba(185,255,57,.16);
  border-radius: 13px;
  background: rgba(185,255,57,.035);
}

.share-driver-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.share-driver-card span,
.share-driver-card strong,
.share-driver-card small {
  display: block;
}

.share-driver-card span {
  color: var(--accent);
  font-size: 7px;
}

.share-driver-card strong {
  margin-top: 2px;
  font-size: 11px;
}

.share-driver-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
}

.share-timeline {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.share-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  min-height: 43px;
  opacity: .42;
}

.share-timeline-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 11px;
  bottom: -8px;
  width: 1px;
  background: var(--line);
}

.share-timeline-item:last-child::before {
  display: none;
}

.share-timeline-item i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 2px;
  border-radius: 50%;
  background: #343b41;
  border: 2px solid #090b0e;
}

.share-timeline-item.active {
  opacity: 1;
}

.share-timeline-item.active i {
  background: var(--accent);
}

.share-timeline-item strong,
.share-timeline-item span {
  display: block;
}

.share-timeline-item strong {
  font-size: 8px;
}

.share-timeline-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.share-privacy {
  margin-top: 13px;
  padding: 10px;
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-2);
}

.share-privacy strong,
.share-privacy span {
  display: block;
}

.share-privacy strong {
  color: var(--accent);
  font-size: 7px;
}

.share-privacy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.45;
}

.share-expiry {
  margin-top: 11px;
  font-size: 7px;
}

.share-invalid {
  text-align: center;
  padding: 34px 18px;
}

@media (max-width: 820px) {
  .share-grid {
    grid-template-columns: 1fr;
  }

  #shareMap {
    min-height: 420px;
  }
}


/* ==============================
   v1.28 DISPEČINK PRO
   ============================== */
.admin-dispatch-map-title {
  align-items: flex-start;
}

.admin-map-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}

.admin-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-map-filters button.active {
  color: var(--accent);
  border-color: rgba(185,255,57,.42);
  background: rgba(185,255,57,.07);
}

.admin-route-legend {
  width: 16px;
  height: 3px;
  display: inline-block;
  border-radius: 999px;
  background: var(--accent);
}

.admin-map-ride.selected {
  transform: scale(1.18);
  border-color: var(--accent);
  box-shadow:
    0 0 0 5px rgba(185,255,57,.12),
    0 5px 14px rgba(0,0,0,.3);
}

.admin-map-focus-marker {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid #0b0e11;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.38);
  font-size: 11px;
  font-weight: 950;
}

.admin-map-focus-marker.pickup {
  color: #081008;
  background: var(--accent);
}

.admin-map-focus-marker.dropoff {
  color: #0a0d10;
  background: #fff;
}

.admin-dispatch-focus {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(185,255,57,.20);
  border-radius: 14px;
  background: rgba(185,255,57,.035);
}

.admin-dispatch-focus-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.admin-dispatch-focus-head strong {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

.admin-dispatch-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
  margin-top: 10px;
}

.admin-dispatch-focus-grid > div {
  padding: 9px;
  border-radius: 11px;
  background: #0d1216;
  border: 1px solid var(--line);
}

.admin-dispatch-focus-grid span,
.admin-dispatch-focus-grid strong {
  display: block;
}

.admin-dispatch-focus-grid span {
  color: var(--muted);
  font-size: 6px;
}

.admin-dispatch-focus-grid strong {
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.35;
}

.admin-dispatch-focus-route {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.admin-dispatch-focus-route > div {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: start;
  gap: 7px;
  font-size: 8px;
  line-height: 1.4;
}

.admin-dispatch-focus-route i {
  width: 9px;
  height: 9px;
  margin-top: 2px;
  border-radius: 50%;
}

.admin-dispatch-focus-route i.pickup {
  background: var(--accent);
}

.admin-dispatch-focus-route i.dropoff {
  background: #fff;
}

.admin-live-ride-card.selected {
  border-color: rgba(185,255,57,.42);
  box-shadow:
    0 0 0 2px rgba(185,255,57,.06),
    0 8px 28px rgba(0,0,0,.18);
}

.admin-dispatch-nearest {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid rgba(185,255,57,.12);
  border-radius: 11px;
  background: rgba(185,255,57,.025);
}

.admin-dispatch-nearest > strong {
  display: block;
  color: var(--accent);
  font-size: 6px;
  letter-spacing: .5px;
}

.admin-dispatch-nearest > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.admin-dispatch-nearest.empty span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 7px;
}

@media (max-width: 920px) {
  .admin-dispatch-focus-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .admin-map-toolbar {
    display: grid;
  }

  .admin-map-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .admin-dispatch-focus-head {
    display: grid;
  }

  .admin-dispatch-focus-grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   v1.28 public free cars
   ============================== */
.public-free-car-icon-wrap {
  background: transparent;
  border: 0;
}

.public-free-car-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #090b0e;
  border-radius: 50%;
  background: #b9ff39;
  box-shadow:
    0 5px 16px rgba(0,0,0,.28),
    0 0 0 4px rgba(185,255,57,.09);
  font-size: 15px;
  line-height: 1;
}

.public-free-car-icon::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  right: 1px;
  bottom: 1px;
  border: 2px solid #090b0e;
  border-radius: 50%;
  background: #21d47b;
}


/* ==============================
   v1.28 queued next ride
   ============================== */
.driver-queued-next-ride {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(255,212,119,.28);
  border-radius: 15px;
  background: rgba(255,212,119,.055);
}

.driver-queued-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.driver-queued-head strong,
.driver-queued-head span {
  display: block;
}

.driver-queued-head strong {
  margin-top: 5px;
  font-size: 14px;
}

.driver-queued-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.driver-queued-notice {
  margin: 10px 0;
  padding: 10px;
  border-radius: 11px;
  background: #0d1216;
  border-left: 2px solid #ffd477;
}

.driver-queued-notice strong,
.driver-queued-notice span {
  display: block;
}

.driver-queued-notice strong {
  color: #ffd477;
  font-size: 8px;
}

.driver-queued-notice span {
  margin-top: 4px;
  color: #cbd4da;
  font-size: 7px;
  line-height: 1.45;
}


/* ==============================
   v1.28 browser notifications
   ============================== */
.customer-account-actions
.notification-enabled {
  color: var(--accent);
  border-color: rgba(185,255,57,.40);
  background: rgba(185,255,57,.06);
}


.driver-top-actions
.notification-enabled {
  color: var(--accent);
  border-color: rgba(185,255,57,.40);
  background: rgba(185,255,57,.06);
}

/* ==============================
   v1.31 Stripe / online payments
   ============================== */
.customer-payment-option.payment-disabled {
  opacity: .5;
}

.customer-payment-method-tools {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.customer-payment-method-state span,
.customer-payment-method-state strong {
  display: block;
}

.customer-payment-method-state span {
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .5px;
}

.customer-payment-method-state strong {
  margin-top: 3px;
  font-size: 9px;
}

.customer-payment-method-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.customer-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4,6,8,.82);
  backdrop-filter: blur(10px);
}

.customer-payment-modal.hidden {
  display: none;
}

.customer-payment-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #0c1014;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}

.stripe-payment-element {
  min-height: 120px;
  margin: 18px 0 12px;
  padding: 12px;
  border: 1px solid rgba(185,255,57,.12);
  border-radius: 13px;
  background: #11161b;
}

.customer-payment-consent {
  margin: 10px 0 14px;
  padding: 10px;
  border-radius: 11px;
  background: rgba(185,255,57,.045);
  color: #c8d0d5;
  font-size: 8px;
  line-height: 1.5;
}

.customer-payment-action {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,212,119,.28);
  border-radius: 13px;
  background: rgba(255,212,119,.055);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.customer-payment-action span,
.customer-payment-action strong,
.customer-payment-action small {
  display: block;
}

.customer-payment-action span {
  color: #ffd477;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .45px;
}

.customer-payment-action strong {
  margin-top: 3px;
  font-size: 10px;
}

.customer-payment-action small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .customer-payment-method-tools,
  .customer-payment-action {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-payment-method-actions {
    justify-content: stretch;
  }

  .customer-payment-method-actions button,
  .customer-payment-action button {
    width: 100%;
  }
}

.success-text {
  color: var(--accent);
}


/* ==============================
   v1.31 SMTP operations
   ============================== */
.admin-system-email-test {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}

.admin-email-test-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.admin-email-test-row input {
  min-width: 0;
}

.admin-email-delivery-summary {
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.admin-email-delivery-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.admin-email-delivery-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.055);
}

.admin-email-delivery-item > div {
  min-width: 0;
}

.admin-email-delivery-item strong,
.admin-email-delivery-item span,
.admin-email-delivery-item small {
  display: block;
}

.admin-email-delivery-item strong {
  font-size: 10px;
}

.admin-email-delivery-item span,
.admin-email-delivery-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

@media (max-width: 720px) {
  .admin-email-test-row {
    grid-template-columns: 1fr;
  }

  .admin-email-delivery-item {
    align-items: flex-start;
    flex-direction: column;
  }
}