:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f3f0e8;
  color: #17302a;
}

.field { display: grid; gap: 0.55rem; margin: 1.5rem 0; }
.field label { font-weight: 700; color: #21423a; }
.field select {
  width: 100%; padding: 0.95rem 1rem; border: 1px solid #c7d9d3;
  border-radius: 12px; background: white; font: inherit; color: #102c25;
}
.field input, .field textarea {
  width: 100%; padding: 0.95rem 1rem; border: 1px solid #c7d9d3;
  border-radius: 12px; background: white; font: inherit; color: #102c25;
}
.field textarea { resize: vertical; }
.admin-shell { width: min(1100px, calc(100% - 2rem)); margin: 2rem auto; }
.admin-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.compact { width: auto; padding-inline: 1.25rem; }
.table-card { overflow-x: auto; background: white; border-radius: 18px; box-shadow: 0 18px 50px rgba(12, 52, 42, 0.12); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.4rem 0 2rem; }
.stats article { background: white; border-radius: 16px; padding: 1.2rem; box-shadow: 0 12px 32px rgba(12, 52, 42, 0.09); }
.stats span { display: block; color: #61766f; font-size: 0.82rem; margin-bottom: 0.35rem; }
.stats strong { font-size: clamp(1.35rem, 3vw, 2rem); color: #0a6b55; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin: 2rem 0 0.75rem; }
.section-head h2 { margin: 0; color: #173d33; }
.payment-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; }
.empty { text-align: center; color: #6d7f79; padding: 2rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5efeb; white-space: nowrap; }
th { color: #58716a; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
td a { color: #08745a; font-weight: 700; }
.driver-name { display: block; margin-top: .35rem; color: #65766f; }
.driver-name.wrap { max-width: 320px; white-space: normal; line-height: 1.45; }
.portal-tabs, .admin-tabs { display: flex; gap: .5rem; padding: .35rem; border-radius: 14px; background: #e8efeb; }
.portal-tabs { margin-bottom: 1.5rem; }
.admin-tabs { margin: 1.5rem 0; width: fit-content; }
.portal-tab, .admin-tab {
  border: 0; border-radius: 10px; padding: .75rem 1rem; background: transparent;
  color: #405b53; font: inherit; font-weight: 800; cursor: pointer;
}
.portal-tab.active, .admin-tab.active { background: white; color: #0a6b55; box-shadow: 0 3px 12px rgba(12,52,42,.1); }
.danger-tab.active { color: #a0352b; }
.badge { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: .25rem; padding: 0 .4rem; border-radius: 999px; background: #a0352b; color: white; font-size: .75rem; }
.breakdown-warning { padding: .9rem 1rem; border-radius: 12px; background: #fff0ed; color: #8d332b; line-height: 1.5; }
.pay-button.danger { background: #a33a2f; box-shadow: 0 10px 24px rgba(163,58,47,.22); }
.pay-button.danger:hover { background: #852d25; }
.form-card { margin-bottom: 1rem; padding: 1.25rem; border-radius: 18px; background: white; box-shadow: 0 12px 32px rgba(12,52,42,.09); }
.driver-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 1rem; }
.driver-form .field { margin: 0; }
.link-button { border: 0; padding: 0; background: none; color: #08745a; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
.link-button:disabled { opacity: .6; cursor: wait; }
.liability-card { margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid #efc8a6; border-radius: 14px; background: #fff8ec; }
.liability-card strong, .liability-card small { display: block; margin-top: .35rem; }
.liability-card strong { color: #8b4c12; font-size: 1.15rem; }
.finance-stats { grid-template-columns: repeat(3, 1fr); }
.tracker-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
.tracker-grid h2 { margin-bottom: .75rem; }
.negative { color: #a0352b !important; }
.ledger-dialog { width: min(900px, calc(100% - 2rem)); max-height: 90vh; overflow: auto; border: 0; border-radius: 20px; padding: 1.5rem; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.ledger-dialog::backdrop { background: rgba(9,27,22,.6); }
.dialog-close { float: right; border: 0; border-radius: 9px; padding: .65rem .9rem; background: #e7efeb; font-weight: 800; cursor: pointer; }
.ledger-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 650px) {
  .admin-head { align-items: stretch; flex-direction: column; }
  .compact { width: 100%; }
  .stats { grid-template-columns: 1fr; }
  .admin-tabs { width: 100%; overflow-x: auto; }
  .admin-tab { white-space: nowrap; }
  .driver-form { grid-template-columns: 1fr; }
  .finance-stats, .ledger-stats { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 10%, rgba(196, 224, 203, .9), transparent 28rem),
    linear-gradient(135deg, #f8f5ed, #e7efe8);
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 470px);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
  max-width: 1180px;
  margin: auto;
  padding: clamp(1.5rem, 5vw, 5rem);
}

.brand {
  display: inline-block;
  padding: .55rem .8rem;
  background: #17302a;
  color: #fff;
  font-weight: 900;
  letter-spacing: .12em;
}

.eyebrow, .label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #65766f;
}

h1 {
  max-width: 650px;
  margin: 1.2rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: .88;
  letter-spacing: -.06em;
  font-weight: 500;
}

.intro {
  max-width: 560px;
  font-size: 1.15rem;
  line-height: 1.65;
  color: #52655e;
}

.payment-card {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(23,48,42,.12);
  border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(29,59,50,.15);
  backdrop-filter: blur(18px);
}

.vehicle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.vehicle-row strong, .expiry strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.25rem;
}

.status {
  padding: .45rem .65rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.status.active { color: #08734f; background: #d9f6e8; }
.status.locked { color: #9d3429; background: #fee1dc; }

.price {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin: 2.8rem 0;
  border-bottom: 1px solid #dce4df;
  padding-bottom: 2.2rem;
}

.price span { font-size: 2rem; margin-top: .75rem; }
.price strong { font-family: Georgia, serif; font-size: 6.5rem; line-height: .9; font-weight: 500; }
.price small { grid-column: 2; margin-top: .6rem; color: #65766f; }

.expiry {
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: #f0f5f1;
}

.pay-button {
  width: 100%;
  margin-top: 1.4rem;
  border: 0;
  border-radius: 14px;
  padding: 1.1rem;
  background: #0a6b55;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10,107,85,.25);
}

.pay-button:hover { background: #075642; }
.pay-button:disabled { opacity: .6; cursor: wait; }
.secure { font-size: .78rem; line-height: 1.5; text-align: center; color: #74827d; }

.message {
  margin-top: 1rem;
  border-radius: 12px;
  padding: .9rem 1rem;
  font-size: .9rem;
}

.message.info { background: #e7f0ff; color: #234f88; }
.message.success { background: #ddf7e9; color: #116341; }
.message.error { background: #fee3de; color: #903328; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; padding-block: 3rem; }
  h1 { font-size: clamp(3.7rem, 18vw, 6rem); }
}

/* Ventablue visual identity */
:root { background: #e9f4f5; color: #073f48; }
body {
  background:
    radial-gradient(circle at 80% 10%, rgba(79, 180, 190, .28), transparent 28rem),
    linear-gradient(135deg, #f4fbfb, #dceff1);
}
.brand {
  display: inline-flex;
  width: clamp(150px, 24vw, 220px);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #005c6a;
  box-shadow: 0 12px 30px rgba(0, 73, 84, .2);
}
.brand-logo { display: block; width: 100%; height: auto; }
.field label, .section-head h2 { color: #0a5360; }
.field select, .field input, .field textarea { border-color: #a9cdd1; color: #073f48; }
.stats strong, td a, .link-button { color: #006c7a; }
.portal-tabs, .admin-tabs { background: #dcecef; }
.portal-tab, .admin-tab { color: #285d64; }
.portal-tab.active, .admin-tab.active { color: #006c7a; box-shadow: 0 3px 12px rgba(0,92,106,.12); }
.eyebrow, .label { color: #3e7077; }
.intro { color: #315f66; }
.payment-card, .card {
  border: 1px solid rgba(0,92,106,.14);
  background: rgba(255,255,255,.9);
  box-shadow: 0 30px 80px rgba(0,73,84,.16);
}
.card { width: min(100%, 620px); padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: 28px; }
.status.active { color: #006c7a; background: #d7f2f4; }
.expiry { background: #e8f4f5; }
.pay-button, .pay { background: #006c7a; box-shadow: 0 10px 24px rgba(0,108,122,.25); }
.pay-button:hover, .pay:hover { background: #005563; }
.pay {
  width: 100%; border: 0; border-radius: 14px; padding: 1.1rem; color: white;
  font: inherit; font-weight: 800; cursor: pointer;
}
.pay:disabled { opacity: .6; cursor: wait; }
.fineprint { color: #52757a; line-height: 1.5; }
/* Approved hybrid redesign: mobile driver + clean teal admin */
:root { --vb-teal:#005c6a; --vb-teal-dark:#004753; --vb-aqua:#0798a8; --vb-mint:#e0f4f5; --vb-ink:#073b4a; --vb-line:#d7e6e8; --vb-canvas:#f5fafb; }
.driver-page { background:#edf8f9; }
.driver-page .shell { display:block; width:min(100%,480px); max-width:480px; min-height:100vh; padding:0 0 2rem; background:var(--vb-canvas); box-shadow:0 24px 70px rgba(0,71,83,.18); }
.driver-page .hero { min-height:290px; padding:2rem 1.5rem 4.5rem; border-radius:0 0 38px 38px; color:white; background:radial-gradient(circle at 86% 86%,rgba(74,211,220,.42),transparent 48%),linear-gradient(145deg,#005365,#008c9c); }
.driver-page .brand { width:132px; border-radius:12px; box-shadow:0 10px 28px rgba(0,35,42,.2); }
.driver-page .hero .eyebrow { margin-top:1.75rem; color:#bceff2; }
.driver-page .hero h1 { margin:.45rem 0 .75rem; font-family:inherit; font-size:clamp(2rem,9vw,2.65rem); line-height:1.05; letter-spacing:-.04em; font-weight:850; }
.driver-page .hero .intro { color:rgba(255,255,255,.86); font-size:.98rem; line-height:1.55; }
.driver-page .payment-card { position:relative; z-index:2; margin:-3.3rem 1rem 0; padding:1.25rem; border-radius:26px; background:white; box-shadow:0 20px 50px rgba(0,71,83,.15); }
.driver-page .portal-tabs { border-radius:16px; background:#e8f3f4; }
.driver-page .portal-tab { flex:1; padding:.85rem .55rem; }
.driver-page .vehicle-row { min-height:150px; margin-bottom:1rem; padding:1.4rem; border-radius:22px; background:linear-gradient(145deg,#e1f8f9,#f7ffff); box-shadow:inset 0 0 0 1px rgba(0,108,122,.1); }
.driver-page .vehicle-row::before { content:"🔒"; display:grid; place-items:center; width:64px; height:64px; flex:0 0 64px; border-radius:50%; background:white; font-size:1.8rem; box-shadow:0 8px 25px rgba(0,92,106,.12); }
.driver-page .price { margin:1.2rem 0; padding:1.25rem; border:1px solid var(--vb-line); border-radius:20px; background:white; }
.driver-page .price strong { font-family:inherit; font-size:4.5rem; font-weight:850; color:var(--vb-ink); }
.driver-page .price span { font-size:1.7rem; }
.driver-page .expiry { text-align:center; background:var(--vb-mint); }
.driver-page .pay-button,.driver-page .pay { background:linear-gradient(135deg,#00798a,#009dae); box-shadow:0 12px 26px rgba(0,121,138,.27); }
.driver-page .breakdown-warning { border:1px solid #ffc4bb; }
.driver-select-page .shell { display:grid; place-items:center; padding:1rem; }
.driver-select-page .card { width:100%; border-radius:30px; }
.driver-select-page h1 { font-family:inherit; font-size:2.7rem; font-weight:850; line-height:1; }
.admin-page { background:#eaf3f4; }
.admin-page .admin-shell { display:grid; grid-template-columns:232px minmax(0,1fr); width:min(1500px,calc(100% - 2rem)); min-height:calc(100vh - 2rem); margin:1rem auto; overflow:hidden; border:1px solid rgba(0,92,106,.1); border-radius:24px; background:white; box-shadow:0 25px 80px rgba(0,69,80,.14); }
.admin-sidebar { padding:1.6rem 1rem; color:white; background:linear-gradient(to top,rgba(0,151,167,.24),transparent 40%),linear-gradient(165deg,#004958,#006f7d); }
.admin-sidebar .brand { width:160px; margin:0 .5rem; border-radius:14px; box-shadow:0 12px 30px rgba(0,32,39,.22); }
.admin-sidebar .eyebrow { margin:1.2rem .7rem .5rem; color:#9fdee3; }
.admin-page .admin-tabs { display:flex; flex-direction:column; gap:.45rem; width:100%; margin:1.5rem 0 0; padding:0; background:transparent; }
.admin-page .admin-tab { width:100%; padding:.9rem 1rem; border-radius:12px; color:#d8f1f3; text-align:left; }
.admin-page .admin-tab::before { content:"•"; margin-right:.7rem; color:#58cbd4; }
.admin-page .admin-tab.active { color:white; background:rgba(45,183,194,.3); box-shadow:inset 3px 0 0 #73e4eb; }
.admin-workspace { min-width:0; padding:1.75rem 2rem 3rem; background:var(--vb-canvas); }
.admin-page .admin-head { align-items:center; padding-bottom:1.15rem; border-bottom:1px solid var(--vb-line); }
.admin-page .admin-head h1 { margin:.2rem 0 0; font-family:inherit; font-size:clamp(2rem,4vw,3rem); font-weight:850; letter-spacing:-.04em; }
.admin-page .admin-head .eyebrow { margin:0; color:var(--vb-aqua); }
.admin-page .vehicle-search-field { max-width:560px; margin:1.2rem 0; }
.admin-page .stats { gap:1rem; }
.admin-page .stats article { position:relative; overflow:hidden; min-height:126px; padding:1.35rem; border:1px solid var(--vb-line); box-shadow:0 8px 24px rgba(0,66,77,.07); }
.admin-page .stats article::after { content:""; position:absolute; right:-22px; bottom:-32px; width:96px; height:96px; border-radius:50%; background:var(--vb-mint); }
.admin-page .stats strong { position:relative; z-index:1; color:var(--vb-ink); }
.admin-page .table-card,.admin-page .form-card { border:1px solid var(--vb-line); border-radius:16px; box-shadow:0 9px 28px rgba(0,66,77,.07); }
.admin-page th { padding:.85rem 1rem; background:#f5fafb; color:#52737a; }
.admin-page td { padding:.9rem 1rem; }
.admin-page tr:hover td { background:#f5fbfc; }
.admin-page .pay-button { background:linear-gradient(135deg,#006e7e,#0095a5); }
@media (max-width:900px) { .admin-page .admin-shell { grid-template-columns:1fr; width:100%; min-height:100vh; margin:0; border:0; border-radius:0; } .admin-sidebar { padding:1rem; } .admin-sidebar .brand { width:125px; } .admin-sidebar .eyebrow { display:none; } .admin-page .admin-tabs { flex-direction:row; margin-top:1rem; overflow-x:auto; } .admin-page .admin-tab { width:auto; white-space:nowrap; } .admin-workspace { padding:1.25rem 1rem 2.5rem; } }
@media (max-width:520px) { .driver-page .shell { box-shadow:none; } .driver-page .payment-card { margin-inline:.75rem; } .driver-page .price strong { font-size:3.8rem; } .admin-page .admin-head { align-items:stretch; } }
/* Exact approved mockup refinement */
.driver-payment-page { display:flex; justify-content:center; padding:28px; background:linear-gradient(145deg,#effafa,#dff2f3); }
.driver-payment-page .driver-app { position:relative; width:min(100%,430px); min-height:860px; overflow:hidden; border-radius:28px; background:#f8fcfc; box-shadow:0 28px 75px rgba(0,69,80,.22); }
.driver-header { min-height:305px; padding:28px 26px 78px; color:white; background:radial-gradient(circle at 98% 92%,rgba(75,214,222,.45),transparent 48%),linear-gradient(150deg,#006278,#008d9d); }
.driver-topbar { display:flex; align-items:center; justify-content:space-between; }
.driver-header .brand { width:120px; background:transparent; box-shadow:none; }
.notification-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-size:1.45rem; }
.driver-greeting { margin:28px 0 8px; font-size:1.55rem; font-weight:850; letter-spacing:-.03em; }
.vehicle-pill { display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .8rem; border:1px solid rgba(255,255,255,.4); border-radius:10px; background:rgba(0,61,74,.18); }
.vehicle-pill strong { font-size:.95rem; letter-spacing:.03em; }
.driver-subtitle { margin:.8rem 0 0; color:#c9f0f2; font-size:.9rem; }
.driver-payment-page .payment-card { position:relative; z-index:2; margin:-54px 18px 98px; padding:0; border:0; background:transparent; box-shadow:none; }
.driver-payment-page #content { display:block; }
.driver-payment-page .portal-tabs { margin:0 0 12px; padding:5px; border:1px solid var(--vb-line); background:white; box-shadow:0 8px 22px rgba(0,71,83,.08); }
.driver-status-card { display:flex; flex-direction:column; align-items:center; padding:25px 18px 22px; border:1px solid #d5edef; border-radius:23px; text-align:center; background:linear-gradient(180deg,#f9ffff,#e5f8f9); box-shadow:0 14px 30px rgba(0,89,101,.12); }
.lock-orb { display:grid; place-items:center; width:105px; height:105px; margin-bottom:14px; border:10px solid #e3f6f7; border-radius:50%; background:white; box-shadow:0 0 0 2px #61c9d1,0 12px 30px rgba(0,102,115,.16); }
.lock-orb span { display:grid; place-items:center; width:50px; height:60px; border-radius:12px; color:white; background:linear-gradient(150deg,#007386,#00a5b4); font-size:1.8rem; }
.driver-status-card .label { color:#5e8186; }
.driver-status-card .status { margin-top:7px; padding:0; background:transparent; color:var(--vb-ink); font-size:1.65rem; letter-spacing:-.02em; }
.driver-status-card .status.active { color:#087858; }
.driver-payment-page .price { display:block; margin:16px 0 0; padding:20px 22px; border:1px solid var(--vb-line); border-radius:20px; background:white; box-shadow:0 8px 25px rgba(0,69,80,.06); }
.rent-label { display:block; color:var(--vb-ink); font-size:1.2rem!important; font-weight:800; margin:0!important; }
.rent-amount { display:flex; align-items:flex-start; margin:6px 0; }
.driver-payment-page .rent-amount span { margin:8px 4px 0 0; font-size:1.8rem; }
.driver-payment-page .price strong { font-family:inherit; font-size:4.2rem; font-weight:900; color:var(--vb-ink); }
.driver-payment-page .price small { display:block; margin:0; color:#6a858a; }
.driver-payment-page .pay-button { margin-top:14px; border-radius:12px; padding:1rem; font-size:1.05rem; background:linear-gradient(135deg,#00798a,#009cab); }
.driver-payment-page .expiry { margin-top:12px; padding:.85rem; border:1px solid #c4e9ec; border-radius:12px; background:#e6f7f8; }
.driver-payment-page .expiry .label { display:block; color:#086c79; letter-spacing:.06em; }
.driver-payment-page .expiry strong { margin-top:.3rem; font-size:.85rem; color:#53777c; }
.driver-payment-page .secure { margin:12px 8px; }
.driver-bottom-nav { position:absolute; z-index:4; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); padding:12px 8px 10px; border-top:1px solid var(--vb-line); background:rgba(255,255,255,.97); box-shadow:0 -8px 24px rgba(0,69,80,.08); }
.driver-bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:4px; color:#58777d; font-size:.68rem; font-weight:700; text-decoration:none; }
.driver-bottom-nav a span { font-size:1.25rem; }
.driver-bottom-nav a.active { color:#008297; }

.admin-page .admin-shell { grid-template-columns:210px minmax(0,1fr); max-width:1540px; border-radius:18px; }
.admin-sidebar { position:relative; min-height:900px; padding:32px 14px; background:linear-gradient(170deg,#005267,#006d7b); }
.admin-sidebar::after { content:""; position:absolute; right:15px; bottom:28px; left:15px; height:120px; opacity:.2; background:linear-gradient(135deg,transparent 45%,#4cd1da 46% 48%,transparent 49%),linear-gradient(45deg,transparent 45%,#4cd1da 46% 48%,transparent 49%); background-size:45px 45px; }
.admin-sidebar .brand { width:150px; margin:0 auto; background:transparent; box-shadow:none; }
.admin-sidebar .eyebrow { text-align:center; }
.admin-page .admin-tabs { position:relative; z-index:1; }
.admin-page .admin-tab { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.admin-page .admin-tab::before { content:none; }
.admin-page .nav-icon { display:grid; place-items:center; width:22px; color:#9ee8ed; font-size:1rem; }
.admin-workspace { padding:28px 38px 44px; }
.admin-page .admin-head { border:0; }
.admin-page .admin-head h1 { font-size:2.2rem; }
.admin-page #sync-status { margin:.2rem 0 1rem; }
.admin-top-tabs { display:grid; grid-template-columns:repeat(5,1fr); margin:10px 0 18px; overflow:hidden; border:1px solid var(--vb-line); border-radius:10px; background:white; box-shadow:0 5px 16px rgba(0,70,81,.06); }
.admin-top-tabs .admin-tab { padding:13px 10px; border:0; border-right:1px solid var(--vb-line); border-radius:0; color:#325c63; background:white; text-align:center; }
.admin-top-tabs .admin-tab:last-child { border-right:0; }
.admin-top-tabs .admin-tab.active { color:#008397; background:white; box-shadow:inset 0 -3px #0aa5b4; }
.admin-page .vehicle-search-field { margin:0 0 18px; }
.overview-stats { margin:0 0 16px; }
.admin-page .overview-stats article.metric-card { display:flex; align-items:center; gap:16px; min-height:122px; padding:20px; }
.metric-card .metric-icon { display:grid; place-items:center; width:52px; height:52px; flex:0 0 52px; border-radius:50%; background:#d8f5f6; color:#00899a; font-size:1.55rem; font-weight:900; }
.metric-card.pending-card .metric-icon { color:#e78920; background:#fff0dc; }
.metric-card.active-card .metric-icon { color:#159d67; background:#ddf6e9; }
.admin-page .metric-card span { margin-bottom:7px; color:#294f57; font-size:.82rem; }
.admin-page .metric-card strong { display:block; font-size:clamp(1.45rem,2.4vw,2rem); }
.admin-page .metric-card small { color:#6c858a; }
.admin-page .stats article::after { display:none; }
.dashboard-visuals { display:grid; grid-template-columns:1.65fr 1fr; gap:16px; margin-bottom:20px; }
.trend-card,.payment-status-card { min-height:235px; padding:20px; border:1px solid var(--vb-line); border-radius:15px; background:white; box-shadow:0 8px 24px rgba(0,66,77,.07); }
.chart-head { display:flex; justify-content:space-between; gap:15px; }
.dashboard-visuals h2 { margin:0; color:var(--vb-ink); font-size:1rem; }
.dashboard-visuals p { margin:.4rem 0; color:#71898e; font-size:.78rem; }
.chart-head>strong { color:#008798; font-size:1.25rem; }
.trend-graphic { display:flex; align-items:flex-end; gap:8px; height:135px; margin-top:12px; padding:0 10px 8px; border-bottom:1px solid #dcebed; background:repeating-linear-gradient(to bottom,#eef6f7 0 1px,transparent 1px 34px); }
.trend-graphic i { flex:1; height:25%; border-radius:5px 5px 0 0; background:linear-gradient(#23bdc8,#c5f1f3); }
.trend-graphic i:nth-child(2){height:39%}.trend-graphic i:nth-child(3){height:48%}.trend-graphic i:nth-child(4){height:58%}.trend-graphic i:nth-child(5){height:56%}.trend-graphic i:nth-child(6){height:78%}.trend-graphic i:nth-child(7){height:94%}
.donut-wrap { display:flex; align-items:center; justify-content:center; gap:25px; min-height:170px; }
.payment-donut { display:grid; place-items:center; align-content:center; width:125px; height:125px; border-radius:50%; background:radial-gradient(circle,#fff 0 49%,transparent 50%),conic-gradient(#078e9b 0 68%,#f6a23b 68% 91%,#ee6257 91%); }
.payment-donut strong { color:var(--vb-ink); font-size:1.55rem; }
.payment-donut span { color:#71898e; font-size:.7rem; }
.donut-wrap ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; color:#42636a; font-size:.78rem; }
.donut-wrap li { display:flex; align-items:center; gap:7px; }
.donut-wrap li i { width:9px; height:9px; border-radius:3px; background:#078e9b; }.donut-wrap .pending-dot{background:#f6a23b}.donut-wrap .overdue-dot{background:#ee6257}
.admin-page .section-head { margin:1.5rem 0 .65rem; }
.admin-page .table-card { border-radius:12px; }
@media(max-width:1050px){.dashboard-visuals{grid-template-columns:1fr}.admin-page .overview-stats{grid-template-columns:1fr 1fr}.admin-page .overview-stats article:last-child{grid-column:1/-1}}
@media(max-width:900px){.admin-sidebar{min-height:auto}.admin-sidebar::after{display:none}.admin-workspace{padding:20px 16px}.admin-top-tabs{overflow-x:auto;grid-template-columns:repeat(5,minmax(115px,1fr))}}
@media(max-width:650px){.driver-payment-page{padding:0}.driver-payment-page .driver-app{min-height:100vh;border-radius:0;box-shadow:none}.admin-page .overview-stats{grid-template-columns:1fr}.admin-page .overview-stats article:last-child{grid-column:auto}.dashboard-visuals{grid-template-columns:1fr}.donut-wrap{justify-content:flex-start}.admin-top-tabs{margin-inline:-4px}}
/* Driver vehicle-selection screen matching approved mobile design */
.driver-select-page { display:flex; justify-content:center; padding:28px; background:linear-gradient(145deg,#effafa,#dff2f3); }
.driver-select-page .driver-app { position:relative; width:min(100%,430px); min-height:820px; overflow:hidden; border-radius:28px; background:#f8fcfc; box-shadow:0 28px 75px rgba(0,69,80,.22); }
.driver-select-page .driver-header { min-height:285px; }
.vehicle-select-card { position:relative; z-index:2; margin:-72px 18px 98px; padding:20px; border:1px solid var(--vb-line); border-radius:24px; background:white; box-shadow:0 18px 45px rgba(0,71,83,.15); }
.select-vehicle-visual { display:flex; flex-direction:column; align-items:center; margin-bottom:20px; padding:23px 16px; border:1px solid #d5edef; border-radius:20px; background:linear-gradient(180deg,#faffff,#e8f8f9); }
.vehicle-orb { display:grid; place-items:center; width:92px; height:92px; margin-bottom:13px; border:9px solid #e1f5f6; border-radius:50%; color:white; background:linear-gradient(145deg,#007386,#00a5b4); box-shadow:0 0 0 2px #67cbd2,0 10px 25px rgba(0,102,115,.16); font-size:2rem; }
.select-vehicle-visual strong { color:var(--vb-ink); font-size:1.45rem; }
.select-vehicle-visual span { margin-top:5px; color:#668389; font-size:.85rem; }
.driver-select-page .field { margin:15px 0; }
.driver-select-page .field input,.driver-select-page .field select { min-height:52px; border:1px solid #b9dadd; border-radius:12px; background:#fbfefe; }
.driver-select-page .pay { margin-top:4px; background:linear-gradient(135deg,#00798a,#009cab); box-shadow:0 12px 26px rgba(0,121,138,.27); }
.driver-select-page .fineprint { margin:16px 5px 0; text-align:center; font-size:.78rem; }
@media(max-width:650px){.driver-select-page{padding:0}.driver-select-page .driver-app{min-height:100vh;border-radius:0;box-shadow:none}}
.admin-login { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 75% 20%,rgba(43,198,208,.25),transparent 35%),linear-gradient(145deg,#003f50,#007887); }
.admin-login[hidden] { display:none; }
.admin-login-card { width:min(100%,420px); padding:36px; border:1px solid rgba(255,255,255,.45); border-radius:24px; background:#fff; box-shadow:0 28px 80px rgba(0,36,45,.35); }
.admin-login-card img { display:block; width:180px; margin:0 auto 24px; padding:12px; border-radius:14px; background:linear-gradient(145deg,#005d70,#008798); }
.admin-login-card h1 { margin:.25rem 0 .5rem; color:var(--vb-ink); font-size:2rem; }
.admin-login-card>p:not(.eyebrow):not(.message) { margin:0 0 24px; color:#607d82; }
.admin-login-card label { display:block; margin:14px 0 6px; color:#294f57; font-weight:750; }
.admin-login-card input { width:100%; min-height:50px; padding:0 14px; border:1px solid #b9dadd; border-radius:11px; font:inherit; }
.admin-login-card .pay-button { width:100%; margin-top:20px; }
.admin-login-card .message { margin:14px 0 0; }
.admin-head-actions { display:flex; align-items:center; gap:10px; }
.secondary-button { padding:.8rem 1rem; border:1px solid #b9dadd; border-radius:10px; color:#176875; background:white; font:inherit; font-weight:800; cursor:pointer; }
@media(max-width:520px){.admin-login{padding:14px}.admin-login-card{padding:26px 22px}.admin-head-actions{align-items:stretch;flex-direction:column}}
/* Driver mockup parity and forced fresh presentation */
.driver-payment-page .breakdown-action { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:14px; padding:14px; border:1.5px solid #ff5148; border-radius:12px; color:#ef3027; background:#fff; font:inherit; font-weight:800; cursor:pointer; }
.driver-payment-page .breakdown-action.active { color:#ef3027; background:#fff5f4; box-shadow:none; }
.driver-payment-page .back-payment { margin-bottom:16px; padding:10px 14px; border:0; border-radius:10px; color:#00798a; background:#e5f5f6; font:inherit; font-weight:800; cursor:pointer; }
.driver-payment-page #breakdown-panel h2 { margin:0 0 10px; color:var(--vb-ink); }
.driver-payment-page .lock-orb span { background:transparent; color:#007c8d; font-size:2.4rem; }