:root { --fg: #14171a; --muted: #5b6470; --bg: #f6f7f9; --card: #fff; --accent: #0b6b4f; --danger: #b42318; --border: #d9dde3; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--border); }
header h1 { font-size: 20px; margin: 0; }
#who { margin-left: auto; color: var(--muted); font-size: 14px; }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card h2 { margin-top: 0; }
label { display: block; margin: 10px 0; }
label.check { display: flex; gap: 8px; align-items: center; }
input, select { font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 6px; width: 100%; }
label.check input { width: auto; }
fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; }
fieldset input { flex: 1 1 140px; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button.secondary { background: #fff; color: var(--accent); }
button.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row label { flex: 1 1 160px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #fff3cd; border: 1px solid #e0c46c; }
.message { min-height: 1.4em; color: var(--muted); }
.message.err { color: var(--danger); }
.error { border-color: var(--danger); color: var(--danger); }
.list { list-style: none; padding: 0; }
.list li { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.receipt { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 13px; background: var(--bg); padding: 12px; border-radius: 6px; margin-top: 12px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 16px; }
@media (max-width: 480px) { main { padding: 8px; } }
.badge.muted { background: var(--bg); border-color: var(--border); color: var(--muted); }
.badge.on { background: #e7f6ef; border-color: var(--accent); color: var(--accent); }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.live { margin-top: 8px; color: var(--accent); font-weight: 600; }
.offer-card { display: grid; gap: 6px; }
.offer-card .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 12px; font-size: 15px; }
.offer-card .facts b { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.offer-card .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.offer-card .actions button { padding: 14px; font-size: 18px; }
.countdown { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.countdown > i { display: block; height: 100%; background: var(--accent); }
.stops { margin: 0; padding-left: 20px; font-size: 14px; }
.stops li.next { font-weight: 700; color: var(--accent); }
.stops li.done { color: var(--muted); text-decoration: line-through; }
textarea { width: 100%; font: 12px ui-monospace, monospace; }

/* Fair Ride screenshot-derived visual system. Original screenshots stay outside the app. */
:root { --fg:#091d43; --muted:#536580; --bg:#f2f7fe; --card:#fff; --accent:#0069ed; --orange:#ff7900; --border:#dbe6f4; --shadow:0 12px 40px #183a6c0b; color-scheme:light; }
:root[data-theme="dark"] { --fg:#eef5ff; --muted:#b0bfd4; --bg:#071321; --card:#102237; --accent:#76b4ff; --border:#28405b; --shadow:0 12px 40px #0003; color-scheme:dark; }
[hidden] { display:none !important; }
a { color:var(--accent); }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.app-header { padding:14px max(20px, calc((100vw - 1280px)/2)); gap:18px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--accent); margin-right:auto; }
.brand img { width:48px; height:48px; object-fit:cover; border-radius:12px; }
.brand b { display:block; font-size:30px; font-weight:850; letter-spacing:-1.2px; line-height:1.1; }
.brand small { font-size:10px; letter-spacing:.2px; color:var(--muted); }
.orange { color:var(--orange); }
#who { margin-left:0; max-width:240px; overflow-wrap:anywhere; }
.top-nav { display:flex; gap:28px; padding:14px max(20px, calc((100vw - 1280px)/2)); background:var(--card); border-bottom:1px solid var(--border); overflow-x:auto; }
.top-nav a { white-space:nowrap; font-size:14px; font-weight:650; text-decoration:none; color:var(--muted); }
.top-nav a[aria-current="page"] { color:var(--accent); border-bottom:2px solid var(--orange); }
main { max-width:1280px; padding:24px; }
.welcome-screen { display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:center; padding:35px 0; }
.hero-copy h1 { font-size:clamp(40px,5vw,68px); font-weight:850; letter-spacing:-2.7px; line-height:1.07; margin:20px 0; }
.eyebrow { color:var(--accent); font-weight:750; font-size:11px; letter-spacing:2px; }
.hero-description { color:var(--muted); font-size:19px; max-width:530px; line-height:1.6; }
.button-link { display:inline-block; padding:15px 23px; background:var(--accent); border-radius:15px; color:var(--card); font-size:15px; font-weight:750; text-decoration:none; border:1px solid var(--accent); }
.button-link.secondary { background:var(--card); color:var(--fg); border-color:var(--border); }
.benefits { display:flex; flex-wrap:wrap; gap:22px; padding:26px 0; font-size:13px; color:var(--muted); }
.hero-brand { background:#000; border-radius:30px; padding:24px; box-shadow:var(--shadow); transform:rotate(2deg); }
.hero-brand img { width:100%; display:block; }
.hero-brand p { color:#fff; font-size:11px; text-align:center; letter-spacing:3px; }
.service-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; grid-column:1/-1; }
.service-card { text-align:left; display:flex; flex-direction:column; gap:9px; min-height:193px; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:20px 16px; transition:transform .15s,border-color .15s; }
.service-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.service-card strong { font-size:16px; }
.service-card>span:not(.vehicle-symbol) { color:var(--muted); font-size:12px; min-height:32px; }
.service-card small { color:var(--accent); font-size:11px; }
.vehicle-symbol { font-size:38px; line-height:1.4; }
.welcome-screen>.hint { grid-column:1/-1; }
.card { border-radius:24px; padding:28px; box-shadow:var(--shadow); margin-top:18px; }
.card h2 { font-size:30px; letter-spacing:-1px; margin-bottom:10px; }
.card>p { color:var(--muted); }
#auth { max-width:560px; margin:24px auto; }
input, select { background:var(--card); color:var(--fg); border-radius:12px; padding:13px; }
label { color:var(--muted); font-size:14px; font-weight:600; }
button { border-radius:12px; padding:12px 18px; font-weight:650; }
button.secondary { background:var(--card); color:var(--accent); }
#request { width:100%; padding:18px; margin-top:15px; background:linear-gradient(100deg,#007aff,#0769e5 55%,#ff7900); border:0; color:#fff; font-size:18px; }
fieldset { border-radius:16px; padding:15px; }
#rider { max-width:1000px; margin:20px auto; }
#driver { max-width:900px; margin:20px auto; }
#driver h2 { font-size:38px; }
#go-online,#go-offline { padding:18px 35px; border-radius:999px; }
#go-online { background:#0069ed; color:#fff; }
#assistant { max-width:1000px; margin:20px auto; }
.feature-status { display:inline-block; padding:9px 14px; border-radius:9px; background:#fff1df; color:#714100; font-size:11px; font-weight:750; letter-spacing:.8px; margin:10px 0 22px; }
.support-link { display:block; padding:18px; border:1px solid var(--border); border-radius:12px; margin:12px 0; text-decoration:none; }
#experience-heading h1 { font-size:clamp(28px,4vw,44px); letter-spacing:-1.5px; margin:8px 0; }
#admin-navigation { position:relative; background:#0c2037; border-radius:20px; padding:20px; color:#fff; margin-top:25px; }
#admin-links { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#admin-links a { color:#c3ddff; padding:10px; font-size:13px; text-decoration:none; }
#admin-links a:hover { background:#173753; border-radius:8px; }
body[data-view="welcome"] #auth,body[data-view="welcome"] #rider,body[data-view="welcome"] #driver,body[data-view="welcome"] #assistant { display:none; }
body:not([data-view="booking"]):not([data-view="driver-home"]) #auth,
body:not([data-view="booking"]) #rider,
body:not([data-view="driver-home"]) #driver,
body:not([data-view="booking"]):not([data-view="driver-home"]) #assistant { display:none; }
footer { display:flex; gap:16px; justify-content:space-between; max-width:1280px; margin:auto; border-top:1px solid var(--border); padding:24px; font-size:11px; }
.message:empty { min-height:0; margin:0; }
@media(max-width:900px) { .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .hero-copy h1 { font-size:45px; } #admin-links { grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px) { .app-header { padding:12px 16px; gap:10px; } .brand b { font-size:25px; } .brand small { font-size:8px; } .brand img { width:35px; height:35px; } #theme-toggle { font-size:11px; padding:8px; } #env-badge { order:4; } .top-nav { gap:22px; padding:12px 16px; } main { padding:16px; } .welcome-screen { grid-template-columns:1fr; padding:12px 0; gap:18px; } .hero-copy h1 { font-size:45px; letter-spacing:-2px; } .hero-description { font-size:16px; } .hero-brand { display:none; } .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-card { min-height:170px; padding:16px; } .compact { display:flex; overflow-x:auto; padding:5px 0 15px; } .compact .service-card { min-width:150px; } .card { padding:20px; border-radius:20px; } #admin-links { grid-template-columns:repeat(2,1fr); } footer { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

.vehicle-art { width:100%;height:82px;object-fit:contain;mix-blend-mode:multiply; }
:root[data-theme="dark"] .vehicle-art { mix-blend-mode:normal; border-radius:10px; }