/* Flytte design system — yellow & black
   Brand yellow does the talking (buttons, selection, progress); black frames
   the splash and dark moments (ride requests, live trip banners); white cards
   carry the content. */
:root {
  --brand: #FFC400;
  --brand-ink: #141414;
  --brand-soft: #FFF7DB;
  --brand-line: #FFD84D;
  --bg: #FFFFFF;
  --ink: #141414;
  --ink-2: #6E6E73;
  --ink-3: #707076;   /* 4.9:1 on white (AA) */
  --surface: #F5F5F7;
  --surface-2: #EAEAEE;
  --line: #EDEDF0;
  --card: #FFFFFF;
  --dark: #0E0E10;
  --dark-2: #1C1C1F;
  --go: #0C8040;      /* 5:1 with white text (AA) */
  --stop: #C8271F;    /* 5.6:1 (AA) */
  --stop-soft: #FDECEC;
  --blue: #2F6BFF;
  --on-ink: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --shadow-sheet: 0 -6px 28px rgba(0,0,0,.10);
  --shadow-pop: 0 6px 20px rgba(0,0,0,.14);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --r: 14px; --r-lg: 22px; --r-pill: 999px;
  color-scheme: light;
  --sab: env(safe-area-inset-bottom, 0px);
  /* aliases used by older pages */
  --gold: var(--brand); --lake: var(--ink); --mist: var(--surface); --vest: var(--brand); --vest-ink: var(--brand-ink);
  --display: var(--font); --body: var(--font);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
#root { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
body { font: 16px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0 0 .35em; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 .7em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: .875rem; }
.tiny { font-size: .76rem; }
.bold { font-weight: 700; }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.row > .fill { flex: 1; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer; font-weight: 700; font-size: 1rem; line-height: 1;
  min-height: 52px; padding: 0 20px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .1s ease, filter .15s ease, background .15s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary, .btn-brand, .btn-gold { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover, .btn-brand:hover, .btn-gold:hover { filter: brightness(.97); }
.btn-dark, .btn-lake { background: var(--ink); color: #fff; }
.btn-outline { background: var(--bg); border: 1.5px solid var(--line); }
.btn-outline:hover { background: var(--surface); }
.btn-danger { background: var(--stop); color: #fff; }
.btn-danger-soft { background: var(--stop-soft); color: var(--stop); }
.btn-go { background: var(--go); color: #fff; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-link { background: none; min-height: 44px; font-weight: 700; }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .9rem; border-radius: 10px; }
.btn-lg { min-height: 56px; font-size: 1.05rem; }
.icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.fab { background: var(--card); box-shadow: var(--shadow-pop); }
.fab:hover { background: var(--card); }
svg.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 18px; height: 18px; }

/* ---------- Fields ---------- */
label { display: block; font-weight: 600; font-size: .86rem; margin: 14px 0 6px; color: var(--ink); }
input, select, textarea {
  width: 100%; font: 1rem var(--font); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,196,0,.25); }
input::placeholder { color: var(--ink-3); }
.error { color: var(--stop); font-weight: 600; min-height: 1.1em; margin: 8px 0; font-size: .88rem; }
.phone-field { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.phone-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,196,0,.25); }
.phone-field .cc { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; padding-right: 10px; border-right: 1px solid var(--line); }
.phone-field input { border: 0; padding: 14px 0; box-shadow: none !important; }

/* ---------- Brand moments: splash, onboarding ---------- */
.splash { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--dark); color: #fff; overflow: hidden; transition: opacity .35s ease, visibility .35s; }
.splash.out { opacity: 0; visibility: hidden; }
.splash .sky { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; }
.splash .sky svg { width: 100%; height: 100%; display: block; }
.splash-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -14vh; }
.splash-logo .pin { width: 84px; height: 84px; animation: pinDrop .7s cubic-bezier(.3,1.4,.5,1) both; }
.splash-word { font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; animation: fadeUp .5s ease .35s both; }
.splash-word small { display: block; text-align: center; color: var(--brand); font-size: 1.5rem; letter-spacing: -.02em; margin-top: -6px; }
.splash-tag { color: #D8D8DC; font-size: .95rem; animation: fadeUp .5s ease .55s both; }
.splash-cta { position: absolute; left: 22px; right: 22px; bottom: calc(26px + var(--sab)); display: flex; flex-direction: column; gap: 6px; animation: fadeUp .5s ease .2s both; }
.splash-cta .btn-link { color: #fff; }
@keyframes pinDrop { from { transform: translateY(-40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .splash-logo .pin, .splash-word, .splash-tag, .splash-cta { animation: none; } }

.onboard { position: fixed; inset: 0; z-index: 900; background: var(--dark); color: #fff; display: flex; flex-direction: column; }
.slides { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 26px; overflow: hidden; }
.slide .art { position: absolute; inset: 0 0 34% 0; display: grid; place-items: center; }
.slide .art svg { width: 100%; height: 100%; }
.slide h1 { color: #fff; font-size: 2rem; line-height: 1.08; max-width: 12ch; position: relative; }
.slide p { color: #CFCFD4; position: relative; max-width: 30ch; }
.dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 18px; }
.dots i { width: 7px; height: 7px; border-radius: 4px; background: #48484E; transition: width .2s, background .2s; }
.dots i.on { width: 20px; background: var(--brand); }
.onboard .cta { padding: 0 24px calc(18px + var(--sab)); display: flex; flex-direction: column; gap: 4px; }
.onboard .btn-link { color: #fff; }

/* ---------- Auth & simple pages ---------- */
.onb { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); padding: calc(14px + env(safe-area-inset-top)) 22px calc(22px + var(--sab)); max-width: 480px; margin: 0 auto; }
.onb-top { display: flex; align-items: center; min-height: 44px; margin: 0 -10px 14px; }
.onb h1 { font-size: 1.6rem; margin-bottom: 4px; }
.onb .lead { color: var(--ink-2); margin-bottom: 18px; font-size: .95rem; }
.onb .spacer { flex: 1; min-height: 24px; }
.onb .fine { font-size: .85rem; color: var(--ink-2); text-align: center; margin-top: 14px; }
.onb .fine a, .onb .fine button { color: var(--ink); font-weight: 700; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.onb-enter { animation: pageIn .26s cubic-bezier(.2,.8,.2,1); }
.illu { width: 150px; height: 150px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; margin: 40px auto 26px; position: relative; }
.illu::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255,196,0,.14), transparent 70%); }
.checklist { list-style: none; padding: 0; margin: 10px 0; }
.checklist li { display: flex; gap: 12px; align-items: center; padding: 10px 0; font-weight: 600; }
.checklist li::before { content: ''; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/16px no-repeat; }
.doc { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; text-align: left; font-weight: 600; }
.doc .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: #A27C00; display: grid; place-items: center; flex: none; overflow: hidden; }
.doc .ic img { width: 100%; height: 100%; object-fit: cover; }
.doc.done { border-color: var(--go); }
.doc .st { margin-left: auto; font-size: .8rem; color: var(--ink-3); }
.doc.done .st { color: var(--go); font-weight: 700; }

/* ---------- App shell ---------- */
.app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
#map { position: absolute; inset: 0; z-index: 0; background: #ECEEF1; }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 500; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.hello-chip { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--r-pill); padding: 5px 16px 5px 5px; box-shadow: var(--shadow-pop); border: 0; cursor: pointer; text-align: left; }
.hello-chip .avatar { width: 38px; height: 38px; font-size: .85rem; }
.hello-chip small { display: block; color: var(--ink-2); font-size: .72rem; line-height: 1.1; }
.hello-chip b { font-size: .95rem; line-height: 1.2; }
.pill-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-pop); font-weight: 700; border: 0; cursor: pointer; }
.wordmark { font-weight: 800; letter-spacing: -.04em; }
.online-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--ink-2); border-radius: var(--r-pill); padding: 3px 10px; font-size: .75rem; font-weight: 700; }
.online-pill.on { background: rgba(18,161,80,.12); color: var(--go); }
.online-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--card);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-sheet);
  padding: 8px 18px calc(18px + var(--sab)); max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
}
.sheet .grabber, .grabber, .checker { width: 40px; height: 5px; border-radius: 3px; background: var(--surface-2); margin: 2px auto 14px; position: relative; cursor: grab; }
.sheet .grabber::after { content: ''; position: absolute; inset: -14px -60px; }
.sheet.collapsed { overflow: hidden; }
.sheet-enter { animation: sheetIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetIn { from { transform: translateY(26px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) {
  .sheet { left: 16px; right: auto; bottom: 16px; width: 420px; border-radius: var(--r-lg); max-height: calc(100vh - 100px); }
  .sheet .grabber { display: none; }
}

.page { position: absolute; inset: 0; z-index: 800; background: var(--bg); overflow-y: auto; padding: calc(10px + env(safe-area-inset-top)) 18px calc(90px + var(--sab)); }
.page-enter { animation: pageIn .26s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.page-head { display: flex; align-items: center; gap: 8px; margin: 0 -8px 8px; min-height: 48px; }
.page-head h2 { margin: 0; font-size: 1.15rem; }
.page-title { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 14px; }
.page-inner { max-width: 640px; margin: 0 auto; }

.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 850; display: flex; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: var(--sab); }
.tabbar button { flex: 1; background: none; border: 0; padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.tabbar button[aria-current="page"] { color: var(--ink); }
.tabbar button[aria-current="page"] svg { color: var(--ink); stroke-width: 2.4; }

/* ---------- Customer home ---------- */
.search-bar { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 0; border-radius: 14px; padding: 0 16px; min-height: 54px; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; color: var(--ink-2); }
.search-bar svg { color: var(--ink); }
.saved-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.saved { display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 8px 2px; cursor: pointer; text-align: left; min-width: 0; }
.saved .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; }
.saved b { display: block; font-size: .92rem; }
.saved span { display: block; font-size: .78rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 6px; }
.svc-ic { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-size: .82rem; font-weight: 600; padding: 0; }
.svc-ic .tile { width: 100%; aspect-ratio: 1.15; border-radius: 16px; background: var(--brand-soft); display: grid; place-items: center; transition: transform .12s; }
.svc-ic:active .tile { transform: scale(.95); }
.svc-ic svg { width: 80%; height: 80%; }
.section-label { font-weight: 700; font-size: .95rem; margin: 18px 0 8px; }
.more-row { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; cursor: pointer; text-align: left; font-weight: 600; }
.more-row .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; }
.promo { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--brand-soft); border: 0; border-radius: 16px; padding: 14px; margin-top: 12px; cursor: pointer; text-align: left; overflow: hidden; }
.promo b { display: block; }
.promo span { font-size: .82rem; color: var(--ink-2); }
.promo svg { width: 76px; height: 50px; flex: none; }

/* ---------- Choose a ride ---------- */
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; text-align: left; color: var(--ink); position: relative; }
.opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.opt .art { width: 58px; height: 38px; flex: none; }
.opt .name { font-weight: 700; font-size: 1rem; }
.opt .meta { font-size: .8rem; color: var(--ink-2); }
.opt .price { font-weight: 800; font-size: 1rem; white-space: nowrap; text-align: right; }
.opt .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); display: none; place-items: center; color: var(--brand-ink); position: absolute; right: -6px; top: -6px; box-shadow: 0 0 0 2px var(--card); }
.opt[aria-pressed="true"] .tick { display: grid; }
.surge { color: var(--stop); font-size: .74rem; font-weight: 700; }
.payrow { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 14px 2px; cursor: pointer; color: var(--ink); font-weight: 600; text-align: left; }
.paylogo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 900; font-size: .62rem; letter-spacing: -.02em; }
.paylogo.mtn { background: #FFCB05; color: #00294B; }
.paylogo.airtel { background: #E40000; color: #fff; font-size: .9rem; }
.paylogo.card { background: var(--ink); color: #fff; }
.paylogo.cash { background: #E8F6EE; color: var(--go); }
.paylogo.wallet { background: var(--brand-soft); color: #8A6A00; }
.default-badge { background: var(--go); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 6px; padding: 3px 8px; }

/* ---------- Matching, trip, completion ---------- */
.finding { text-align: center; padding: 8px 0 4px; }
.finding h2 { font-size: 1.25rem; margin-bottom: 2px; }
.ring-wrap { width: 150px; height: 150px; margin: 18px auto; position: relative; display: grid; place-items: center; }
.ring-wrap svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 1.4s linear infinite; }
.ring-wrap .center { width: 92px; height: 92px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; }
.ring-wrap .center svg { width: 66px; height: 44px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring-wrap svg.ring { animation: none; } }

.driver-card { display: flex; gap: 12px; align-items: center; }
.photo { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 800; color: var(--ink); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.rating { font-size: .82rem; color: var(--ink-2); display: inline-flex; gap: 4px; align-items: center; }
.rating b { color: var(--ink); }
.star-ic { color: var(--brand); }
.plate-chip { display: inline-block; font-weight: 800; letter-spacing: .03em; background: var(--surface); padding: 3px 8px; border-radius: 6px; font-size: .85rem; }
.eta-line { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; font-weight: 800; font-size: 1.1rem; }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .8s ease; }
.bar.indet > i { width: 35%; animation: indet 1.3s ease-in-out infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.act-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 700; cursor: pointer; text-decoration: none; color: var(--ink); position: relative; }
.act .dot { position: absolute; top: 8px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--stop); }
.round { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; text-decoration: none; position: relative; }
.round.brand { background: var(--brand-soft); color: #8A6A00; }
.round.go { background: #E8F6EE; color: var(--go); }
.round .dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--stop); border: 2px solid var(--card); }
.pin-box { display: flex; align-items: center; justify-content: space-between; background: var(--brand-soft); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.pin-code { font-weight: 900; font-size: 1.4rem; letter-spacing: .3em; margin-right: -.3em; }
.pin-code span { display: inline-grid; place-items: center; width: 34px; height: 40px; margin-left: 6px; border-radius: 8px; background: var(--card); letter-spacing: 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Extra pieces used by the rider and driver screens */
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--ink); display: grid; place-items: center; font-weight: 800; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-card { padding-top: 8px; }
.sheet.home-card { max-height: 74vh; }
.chat-btn { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 46px; border-radius: 12px; border: 0; background: var(--surface); padding: 0 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--ink-2); }
.kv b { font-weight: 700; text-align: right; }
.big-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.big-total b { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; }
.empty { text-align: center; padding: 40px 10px; color: var(--ink-2); }
.empty .illu { width: 120px; height: 120px; margin: 10px auto 18px; }
.empty .illu svg { width: 90px; height: 60px; }
.go-btn { width: 100%; }
.online-banner { display: flex; align-items: center; gap: 10px; background: var(--dark); color: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-weight: 600; }
.online-banner .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 0 rgba(18,161,80,.6); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { to { box-shadow: 0 0 0 12px rgba(18,161,80,0); } }
.doc-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doc-thumbs figure { margin: 0; background: var(--surface); border-radius: 12px; overflow: hidden; }
.doc-thumbs img { width: 100%; height: 150px; object-fit: cover; display: block; background: #ddd; }
.doc-thumbs figcaption { font-size: .8rem; font-weight: 700; padding: 8px 10px; }
.stops { margin: 10px 0; }
.stop { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; padding: 6px 0; }
.stop .s-ic { display: grid; place-items: center; padding-top: 3px; }
.stop small { color: var(--ink-2); font-size: .74rem; display: block; }
.stop b { font-size: .95rem; display: block; }
.dot-pick { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dot-drop { width: 11px; height: 11px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px #E2F4EA; }
.fare-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.fare-row b { font-size: 1.1rem; }
.trip-banner { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 520; background: var(--dark); color: #fff; border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-pop); }
.trip-banner .grow { text-align: center; }
.trip-banner b { display: block; font-size: 1rem; }
.trip-banner small { color: #BDBDC2; font-size: .8rem; }
.trip-banner .round { background: var(--dark-2); color: #fff; width: 38px; height: 38px; }
@media (min-width: 760px) { .trip-banner { left: auto; right: 16px; width: 380px; } }

.done-wrap { text-align: center; position: relative; padding-top: 10px; }
.check-big { width: 76px; height: 76px; border-radius: 50%; background: var(--go); color: #fff; display: grid; place-items: center; margin: 10px auto 12px; animation: popIn .45s cubic-bezier(.3,1.6,.5,1); position: relative; z-index: 1; }
.check-big svg { width: 38px; height: 38px; stroke-width: 3; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.confetti { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: 50%; left: 50%; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: burst 1.1s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .check-big { animation: none; } }
.fare-card { background: var(--surface); border-radius: 16px; padding: 16px; margin: 14px 0; }
.fare-card .amt { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; }
.stars { display: flex; gap: 8px; justify-content: center; margin: 8px 0 14px; }
.stars button { background: none; border: 0; cursor: pointer; padding: 2px; color: var(--surface-2); }
.stars button svg { width: 38px; height: 38px; fill: currentColor; }
.stars button.on { color: var(--brand); }

/* ---------- Lists: activity, account, payments ---------- */
.seg-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.seg-tabs button { border: 0; background: var(--surface); border-radius: var(--r-pill); padding: 9px 18px; font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--ink-2); }
.seg-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.trip-card { display: flex; gap: 12px; align-items: center; background: var(--bg); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.trip-card .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; flex: none; }
.trip-card .ic svg { width: 40px; height: 28px; }
.trip-card .t { font-weight: 700; }
.trip-card .s { font-size: .8rem; color: var(--ink-2); }
.trip-card .p { font-weight: 800; text-align: right; white-space: nowrap; }
.profile-head { display: flex; gap: 14px; align-items: center; margin: 10px 0 20px; }
.profile-head .photo { width: 72px; height: 72px; font-size: 1.4rem; background: var(--brand-soft); }
.verified { display: inline-flex; align-items: center; gap: 4px; background: #E8F6EE; color: var(--go); font-size: .76rem; font-weight: 700; border-radius: 6px; padding: 3px 8px; margin-top: 4px; }
.menu-item { display: flex; gap: 14px; align-items: center; width: 100%; padding: 15px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .98rem; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; }
.menu-item .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; flex: none; }
.pay-item { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; text-align: left; }
.pay-item.on { border-color: var(--brand); background: var(--brand-soft); }
.pay-item b { display: block; font-size: .95rem; }
.pay-item span { font-size: .8rem; color: var(--ink-2); }
.pay-item .default-badge { color: #fff; font-size: .7rem; }
.pay-item .paylogo, .pay-item .paylogo span { color: inherit; }
.paylogo.mtn { color: #00294B !important; } .paylogo.airtel, .paylogo.card { color: #fff !important; }

/* Search page */
.route-box { display: grid; grid-template-columns: 22px 1fr; gap: 8px 10px; align-items: center; }
.route-box input { padding: 12px 14px; }
.rb-line { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; }
.rb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.rb-sq { width: 10px; height: 10px; border-radius: 50%; background: var(--go); }
.rb-bar { width: 2px; flex: 1; min-height: 34px; background: var(--surface-2); margin: 4px 0; }
.lrow { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; padding: 12px 2px; cursor: pointer; text-align: left; color: var(--ink); border-radius: 10px; }
.lrow:hover { background: var(--surface); }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; }
.lrow .t { font-weight: 600; }
.lrow .s { font-size: .84rem; color: var(--ink-2); }

/* Chat */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px; background: var(--surface); align-self: flex-start; }
.bubble.me { background: var(--brand); color: var(--brand-ink); align-self: flex-end; }
.bubble .at { display: block; font-size: .7rem; opacity: .6; margin-top: 2px; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; scrollbar-width: none; }
.quick button { flex: none; background: var(--surface); border: 0; border-radius: var(--r-pill); padding: 9px 14px; font-size: .86rem; font-weight: 600; cursor: pointer; }
.chat-input { display: flex; gap: 8px; padding-top: 8px; }
.chat-input input { border-radius: var(--r-pill); }

/* Map markers */
.veh { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .9s linear; will-change: transform; }
.veh svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(47,107,255,.2), 0 2px 6px rgba(0,0,0,.3); }
.pin-ci { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 4px solid #141414; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pin-sq { width: 18px; height: 18px; border-radius: 50%; background: var(--go); border: 4px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.map-label { background: var(--card); color: var(--ink); font: 700 12.5px/1.2 var(--font); padding: 7px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.2); display: inline-flex; align-items: center; gap: 8px; }
.map-label b { background: var(--brand); color: var(--brand-ink); border-radius: 5px; padding: 2px 5px; font-size: 11px; text-align: center; line-height: 1.05; }
.center-pin { position: absolute; left: 50%; top: 50%; z-index: 450; transform: translate(-50%, -100%); pointer-events: none; }
.radar { width: 160px; height: 160px; border-radius: 50%; background: rgba(255,196,0,.18); border: 2px solid rgba(255,196,0,.6); animation: radar 1.8s ease-out infinite; }
@keyframes radar { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.75) !important; }
.maplibregl-canvas { outline: none; }

/* Modals */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900; display: flex; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer { background: var(--bg); width: min(380px, 90vw); height: 100%; overflow-y: auto; padding: 22px 18px; }
.modal { margin: auto auto 0; background: var(--card); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 20px calc(20px + var(--sab)); animation: sheetIn .28s cubic-bezier(.2,.8,.2,1); }
.modal::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--surface-2); margin: 0 auto 14px; }
@media (min-width: 760px) { .modal { margin: auto; border-radius: var(--r-lg); } }

/* Money & misc */
.money { font-size: 2.1rem; font-weight: 900; letter-spacing: -.035em; }
.tx { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.pos { color: var(--go); font-weight: 700; } .neg { font-weight: 700; }
.card { background: var(--surface); border-radius: var(--r); padding: 16px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.chip { flex: none; border: 0; background: var(--surface); border-radius: var(--r-pill); padding: 10px 16px; font-weight: 600; font-size: .9rem; color: var(--ink); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: .76rem; font-weight: 700; background: var(--surface); color: var(--ink-2); }
.badge.ok { background: #E8F6EE; color: var(--go); }
.badge.warn { background: var(--brand-soft); color: #8A6A00; }
.badge.bad { background: var(--stop-soft); color: var(--stop); }
.plate-tag { display: inline-block; font-weight: 800; letter-spacing: .03em; background: var(--surface); padding: 3px 7px; border-radius: 6px; }
#toast { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); pointer-events: none; text-align: center; font-size: .92rem; width: max-content; transform: translateX(-50%); z-index: 4000; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; max-width: 92vw; box-shadow: var(--shadow-pop); animation: toastIn .25s ease; }
@keyframes toastIn { from { transform: translate(-50%, -12px); opacity: 0; } }
.install { display: flex; align-items: center; gap: 12px; background: var(--dark); color: #fff; border-radius: 14px; padding: 10px 10px 10px 12px; margin-bottom: 12px; }
.install img { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.install .btn { min-height: 36px; background: var(--brand); color: var(--brand-ink); border-radius: 999px; font-size: .88rem; padding: 0 16px; }
.install .x { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 6px; }

/* ---------- Driver ---------- */
.drv-head { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 16px; padding: 8px 12px 8px 8px; box-shadow: var(--shadow-pop); }
.drv-head .photo { width: 42px; height: 42px; font-size: .9rem; }
.drv-head b { display: block; font-size: .98rem; line-height: 1.2; }
.earn-card { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 4px 0 10px; cursor: pointer; text-align: left; }
.earn-card small { color: var(--ink-2); font-size: .82rem; display: block; }
.earn-card b { font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 14px; }
.stats3 b { display: block; font-size: 1.1rem; font-weight: 800; }
.stats3 span { font-size: .76rem; color: var(--ink-2); }
.stats3 > div + div { border-left: 1px solid var(--line); }
.req { position: fixed; inset: 0; z-index: 880; background: rgba(14,14,16,.94); display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + var(--sab)); color: #fff; animation: fade .2s; }
.req h2 { color: #fff; text-align: center; margin: 6px 0 16px; }
.req .req-card { background: var(--card); color: var(--ink); border-radius: 20px; padding: 18px; animation: sheetIn .3s cubic-bezier(.2,.8,.2,1); }
.req .away { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.req .est { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.req .est small { color: var(--ink-2); display: block; font-size: .8rem; }
.req .est b { font-size: 1.7rem; font-weight: 900; letter-spacing: -.03em; }
.req .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.req .timer { width: 54px; height: 54px; margin: 0 auto; }
.req .timer circle { fill: none; stroke-width: 5; }
.req .timer .bg { stroke: #2C2C30; }
.req .timer .fg { stroke: var(--brand); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear; }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin: 18px 0 6px; padding-bottom: 22px; position: relative; }
.chart .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.chart .b i { width: 100%; max-width: 26px; background: var(--brand); border-radius: 6px 6px 2px 2px; min-height: 3px; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.chart .b.zero i { background: var(--surface-2); }
.chart .b span { position: absolute; bottom: -22px; font-size: .74rem; color: var(--ink-2); font-weight: 600; }
.chart .b.today span { color: var(--ink); font-weight: 800; }
.slider { position: relative; height: 58px; border-radius: 14px; background: var(--brand); color: var(--brand-ink); overflow: hidden; user-select: none; touch-action: none; }
.slider.red { background: var(--stop); color: #fff; }
.slider.dark { background: var(--ink); color: #fff; }
.slider .label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.02rem; pointer-events: none; }
.slider .knob { position: absolute; top: 5px; left: 5px; width: 48px; height: 48px; border-radius: 11px; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pin-input { font-weight: 900; font-size: 1.9rem; letter-spacing: .5em; text-align: center; padding-left: calc(14px + .5em); }
.offer-fare { font-size: 2.3rem; font-weight: 900; letter-spacing: -.04em; }
.stat-row { display: flex; gap: 10px; margin: 12px 0; }
.stat { flex: 1; background: var(--surface); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-size: 1.15rem; font-weight: 800; }

/* ---------- Layout that fits every phone ---------- */
/* Primary buttons live in a footer pinned to the bottom of the screen (thumb zone). */
.onb-foot { position: sticky; bottom: 0; z-index: 2; background: var(--bg); margin: auto -22px calc(-22px - var(--sab)); padding: 12px 22px calc(18px + var(--sab)); display: flex; flex-direction: column; gap: 4px; }
.onb-foot .fine { margin-top: 8px; }
.sheet-foot { position: sticky; bottom: 0; z-index: 2; background: var(--card); margin: 10px -18px calc(-18px - var(--sab)); padding: 10px 18px calc(16px + var(--sab)); display: flex; flex-direction: column; gap: 8px; }
.sheet-foot.line { border-top: 1px solid var(--line); }
.sheet-foot .btn-link { min-height: 36px; }
@media (min-width: 760px) { .sheet-foot { margin-bottom: -18px; padding-bottom: 16px; border-radius: 0 0 var(--r-lg) var(--r-lg); } }
.pin-code { white-space: nowrap; flex: none; }
.driver-card .grow > b, .drv-head b, .trip-banner b, .trip-banner small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv-head { min-width: 0; max-width: calc(100vw - 86px); }
.drv-head > span:nth-child(2) { min-width: 0; flex: 1; }
.topbar > .drv-head, .topbar > .hello-chip { flex: 0 1 auto; min-width: 0; }
.trip-banner .grow { min-width: 0; }
.opt .meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt .grow { min-width: 0; }
.stop > span:last-child { min-width: 0; }
.payrow .grow { min-width: 0; }
.req .req-card { overflow-y: auto; max-height: calc(100dvh - 230px); }
.req .btns .btn { min-height: 58px; font-size: 1.08rem; }

/* Narrow phones (iPhone SE, small Androids) */
@media (max-width: 360px) {
  h1 { font-size: 1.5rem; } .onb h1 { font-size: 1.4rem; }
  .onb { padding-left: 16px; padding-right: 16px; } .onb-foot { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .sheet { padding-left: 14px; padding-right: 14px; } .sheet-foot { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .svc-row { gap: 6px; } .svc-ic { font-size: .76rem; }
  .opt { padding: 8px 10px; gap: 10px; } .opt .art { width: 48px; height: 32px; } .opt .price { font-size: .92rem; }
  .pin-code span { width: 28px; height: 34px; margin-left: 4px; font-size: 1.15rem; }
  .act-row { gap: 8px; } .stats3 b { font-size: 1rem; }
  .photo { width: 48px; height: 48px; }
  .hello-chip b { font-size: .88rem; }
  .slide h1 { font-size: 1.7rem; }
}
/* Short screens: tighten vertical rhythm so the map and buttons both fit */
@media (max-height: 700px) {
  .sheet { max-height: 80vh; max-height: 80dvh; padding-top: 6px; }
  .sheet .grabber { margin-bottom: 8px; }
  .svc-row { margin: 10px 0 4px; } .svc-ic .tile { aspect-ratio: 1.35; }
  .saved-row { margin: 8px 0 0; } .section-label { margin: 12px 0 6px; }
  .promo { padding: 10px 12px; margin-top: 8px; }
  .opts { gap: 6px; } .opt { padding-top: 7px; padding-bottom: 7px; }
  .payrow { padding: 10px 2px; }
  .ring-wrap { width: 112px; height: 112px; margin: 10px auto; } .ring-wrap .center { width: 70px; height: 70px; } .ring-wrap .center svg { width: 50px; height: 34px; }
  .eta-line { margin: 10px 0 6px; } .pin-box { margin: 10px 0; padding: 8px 12px; }
  .check-big { width: 60px; height: 60px; margin: 4px auto 8px; } .check-big svg { width: 30px; height: 30px; }
  .fare-card { padding: 12px; margin: 10px 0; } .fare-card .amt { font-size: 1.6rem; }
  .stars { margin: 4px 0 8px; } .stars button svg { width: 32px; height: 32px; }
  .illu { width: 116px; height: 116px; margin: 18px auto 18px; }
  .onb .lead { margin-bottom: 12px; } label { margin-top: 10px; }
  input, select { padding: 12px 14px; } .phone-field input { padding: 12px 0; }
  .stats3 { padding: 8px 0; margin-bottom: 10px; } .earn-card { padding-bottom: 6px; }
  .online-banner { padding: 9px 12px; margin-bottom: 8px; }
  .req h2 { margin: 4px 0 10px; } .req .req-card { padding: 14px; }
  .btn-lg { min-height: 52px; }
}

/* ---------- Fit every phone: full-height screens, bottom-anchored actions ---------- */
#root { min-height: 100%; }
.onb { min-height: 100vh; min-height: 100dvh; }
.sheet { max-height: 86vh; max-height: 86dvh; }
/* Primary actions stay pinned to the bottom of a sheet even when its content scrolls */
.sheet-foot { position: sticky; bottom: calc(-18px - var(--sab)); z-index: 3; background: var(--card);
  margin: 6px -18px calc(-18px - var(--sab)); padding: 10px 18px calc(14px + var(--sab));
  box-shadow: 0 -12px 14px -12px rgba(0,0,0,.18); }
.sheet-foot > * + * { margin-top: 8px; }
.onb .sticky-cta { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 2px; margin-top: 8px; }
/* The home card keeps a slice of map visible */
.sheet.home-card { max-height: calc(100dvh - 150px); }

/* Short phones (iPhone SE, small Androids): tighten spacing so the map stays visible */
@media (max-height: 760px) {
  h1 { font-size: 1.5rem; }
  .onb { padding-top: calc(8px + env(safe-area-inset-top)); }
  .onb-top { margin-bottom: 6px; }
  .onb .lead { margin-bottom: 10px; }
  label { margin: 10px 0 5px; }
  input, select { padding: 12px 14px; }
  .phone-field input { padding: 12px 0; }
  .illu { width: 120px; height: 120px; margin: 18px auto 16px; }
  .btn-lg { min-height: 52px; }
  .sheet { padding-top: 6px; }
  .sheet .grabber { margin-bottom: 8px; }
  .opts { gap: 6px; }
  .opt { padding: 7px 10px; }
  .opt .art { width: 50px; height: 32px; }
  .payrow { padding: 9px 2px; }
  .svc-row { margin: 10px 0 4px; }
  .svc-ic .tile { aspect-ratio: 1.35; }
  .saved-row { margin: 8px 0 0; }
  .promo { padding: 10px 12px; margin-top: 8px; }
  .promo svg { width: 60px; height: 40px; }
  .section-label { margin: 12px 0 6px; }
  .more-row { padding: 8px 12px; }
  .photo { width: 48px; height: 48px; }
  .eta-line { margin: 10px 0 6px; font-size: 1rem; }
  .bar { margin-bottom: 10px; }
  .act { min-height: 42px; }
  .pin-box { margin: 8px 0; padding: 8px 12px; }
  .pin-code span { width: 30px; height: 36px; }
  .stops { margin: 6px 0; } .stop { padding: 4px 0; }
  .fare-row { padding-top: 8px; }
  .ring-wrap { width: 120px; height: 120px; margin: 10px auto; }
  .ring-wrap .center { width: 74px; height: 74px; }
  .check-big { width: 60px; height: 60px; margin: 4px auto 8px; } .check-big svg { width: 30px; height: 30px; }
  .fare-card { padding: 12px; margin: 10px 0; } .fare-card .amt { font-size: 1.6rem; }
  .stars { margin: 4px 0 8px; } .stars button svg { width: 32px; height: 32px; }
  .stats3 { padding: 8px 0; margin-bottom: 10px; }
  .earn-card b { font-size: 1.4rem; }
  .req .req-card { padding: 14px; }
  .req h2 { margin: 4px 0 10px; }
  .slider { height: 54px; } .slider .knob { width: 44px; height: 44px; }
}
/* Very narrow phones (320–360px wide) */
@media (max-width: 360px) {
  .sheet { padding-left: 14px; padding-right: 14px; }
  .sheet-foot { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .onb { padding-left: 16px; padding-right: 16px; }
  .opt .price, .opt .name { font-size: .92rem; }
  .svc-ic { font-size: .76rem; }
  .pin-code span { width: 28px; margin-left: 4px; }
  .hello-chip b { font-size: .88rem; }
}
/* Tablets and desktops: centred phone-width auth screens, floating sheets */
@media (min-width: 760px) {
  .onb { max-width: 440px; }
  .sheet-foot { margin-bottom: -18px; padding-bottom: 14px; }
}
@media (min-width: 760px) {
  .req { align-items: center; }
  .req > * { width: 100%; max-width: 440px; }
  .req .spacer { display: none; }
  .req .btns { margin-top: 18px; }
}

/* The app shell is pinned to the real screen edges (no vh maths, which iOS gets wrong in installed apps) */
html, body { background: var(--bg); overscroll-behavior: none; }
body[data-app="rider"], body[data-app="driver"] { -webkit-text-size-adjust: 100%; }
.tabbar svg.i { width: 26px; height: 26px; }
.tabbar button { padding: 7px 0 4px; gap: 2px; font-size: .7rem; }
.opt .price .was { display: block; text-decoration: line-through; font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.demand-chip { display: flex; align-items: center; gap: 10px; background: var(--brand-soft); color: #6B5200; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-weight: 600; font-size: .9rem; }
.demand-chip b { margin-left: auto; color: var(--ink); }

/* ---------- 3D vehicle art ---------- */
.art-img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.14)); -webkit-user-drag: none; user-select: none; }
.svc-ic .tile { place-items: center; }
.svc-ic .tile .art-img { width: 70%; height: 70%; }
.opt .art { width: 52px; height: 46px; }
.trip-card .ic .art-img { width: 36px; height: 36px; }
.promo .art-img { width: 58px; height: 58px; flex: none; }
.ring-wrap .center .art-img { width: 60px; height: 60px; }
.empty .illu .art-img { width: 76px; height: 76px; }
.illu > .art-img { width: 66%; height: 66%; }
.slide .art .art-img { filter: drop-shadow(0 20px 26px rgba(0,0,0,.55)); }

/* ---------- Installed app (home screen) ----------
   The map runs under the clock and battery. Everything else keeps its normal
   position and nothing scrolls or slides: the app shell is pinned to the screen. */
html.standalone, html.standalone body { height: 100%; overscroll-behavior: none; }
html.standalone .app { position: fixed; inset: 0; }

/* =====================================================================
   iOS 26 "Liquid Glass"
   Frosted, translucent surfaces with a soft specular edge that let the
   map show through: floating capsule tab bar, glass chips and buttons
   over the map, dark glass banners, rounder sheets, capsule buttons.
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-dark: rgba(22, 22, 24, .62);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-blur: blur(22px) saturate(185%);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
  --r-sheet: 30px;
}
.glass, .tabbar, .hello-chip, .fab, .pill-chip, .drv-head {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25);
  border: 1px solid var(--glass-edge);
}
.fab:hover { background: var(--glass-strong); }
/* the specular "liquid" highlight */
.tabbar::before, .hello-chip::before, .drv-head::before, .trip-banner::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18) 100%);
  mix-blend-mode: soft-light;
}
.hello-chip, .drv-head { position: relative; }

/* Floating capsule tab bar */
.tabbar {
  left: 14px; right: 14px; bottom: max(10px, calc(var(--sab) - 6px));
  border-radius: 999px; padding: 5px; gap: 2px; border-top: 1px solid var(--glass-edge);
}
.tabbar button { border-radius: 999px; padding: 7px 0 6px; transition: background .25s, color .2s, transform .15s; }
.tabbar button:active { transform: scale(.94); }
.tabbar button[aria-current="page"] { background: rgba(255,255,255,.75); box-shadow: 0 1px 4px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.03); color: var(--ink); }
.tabbar button[aria-current="page"] svg { color: #A27C00; }
@media (min-width: 760px) { .tabbar { left: 50%; right: auto; width: 380px; transform: translateX(-50%); } }

/* Glass over the map */
.fab { color: var(--ink); }
.hello-chip { padding: 5px 16px 5px 5px; }
.trip-banner {
  background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.12); border-radius: 24px; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.18);
}
.trip-banner .round { background: rgba(255,255,255,.12); }
#toast {
  background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 11px 20px;
}

/* Sheets & modals: rounder, frosted */
.sheet {
  background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-top: 1px solid var(--glass-edge);
  box-shadow: 0 -10px 34px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.sheet-foot { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet-foot::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,0), var(--glass-strong) 28%); }
@media (min-width: 760px) { .sheet { border-radius: var(--r-sheet); } }
.modal { border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
@media (min-width: 760px) { .modal { border-radius: var(--r-sheet); } }
.overlay { background: rgba(0,0,0,.28); }

/* Capsule buttons & iOS controls */
.btn { border-radius: 999px; }
.btn-sm { border-radius: 999px; }
.btn-primary, .btn-brand, .btn-gold { box-shadow: 0 6px 16px rgba(255,196,0,.35), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-danger { box-shadow: 0 6px 16px rgba(229,50,45,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-go { box-shadow: 0 6px 16px rgba(18,161,80,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.act { border-radius: 999px; }
.search-bar { border-radius: 999px; background: rgba(118,118,128,.12); }
.seg-tabs { background: rgba(118,118,128,.12); border-radius: 999px; padding: 3px; gap: 2px; display: inline-flex; }
.seg-tabs button { background: transparent; padding: 7px 16px; }
.seg-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.opt { border-radius: 18px; }
.page-title { font-size: 2.1rem; letter-spacing: -.025em; }

/* Content scrolls under the floating tab bar, like iOS 26 */
.page { padding-bottom: calc(110px + var(--sab)); }

/* Browsers without backdrop blur: fall back to solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar, .hello-chip, .fab, .pill-chip, .drv-head, .sheet, .modal { background: #fff; }
  .trip-banner, #toast { background: #141416; }
}
#toast { background: rgba(22,22,24,.88); top: calc(64px + env(safe-area-inset-top)); }
/* Pill sits as low as the screen allows: just above the home bar, or right at
   the bottom edge when iOS has already cut the app short. */
.tabbar { bottom: max(8px, calc(var(--sab) - 4px)); }

/* =====================================================================
   Brand: speed-K wordmark, premium splash, photo welcome screens
   ===================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-ios: cubic-bezier(.32, .72, 0, 1); --night: #070B12; }
.wm { display: flex; flex-direction: column; align-items: center; color: #fff; }
.wm-row { display: flex; align-items: flex-end; line-height: 1; }
.wm-k { width: 1.42em; height: 1.02em; margin-right: -.08em; overflow: visible; filter: drop-shadow(0 4px 18px rgba(255,190,0,.35)); }
.wm-t { font-weight: 800; letter-spacing: -.045em; font-size: 1em; line-height: .78; padding-bottom: .02em; }
.wm-sub { color: var(--brand); font-weight: 800; letter-spacing: .32em; font-size: .2em; margin: .55em 0 -.2em .32em; }
.wm-tag { margin-top: .55em; font-size: .17em; font-weight: 600; letter-spacing: .34em; color: #E9E9EE; white-space: nowrap; padding-left: .34em; }
.wm-tag i { font-style: normal; color: var(--brand); margin: 0 .55em 0 .2em; }

/* Splash: dark night sky, soft glow, the logo assembles itself slowly */
.splash { background: radial-gradient(120% 65% at 50% 38%, #18233A 0%, #0B111C 52%, #05070B 100%); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out), visibility .8s; }
.splash.out { opacity: 0; transform: scale(1.06); filter: blur(6px); visibility: hidden; }
.splash .sky { display: none; }
.splash-glow { position: absolute; width: 520px; height: 520px; left: 50%; top: 42%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,184,0,.20), rgba(255,184,0,0) 62%); animation: glowIn 2s var(--ease-out) both; }
.splash-logo { margin-top: -8vh; font-size: clamp(52px, 17vw, 78px); }
.splash-logo .pin { display: none; }
.splash .wm-lines path { animation: lineIn 1s var(--ease-out) both; }
.splash .wm-lines .l1 { animation-delay: .45s; } .splash .wm-lines .l2 { animation-delay: .55s; } .splash .wm-lines .l3 { animation-delay: .65s; }
.splash .wm-body { transform-origin: 60% 50%; animation: kIn 1.1s var(--ease-out) .1s both; }
.splash .wm-t { animation: wordIn 1.1s var(--ease-out) .35s both; }
.splash .wm-sub { animation: fadeIn .9s var(--ease-out) .8s both; }
.splash .wm-tag { animation: tagIn 1.2s var(--ease-out) .8s both; }
@keyframes glowIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes kIn { from { opacity: 0; transform: scale(.82); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lineIn { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes wordIn { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-8px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes tagIn { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .34em; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Welcome screens: rider photo with slow cinematic drift */
.onboard.hero { background: linear-gradient(180deg, #04101F 0%, #0B1320 30%, #07090E 70%, #05060A 100%); overflow: hidden; }
.hero-photo { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 18vh); height: 62vh; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: drift 24s ease-in-out infinite alternate, photoIn 1.4s var(--ease-out) both; }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-2%); } }
@keyframes photoIn { from { opacity: 0; } to { opacity: 1; } }
.hero-logo { position: relative; z-index: 2; padding-top: calc(env(safe-area-inset-top) + 7vh); font-size: clamp(46px, 15vw, 68px); animation: fadeIn 1s var(--ease-out) both; }
.onboard.hero .slides { position: relative; z-index: 2; align-items: flex-end; }
.onboard.hero .slide { justify-content: flex-end; padding-bottom: 14px; }
.onboard.hero .slide h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); line-height: 1.04; max-width: none; letter-spacing: -.035em; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.onboard.hero .slide h1 span { color: var(--brand); }
.onboard.hero .slide p { color: #D5D6DB; font-size: 1.02rem; line-height: 1.45; max-width: 32ch; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.onboard.hero .slide h1, .onboard.hero .slide p { animation: riseIn .9s var(--ease-out) .25s both; }
.onboard.hero .dots, .onboard.hero .cta { position: relative; z-index: 2; }
.onboard.hero .cta { animation: riseIn .9s var(--ease-out) .4s both; }
.onboard.hero .btn-primary { box-shadow: 0 10px 34px rgba(255,190,0,.45), inset 0 1px 0 rgba(255,255,255,.5); }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-height: 700px) { .hero-photo { top: calc(env(safe-area-inset-top) + 15vh); height: 56vh; } .hero-logo { padding-top: calc(env(safe-area-inset-top) + 4vh); } }

/* =====================================================================
   iOS navigation motion
   push: new screen slides in from the right over a dimmed previous one;
   back: slides out to the right; sheets and modals rise on a spring curve.
   ===================================================================== */
.push-in { animation: pushIn .5s var(--ease-ios) both; box-shadow: -12px 0 30px rgba(0,0,0,.12); }
.push-out { animation: pushOut .33s var(--ease-ios) both; box-shadow: -12px 0 30px rgba(0,0,0,.12); pointer-events: none; }
@keyframes pushIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pushOut { from { transform: none; } to { transform: translateX(100%); } }
.nav-fwd { animation: navFwd .48s var(--ease-ios) both; }
.nav-back { animation: navBack .48s var(--ease-ios) both; }
@keyframes navFwd { from { transform: translateX(38%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes navBack { from { transform: translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
.tab-in { animation: tabIn .28s ease both; }
@keyframes tabIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.sheet-enter { animation: sheetSpring .55s var(--ease-ios); }
@keyframes sheetSpring { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.overlay { animation: fade .3s ease; }
.overlay .modal { animation: modalUp .5s var(--ease-ios); }
.overlay.closing { animation: fadeOut .26s ease both; }
.overlay.closing .modal { animation: modalDown .26s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes modalUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes modalDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fadeOut { to { opacity: 0; } }
@media (min-width: 760px) { @keyframes modalUp { from { transform: translateY(30px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } }
.btn, .opt, .menu-item, .trip-card, .pay-item, .saved, .svc-ic, .lrow { transition: transform .18s var(--ease-out), background .2s, box-shadow .2s; }
.opt:active, .menu-item:active, .trip-card:active, .pay-item:active, .lrow:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .push-in, .push-out, .nav-fwd, .nav-back, .tab-in, .sheet-enter, .overlay, .overlay .modal, .overlay.closing, .overlay.closing .modal,
  .splash *, .hero-photo img, .hero-logo, .onboard.hero .slide h1, .onboard.hero .slide p, .onboard.hero .cta { animation: none !important; }
}
.hero-photo { top: calc(env(safe-area-inset-top) + 14vh); height: 58vh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 56%, transparent 90%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 56%, transparent 90%); }
.onboard.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,10,0) 0%, rgba(5,6,10,.7) 38%, rgba(5,6,10,.92) 100%); }
.wm-tag i { margin: 0 .62em 0 .3em; }

/* ---------- Log in / sign up: photo header + white card ---------- */
.auth2 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #07090E; }
html.standalone .auth2 { min-height: 100%; }
.auth-hero { position: relative; height: 31vh; min-height: 210px; max-height: 300px; flex: none; overflow: hidden; }
.auth-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: drift 24s ease-in-out infinite alternate; }
.auth-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,16,.82) 0%, rgba(4,8,16,.35) 45%, rgba(4,8,16,.55) 100%); }
.auth-logo { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 22px); display: grid; place-items: center; font-size: 46px; }
.auth-logo .wm-tag { font-size: .2em; }
.glass-back { position: absolute; z-index: 2; left: 14px; top: calc(env(safe-area-inset-top) + 12px); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.auth-card { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--bg); margin-top: -28px; border-radius: 28px 28px 0 0;
  padding: 26px 22px calc(18px + var(--sab)); box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
.auth-body { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 440px; margin: 0 auto; }
.auth-body h1 { font-size: 1.65rem; margin-bottom: 2px; }
.auth-body .lead { color: var(--ink-2); margin: 0 0 16px; font-size: .95rem; }
.auth-body .spacer { flex: 1; min-height: 18px; }
.auth-body .fine { font-size: .86rem; color: var(--ink-2); text-align: center; margin: 12px 0 0; }
.auth-body .fine a, .auth-body .fine button, .link-btn { color: var(--ink); font-weight: 700; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; font-size: inherit; }
.link-btn { font-size: .88rem; color: #8A6A00; }
.auth-body .checklist { margin: 6px 0; }
.btn-google { background: #fff; color: var(--ink); border: 1.5px solid #E3E3E8; box-shadow: 0 1px 2px rgba(0,0,0,.05); gap: 10px; font-weight: 700; }
.btn-google:hover { background: #FAFAFB; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px; color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pw-field { position: relative; }
.pw-field input { padding-right: 52px; }
.pw-field .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: none; color: var(--ink-2); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.auth2 input, .auth2 select, .auth2 .phone-field { border-radius: 14px; background: #F7F7F9; border-color: #ECECF0; }
.auth2 .phone-field input { background: transparent; }
.auth2 input:focus, .auth2 .phone-field:focus-within { background: #fff; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,.2); border-top-color: currentColor; animation: spin .7s linear infinite; display: inline-block; }
@media (max-height: 720px) { .auth-hero { height: 24vh; min-height: 160px; } .auth-logo { font-size: 38px; top: calc(env(safe-area-inset-top) + 14px); } .auth-body .lead { margin-bottom: 10px; } }
@media (min-width: 760px) { .auth-card { border-radius: 28px; margin: -28px auto 24px; width: 480px; flex: none; } }

/* ---------- Skeleton placeholders ---------- */
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, #EFEFF2 0%, #F7F7F9 40%, #EFEFF2 80%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.sk-card { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.sk-ic { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.sk-chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 22px; }
.sk-chart .sk { flex: 1; border-radius: 6px 6px 2px 2px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- Growth features ---------- */
.chip-row { display: flex; gap: 8px; margin: 10px 0 2px; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.pill-opt { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--bg); border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .86rem; color: var(--ink); cursor: pointer; }
.pill-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.pill-opt svg.i.sm { width: 16px; height: 16px; }
.deal { color: var(--go); font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.deal svg.i.sm { width: 14px; height: 14px; }
.deal-price { color: var(--go); }
.extra-box { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.extra-box .pin-code { font-size: 1rem; vertical-align: middle; }
.extra-box .pin-code span { width: 24px; height: 28px; margin-left: 3px; }
.tip-box { background: var(--brand-soft); border-radius: 16px; padding: 12px 14px; margin: 4px 0 12px; text-align: left; }
.tip-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tip-chips .chip { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.points-pill { display: inline-block; margin-top: 8px; background: #141414; color: var(--brand); font-weight: 800; font-size: .78rem; padding: 5px 12px; border-radius: 999px; }
.sched-card { display: flex; align-items: center; gap: 12px; background: var(--dark); color: #fff; border-radius: 16px; padding: 10px 10px 10px 12px; margin-bottom: 10px; }
.sched-card .ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: var(--brand); flex: none; }
.sched-card b { display: block; font-size: .95rem; }
.sched-card span span, .sched-card .grow > span { font-size: .8rem; color: #C9C9CF; }
.sched-card .btn-ghost { color: #fff; }
.offer-chip { display: flex; align-items: center; gap: 8px; background: #E8F6EE; color: #0B6B35; border-radius: 12px; padding: 9px 12px; font-size: .84rem; margin-bottom: 10px; }
.promo.invite { background: linear-gradient(135deg, #141414, #2A2410); color: #fff; }
.promo.invite span { color: #D6D3C8; }
.promo.invite .gift { font-size: 34px; color: inherit; }
.invite-hero { text-align: center; padding: 6px 0 14px; }
.gift-big { font-size: 64px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.code-box { display: flex; flex-direction: column; align-items: center; border: 2px dashed var(--brand); background: var(--brand-soft); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.code-box b { font-size: 1.8rem; letter-spacing: .12em; font-weight: 900; }
.rewards-card { border-radius: 22px; padding: 20px; color: #fff; margin-bottom: 14px; background: linear-gradient(135deg, #8C5A2B, #C08A4A); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.rewards-card.tier-silver { background: linear-gradient(135deg, #6F7682, #AEB4BE); }
.rewards-card.tier-gold { background: linear-gradient(135deg, #B8860B, #FFC400); color: #141414; }
.rewards-card b { display: block; font-size: 3rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-top: 6px; }
.rewards-card .tiny { opacity: .85; font-weight: 700; letter-spacing: .04em; }
.was { text-decoration: line-through; color: var(--ink-3); font-weight: 600; font-size: .8em; }
.fare-row b .was { display: inline; margin-right: 6px; }
.g-fields { flex-wrap: wrap; align-items: flex-end; }
.g-fields > span { flex: 1 1 90px; min-width: 90px; }
.g-fields small { display: block; font-size: .72rem; color: var(--ink-2); margin: 6px 0 4px; font-weight: 600; }

/* =====================================================================
   Home v3: lighter, calmer, smoother
   ===================================================================== */
/* The big sheet is solid (a full-screen blur over a live map is what made phones stutter). */
.sheet { background: #FDFCFB; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 -8px 30px rgba(0,0,0,.09), 0 120px 0 0 #FDFCFB; will-change: transform; }
.sheet.lifted { overflow: hidden; }
.sheet-enter { animation: sheetRise .55s var(--ease-ios); }
@keyframes sheetRise { from { translate: 0 44px; opacity: .3; } to { translate: 0 0; opacity: 1; } }
.sheet.home-card { max-height: calc(100dvh - env(safe-area-inset-top) - 70px); padding-top: 6px; }
.sheet .grabber { margin-bottom: 12px; }

/* Map dims and the greeting tucks away as the sheet opens fully (--open goes 0 → 1 while dragging) */
.app { --open: 0; }
.app::after { content: ''; position: absolute; inset: 0; z-index: 550; background: #000; opacity: calc(var(--open) * .22); pointer-events: none; }
.app .topbar { opacity: calc(1 - var(--open) * 1.4); transform: translateY(calc(var(--open) * -10px)); }

/* "Where to?" with the pickup-time pill inside, like the big apps */
.where { display: flex; align-items: center; gap: 6px; background: rgba(118,118,128,.12); border-radius: 999px; padding: 5px 5px 5px 0; }
.where-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0 0 0 18px; min-height: 48px; font: inherit; font-size: 1.12rem; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; letter-spacing: -.01em; }
.where-go svg { flex: none; }
.when-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 0; border-radius: 999px; padding: 0 12px; height: 40px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; max-width: 46%; }
.when-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.when-pill.on { background: var(--ink); color: #fff; }
.where:active { background: rgba(118,118,128,.18); }

/* Quick picks: Home, Work, recent places; swipe sideways */
.quick, .svc-strip, .fy-rail { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 -18px; padding: 0 18px; scroll-padding: 0 18px; }
.quick::-webkit-scrollbar, .svc-strip::-webkit-scrollbar, .fy-rail::-webkit-scrollbar { display: none; }
.quick { gap: 8px; margin-top: 12px; margin-bottom: 2px; padding-bottom: 2px; }
.q-chip { flex: none; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 999px; padding: 5px 14px 5px 5px; font: inherit; cursor: pointer; max-width: 200px; text-align: left; }
.q-chip .ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(118,118,128,.12); display: grid; place-items: center; flex: none; }
.q-chip .t { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.q-chip b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-chip small { font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* Services: one swipeable row, live pickup times */
.svc-strip { gap: 10px; margin-top: 14px; padding-bottom: 4px; scroll-snap-type: x proximity; }
.svc-t { flex: 0 0 calc((100% - 30px) / 4.35); min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; scroll-snap-align: start; }
.svc-t .tile { width: 100%; aspect-ratio: 1.05; border-radius: 18px; background: linear-gradient(160deg, #FFF6D6, #FFEDB0); display: grid; place-items: center; margin-bottom: 4px; transition: transform .2s var(--ease-out); }
.svc-t .tile .art-img { width: 78%; height: 78%; }
.svc-t b { font-size: .84rem; }
.svc-t small { font-size: .7rem; color: var(--ink-2); min-height: 1.1em; opacity: 0; transition: opacity .3s; }
.svc-t small.on { opacity: 1; }
.svc-t:active .tile { transform: scale(.93); }

/* For you: swipeable offer cards */
.home .section-label { margin: 18px 0 8px; }
.fy-rail { gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.fy-card { flex: 0 0 84%; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; min-height: 104px; border: 0; border-radius: 20px; padding: 16px; font: inherit; text-align: left; cursor: pointer; overflow: hidden; position: relative; transition: transform .2s var(--ease-out); }
.fy-card:active { transform: scale(.98); }
.fy-card .grow { min-width: 0; }
.fy-card small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 3px; }
.fy-card b { display: block; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; }
.fy-card .grow > span { display: block; font-size: .8rem; margin-top: 4px; opacity: .8; }
.fy-art { flex: none; width: 70px; height: 70px; display: grid; place-items: center; }
.fy-art .art-img { width: 70px; height: 70px; }
.fy-art.emoji { font-size: 2.6rem; }
.fy-art svg { width: 40px; height: 40px; }
.fy-offer { background: linear-gradient(135deg, #0F7A3E, #12A150); color: #fff; }
.fy-invite { background: linear-gradient(135deg, #111, #2A2418); color: #fff; }
.fy-invite b { color: #FFC400; }
.fy-parcel { background: linear-gradient(135deg, #FFF3C4, #FFE38A); color: var(--ink); }
.fy-air { background: linear-gradient(135deg, #E6F0FF, #C9DCFF); color: #0B2550; }

/* First-time entrance: items rise in one after another */
.home-in > * { animation: riseIn .6s var(--ease-ios) both; }
.home-in > *:nth-child(2) { animation-delay: .04s; } .home-in > *:nth-child(3) { animation-delay: .09s; }
.home-in > *:nth-child(4) { animation-delay: .14s; } .home-in > *:nth-child(5) { animation-delay: .19s; }
.home-in > *:nth-child(n+6) { animation-delay: .24s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.home .sched-card { margin-bottom: 10px; }

@media (max-height: 700px) {
  .where-go { min-height: 44px; font-size: 1.05rem; }
  .when-pill { height: 36px; }
  .quick { margin-top: 10px; }
  .svc-strip { margin-top: 10px; }
  .svc-t .tile { aspect-ratio: 1.2; border-radius: 16px; }
}
@media (min-width: 760px) {
  .sheet { will-change: auto; box-shadow: 0 10px 34px rgba(0,0,0,.12); }
  .quick, .svc-strip, .fy-rail { margin: 0 -18px; }
  .app::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .home-in > * { animation: none !important; } }
/* Below the fold fades in as the sheet is pulled up, so nothing peeks messily under the tab bar */
.home #forYou > *, .home #installHost > * { opacity: clamp(0, calc(var(--open) * 2 - .2), 1); transition: opacity .15s linear; }
.home #forYou > .section-label { transform: translateY(calc((1 - var(--open)) * 10px)); }
.app { --low: 0; }
.home .quick > *, .home .svc-strip > * { opacity: clamp(0, calc(1 - var(--low) * 1.6), 1); }
@media (min-width: 760px) {
  .home .quick > *, .home .svc-strip > *, .home #forYou > *, .home #installHost > * { opacity: 1; transform: none; }
  .app .topbar { opacity: 1; transform: none; }
}

/* =====================================================================
   Native-app frame: standard status bar, menu bar docked to the bottom
   edge (it fills the home-bar area, so there's no white strip), and the
   screen itself never scrolls, bounces or zooms. Only lists inside it scroll.
   ===================================================================== */
body[data-app="rider"], body[data-app="driver"] { position: fixed; inset: 0; overflow: hidden; touch-action: pan-x pan-y; }
html:has(body[data-app="rider"]), html:has(body[data-app="driver"]) { overflow: hidden; height: 100%; }
body[data-app="rider"] .app, body[data-app="driver"] .app { position: fixed; inset: 0; overflow: hidden; }
input, select, textarea { font-size: max(16px, 1em); }


/* Home: the sheet is a floating card that stops just above the floating pill,
   so the bottom of the screen is only the map and the pill (no white panel). */
.sheet-dock { position: absolute; inset: 0; z-index: 600; pointer-events: none; }
.sheet-dock > .sheet { pointer-events: auto; }
@media (max-width: 759px) {
  .sheet-dock.floating { bottom: var(--dock-b, 96px); clip-path: inset(-100vh 8px 0 8px round 0 0 30px 30px); }
  .sheet-dock.floating > .sheet { left: 8px; right: 8px; border-radius: 30px; max-height: calc(100% - 64px - env(safe-area-inset-top));
    box-shadow: 0 -6px 26px rgba(0,0,0,.10); border: .5px solid rgba(0,0,0,.06); }
}

/* Bottom safe area: no separate strip under the floating pill. A soft fade behind the pill
   runs to the very bottom edge (through env(safe-area-inset-bottom)) and ends in the same
   colour iOS/Android use for the area outside the app, so it all reads as one surface.
   The pill itself stays clear of the Home Indicator. */
.dock-edge { position: absolute; left: 0; right: 0; bottom: 0; z-index: 849; pointer-events: none;
  height: calc(max(8px, var(--sab) - 4px) + 36px);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--edge, #F8F5F0) 70%, transparent) 45%, var(--edge, #F8F5F0) 100%); }
.tabbar.hidden + .dock-edge { display: none; }
@media (min-width: 760px) { .dock-edge { display: none; } }


/* =====================================================================
   States, accessibility and production polish
   ===================================================================== */
/* Visible keyboard focus everywhere: dark ring + brand halo reads on white, yellow and the map. */
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255,196,0,.55); }
.btn:focus-visible, .q-chip:focus-visible, .svc-t:focus-visible, .lrow:focus-visible, .menu-item:focus-visible, .pay-item:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tabbar button { color: #6E6E73; }                 /* inactive tabs: 5:1 instead of 3.3:1 */
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Location: finding, couldn't find, and a pickup the rider set */
.loc-finding { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.loc-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; background: #FFF4E5; border: 1px solid #F5C77A; border-radius: 18px; padding: 14px; margin: 0 0 12px; }
.loc-card .ic { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #8A5200; }
.loc-card .grow b { display: block; font-size: .98rem; }
.loc-card .grow span { display: block; font-size: .84rem; color: #5A4A33; line-height: 1.4; margin-top: 2px; }
.loc-actions { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.loc-actions .btn { min-height: 40px; padding: 0 16px; }
.pick-set { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 10px 8px 10px 14px; margin: 0 0 10px; }
.pick-set small { display: block; font-size: .72rem; color: var(--ink-2); font-weight: 600; }
.pick-set b { display: block; font-size: .92rem; }
.pick-set .grow { min-width: 0; }

/* Generic error / empty box with a retry */
.state-box { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 16px; background: var(--surface); border-radius: 18px; margin: 10px 0; }
.state-box b { font-size: 1rem; }
.state-box span { font-size: .88rem; color: var(--ink-2); max-width: 34ch; }
.state-box .btn { margin-top: 8px; min-height: 42px; }

/* "Coming soon": Google sign-in and payments that aren't switched on yet */
.soon-badge { flex: none; margin-left: auto; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #5A4A00; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 3px 8px; }
.btn-google.is-soon { color: var(--ink-2); background: var(--surface); border-color: var(--surface-2); box-shadow: none; cursor: not-allowed; }
.btn-google.is-soon svg { filter: grayscale(1); opacity: .6; }
.btn-google.is-soon span:not(.soon-badge) { margin-right: auto; }
.pay-item.off { opacity: .7; cursor: default; }
.pay-item.off b { color: var(--ink-2); }

/* Offline / reconnecting banner, under the status bar */
#netBanner { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 10px); transform: translateX(-50%); z-index: 3000;
  max-width: calc(100% - 32px); background: #141414; color: #fff; font-size: .86rem; font-weight: 600; text-align: center;
  padding: 10px 16px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: netIn .3s var(--ease-out, ease) both; }
#netBanner.out { animation: fadeOut .25s ease both; }
@keyframes netIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Search error line sits tight under the inputs */
#sErr:empty { display: none; }
#sErr { margin: 4px 2px 0; }

@media (prefers-reduced-motion: reduce) {
  #netBanner, .loc-card, .sheet, .sheet-dock, .fy-card, .svc-t .tile { animation: none !important; transition: none !important; }
  .spin { animation-duration: 1.6s; }
}
@media (forced-colors: active) {
  .btn, .pay-item, .q-chip, .loc-card, .state-box { border: 1px solid CanvasText; }
}
.btn-google.is-soon { justify-content: flex-start; padding-left: 16px; padding-right: 12px; }
.btn-google.is-soon span:not(.soon-badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* =====================================================================
   SwiftUI / iOS 26 look (Apple HIG metrics)
   Tab bar: 62pt capsule, 21pt from the sides and bottom, 10pt semibold labels.
   Lists: inset grouped on systemGroupedBackground. Type: Apple's text styles.
   ===================================================================== */
:root {
  --ios-grouped: #F2F2F7;          /* systemGroupedBackground */
  --ios-cell: #FFFFFF;             /* secondarySystemGroupedBackground */
  --ios-sep: rgba(60,60,67,.18);   /* separator */
  --ios-label2: #6C6C70;           /* secondary label, AA on white and grey */
  --ios-radius: 22px;              /* iOS 26 inset-grouped corner */
}

/* ---- Tab bar ---- */
.tabbar {
  left: 21px; right: 21px; height: 62px; padding: 3px; gap: 0; align-items: stretch;
  bottom: max(12px, calc(var(--sab) - 13px));   /* 21pt above the edge on Face ID iPhones */
  border-radius: 999px;
}
.tabbar button { padding: 0; gap: 1px; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: .01em; border-radius: 999px; min-height: 0; }
.tabbar button svg.i, .tabbar svg.i { width: 24px; height: 24px; stroke-width: 1.9; }
.tabbar button[aria-current="page"] { background: rgba(120,120,128,.14); box-shadow: none; }
.tabbar button[aria-current="page"] svg { color: #8A6400; stroke-width: 2.2; }
@media (max-width: 359px) { .tabbar { left: 12px; right: 12px; } }
@media (min-width: 760px) { .tabbar { left: 50%; right: auto; width: 360px; transform: translateX(-50%); bottom: 21px; } }
.dock-edge { height: calc(max(12px, var(--sab) - 13px) + 31px); }

/* ---- Type: Apple text styles ---- */
.page-title { font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 1.12; margin: 6px 0 14px; }   /* Large Title */
.sheet h2, .modal h2, .drawer h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }                   /* Title 2 */
.page-head { justify-content: flex-start; min-height: 44px; }
.page-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }                                       /* Headline (nav title) */

/* ---- Grouped pages ---- */
.page.grouped { background: var(--ios-grouped); }
.page.grouped .profile-head { background: var(--ios-cell); border-radius: var(--ios-radius); padding: 16px; margin: 4px 0 22px; }

/* Inset grouped list rows (Settings style) */
.page.grouped .menu-item {
  background: var(--ios-cell); border: 0; border-radius: 0; margin: 0; padding: 11px 16px; min-height: 52px;
  font-size: 17px; font-weight: 400; letter-spacing: -.01em; position: relative; gap: 14px;
}
.page.grouped .menu-item .small, .page.grouped .menu-item .muted { font-size: 13px; color: var(--ios-label2); letter-spacing: 0; }
.page.grouped .menu-item .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #141414; }
.page.grouped .menu-item .ic svg { width: 18px; height: 18px; }
.page.grouped .menu-item > svg:last-child { color: #C4C4C7; }
.page.grouped .menu-item::after { content: ''; position: absolute; left: 60px; right: 0; bottom: 0; height: .5px; background: var(--ios-sep); }
/* first and last row of each group get the rounded corners; the last loses its separator */
.page.grouped .menu-item:not(.menu-item + .menu-item) { border-top-left-radius: var(--ios-radius); border-top-right-radius: var(--ios-radius); }
.page.grouped .menu-item:not(:has(+ .menu-item)), .page.grouped .menu-item:has(+ [data-a="out"]) { border-bottom-left-radius: var(--ios-radius); border-bottom-right-radius: var(--ios-radius); }
.page.grouped .menu-item:not(:has(+ .menu-item))::after, .page.grouped .menu-item:has(+ [data-a="out"])::after { display: none; }
/* Log out stands alone, like iOS "Sign Out" */
.page.grouped .menu-item[data-a="out"] { margin-top: 22px; border-radius: var(--ios-radius); justify-content: center; color: var(--stop); font-weight: 400; }
.page.grouped .menu-item[data-a="out"] .ic { display: none; }
.page.grouped .menu-item[data-a="out"] .grow { flex: none; }
.page.grouped .menu-item:active { background: #E5E5EA; transform: none; }

/* Payment methods as one grouped list with a checkmark for the default */
.page.grouped .pay-item { background: var(--ios-cell); border: 0; border-radius: 0; margin: 0; padding: 11px 16px; min-height: 60px; position: relative; }
.page.grouped .pay-item::after { content: ''; position: absolute; left: 66px; right: 0; bottom: 0; height: .5px; background: var(--ios-sep); }
.page.grouped .pay-item:not(.pay-item + .pay-item) { border-top-left-radius: var(--ios-radius); border-top-right-radius: var(--ios-radius); }
.page.grouped .pay-item:not(:has(+ .pay-item)) { border-bottom-left-radius: var(--ios-radius); border-bottom-right-radius: var(--ios-radius); }
.page.grouped .pay-item:not(:has(+ .pay-item))::after { display: none; }
.page.grouped .pay-item.on { background: var(--ios-cell); border: 0; }
.page.grouped .pay-item b { font-weight: 400; font-size: 17px; }
.page.grouped .pay-item .grow > span { font-size: 13px; color: var(--ios-label2); }
.page.grouped .default-badge { background: none; color: #8A6400; font-size: 0; padding: 0; }
.page.grouped .default-badge::before { content: '✓'; font-size: 20px; font-weight: 700; }
.page.grouped [role="radiogroup"] { margin-bottom: 18px; }

/* Activity & earnings cards sit on the grey like iOS cards */
.page.grouped .trip-card { background: var(--ios-cell); border: 0; border-radius: var(--ios-radius); padding: 12px 16px; }
.page.grouped .seg-tabs { background: rgba(118,118,128,.12); }
.page.grouped .state-box { background: var(--ios-cell); }
.page.grouped .btn-outline { background: var(--ios-cell); border-color: transparent; }

/* Section footers / small print */
.page.grouped > .page-inner > p.small.muted, .page.grouped [data-body] > p.small.muted { padding: 0 16px; font-size: 13px; color: var(--ios-label2); }

/* Quick open (not the first launch of the day): fade straight out, no long logo animation */
.splash.quick, .splash.quick * { animation-duration: .25s !important; animation-delay: 0s !important; }
.splash.quick.out { transition-duration: .28s !important; filter: none; transform: none; }

/* =====================================================================
   Apple HIG pass (iOS 26): Liquid Glass, motion, sheets, buttons, type
   - Liquid Glass only on the navigation/control layer that floats over
     content (tab bar, map buttons and chips, nav back button, banners).
     Content (lists, cards, the home sheet) stays solid.
   - Glass has no colour of its own; only the selected tab and the one
     primary action carry the accent.
   - Springs instead of curves; crossfades when Reduce Motion is on;
     solid surfaces with Reduce Transparency; stronger edges and text
     with Increase Contrast.
   ===================================================================== */
:root {
  /* Apple system colours (light) */
  --sys-red: #FF383C; --sys-orange: #FF8D28; --sys-yellow: #FFCC00; --sys-green: #34C759; --sys-blue: #0088FF;
  --label: #000000; --label-2: rgba(60,60,67,.6); --label-3: rgba(60,60,67,.3);
  --fill: rgba(120,120,128,.2); --fill-2: rgba(120,120,128,.16); --fill-3: rgba(118,118,128,.12);
  --accent-ink: #8A6400;           /* the brand yellow as a tint that reads on white and glass (5.2:1) */
  /* Springs: smooth (no bounce) for navigation and sheets, a little bounce for the glass lens */
  --spring: linear(0, .04, .131, .243, .358, .466, .562, .645, .715, .774, .821, .859, .89, .914, .934, .949, .96, .97, .977, .982, .986, .99, .992, .994, 1);
  --spring-bounce: linear(0, .057, .188, .346, .503, .642, .758, .847, .913, .959, .989, 1.007, 1.016, 1.02, 1.02, 1.017, 1.014, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1);
  /* Liquid Glass, regular variant */
  --lg-fill: rgba(255,255,255,.5);
  --lg-blur: blur(14px) saturate(190%) brightness(1.04);
  --lg-light: inset 0 0 0 .5px rgba(255,255,255,.65), inset 1.5px 1.5px 1px -1px rgba(255,255,255,.95), inset -1px -1px 1px -1px rgba(255,255,255,.6), inset 0 0 14px rgba(255,255,255,.22);
  --lg-lift: 0 8px 26px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.07);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.32,.72,0,1); --spring-bounce: cubic-bezier(.34,1.3,.64,1); }
}

/* ---- Type: iOS text styles at the default size ---- */
body { font-size: 17px; line-height: 1.3; letter-spacing: -.022em; }        /* Body 17/22 */
.btn { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }        /* button label = Headline */
.btn-sm { font-size: 15px; }                                                /* Subhead */
input, select, textarea { font-size: 17px; letter-spacing: -.02em; }
label { font-size: 15px; }                                                  /* Subhead */
.small, small { letter-spacing: -.005em; }

/* ---- Liquid Glass: navigation and controls only ---- */
.tabbar, .hello-chip, .fab, .pill-chip, .drv-head, .glass-back, .trip-banner, .nav-back-btn {
  background: var(--lg-fill); color: var(--label);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-light), var(--lg-lift); border: 0;
}
.tabbar::before, .hello-chip::before, .drv-head::before, .trip-banner::before { display: none; }
.fab:hover { background: rgba(255,255,255,.62); }
/* Interactive glass: it swells a little and brightens under the finger, then springs back */
.fab, .hello-chip, .pill-chip, .glass-back, .nav-back-btn, .trip-banner .round { transition: transform .45s var(--spring-bounce), background .2s; }
.fab:active, .hello-chip:active, .pill-chip:active, .glass-back:active, .nav-back-btn:active { transform: scale(1.08); background: rgba(255,255,255,.72); }
/* Status banner over the map: light glass with ordinary label colours, not a tinted slab */
.trip-banner { border-radius: 26px; }
.trip-banner b { color: var(--label); }
.trip-banner small { color: var(--label-2); }
.trip-banner .round { background: var(--fill-2); color: var(--label); }
.glass-back { color: #fff; background: rgba(255,255,255,.18); }   /* over the dark photo header */

/* ---- Tab bar: monochrome symbols, a glass lens that slides to the selected tab ---- */
.tabbar { --i: 0; --n: 4; position: absolute; }
.tabbar::after { content: ''; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 999px;
  background: var(--fill-2); transform: translateX(calc(var(--i) * 100%)); transition: transform .55s var(--spring-bounce); pointer-events: none; }
.tabbar button { position: relative; z-index: 1; color: rgba(0,0,0,.82); transition: color .2s, transform .45s var(--spring-bounce); }
.tabbar button[aria-current="page"] { background: transparent; color: var(--accent-ink); }
.tabbar button[aria-current="page"] svg { color: var(--accent-ink); fill: currentColor; fill-opacity: .2; stroke-width: 2.1; }
.tabbar button:active { transform: scale(1.1); }

/* ---- Navigation bar: circular glass Back (no text), large title that collapses into the bar ---- */
.page-head [data-x], .page-head [data-back] { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex: none;
  background: var(--lg-fill); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-light), 0 2px 10px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.06);
  transition: transform .45s var(--spring-bounce); }
.page-head [data-x]:active, .page-head [data-back]:active { transform: scale(1.08); }
.page-head [data-x] svg, .page-head [data-back] svg { width: 22px; height: 22px; stroke-width: 2.4; }
/* Sub-pages: inline title hidden until the large title scrolls under the bar */
.page.nav-large > .page-inner > .page-head { position: sticky; top: calc(-10px - env(safe-area-inset-top)); z-index: 6; margin: calc(-10px - env(safe-area-inset-top)) -18px 0; padding: calc(10px + env(safe-area-inset-top)) 14px 6px; min-height: 0; }
.page.nav-large > .page-inner > .page-head h2 { position: absolute; left: 70px; right: 70px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .35s var(--spring); }
.page.nav-large.scrolled > .page-inner > .page-head h2 { opacity: 1; transform: none; }
.page.nav-large .page-title { margin-top: 2px; transition: opacity .2s; }
.page.nav-large.scrolled .page-title { opacity: 0; }
/* Tab pages: a bar with the inline title appears once the large title scrolls away */
.nav-bar { position: sticky; top: calc(-10px - env(safe-area-inset-top)); z-index: 6; height: 0; margin: calc(-10px - env(safe-area-inset-top)) -18px 0; pointer-events: none; }
.nav-bar > span { position: absolute; left: 0; right: 0; top: 0; height: calc(54px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  display: grid; place-items: center; font-size: 17px; font-weight: 600; letter-spacing: -.022em; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .35s var(--spring); }
.page.scrolled > .nav-bar > span { opacity: 1; transform: none; }
/* Scroll edge effect: content softly blurs and fades under the bar instead of a hard line */
.page-head::before, .nav-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(70px + env(safe-area-inset-top)); z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: linear-gradient(180deg, var(--edge-bg, #fff) 0%, color-mix(in srgb, var(--edge-bg, #fff) 82%, transparent) 55%, transparent 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.page.edge .page-head::before, .page.edge > .nav-bar::before { opacity: 1; }
.page.grouped { --edge-bg: var(--ios-grouped); }

/* ---- Sheets (modals): float inset with concentric corners on phones, glass, swipe down to dismiss ---- */
@media (max-width: 759px) {
  .modal { margin: auto 8px max(8px, calc(var(--sab) - 14px)); width: auto; border-radius: 34px; padding-bottom: 22px; max-height: calc(100% - 16px - env(safe-area-inset-top)); }
}
.modal { background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 20px 60px rgba(0,0,0,.18); overscroll-behavior: contain; }
.modal::before { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 0 auto 14px; }
.overlay { background: rgba(0,0,0,.2); }
.overlay .modal { animation: modalUp .55s var(--spring); }
.modal.dragging { transition: none !important; }
.overlay.closing .modal.dragged { animation: none; }
.sheet .grabber { background: var(--label-3); width: 36px; height: 5px; cursor: pointer; }

/* ---- Buttons: filled capsules without coloured glows; one prominent action per view ---- */
.btn-primary, .btn-brand, .btn-gold, .btn-danger, .btn-go, .onboard.hero .btn-primary { box-shadow: none; }
.btn { transition: transform .35s var(--spring-bounce), filter .15s, background .2s, opacity .2s; }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.96); filter: brightness(.94); }
.btn-ghost:active, .btn-outline:active { background: var(--fill-3); }
/* 44pt hit area for small buttons without making them look bigger */
.btn-sm { position: relative; }
.btn-sm::after { content: ''; position: absolute; inset: -4px -2px; }
.btn .spin { margin-right: 8px; vertical-align: -2px; }

/* ---- Motion: springs everywhere ---- */
.push-in { animation: pushIn .55s var(--spring) both; }
.push-out { animation: pushOut .35s var(--spring) both; }
.nav-fwd { animation: navFwd .5s var(--spring) both; }
.nav-back { animation: navBack .5s var(--spring) both; }
.sheet-enter { animation: sheetRise .55s var(--spring); }

/* Reduce Motion: no sliding or zooming, short crossfades instead */
@media (prefers-reduced-motion: reduce) {
  .push-in, .nav-fwd, .nav-back, .tab-in, .sheet-enter, .overlay .modal { animation: fadeIn .2s ease both !important; }
  .push-out, .overlay.closing, .overlay.closing .modal { animation: fadeOut .2s ease both !important; }
  .tabbar::after, .tabbar button, .btn, .fab, .hello-chip, .pill-chip, .glass-back, .nav-back-btn, .page-head [data-x], .nav-bar > span, .page-head h2 { transition: opacity .2s !important; transform: none !important; }
}

/* Reduce Transparency: glass becomes a solid, slightly grey surface */
@media (prefers-reduced-transparency: reduce) {
  .tabbar, .hello-chip, .fab, .pill-chip, .drv-head, .trip-banner, .nav-back-btn, .page-head [data-x], .page-head [data-back], .modal, #toast {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .tabbar, .hello-chip, .fab, .pill-chip, .drv-head, .trip-banner, .page-head [data-x], .page-head [data-back], .modal { background: #F9F9FB !important; }
  .glass-back { background: rgba(20,20,22,.7) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-head::before, .nav-bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--edge-bg, #fff); -webkit-mask-image: none; mask-image: none; }
}

/* Increase Contrast: firmer edges, darker secondary text, opaque glass */
@media (prefers-contrast: more) {
  :root { --label-2: rgba(60,60,67,.85); --ink-2: #3A3A3F; --ink-3: #48484D; --ios-label2: #3A3A3F; --ios-sep: rgba(60,60,67,.45); --accent-ink: #6B4D00; --fill-2: rgba(120,120,128,.3); }
  .tabbar, .hello-chip, .fab, .pill-chip, .drv-head, .trip-banner, .page-head [data-x], .page-head [data-back], .modal { background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.12); }
  .tabbar button { color: #000; }
  .btn-outline { border-color: #6C6C70; }
}

/* No backdrop blur at all (old browsers): solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar, .hello-chip, .fab, .pill-chip, .drv-head, .trip-banner, .page-head [data-x], .page-head [data-back], .modal { background: #F9F9FB; }
}

/* Hairline separators that always render (1 device pixel on 2x/3x screens) */
.page.grouped .menu-item::after, .page.grouped .pay-item::after { height: 1px; transform: scaleY(.5); transform-origin: 0 100%; }
/* Payment option titles are primary labels; only the line under them is secondary */
.pay-item > .grow { color: var(--ink); font-size: inherit; }
.pay-item > .grow > span { color: var(--ink-2); }

/* Plain lists (search results): iOS separators start at the text, rows highlight while pressed */
.lrow { position: relative; border-radius: 12px; }
.lrow + .lrow { border-top: 0; }
.lrow + .lrow::before { content: ''; position: absolute; left: 54px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: 0 0; background: var(--ios-sep); }
.lrow:hover { background: transparent; }
.lrow:active { background: var(--fill-3); transform: none; }
@media (hover: hover) { .lrow:hover { background: var(--fill-3); } }

/* Phone sheets span the width between their 8pt insets */
@media (max-width: 759px) { .overlay > .modal { width: calc(100% - 16px); max-width: none; } }


/* Vehicle illustrations: calm neutral tiles; the art carries its own soft ground shadow */
.art-img { filter: none; }
.slide .art .art-img { filter: none; }
.svc-t .tile { background: #F2F2F4; }
.svc-t[data-svc="parcel"] .tile { background: #F4EFE7; }
.svc-t .tile .art-img { width: 86%; height: 86%; }
.fy-parcel { background: linear-gradient(135deg, #F6F1E9, #ECE2D2); color: var(--ink); }
.fy-air { background: linear-gradient(135deg, #F1F3F6, #E2E6EC); color: var(--ink); }
.fy-art .art-img { width: 86px; height: 70px; }

/* Sticky sheet footer: a short fade, then the sheet's own solid colour, so rows scrolling
   underneath never show through the price note or the Request button. */
.sheet-foot::before { background: linear-gradient(180deg, rgba(253,252,251,0) 0, #FDFCFB 8px); }

/* Launch screen: white, like Apple's own apps in light mode. iOS picks the status-bar colour from
   the top of the screen when the app opens, so a white launch keeps that strip white from the start. */
.splash { background: #FFFFFF; color: var(--ink); }
.splash .wm { color: var(--ink); }
.splash .wm-t { color: #141414; }
.splash .wm-sub { color: var(--accent-ink, #8A6400); }
.splash .wm-tag { color: #6C6C70; }
.splash .wm-tag i { color: var(--brand); }
.splash .wm-k { filter: drop-shadow(0 4px 14px rgba(255,180,0,.25)); }
.splash-glow { background: radial-gradient(circle, rgba(255,196,0,.14), rgba(255,196,0,0) 62%); }

/* =====================================================================
   Launch screen v2: calm and premium, no blur or zoom.
   White at the top (iOS takes the status-bar colour from there), easing into
   a faint warm ivory; the K in a dark app-icon tile; name and tagline in
   Apple-style type; a thin gold loading line near the bottom.
   ===================================================================== */
.splash { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #FBF8F2 100%); color: var(--ink);
  transition: opacity .35s ease, visibility .35s; }
.splash.out { opacity: 0; transform: none; filter: none; visibility: hidden; }
.sp-center { display: flex; flex-direction: column; align-items: center; margin-top: -6vh; }
.sp-icon { width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(160deg, #2A2B2F 0%, #141416 55%, #0B0B0C 100%);
  box-shadow: 0 14px 34px rgba(20,20,22,.18), 0 2px 6px rgba(20,20,22,.12), inset 0 1px 0 rgba(255,255,255,.08);
  animation: spIn .7s var(--spring, cubic-bezier(.32,.72,0,1)) both; }
.sp-icon svg { width: 58px; height: 42px; margin-left: 4px; }
.sp-name { margin-top: 22px; font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: #141414; line-height: 1.1;
  animation: spIn .7s var(--spring, cubic-bezier(.32,.72,0,1)) .12s both; }
.sp-name span { margin-left: 8px; font-weight: 600; color: var(--accent-ink, #8A6400); }
.sp-tag { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8E8E93;
  animation: spIn .7s var(--spring, cubic-bezier(.32,.72,0,1)) .22s both; }
.sp-load { position: absolute; left: 50%; bottom: calc(56px + var(--sab)); width: 44px; height: 3px; margin-left: -22px; border-radius: 3px;
  background: rgba(120,120,128,.16); overflow: hidden; animation: fadeIn .4s ease .5s both; }
.sp-load i { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: var(--brand); animation: spLoad 1.1s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes spIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spLoad { from { left: -40%; } to { left: 100%; } }
.splash.quick .sp-load { display: none; }
@media (prefers-reduced-motion: reduce) { .sp-icon, .sp-name, .sp-tag { animation: fadeIn .2s ease both !important; } .sp-load i { animation-duration: 2s; } }

/* Signed-out launch: dark, to match the welcome and sign-in screens that follow */
html.launch-dark .splash { background: radial-gradient(120% 70% at 50% 40%, #182235 0%, #0B111C 55%, #05070B 100%); }
html.launch-dark .sp-icon { background: linear-gradient(160deg, #24262B, #111215); box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
html.launch-dark .sp-name { color: #FFFFFF; }
html.launch-dark .sp-name span { color: var(--brand); }
html.launch-dark .sp-tag { color: #A1A1A8; }
html.launch-dark .sp-load { background: rgba(255,255,255,.14); }

/* Flytte wordmark: the F's top bar reaches right, so the letters sit just clear of it */
.wm-k { margin-right: .02em; }

/* =====================================================================
   Driver tools: ride alerts, commission owed, documents, heading home,
   bonuses, request card, next trip, waiting time, earnings breakdown.
   ===================================================================== */
.tool-card { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; margin: 0 0 10px; background: var(--fill-3, #F2F2F4); }
.tool-card .ic { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.tool-card .ic svg { width: 18px; height: 18px; }
.tool-card .grow { min-width: 0; }
.tool-card b { display: block; font-size: 15px; line-height: 1.25; }
.tool-card .grow > span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.tool-card .btn { flex: none; min-height: 36px; }
.tool-card.info { background: #EAF2FF; } .tool-card.info .ic { color: #0A5BD3; }
.tool-card.warn { background: #FFF4E5; } .tool-card.warn .ic { color: #8A5200; }
.tool-card.bad { background: #FDECEC; } .tool-card.bad .ic { color: var(--stop); }
.tool-card.home.on { background: #E8F6EE; } .tool-card.home.on .ic { color: var(--go); }
.bonus { background: linear-gradient(135deg, #1C1C1E, #2B2410); color: #fff; border-radius: 18px; padding: 14px 16px; margin: 0 0 10px; }
.bonus-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bonus-top b { font-size: 15px; } .bonus-top span { color: var(--brand); font-weight: 700; font-size: 15px; white-space: nowrap; }
.bonus-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); margin: 10px 0 6px; overflow: hidden; }
.bonus-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .6s var(--spring, ease); }
.bonus .tiny.muted { color: #C9C9CF; }
.bonus.paid .bonus-top span { color: #7EE2A0; }
.btn-dark { background: #141414; color: #fff; }

/* Request card */
.route-sketch { display: block; width: 100%; height: 92px; background: #F5F5F7; border-radius: 14px; margin: 0 0 12px; }
.next-note { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #6B4D00; background: var(--brand-soft); border-radius: 10px; padding: 7px 10px; margin: 0 0 10px; }
.next-note svg { width: 14px; height: 14px; }
.est-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.est-side { display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 0; align-items: baseline; text-align: right; }
.req .est .est-side b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.req .est .est-side small { font-size: 12px; text-align: left; display: inline; }

/* Active trip */
.next-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--brand-soft); color: #4A3500; border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; }
.next-chip svg { width: 15px; height: 15px; flex: none; }
.wait-box { display: flex; align-items: center; gap: 12px; background: #F2F2F4; border-radius: 16px; padding: 10px 12px 10px 14px; margin: 0 0 10px; }
.wait-box b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.wait-box .grow > span { display: block; font-size: 13px; color: var(--ink-2); }
.wait-box.over { background: #FFF4E5; }
.wait-box .btn { flex: none; min-height: 38px; }
.wait-ring { --p: 0; width: 30px; height: 30px; border-radius: 50%; flex: none; background: conic-gradient(var(--brand) calc(var(--p) * 360deg), rgba(120,120,128,.2) 0); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); }

/* Earnings breakdown */
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.sum-grid > div { background: var(--ios-cell, #fff); border-radius: 14px; padding: 10px 12px; }
.sum-grid span { display: block; font-size: 12px; color: var(--ink-2); }
.sum-grid b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sum-grid .wide { grid-column: 1 / -1; background: #141414; color: #fff; }
.sum-grid .wide span { color: #C9C9CF; } .sum-grid .wide b { font-size: 22px; color: var(--brand); }
.trip-line { background: var(--ios-cell, #fff); border-radius: 14px; padding: 10px 12px; margin: 0 0 8px; }
.tl-top { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.tl-top b:first-child { min-width: 0; font-weight: 600; }
.tl-top b:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-sub { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.stats-card { margin: 0 0 18px; background: var(--ios-cell, #fff); border: 0; border-radius: 22px; }

/* Documents */
.doc-row { background: var(--ios-cell, #fff); border-radius: 18px; padding: 12px 14px; margin: 0 0 10px; }
.doc-row.warn { box-shadow: inset 0 0 0 1.5px #F5C77A; } .doc-row.bad { box-shadow: inset 0 0 0 1.5px #F0A3A0; }
.dr-top { display: flex; align-items: center; gap: 10px; }
.dr-top b { display: block; font-size: 16px; } .dr-top .small { display: block; }
.dr-top label.btn { flex: none; cursor: pointer; min-height: 36px; }
.dr-exp { margin-top: 10px; } .dr-exp label { margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.dr-exp input { min-height: 40px; }

/* Statement (prints as a clean page) */
.statement .st-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 2px solid #141414; margin-bottom: 10px; }
.statement .st-head span { display: block; font-size: 13px; color: var(--ink-2); }
.statement .st-brand { font-size: 20px; letter-spacing: -.02em; }
.statement .st-right { text-align: right; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.st-table th, .st-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid #E5E5EA; vertical-align: top; }
.st-table th { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.st-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table small { color: var(--ink-2); }
.st-table tfoot td { font-weight: 700; border-top: 2px solid #141414; border-bottom: 0; }
@media print {
  body * { visibility: hidden; }
  .statement, .statement * { visibility: visible; }
  .statement { position: absolute; inset: 0; padding: 0 !important; background: #fff; overflow: visible; }
  .statement .no-print, .sb-scrim, .tabbar, .dock-edge { display: none !important; }
}
.wait-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #6B4D00; background: var(--brand-soft); border-radius: 12px; padding: 8px 12px; margin: 10px 0 0; }
.wait-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* =====================================================================
   Live camera, photo/plate review, rider reports
   ===================================================================== */
.cam { position: fixed; inset: 0; z-index: 4000; background: #000; color: #fff; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 calc(14px + var(--sab)); }
.cam-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 8px 12px; text-align: center; }
.cam-top b { font-size: 17px; font-weight: 600; }
.cam-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cam-view { position: relative; flex: 1; min-height: 0; margin: 4px 12px; border-radius: 24px; overflow: hidden; background: #111; }
.cam-view video, .cam-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-view .mirror { transform: scaleX(-1); }
.cam-guide { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 200vmax rgba(0,0,0,.45); }
.cam-guide.face { width: 62%; aspect-ratio: 3 / 4; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); }
.cam-guide.plate { width: 86%; aspect-ratio: 4 / 3; border-radius: 18px; border: 3px solid rgba(255,255,255,.9); }
.cam-view img:not([hidden]) ~ .cam-guide { display: none; }
.cam-msg { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); text-align: center; font-size: 15px; line-height: 1.4; margin: 0; }
.cam-hint { text-align: center; font-size: 14px; color: #D1D1D6; margin: 10px 24px 6px; min-height: 1.4em; }
.cam-bar { display: grid; place-items: center; min-height: 96px; }
.cam-shot { width: 76px; height: 76px; border-radius: 50%; border: 5px solid #fff; background: #fff; box-shadow: inset 0 0 0 4px #000; cursor: pointer; transition: transform .2s var(--spring-bounce, ease); }
.cam-shot:active { transform: scale(.92); }
.cam-shot:disabled { opacity: .4; }
.cam-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: calc(100% - 32px); }
.cam-after:not([hidden]) { display: grid; }
.cam-retake { background: rgba(255,255,255,.16); color: #fff; }

.photo-btn { position: relative; border: 0; padding: 0; cursor: pointer; font: inherit; overflow: visible; }
.photo-btn img { border-radius: 50%; }
.cam-badge { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #141414; color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.cam-badge svg { width: 14px; height: 14px; }
.review-note { display: flex; gap: 10px; align-items: center; border-radius: 16px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.review-note b { display: block; font-size: 14px; }
.review-note img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.review-note svg { width: 18px; height: 18px; flex: none; }
.review-note.pending { background: #FFF4E5; color: #5A4A33; }
.review-note.rejected { background: #FDECEC; color: #7A1C17; }
.review-note.ok { background: #E8F6EE; color: #0B5A2C; }
.veh-shot { display: grid; place-items: center; width: 100%; min-height: 132px; border: 1.5px dashed #C7C7CC; border-radius: 16px; background: #F7F7F9; cursor: pointer; padding: 10px; font: inherit; color: var(--ink); text-align: center; }
.veh-shot span { display: grid; justify-items: center; gap: 4px; }
.veh-shot svg { width: 26px; height: 26px; }
.veh-shot small { color: var(--ink-2); font-size: 13px; }
.veh-shot.has { border-style: solid; padding: 6px; }
.veh-shot.has img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; }

.link-report { display: block; background: none; border: 0; padding: 8px 0; margin: 6px 0 0; color: var(--stop); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; }
.modal .lrow .tick { visibility: hidden; color: var(--stop); }
.modal .lrow.on { background: #FDECEC; }
.modal .lrow.on .tick { visibility: visible; }
.modal textarea { width: 100%; border-radius: 14px; border: 1px solid #E5E5EA; padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; }

/* Admin checks */
.check-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin: 12px 0; max-width: 980px; }
.cc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.doc-thumbs.four { grid-template-columns: repeat(4, 1fr); }
.doc-thumbs .noimg { height: 150px; display: grid; place-items: center; color: var(--ink-3); font-size: .9rem; }
.veh-compare { display: flex; align-items: center; gap: 18px; margin: 0 0 12px; }
.veh-compare figure { margin: 0; background: var(--surface); border-radius: 12px; overflow: hidden; }
.veh-compare figure img { width: 100%; height: 180px; object-fit: cover; display: block; }
.veh-compare figcaption { padding: 8px 10px; font-size: .8rem; font-weight: 600; }
.veh-compare .arrow { font-size: 1.6rem; color: var(--ink-3); }
tr.faded td { opacity: .55; }
@media (max-width: 760px) { .doc-thumbs.four { grid-template-columns: 1fr 1fr; } }
.modal .lrow .grow { display: flex; flex-direction: column; text-align: left; }
/* After the shot: the face is shown round, exactly as riders will see it */
.cam.taken .cam-guide { display: none; }
.cam-round { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: #111; }
.cam-round[hidden] { display: none; }
.cam-round img { position: static; width: min(64vw, 260px); height: min(64vw, 260px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff; }
.cam-round span { font-size: 15px; color: #E5E5EA; }
.modal.wide-modal { max-width: 860px; }
/* Photo & vehicle page */
.id-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--ios-cell, #fff); border-radius: 22px; padding: 20px 16px; margin: 0 0 14px; }
.id-card > b { font-size: 17px; }
.id-photo { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--brand-soft); font-weight: 800; font-size: 2rem; }
.id-photo img { width: 100%; height: 100%; object-fit: cover; }
.id-veh { width: 120px; height: 80px; }
.plate-chip.big { font-size: 1.05rem; padding: 4px 12px; }
.id-card .review-note { width: 100%; text-align: left; margin: 2px 0; }
.id-card .btn { margin-top: 4px; }

/* ---------- Test build: the installed app under the clock (/beta, /driver-beta) ----------
   iOS 26 makes the app's view one status bar shorter than the screen in this mode, so the bottom
   menu stops short. The page is made exactly as tall as the screen, which makes iOS give the app the
   full height (min() keeps it from scrolling on iOS versions without the bug). */
html.under-clock.standalone, html.under-clock.standalone body { height: auto; min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
.sb-scrim { position: fixed; left: 0; right: 0; top: 0; z-index: 2500; pointer-events: none;
  height: calc(env(safe-area-inset-top) + 22px); transition: opacity .3s;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.06) 80%, rgba(0,0,0,0) 100%); }
html.top-dark .sb-scrim { opacity: 0; }
@media (prefers-contrast: more) { .sb-scrim { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,0) 100%); } }

/* ---------- Phone-first sign in ---------- */
.phone-first .phone-field { margin-top: 18px; }
.phone-first .phone-field input, .phone-first .phone-field .cc { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.phone-first .phone-field input::placeholder { font-weight: 500; }
.phone-first > .btn-lg { margin-top: 16px; }
.phone-first .fine { text-align: center; margin-top: 16px; line-height: 1.45; }
.phone-chip { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; padding: 12px 14px; border-radius: 14px;
  background: var(--fill, #F2F2F7); font-weight: 600; }
.phone-chip .flag { font-size: 20px; line-height: 1; }
.phone-chip .num { flex: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.phone-chip .link-btn { font-weight: 600; }

/* SMS code: one real input (so iPhone/Android autofill the code) drawn as six boxes */
.otp-wrap { position: relative; margin: 18px 0 4px; }
.otp-wrap input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; border: 0; z-index: 1; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp-boxes i { height: 58px; border-radius: 14px; background: var(--fill, #F2F2F7); display: grid; place-items: center; font: 700 24px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); border: 1.5px solid transparent; transition: border-color .15s, box-shadow .15s; }
.otp-boxes i.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,196,0,.25); }
.code-step > .btn-lg { margin-top: 16px; }
.code-step .link-btn[disabled] { color: var(--ink-3, #8E8E93); font-weight: 500; cursor: default; }
.phone-field input:focus, .phone-field input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }

/* Country picker inside the phone box: the real <select> sits invisibly over the flag and code */
.phone-field .cc { position: relative; cursor: pointer; margin: 0; }
.phone-field .cc-show { pointer-events: none; display: inline-flex; align-items: center; gap: 6px; }
.phone-field .cc-show::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .5; }
.phone-field .cc-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; padding: 0; -webkit-appearance: none; appearance: none; }

/* Sign-in code: WhatsApp or SMS */
.ch-sheet h2 { margin: 0 0 4px; font-size: 1.3rem; letter-spacing: -.02em; }
.ch-sheet .muted { margin: 0 0 16px; }
.ch-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; margin-top: 10px; border-radius: 16px; border: 1px solid #ECECF0; background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, background .15s; }
.ch-opt:active { transform: scale(.98); background: #F7F7F9; }
.ch-opt .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ch-opt b { font-size: 1.02rem; } .ch-opt small { color: var(--ink-2); font-size: .84rem; }
.ch-opt > .i { width: 18px; height: 18px; color: var(--ink-2); }
.ch-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.ch-ic svg { width: 24px; height: 24px; }
.ch-wa .ch-ic { background: #25D366; color: #fff; }
.ch-sms .ch-ic { background: #F2F2F5; color: var(--ink); }

/* ---------- Signed-out launch: the photo splash that settles into the sign-in page ----------
   The launch screen shows the sign-in photo full screen with the wordmark in the middle. When the
   sign-in page is ready underneath (in the same "intro" pose), the splash steps aside and the page
   settles: photo shrinks to its header, the wordmark glides up, the white card slides in. */
.sp-photo, .sp-mark { display: none; }
html.launch-dark .splash { background: #07090E; }
html.launch-dark .splash .sp-center, html.launch-dark .splash .sp-load { display: none; }
html.launch-dark .sp-photo { display: block; position: absolute; inset: 0; overflow: hidden;
  background: #07090E url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAXABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDl9IgkeYQ3ioYiM72I4qxCLKW5SE4BaUoCpyAOxNVYbW+MHlyRbFAOWxgisyQssjjzNwTBOBg+1Zxq3uos1dNJJtHoVjptms6wm4jfIz14orAtYna0WVblTMU3EUVySU5PSZ1JpLYw31ZjkLGOe7Esf1rOVhuLNyfSiiu5QjHY4XJvc27G6PlmPoCoXPoKKKKwqNqWh0w1Wp//2Q==") 50% 42% / cover no-repeat; }
html.launch-dark .sp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.02); animation: spZoom 1.1s cubic-bezier(.33,0,.2,1) both; }
@keyframes spZoom { from { transform: scale(1.06); } to { transform: scale(1.02); } }

html.launch-dark .sp-photo .auth-shade, .auth2.intro .auth-shade { background: linear-gradient(180deg, rgba(4,8,16,.62) 0%, rgba(4,8,16,.38) 45%, rgba(4,8,16,.7) 100%); }
html.launch-dark .sp-mark { display: grid; place-items: center; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 56px; color: #fff; }
html.launch-dark .sp-mark .wm-tag { font-size: .2em; }
html.launch-dark .splash.out { transform: none; filter: none; transition: opacity .22s linear, visibility .22s; }
/* the sign-in page's photo shows its blurred preview until the sharp photo arrives */
.auth-hero { background: #07090E url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAXABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDl9IgkeYQ3ioYiM72I4qxCLKW5SE4BaUoCpyAOxNVYbW+MHlyRbFAOWxgisyQssjjzNwTBOBg+1Zxq3uos1dNJJtHoVjptms6wm4jfIz14orAtYna0WVblTMU3EUVySU5PSZ1JpLYw31ZjkLGOe7Esf1rOVhuLNyfSiiu5QjHY4XJvc27G6PlmPoCoXPoKKKKwqNqWh0w1Wp//2Q==") 50% 42% / cover no-repeat; }

.auth2.intro { height: 100vh; height: 100dvh; overflow: hidden; }
.auth2.intro .auth-hero { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
.auth2.intro .auth-hero img { animation: none; transform: scale(1.02); }
.auth2.intro .auth-logo { top: 50%; transform: translateY(-50%) scale(1.217); }
.auth2.intro .auth-card { margin-top: 0; }
.auth2.settle .auth-card { transition: margin-top 1.15s cubic-bezier(.65,0,.35,1); }
.auth2.intro .auth-body > *, .auth2.intro .glass-back { opacity: 0; transform: translateY(16px); }
.auth2.settle .auth-hero { transition: height 1.15s cubic-bezier(.65,0,.35,1), max-height 1.15s cubic-bezier(.65,0,.35,1); will-change: height; }
.auth2.settle .auth-shade { transition: background 1.15s ease; }
.auth2.settle .auth-logo { transition: top 1.15s cubic-bezier(.65,0,.35,1), transform 1.15s cubic-bezier(.65,0,.35,1); will-change: top, transform; }

.auth2.settle .auth-body > *, .auth2.settle .glass-back { transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); transition-delay: calc(.62s + var(--i, 0) * .07s); }
@media (max-height: 720px) { .auth2.intro .auth-logo { transform: translateY(-50%) scale(1.474); } }
@media (prefers-reduced-motion: reduce) {
  html.launch-dark .sp-photo img, html.launch-dark .sp-mark .wm { animation: none; }
  .auth2.settle .auth-hero, .auth2.settle .auth-logo, .auth2.settle .auth-card, .auth2.settle .auth-shade { transition: none; }
  .auth2.settle .auth-body > *, .auth2.settle .glass-back { transition: opacity .25s ease; transition-delay: 0s; transform: none; }
}
/* the splash wordmark looks exactly like the sign-in one (white on the photo) and simply fades in */
html.launch-dark .sp-mark .wm { color: #fff; }
@keyframes spMarkIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
html.launch-dark .sp-mark .wm-t { color: #fff; }
html.launch-dark .sp-mark .wm-sub { color: var(--brand); }
html.launch-dark .sp-mark .wm-tag { color: #E9E9EE; }
html.launch-dark .sp-mark .wm-k { filter: none; }
html.launch-dark .sp-mark .wm *, html.launch-dark .sp-mark .wm-k * { animation: none !important; }

.ch-tg .ch-ic { background: #2AABEE; color: #fff; }
.ch-switch { line-height: 1.6; }
.ch-switch .link-btn { white-space: nowrap; }

.auth2.settle .auth-hero img { animation: none; transition: transform 1.15s cubic-bezier(.65,0,.35,1); }
.auth-body .fine.legal { margin-top: 8px; font-size: .78rem; color: var(--ink-3, #8E8E93); line-height: 1.45; }
.auth-body .fine.legal a { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Tab switch: the new page is solid from its first frame (nothing behind it shows through);
   only its content settles in, like iPhone tab bars. The old page is removed after it's in place. */
.tab-swap > .page-inner { animation: tabContent .24s cubic-bezier(.22,1,.36,1) both; }
@keyframes tabContent { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tab-swap > .page-inner { animation: none; } }

/* =====================================================================
   Dark appearance (Settings → Appearance). Apple's dark palette: true black
   pages, raised #1C1C1E cards, softer text greys; brand yellow unchanged.
   ===================================================================== */
html.theme-dark {
  color-scheme: dark;
  --bg: #000000; --card: #1C1C1E; --surface: #1C1C1E; --surface-2: #2C2C2E; --line: #2C2C2E;
  --ink: #F5F5F7; --ink-2: #A1A1A6; --ink-3: #8E8E93; --on-ink: #000000;
  --brand-soft: #3A3108; --brand-ink: #141414; --stop-soft: #3B1513; --dark-2: #2C2C2E;
  --shadow-card: 0 1px 0 rgba(255,255,255,.04); --shadow-sheet: 0 -6px 28px rgba(0,0,0,.6); --shadow-pop: 0 6px 20px rgba(0,0,0,.6);
  --edge-bg: #000000;
  /* glass and iOS system colours */
  --glass: rgba(30,30,32,.62); --glass-strong: rgba(30,30,32,.88); --glass-edge: rgba(255,255,255,.1);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --ios-grouped: #000000; --ios-cell: #1C1C1E; --ios-sep: rgba(84,84,88,.6);
  --label: #FFFFFF; --label-2: rgba(235,235,245,.6); --label-3: rgba(235,235,245,.3);
  --fill: rgba(120,120,128,.36); --fill-2: rgba(120,120,128,.32); --fill-3: rgba(118,118,128,.24);
  --accent-ink: #FFD54A;
  --lg-fill: rgba(36,36,40,.58);
  --lg-light: inset 0 0 0 .5px rgba(255,255,255,.14), inset 1.5px 1.5px 1px -1px rgba(255,255,255,.22), inset -1px -1px 1px -1px rgba(255,255,255,.1), inset 0 0 14px rgba(255,255,255,.04);
  --lg-lift: 0 8px 26px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
}
html.theme-dark body { background: #000; color: var(--ink); }

/* ---------- Settings ---------- */
.set-h { margin: 22px 4px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.set-card { background: var(--card); border-radius: 16px; padding: 12px; }
.set-card.list { padding: 0 14px; }
.set-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.set-seg button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 8px; border: 2px solid transparent; border-radius: 14px; background: none; font: 600 .86rem var(--font); color: var(--ink); cursor: pointer; }
.set-seg button[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); }
.set-swatch { position: relative; width: 56px; height: 76px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(127,127,127,.3); display: flex; }
.set-swatch i { flex: 1; }
.sw-light i { background: #fff; } .sw-dark i { background: #1C1C1E; }
.sw-auto i:first-child { background: #fff; } .sw-auto i:last-child { background: #1C1C1E; }
.set-swatch::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 8px; border-radius: 4px; background: var(--brand); }
.set-note { margin: 10px 4px 2px; font-size: .84rem; color: var(--ink-2); text-align: center; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; background: none; border: 0; border-bottom: .5px solid var(--line); color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.set-row:last-child { border-bottom: 0; }
.set-row b { font-weight: 600; display: block; }
.set-row small { color: var(--ink-2); font-size: .82rem; }
.set-row .i { width: 20px; height: 20px; color: var(--brand-ink); }
html.theme-dark .set-row .i { color: var(--brand); }
.set-row > .i.sm { width: 16px; height: 16px; color: var(--ink-3); }
.set-row.danger b { color: var(--stop); }
html.theme-dark .set-row.danger b { color: #FF6B5E; }
.set-foot { text-align: center; color: var(--ink-3); font-size: .78rem; margin: 22px 0 6px; }
.del-sheet h2 { margin: 6px 0 2px; }
.del-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--stop-soft); color: var(--stop); }
.del-ic .i { width: 24px; height: 24px; }
.del-list { margin: 12px 0 14px; padding-left: 20px; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.del-list li { margin: 4px 0; }
.del-sheet .btn + .btn { margin-top: 8px; }
html.theme-dark { --stop: #FF453A; --go: #30D158; }
html.theme-dark .leaflet-container, html.theme-dark #map { background: #1A1B1E; }
html.theme-dark .menu-item .ic[style*="brand-soft"] { color: var(--brand); }
html.theme-dark .svc-t .tile { background: #2C2C2E; box-shadow: none; }
html.theme-dark .svc-t.on .tile, html.theme-dark .svc-t[aria-pressed="true"] .tile { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }

/* ---------- Flytte Rewards ---------- */
.rw-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 18px 18px 20px; color: #fff; margin-bottom: 14px;
  background: radial-gradient(120% 140% at 100% 0%, #6B4A2B 0%, #2A1C12 60%, #140D08 100%); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.rw-hero.tier-silver { background: radial-gradient(120% 140% at 100% 0%, #8E99A8 0%, #3A414B 60%, #1B1F25 100%); }
.rw-hero.tier-gold { background: radial-gradient(120% 140% at 100% 0%, #FFD84A 0%, #A77A00 55%, #2B2000 100%); }
.rw-hero::after { content: ''; position: absolute; inset: auto -40px -70px auto; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.06); }
.rw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rw-pill { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.16); }
.rw-brand { font-size: .8rem; font-weight: 700; opacity: .75; }
.rw-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; position: relative; z-index: 1; }
.rw-pts { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rw-unit { margin-left: 6px; font-weight: 700; opacity: .8; }
.rw-sub { margin: 8px 0 0; font-size: .9rem; opacity: .85; }
.rw-ring { width: 92px; height: 92px; flex: none; transform: rotate(-90deg); }
.rw-ring circle { fill: none; stroke-width: 7; }
.rw-ring .bg { stroke: rgba(255,255,255,.18); }
.rw-ring .fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1); }
.tier-gold .rw-ring .fg { stroke: #fff; }
.rw-ring text { transform: rotate(90deg); transform-origin: 40px 40px; fill: #fff; }
.rw-ring .v { font: 800 17px var(--font); } .rw-ring .l { font: 600 8px var(--font); opacity: .75; }
.rw-paused { background: var(--brand-soft); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; font-size: .9rem; font-weight: 600; }
.rw-level { padding: 22px 18px 14px; }
.rw-track { position: relative; height: 6px; border-radius: 3px; background: var(--fill-3, #EEE); margin: 6px 14px 62px; }
.rw-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--brand); }
.rw-node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.rw-node em { width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--fill, #DDD); }
.rw-node.on em { box-shadow: inset 0 0 0 3px var(--brand); background: var(--brand); }
.rw-node.cur em { box-shadow: 0 0 0 5px rgba(255,196,0,.28), inset 0 0 0 3px var(--brand); }
.rw-node b { position: absolute; top: 24px; font-size: .8rem; white-space: nowrap; }
.rw-node small { position: absolute; top: 42px; font-size: .7rem; color: var(--ink-3); }
.rw-node:first-of-type { transform: translate(-30%, -50%); }
.rw-node:last-of-type { transform: translate(-70%, -50%); }
.rw-note { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.rw-note b { color: var(--ink); }
.rw-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent-ink, #8A6400); }
.rw-ic .i { width: 18px; height: 18px; }
.rw-delta { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rw-delta.plus { color: var(--go); }
.rw-empty { margin: 0; padding: 16px 0; color: var(--ink-2); font-size: .9rem; text-align: center; }
html.theme-dark .tabbar button[aria-current="page"] { color: var(--brand); }
html.theme-dark .tabbar button[aria-current="page"] svg { color: var(--brand); }

/* Dark mode: status pills and rating badge need their own tones (the pale light-mode fills read as
   white smudges), and the vehicle art is dark, so its tile goes light enough to show it. */
html.theme-dark .badge { background: #2C2C2E; color: #EBEBF5; }
html.theme-dark .badge.ok, html.theme-dark .verified { background: rgba(48, 209, 88, .18); color: #4CE07A; }
html.theme-dark .badge.warn { background: rgba(255, 214, 10, .16); color: #FFD60A; }
html.theme-dark .badge.bad { background: rgba(255, 69, 58, .18); color: #FF6961; }
html.theme-dark .trip-card .ic { background: #D8D8DD; }

/* In-app navigation (driver) */
body.nav-on #sheet, body.nav-on #topbar, body.nav-on #tabs { display: none !important; }
.nav-ui { position: fixed; inset: 0; z-index: 700; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.nav-ui > * { pointer-events: auto; }
.nav-top { margin: calc(10px + env(safe-area-inset-top)) 10px 0; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.28); animation: navIn .32s var(--ease-out, ease-out); }
.nav-man { display: flex; align-items: center; gap: 14px; background: #0B6E3A; color: #fff; padding: 14px 16px; }
.nav-arrow { width: 52px; height: 52px; flex: none; display: grid; place-items: center; }
.nav-arrow svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-dist { display: block; font-size: 1.75rem; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.nav-instr { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.25; opacity: .95; margin-top: 2px; }
.nav-then { display: flex; align-items: center; gap: 8px; background: #08552C; color: #fff; padding: 7px 18px; font-weight: 700; font-size: .9rem; }
.nav-then svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-recenter { align-self: center; margin-top: auto; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 10px 16px; background: var(--card, #fff); color: var(--ink, #111); font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.nav-bot { display: flex; align-items: center; gap: 10px; margin: 0 10px calc(10px + var(--sab, env(safe-area-inset-bottom))); background: var(--card, #fff); color: var(--ink, #111); border-radius: 20px; padding: 10px 10px 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); animation: navUp .32s var(--ease-out, ease-out); }
.nav-eta b { display: block; font-size: 1.35rem; font-weight: 800; color: #0B8043; line-height: 1.1; }
.nav-eta small { display: block; font-size: .85rem; color: var(--ink-2, #555); }
.nav-btn { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface, #F2F2F7); color: var(--ink, #111); }
.nav-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-exit { border: 0; border-radius: 999px; min-height: 46px; padding: 0 20px; background: #E5352B; color: #fff; font-weight: 800; font-size: 1rem; }
html.theme-dark .nav-eta b { color: #4CE07A; }
html.theme-dark .nav-btn { background: #2C2C2E; }
@keyframes navIn { from { transform: translateY(-14px); opacity: 0; } }
@keyframes navUp { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nav-top, .nav-bot { animation: none; } }
.nav-ui [hidden] { display: none !important; }

/* Signed-in launch v3: behaves like a native launch screen.
   Static from the first frame (no fade-in from blank), follows the chosen theme, and leaves in two
   beats: the logo goes first, then the background clears, so the logo never ghosts over the map. */
html:not(.launch-dark) .splash .sp-icon, html:not(.launch-dark) .splash .sp-name, html:not(.launch-dark) .splash .sp-tag { animation: none; }
html:not(.launch-dark) .splash .sp-center { transition: opacity .2s ease, transform .3s cubic-bezier(.32,.72,0,1); }
html:not(.launch-dark) .splash.out .sp-center { opacity: 0; transform: scale(.94); }
html:not(.launch-dark) .splash.out .sp-load { opacity: 0; transition: opacity .15s; }
html:not(.launch-dark) .splash.out { transition: opacity .32s cubic-bezier(.4,0,.2,1) .1s, visibility 0s linear .42s; }
html.theme-dark:not(.launch-dark) .splash { background: #000; }
html.theme-dark:not(.launch-dark) .sp-icon { background: linear-gradient(160deg, #2A2B2F, #141416); box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); }
html.theme-dark:not(.launch-dark) .sp-name { color: #fff; }
html.theme-dark:not(.launch-dark) .sp-name span { color: var(--brand); }
html.theme-dark:not(.launch-dark) .sp-tag { color: #8E8E93; }
html.theme-dark:not(.launch-dark) .sp-load { background: rgba(255,255,255,.14); }
/* Signed-in exit, unhurried: the logo eases away, then the screen dissolves into the app. */
html:not(.launch-dark) .splash .sp-center { transition: opacity .28s ease, transform .45s cubic-bezier(.32,.72,0,1); }
html:not(.launch-dark) .splash.out { transition: opacity .42s cubic-bezier(.4,0,.2,1) .14s, visibility 0s linear .6s; }
.splash.repeat .sp-load { display: none; }

/* ---------- UX round: alerts, help, receipts, notes, arrival, searching, weekly summary ---------- */
.set-switch { width: 51px; height: 31px; border-radius: 31px; background: var(--surface-2, #E5E5EA); position: relative; flex: none; transition: background .2s; }
.set-switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.set-switch.on { background: var(--go, #34C759); }
.set-switch.on i { transform: translateX(20px); }
.set-row[disabled] { opacity: .55; }

.alert-ask { text-align: center; }
.alert-ic { width: 64px; height: 64px; border-radius: 20px; margin: 4px auto 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent-ink, #8A6400); }
html.theme-dark .alert-ic { color: var(--brand); }
.alert-ic .i { width: 30px; height: 30px; }
.alert-ask p { margin: 0 0 18px; }

.trip-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.trip-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .85rem; cursor: pointer; }
.trip-act .i { width: 22px; height: 22px; }
.trip-act:active { transform: scale(.97); }

.issue { background: var(--surface); border-radius: 14px; padding: 12px 14px; margin-top: 8px; }
.issue-reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--line); font-size: .92rem; }
.issue-reply small { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 3px; }
.help-sheet textarea, .modal textarea { width: 100%; resize: vertical; }
.help-done { text-align: center; padding: 10px 0 0; }
.help-done > .i { width: 44px; height: 44px; color: var(--go); }
.help-done h3 { margin: 8px 0 4px; }
.help-done p { margin: 0 0 16px; }

.receipt .rc-head { display: flex; justify-content: space-between; align-items: baseline; }
.receipt .rc-head b { font-size: 1.35rem; letter-spacing: -.02em; }
.receipt .rc-head span { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.receipt .rc-no { margin: 2px 0 14px; font-size: .82rem; color: var(--ink-2); }
.receipt .rc-total { background: var(--surface); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.receipt .rc-total small { display: block; color: var(--ink-2); font-weight: 600; }
.receipt .rc-total b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.receipt .rc-total span { font-size: .85rem; color: var(--ink-2); }

.note-line { display: flex; gap: 10px; align-items: flex-start; background: var(--brand-soft); border-radius: 14px; padding: 10px 12px; margin: 10px 0; font-size: .95rem; }
.note-line .i { flex: none; margin-top: 2px; }
.note-line small { display: block; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
html.theme-dark .note-line { background: rgba(255,214,10,.12); }

.slow-hint { margin: 12px auto 0; max-width: 320px; background: var(--surface); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; animation: fade .3s; }
.slow-hint span { font-size: .88rem; color: var(--ink-2); }
.slow-hint .btn { margin-top: 6px; }

.arrive-hero { text-align: center; background: var(--ink, #141414); color: #fff; border-radius: 20px; padding: 14px 16px 16px; margin-bottom: 4px; animation: arriveIn .45s cubic-bezier(.32,.72,0,1); }
.arrive-hero small { display: block; font-size: .82rem; font-weight: 600; opacity: .75; }
.arrive-plate { display: inline-block; margin: 6px 0 4px; padding: 6px 16px; border-radius: 10px; background: var(--brand); color: #141414; font-size: 2rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.arrive-hero span { display: block; font-size: .9rem; opacity: .85; }
html.theme-dark .arrive-hero { background: #1C1C1E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
@keyframes arriveIn { from { transform: scale(.94); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arrive-hero { animation: none; } }

.week-sum { background: var(--surface); border-radius: 18px; padding: 14px 16px; margin: 14px 0 6px; }
.ws-row { display: flex; justify-content: space-between; gap: 12px; }
.ws-row small { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.ws-row b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.ws-row em { display: block; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.ws-row em.up { color: var(--go); }
.ws-row em.down { color: var(--stop); }
.ws-side { text-align: right; }
.ws-tip { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.ws-tip .i { flex: none; margin-top: 2px; }

.ws-row em { font-size: .95rem; font-weight: 700; color: var(--ink); margin-top: 4px; }
.ws-row b { font-size: 1.15rem; }
.slow-hint .btn { background: var(--card, #fff); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.note-row .note-ic { background: var(--surface); color: var(--ink); display: grid; place-items: center; }
html.theme-dark .wait-note { background: rgba(255,214,10,.12); color: #F5F5F7; }
html.theme-dark .wait-note .i { color: var(--brand); }
html.theme-dark .receipt .btn, html.theme-dark .trip-act { background: #2C2C2E; color: #F5F5F7; }
/* While navigating, messages appear above the bottom bar so the next turn stays visible. */
body.nav-on #toast { top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

/* Wallet lock */
.unlock { text-align: center; }
.unlock-ic { width: 64px; height: 64px; border-radius: 20px; margin: 4px auto 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent-ink, #8A6400); }
html.theme-dark .unlock-ic { color: var(--brand); background: rgba(255,214,10,.14); }
.unlock-ic .i { width: 30px; height: 30px; }
.unlock h2 { margin: 0 0 4px; }
.unlock > p.muted { margin: 0 0 14px; }
.unlock label { text-align: left; }
.unlock [data-step] .btn + .btn { margin-top: 6px; }
.ic-lock { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent-ink, #8A6400); margin-right: 2px; }
html.theme-dark .ic-lock { color: var(--brand); background: rgba(255,214,10,.14); }
#lockRow { display: flex; align-items: center; gap: 12px; text-align: left; }

/* Rider launch tile matches the rider app icon: gold tile, black F (the driver keeps the dark tile). */
.sp-icon.sp-gold { background: linear-gradient(160deg, #FFD84A 0%, #FFC400 60%, #F2B600 100%); box-shadow: 0 14px 34px rgba(242,182,0,.28), 0 2px 6px rgba(20,20,22,.12), inset 0 1px 0 rgba(255,255,255,.35); }
.sp-icon.sp-gold svg g { fill: #141414; }
html.theme-dark:not(.launch-dark) .sp-icon.sp-gold { background: linear-gradient(160deg, #FFD84A 0%, #FFC400 60%, #F2B600 100%); box-shadow: 0 14px 34px rgba(0,0,0,.5); }

/* Email for receipts */
.email-flow h1 { margin-bottom: 6px; }
.email-flow .lead { margin-bottom: 16px; }
.email-flow input[type=email] { font-size: 1.05rem; }
.email-flow .btn-lg { margin-top: 8px; }
.email-flow .fine { text-align: center; margin-top: 14px; }
.email-skip { display: block; margin: 16px auto 0; font-weight: 600; color: var(--ink-2); }
.email-modal .email-flow h1 { font-size: 1.4rem; letter-spacing: -.02em; }