:root {
    color-scheme: light;
    --primary: #08a64b;
    --ink: #18212b;
    --muted: #63716d;
    --border: #e5e9e7;
    --background: #f6f8f7;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; }
a { color: #067a38; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 13px 18px; min-height: 46px; cursor: pointer; font-weight: 600; text-align: center; text-decoration: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.button:hover { text-decoration: none; }
:focus-visible { outline: 3px solid #1976d2; outline-offset: 3px; }
input, select, textarea { display: block; width: 100%; background: #f8faf9; color: var(--ink); border: 1px solid #e0e7e3; border-radius: 14px; min-height: 48px; padding: 12px 14px; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 19px; min-height: 19px; height: 19px; accent-color: var(--primary); }
label { display: block; font-size: 13px; font-weight: 600; color: #34404d; margin: 16px 0; }
label input, label select, label textarea { margin-top: 6px; font-weight: 400; font-size: 16px; }
textarea { resize: vertical; }
label.check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
label.check input { margin: 0; flex-shrink: 0; }
h1, h2, h3, p { margin: 0 0 12px; }
h1 { font-size: 23px; } h2 { font-size: 21px; } h3 { font-size: 18px; }
small { font-size: 12px; }
.primary { background: var(--primary); color: white; }
.secondary { background: #f1f4f2; color: #536171; }
.danger { background: #fff0ef; color: #b1362d; }
.wide { width: 100%; margin-top: 10px; }
.muted { color: var(--muted); line-height: 1.5; }
.row { display: flex; align-items: center; gap: 10px; }
.row > input, .row > label { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.card { background: white; border: 1px solid var(--border); border-radius: 22px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 16px #0d241705; }
.status { padding: 14px 16px; border-radius: 14px; margin: 12px 0; background: #edf4ff; line-height: 1.5; overflow-wrap: anywhere; }
.status.error { background: #fff0ef; color: #a52b23; }
.status.success { background: #eaf7ef; color: #067a38; }
.loading { padding: 8px; color: #067a38; font-size: 13px; }
.page-header { display: flex; gap: 12px; align-items: center; padding: max(14px, env(safe-area-inset-top)) 16px 14px; background: white; border-bottom: 1px solid var(--border); }
.page-header h1 { flex: 1; margin: 0; font-size: 20px; }
.icon-button { min-width: 40px; min-height: 40px; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f1f4f2; color: #536171; font-size: 23px; }
.page-content { max-width: 760px; padding: 20px 16px max(28px, env(safe-area-inset-bottom)); margin: auto; }
.empty-state { text-align: center; color: var(--muted); padding: 36px 20px; line-height: 1.6; }
.text-link { display: block; text-align: center; margin: 22px 0 0; font-size: 14px; }
.login-page { max-width: 480px; margin: auto; padding: 28px 20px 24px; }
.login-hero { padding: 28px 24px; border-radius: 28px; background: linear-gradient(135deg, #075e31, #08a64b); color: white; text-align: center; margin-bottom: 24px; }
.logo-box { background: white; border-radius: 16px; padding: 12px; margin-bottom: 18px; }
.logo-box img { width: 100%; height: 64px; object-fit: contain; }
.login-hero h1 { font-size: 20px; }
.login-hero p { color: #eaf7ef; font-size: 14px; margin: 0; }
.login-card { padding: 24px 22px; border-radius: 26px; }
.login-card h2 { font-size: 25px; margin-bottom: 5px; }
.home-screen { height: 100dvh; display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; background: #e6ede7; }
.home-header { position: relative; flex-shrink: 0; background: white; border-radius: 0 0 24px 24px; padding: max(8px, env(safe-area-inset-top)) 14px 10px; box-shadow: 0 3px 12px #0d24171c; z-index: 3; }
.home-header > .row + .row, .home-header form { margin-top: 8px; }
.home-header input { font-size: 13px; min-height: 42px; }
.home-header button { min-height: 42px; padding: 10px 12px; font-size: 14px; }
.home-logo { width: 160px; height: 40px; object-fit: contain; object-position: left; }
.wallet-summary { text-align: right; font-size: 11px; font-weight: 700; color: #34404d; }
.wallet-summary small { display: block; font-size: 10px; color: #788493; margin-top: 2px; font-weight: 400; }
.home-map { position: absolute; inset: 0; z-index: -1; }
.map-frame, .google-map { width: 100%; height: 100%; position: relative; }
.map-frame { overflow: hidden; }
.map-error { position: absolute; top: 16%; left: 8%; right: 8%; max-height: 76%; overflow-y: auto; background: white; border-radius: 18px; padding: 18px; border: 1px solid #e0e7e3; box-shadow: 0 3px 16px #0d24171c; color: #536171; line-height: 1.5; overflow-wrap: anywhere; }
.home-status { position: absolute; top: 126px; left: 14px; right: 14px; z-index: 4; pointer-events: none; }
.home-status .loading { background: white; display: inline-block; border-radius: 8px; }
.home-status .status { box-shadow: 0 3px 12px #0d241714; pointer-events: auto; }
.home-actions { display: flex; flex-shrink: 0; align-items: center; gap: 12px; margin-top: auto; padding: 12px 18px; pointer-events: none; }
.home-actions > * { pointer-events: auto; }
.round-action { display: flex; flex-direction: column; gap: 0; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; padding: 0; background: white; color: #34404d; font-size: 10px; font-weight: 400; box-shadow: 0 3px 10px #0d24171f; }
.round-action span { font-size: 26px; }
.scan-action { flex: 1; height: 68px; background: #254600; border-radius: 18px; font-size: 18px; box-shadow: 0 4px 14px #0d241729; }
.bottom-nav { display: grid; flex-shrink: 0; grid-template-columns: repeat(4, 1fr); background: white; border-radius: 24px 24px 0 0; padding: 8px 6px max(6px, env(safe-area-inset-bottom)); box-shadow: 0 -3px 12px #0d24171c; }
.bottom-nav a { display: flex; flex-direction: column; gap: 1px; align-items: center; color: #778391; padding: 4px; font-size: 11px; }
.bottom-nav span { font-size: 24px; }
.bottom-nav .selected { color: var(--primary); font-weight: 700; }
.active-ride { flex-shrink: 0; margin: 0 14px 8px; padding: 12px; border-radius: 18px; font-size: 13px; }
.active-ride .row input { min-height: 34px; padding: 7px; font-size: 12px; }
.active-ride p { font-size: 11px; margin: 5px 0; }
.active-ride .button { font-size: 11px; min-height: 34px; padding: 8px; }
.eyebrow { font-size: 9px; font-weight: 700; color: #078b40; letter-spacing: 1px; display: block; margin-bottom: 4px; }
.overlay { position: fixed; inset: 0; background: #0d1b1366; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px max(24px, env(safe-area-inset-bottom)); z-index: 100; }
.sheet { background: white; border: 1px solid var(--border); border-radius: 24px; padding: 18px; width: 100%; max-width: 560px; max-height: 90dvh; overflow-y: auto; box-shadow: 0 4px 18px #0d241733; }
.sheet > .row h2 { margin: 0; }
.sheet > .row:first-child { margin-bottom: 14px; }
.sheet > .row { flex-wrap: wrap; }
.sheet > .row button, .sheet > .row .button { flex: 1; }
.menu-list { display: flex; flex-direction: column; }
.menu-list a { padding: 16px 6px; color: #34404d; display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); }
.menu-list span { color: var(--primary); }
.scanner { width: 100%; max-height: 260px; background: #18212b; border-radius: 16px; }
.list-item { padding: 16px 8px; border-bottom: 1px solid var(--border); width: 100%; background: white; text-align: left; display: block; color: var(--ink); font-weight: 400; }
.list-item.row { display: flex; }
.list-item small { display: block; color: var(--muted); margin-top: 4px; }
.balance-card { background: linear-gradient(135deg, #075e31, #08a64b); color: white; border-radius: 24px; padding: 24px; margin-bottom: 20px; }
.balance-card > p:first-child { letter-spacing: 1px; font-size: 11px; }
.balance-card h2 { font-size: 38px; }
.amount-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amount-options button { padding: 12px 8px; }
.avatar-container { text-align: center; }
.avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: auto; }
.avatar-placeholder { background: #eaf7ef; color: #067a38; font-size: 48px; display: grid; place-items: center; }
.photo-upload { color: #067a38; }
.photo-upload input { font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stats-grid .card { margin: 0; }
.stats-grid h2 { margin: 10px 0 0; }
.stats-grid + h2 { margin-top: 24px; }
.route-map { height: 48dvh; min-height: 280px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 20px; }
.instruction-image { width: 100%; max-height: 380px; object-fit: contain; }
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }
.chat-summary { display: block; color: var(--ink); margin-top: 16px; }
.chat-summary.row { display: flex; }
.chat-summary p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 8px 0; }
.badge { border-radius: 20px; background: #d32f2f; color: white; min-width: 24px; padding: 4px 8px; text-align: center; font-size: 12px; }
.message-list { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.message { align-self: flex-start; max-width: 85%; border-radius: 18px 18px 18px 4px; background: white; border: 1px solid var(--border); padding: 12px 16px; }
.message.mine { align-self: flex-end; background: #eaf7ef; border-radius: 18px 18px 4px 18px; }
.message p { margin-bottom: 6px; }
.message small { color: var(--muted); font-size: 10px; }
.message-composer { display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--background); padding: 12px 0 max(12px, env(safe-area-inset-bottom)); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; padding: 20px; background: #fff0ef; color: #a52b23; width: 100%; z-index: 1000; }
@media (min-width: 800px) {
    .home-header { padding: 12px 24px; }
    .home-actions { justify-content: center; }
    .scan-action { max-width: 440px; }
    .active-ride { max-width: 680px; width: calc(100% - 28px); align-self: center; }
    .home-status { top: 135px; max-width: 640px; margin: auto; }
    .page-header { padding-left: max(20px, calc((100% - 760px) / 2)); padding-right: max(20px, calc((100% - 760px) / 2)); }
    .overlay { align-items: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }