:root {
  /* Tailwind v4-style runtime tokens: one palette, shared by every surface. */
  --color-fd-black: #020302;
  --color-fd-ink: #080a0d;
  --color-fd-panel: #11161d;
  --color-fd-panel-2: #171d26;
  --color-fd-line: #30333a;
  --color-fd-text: #f7f7f2;
  --color-fd-muted: #aeb4bc;
  --color-fd-yellow: #ffd400;
  --color-fd-yellow-soft: #ffe66d;
  --color-fd-blue: #4d8dff;
  --color-fd-success: #55d68d;
  --fd-bg: var(--color-fd-ink);
  --fd-panel: var(--color-fd-panel);
  --fd-panel-2: var(--color-fd-panel-2);
  --fd-line: var(--color-fd-line);
  --fd-text: var(--color-fd-text);
  --fd-muted: var(--color-fd-muted);
  --fd-info: var(--color-fd-blue);
  --fd-success: var(--color-fd-success);
  --fd-blue: var(--color-fd-blue);
  --fd-yellow: var(--color-fd-yellow);
  --fd-yellow-soft: var(--color-fd-yellow-soft);
  --fd-green: var(--color-fd-yellow);
  --fd-amber: var(--color-fd-yellow-soft);
  --fd-danger: #ff8f8f;
  --fd-toolbar: #000;
  --fd-toolbar-line: rgba(255,212,0,.42);
  --fd-surface: rgba(10,12,14,.88);
  --fd-surface-strong: rgba(16,19,23,.96);
  --fd-line-soft: rgba(255,255,255,.09);
  --fd-line-brand: rgba(255,212,0,.28);
  --fd-surface-glass: rgba(10,13,17,.84);
  --fd-surface-raised: rgba(22,27,34,.96);
  --fd-radius-sm: 10px;
  --fd-radius: 14px;
  --fd-radius-lg: 20px;
  --fd-radius-xl: 28px;
  --fd-shadow: 0 22px 60px rgba(0,0,0,.42);
  --fd-panel-shadow: 0 28px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(255,212,0,.08);
  --fd-focus-ring: 0 0 0 4px rgba(255,212,0,.14);
  --fd-ease: cubic-bezier(.2,.8,.2,1);
}

/* Launch accessibility and compliance surfaces. */
.skip-link { position: fixed; left: 14px; top: 12px; z-index: 10000; padding: 10px 14px; border-radius: 10px; background: var(--accent, #f7b84b); color: #111; font-weight: 800; transform: translateY(-160%); transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #f7b84b; outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.auth-consent, .checkout-consent { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: 13px; line-height: 1.45; }
.auth-consent input, .checkout-consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: #f7b84b; }
.checkout-total small { display: block; margin-top: 3px; color: var(--muted, #9da5b4); font-weight: 500; }
.checkout-disclosure, .permission-note, .permission-disclosure p { color: var(--muted, #aab2bf); font-size: 12px; line-height: 1.5; }
.permission-note { margin: -4px 0 10px; }
.permission-disclosure p { margin: 5px 0 0; }
.launch-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.legal-kicker { color: #f7b84b; font-size: 12px; font-weight: 900; letter-spacing: 1.8px; }
.legal-updated { color: var(--muted, #9da5b4); font-size: 13px; }
.legal-wrap { line-height: 1.65; }
.legal-wrap h2 { margin-top: 28px; }
.legal-wrap li + li { margin-top: 8px; }
.legal-footer { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.support-grid section { padding: 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.025); }
.support-grid h2 { margin-top: 0; }
@media (max-width: 620px) { .support-grid { grid-template-columns: 1fr; } .btn, button, select { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
@media (forced-colors: active) { :where(a, button, input, select, textarea):focus-visible { outline: 3px solid Highlight; } }
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Aptos', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(135deg, #020302, var(--fd-bg) 52%, #111006);
  color: var(--fd-text); height: 100vh; overflow: hidden;
}
body.fd-splashing { overflow: hidden; }
.hidden { display: none !important; }
#map { position: fixed; inset: 0; z-index: 0; background: #d9d7cd; }
.leaflet-container { background: #d9d7cd; }
.leaflet-tile-pane { filter: saturate(.78) contrast(.94) brightness(.93); }
body.light .leaflet-tile-pane { filter: saturate(.9) contrast(.98); }

.fd-splash {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background:
    linear-gradient(145deg, #000 0%, #050607 52%, #111006 100%);
  transition: opacity .16s ease, visibility .16s ease;
}
.fd-splash.is-hiding { opacity: 0; visibility: hidden; }
.fd-splash-inner { display: grid; justify-items: center; gap: 18px; transform: translateY(-1vh); }
.fd-splash-logo {
  width: min(260px, 62vw); height: auto; display: block; border-radius: 20px;
  background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.08);
}
.fd-splash-bar {
  position: relative; width: min(220px, 52vw); height: 3px; overflow: hidden;
  border-radius: 999px; background: rgba(255,255,255,.14);
}
.fd-splash-bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 44%; border-radius: inherit;
  background: linear-gradient(90deg, #ffd400, #fff7b2, #ffd400);
  animation: fdSplashSweep 1.05s ease-in-out infinite;
}
@keyframes fdSplashSweep {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(230%); }
}
/* Crawlable editorial surface, intentionally separate from authenticated
   parcel and private-chat screens. */
body.guide-page { height: auto; min-height: 100%; overflow: auto; overscroll-behavior: auto; }
.guide-wrap { width: min(860px, calc(100% - 28px)); margin: 28px auto; padding: clamp(22px, 5vw, 52px); }
.guide-lede { max-width: 68ch; font-size: clamp(17px, 2.3vw, 21px); color: var(--fd-muted); }
.guide-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.guide-index a { padding: 8px 12px; border: 1px solid var(--fd-line-brand); border-radius: 999px; color: var(--fd-text); text-decoration: none; font-weight: 750; }
.guide-wrap section { scroll-margin-top: 20px; }
.guide-wrap h3 { margin-top: 18px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .fd-splash, .fd-splash-bar::after { transition: none; animation: none; }
  .customer-journey-card, .receive-card { transition: none; }
  .scan-reticle > span { animation: none; }
}

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 8px;
  min-height: 64px; padding: 7px 14px; background: rgba(0,0,0,.94); border-bottom: 1px solid rgba(255,212,0,.28);
  backdrop-filter: blur(24px) saturate(140%); box-shadow: 0 18px 50px rgba(0,0,0,.36), inset 0 -1px 0 rgba(255,255,255,.025); }
.topbar b { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; letter-spacing: -.25px; line-height: 1; }
.topbar .brand-lockup { flex: 0 0 auto; width: auto; min-height: 44px; overflow: visible; }
.topbar b::after { content: "live logistics"; margin-left: 3px; color: var(--fd-yellow); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: 1.5px; }
.topbar b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 9px; background: #000; }
.topbar .brand-logo { flex: 0 0 48px; width: 48px; height: 40px; object-fit: contain; object-position: center; border-radius: 0; background: var(--fd-toolbar); box-shadow: none; margin: 0; }
.auth-logo, .brand-hero-logo, .legal-logo { display: block; object-fit: contain; background: #000; box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.auth-logo { width: min(176px, 48vw); height: auto; margin: 0 auto 12px; border-radius: 14px; }
.brand-hero-logo { width: min(220px, 56vw); height: auto; margin: 0 auto 14px; border-radius: 16px; }
.legal-logo { width: 112px; height: auto; margin: 0 0 16px; border-radius: 12px; }
.topbar .spacer { flex: 1 1 auto; min-width: 8px; }
.mode-switcher { display: flex; align-items: center; flex: 0 1 auto; max-width: min(420px, 44vw); padding: 3px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(18,20,22,.92); overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.mode-switcher::-webkit-scrollbar { display: none; }
.mode-switcher a { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; padding: 7px 13px;
  border-radius: 999px; color: #aeb4bc; font-size: 13px; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.mode-switcher a:hover { background: rgba(255,255,255,.055); color: #fff; }
.mode-switcher a.active { background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft)); color: #090907; font-weight: 850;
  box-shadow: 0 8px 22px rgba(255,212,0,.16), inset 0 1px 0 rgba(255,255,255,.42); }
.topbar-tabs { display: contents; }
.pill { min-height: 38px; display: inline-flex; align-items: center; background: rgba(28,34,48,.9); border: 1px solid var(--fd-line); border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 650; }
.voice-agent-btn { min-width: 74px; width: auto; }
.lexi-type-form { display: inline-flex; gap: 6px; align-items: center; }
.lexi-type-input { min-height: 46px; padding: 0 12px; border-radius: 12px; background: rgba(19,20,15,.86); border: 1px solid rgba(255,212,0,.18); color: #f7f7f2; font-size: 15px; width: 190px; max-width: 44vw; }
.lexi-type-input::placeholder { color: rgba(247,247,242,.55); }
.lexi-type-input:focus { outline: none; border-color: rgba(255,212,0,.42); }
.topbar .pill, .topbar .btn.sm { background: rgba(19,20,15,.86); border-color: rgba(255,212,0,.18); color: #f7f7f2; }
.topbar .btn.sm:hover { background: #242015; border-color: rgba(255,212,0,.42); }
.topbar .voice-agent-btn.btn.go { background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft)); border-color: transparent; color: #080807; }
.active-members-pill { order: 30; min-height: 38px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 6px 12px; border: 1px solid rgba(85,214,141,.34); border-radius: 999px;
  background: rgba(10,28,18,.94); color: #bff3d3; font-size: 12px; font-weight: 800; white-space: nowrap; }
.active-members-pill:empty { display: none; }
.active-members-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fd-success);
  box-shadow: 0 0 0 4px rgba(85,214,141,.12); }
.eta-readout { margin-top: 7px; padding: 8px 10px; border: 1px solid rgba(77,141,255,.32); border-radius: 10px;
  background: rgba(77,141,255,.1); color: #bcd4ff; font-weight: 750; }
.eta-control { margin: 10px 0; padding: 10px; border: 1px solid rgba(77,141,255,.24); border-radius: 12px; background: rgba(77,141,255,.06); }
.eta-control > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 850; color: #dce8ff; }
.return-form { width: min(520px, calc(100vw - 28px)); }
.return-form textarea { width: 100%; min-height: 108px; padding: 11px 13px; margin: 4px 0; resize: vertical;
  border: 1px solid #2b3444; border-radius: var(--fd-radius-sm); background: rgba(12,17,29,.92); color: #f1f3f5; font: inherit; font-size: 16px; }
.return-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.return-state { display: inline-flex; min-height: 36px; align-items: center; margin-top: 8px; padding: 6px 10px;
  border: 1px solid rgba(77,141,255,.3); border-radius: 999px; background: rgba(77,141,255,.1); color: #c8dcff; font-size: 12px; font-weight: 800; }

.panel { position: fixed; left: 14px; top: 78px; bottom: 14px; z-index: 1000; width: 360px; max-width: calc(100vw - 28px);
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 8px;
  border: 1px solid var(--fd-line-brand); border-radius: var(--fd-radius-lg);
  background: linear-gradient(180deg, rgba(8,10,12,.94), rgba(4,5,6,.88));
  box-shadow: var(--fd-panel-shadow); backdrop-filter: blur(24px) saturate(125%); scrollbar-width: thin; }
.panel::-webkit-scrollbar, .drawer::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb, .drawer::-webkit-scrollbar-thumb { background: rgba(255,212,0,.28); border-radius: 999px; }
.card { background: linear-gradient(150deg, var(--fd-surface-raised), rgba(8,10,12,.96) 78%); border: 1px solid var(--fd-line-soft); border-radius: var(--fd-radius); padding: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); }
.panel > .card { box-shadow: none; }
.panel > #parcelCard { order: -3; }
.panel > #receiveCard { order: -2; }
.panel > #smsCard { order: -1; }
body[data-customer-journey="receive"] .panel > #receiveCard { order: -4; }
.customer-journey-card, .receive-card { transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.customer-journey-card.journey-primary, .receive-card.journey-primary {
  border-color: rgba(255,212,0,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 1px rgba(255,212,0,.05);
}
.booking-mode-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  margin-bottom: 18px; padding: 4px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; background: rgba(2,3,4,.72);
}
.booking-mode-tab {
  min-width: 0; min-height: 58px; display: grid; grid-template-columns: 30px minmax(0, 1fr);
  align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 12px; background: transparent; color: var(--fd-muted); font: inherit;
  text-align: left; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.booking-mode-tab:hover { color: var(--fd-text); background: rgba(255,255,255,.045); }
.booking-mode-tab:focus-visible { outline: none; box-shadow: var(--fd-focus-ring); }
.booking-mode-tab.is-active {
  border-color: rgba(255,212,0,.48); background: var(--fd-yellow); color: #080807;
  box-shadow: 0 8px 22px rgba(255,212,0,.12);
}
.booking-mode-tab > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.booking-mode-tab strong { font-size: 14px; line-height: 1.1; }
.booking-mode-tab small { overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.2; opacity: .72; text-overflow: ellipsis; white-space: nowrap; }
.booking-mode-icon { position: relative; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 9px; }
.booking-mode-icon::before, .booking-mode-icon::after { content: ""; position: absolute; }
.booking-mode-icon-send::before { left: 6px; top: 7px; width: 11px; height: 8px; border: 2px solid currentColor; border-radius: 2px; }
.booking-mode-icon-send::after { right: 3px; top: 4px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.booking-mode-icon-receive::before { left: 6px; top: 6px; width: 11px; height: 9px; border: 2px solid currentColor; border-radius: 2px; }
.booking-mode-icon-receive::after { left: 8px; bottom: 4px; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.send-card-intro { margin-bottom: 16px; }
.send-kicker { display: block; margin-bottom: 6px; color: var(--fd-yellow); font-size: 10px; font-weight: 900; letter-spacing: 1.7px; }
.card h3.send-title { margin: 0; padding: 0; border: 0; color: var(--fd-text); font-size: 21px; line-height: 1.1; letter-spacing: -.4px; text-transform: none; }
.send-card-intro p { margin-top: 8px; color: var(--fd-muted); font-size: 14px; line-height: 1.45; }
.booking-route {
  position: relative; display: grid; gap: 10px; margin: 0 0 10px; padding: 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: rgba(7,10,14,.76);
}
.booking-route-stop { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; }
.booking-route-stop:first-child::after {
  content: ""; position: absolute; left: 9px; top: calc(50% + 8px); bottom: calc(-50% - 11px);
  width: 2px; background: linear-gradient(var(--fd-yellow), rgba(255,255,255,.22));
}
.booking-route-node {
  position: relative; z-index: 1; width: 12px; height: 12px; justify-self: center;
  border: 3px solid var(--fd-yellow); border-radius: 3px; background: #080a0d;
}
.booking-route-destination .booking-route-node { border-radius: 50%; background: var(--fd-yellow); box-shadow: 0 0 0 4px rgba(255,212,0,.12); }
.booking-route-field {
  min-width: 0; padding: 8px 11px; border: 1px solid #293141; border-radius: 13px;
  background: rgba(15,20,29,.96); transition: border-color .16s ease, box-shadow .16s ease;
}
.booking-route-field:focus-within { border-color: var(--fd-yellow); box-shadow: var(--fd-focus-ring); }
.booking-route-field label, .booking-size-field label, .booking-details-fields label {
  display: block; color: #aeb4bc; font-size: 10px; font-weight: 850; letter-spacing: .75px; text-transform: uppercase;
}
.booking-route-field input, .booking-route-field select {
  min-height: 34px; margin: 0; padding: 2px 30px 0 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--fd-text); font-size: 16px; font-weight: 750;
}
.booking-route-field input:focus, .booking-route-field select:focus { border: 0; background: transparent; box-shadow: none; }
.booking-route-field input::placeholder { color: #8f98a5; }
.booking-route-field small { display: block; margin-top: 2px; color: #88919e; font-size: 10px; line-height: 1.35; }
.booking-route-field .results { margin: 3px -3px -3px; }
.booking-trust-note {
  margin: 9px 2px 14px; padding-left: 20px; color: #aeb4bc; font-size: 11px; line-height: 1.45;
}
.booking-trust-note::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 7px 0 -17px;
  border: 2px solid var(--fd-success); border-radius: 50%; vertical-align: -1px;
}
.booking-size-field { margin-bottom: 10px; }
.booking-size-field select { margin-top: 5px; }
.booking-details {
  margin: 8px 0 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: rgba(255,255,255,.025); overflow: hidden;
}
.booking-details summary {
  min-height: 46px; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; color: #dce0e6; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none;
}
.booking-details summary::-webkit-details-marker { display: none; }
.booking-details summary::after { content: "+"; color: var(--fd-yellow); font-size: 20px; font-weight: 500; }
.booking-details[open] summary::after { content: "-"; }
.booking-details-fields { padding: 0 12px 12px; border-top: 1px solid rgba(255,255,255,.06); }
.booking-details-fields label { margin-top: 11px; }
.booking-details-fields input { margin-top: 5px; }
.booking-quote-cta { min-height: 54px; margin-top: 2px; border-radius: 14px; font-size: 15px; }
.booking-history-btn { margin-top: 8px; color: var(--fd-muted); }
.card h3 { font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 1.45px; color: #dfe3e8; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,212,0,.14); }

input, select { width: 100%; min-height: 48px; padding: 11px 13px; margin: 4px 0; border-radius: var(--fd-radius-sm); border: 1px solid #2b3444;
  background: rgba(12,17,29,.92); color: #f1f3f5; font: inherit; font-size: 16px; outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
input::placeholder { color: #7d8592; opacity: 1; }
input:hover, select:hover { border-color: #3b4558; }
input:focus, select:focus { border-color: var(--fd-yellow); background: #0d1422; box-shadow: var(--fd-focus-ring); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; text-decoration: none;
  padding: 10px 15px; border-radius: var(--fd-radius-sm); border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #1b2027, #11151b); color: #f1f3f5; font-size: 14px; font-weight: 700;
  line-height: 1.12; letter-spacing: 0; cursor: pointer; width: 100%; margin-top: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s var(--fd-ease); }
.btn:hover { background: linear-gradient(180deg, #232832, #151922); border-color: rgba(255,212,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.24);
  transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.btn.primary, .btn.go { background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft)); border-color: transparent;
  color: #080807; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 4px 12px rgba(255,212,0,.10); }
.btn.primary:hover, .btn.go:hover { filter: brightness(1.03); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 6px 16px rgba(255,212,0,.14); }
.btn.danger { background: linear-gradient(180deg, #3f2020, #2a1414); border-color: #663333; color: #ffaaa8; }
.btn.danger:hover { background: linear-gradient(180deg, #512727, #321818); border-color: #884545; }
.btn.sm { width: auto; min-height: 42px; padding: 8px 13px; font-size: 12px; margin: 0; }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.16); color: #c9ced6; font-weight: 650; box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.04); border-color: rgba(255,212,0,.3); color: #f1f3f5; box-shadow: none; }
.btn.payout-btn { min-height: 44px; margin-top: 10px; }
.btn:disabled { opacity: .64; cursor: default; background: #111419; border-color: rgba(255,255,255,.08); color: #8f98a5;
  box-shadow: none; transform: none; }

.fd-status-badge { display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px;
  line-height: 1.25; font-weight: 800; text-align: right; }
.fd-status-ready, .fd-status-verified, .fd-status-completed { color: #8cf0b2; background: rgba(85,214,141,.13); }
.fd-status-pending, .fd-status-warning, .fd-status-attention { color: #ffe27a; background: rgba(255,212,0,.12); }
.fd-status-blocked, .fd-status-danger, .fd-status-tampered { color: #ffaaa8; background: rgba(255,94,94,.13); }
.fd-status-unavailable { color: #c5ccd7; background: rgba(154,165,181,.13); }

.fd-dialog { width: min(92vw, 420px); border: 1px solid rgba(255,214,30,.34); border-radius: 18px;
  padding: 20px; color: var(--fd-text); background: #10151c; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.fd-dialog::backdrop { background: rgba(0,0,0,.66); }
.fd-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.fd-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
body.light .fd-dialog { color: #18202c; background: #fff; border-color: #d7b928; }

.results { max-height: 160px; overflow-y: auto; }
.results div { padding: 8px 10px; font-size: 13px; color: #b9c0cc; border-radius: 7px; cursor: pointer; }
.results div:hover { background: #1c2230; color: #fff; }

.msg { font-size: 13px; color: #ffe66d; min-height: 18px; padding: 2px 4px; }
.err { color: #ff9a9a; font-size: 13px; min-height: 16px; margin: 4px 0; }
.courier-setup-copy { color: var(--fd-muted); font-size: 14px; line-height: 1.5; margin: 4px 0 12px; }
.courier-setup-copy + label, #courierSetupForm input + label { display: block; margin-top: 10px; font-weight: 750; }
.dim { color: #b2bac7; font-size: 13px; line-height: 1.5; margin-top: 10px; }
.dim a { color: #7fa3ff; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 12px; }
.legal-links a { color: #9fb4ff; text-decoration: none; }
.legal-links a:hover { color: #fff; text-decoration: underline; }
.legal-page { min-height: 100vh; height: auto; overflow: auto; padding: 42px 16px; }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-wrap h1 { font-size: 34px; margin-bottom: 18px; }
.legal-wrap h2 { margin-top: 22px; margin-bottom: 8px; font-size: 17px; }
.legal-wrap p { margin: 10px 0; color: #c8d2dc; line-height: 1.55; }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 14px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.055); }
.row:last-child { border-bottom: 0; }
.big { font-size: 22px; font-weight: 700; }
.receive-card {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 auto;
  border-color: rgba(255,212,0,.34);
  background:
    radial-gradient(circle at 110% -10%, rgba(255,212,0,.18), transparent 44%),
    linear-gradient(150deg, rgba(24,27,29,.98), rgba(8,10,12,.98) 74%);
}
.receive-card::before {
  content: ""; position: absolute; z-index: -1; right: -42px; top: -58px; width: 150px; height: 150px;
  border: 1px solid rgba(255,212,0,.14); border-radius: 32px; transform: rotate(18deg); pointer-events: none;
}
.receive-card-intro { margin-bottom: 14px; }
.receive-kicker { display: block; margin-bottom: 6px; color: var(--fd-yellow); font-size: 10px; font-weight: 900; letter-spacing: 1.7px; }
.card h3.receive-title, .card h3.scan-modal-title {
  margin: 0; padding: 0; border: 0; color: var(--fd-text); font-size: 23px; line-height: 1.08;
  letter-spacing: -.45px; text-transform: none;
}
.receive-card-intro p { margin-top: 8px; max-width: 32ch; color: var(--fd-muted); font-size: 14px; line-height: 1.45; }
.scan-cta {
  position: relative; min-height: 60px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 12px;
  align-items: center; gap: 12px; padding: 10px 16px; text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 6px 16px rgba(255,212,0,.10);
}
.scan-cta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 8px 20px rgba(255,212,0,.14); }
.scan-mark { position: relative; width: 32px; height: 32px; display: block; border: 2px solid currentColor; border-radius: 8px; }
.scan-mark::before, .scan-mark::after { content: ""; position: absolute; left: 5px; right: 5px; height: 2px; background: currentColor; border-radius: 2px; }
.scan-mark::before { top: 8px; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; opacity: .38; }
.scan-mark::after { top: 14px; height: 3px; opacity: 1; }
.scan-mark > span { position: absolute; inset: 4px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; opacity: .62; }
.scan-cta-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scan-cta-copy strong { font-size: 15px; line-height: 1.1; }
.scan-cta-copy small { font-size: 11px; font-weight: 750; opacity: .68; }
.scan-chevron { width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.manual-divider { display: flex; align-items: center; gap: 10px; margin: 13px 0 7px; color: #7f8792; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.manual-divider::before, .manual-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.08); }
.manual-barcode-label { display: block; color: #aeb4bc; font-size: 11px; font-weight: 750; }
.manual-receive-row { align-items: stretch; }
.manual-receive-row input { min-width: 0; margin: 4px 0 0; }
.manual-receive-row .btn { flex: 0 0 auto; min-height: 48px; margin-top: 4px; }
.barcode-box {
  margin-top: 10px;
  border: 1px solid rgba(255, 212, 0, 0.35);
  background: rgba(245, 246, 248, 0.98);
  color: #111;
  border-radius: 10px;
  padding: 8px 8px 10px;
}
.barcode-svg { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.barcode-text {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.barcode-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.barcode-actions .btn { flex: 1; }
.scan-cta.scan-cta-compact { min-height: 44px; display: flex; width: auto; padding: 7px 11px; text-align: center; }
.scan-cta-compact .scan-mark { width: 24px; height: 24px; border-radius: 6px; }
.scan-cta-compact .scan-mark::before { left: 4px; right: 4px; top: 6px; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.scan-cta-compact .scan-mark::after { left: 4px; right: 4px; top: 10px; height: 2px; }
.scan-cta-compact .scan-mark > span { inset: 3px; }
.barcode-scan-modal .card { width: min(540px, calc(100% - 28px)); }
.card h3.scan-modal-title { margin-bottom: 14px; }
.barcode-scan-modal .scan-area {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.3);
}
.barcode-scan-modal video {
  width: 100%;
  display: block;
  height: auto;
  min-height: 260px;
  background: #000;
}
.scan-reticle { position: absolute; inset: 18% 10%; border: 2px solid rgba(255,212,0,.82); border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0,0,0,.26), 0 0 28px rgba(255,212,0,.18); }
.scan-reticle > span { position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--fd-yellow) 16%, var(--fd-yellow) 84%, transparent);
  box-shadow: 0 0 12px rgba(255,212,0,.7); animation: barcode-scan-beam 2.2s ease-in-out infinite alternate; }
@keyframes barcode-scan-beam { from { transform: translateY(-48px); } to { transform: translateY(48px); } }
.barcode-scan-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: #aeb4bc; }

.status-banner { font-size: 15px; font-weight: 600; padding: 6px 0; }
.share-tagline { margin: 0 0 10px; color: var(--fd-yellow); font-size: 11px; font-weight: 850; letter-spacing: 2px; }
.status-requested, .status-matched { color: var(--fd-yellow-soft); }
.status-accepted, .status-arriving { color: #82aaff; }
.status-in_progress { color: var(--fd-success); }
.status-completed { color: var(--fd-success); }
.status-cancelled { color: #ff9a9a; }

.auth-wrap { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; isolation: isolate; padding: max(30px, env(safe-area-inset-top)) 24px max(30px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% 8%, rgba(255,212,0,.16), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(77,141,255,.09), transparent 28%),
    linear-gradient(145deg, #020302, #090b0e 58%, #141207); }
.auth-wrap::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.auth-shell { width: min(1160px, 100%); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, 448px);
  gap: clamp(48px, 8vw, 112px); align-items: center; }
.auth-intro { position: relative; padding: 30px 0; }
.auth-intro::after { content: ""; position: absolute; left: 0; bottom: -20px; width: min(520px, 90%); height: 1px;
  background: linear-gradient(90deg, var(--fd-yellow), rgba(255,212,0,.08), transparent); box-shadow: 88px -74px 0 rgba(255,212,0,.14); }
.auth-intro .auth-logo { width: min(152px, 44%); margin: 0 0 26px; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,212,0,.12); }
.auth-kicker, .auth-eyebrow { color: var(--fd-yellow); font-size: 11px; font-weight: 850; letter-spacing: 2px; }
.auth-intro h1 { max-width: 640px; margin: 12px 0 18px; font-size: clamp(44px, 5.3vw, 72px); font-weight: 880; line-height: .94; letter-spacing: -3.4px; text-wrap: balance; }
.auth-intro > p:not(.auth-kicker) { max-width: 540px; color: #bbc1c9; font-size: 17px; line-height: 1.62; }
.auth-service-area { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #e2e5e9 !important; font-size: 13px !important; font-weight: 750; }
.auth-service-area span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--fd-success); box-shadow: 0 0 0 4px rgba(85,214,141,.12); }
.auth-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.auth-proof span { padding: 8px 11px; border: 1px solid rgba(255,212,0,.2); border-radius: 999px;
  background: rgba(255,212,0,.055); color: #ebe5c5; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.auth-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 600px; margin-top: 30px; padding: 0; list-style: none; }
.auth-journey li { position: relative; min-width: 0; padding: 15px 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); }
.auth-journey li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--fd-yellow); opacity: .65; }
.auth-journey small { display: block; margin-bottom: 8px; color: var(--fd-yellow); font-size: 10px; font-weight: 850; letter-spacing: 1.4px; }
.auth-journey span { display: block; color: var(--fd-muted); font-size: 12px; line-height: 1.45; }
.auth-journey b { display: block; margin-bottom: 3px; color: var(--fd-text); font-size: 14px; }
.auth-card { width: 100%; padding: 24px; border-color: rgba(255,212,0,.2); border-radius: var(--fd-radius-lg);
  background: linear-gradient(155deg, rgba(19,23,29,.98), rgba(6,8,10,.98)); box-shadow: var(--fd-panel-shadow); }
.auth-card h2 { margin: 7px 0 5px; font-size: 30px; line-height: 1.08; letter-spacing: -1px; }
.auth-subtitle { margin-bottom: 19px; color: var(--fd-muted); font-size: 13px; line-height: 1.5; }
.auth-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 22px; padding: 5px;
  border: 1px solid var(--fd-line-soft); border-radius: 13px; background: rgba(0,0,0,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.auth-mode-tab { min-height: 46px; border: 0; border-radius: 9px; background: transparent; color: var(--fd-muted);
  font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.auth-mode-tab.is-active { background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft)); color: #080807;
  box-shadow: 0 9px 24px rgba(255,212,0,.16), inset 0 1px 0 rgba(255,255,255,.46); }
.auth-mode-tab:disabled { opacity: .58; cursor: wait; }
.auth-field { margin-top: 11px; }
.auth-field > label, .auth-role-fieldset legend { display: block; margin-bottom: 5px; color: #d9dde4; font-size: 12px; font-weight: 700; }
.auth-field input { margin: 0; min-height: 45px; }
.auth-role-fieldset { margin-top: 11px; padding: 0; border: 0; }
.auth-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-role-option { position: relative; min-width: 0; cursor: pointer; }
.auth-role-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auth-role-option span { display: flex; min-height: 66px; flex-direction: column; justify-content: center; padding: 11px 13px;
  border: 1px solid #2a3245; border-radius: 11px; background: #090d12; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.auth-role-option:hover span { border-color: #404a5c; background: #0c1118; }
.auth-role-option small { margin-top: 3px; color: var(--fd-muted); font-size: 10px; }
.auth-role-option input:checked + span { border-color: var(--fd-yellow); background: rgba(255,212,0,.08);
  box-shadow: 0 0 0 2px rgba(255,212,0,.1); }
.auth-role-option input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.auth-driver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-password-row { position: relative; }
.auth-password-row input { padding-right: 68px; }
.auth-reveal { position: absolute; top: 50%; right: 3px; min-width: 44px; min-height: 44px; transform: translateY(-50%); border: 0; background: transparent;
  color: var(--fd-yellow-soft); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.auth-error { display: none; margin-top: 12px; padding: 9px 10px; border: 1px solid rgba(255,143,143,.36); border-radius: 8px;
  background: rgba(255,143,143,.08); color: #ffb0b0; font-size: 12px; line-height: 1.4; }
.auth-error.is-visible { display: block; }
.auth-submit { min-height: 50px; margin-top: 15px; }
.auth-text-button { display: block; width: 100%; min-height: 44px; margin-top: 9px; padding: 7px; border: 0; background: transparent;
  color: #d8dce2; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.auth-text-button:hover { color: var(--fd-yellow-soft); }
.auth-security-note { margin-top: 14px; color: #858d98; font-size: 11px; line-height: 1.5; text-align: center; }
.auth-security-note a { color: #c8d1e7; }
.auth-links { justify-content: center; margin-top: 9px; }
@media (max-width: 760px) {
  .auth-wrap { align-items: flex-start; padding: max(18px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom)); }
  .auth-shell { display: block; max-width: 430px; }
  .auth-intro { padding: 2px 4px 17px; text-align: center; }
  .auth-intro::after { display: none; }
  .auth-intro .auth-logo { width: min(116px, 34vw); margin: 0 auto 10px; border-radius: 15px; }
  .auth-intro h1 { margin: 7px auto 8px; font-size: clamp(25px, 7.6vw, 30px); line-height: 1; letter-spacing: -1.3px; }
  .auth-intro > p:not(.auth-kicker):not(.auth-service-area), .auth-proof, .auth-journey { display: none; }
  .auth-service-area { justify-content: center; margin: 11px auto 0; }
  .auth-card { padding: 19px 15px; border-radius: 18px; }
  .auth-card h2 { font-size: 27px; }
}

.stars { display: flex; gap: 6px; padding: 8px 0; }
.stars button { flex: 1; font-size: 20px; padding: 8px 0; background: #0e1320; border: 1px solid #2a3245;
  border-radius: 8px; color: #ffd479; cursor: pointer; }
.stars button:hover { background: #232b3d; }

.drawer { position: fixed; right: 18px; top: 90px; bottom: 18px; width: 380px; max-width: calc(100vw - 36px);
  z-index: 1001; overflow-y: auto; border-color: var(--fd-line-brand); box-shadow: var(--fd-panel-shadow); }
.trip-row { border-bottom: 1px solid #232936; padding: 10px 2px; font-size: 13px; line-height: 1.45; color: #b9c0cc; }
.trip-row b { color: #e8eaed; }

.modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(12px) saturate(120%); }
.modal .card { width: 380px; max-height: calc(100vh - 40px); overflow-y: auto; border-color: var(--fd-line-brand); box-shadow: var(--fd-panel-shadow); }
.countdown { font-size: 13px; color: #ffd479; }

.chat { border-top: 1px solid rgba(255,212,0,.14); margin-top: 10px; padding-top: 8px; }
.chat-log { max-height: 130px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.chat-b { font-size: 13px; line-height: 1.4; padding: 8px 11px; border-radius: 12px; max-width: 85%; }
.chat-b.mine { align-self: flex-end; background: linear-gradient(135deg, #31549f, #243c73); box-shadow: 0 5px 14px rgba(22,44,91,.28); }
.chat-b.theirs { align-self: flex-start; background: #1c2230; border: 1px solid rgba(255,255,255,.06); }
.chat-row { display: flex; gap: 6px; }
.chat-row input, .chat-row select { margin: 0; }

.receipt { border-top: 1px solid rgba(255,212,0,.14); margin: 8px 0; padding-top: 8px; }
.promo { font-size: 12px; color: #ffe66d; padding: 4px 2px; }
.promo.bad { color: #ff9a9a; }

.surge { font-size: 12px; color: #ffd479; background: #2b2413; border: 1px solid #4a3d1c;
  border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding: 0; border: 0; }
.payment-methods legend { grid-column: 1 / -1; margin-bottom: 2px; color: #d9dde4; font-size: 12px; font-weight: 800; }
.payment-option { position: relative; cursor: pointer; }
.payment-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.payment-option span { display: flex; min-height: 66px; flex-direction: column; justify-content: center; padding: 10px;
  border: 1px solid #2a3245; border-radius: 9px; background: #090d12; }
.payment-option small { margin-top: 3px; color: var(--fd-muted); font-size: 10px; line-height: 1.25; }
.payment-option input:checked + span { border-color: var(--fd-yellow); background: rgba(255,212,0,.08);
  box-shadow: 0 0 0 2px rgba(255,212,0,.1); }
.payment-option input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.payment-hint { min-height: 30px; margin: 8px 2px 2px; color: #c3c9d1; font-size: 11px; line-height: 1.35; }

.places { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.place-chip { display: flex; align-items: center; gap: 6px; background: #1c2230; border: 1px solid #2a3245;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.place-chip:hover { background: #232b3d; }
.place-chip .x { color: #8b93a3; padding: 0 2px; }
.place-chip .x:hover { color: #ff9a9a; }
.place-chip.selected-chip { border-color: #ffd400; background: #2a2412; }

.tiers { display: flex; gap: 8px; padding: 8px 0 2px; }
.tier { flex: 1; background: #0e1320; border: 1px solid #2a3245; border-radius: 10px; padding: 8px 6px;
  text-align: center; cursor: pointer; }
.tier:hover { background: #1c2230; }
.tier.selected { border-color: #ffd400; background: #2a2412; }
.tier .t-name { font-size: 13px; font-weight: 600; }
.tier .t-fare { font-size: 14px; color: #ffe66d; padding-top: 2px; }
.tier .t-desc { font-size: 10px; color: #8b93a3; }

/* Light theme: overrides for the core surfaces; accents stay shared. */
body.light { background: #f2f4f8; color: #1b1f27; }
body.light .topbar { background: var(--fd-toolbar); border-bottom-color: var(--fd-toolbar-line); color: #f7f7f2; }
body.light .mode-switcher { background: rgba(12,13,14,.9); border-color: rgba(255,212,0,.25); }
body.light .mode-switcher a { color: #d6d9de; }
body.light .mode-switcher a:hover { background: #242017; color: #fff; }
body.light .mode-switcher a.active { background: linear-gradient(135deg, #ffd400, #ffe66d); color: #090907; }
body.light .panel { background: rgba(255,255,255,.9); border-color: rgba(180,145,0,.28); box-shadow: 0 18px 52px rgba(30,40,60,.16); }
body.light .card { background: #fff; border-color: #d7dce6; box-shadow: 0 8px 24px rgba(30,40,60,.08); }
body.light .card h3 { color: #5b6474; }
body.light .pill { background: #e9edf5; border-color: #d0d7e4; }
body.light input, body.light select { background: #fff; border-color: #c9d2e0; color: #1b1f27; }
body.light .btn { background: linear-gradient(180deg, #f6f8fb, #e8edf4); border-color: #c9d2e0; color: #1b1f27; }
body.light .btn:hover { background: linear-gradient(180deg, #fff, #dde3ee); border-color: #b8c3d2; }
body.light .btn.primary, body.light .btn.go { color: #090907; }
body.light .btn.primary { background: linear-gradient(135deg, #ffd400, #ffe66d); border-color: transparent; color: #090907; }
body.light .btn.danger { background: #fbe9e9; border-color: #eac3c3; color: #b23c3c; }
body.light .fd-status-ready, body.light .fd-status-verified, body.light .fd-status-completed { color: #176b3b; background: #e4f6ea; }
body.light .fd-status-pending, body.light .fd-status-warning, body.light .fd-status-attention { color: #725800; background: #fff5c7; }
body.light .fd-status-blocked, body.light .fd-status-danger, body.light .fd-status-tampered { color: #a52f2c; background: #fbe9e9; }
body.light .fd-status-unavailable { color: #4f5b6c; background: #edf0f5; }
body.light .receive-card { background: radial-gradient(circle at 110% -10%, rgba(255,212,0,.22), transparent 44%), #fff; border-color: rgba(180,145,0,.34); }
body.light .card h3.receive-title, body.light .card h3.scan-modal-title { color: #1b1f27; }
body.light .receive-card-intro p, body.light .manual-barcode-label { color: #5b6474; }
body.light .booking-mode-tabs { border-color: #d7dce5; background: #edf0f4; }
body.light .booking-mode-tab { color: #515b69; }
body.light .booking-mode-tab:hover { color: #141922; background: rgba(0,0,0,.04); }
body.light .booking-mode-tab.is-active { border-color: #c5a400; background: #ffd400; color: #080807; }
body.light .booking-route { border-color: #d8dde6; background: #f3f5f8; }
body.light .booking-route-node { background: #fff; }
body.light .booking-route-destination .booking-route-node { background: #d7b000; }
body.light .booking-route-field { border-color: #cbd2de; background: #fff; }
body.light .booking-route-field label, body.light .booking-size-field label, body.light .booking-details-fields label { color: #536070; }
body.light .booking-route-field input, body.light .booking-route-field select { color: #151b24; }
body.light .booking-route-field input::placeholder { color: #667181; }
body.light .booking-route-field small, body.light .booking-trust-note { color: #586474; }
body.light .booking-details { border-color: #d8dde6; background: rgba(0,0,0,.025); }
body.light .booking-details summary { color: #1f2732; }
body.light .booking-details-fields { border-top-color: #d8dde6; }
body.light .manual-divider { color: #697385; }
body.light .manual-divider::before, body.light .manual-divider::after { background: #dce2eb; }
body.light .barcode-box { background: #ffffff; color: #111; border-color: rgba(74, 74, 74, 0.26); }
body.light .barcode-scan-note { color: #5b6474; }
body.light .results div { color: #4a5468; }
body.light .results div:hover { background: #e9edf5; color: #1b1f27; }
body.light .dim { color: #5b6474; }
body.light .trip-row { color: #4a5468; border-bottom-color: #e3e8f0; }
body.light .trip-row b { color: #1b1f27; }
body.light .place-chip { background: #e9edf5; border-color: #d0d7e4; }
body.light .place-chip:hover { background: #dde3ee; }
body.light .chat-b.theirs { background: #e9edf5; }
body.light .chat-b.mine { background: #cfdcff; color: #1b1f27; }
body.light .tier { background: #f4f6fa; border-color: #d0d7e4; }
body.light .tier.selected { background: #e3ebff; border-color: #4f7cff; }
body.light .tier .t-fare { color: #3d68ea; }
body.light .kpi { background: #fff; border-color: #d7dce6; }
body.light .kpi .k { color: #5b6474; }
body.light .stars button { background: #f4f6fa; border-color: #d0d7e4; color: #b8860b; }
body.light .goal-track { background: #e9edf5; border-color: #d0d7e4; }
body.light .surge { background: #fff6e0; border-color: #eadcae; color: #8a6d1a; }
body.light .status-requested, body.light .status-matched { color: #8a6d1a; }
body.light .status-accepted, body.light .status-arriving { color: #1f5dcc; }
body.light .status-in_progress, body.light .status-completed { color: #176b43; }
body.light .msg { color: #9b6d05; }

.car-marker { width: 14px; height: 14px; border-radius: 4px; background: #ffd400; border: 2px solid #0e1116;
  box-shadow: 0 0 8px rgba(255,212,121,.7); }
.car-marker.mine { background: #4f7cff; box-shadow: 0 0 8px rgba(79,124,255,.8); }
.car-marker.nearby { background: #8b93a3; opacity: .8; box-shadow: none; }
.user-location-marker {
  position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; background: #4f7cff; border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(79,124,255,.22), 0 0 18px rgba(79,124,255,.9);
}
.user-location-marker::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(79,124,255,.45);
  animation: userLocationPulse 1.6s ease-out infinite;
}
@keyframes userLocationPulse {
  from { transform: scale(.7); opacity: .9; }
  to { transform: scale(1.6); opacity: 0; }
}
.dot-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; }
.dot-marker.pickup { background: #1d8a4e; }
.dot-marker.dest { background: #d24b4b; }
.dot-marker.stop { background: #d29a4b; }

.goal-track { height: 8px; background: #0e1320; border: 1px solid #2a3245; border-radius: 999px; overflow: hidden; margin: 2px 0 6px; }
.goal-fill { height: 100%; background: linear-gradient(90deg, #2fc875, #70e5a4); width: 0; transition: width .3s var(--fd-ease); }
.row-interactive { cursor: pointer; }
.row-check { width: auto; min-height: auto; accent-color: var(--fd-yellow); }
.section-heading { margin-top: 14px; }
.flush-top { margin-top: 0; }
.row-actions { margin-top: 8px; justify-content: flex-end; }

.bars { display: flex; gap: 4px; align-items: flex-end; height: 56px; padding-top: 4px; }
.bars .bar { flex: 1; background: #4f7cff; border-radius: 3px 3px 0 0; min-height: 2px; }
.bars .bar-stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.bar-stack .bar { flex: none; }
.bar.pkg { background: #6fe3a1; }
.bars-labels { display: flex; gap: 4px; }
.bars-labels span { flex: 1; text-align: center; font-size: 10px; color: #8b93a3; }

/* --- Mobile layout (see mobile.js): sidebar collapses behind a bottom
   toolbar; each group opens as a bottom sheet so the map stays usable. --- */
.m-toolbar, .m-handle { display: none; }
@media (max-width: 700px) {
  .topbar { display: grid; grid-template-columns: 50px minmax(0, 1fr); min-height: 64px;
    overflow: hidden; gap: 7px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; }
  .topbar b { min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .brand-lockup { flex: none; width: 50px; min-height: 48px; }
  .topbar b span { display: none; }
  .topbar .brand-logo { width: 48px; height: 40px; margin: 0; }
  .topbar b::after { display: none; }
  .topbar .spacer { display: none; }
  .topbar-tabs { width: 100%; min-width: 0; height: 48px; display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 42px; align-items: stretch; overflow: hidden;
    border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(17,19,21,.94); }
  .mode-switcher { width: 100%; max-width: none; min-width: 0; height: 100%; justify-content: space-between;
    padding: 2px; border: 0; border-radius: 0; background: transparent; }
  .mode-switcher a { flex: 1 1 0; min-width: 0; min-height: 46px; justify-content: center;
    padding: 7px 2px; overflow: hidden; border-radius: 12px; font-size: clamp(9px, 2.65vw, 11px); text-align: center; text-overflow: ellipsis; }
  .topbar .pill, .topbar .btn:not(.voice-agent-btn), .topbar #topupBtn, .topbar #historyBtn, .topbar #logoutBtn {
    display: none;
  }
  .topbar .voice-agent-btn { display: inline-flex; align-items: center; justify-content: center;
    align-self: stretch; min-width: 58px; min-height: 46px; padding: 8px 10px; margin: 0;
    border-width: 0 0 0 1px; border-color: rgba(255,212,0,.18); border-radius: 0; box-shadow: none; }
  .topbar-tabs .voice-agent-btn { order: 2; min-width: 44px; padding-inline: 3px; font-size: 10px; }
  .topbar-tabs .active-members-pill { order: 3; min-width: 42px; min-height: 46px; justify-content: center; padding: 6px 4px;
    border-width: 0 0 0 1px; border-color: rgba(85,214,141,.24); border-radius: 0; font-size: 10px; }
  .topbar-tabs .active-members-pill::before { width: 7px; height: 7px; box-shadow: none; }
  .topbar-tabs .active-members-pill .active-label { display: none; }

  .panel { display: none; }
  body.m-open .panel { display: flex; left: 8px; right: 8px; top: auto; width: auto; max-width: none;
    height: min(66dvh, 610px); bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 160px - env(safe-area-inset-top)); overflow-y: auto;
    padding: 0 10px 12px; border-radius: 26px;
    background: linear-gradient(180deg, rgba(9,11,14,.98), rgba(3,4,5,.97)); backdrop-filter: blur(20px) saturate(125%);
    border: 1px solid var(--fd-toolbar-line); box-shadow: 0 -18px 52px rgba(0,0,0,.5); }
  body.m-open .panel > .card { display: none; }
  body.m-open .panel > .card.m-active { display: block; box-shadow: none; }

  .m-handle { position: sticky; order: -100; flex: 0 0 auto; top: 0; z-index: 4; min-height: 58px; margin: 0 -10px 8px;
    padding: 19px 52px 8px 14px; display: flex; align-items: center;
    background: rgba(8,10,12,.98); border-radius: 22px 22px 0 0; border-bottom: 1px solid rgba(255,212,0,.1); }
  .m-grip { position: absolute; left: 50%; top: 7px; width: 42px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.24); transform: translateX(-50%); }
  .m-sheet-title { overflow: hidden; color: var(--fd-text); font-size: 16px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .m-close { position: absolute; right: 9px; top: 10px; min-width: 38px; min-height: 38px; background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.08); border-radius: 50%; color: #b8bec7; font-size: 11px; padding: 4px; }

  .m-toolbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 1100;
    gap: 6px; padding: 6px; border: 1px solid rgba(255,212,0,.2); border-radius: 18px;
    background: rgba(3,4,4,.94); backdrop-filter: blur(22px) saturate(130%);
    box-shadow: 0 16px 42px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.04); }
  .m-toolbar button { position: relative; flex: 1; min-height: 48px; padding: 10px 4px; font: inherit; font-size: 13px; font-weight: 750;
    background: transparent; color: #d7d9dc; border: 0; border-radius: 12px; }
  .m-toolbar button.active { background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft)); border-color: transparent; color: #080807;
    box-shadow: 0 8px 20px rgba(255,212,0,.14); }
  .m-toolbar button.m-priority:not(.active) { color: var(--fd-yellow); box-shadow: inset 0 0 0 1px rgba(255,212,0,.2); }
  .m-toolbar button.m-priority::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px;
    border-radius: 50%; background: currentColor; transform: translateX(-50%); }
  .m-toolbar button[data-status-badge]::before { content: attr(data-status-badge); position: absolute; top: 3px; right: 3px;
    max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 1px 5px; border: 1px solid rgba(255,212,0,.42); border-radius: 999px;
    background: rgba(255,212,0,.12); color: var(--fd-yellow); font-size: 8px; line-height: 12px; }
  .m-toolbar button[data-status-badge="Tamper alert - returning to hub"]::before { border-color: rgba(255,94,94,.62); background: rgba(255,94,94,.16); color: #ffb0b0; }
  .m-toolbar button[data-status-badge="Delivered"]::before { border-color: rgba(85,214,141,.5); background: rgba(85,214,141,.14); color: #8cf0b2; }

  .m-msg { position: fixed; left: 12px; right: 12px; z-index: 1101;
    bottom: calc(82px + env(safe-area-inset-bottom));
    background: rgba(12,15,19,.96); border: 1px solid rgba(255,212,0,.22); border-radius: 12px;
    padding: 10px 12px; min-height: 0; box-shadow: 0 12px 28px rgba(0,0,0,.34); }
  .m-msg:empty { display: none; }

  .drawer { left: 0; right: 0; top: auto; width: 100%; max-width: 100%;
    bottom: calc(78px + env(safe-area-inset-bottom)); max-height: 65vh;
    border-radius: 22px 22px 0 0; }
  .modal .card { width: calc(100vw - 28px); max-width: 380px; border-radius: 20px; }

  .customer-journey-card { padding: 12px; border: 0; background: transparent; }
  .booking-mode-tabs { position: relative; top: auto; z-index: 1; margin: -2px 0 16px; background: rgba(3,4,5,.96); }
  .booking-mode-tab { min-height: 54px; }
  .booking-route { padding: 10px; }
  .booking-details-fields input { font-size: 16px; }

  body.light.m-open .panel { background: rgba(242,244,248,.85); }
  body.light .m-toolbar { background: var(--fd-toolbar); border-top-color: var(--fd-toolbar-line); }
  body.light .m-toolbar button { background: #15150f; border-color: rgba(255,212,0,.22); color: #f7f7f2; }
  body.light .m-toolbar button.active { background: linear-gradient(135deg, #ffd400, #ffe66d); border-color: transparent; color: #090907; }
  body.light .m-handle { background: rgba(255,255,255,.95); }
  body.light .m-msg { background: rgba(255,255,255,.95); border-color: #d7dce6; }
}
/* ---- Account sidebar ---- */
.fd-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.52); backdrop-filter: blur(3px); }
.fd-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1201;
  width: min(300px, 88vw); display: flex; flex-direction: column; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  background: rgba(8,10,13,.97); border-right: 1px solid rgba(255,212,0,.18);
  box-shadow: 20px 0 60px rgba(0,0,0,.6);
  transform: translateX(-100%); transition: transform .22s var(--fd-ease);
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
body.fd-sidebar-open .fd-sidebar-backdrop { display: block; }
body.fd-sidebar-open .fd-sidebar { transform: translateX(0); }
.fd-sidebar-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,212,0,.1);
  background: linear-gradient(180deg, rgba(255,212,0,.08), rgba(8,10,13,0)), rgba(8,10,13,.98);
}
body.light .fd-sidebar-head { background: linear-gradient(180deg, rgba(255,212,0,.14), rgba(240,242,246,0)), rgba(240,242,246,.99); }
.fd-sidebar-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fd-sidebar-head-title { font-size: 17px; font-weight: 850; letter-spacing: -.3px; line-height: 1; }
.fd-sidebar-slogan { font-size: 9px; font-weight: 850; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fd-yellow); }
.fd-sidebar-close {
  flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  color: var(--fd-muted); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .14s ease, color .14s ease;
}
.fd-sidebar-close:hover { background: rgba(255,255,255,.12); color: var(--fd-text); }
.fd-sidebar-profile {
  display: flex; align-items: center; gap: 12px; padding: 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.07); transition: background .14s ease;
}
a.fd-sidebar-profile:hover { background: rgba(255,255,255,.05); }
.fd-sidebar-profile-text { flex: 1; min-width: 0; }
.fd-sidebar-avatar {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 999px;
  background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft));
  display: flex; align-items: center; justify-content: center;
  color: #090907; font-size: 18px; font-weight: 900; letter-spacing: -.5px;
  box-shadow: 0 6px 18px rgba(255,212,0,.22);
}
.fd-sidebar-name { font-size: 15px; font-weight: 750; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sidebar-sub { font-size: 12px; color: var(--fd-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sidebar-chevron { flex: 0 0 auto; color: var(--fd-muted); font-size: 20px; line-height: 1; opacity: .7; }
.fd-sidebar-section { padding: 8px 0; }
.fd-sidebar-section + .fd-sidebar-section { border-top: 1px solid rgba(255,255,255,.07); }
.fd-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 16px; font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: 0; color: var(--fd-text); text-align: left; text-decoration: none; cursor: pointer;
  transition: background .14s ease;
}
.fd-sidebar-item:hover { background: rgba(255,255,255,.06); }
.fd-sidebar-item:active { background: rgba(255,255,255,.1); }
.fd-sidebar-item .fd-sidebar-chevron { margin-left: auto; }
.fd-sidebar-icon { flex: 0 0 28px; font-size: 18px; text-align: center; }
.fd-sidebar-item.danger { color: #ff8f8f; }
.fd-sidebar-item.danger:hover { background: rgba(255,80,80,.08); }
body.light .fd-sidebar { background: rgba(240,242,246,.98); border-right-color: rgba(0,0,0,.12); }
body.light .fd-sidebar-item { color: #1a1c20; }
body.light .fd-sidebar-item:hover { background: rgba(0,0,0,.05); }
body.light a.fd-sidebar-profile:hover { background: rgba(0,0,0,.04); }
body.light .fd-sidebar-head-title { color: #1a1c20; }
body.light .fd-sidebar-name { color: #1a1c20; }

/* ---- Account pages (Profile / Settings) ---- */
.account-page {
  height: auto; min-height: 100vh; overflow-y: auto;
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-top: 76px;
}
.account-topbar {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px;
  padding: calc(9px + env(safe-area-inset-top)) 16px 9px;
  background: rgba(0,0,0,.94); border-bottom: 1px solid rgba(255,212,0,.28);
  backdrop-filter: blur(24px) saturate(140%);
}
.account-back { flex: 0 0 auto; text-decoration: none; }
.account-topbar .brand-lockup { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.account-slogan { font-style: normal; font-size: 9px; font-weight: 850; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fd-yellow); }
.account-wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.account-page-title { font-size: 24px; font-weight: 850; letter-spacing: -.4px; margin: 4px 2px 0; }
.account-section h2 { font-size: 15px; font-weight: 800; margin: 0 0 12px; }
.account-hero { display: flex; align-items: center; gap: 16px; }
.account-avatar {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 999px;
  background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft));
  display: flex; align-items: center; justify-content: center;
  color: #090907; font-size: 24px; font-weight: 900; letter-spacing: -.5px;
  box-shadow: 0 8px 24px rgba(255,212,0,.24);
}
.account-hero-text { min-width: 0; }
.account-hero-text h1 { font-size: 20px; font-weight: 850; letter-spacing: -.3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.account-hero-text p { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; }
.account-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.account-field { margin-bottom: 14px; }
.account-field:last-of-type { margin-bottom: 0; }
.account-field > label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.account-field-row { display: flex; gap: 8px; }
.account-field-row input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px;
  background: rgba(19,20,15,.72); border: 1px solid var(--fd-line); color: var(--fd-text); font-size: 15px;
}
.account-field-row input:focus { outline: none; border-color: rgba(255,212,0,.42); }
.account-field-row .btn { flex: 0 0 auto; }
.account-msg { min-height: 18px; margin-top: 10px; font-size: 13px; color: var(--fd-success); }
.account-msg.err { color: var(--fd-danger); }
.account-stat { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.account-stat-value { font-size: 28px; font-weight: 850; letter-spacing: -.5px; color: var(--fd-yellow); }
.account-readrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.account-readrow:first-of-type { border-top: 0; }
.account-readrow span { color: var(--fd-muted); font-size: 14px; }
.account-readrow b { font-size: 14px; text-align: right; word-break: break-word; }
.account-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.account-setting-row p { margin: 2px 0 0; font-size: 13px; }
.account-theme-toggle { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.account-theme-toggle button { padding: 7px 16px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 750; background: none; color: var(--fd-muted); cursor: pointer; }
.account-theme-toggle button.active { background: linear-gradient(135deg, var(--fd-yellow), var(--fd-yellow-soft)); color: #090907; }
.account-section .fd-sidebar-item { border-radius: 12px; }
body.light .account-topbar { background: var(--fd-toolbar); }
body.light .account-field-row input { background: #fff; color: #1a1c20; }
body.light .account-theme-toggle { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .fd-sidebar { transition: none; }
}
.fd-pwa-toast {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 5000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(460px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  padding: 14px;
  border: 1px solid rgba(255,212,0,.28);
  border-radius: 16px;
  background: rgba(17,22,29,.98);
  color: var(--fd-text);
  box-shadow: 0 18px 48px rgba(0,0,0,.54);
  backdrop-filter: blur(22px) saturate(125%);
}
.fd-pwa-toast.urgent { border-color: rgba(255,143,143,.5); }
.fd-pwa-toast-copy { min-width: 0; }
.fd-pwa-toast-copy b { display: block; margin-bottom: 3px; font-size: 15px; }
.fd-pwa-toast-copy p { margin: 0; color: var(--fd-muted); font-size: 14px; line-height: 1.45; }
.fd-pwa-toast-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fd-pwa-toast-actions .btn { min-height: 44px; }

.fd-pwa-guide {
  position: fixed;
  inset: 0;
  z-index: 5100;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}
.fd-pwa-guide-card {
  width: min(430px, 100%);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(255,212,0,.26);
  border-radius: 20px;
  background: var(--fd-panel);
  box-shadow: 0 24px 70px rgba(0,0,0,.66);
}
.fd-pwa-guide-card h2 { margin: 0 0 8px; font-size: 23px; }
.fd-pwa-steps { margin: 18px 0; padding-left: 24px; }
.fd-pwa-steps li { margin: 10px 0; padding-left: 4px; line-height: 1.45; }

.pwa-state-page {
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 15%, rgba(255,212,0,.13), transparent 34%),
    linear-gradient(180deg, #080a0d, #020302);
}
.pwa-state-card {
  width: min(430px, 100%);
  padding: 28px;
  text-align: center;
  border: 1px solid rgba(255,212,0,.2);
  border-radius: 24px;
  background: rgba(17,22,29,.94);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.pwa-state-card img { display: block; margin: 0 auto 18px; border-radius: 22px; }
.pwa-state-card h1 { margin: 3px 0 10px; font-size: clamp(26px, 8vw, 38px); letter-spacing: -.04em; }
.pwa-state-card .eyebrow { margin: 0; color: var(--fd-yellow); font-size: 11px; font-weight: 850; letter-spacing: 1.8px; text-transform: uppercase; }
.pwa-state-card .btn { min-width: 150px; margin-top: 10px; }
.pwa-connection-status { min-height: 24px; margin: 16px 0 0; color: var(--fd-muted); font-size: 13px; }

.pwa-setting-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pwa-setting-actions .btn { min-height: 44px; }
.pwa-setting-status { margin: 10px 0 0; min-height: 20px; color: var(--fd-muted); font-size: 13px; line-height: 1.45; }
.pwa-setting-status.good { color: var(--fd-success); }
.pwa-setting-status.attention { color: var(--fd-danger); }

body.light .fd-pwa-toast, body.light .fd-pwa-guide-card, body.light .pwa-state-card {
  background: rgba(255,255,255,.98);
  color: #1a1c20;
}

@media (max-width: 600px) {
  .fd-pwa-toast {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: 1fr;
  }
  .fd-pwa-toast-actions { justify-content: stretch; }
  .fd-pwa-toast-actions .btn { flex: 1 1 120px; }
  .pwa-setting-actions { width: 100%; justify-content: stretch; }
  .pwa-setting-actions .btn { flex: 1 1 130px; }
}

.courier-seal-modal .card {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.courier-seal-modal h2 { margin-top: 0; }
.courier-seal-modal .scan-area {
  position: relative;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #050608;
}
.courier-seal-modal .row {
  display: grid;
  grid-template-columns: minmax(64px, .8fr) minmax(108px, 1.4fr) minmax(62px, .7fr);
}
.courier-seal-modal .row .btn {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-inline: 8px;
}
.courier-seal-video {
  display: none;
  width: 100%;
  max-height: 260px;
  margin: 0;
  object-fit: cover;
  background: #050608;
}
.courier-seal-video[data-active] { display: block; }

.stack-actions { display: grid; gap: 8px; }
.stack-actions .btn { width: 100%; text-align: center; }