:root{--gold:#ffd21c;--gold2:#ffb800;--bg:#eef1f0;--card:#fff;--ink:#101514;--muted:#6f7774;--line:#d9dedd;--black:#101716;--red:#d94b54;--green:#18c98b;--shadow:0 22px 50px rgba(13,18,17,.15);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html[data-theme=dark]{--bg:#080b0a;--card:#131817;--ink:#f7f8f7;--muted:#aeb5b2;--line:#323a37;--black:#050706;color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 50% 4%,rgba(255,210,28,.13),transparent 24rem),var(--bg);color:var(--ink);min-height:100vh}
.app{width:min(100%,720px);min-height:100vh;margin:auto;padding-bottom:max(25px,env(safe-area-inset-bottom));overflow:hidden}
.service-header{background:linear-gradient(145deg,#121816,#080b0a);color:#fff;display:flex;align-items:center;gap:14px;padding:24px clamp(18px,5vw,34px);border-bottom:1px solid rgba(255,210,28,.45);box-shadow:0 16px 45px rgba(0,0,0,.24)}
.brand,.logo{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe45c,#ffc400);color:#111;font-size:35px;box-shadow:0 0 30px rgba(255,210,28,.3);flex:none}
.service-heading{min-width:0;flex:1}
.service-heading small,.status small,.share small,.location small,.start small,.install-card>small{display:block;color:#e6ba19;font-size:13px;font-weight:900;letter-spacing:.15em}
.service-heading strong{display:block;font-size:clamp(22px,5vw,32px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-heading span{display:block;color:#c4cac7;margin-top:7px;font-size:15px}
.header-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.theme-toggle{width:49px;height:49px;border:1px solid #4c5552;border-radius:17px;background:#171e1c;color:white;font-size:25px}
.header-phone{background:var(--gold);color:#111;text-decoration:none;padding:13px 16px;border-radius:17px;font-size:16px}
.live{font-size:11px;font-weight:900}
.live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1bd292;margin-right:5px;box-shadow:0 0 10px #1bd292}
.status{display:flex;align-items:center;justify-content:space-between;padding:38px 34px 24px}
.status b{display:block;font-size:clamp(26px,6vw,38px);margin-top:8px}
.status>span{width:64px;height:64px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:50%;font-size:27px}
.countdown{margin:0 34px 22px;padding:22px 25px;border:1px solid rgba(225,181,12,.45);border-radius:27px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,rgba(255,210,28,.12),var(--card));box-shadow:0 12px 30px rgba(150,110,0,.08)}
.countdown div{font-weight:900;color:#a87e00}
.countdown span{margin-left:8px;letter-spacing:.08em}
.countdown strong{font-size:34px;font-variant-numeric:tabular-nums;color:var(--ink)}
.countdown.ending{border-color:#e25c62}
.driver-countdown{gap:18px}
.driver-countdown>div{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.driver-countdown .driver-time{align-items:flex-end;text-align:right;border-left:1px solid var(--line);padding-left:18px}
.driver-countdown span{margin:0;font-size:11px;color:#a87e00;letter-spacing:.09em}
.driver-countdown strong{line-height:1.05}
.driver-countdown em{font-size:15px;font-style:normal}
.map{height:440px;background:#dce3df;position:relative;z-index:1}
.marker{background:transparent;border:0;text-align:center}
.marker div{width:44px;height:44px;display:grid;place-items:center;background:#0d1513;border-radius:16px;font-size:24px;box-shadow:0 7px 18px rgba(0,0,0,.32)}
.marker b{background:#101716;color:#fff;padding:4px 8px;border-radius:9px;font-size:10px}
.leaflet-control-attribution{font-size:10px!important}
.start,.action,.ended,.share,.location,.privacy-details,.install-card{margin:34px;padding:38px;border-radius:34px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.start{min-height:480px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.start-icon{width:115px;height:115px;border-radius:34px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe45a,#ffc400);font-size:52px;box-shadow:0 16px 35px rgba(255,196,0,.25);margin-bottom:55px}
.start h1,.action h1,.ended h1{font-size:clamp(36px,9vw,58px);line-height:1.02;margin:20px 0}
.start p,.action p,.ended p{font-size:20px;line-height:1.5;color:var(--muted)}
button,.btn{font:inherit}
.btn{width:100%;min-height:76px;border:0;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px;text-decoration:none;font-size:18px;font-weight:950;letter-spacing:.02em;cursor:pointer}
.yellow{color:#121616;background:linear-gradient(135deg,#ffe044,#ffbe00);box-shadow:0 15px 28px rgba(226,171,0,.28)}
.dark,.black{color:#fff;background:linear-gradient(145deg,#18201e,#070b0a);border:1px solid #37413e}
.green{color:#062519;background:linear-gradient(135deg,#25dfa2,#11b97d)}
.cancel{color:var(--red);border:2px solid rgba(217,75,84,.5);background:transparent;margin:20px 34px;width:calc(100% - 68px)}
.state{margin:0 34px 22px;width:calc(100% - 68px)}
.link-controls{display:grid;gap:13px}
.share-top{margin:0 34px 22px}
.share{padding:28px}
.share>b{display:block;font-size:24px;margin:6px 0 20px}
.location{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;padding:24px}
.location .pin{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#fff2b3;font-size:29px}
.location b,.location span{display:block}
.location b{font-size:19px}
.location span{color:var(--muted);margin-top:4px}
.nav{grid-column:1/-1;min-height:60px;display:grid;place-items:center;color:white;background:#101716;border-radius:18px;text-decoration:none;font-weight:900}
.eta{margin:-1px 34px 28px;background:var(--card);border:1px solid var(--line);border-radius:0 0 30px 30px;padding:25px;display:flex;align-items:center;justify-content:space-between}
.eta small{display:block;color:var(--muted);font-weight:900}
.eta strong{font-size:42px}
.eta em{font-style:normal;font-size:18px}
.eta span{font-weight:900}
.privacy{padding:18px;border-radius:18px;background:rgba(255,210,28,.12);margin:20px 0}
.privacy b,.privacy span{display:block}
.privacy span{color:var(--muted);margin:8px 0 0}
.privacy-details{display:flex;gap:12px;padding:22px}
.privacy-details b{font-size:18px}
.privacy-details p{color:var(--muted);line-height:1.5;margin:8px 0}
.ended{text-align:center}
.ended>small{display:block;color:#d6a600;font-size:12px;font-weight:900;letter-spacing:.15em}
.ended>div{font-size:55px;color:var(--green)}
.toast{position:fixed;z-index:9999;left:50%;bottom:32px;transform:translateX(-50%);padding:16px 22px;border-radius:16px;background:#111a18;color:white;font-weight:900;box-shadow:0 15px 35px #0008;white-space:nowrap}
.error{margin:20px 34px;color:#fff;background:#b93640;padding:15px;border-radius:14px}
.loading{padding:80px 30px;text-align:center;font-weight:900}
footer{padding:20px 34px 34px;text-align:center;color:var(--muted);font-size:13px}
footer span{display:block;margin-top:22px;font-size:16px;letter-spacing:.18em;font-weight:900}
footer b{color:#d7a900}
.privacy-link{display:block;width:max-content;max-width:100%;margin:10px auto 0;color:var(--muted);font-weight:800;text-decoration:underline;text-underline-offset:4px}
.privacy-link:hover,.privacy-link:focus{color:var(--text)}
.install-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.install-card{width:min(100%,650px)}
.install-card .logo{margin:0 auto 30px}
.install-card h1{font-size:42px}
.install-card p{color:var(--muted);font-size:17px}
.install-card form{display:grid;gap:15px}
.install-card label,.admin-form label{display:grid;gap:7px;font-weight:800}
.install-card input,.admin-form input,.login-card input{width:100%;min-height:58px;padding:12px 15px;border:1px solid var(--line);border-radius:15px;background:var(--bg);color:var(--ink);font-size:17px}
.install-card .btn{margin-top:10px}
.warning{background:#fff1b8;padding:14px;border-radius:14px;color:#6f5100!important}
@media(max-width:560px){.service-header{align-items:flex-start}
.brand{width:59px;height:59px;border-radius:19px;font-size:28px}
.header-actions{max-width:110px}
.live{display:none}
.header-phone b{display:none}
.service-heading span{font-size:13px}
.start,.action,.ended,.share,.location,.privacy-details{margin:22px 18px;padding:27px 23px;border-radius:28px}
.start{min-height:450px}
.status{padding:30px 20px 20px}
.countdown{margin:0 18px 18px;padding:18px}
.countdown span{font-size:13px}
.countdown strong{font-size:29px}
.map{height:360px}
.share-top{margin:0 18px 18px}
.state{margin:0 18px 18px;width:calc(100% - 36px)}
.cancel{margin:18px;width:calc(100% - 36px)}
.btn{min-height:68px;font-size:16px}
.eta{margin:-1px 18px 22px}
.install-card{margin:0;padding:26px 20px}
.install-card h1{font-size:34px}
}
@media(max-width:560px){
.service-header{padding:15px 16px;gap:10px}
.brand{width:50px;height:50px;border-radius:16px;font-size:24px}
.service-heading small{font-size:10px}
.service-heading strong{font-size:21px}
.service-heading span{margin-top:4px;font-size:12px}
.header-actions{gap:6px;max-width:102px}
.theme-toggle{width:42px;height:42px;border-radius:14px;font-size:20px}
.header-phone{padding:10px 12px;border-radius:14px;font-size:14px}
.status{padding:20px 18px 14px}
.status small{font-size:11px}
.status b{font-size:25px;margin-top:5px}
.status>span{width:50px;height:50px;font-size:22px}
.countdown{margin:0 18px 13px;padding:13px 16px;border-radius:20px}
.countdown span{font-size:11px}
.countdown strong{font-size:25px}
.map{height:275px}
.start,.action,.ended,.share,.location,.privacy-details{margin:16px 18px;padding:21px 20px;border-radius:24px}
.start{min-height:370px}
.start-icon{width:88px;height:88px;border-radius:27px;font-size:41px;margin-bottom:28px}
.start h1,.action h1,.ended h1{margin:13px 0;font-size:36px}
.start p,.action p,.ended p{font-size:17px}
.share-top{margin:0 18px 13px}
.share{padding:20px}
.share>b{font-size:20px;margin:4px 0 14px}
.link-controls{gap:9px}
.state{margin:0 18px 13px;width:calc(100% - 36px)}
.location{gap:11px}
.location .pin{width:49px;height:49px;border-radius:15px;font-size:24px}
.location b{font-size:17px}
.location span{font-size:13px}
.nav{min-height:52px}
.cancel{margin:13px 18px;width:calc(100% - 36px)}
.btn{min-height:58px;padding:12px 15px;border-radius:19px;font-size:15px}
.eta{margin:-1px 18px 16px;padding:18px}
.eta strong{font-size:34px}
footer{padding:14px 20px 24px}
}
@media(max-width:560px){
.service-header{padding:10px 13px;gap:8px}
.brand{width:44px;height:44px;border-radius:14px;font-size:21px}
.service-heading strong{font-size:19px}
.service-heading span{font-size:11px;line-height:1.2}
.header-actions{max-width:94px}
.theme-toggle{width:38px;height:38px;border-radius:12px;font-size:18px}
.header-phone{padding:8px 10px;font-size:13px}
.status{padding:13px 15px 9px}
.status b{font-size:22px;margin-top:2px}
.status>span{width:43px;height:43px;font-size:19px}
.countdown{margin:0 15px 9px;padding:10px 13px;border-radius:17px}
.countdown strong{font-size:22px}
.map{height:235px}
.start,.action,.ended,.share,.location,.privacy-details{margin:11px 15px;padding:17px 17px;border-radius:21px}
.start{min-height:320px}
.start-icon{width:72px;height:72px;border-radius:22px;font-size:34px;margin-bottom:20px}
.start h1,.action h1,.ended h1{font-size:31px;margin:9px 0}
.start p,.action p,.ended p{font-size:15px;line-height:1.35}
.share-top{margin:0 15px 9px}
.share{padding:16px}
.share>b{font-size:18px;margin:3px 0 10px}
.state{margin:0 15px 9px;width:calc(100% - 30px)}
.location{gap:9px}
.location .pin{width:43px;height:43px;font-size:21px}
.location b{font-size:15px}
.location span{font-size:12px}
.btn{min-height:52px;padding:10px 12px;border-radius:17px;font-size:14px}
.nav{min-height:47px;font-size:14px}
.cancel{margin:9px 15px;width:calc(100% - 30px)}
.eta{margin:-1px 15px 11px;padding:14px}
.eta strong{font-size:30px}
footer{padding:10px 16px 18px}
}
@media(max-width:560px){
.status{padding:9px 15px 6px}
.status b{font-size:20px}
.status>span{width:38px;height:38px;font-size:17px}
.countdown{margin:0 15px 7px;padding:8px 12px}
.countdown strong{font-size:20px}
.driver-countdown{gap:10px}
.driver-countdown .driver-time{padding-left:10px}
.driver-countdown span{font-size:9px}
.driver-countdown strong{font-size:20px}
.driver-countdown em{font-size:12px}
.action{margin:8px 15px 10px;padding:13px 15px;border-radius:19px}
.action h1{font-size:25px;line-height:1.04;margin:3px 0 7px}
.action p{font-size:13px;line-height:1.3;margin:0 0 8px}
.action .privacy{margin:8px 0;padding:9px 10px;border-radius:13px;font-size:11px}
.action .privacy span{margin-top:3px;line-height:1.3}
.action .btn{min-height:48px;font-size:13px}
.map{height:300px}
}
.busy-overlay{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:24px;background:rgba(4,7,6,.72);backdrop-filter:blur(7px)}
.busy-overlay[hidden]{display:none}
.busy-card{width:min(290px,88vw);padding:27px 22px;border:1px solid rgba(255,210,28,.5);border-radius:25px;background:linear-gradient(145deg,#171e1c,#080b0a);color:#fff;text-align:center;box-shadow:0 20px 60px #000b,0 0 35px rgba(255,210,28,.18)}
.busy-card i{display:block;width:54px;height:54px;margin:0 auto 17px;border:6px solid rgba(255,210,28,.2);border-top-color:var(--gold);border-radius:50%;animation:taxi-spin .75s linear infinite}
.busy-card b,.busy-card span{display:block}
.busy-card b{font-size:18px}
.busy-card span{margin-top:7px;color:#aeb5b2;font-size:13px}
@keyframes taxi-spin{to{transform:rotate(360deg)}}
.btn,.theme-toggle,.header-phone,.nav{position:relative;isolation:isolate;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.btn:after,.theme-toggle:after,.header-phone:after,.nav:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.08) 28%,transparent 48%,rgba(255,255,255,.13) 72%,transparent 100%);opacity:.65}
.btn.yellow{background:linear-gradient(145deg,#ffe96a 0%,#ffd21c 48%,#ffb800 100%);border:1px solid rgba(255,239,145,.85);box-shadow:0 7px 0 #c58b00,0 14px 27px rgba(255,184,0,.3),0 0 24px rgba(255,210,28,.2),inset 0 1px 0 #fff8c2}
.btn.green{background:linear-gradient(145deg,#72f3c2 0%,#25d99a 48%,#0ead73 100%);border:1px solid rgba(174,255,224,.8);box-shadow:0 7px 0 #08754e,0 14px 27px rgba(17,185,125,.25),0 0 23px rgba(37,223,162,.18),inset 0 1px 0 #d7fff0}
.btn.dark,.btn.black,.nav{background:linear-gradient(145deg,#26312e 0%,#121917 50%,#060908 100%);border:1px solid #46534f;box-shadow:0 7px 0 #020303,0 14px 26px rgba(0,0,0,.27),0 0 18px rgba(255,210,28,.07),inset 0 1px 0 rgba(255,255,255,.13)}
.btn.cancel{box-shadow:0 6px 0 rgba(126,31,38,.32),0 12px 24px rgba(217,75,84,.12),inset 0 1px 0 rgba(255,255,255,.1)}
.theme-toggle{box-shadow:0 5px 0 #050706,0 9px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.header-phone{background:linear-gradient(145deg,#ffe96a,#ffd21c 52%,#ffb800);box-shadow:0 5px 0 #b98200,0 10px 20px rgba(255,190,0,.25),inset 0 1px 0 #fff7bb}
.btn:hover,.theme-toggle:hover,.header-phone:hover,.nav:hover{filter:brightness(1.045)}
.btn:active,.theme-toggle:active,.header-phone:active,.nav:active{transform:translateY(5px);filter:brightness(.98)}
.btn.yellow:active,.btn.green:active,.btn.dark:active,.btn.black:active,.nav:active{box-shadow:0 2px 0 #3f3100,0 6px 13px rgba(0,0,0,.2)}
@media(prefers-reduced-motion:reduce){.btn,.theme-toggle,.header-phone,.nav{transition:none}}
.btn{border-radius:28px;box-shadow:0 9px 24px rgba(15,20,18,.14),0 0 18px rgba(255,210,28,.08),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.yellow{border-color:rgba(255,226,84,.65);background:linear-gradient(135deg,#ffe66a 0%,#ffd42b 55%,#ffc20d 100%);box-shadow:0 10px 25px rgba(226,171,0,.2),0 0 20px rgba(255,210,28,.13),inset 0 1px 0 rgba(255,255,255,.72)}
.btn.green{border-color:rgba(84,225,175,.55);background:linear-gradient(135deg,#67e8b8 0%,#2bd39a 55%,#18bc82 100%);box-shadow:0 10px 25px rgba(17,185,125,.18),0 0 19px rgba(37,223,162,.12),inset 0 1px 0 rgba(229,255,246,.68)}
.btn.dark,.btn.black,.nav{border-color:#394541;background:linear-gradient(135deg,#222b28 0%,#121917 58%,#0a0e0d 100%);box-shadow:0 9px 23px rgba(0,0,0,.2),0 0 14px rgba(255,210,28,.045),inset 0 1px 0 rgba(255,255,255,.1)}
.btn.cancel{border-radius:28px;box-shadow:0 8px 20px rgba(217,75,84,.08),inset 0 1px 0 rgba(255,255,255,.12)}
.theme-toggle{border-radius:50%;box-shadow:0 7px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.header-phone{border-radius:999px;box-shadow:0 8px 20px rgba(255,190,0,.18),inset 0 1px 0 rgba(255,255,255,.65)}
.nav{border-radius:24px}
.btn:active,.theme-toggle:active,.header-phone:active,.nav:active{transform:translateY(2px);filter:brightness(.98)}
.btn.yellow:active,.btn.green:active,.btn.dark:active,.btn.black:active,.nav:active{box-shadow:0 4px 12px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.3)}
@media(max-width:560px){.btn{border-radius:24px}.btn.cancel{border-radius:24px}.nav{border-radius:20px}}