:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17251f; background: #dde5de; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; } button, input { font: inherit; } button { cursor: pointer; }
.app-shell { min-height: 100vh; max-width: 480px; margin: 0 auto; background: #f8faf6; box-shadow: 0 0 60px #10261d30; position: relative; overflow: hidden; }
.map { height: 43vh; min-height: 315px; position: relative; overflow: hidden; background: #e7eadf; }.map-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(28deg, transparent 46%, #fff 47% 52%, transparent 53%), linear-gradient(120deg, transparent 44%, #d0d8cb 45% 48%, transparent 49%); background-size: 120px 95px, 150px 160px; }
.road { position: absolute; height: 17px; width: 130%; left: -15%; background: #fff; border: 1px solid #d6dbd1; transform: rotate(-15deg); }.road::after { content: ""; display: block; margin-top: 7px; border-top: 2px dashed #d9cba8; }.road-a { top: 36%; }.road-b { top: 68%; transform: rotate(23deg); }.road-c { top: 10%; transform: rotate(71deg); }
.topbar { position: absolute; inset: 20px 18px auto 20px; display: flex; justify-content: space-between; align-items: center; }.brand { display: flex; align-items: center; gap: 9px; font-weight: 850; letter-spacing: -.4px; }.brand small { display: block; color: #557066; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; }.brand-mark { display: grid; place-items: center; color: #fff; background: #12372a; width: 34px; height: 34px; border-radius: 12px; }
.network { padding: 8px 11px; border-radius: 99px; background: #fff; box-shadow: 0 5px 20px #284a3c20; color: #315543; font-size: 10px; font-weight: 800; }.network.offline { color: #a53a2b; }.network.online::before { content: ""; display: inline-block; width: 6px; height: 6px; background: #1c885c; border-radius: 50%; margin-right: 5px; }
.driver-pin { position: absolute; left: 51%; top: 50%; z-index: 2; background: #153c2d; color: #fff; border: 5px solid #fff; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; transform: rotate(21deg); box-shadow: 0 5px 20px #19382d40; }.route { position: absolute; width: 210px; height: 100px; border: 5px solid #176447; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; left: 25%; top: 38%; transform: rotate(-20deg); opacity: .75; }.map-label { position: absolute; color: #718078; font-size: 11px; font-weight: 650; }.label-one { top: 28%; left: 26%; }.label-two { top: 75%; right: 12%; }
.panel { position: relative; margin-top: -30px; min-height: calc(57vh + 30px); background: #fbfcf8; border-radius: 28px 28px 0 0; padding: 14px 22px 28px; box-shadow: 0 -8px 35px #223a3020; }.handle { width: 42px; height: 5px; border-radius: 9px; background: #d9ded7; margin: 0 auto 20px; }
.eyebrow { margin: 0 0 5px; color: #587064; text-transform: uppercase; letter-spacing: 1.7px; font-size: 10px; font-weight: 850; }.eyebrow.success { color: #13704b; } h1, h2 { margin: 0 0 17px; letter-spacing: -1.1px; font-size: 27px; line-height: 1.08; }.intro { color: #687970; line-height: 1.5; font-size: 13px; margin: -5px 0 18px; }
.field { display: block; background: #fff; border: 1px solid #e3e7e0; border-radius: 15px; padding: 10px 13px; margin-bottom: 9px; box-shadow: 0 3px 14px #253d3310; }.field small, .earnings small, .waiting small, .fare small, .stops small, .passenger-card small, .address small, .active-summary small { display: block; color: #7a8981; font-size: 10px; font-weight: 650; margin-bottom: 3px; }.field input { width: 100%; border: 0; outline: 0; padding: 1px 0; color: #17251f; font-weight: 750; background: transparent; }
.primary, .secondary { border: 0; border-radius: 15px; padding: 15px; font-weight: 800; }.primary { width: 100%; color: #fff; background: #12372a; box-shadow: 0 8px 18px #12372a2c; }.secondary { width: 100%; background: #eef1ec; color: #34483f; }.primary:disabled, .secondary:disabled { cursor: wait; opacity: .6; }.demo-note { color: #849189; text-align: center; font-size: 10px; margin: 12px 0 0; }.error { color: #a53a2b; background: #fff0ed; border-radius: 10px; padding: 9px 11px; margin: 0 0 10px; font-size: 12px; }
.home-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.toggle { flex: 0 0 auto; width: 52px; height: 30px; border: 0; background: #d5dbd5; border-radius: 99px; padding: 4px; transition: .2s; }.toggle i { display: block; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px #0002; transition: .2s; }.toggle[aria-checked="true"] { background: #18704e; }.toggle[aria-checked="true"] i { transform: translateX(22px); }.earnings { display: grid; grid-template-columns: 1.6fr .8fr .9fr; gap: 1px; background: #e2e7e1; border-radius: 15px; overflow: hidden; margin-bottom: 13px; }.earnings span { background: #f0f4ec; padding: 13px 10px; }.earnings strong { font-size: 13px; }.waiting { display: flex; gap: 13px; align-items: center; padding: 13px; background: #fff; border: 1px solid #e1e6df; border-radius: 15px; margin-bottom: 13px; }.waiting small { margin: 3px 0 0; }.radar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; color: #fff; background: #176447; font-weight: 900; animation: pulse 1.5s infinite; }
.offer-top { display: flex; align-items: center; justify-content: space-between; }.countdown { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #e16c32; font-weight: 900; box-shadow: 0 0 0 6px #f8e8df; }.fare { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; background: #f0f4ec; border-radius: 14px; }.fare strong { font-size: 21px; }.fare small { margin: 0; }.stops { list-style: none; padding: 8px 0; margin: 0; }.stops li { display: flex; gap: 13px; align-items: center; padding: 9px 6px; }.stops strong { display: block; font-size: 13px; }.dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 5px #e9f3ed; }.green { background: #13704b; }.orange { background: #e16c32; box-shadow: 0 0 0 5px #f8ece6; }.offer-actions { display: grid; grid-template-columns: .8fr 1.5fr; gap: 9px; }
.passenger-card { display: grid; grid-template-columns: 46px 1fr auto; gap: 11px; align-items: center; padding: 13px; background: #fff; border: 1px solid #e1e6df; border-radius: 16px; }.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: #174c37; background: #dce9e0; font-weight: 850; }.passenger-card button { border: 0; border-radius: 99px; padding: 9px 11px; background: #eaf1eb; color: #315543; font-size: 10px; font-weight: 800; }.address { padding: 14px 4px; }.address strong { font-size: 13px; }.code-field { display: block; margin: 18px 0 13px; }.code-field input { width: 100%; border: 2px solid #d7dfd7; border-radius: 17px; background: #fff; padding: 16px; text-align: center; font-size: 27px; font-weight: 900; letter-spacing: 16px; outline: 0; }.code-field input:focus { border-color: #176447; box-shadow: 0 0 0 4px #dcebe2; }.link { width: 100%; border: 0; background: transparent; padding: 14px; color: #557066; font-size: 11px; font-weight: 750; }
.status-view { text-align: center; }.status-view > p:not(.eyebrow) { color: #687970; line-height: 1.5; font-size: 13px; }.success-mark { width: 62px; height: 62px; display: grid; place-items: center; color: #fff; background: #176447; border-radius: 22px; margin: 3px auto 16px; font-size: 28px; box-shadow: 0 0 0 8px #e1eee6; }.active-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; background: #dce3dd; border-radius: 14px; margin: 18px 0 13px; text-align: left; }.active-summary span { padding: 12px 14px; background: #f0f4ec; }
.end-trip { margin-top: 9px; }.payment-total { display: grid; justify-items: center; gap: 5px; padding: 18px; margin: 18px 0 13px; border: 1px solid #dce4dd; border-radius: 17px; background: #f0f4ec; }.payment-total small, .completion-summary small { color: #7a8981; font-size: 10px; font-weight: 650; }.payment-total strong { color: #12372a; font-size: 30px; letter-spacing: -1px; }.payment-total span { padding: 5px 9px; border-radius: 99px; color: #315543; background: #fff; font-size: 10px; font-weight: 800; }.completion-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 18px 0 13px; border-radius: 14px; background: #dce3dd; text-align: left; }.completion-summary span { display: grid; gap: 5px; padding: 14px; background: #f0f4ec; }.completion-summary strong { font-size: 15px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 13px #dcebe255; } } @media (min-width: 760px) { body { padding: 24px; }.app-shell { min-height: calc(100vh - 48px); border-radius: 28px; }.map { height: 44vh; }.panel { min-height: calc(56vh + 30px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }