/* Дизайн-система: тёмная тема, жёлтый акцент (по макетам) */
:root{
  --bg:#0e1013;--s1:#16181d;--s2:#1e2128;--s3:#282c35;--line:#2a2f39;
  --fg:#fff;--mut:#9aa3b2;--accent:#ffc928;--accent-ink:#17140a;
  --ok:#22c55e;--bad:#f0524f;--blue:#3b82f6;
  --r:22px;--safe:env(safe-area-inset-bottom,0px);--top:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font:16px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg);overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}
.hidden{display:none!important}
.muted{color:var(--mut)}
.row{display:flex;align-items:center;gap:12px}
.col{display:flex;flex-direction:column;gap:10px}
.sp{flex:1;min-width:0}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* карта: светлые тайлы OSM затемняются фильтром */
#map{position:fixed;inset:0;background:var(--bg)}
.leaflet-container{background:var(--bg);font:inherit}
.leaflet-tile-pane{filter:invert(1) hue-rotate(188deg) brightness(.9) contrast(.88) saturate(.5)}
.leaflet-control-attribution{background:rgba(14,16,19,.6)!important;color:#7b8494!important;font-size:10px}
.leaflet-control-attribution a{color:#9aa3b2!important}

/* кнопки */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 18px;border-radius:16px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:17px;text-align:center;text-decoration:none;transition:transform .08s,opacity .15s}
.btn:active{transform:scale(.985);opacity:.92}
.btn.ghost{background:var(--s3);color:var(--fg);font-weight:600}
.btn.line{background:transparent;color:var(--fg);border:1.5px solid var(--line);font-weight:600}
.btn.danger{background:rgba(240,82,79,.14);color:#ff7b78;font-weight:600}
.btn.green{background:var(--ok);color:#06240f}
.btn:disabled{opacity:.35;pointer-events:none}
.btn svg{width:22px;height:22px;flex:none}
.btn.sm{width:auto;padding:9px 14px;font-size:14px;border-radius:12px;display:inline-flex}
.input{width:100%;padding:15px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--s2);outline:none;color:var(--fg)}
.input::placeholder{color:#6b7384}
.input:focus{border-color:var(--accent)}
select.input{appearance:none}
.link{color:var(--accent);font-size:14px;font-weight:600;padding:4px 0}
.link:disabled{color:var(--mut);cursor:default}

/* карточки и панели */
.sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + var(--safe));background:var(--s1);border:1px solid var(--line);border-radius:26px;box-shadow:0 12px 40px rgba(0,0,0,.55);padding:14px 16px 16px;max-height:80vh;overflow:auto;z-index:500;max-width:560px;margin:0 auto}
.sheet .grab{display:none}
.card{background:var(--s2);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.box{background:var(--s2);border-radius:16px;padding:12px 14px;font-size:15px}
.fab{position:fixed;z-index:490;width:48px;height:48px;border-radius:50%;background:var(--s1);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.5);display:grid;place-items:center;color:var(--fg)}
.fab svg{width:22px;height:22px}
.pill{position:fixed;z-index:490;top:calc(12px + var(--top));left:12px;right:12px;max-width:536px;margin:0 auto;display:flex;align-items:center;gap:12px;background:rgba(22,24,29,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:20px;padding:11px 16px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.toast{position:fixed;left:50%;top:calc(14px + var(--top));transform:translateX(-50%);background:var(--s3);color:#fff;border:1px solid var(--line);padding:11px 16px;border-radius:14px;z-index:2000;max-width:90vw;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* бейджи */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--s3);color:var(--mut)}
.badge.ok{background:rgba(34,197,94,.16);color:#4ade80}
.badge.bad{background:rgba(240,82,79,.16);color:#ff7b78}
.badge.warn{background:rgba(255,201,40,.16);color:var(--accent)}
.badge.blue{background:rgba(59,130,246,.18);color:#7db3ff}
.plate{display:inline-block;background:var(--s3);padding:3px 11px;border-radius:9px;font-weight:700;letter-spacing:1.2px;border:1px solid #3a404c;font-size:14px}
.ava{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#3a404c,#23272f);display:grid;place-items:center;font-weight:700;font-size:22px;flex:none;border:2px solid var(--accent);color:var(--accent)}
.ava{overflow:hidden;position:relative}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.ava.xl{width:104px;height:104px;font-size:42px}
.big{font-size:22px;font-weight:800;letter-spacing:-.3px}
.spin{width:22px;height:22px;border:3px solid var(--s3);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* маркеры */
.car-wrap{background:none;border:0}
.car{width:26px;height:44px;transition:transform .5s linear;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.car svg{width:100%;height:100%}
.me-img{width:64px;height:64px;display:block;pointer-events:none;transform-origin:50% 86%;animation:meBreath 2.6s ease-in-out infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
@keyframes meBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.car-box{position:relative;width:100%;height:100%;animation:carIn .4s cubic-bezier(.2,.9,.3,1.2)}
.car-box.out{animation:carOut .25s ease-in forwards}
.car-box .car{position:relative;width:100%;height:100%}
/* фото документов водителя: миниатюры, «+» и просмотр на весь экран (админка и приложение водителя) */
.docs{margin-top:8px}
.doc-th{width:54px;height:40px;object-fit:cover;border-radius:7px;border:1px solid var(--line);background:var(--s2);cursor:zoom-in}
.doc-add{width:54px;height:40px;border-radius:7px;border:1px dashed var(--mut);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--mut);cursor:pointer}
.doc-add:hover{color:var(--accent);border-color:var(--accent)}
.doc-view{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.doc-view img{max-width:min(96vw,1100px);max-height:80vh;object-fit:contain;border-radius:10px;background:#fff}
/* значок админки: круг цвета статуса (--c) с символом послуги */
.car-badge{width:100%;height:100%;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 14px var(--c);display:flex;align-items:center;justify-content:center;transition:background .3s,box-shadow .3s}
.car-badge img{width:88%;height:88%;object-fit:contain}
/* Машина по заказу: три волны золотых кругов друг за другом и мягкое золотое свечение под ней */
.car-ring{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;border:3px solid var(--accent);box-shadow:0 0 12px rgba(255,201,40,.75),inset 0 0 10px rgba(255,201,40,.35);opacity:0;pointer-events:none;animation:carRing 2.4s ease-out infinite}
.car-ring.r2{animation-delay:.8s}
/* водитель офлайн: машина без кругов и свечения, приглушённая */
.car-box.dim .car-ring,.car-box.dim .car-halo{display:none}
.car-box.dim .car{filter:grayscale(.6) brightness(.75) drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.car-ring.r3{animation-delay:1.6s}
.car-halo{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,40,.5),rgba(255,201,40,0) 70%);pointer-events:none;animation:carHalo 1.6s ease-in-out infinite}
@keyframes carHalo{50%{transform:scale(1.3);opacity:.55}}
/* Дым из выхлопной трубы: клубы вылетают из-под багажника, расплываются и тают */
.car > img,.car > svg{position:relative;z-index:1}
.car-smoke{position:absolute;left:50%;top:90%;width:0;height:0;z-index:0;pointer-events:none}
.car-smoke.off{display:none}
.car-smoke b{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(230,232,238,.9) 0%,rgba(190,195,205,.55) 45%,rgba(160,165,175,0) 72%);animation:carPuff 1.6s ease-out infinite}
.car-smoke b:nth-child(2){animation-delay:.32s;--dx:-7px}
.car-smoke b:nth-child(3){animation-delay:.64s;--dx:6px}
.car-smoke b:nth-child(4){animation-delay:.96s;--dx:-4px}
.car-smoke b:nth-child(5){animation-delay:1.28s;--dx:8px}
@keyframes carPuff{0%{opacity:.9;transform:translate(0,0) scale(.35)}55%{opacity:.5}100%{opacity:0;transform:translate(var(--dx,2px),42px) scale(2.6)}}
@keyframes carIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes carOut{to{opacity:0;transform:scale(.3)}}
@keyframes carRing{0%{transform:scale(.25);opacity:.95}100%{transform:scale(1.2);opacity:0}}
/* размер картинки меньше значка, поэтому ставим её ровно в его центр: там же центр кругов и точка на карте */
.car.img{width:36px;height:62px;position:absolute;left:50%;top:50%;margin:-31px 0 0 -18px}
.car.img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))}
/* Начало (синий) и конец (жёлто-оранжевый) поездки: кружок с белым ободком, свечение и мигание */
.pin{position:relative;width:30px;height:30px;border-radius:50%;border:5px solid #fff;--g:47,123,255;background:radial-gradient(circle at 40% 35%,#6fa8ff,#1f63ff 70%);
  box-shadow:0 0 0 3px rgba(var(--g),.95),0 0 18px 4px rgba(var(--g),.75),0 3px 8px rgba(0,0,0,.6);animation:pinGlow 1.6s ease-in-out infinite}
.pin::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid rgba(var(--g),.8);animation:pinWave 1.6s ease-out infinite}
.pin.b{--g:255,170,0;background:radial-gradient(circle at 40% 35%,#ffe066,#ffab00 70%)}
.pin.b::after{animation-delay:.8s}
/* Остановка по пути — белая метка */
.pin.s{--g:230,233,240;background:radial-gradient(circle at 40% 35%,#ffffff,#b9c1cf 70%)}
.pin.s::after{animation-delay:.4s}
@keyframes pinGlow{0%,100%{box-shadow:0 0 0 3px rgba(var(--g),.95),0 0 12px 2px rgba(var(--g),.55),0 3px 8px rgba(0,0,0,.6);filter:brightness(1)}
  50%{box-shadow:0 0 0 3px rgba(var(--g),1),0 0 26px 9px rgba(var(--g),.95),0 3px 8px rgba(0,0,0,.6);filter:brightness(1.18)}}
@keyframes pinWave{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.route-glow{filter:blur(3px);animation:routeGlow 2s ease-in-out infinite}
@keyframes routeGlow{0%,100%{stroke-opacity:.18}50%{stroke-opacity:.38}}
.me-dot{position:relative;width:18px;height:18px;border-radius:50%;background:#2f7bff;border:3px solid #fff;box-shadow:0 0 0 2px rgba(47,123,255,.6),0 0 16px 5px rgba(47,123,255,.75),0 1px 4px rgba(0,0,0,.6)}
.me-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:rgba(47,123,255,.45);z-index:-1;animation:meDot 2s ease-out infinite}
@keyframes meDot{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}

/* ---- Стекло, неон, плавные переходы ---- */
.sheet{background:rgba(22,24,29,.84);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-color:rgba(255,255,255,.09);box-shadow:0 14px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
.sheet.in{animation:sheetUp .46s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetUp{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
.sheet.in .tc{animation:cardIn .42s cubic-bezier(.2,.9,.3,1) both}
.sheet.in .tc:nth-child(2){animation-delay:.07s}
.sheet.in .tc:nth-child(3){animation-delay:.14s}
@keyframes cardIn{from{transform:translateY(18px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.btn:not(.danger):not(.ghost):not(:disabled){position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,201,40,.55),0 6px 24px rgba(255,201,40,.32),0 0 18px rgba(255,201,40,.22)}
.btn:not(.danger):not(.ghost):not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:btnShine 3.6s ease-in-out infinite}
@keyframes btnShine{0%,55%{left:-60%}100%{left:130%}}
.pulse{position:relative}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:radar 2.4s ease-out infinite}
.pulse::after{animation-delay:1.2s}
@keyframes radar{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}