.platform-shell {max-width:1180px; margin:40px auto 70px; padding:0 20px;}
.platform-shell.narrow {max-width:540px;}
.platform-card {background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px; margin:18px 0; overflow-wrap:anywhere;}
.platform-card h1,.platform-card h2,.platform-card h3 {margin-top:0;}
.platform-grid {display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:20px; align-items:start;}
.platform-form {display:grid; gap:16px;}
.platform-shell label {display:block; margin-bottom:12px;}
.platform-shell input:not([type=checkbox]),.platform-shell select {display:block; width:100%; margin-top:7px; padding:13px; border:1px solid var(--border-input); border-radius:10px; background:var(--input-background); color:var(--text); font:inherit;}
.platform-shell input[type=checkbox] {width:22px; height:22px; vertical-align:middle;}
.platform-shell button,.secondary-button,.stop-button,.remove-stop {min-height:44px; border:1px solid var(--border); border-radius:10px; background:var(--card-secondary); color:var(--text); padding:10px 16px; font:inherit; cursor:pointer;}
.platform-shell .primary-button {background:var(--gold); color:#171717; width:auto;}
.driver-controls {display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.driver-controls p {width:100%; margin:3px 0;}
.platform-shell button:disabled {opacity:.55; cursor:wait;}
.platform-shell button:focus-visible,.stop-button:focus-visible {outline:3px solid var(--gold); outline-offset:3px;}
.booking-item,.driver-item {padding:18px 0; border-bottom:1px solid var(--border);}
.booking-item p {margin:8px 0;}
.booking-actions {display:flex; gap:8px; flex-wrap:wrap;}
.booking-status {display:inline-block; padding:5px 9px; border-radius:8px; background:var(--gold-soft); color:var(--gold-text);}
.booking-status[data-status=confirmed],.booking-status[data-status=completed] {background:var(--success-bg); color:var(--success-text);}
.booking-status[data-status=cancelled],.booking-status[data-status=unfulfilled] {background:var(--error-bg); color:var(--error-text);}
.booking-status[data-status=driver_en_route],.booking-status[data-status=passenger_onboard] {background:#153a67; color:white;}
.offer-card {border:3px solid var(--gold);}
.offer-countdown {font-size:3rem; font-weight:800; display:block; font-variant-numeric:tabular-nums;}
.offer-card .booking-actions button {flex:1; min-height:64px; font-size:1.2rem;}
.platform-flash {padding:16px; margin:10px auto; max-width:1140px; background:var(--gold-soft);}
#app-error {color:var(--error-text);}
.via-row {display:flex; align-items:end; gap:8px; margin-bottom:10px;}
.via-row label {flex:1;}
.via-row input {width:100%; padding:14px; border:1px solid var(--border-input); border-radius:10px; color:var(--text); background:var(--input-background); font:inherit;}
.stop-button {margin-bottom:16px; color:var(--gold-text); background:var(--gold-soft);}
.install-help {max-width:360px; line-height:1.6;}
.app-header {border-top:1px solid var(--gold-border); background:var(--gold-soft);}
.app-header-inner {max-width:1120px; margin:auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.app-header-title {display:flex; align-items:center; gap:12px; color:var(--text); font-size:.88rem; font-weight:700; text-decoration:none;}
.app-header-title img {border-radius:9px; flex-shrink:0;}
.app-header-title span span {display:block; color:var(--text-secondary); font-size: .875rem; font-weight:400; margin-top:3px;}
.app-header-button {display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 18px; border-radius:10px; background:var(--gold); color:#171717; font-size: .875rem; font-weight:700; white-space:nowrap; text-decoration:none;}
.app-header-button:hover {background:var(--gold-hover);}
.app-header a:focus-visible,.app-action:focus-visible,.app-text-link:focus-visible,.account-tabs a:focus-visible,.app-controls a:focus-visible {outline:3px solid var(--gold-text); outline-offset:4px;}
.app-controls {max-width:1120px; margin:0 auto; padding:0 24px 12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.app-controls[hidden] {display:none;}
.app-controls a,.app-controls button {display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); text-decoration:none; font:inherit; font-size: .875rem; cursor:pointer;}
.app-controls p {flex-basis:100%; margin:0; font-size: .875rem; color:var(--text-secondary);}
.app-controls p:empty {display:none;}
.app-install-page {max-width:1080px; margin-top:56px;}
.app-install-hero {display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr); align-items:center; gap:64px; padding:20px 0 48px;}
.app-eyebrow {color:var(--gold-text); font-weight:700; font-size: .875rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px;}
.app-install-hero h1 {font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.08; letter-spacing:-.045em; max-width:620px; margin:0 0 24px;}
.app-lead {font-size:1.1rem; line-height:1.75; color:var(--text-secondary); max-width:560px; margin:0 0 32px;}
.app-install-actions {display:flex; align-items:center; flex-wrap:wrap; gap:20px 24px; margin:24px 0;}
.app-action {display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:14px 22px; text-decoration:none; border-radius:12px; font-weight:700; text-align:center;}
.app-text-link {color:var(--gold-text); font-weight:600; line-height:1.6; text-underline-offset:5px;}
.app-install-status {min-height:24px; margin:20px 0 0; color:var(--text-secondary); font-size: .875rem; line-height:1.65;}
.app-preview {max-width:260px; width:100%; justify-self:center; padding:10px; border:1px solid var(--border-input); border-radius:38px; background:var(--card); transform:rotate(5deg); box-shadow:0 20px 44px var(--shadow);}
.app-preview-screen {min-height:330px; padding:24px; border-radius:30px; background:linear-gradient(155deg,var(--gold-soft),var(--background)); display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;}
.app-preview-time {align-self:flex-start; font-size: .875rem; margin-bottom:24px;}
.app-preview-screen img {border-radius:26px; box-shadow:0 8px 24px var(--shadow);}
.app-preview-screen strong {font-size:1rem;}
.app-preview-screen>span:last-child {font-size: .875rem; line-height:1.6; color:var(--text-secondary);}
.app-benefits {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:30px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.app-benefits strong {font-size:1rem;}
.app-benefits p {font-size:.9rem; color:var(--text-secondary); line-height:1.7; margin:10px 0 0;}
.app-guides {padding-top:56px; scroll-margin-top:12px;}
.app-section-heading {max-width:650px; margin-bottom:28px;}
.app-section-heading h2 {font-size:2rem; letter-spacing:-.035em; margin:0 0 14px;}
.app-section-heading>p:last-child {color:var(--text-secondary); line-height:1.7;}
.app-guide-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start;}
.install-guide {margin:0; padding:30px; scroll-margin-top:12px;}
.install-guide h3 {font-size:1.4rem; margin:0 0 24px;}
.install-guide ol {padding-left:24px; margin:0;}
.install-guide li {padding-left:8px; margin-bottom:24px; line-height:1.7;}
.install-guide li::marker {color:var(--gold-text); font-weight:700;}
.install-guide li strong,.install-guide li span {display:block;}
.install-guide li span {font-size:.9rem; margin-top:7px; color:var(--text-secondary);}
.share-symbol {display:inline-block; width:22px; height:22px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.install-guide-note {padding:16px; background:var(--gold-soft); border-radius:10px; font-size: .875rem; line-height:1.7; margin:28px 0 0;}
.app-after-install {margin-top:40px; padding:32px;}
.app-after-install p {color:var(--text-secondary); line-height:1.8; max-width:780px;}
.account-tabs {display:flex; gap:8px; padding:6px; background:var(--background-soft); border:1px solid var(--border); border-radius:14px;}
.account-tabs a {flex:1; padding:14px 10px; text-align:center; color:var(--text-secondary); border-radius:10px; text-decoration:none; font-weight:600;}
.account-tabs a[aria-current="page"] {background:var(--card); color:var(--text); box-shadow:0 2px 8px var(--shadow);}
.account-intro>p {line-height:1.75; color:var(--text-secondary);}
.account-links {display:flex; flex-wrap:wrap; gap:14px 20px; margin:24px 0; line-height:1.7;}
.account-links a,.account-help a,.account-intro>p a {color:var(--gold-text); text-underline-offset:4px;}
.account-help {border-top:1px solid var(--border); padding-top:24px; margin-top:28px; line-height:1.75;}
.account-help h2 {font-size:1.1rem;}
.account-help p {font-size:.9rem; color:var(--text-secondary); margin:8px 0 0;}
.auth-form-status {font-size:.9rem; line-height:1.7;}
.auth-form-status:empty {display:none;}
.site-footer .footer-copyright {display:flex; flex-direction:column; gap:18px; line-height:1.7;}
.site-footer .footer-copyright span {margin:0;}
@media(max-width:760px) {
    .app-header-inner {padding:10px 16px; gap:10px;}
    .app-header-title {gap:8px; font-size: .875rem;}
    .app-header-title span span {font-size: .875rem; max-width:155px; line-height:1.5;}
    .app-header-button {font-size: .875rem; padding:10px 12px; gap:6px;}
    .app-header-title img {width:30px; height:30px;}
    .app-controls {padding:0 12px 12px; gap:8px;}
    .app-controls>a,.app-controls>button {flex:1 1 0; min-width:0; flex-direction:column; gap:4px; padding:8px 4px; font-size: .875rem; line-height:1.25;}
    .app-install-page {margin-top:24px; padding:0 20px;}
    .app-install-hero {grid-template-columns:1fr; gap:28px; padding-top:16px; padding-bottom:32px;}
    .app-install-hero h1 {font-size:2.6rem;}
    .app-lead {font-size:1rem;}
    .app-preview {max-width:185px; transform:rotate(3deg); border-radius:28px;}
    .app-preview-screen {min-height:230px; padding:18px; border-radius:22px; gap:12px;}
    .app-preview-time {margin-bottom:4px;}
    .app-preview-screen img {width:80px; height:80px; border-radius:18px;}
    .app-preview-screen>span:last-child {display:none;}
    .app-benefits {grid-template-columns:1fr; gap:20px;}
    .app-benefits p {margin-top:6px;}
    .app-guide-grid {grid-template-columns:1fr;}
    .install-guide {padding:24px;}
    .app-guides {padding-top:40px;}
    .app-after-install {padding:24px;}
}
#detail-text {white-space:pre-wrap; font:inherit;}
@media(max-width:760px) {.platform-grid {grid-template-columns:1fr;} .platform-shell{padding:0 12px; margin-top:24px;} .platform-card{padding:18px;} .driver-controls>button{flex:1 1 160px;} .platform-shell h1{font-size:1.8rem;}}

/* Quiet hierarchy: related controls stay together; tasks have room between them. */
.platform-shell {line-height:1.6;}
.platform-card {padding:28px; margin:24px 0; box-shadow:0 4px 18px var(--shadow);}
.platform-card h2 {font-size:1.3rem; line-height:1.35; margin-bottom:20px; letter-spacing:-.02em;}
.platform-form label {margin-bottom:0;}
.platform-form {gap:20px;}
.platform-shell input:not([type=checkbox]),.platform-shell select {font-size:1rem;}
.dashboard-heading {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px;}
.dashboard-heading h1 {margin:0 0 12px; letter-spacing:-.035em; line-height:1.2;}
.dashboard-heading p:last-child {margin:0; color:var(--text-secondary); max-width:48ch;}
.dashboard-heading .app-eyebrow {margin-bottom:12px;}
.dashboard-summary,.offer-help {color:var(--text-secondary); font-size:.9rem; line-height:1.7;}
.driver-session-heading {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px;}
.driver-session-heading h2 {margin:0;}
.availability-badge {display:inline-flex; align-items:center; gap:8px; padding:7px 12px; background:var(--background-soft); border-radius:99px; font-size: .875rem; font-weight:600;}
.availability-badge::before {content:''; width:8px; height:8px; border-radius:50%; background:currentColor;}
.availability-badge[data-online=true] {background:var(--success-bg); color:var(--success-text);}
.driver-controls .availability-control {display:flex; align-items:center; gap:10px; margin:0; padding:12px 0;}
.driver-session>.field-help {margin:16px 0 24px;}
.notification-settings {border-top:1px solid var(--border); margin-top:24px; padding-top:16px;}
.platform-shell summary {cursor:pointer; min-height:44px; padding:10px 0; font-weight:600;}
.notification-settings p,[data-notification-warning] {font-size: .875rem; line-height:1.7; color:var(--text-secondary);}
.notification-settings .driver-controls {padding:12px 0 4px;}
.account-grid {grid-template-columns:minmax(280px,1fr) minmax(0,1.5fr);}
.account-grid>.platform-card {margin-top:0;}
.account-utilities {border-top:1px solid var(--border); margin-top:28px; padding-top:24px;}
.account-utilities form {margin-top:24px;}
.booking-item {padding:24px 0;}
.booking-item:first-child {padding-top:8px;}
.booking-item:last-child {border-bottom:0; padding-bottom:0;}
.booking-item h3 {margin:0 0 12px; font-size:.95rem; letter-spacing:.025em;}
.booking-item p {margin:14px 0; line-height:1.7;}
.booking-item>a {display:inline-block; min-height:44px; padding:8px 0; color:var(--gold-text); text-underline-offset:4px;}
.booking-actions {margin-top:20px; gap:12px;}
.booking-actions>button,.driver-controls>button {margin-top:0;}
.booking-actions>button {width:auto;}
.platform-shell .danger-button {color:var(--error-text); border-color:var(--error-border); margin-top:16px;}
.driver-item>button {margin-right:10px; margin-bottom:10px; width:auto;}
#push-readiness {padding:12px 16px; border-radius:10px; background:var(--gold-soft); font-size: .875rem; line-height:1.6;}
#push-readiness[data-ready=true] {background:var(--success-bg); color:var(--success-text);}
.booking-actions:empty {display:none;}
.booking-status {font-size: .875rem; font-weight:600; padding:7px 12px; border-radius:99px;}
.offer-card {border-width:2px; background:linear-gradient(140deg,var(--gold-soft),transparent 70%),var(--card);}
.offer-countdown {line-height:1.2; margin:20px 0; letter-spacing:-.04em;}
.offer-heading {display:flex; align-items:center; justify-content:space-between; gap:16px;}
.offer-heading h2 {margin:0; max-width:18ch;}
.offer-heading .offer-countdown {margin:0; white-space:nowrap; font-size:2.4rem;}
.offer-card[data-urgent=true] .offer-countdown {color:var(--error-text);}
.offer-card .booking-item {border-top:1px solid var(--gold-border); padding-top:20px;}
#connection-status {font-size: .875rem; color:var(--text-secondary); line-height:1.7; margin:20px 0 12px;}
#connection-status[data-state]::before {content:''; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--success-text);}
#connection-status[data-state=disconnected] {color:var(--error-text);}
#connection-status[data-state=disconnected]::before {background:currentColor;}
#connection-status a {color:inherit; text-underline-offset:3px;}
#app-error:empty {display:none;}
#app-error:not(:empty) {padding:14px 16px; background:var(--error-bg); border:1px solid var(--error-border); border-radius:12px; line-height:1.6;}
.platform-shell :is(a,button,input,select,summary):focus-visible,.app-controls button:focus-visible {outline:3px solid var(--gold-text); outline-offset:4px;}
.platform-shell button[aria-busy=true],.app-controls button[aria-busy=true] {cursor:progress;}
.platform-shell button[aria-busy=true]::after,.app-controls button[aria-busy=true]::after {content:''; display:inline-block; width:12px; height:12px; margin-left:10px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:middle;}
@media (prefers-reduced-motion:no-preference) {
    .platform-shell>.dashboard-heading,.app-install-hero {animation:app-enter 300ms ease-out both;}
    .booking-item {animation:app-enter 240ms ease-out both;}
    .offer-card:not([hidden]) {animation:offer-arrive 360ms ease-out both;}
    .status-updated {animation:status-confirm 320ms ease-out;}
    .platform-shell button,.app-header-button,.app-controls :is(a,button),.account-tabs a {transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease;}
    .platform-shell button:not(:disabled):active,.app-header-button:active {transform:translateY(1px);}
    .platform-shell button[aria-busy=true]::after,.app-controls button[aria-busy=true]::after {animation:action-wait 800ms linear infinite;}
}
@keyframes app-enter {from {opacity:0; transform:translateY(5px);} to {opacity:1; transform:translateY(0);}}
@keyframes offer-arrive {from {opacity:.5; transform:translateY(6px);} to {opacity:1; transform:translateY(0);}}
@keyframes status-confirm {50% {box-shadow:0 0 0 5px var(--gold-soft);}}
@keyframes action-wait {to {transform:rotate(360deg);}}
#admin-password-dialog {width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); margin:auto; box-sizing:border-box; overflow:auto;}
#admin-password-dialog::backdrop {background:rgb(0 0 0 / 60%);}
.booking-card select,.platform-shell select,.pickup-dialog select {
    appearance:none;
    background-image:url('/static/icons/chevron-down.svg');
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:20px 20px;
    padding-right:44px;
}
details>summary {display:flex; align-items:center; gap:12px; list-style:none;}
details>summary::-webkit-details-marker {display:none;}
details>summary::after {content:''; width:20px; height:20px; flex:0 0 20px; margin-left:auto; background:currentColor; mask:url('/static/icons/chevron-down.svg') center/contain no-repeat; -webkit-mask:url('/static/icons/chevron-down.svg') center/contain no-repeat;}
details[open]>summary::after {transform:rotate(180deg);}
@media(max-width:760px) {
    .platform-card {padding:22px; margin:20px 0;}
    .dashboard-heading {align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:24px;}
    .account-grid {grid-template-columns:minmax(0,1fr);}
    .account-trips {order:-1;}
    .booking-actions>button {flex:1 1 130px; min-height:48px;}
    .offer-card .booking-actions>button {flex-basis:0; padding:12px; font-size:1rem;}
}