/* Ziva — mobile-first styles. Palette: forest green, savanna gold, clay red. */
:root {
  --bg: #F5F3EC;
  --surface: #FFFFFF;
  --surface-2: #EFECE2;
  --ink: #15201B;
  --ink-2: #4C5A53;
  --ink-3: #7D8983;
  --line: #E2DED2;
  --primary: #0E6B47;
  --primary-ink: #FFFFFF;
  --deep: #0B3D2A;
  --gold: #F4B41A;
  --clay: #E4573D;
  --ok: #12805C;  --ok-bg: #DDF3E9;
  --warn: #9A6400; --warn-bg: #FCEFC9;
  --bad: #B3261E;  --bad-bg: #FBE1DE;
  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 1px 2px rgba(21, 32, 27, .06), 0 6px 20px rgba(21, 32, 27, .06);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1512; --surface: #16201B; --surface-2: #1D2A24; --ink: #EAF0EC; --ink-2: #B4C1BA; --ink-3: #82918A; --line: #2A3832;
    --primary: #2FA474; --deep: #08291C; --ok: #5BD3A2; --ok-bg: #133A2A; --warn: #F2C35B; --warn-bg: #3A2F12; --bad: #FF8A80; --bad-bg: #3D1B18;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0 4px; font-weight: 800; }
h2 { font-size: 19px; margin: 0 0 8px; font-weight: 800; letter-spacing: -.01em; }
.sub, .hint { color: var(--ink-2); margin: 0 0 14px; }
.hint { font-size: 13px; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.row { display: flex; align-items: center; }
.gap { gap: 10px; } .gap-s { gap: 8px; } .center { justify-content: center; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.big { width: 40px; height: 40px; stroke-width: 1.5; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ===== Shell ===== */
#app { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
.sandbox-banner { background: var(--gold); color: #2A1E00; font-size: 12.5px; font-weight: 700; text-align: center; padding: 6px 12px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.brand.big { font-size: 28px; }
.logo { width: 30px; height: 30px; border-radius: 9px; background: var(--deep) url('/icons/icon.svg') center/cover; flex: none; }
.brand.big .logo { width: 40px; height: 40px; border-radius: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--deep); color: var(--gold); display: grid; place-items: center; font-weight: 800; }
.avatar.big { width: 60px; height: 60px; font-size: 24px; }
main#view { padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); outline: none; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; padding: 6px 0; border-radius: 12px; }
.tabbar a.on { color: var(--primary); }
.tabbar a.on .ic { stroke-width: 2.3; }

/* ===== Buttons, chips, pills ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 13px 18px; font: 700 15px var(--font);
  background: var(--primary); color: var(--primary-ink); cursor: pointer; transition: transform .08s, filter .15s; min-height: 48px; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:hover { filter: brightness(1.05); }
.btn.block { width: 100%; margin: 8px 0; }
.btn.small { padding: 8px 12px; min-height: 36px; font-size: 13.5px; border-radius: 11px; }
.btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.light { background: #fff; color: var(--deep); }
.btn.outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger-ghost { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 40%, transparent); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn.busy::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 700 13px var(--font); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.muted { background: var(--surface-2); color: var(--ink-2); }
.badge { background: var(--clay); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; }

/* ===== Forms ===== */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.form small { font-weight: 500; color: var(--ink-3); }
input, select, textarea { font: 600 16px var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; width: 100%; min-height: 48px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field-error { color: var(--bad); font-size: 12.5px; font-weight: 600; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.radio-cards legend { grid-column: 1 / -1; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card span { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 12px; color: var(--ink); font-weight: 700; background: var(--surface); cursor: pointer; }
.radio-card span small { margin-top: 2px; }
.radio-card input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.radio-card input:focus-visible + span { outline: 3px solid var(--gold); }
.radio-card.mtn input:checked + span { border-color: #E5B800; box-shadow: inset 0 0 0 1.5px #E5B800; background: color-mix(in srgb, #FFCC00 14%, var(--surface)); }
.radio-card.orange input:checked + span { border-color: #FF7900; box-shadow: inset 0 0 0 1.5px #FF7900; background: color-mix(in srgb, #FF7900 10%, var(--surface)); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.switch-row { flex-direction: row !important; align-items: center; justify-content: space-between; }
.switch-row > span { display: flex; flex-direction: column; color: var(--ink); }
.switch-row input { width: 48px; min-height: 28px; height: 28px; appearance: none; background: var(--line); border-radius: 999px; position: relative; padding: 0; border: 0; cursor: pointer; flex: none; }
.switch-row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch-row input:checked { background: var(--primary); }
.switch-row input:checked::after { transform: translateX(20px); }

/* ===== Surfaces & lists ===== */
.card-surface { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 16px; margin: 10px 0; }
details.card-surface summary { font-weight: 800; cursor: pointer; }
details[open] summary { margin-bottom: 12px; }
.section-title { font-size: 15px; font-weight: 800; color: var(--ink-2); margin: 22px 0 10px; text-transform: none; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; }
.section-head a { font-weight: 700; font-size: 14px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 700; margin: 4px 0 6px -4px; }
.empty { text-align: center; color: var(--ink-3); padding: 28px 12px; }
.empty p { margin: 8px 0 0; }
.loading { display: grid; place-items: center; padding: 60px 0; }
.loading span { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--ink); cursor: pointer; }
.item.col { flex-direction: column; align-items: stretch; cursor: default; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-main small { color: var(--ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.chev { color: var(--ink-3); width: 18px; }
.flag { font-size: 26px; line-height: 1; }
.flag.big { font-size: 46px; }

.tx-list { list-style: none; margin: 0; padding: 4px 14px; }
.tx { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tx:last-child { border-bottom: 0; }
.tx-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.tx-ic .ic { width: 18px; height: 18px; }
.s-numbers { --svc: #2F6FDE; } .s-cards { --svc: #7A3FD1; } .s-transfers { --svc: #0E6B47; } .s-bills { --svc: #D9771A; } .s-wallet { --svc: #12805C; }
.tx-ic[class*=s-] { background: color-mix(in srgb, var(--svc) 13%, var(--surface)); color: var(--svc); }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sub { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tx-amt { font-weight: 800; white-space: nowrap; }
.tx-amt.in { color: var(--ok); } .tx-amt.muted { color: var(--ink-3); text-decoration: line-through; }

dl.summary { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 4px 0; font-size: 14px; }
dl.summary:empty { display: none; }
dl.summary dt { color: var(--ink-2); font-weight: 600; }
dl.summary dd { margin: 0; text-align: right; font-weight: 700; }
.big-val { font-size: 22px; font-weight: 800; color: var(--primary); }

/* ===== Home ===== */
.balance-card { background: radial-gradient(120% 140% at 100% 0%, #17865A 0%, var(--deep) 60%); color: #fff; border-radius: 24px; padding: 20px; margin-top: 4px; position: relative; overflow: hidden; }
.balance-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(244,180,26,.16); }
.balance-card .label { margin: 0; opacity: .8; font-size: 13px; font-weight: 700; }
.balance { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 16px; }
.muted-on-dark { margin: 0 0 6px; opacity: .85; font-weight: 700; }
.balance-card .btn { flex: 1; }
.limit { margin-top: 14px; }
.limit small { opacity: .75; font-size: 12px; }
.limit-bar { height: 5px; border-radius: 9px; background: rgba(255,255,255,.18); overflow: hidden; margin-bottom: 4px; }
.limit-bar span { display: block; height: 100%; background: var(--gold); border-radius: 9px; }
.notice { display: flex; gap: 12px; align-items: center; background: var(--warn-bg); color: var(--ink); border-radius: var(--radius); padding: 14px; margin: 14px 0 4px; font-size: 13.5px; }
.notice .ic { color: var(--warn); width: 26px; height: 26px; }
.notice span { flex: 1; }
.notice-cta { flex: none !important; background: var(--ink); color: var(--bg); padding: 7px 12px; border-radius: 10px; font-weight: 800; font-size: 13px; }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.svc .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--svc) 13%, var(--surface)); color: var(--svc); margin-bottom: 6px; }
.svc small { color: var(--ink-3); font-size: 12px; font-weight: 600; line-height: 1.35; }

/* ===== Numbers ===== */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.country { background: var(--surface); border-radius: var(--radius-s); padding: 12px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }
.country small { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.number-hero { text-align: center; background: linear-gradient(160deg, #1F4FA8, #12306B); color: #fff; border-radius: 24px; padding: 22px 16px; }
.number-hero h1 { font-size: 24px; margin: 8px 0 2px; }
.number-hero p { opacity: .9; margin: 0 0 14px; }
.number-hero .btn.light { color: #12306B; }
.messages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.msg { background: var(--surface); border-radius: 16px 16px 16px 4px; padding: 10px 14px; box-shadow: var(--shadow); max-width: 88%; }
.msg.outbound { align-self: flex-end; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-radius: 16px 16px 4px 16px; }
.msg-meta { font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.msg-body { white-space: pre-wrap; word-break: break-word; }

/* ===== Cards ===== */
.card-stack { display: flex; flex-direction: column; gap: 14px; margin: 10px 0; }
.card-link { display: block; }
.vcard { aspect-ratio: 1.586; border-radius: 20px; padding: 20px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.18); margin: 8px 0; }
.vcard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.18), transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px); pointer-events: none; }
.c-forest { background: linear-gradient(135deg, #0E6B47, #082E1F); }
.c-ocean { background: linear-gradient(135deg, #1D63C9, #0B2552); }
.c-sunset { background: linear-gradient(135deg, #E4573D, #8A2B5A); }
.c-night { background: linear-gradient(135deg, #2D2F36, #0B0C0F); }
.vcard-top { display: flex; justify-content: space-between; font-weight: 700; position: relative; }
.vcard-bal { font-size: 20px; font-weight: 800; }
.chip-ic { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #F7D774, #C9962A); position: relative; }
.vcard-pan { font-size: clamp(17px, 5.4vw, 22px); font-weight: 600; position: relative; }
.vcard-bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: 13px; font-weight: 700; letter-spacing: .04em; position: relative; }
.vcard-brand.visa { font-style: italic; font-weight: 800; font-size: 24px; letter-spacing: 0; }
.vcard-brand.mastercard { display: flex; }
.vcard-brand.mastercard i { width: 30px; height: 30px; border-radius: 50%; background: #EB001B; display: block; }
.vcard-brand.mastercard i + i { background: #F79E1B; margin-left: -12px; mix-blend-mode: screen; }
.vcard.frozen { filter: grayscale(.85) brightness(.85); }
.vcard-frozen { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; font-weight: 800; background: rgba(160,190,230,.25); backdrop-filter: blur(1px); }
.vcard-frozen .ic { width: 34px; height: 34px; }
.action-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.action-row button { background: var(--surface); border: 0; border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 12px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 12px var(--font); color: var(--ink); cursor: pointer; }
.action-row .ic { color: var(--primary); }
.swatches { display: flex; gap: 10px; }
.swatch { width: 44px; height: 44px; border-radius: 12px; position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch:has(input:checked) { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ===== Transfers ===== */
.receipt { text-align: center; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 20px 16px; }
.receipt .muted { color: var(--ink-2); margin: 6px 0 0; font-weight: 700; }
.receipt .big-val { font-size: 30px; margin: 2px 0 6px; }
.receipt dl.summary { text-align: left; margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; }
.steps { display: flex; list-style: none; padding: 0; margin: 16px 0 4px; counter-reset: s; }
.steps li { flex: 1; position: relative; font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 26px; }
.steps li::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--line); z-index: 1; }
.steps li::after { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.steps li:first-child::after { display: none; }
.steps li.done { color: var(--ok); }
.steps li.done::before, .steps li.done::after { background: var(--ok); }

/* ===== Bills ===== */
.biller-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.biller { background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 14px 12px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 14px; }
.biller .ic { color: #D9771A; }
.b-mtn_airtime .ic { color: #C9A000; } .b-orange_airtime .ic { color: #FF7900; } .b-camwater .ic { color: #1D7BD8; } .b-canalplus .ic, .b-startimes .ic { color: #7A3FD1; }
.biller-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.biller-head .ic { color: #D9771A; background: color-mix(in srgb, #D9771A 12%, var(--surface)); border-radius: 16px; padding: 8px; width: 56px; height: 56px; }
.biller-head h1 { margin: 0; }
.biller-head .sub { margin: 0; }
.ok-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 8px; font-size: 28px; font-weight: 800; }
.token { font-size: 20px; font-weight: 800; background: var(--surface-2); border-radius: 12px; padding: 12px; margin: 4px 0 8px; word-break: break-all; user-select: all; }

/* ===== Account / admin ===== */
.profile-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; }
.profile-head h1 { margin: 0; font-size: 22px; }
.profile-head .sub { margin: 0; }
.item .ic:first-child { color: var(--primary); }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.filters .chip { flex: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--surface); border-radius: var(--radius-s); padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stat small { color: var(--ink-3); font-weight: 700; }
.stat strong { font-size: 18px; }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--ink-3); font-weight: 800; }

/* ===== Auth ===== */
.auth-view { padding: 24px 16px 40px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.auth-card { background: var(--surface); border-radius: 28px; padding: 24px 20px; box-shadow: var(--shadow); }
.auth-top { display: flex; justify-content: space-between; align-items: center; }
.tagline { font-size: 17px; font-weight: 700; color: var(--ink-2); margin: 12px 0 14px; }
.service-strip { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.service-strip span { font: 800 12px var(--mono); padding: 6px 10px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); }
.service-strip span:nth-child(1) { background: #E5EEFD; color: #1F4FA8; } .service-strip span:nth-child(2) { background: #EFE6FB; color: #6131B0; }
.service-strip span:nth-child(3) { background: #DDF3E9; color: #0E6B47; } .service-strip span:nth-child(4) { background: #FDEBD8; color: #A85A10; }
@media (prefers-color-scheme: dark) { .service-strip span { filter: brightness(.9) saturate(.8); } }
.switch { text-align: center; color: var(--ink-2); margin: 14px 0 0; }
.switch a { font-weight: 800; }
.auth-note { text-align: center; font-size: 12.5px; color: var(--warn); font-weight: 700; margin-top: 14px; }

/* ===== Sheets & toasts ===== */
.sheet-wrap { position: fixed; inset: 0; background: rgba(8, 20, 14, 0); z-index: 50; display: flex; align-items: flex-end; justify-content: center; transition: background .2s; }
.sheet-wrap.open { background: rgba(8, 20, 14, .45); }
.sheet { background: var(--bg); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s ease-out; position: relative; }
.sheet-wrap.open .sheet { transform: none; }
.sheet h2 { padding-right: 36px; }
.sheet .lead { font-size: 16px; font-weight: 600; }
.sheet .row .btn { flex: 1; }
.sheet .receipt { box-shadow: none; background: transparent; padding: 0; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: tin .2s ease-out; transition: opacity .3s, transform .3s; }
.toast-ok { background: var(--ok); color: #fff; } .toast-error { background: var(--bad); color: #fff; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 560px) {
  body { background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--primary) 10%, var(--bg)), var(--bg)); }
  #app { box-shadow: 0 0 0 1px var(--line); background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.btn.soon { opacity: .7; }

/* ===== v2: credit, plans, payment methods, calls ===== */
.row.wrap { flex-wrap: wrap; }
.credit-strip { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin: 12px 0; color: var(--ink); }
.credit-strip > .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, #2F6FDE 13%, var(--surface)); color: #2F6FDE; }
.credit-strip > span { display: flex; flex-direction: column; flex: 1; }
.credit-strip small { color: var(--ink-3); font-weight: 700; font-size: 12px; }
.credit-strip strong { font-size: 18px; }
.credit-strip .credit-cta { flex: none; flex-direction: row; align-items: center; gap: 2px; color: var(--primary); font-weight: 800; font-size: 13.5px; }
.credit-strip.low { box-shadow: inset 0 0 0 2px var(--warn), var(--shadow); }
.credit-strip.low .credit-cta { color: var(--warn); }
.credit-hero { background: radial-gradient(120% 140% at 100% 0%, #2A5FC4 0%, #12306B 65%); color: #fff; border-radius: 24px; padding: 20px; }
.credit-hero .label { margin: 0; opacity: .8; font-size: 13px; font-weight: 700; }
.credit-hero .muted-on-dark { margin: 4px 0 0; font-size: 13.5px; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pack { background: var(--surface); border: 0; border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 14px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: 600 13px var(--font); color: var(--ink-2); cursor: pointer; text-align: left; }
.pack strong { font-size: 20px; color: var(--ink); }
.pack em { font-style: normal; font-weight: 800; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-top: 4px; }
.pack:hover { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); }
.pack[disabled] { opacity: .6; }
.invite { display: flex; gap: 14px; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border-radius: var(--radius); padding: 16px; margin: 14px 0; }
.invite > div:first-child .ic { width: 34px; height: 34px; color: #A86E00; }
.invite p { margin: 4px 0 10px; color: var(--ink-2); font-size: 13.5px; }
.invite .code { font-size: 18px; font-weight: 800; background: var(--surface); padding: 6px 12px; border-radius: 10px; letter-spacing: .08em; }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.plans legend { grid-column: 1 / -1; }
.plan { position: relative; cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan-body { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 12px; background: var(--surface); color: var(--ink); height: 100%; }
.plan-body strong { font-size: 14px; }
.plan-price { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.plan-price small { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.plan-body > small { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.plan .save { color: var(--ok); }
.plan-flag { position: absolute; top: -9px; right: 10px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--gold); color: #2A1E00; padding: 2px 8px; border-radius: 999px; }
.plan input:checked + .plan-body { border-color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.plan input:focus-visible + .plan-body { outline: 3px solid var(--gold); }
.radio-card.m-mtn_momo input:checked + span { border-color: #E5B800; box-shadow: inset 0 0 0 1.5px #E5B800; background: color-mix(in srgb, #FFCC00 14%, var(--surface)); }
.radio-card.m-orange_money input:checked + span { border-color: #FF7900; box-shadow: inset 0 0 0 1.5px #FF7900; background: color-mix(in srgb, #FF7900 10%, var(--surface)); }
.radio-card.m-wave input:checked + span { border-color: #1DC4FF; box-shadow: inset 0 0 0 1.5px #1DC4FF; background: color-mix(in srgb, #1DC4FF 10%, var(--surface)); }
.radio-card.m-mpesa input:checked + span { border-color: #2E9E3A; box-shadow: inset 0 0 0 1.5px #2E9E3A; background: color-mix(in srgb, #2E9E3A 10%, var(--surface)); }
.radio-card.m-airtel_money input:checked + span { border-color: #E40000; box-shadow: inset 0 0 0 1.5px #E40000; background: color-mix(in srgb, #E40000 8%, var(--surface)); }
.call-screen { position: fixed; inset: 0; z-index: 60; background: linear-gradient(170deg, #0B3D2A, #061A12); color: #fff; display: flex; align-items: center; justify-content: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
.call-inner { text-align: center; width: 100%; max-width: 420px; }
.call-status { opacity: .8; font-weight: 700; margin: 0; }
.call-to { font-size: 30px; margin: 8px 0 4px; }
.call-timer { font-size: 44px; font-weight: 700; margin: 18px 0 6px; }
.call-meta { opacity: .75; font-size: 13px; margin: 4px 0; }
.call-actions { display: flex; justify-content: center; gap: 28px; margin-top: 40px; }
.round { width: 76px; height: 76px; border-radius: 50%; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 11px var(--font); color: #fff; cursor: pointer; }
.round .ic { width: 26px; height: 26px; }
.round.red { background: #D7263D; }
.round.ghostr { background: rgba(255,255,255,.14); }
.round.ghostr.on { background: #fff; color: #0B3D2A; }

/* ===== v3: Ziva-to-Ziva, eSIM, USSD ===== */
.s-p2p { --svc: #0E6B47; } .s-esim { --svc: #0B8A9A; }
.s-rides { --svc: #A86A00; } .s-travel { --svc: #2160C4; } .s-food { --svc: #C2431F; } .s-parcels { --svc: #8A5A1A; } .s-savings { --svc: #A87800; } .s-loans { --svc: #5B45C9; } .s-tontine { --svc: #B4421F; } .s-pay { --svc: #B02A6E; } .s-credit { --svc: #2F6FDE; }
.big-choice { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 10px 0; color: var(--ink); }
.big-choice > .ic:first-child { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.big-choice > span:not(.pill) { flex: 1; display: flex; flex-direction: column; }
.big-choice small { color: var(--ink-3); font-weight: 600; }
.contacts { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.contact { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 12px var(--font); color: var(--ink); cursor: pointer; flex: none; width: 68px; }
.contact .avatar { width: 48px; height: 48px; font-size: 18px; }
.found { display: flex; align-items: center; gap: 10px; background: var(--ok-bg); border-radius: var(--radius-s); padding: 10px 12px; }
.found .ic { color: var(--ok); }
.found span { display: flex; flex-direction: column; }
.found small { color: var(--ink-2); font-weight: 600; font-size: 12px; }
.esim-hero { text-align: center; background: linear-gradient(160deg, #0B8A9A, #075560); color: #fff; border-radius: 24px; padding: 22px 16px; }
.esim-hero h1 { margin: 8px 0 2px; }
.esim-hero p { opacity: .9; margin: 0 0 12px; }
.esim-hero .limit-bar { background: rgba(255,255,255,.2); height: 7px; border-radius: 9px; overflow: hidden; margin: 6px 0 4px; }
.esim-hero .limit-bar span { display: block; height: 100%; background: var(--gold); }
.esim-install .qr { width: 220px; max-width: 100%; margin: 6px auto 12px; background: #fff; padding: 8px; border-radius: 12px; }
.esim-install .qr svg { display: block; width: 100%; height: auto; }
.steps-list { padding-left: 20px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.esim-plan .price { font-style: normal; font-weight: 800; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); padding: 2px 10px; border-radius: 999px; margin-top: 6px; font-size: 15px; }
.notice.promo { background: color-mix(in srgb, #0B8A9A 12%, var(--surface)); }
.notice.promo .ic { color: #0B8A9A; }
.ussd-code { text-align: center; background: var(--deep); color: #fff; border-radius: var(--radius); padding: 16px; margin: 10px 0; }
.ussd-code small { display: block; opacity: .75; font-weight: 700; }
.ussd-code strong { font-size: 32px; color: var(--gold); letter-spacing: .04em; }
.feature-phone { background: #2B2F36; border-radius: 28px; padding: 18px 16px; max-width: 340px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.fp-screen { background: #C9D8B6; border-radius: 8px; min-height: 190px; padding: 12px; border: 3px solid #1B1E22; }
.fp-screen pre { margin: 0; white-space: pre-wrap; font: 600 14px/1.45 var(--mono); color: #1F2A14; }
.fp-input { display: flex; gap: 8px; }
.fp-input input { background: #F2F2F2; min-height: 40px; }
.feature-phone .btn.ghost { background: #3D434C; color: #fff; }

/* ---------- v4: languages, right-to-left, Gulf numbers ---------- */
/* Scripts Manrope doesn't cover fall back to the phone's own fonts. */
:root:lang(ar) { --font: 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
:root:lang(hi) { --font: 'Manrope', 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif; }
:root:lang(zh) { --font: 'Manrope', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif; }

.lang-chip { display: inline-flex; align-items: center; gap: 5px; }
.lang-chip .ic { width: 15px; height: 15px; }
.lang-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; }
.lang-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.lang-opt span:not(.lang-code) { flex: 1; display: flex; flex-direction: column; }
.lang-opt small { color: var(--ink-3); font-size: 12.5px; }
.lang-opt.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.lang-code { width: 34px; height: 26px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--ink-2); flex: none; }
.lang-opt .ic { flex: none; }
.lang-opt .tick { color: var(--primary); }
button.item { width: 100%; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }

.notice.slim { padding: 10px 12px; font-size: 13.5px; align-items: flex-start; }
.notice.slim .ic, .group-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.group-note { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 10px; }

/* Right-to-left (Arabic) */
[dir=rtl] .back .ic, [dir=rtl] .chev, [dir=rtl] .ic-dir { transform: scaleX(-1); }
[dir=rtl] .back { margin: 4px -4px 6px 0; }
[dir=rtl] dl.summary dd { text-align: left; }
[dir=rtl] .receipt dl.summary, [dir=rtl] th, [dir=rtl] td { text-align: right; }
[dir=rtl] .balance-card::after { right: auto; left: -40px; }
[dir=rtl] .vcard-brand.mastercard i + i { margin-left: 0; margin-right: -12px; }
[dir=rtl] .sheet h2 { padding-right: 0; padding-left: 36px; }
[dir=rtl] .sheet-x { right: auto; left: 12px; }
[dir=rtl] .plan-flag { right: auto; left: 10px; }
[dir=rtl] .steps-list { padding-left: 0; padding-right: 20px; }
[dir=rtl] .switch-row input::after { left: auto; right: 3px; }
[dir=rtl] .switch-row input:checked::after { transform: translateX(-20px); }
[dir=rtl] .steps li::after { left: auto; right: -50%; }
[dir=rtl] .pack { align-items: flex-start; }
/* Phone numbers, card numbers and codes always read left to right. */
.mono, input[type=tel], .tx-amt, .balance, .price, .plan-price { unicode-bidi: isolate; }
[dir=rtl] input[type=tel], [dir=rtl] input[inputmode=numeric], [dir=rtl] input[inputmode=decimal], [dir=rtl] input[type=number] { direction: ltr; text-align: right; }
[dir=rtl] .fp-screen pre { direction: ltr; text-align: left; }

/* ---------- v5: show/hide password ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-inline-end: 52px; }
.pw-eye { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.pw-eye:hover { background: var(--surface-2); color: var(--ink); }
.pw-eye:focus-visible { outline: 3px solid var(--gold); outline-offset: 0; }
.pw-eye[aria-pressed=true] { color: var(--primary); }
.pw-eye .ic { width: 20px; height: 20px; }

.service-strip span { direction: ltr; unicode-bidi: isolate; }

/* ---------- v6: super app ---------- */
.ic.tiny { width: 14px; height: 14px; vertical-align: -2px; }
.grow { flex: 1; min-width: 0; }
.row.between { justify-content: space-between; }
p.center, .hint.center { text-align: center; }
.local { font-weight: 600; color: var(--ink-3); margin-inline-start: 4px; }

/* Header bell and the raised Pay tab */
.bell { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.bell-dot { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent, #E4573D); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.tabbar a.tab-pay .ic { width: 46px; height: 46px; padding: 11px; margin-top: -22px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent); }
.tabbar a.tab-pay.on .ic { background: var(--deep); }

/* Home */
.hero-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.hero-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 12.5px; font-weight: 700; padding: 10px 2px; border-radius: 14px; background: rgba(255,255,255,.1); }
.hero-actions a .ic { width: 26px; height: 26px; color: var(--gold); }
.hero-actions a.soon { opacity: .6; }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 8px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.app-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--c, var(--surface-2)); color: var(--cf, var(--ink)); }
.app-ic .ic { width: 24px; height: 24px; }
.g-rides { --c: #FFF1D6; --cf: #A86A00; } .g-bus { --c: #E3F0FF; --cf: #2160C4; } .g-train { --c: #EAE6FF; --cf: #5B45C9; } .g-flight { --c: #DFF6FB; --cf: #0B7F96; }
.g-food { --c: #FFE6DF; --cf: #C2431F; } .g-parcel { --c: #F3E9DA; --cf: #8A5A1A; } .g-bills { --c: #E6F4EA; --cf: #1E7B45; } .g-shop { --c: #FCE4F0; --cf: #B02A6E; }
.g-p2p { --c: #E2F5EC; --cf: #0E6B47; } .g-send { --c: #E3F0FF; --cf: #2160C4; } .g-save { --c: #FFF4D1; --cf: #A87800; } .g-loan { --c: #EAE6FF; --cf: #5B45C9; }
.g-tontine { --c: #FFE9E2; --cf: #B4421F; } .g-cards { --c: #EDE7FF; --cf: #6B3FC8; } .g-split { --c: #E2F5EC; --cf: #0E6B47; } .g-biz { --c: #F1F1EE; --cf: #3B4540; }
.g-num { --c: #E3F0FF; --cf: #2160C4; } .g-credit { --c: #E6F4EA; --cf: #1E7B45; } .g-esim { --c: #DFF6FB; --cf: #0B7F96; } .g-ussd { --c: #F1F1EE; --cf: #3B4540; }
@media (prefers-color-scheme: dark) { .app-ic { background: color-mix(in srgb, var(--cf) 22%, var(--surface)); color: color-mix(in srgb, var(--cf) 45%, #fff); } }
.live-strip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px 0 0; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--ink); border-inline-start: 4px solid var(--gold); }
.k-ride { background: #FFF1D6; color: #A86A00; } .k-bus, .k-train, .k-flight { background: #E3F0FF; color: #2160C4; } .k-food { background: #FFE6DF; color: #C2431F; }
.k-parcel { background: #F3E9DA; color: #8A5A1A; } .k-pot { background: #FFF4D1; color: #A87800; } .k-locked { background: #EAE6FF; color: #5B45C9; } .k-tontine { background: #FFE9E2; color: #B4421F; } .k-store { background: #FCE4F0; color: #B02A6E; }
.tx-ic.big { width: 56px; height: 56px; border-radius: 18px; } .tx-ic.big .ic { width: 28px; height: 28px; }

/* Shared building blocks */
.seg { display: flex; gap: 4px; background: var(--surface-2); border-radius: 14px; padding: 4px; margin: 4px 0 12px; }
.seg a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 11px; color: var(--ink-2); font-weight: 800; font-size: 14px; }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chips-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chips-row .chip { flex: none; }
.quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.quick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--ink); font-size: 12px; font-weight: 700; text-align: center; }
.quick .ic { color: var(--primary); width: 24px; height: 24px; }
.inline-select { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 0 0 12px; }
.inline-select select { width: auto; flex: 1; }
.how h2 { font-size: 16px; margin: 0 0 6px; }

/* Rides */
.route-form { position: relative; }
.route-form .with-ic { position: relative; }
.route-form .with-ic > .ic { position: absolute; inset-inline-start: 12px; bottom: 14px; z-index: 1; }
.route-form .with-ic select { padding-inline-start: 40px; }
.ic.from { color: var(--primary); } .ic.to { color: #E4573D; }
.swap { position: absolute; inset-inline-end: 22px; top: 50%; translate: 0 22%; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; z-index: 2; }
.ride-opt { position: relative; }
.ride-opt input { position: absolute; opacity: 0; }
.ride-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); }
.ride-opts .item-end strong { font-size: 15px; }
.note-field { margin: 12px 0; }

/* Travel */
.trip { width: 100%; border: 0; text-align: start; font: inherit; }
.trip:disabled { opacity: .45; cursor: not-allowed; }
.trip-times { display: flex; flex-direction: column; align-items: center; min-width: 52px; font-variant-numeric: tabular-nums; }
.trip-times small { color: var(--ink-3); font-size: 11px; font-weight: 700; }
fieldset.pax { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.ticket { padding: 0; overflow: hidden; margin: 10px 0; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--deep); color: #fff; font-weight: 800; }
.ticket-top .ic { color: var(--gold); vertical-align: -4px; }
.ticket-route { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; padding: 16px; text-align: center; }
.ticket-route strong { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.ticket-route span { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.ticket-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.ticket-mid i { display: block; width: 100%; border-top: 2px dashed var(--line); }
.ticket-date { text-align: center; margin: -6px 0 10px; color: var(--ink-2); font-weight: 700; font-size: 13.5px; }
.pax-list { list-style: none; margin: 0; padding: 0 16px; border-top: 1px dashed var(--line); }
.pax-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.ticket .qr.small { width: 170px; margin: 14px auto 4px; background: #fff; padding: 8px; border-radius: 12px; }
.ticket .qr svg { display: block; width: 100%; height: auto; }
.ticket-code { text-align: center; margin: 4px 0 10px; } .ticket-code small { display: block; color: var(--ink-3); font-weight: 700; } .ticket-code strong { font-size: 22px; letter-spacing: .12em; }
.ticket dl.summary, .ticket .hint { padding: 0 16px; }

/* Food */
.resto-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.resto { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--ink); }
.resto-art { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; flex: none; background: #FFE6DF; color: #C2431F; }
.resto-art .ic { width: 30px; height: 30px; }
.resto-art.big { width: 72px; height: 72px; }
.resto-art.c-grill { background: #FFE9D2; color: #B05A00; } .resto-art.c-pizza, .resto-art.c-burgers { background: #FFF4D1; color: #A87800; }
.resto-art.c-nigerian, .resto-art.c-ghanaian, .resto-art.c-ivorian, .resto-art.c-senegalese, .resto-art.c-kenyan, .resto-art.c-swahili { background: #E2F5EC; color: #0E6B47; }
.resto .item-main small { display: flex; align-items: center; gap: 4px; }
.resto-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.resto-head h1 { margin: 0; }
.dish { align-items: flex-start; }
.dish-price { font-weight: 800; margin-top: 4px; color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 8px; }
.round-sm { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.round-sm.add { background: var(--primary); border-color: var(--primary); color: #fff; }
.cart-bar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); margin-top: 16px; }
.cart-bar .btn { box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* Parcels */
fieldset.leg { border: 0; padding: 0; margin: 0; }
fieldset.leg legend { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 6px; }
fieldset.leg select { flex: 1; min-width: 0; }
.sizes .radio-card span { align-items: flex-start; }
.ic.sz-small { width: 18px; height: 18px; } .ic.sz-medium { width: 24px; height: 24px; } .ic.sz-large { width: 30px; height: 30px; }
.code-card { text-align: center; } .code-card small { color: var(--ink-3); font-weight: 700; } .code-card strong { display: block; font-size: 34px; letter-spacing: .3em; margin: 4px 0; }

/* Orders and tracking */
.order-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; }
.order-head h1 { margin: 0 0 4px; font-size: 22px; }
.order-head .sub { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 16px 24px; display: flex; flex-direction: column; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.timeline li::after { content: ''; position: absolute; inset-inline-start: 5px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.now::before { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.timeline li span { font-weight: 700; } .timeline li small { color: var(--ink-3); font-weight: 600; }
[dir=rtl] .timeline li { padding: 0 24px 16px 0; }
.person { display: flex; align-items: center; gap: 12px; }
.person .avatar.big { width: 52px; height: 52px; font-size: 20px; }
.person small { color: var(--ink-3); font-weight: 600; }
.plate { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 6px; font-weight: 800; letter-spacing: .06em; font-size: 13px; align-self: flex-start; }
.btn.disabled { opacity: .5; pointer-events: none; }
.searching { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.searching small { color: var(--ink-3); }
.pulse { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); animation: pulse 1.6s ease-out infinite; }
.pulse .ic { width: 30px; height: 30px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.rate { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars { display: flex; gap: 2px; }
.star { border: 0; background: none; padding: 4px; color: var(--line); cursor: pointer; }
.star .ic { width: 28px; height: 28px; }
.star.on { color: var(--gold); } .star.on .ic { fill: var(--gold); }

/* Money */
.balance-card.slim .balance { margin-bottom: 12px; }
.money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.money-tile { display: flex; gap: 10px; align-items: center; padding: 14px; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--ink); min-width: 0; }
.money-tile > .ic { width: 30px; height: 30px; padding: 6px; border-radius: 11px; box-sizing: content-box; background: var(--c); color: var(--cf); flex: none; }
.money-tile span { display: flex; flex-direction: column; min-width: 0; }
.money-tile small { color: var(--ink-3); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-savings { --c: #FFF4D1; --cf: #A87800; } .t-goals { --c: #E2F5EC; --cf: #0E6B47; } .t-loans { --c: #EAE6FF; --cf: #5B45C9; } .t-tontine { --c: #FFE9E2; --cf: #B4421F; }
.t-cards { --c: #EDE7FF; --cf: #6B3FC8; } .t-send { --c: #E3F0FF; --cf: #2160C4; } .t-pay { --c: #FCE4F0; --cf: #B02A6E; } .t-bills { --c: #E6F4EA; --cf: #1E7B45; }
.savings-total { display: flex; flex-direction: column; } .savings-total strong { font-size: 30px; } .savings-total small { color: var(--ink-3); font-weight: 700; }
.rate-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; } .rate-chips .hint { margin: 0; }
.goal-bar { display: block; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.goal-bar span { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.goal-bar.big { height: 10px; background: rgba(255,255,255,.2); } .goal-bar.big span { background: var(--gold); }
.item-end small.in { color: var(--ok); font-weight: 700; }
.pot-hero { background: radial-gradient(120% 140% at 100% 0%, #C99A12 0%, #6E4B00 70%); color: #fff; border-radius: 24px; padding: 20px; text-align: center; margin: 6px 0 12px; }
.pot-hero.locked { background: radial-gradient(120% 140% at 100% 0%, #7A62E0 0%, #2E1F78 70%); }
.pot-hero.tontine { background: radial-gradient(120% 140% at 100% 0%, #E2734A 0%, #6B2410 70%); }
.pot-hero .tx-ic { margin: 0 auto 8px; background: rgba(255,255,255,.15); color: #fff; }
.pot-hero h1 { margin: 0; } .pot-hero p { margin: 4px 0; font-weight: 600; opacity: .95; }
.pot-hero .balance { margin: 8px 0 4px; }
.hint-light { font-size: 13px; opacity: .85; }
.pot-hero .row { margin-top: 12px; } .pot-hero .btn { flex: 1; }
.loan-card .big-val { font-size: 30px; margin: 6px 0 0; }
.loan-card .limit-bar { background: var(--surface-2); margin: 10px 0; }
.loan-card.overdue { box-shadow: inset 0 0 0 2px var(--bad), var(--shadow); }
.limit-line { display: flex; flex-direction: column; margin: 0 0 8px; } .limit-line small { color: var(--ink-3); font-weight: 700; } .limit-line strong { font-size: 30px; color: var(--primary); }
input[type=range] { width: 100%; accent-color: var(--primary); }
.pos { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; flex: none; }
.code-share { text-align: center; } .code-share strong { display: block; font-size: 30px; letter-spacing: .25em; margin: 4px 0; } .code-share .row { justify-content: center; flex-wrap: wrap; }

/* Pay */
.pay-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.pay-big { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 16px; border-radius: var(--radius); background: var(--primary); color: #fff; border: 0; font: inherit; text-align: start; cursor: pointer; }
.pay-big .ic { width: 34px; height: 34px; margin-bottom: 6px; color: var(--gold); }
.pay-big strong { font-size: 16px; } .pay-big small { opacity: .85; font-weight: 600; }
.pay-big.alt { background: var(--deep); }
.req p.hint { margin: 6px 0; }
.scanner { position: relative; aspect-ratio: 1; max-width: 360px; margin: 6px auto 12px; border-radius: 24px; overflow: hidden; background: #000; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner .frame { position: absolute; inset: 18%; border: 3px solid var(--gold); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.scanner p { position: absolute; bottom: 8px; inset-inline: 12px; color: #fff; text-align: center; margin: 0; }
.scanner.off { aspect-ratio: auto; background: var(--surface-2); padding: 18px; } .scanner.off video, .scanner.off .frame { display: none; }
.scanner.off p { position: static; color: var(--ink-2); }
.merchant-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 12px; } .merchant-head h1 { margin: 0; }
.merchant-qr .qr { width: 240px; margin: 8px auto; background: #fff; padding: 10px; border-radius: 14px; } .merchant-qr .qr svg { width: 100%; height: auto; display: block; }
.brand-line { font-weight: 800; color: var(--primary); margin: 0; }
.big-code { font-size: 30px; letter-spacing: .2em; }
.receipt .ic.big.ok { color: var(--ok); width: 56px; height: 56px; }
.sheet .qr { width: 230px; margin: 6px auto; background: #fff; padding: 10px; border-radius: 14px; } .sheet .qr svg { width: 100%; height: auto; display: block; }
@media print { body * { visibility: hidden; } #printable, #printable * { visibility: visible; } #printable { position: absolute; inset: 0; box-shadow: none; } }

/* Notifications */
.notif-list li { list-style: none; }
.notif-list a.tx { color: var(--ink); }
.notif-list a.unread .tx-title { font-weight: 800; }
.notif-list a.unread { background: color-mix(in srgb, var(--primary) 6%, transparent); margin-inline: -14px; padding-inline: 14px; }
.bell-dot[hidden] { display: none; }
.swap { inset-inline-end: 56px; }
.round-sm .ic { color: inherit; }
.inline-select { flex-direction: row !important; align-items: center !important; }
[hidden] { display: none !important; }
.balance-card.slim .row.gap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.balance-card.slim .btn { flex-direction: column; padding: 8px 4px; font-size: 13px; line-height: 1.2; gap: 4px; min-width: 0; text-align: center; white-space: normal; }
.sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-next { margin: 6px 0 -4px; }
.mt-10 { margin-top: 10px; }

/* ===== v7: cashier (pay from the wallet or directly at checkout) ===== */
.cashier-amount { font-size: 34px; margin: 2px 0 14px; letter-spacing: -0.5px; }
.pay-methods { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pay-methods legend { font-weight: 700; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; position: relative; }
.pay-row input { position: absolute; opacity: 0; pointer-events: none; }
.pay-row:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
.pay-row:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.pay-row.disabled { opacity: .55; cursor: not-allowed; }
.pay-row::after { content: ""; margin-inline-start: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.pay-row:has(input:checked)::after { border: 5px solid var(--primary); }
.pay-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.pay-ic .ic { width: 20px; height: 20px; }
.pay-ic.wallet { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.pay-row.m-mtn_momo .pay-ic { background: #FFE9A8; color: #6B5200; }
.pay-row.m-orange_money .pay-ic { background: #FFE0CC; color: #B44A00; }
.pay-txt { display: flex; flex-direction: column; min-width: 0; }
.pay-txt small { color: var(--ink-3, var(--ink-2)); font-weight: 500; }
.small-label { font-size: 14px; }
.approve { text-align: center; padding: 18px 4px 8px; }
.approve h2 { margin: 14px 0 8px; }
.approve-ic { position: relative; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.approve-ic .ic { width: 32px; height: 32px; }
.approve-ic .pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); animation: approve-pulse 1.6s ease-out infinite; }
@keyframes approve-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .approve-ic .pulse { animation: none; } }
.form .pay-row { flex-direction: row; align-items: center; text-align: start; font-weight: 400; color: var(--ink); gap: 12px; margin: 0; }
.form .pay-row .pay-txt strong { font-weight: 700; }
.cashier .summary { margin-top: 4px; }
.cashier .summary dt { white-space: nowrap; }

/* ===== v8: Ziva Driver (drivers and couriers), live maps, partner admin ===== */
.brand-tag { margin-inline-start: 6px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: var(--accent-2, #F4B41A); color: #0B3D2A; padding: 2px 6px; border-radius: 6px; }
.tabbar-driver { grid-template-columns: repeat(3, 1fr); }
.drv-status { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin: 4px 0 12px; border: 2px solid transparent; transition: border-color .2s; }
.drv-status.online { border-color: var(--primary); }
.drv-row { display: flex; align-items: center; gap: 12px; }
.drv-row .grow { display: flex; flex-direction: column; min-width: 0; }
.drv-row strong { font-size: 18px; }
.drv-row small { color: var(--ink-2); }
.drv-veh { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.drv-status.online .drv-veh { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.drv-veh .ic { width: 24px; height: 24px; }
.drv-switch { position: relative; width: 64px; height: 36px; border-radius: 18px; border: 0; background: var(--line); cursor: pointer; flex: none; transition: background .2s; }
.drv-switch span { position: absolute; top: 4px; inset-inline-start: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s; }
.drv-switch.on { background: var(--primary); }
.drv-switch.on span { transform: translateX(28px); }
[dir="rtl"] .drv-switch.on span { transform: translateX(-28px); }
.drv-switch:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.drv-today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.drv-today > div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.drv-today small { color: var(--ink-2); font-size: 12px; }
.drv-today strong { font-size: 17px; }
.drv-gps { margin-top: 10px; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.drv-gps:empty { display: none; }
.drv-gps span { display: inline-flex; align-items: center; gap: 6px; }
.drv-gps .ic { width: 16px; height: 16px; }
.drv-gps .ok { color: var(--primary); }
.drv-gps .bad { color: #B3261E; }
.drv-test-pos { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.drv-test-pos select { padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.drv-map-wrap { position: relative; }
.drv-map, .order-map, .adm-map { height: 240px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); z-index: 0; }
.adm-map { height: 62vh; min-height: 360px; }
.order-map { margin: 10px 0 4px; height: 220px; }
.map-off { display: none; }
.drv-recenter { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 500; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.map-eta { margin: 6px 2px 0; font-weight: 700; color: var(--primary); }
.map-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 13px; color: #fff; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); font-style: normal; }
.map-pin.pickup { background: #0E6B47; }
.map-pin.dropoff { background: #E4573D; }
.map-pin.me { background: #2F6FDE; box-shadow: 0 0 0 6px rgba(47,111,222,.25), 0 2px 6px rgba(0,0,0,.35); }
.map-pin.vehicle { background: #F4B41A; }
.map-pin.vehicle.busy { background: #7A3FD1; }
.map-pin.vehicle::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0B3D2A; }
.map-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .map-pin { width: 18px; height: 18px; border-width: 2px; font-size: 10px; }
.leaflet-container { font: inherit; }
.drv-wait { text-align: center; padding: 22px 10px 8px; color: var(--ink-2); }
.drv-wait.off p { font-weight: 600; }
.drv-radar { display: block; width: 14px; height: 14px; margin: 0 auto 12px; border-radius: 50%; background: var(--primary); animation: radar 1.8s ease-out infinite; }
@keyframes radar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } }
@media (prefers-reduced-motion: reduce) { .drv-radar { animation: none; } }
.drv-job { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.drv-job-head { display: flex; align-items: center; gap: 12px; }
.drv-job-head .grow { display: flex; flex-direction: column; min-width: 0; }
.drv-job-head small { color: var(--ink-2); font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.drv-kind { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); flex: none; }
.drv-earn-pill { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); padding: 6px 10px; border-radius: 10px; white-space: nowrap; }
.drv-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.drv-stops li { display: flex; gap: 12px; align-items: flex-start; }
.drv-stops li > div { display: flex; flex-direction: column; min-width: 0; }
.drv-stops small { color: var(--ink-2); }
.drv-stops .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex: none; }
.drv-stops .dot.a { background: #0E6B47; }
.drv-stops .dot.b { background: #E4573D; }
.drv-stops li.done { opacity: .55; }
.drv-stops li.now strong { font-size: 17px; }
.drv-people { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.drv-people > div { display: flex; flex-direction: column; }
.drv-people small { color: var(--ink-2); font-size: 12px; }
.drv-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drv-items span { font-weight: 800; color: var(--primary); }
.drv-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF4D1; color: #6B5200; display: flex; gap: 8px; align-items: center; }
.btn.big { padding-block: 16px; font-size: 17px; }
.drv-offer-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(8, 20, 14, 0); display: flex; align-items: flex-end; justify-content: center; transition: background .2s; }
.drv-offer-wrap.open { background: rgba(8, 20, 14, .6); }
.drv-offer { background: var(--bg); width: 100%; max-width: 520px; border-radius: 24px 24px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s ease-out; display: flex; flex-direction: column; gap: 14px; }
.drv-offer-wrap.open .drv-offer { transform: none; }
.drv-offer-top { display: flex; align-items: center; gap: 12px; }
.drv-offer-top h2 { margin: 0; flex: 1; font-size: 20px; }
.drv-count { position: relative; width: 48px; height: 48px; flex: none; }
.drv-count svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.drv-count circle { fill: none; stroke-width: 3.5; }
.drv-count .track { stroke: var(--line); }
.drv-count .bar { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.drv-count span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; }
.drv-earning { margin: 0; font-size: 34px; font-weight: 800; color: var(--primary); display: flex; flex-direction: column; line-height: 1.1; }
.drv-earning small { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.drv-offer-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.drv-offer-actions .btn { padding-block: 16px; font-size: 17px; }
.drv-hero { text-align: center; padding: 18px 8px 6px; }
.drv-hero h1 { margin: 12px 0 6px; }
.drv-hero p { color: var(--ink-2); margin: 0 auto; max-width: 420px; }
.drv-hero-ic { width: 72px; height: 72px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; background: #F4B41A; color: #0B3D2A; }
.drv-hero-ic.wait { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.drv-hero-ic.stop { background: #FDE2DF; color: #B3261E; }
.drv-hero-ic .ic { width: 34px; height: 34px; }
.radio-card span small { font-weight: 500; color: var(--ink-2); margin-top: 4px; }
.radio-card span .ic { width: 20px; height: 20px; margin-bottom: 4px; }
.radio-card input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.drv-docs .item { align-items: center; }
.tx-ic.k-ok { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.file-btn { cursor: pointer; white-space: nowrap; }
.file-btn.busy { opacity: .6; pointer-events: none; }
.code-input { font-size: 28px; letter-spacing: 10px; text-align: center; font-family: var(--mono, ui-monospace, monospace); }
.drv-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px; }
.drv-totals > div { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.drv-totals small, .drv-totals span { color: var(--ink-2); font-size: 12px; }
.drv-totals strong { font-size: 17px; }
.s-partner { --svc: #A87800; }
.drv-profile { display: flex; align-items: center; gap: 14px; }
.drv-profile h1 { margin: 0; font-size: 22px; }
.admin-links { margin: 6px 0 4px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.chip.on { background: var(--ink); color: var(--bg); }
.adm-partners { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.adm-p-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.adm-p-head > div { display: flex; flex-direction: column; }
.adm-p-head small { color: var(--ink-2); }
.summary.compact { margin: 10px 0; font-size: 14px; }
.adm-docs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.adm-doc { border: 0; background: none; padding: 0; display: flex; flex-direction: column; gap: 4px; cursor: zoom-in; color: var(--ink-2); font: inherit; text-align: center; }
.adm-doc[disabled] { cursor: default; opacity: .5; }
.adm-doc .thumb { aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.adm-doc .thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-doc small { font-size: 11px; line-height: 1.2; }
.adm-doc-full { width: 100%; border-radius: 12px; }
.pill.muted { background: var(--surface-2); color: var(--ink-2); }
@media (max-width: 380px) { .adm-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.summary.compact { grid-template-columns: max-content 1fr; column-gap: 14px; }
.summary.compact dt { white-space: nowrap; }
.summary.compact dd { text-align: end; overflow-wrap: anywhere; }
.min-wd { margin: 10px 0 0; font-size: 13px; opacity: .85; }
.drv-map-wrap, .drv-map, .order-map, .adm-map { isolation: isolate; }
.drv-recenter { z-index: 2; }