:root{--primary:#2481cc;--primary-dark:#1b6aa5;--bg:#f4f7fb;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#dce5ee;--danger:#b42318;--success:#087443;--warning:#9a6700;--shadow:0 6px 24px rgba(15,23,42,.06)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif;line-height:1.65;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.app-shell{max-width:760px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom))}.app-header{display:flex;align-items:center;gap:12px;margin:4px 0 18px}.brand-mark{width:46px;height:46px;border-radius:15px;background:var(--primary);display:grid;place-items:center;color:#fff;font-size:25px;font-weight:700;box-shadow:var(--shadow)}.brand-copy{flex:1}.brand-copy h1{font-size:19px;margin:0;font-weight:800}.brand-copy p{margin:1px 0 0;color:var(--muted);font-size:12px}.icon-button{border:1px solid var(--line);background:#fff;border-radius:12px;width:42px;height:42px;font-size:25px;color:var(--primary)}h2,h3,p{margin-top:0}h2{font-size:19px;margin-bottom:2px}h3{font-size:16px;margin-bottom:3px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 2px 12px}.section-heading p{font-size:12px;color:var(--muted);margin:0}.step-chip{background:#e3eefb;color:var(--primary-dark);border-radius:999px;padding:4px 10px;white-space:nowrap;font-size:11px;font-weight:700}.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#e8eef3;padding:5px;border-radius:15px;margin-bottom:18px}.role-tab{border:0;border-radius:11px;padding:10px 12px;background:transparent;color:#4b5b5a;font-weight:700}.role-tab.active{color:var(--primary-dark);background:white;box-shadow:0 2px 8px rgba(15,23,42,.08)}.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}.panel-icon{font-size:32px;margin-bottom:8px}.hidden{display:none!important}.notice{margin-bottom:12px;padding:11px 13px;border-radius:12px;background:#e6f1fb;color:var(--primary-dark);font-size:13px}.notice.error{background:#ffebe9;color:var(--danger)}.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:700;line-height:1.4;min-height:43px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{background:var(--primary-dark)}.btn-outline{background:#fff;border:1px solid var(--line);color:var(--text)}.btn-small{font-size:12px;min-height:36px;padding:7px 10px}.btn-small.active{border-color:var(--primary);background:#e6f5f3;color:var(--primary-dark)}.btn-block{width:100%;margin-top:10px}.map-panel{padding:10px}.map-tools{display:flex;gap:7px;flex-wrap:wrap;padding:1px 1px 9px}.map-tools .btn{flex:1}#map{height:310px;border-radius:13px;overflow:hidden;background:#e0e9e7;z-index:1}.map-hint{font-size:11px;color:var(--muted);margin:7px 3px 0}.form-panel label,.stack-form label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}.form-panel input,.form-panel select,.stack-form input,.stack-form select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);padding:10px 11px;min-height:42px;outline-color:var(--primary)}.form-panel>label:not(:first-child){margin-top:13px}.fare-box{margin-top:16px;border:1px solid #c9e5e0;border-radius:14px;padding:13px;background:#f7fcfb}.metric{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin:4px 0}.metric span{color:var(--muted)}.metric strong{font-size:13px}.fare-total{border-top:1px solid #d9eae7;margin-top:12px;padding-top:12px;display:flex;justify-content:space-between;gap:8px;align-items:center}.fare-total span{font-weight:700}.fare-total strong{font-size:22px;color:var(--primary-dark)}.muted{color:var(--muted)}.small{font-size:11px}.fare-box .small{margin:5px 0 10px}.stack-form{display:grid;gap:10px}.stack-form label{margin:0}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:9px}.privacy-note{background:#fff7e6;color:#784e00;border:1px solid #f5dfaa;padding:10px;border-radius:10px;font-size:11px}.online-panel{display:flex;align-items:center;justify-content:space-between;gap:10px}.online-panel p{font-size:12px;margin:2px 0 0}.online-panel .btn{max-width:210px}.balance-panel{display:flex;align-items:center;justify-content:space-between;gap:12px}.balance-panel strong{display:block;font-size:20px;color:var(--primary-dark);margin-top:5px}.balance-panel .small{max-width:130px;text-align:left}.stack-list{display:grid;gap:10px;margin-bottom:12px}.item-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px}.item-card h4{margin:0 0 4px;font-size:14px}.item-card p{font-size:12px;color:var(--muted);margin:4px 0}.item-actions{display:flex;gap:8px;margin-top:10px}.item-actions .btn{flex:1}.status-badge{display:inline-block;padding:3px 8px;background:#eef2f2;color:#405351;border-radius:999px;font-size:11px}.status-badge.success{background:#e1f5ea;color:#087443}.status-badge.warning{background:#fff2cc;color:#8a5700}.trip-contact{background:#f1f7fd;border-radius:12px;padding:10px;margin:9px 0;font-size:12px}.navigation-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}.navigation-links a{display:block;text-align:center;text-decoration:none;color:var(--primary-dark);border:1px solid #c9e5e0;border-radius:10px;padding:9px 5px;font-size:12px;font-weight:700}.trip-status-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.trip-fare{font-weight:800;color:var(--primary-dark)}.app-footer{text-align:center;color:var(--muted);font-size:10px;padding:8px 4px}.compact{margin-bottom:8px}
@media(min-width:600px){.app-shell{padding-top:24px}.app-header h1{font-size:22px}#map{height:390px}.panel{padding:18px}.form-panel{padding:20px}}

/* Payment, referral and receipt additions */
.referral-panel{margin-top:-7px}.referral-row{display:grid;gap:6px;padding:11px 0;border-top:1px solid var(--line)}.referral-row:first-of-type{border-top:0}.referral-row label{font-weight:700;font-size:12px}.referral-row input{width:100%;direction:ltr;text-align:left;border:1px solid var(--line);border-radius:10px;background:#f8fbfe;padding:9px 10px;font-size:11px;color:var(--text)}.referral-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.referral-actions .muted{margin-inline-start:auto}.payment-destination strong{display:block;margin-bottom:4px}.destination-card-number{font-size:21px;font-weight:800;letter-spacing:1px;line-height:1.8;color:var(--primary-dark)}.payment-destination p{margin:3px 0 7px}.payment-proof-panel .form-panel{padding:0}.payment-proof-panel .form-panel label{margin-top:11px}.payment-proof-panel .form-panel input,.payment-proof-panel .form-panel select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);padding:10px 11px;min-height:42px}.item-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.status-chip{display:inline-block;border-radius:999px;padding:3px 8px;font-size:10px;background:#fff2cc;color:#8a5700;white-space:nowrap}.status-chip.success{background:#e1f5ea;color:#087443}.status-chip.danger,.error-text{background:#ffebe9;color:var(--danger)}.error-text{padding:6px 8px;border-radius:8px}.payment-proof-panel h4{font-size:13px;margin:14px 0 8px}
@media(max-width:420px){.referral-actions .btn{flex:1}.referral-actions .muted{width:100%;margin:0}.destination-card-number{font-size:18px}.online-panel{align-items:flex-start;flex-direction:column}.online-panel .btn{max-width:none;width:100%}}
.passenger-map-view { position: relative; height: 100vh; overflow: hidden; }
.passenger-map { position: absolute; inset: 0; background: #e7edf3; }
.marker-pickup, .marker-dest { display: grid; place-items: center; font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.passenger-fab { position: absolute; z-index: 1000; width: 46px; height: 46px; border-radius: 50%; border: none; background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.22); font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: transform .15s ease; }
.passenger-fab:active { transform: scale(.94); }
.passenger-menu-fab { top: calc(12px + env(safe-area-inset-top)); left: 12px; }
.passenger-gps-fab { bottom: calc(150px + env(safe-area-inset-bottom)); right: 12px; }
.passenger-menu { position: absolute; top: calc(66px + env(safe-area-inset-top)); left: 12px; z-index: 1001; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.22); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 190px; animation: menuIn .16s ease; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.passenger-menu button { background: none; border: none; padding: 11px 12px; text-align: right; cursor: pointer; border-radius: 10px; font-size: 13px; color: var(--text); }
.passenger-menu button:active { background: #eef4fb; }
.passenger-sheet { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(15,23,42,.18); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); max-height: 52vh; overflow-y: auto; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.passenger-sheet.hidden { transform: translateY(105%); }
.passenger-sheet-handle { width: 42px; height: 4px; background: #d8e2ee; border-radius: 2px; margin: 2px auto 12px; }
.passenger-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: #eef3fb; padding: 4px; border-radius: 14px; }
.passenger-tabs button { flex: 1; padding: 9px 6px; border: none; border-radius: 10px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: #5b6b7a; transition: background .15s, color .15s; }
.passenger-tabs button.active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(15,23,42,.1); }
.fare-route { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0 4px 10px; }
.fare-route-sep { opacity: .5; }
.fare-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.fare-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #fbfcfe; cursor: pointer; text-align: right; transition: border-color .15s, background .15s, transform .12s; }
.fare-item:active { transform: scale(.985); }
.fare-item.active { border-color: var(--primary); background: #e8f1fc; }
.fare-car { font-size: 22px; line-height: 1; }
.fare-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fare-title { font-weight: 700; font-size: 14px; }
.fare-note { font-size: 10.5px; color: var(--muted); }
.fare-price { font-weight: 800; color: var(--primary-dark); font-size: 13px; white-space: nowrap; }
.fare-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfd9e6; display: grid; place-items: center; font-size: 12px; color: #fff; background: #fff; flex-shrink: 0; transition: background .15s, border-color .15s; }
.fare-item.active .fare-check { background: var(--primary); border-color: var(--primary); }
.passenger-fare-info { display: none; }
.passenger-waiting, .passenger-driver { position: absolute; inset: 0; z-index: 1002; display: flex; align-items: flex-end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28)); }
.passenger-waiting.hidden, .passenger-driver.hidden { display: none; }
.passenger-waiting-card, .passenger-driver-card { width: 100%; background: #fff; border-radius: 22px; padding: 20px 18px; box-shadow: 0 -8px 34px rgba(15,23,42,.24); animation: sheetUp .28s cubic-bezier(.4,0,.2,1); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.waiting-pulse { display: flex; justify-content: center; gap: 7px; margin: 2px 0 14px; }
.waiting-pulse span { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); animation: pulse 1s infinite ease-in-out; }
.waiting-pulse span:nth-child(2) { animation-delay: .15s; }
.waiting-pulse span:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%,100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }
.waiting-title { text-align: center; margin: 0 0 4px; font-size: 16px; }
.waiting-sub { text-align: center; color: var(--muted); font-size: 12px; margin: 0 auto 16px; max-width: 280px; }
.waiting-route { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #f2f7fd; border-radius: 16px; padding: 12px; margin-bottom: 16px; }
.waiting-point { display: flex; flex-direction: column; align-items: center; width: 100%; }
.waiting-point i { font-style: normal; font-size: 10px; color: var(--muted); }
.waiting-point b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waiting-arrow { color: var(--primary); font-size: 14px; }
.passenger-driver-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.passenger-driver-photo { width: 58px; height: 58px; border-radius: 50%; background: #eef3fb; display: grid; place-items: center; font-size: 28px; flex-shrink: 0; overflow: hidden; }
.passenger-driver-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.passenger-driver-info strong { font-size: 15px; }
.passenger-driver-info span { font-size: 12px; color: var(--muted); }
.passenger-driver-plate { font-weight: 800; background: #fff7e6; border: 1px solid #f0dcae; border-radius: 10px; padding: 5px 9px; font-size: 12px; direction: ltr; }
.passenger-driver-fare { display: flex; flex-direction: column; gap: 3px; background: #e8f1fc; border-radius: 14px; padding: 12px; margin: 0 0 14px; text-align: center; }
.passenger-driver-fare span { font-size: 20px; font-weight: 800; color: var(--primary-dark); }
.passenger-driver-fare small { color: var(--muted); font-size: 11px; }
.passenger-driver-actions { display: flex; gap: 8px; }
.passenger-driver-actions .btn { flex: 1; }
body.passenger-fullscreen .app-header,
body.passenger-fullscreen .role-tabs,
body.passenger-fullscreen .referral-panel { display: none !important; }
body.passenger-fullscreen #notice { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; z-index: 1003; }
body.passenger-fullscreen .app-shell { padding: 0 !important; max-width: none !important; }
body.passenger-fullscreen .passenger-map-view { position: fixed; inset: 0; height: 100vh; height: 100dvh; width: 100vw; z-index: 1; }
body.passenger-fullscreen .passenger-map { height: 100%; }
body.passenger-fullscreen #map { height: 100vh !important; height: 100dvh !important; width: 100vw !important; position: fixed; top: 0; left: 0; }
.center-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; }
.center-pin-dot { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--primary); background: rgba(36,129,204,.15); box-shadow: 0 0 0 4px rgba(255,255,255,.75); }
.center-pin-hint { margin-top: 7px; background: var(--primary-dark); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(15,23,42,.3); }
.center-pin.hidden { display: none; }
.place-search { position: absolute; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 950; display: flex; flex-direction: column-reverse; gap: 8px; }
.place-search.hidden { display: none; }
.place-search-bar { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 3px 10px; box-shadow: 0 6px 20px rgba(15,23,42,.16); }
.place-search-icon { font-size: 15px; opacity: .5; }
.place-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; padding: 12px 2px; color: var(--text); min-width: 0; }
.place-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.place-search-clear { border: none; background: #eef3fb; color: #5b6b7a; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.place-search-clear.hidden { display: none; }
.place-results { background: #fff; border-radius: 14px; box-shadow: 0 10px 26px rgba(15,23,42,.2); overflow: hidden; max-height: 42vh; overflow-y: auto; }
.place-results.hidden { display: none; }
.place-result { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; text-align: right; padding: 12px; font-size: 13px; color: var(--text); cursor: pointer; border-bottom: 1px solid #f0f4fa; }
.place-result:last-child { border-bottom: none; }
.place-result:active { background: #f1f7fd; }
.place-result-icon { font-size: 16px; opacity: .6; flex-shrink: 0; }
.place-result-label { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.place-results-empty { padding: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.outside-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
html:not(.outside-telegram) .outside-gate { display: none; }
html.outside-telegram .app-shell { display: none !important; }
html.outside-telegram, html.outside-telegram body { overflow: hidden; height: 100%; }
.outside-gate-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 28px 22px; text-align: center; }
.outside-gate-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; display: block; box-shadow: 0 6px 18px rgba(36, 129, 204, 0.25); background: var(--card); }
.outside-gate-card h2 { font-size: 19px; margin: 0 0 8px; }
.outside-gate-card p { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.9; }
.outside-gate-card .btn { display: block; text-decoration: none; text-align: center; }