/* ── Layout helpers ── */
.container{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--sp-5)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.row.top{align-items:flex-start}
.col{display:flex;flex-direction:column;gap:var(--sp-3)}
.grow{flex:1;min-width:0}
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.center{display:grid;place-items:center}
.hide-sm{display:initial}
.only-sm{display:none}
.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.w-100{width:100%}
.tc{text-align:center}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){
  .hide-sm{display:none!important}
  .only-sm{display:initial}
  .container{padding-inline:var(--sp-4)}
}
/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.7rem 1.25rem;border-radius:var(--r-full);font-weight:600;font-size:var(--fs-base);
  border:1.5px solid transparent;background:var(--bg-sunken);color:var(--text);white-space:nowrap;user-select:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur),border-color var(--dur);
}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--grad-primary);color:var(--on-primary);box-shadow:var(--shadow-glow)}
.btn-primary:hover:not(:disabled){box-shadow:0 14px 40px rgba(14,165,233,.42)}
.btn-ghost{border-color:var(--border-strong);background:transparent}
.btn-ghost:hover:not(:disabled){background:var(--bg-sunken);border-color:var(--primary);color:var(--primary)}
.btn-soft{background:var(--primary-soft);color:var(--primary)}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-dark{background:#0F172A;color:#fff}
.btn-block{width:100%}
.btn-lg{padding:.95rem 1.6rem;font-size:var(--fs-md);border-radius:var(--r)}
.btn-sm{padding:.42rem .85rem;font-size:var(--fs-sm);gap:6px}
.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--r-full);flex:none}
.btn-icon.sm{width:34px;height:34px}
.btn[aria-busy="true"]{color:transparent;pointer-events:none;position:relative}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
/* ── Forms ── */
.field{display:flex;flex-direction:column;gap:6px;width:100%}
.field>span.lbl{font-size:var(--fs-xs);font-weight:600;color:var(--muted);letter-spacing:.02em}
.input,.select,.textarea{
  width:100%;padding:.72rem 1rem;background:var(--bg-elev);border:1.5px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);outline:none;transition:border-color var(--dur),box-shadow var(--dur);
}
.input:hover,.select:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:var(--ring)}
.input.err{border-color:var(--danger)}
.err-msg{color:var(--danger);font-size:var(--fs-xs);display:flex;align-items:center;gap:4px}
.hint{color:var(--muted-2);font-size:var(--fs-xs)}
.input-group{display:flex;align-items:center;gap:var(--sp-2);background:var(--bg-elev);border:1.5px solid var(--border);border-radius:var(--r-sm);padding-inline:.75rem}
.input-group .input{border:none;background:transparent;padding-inline:.25rem}
.input-group .input:focus{box-shadow:none}
.input-group:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.input-group svg{color:var(--muted);flex:none}
.otp-boxes{display:flex;gap:var(--sp-2);direction:ltr;justify-content:center}
.otp-boxes input{width:48px;height:56px;text-align:center;font-size:1.4rem;font-weight:700;padding:0}
.switch{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer}
.switch input{display:none}
.switch i{width:48px;height:27px;border-radius:99px;background:var(--border-strong);position:relative;transition:background var(--dur);flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform var(--dur) var(--ease);box-shadow:var(--shadow-xs)}
.switch input:checked+i{background:var(--success)}
.switch input:checked+i::after{transform:translateX(21px)}
.radio-cards{display:grid;gap:var(--sp-2)}
.radio-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1.5px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all var(--dur) var(--ease);background:var(--bg-elev)}
.radio-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.radio-card.on{border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow-sm)}
.radio-card input{display:none}
/* ── Badges & chips ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;padding:.2rem .6rem;border-radius:var(--r-full);background:var(--info-soft);color:var(--info);border:1px solid transparent}
.badge.green{background:var(--success-soft);color:var(--success)}
.badge.red{background:var(--danger-soft);color:var(--danger)}
.badge.amber{background:var(--warning-soft);color:var(--warning)}
.badge.grey{background:var(--bg-sunken);color:var(--muted)}
.badge.solid{background:var(--grad-primary);color:var(--on-primary)}
.chips{display:flex;gap:var(--sp-2);overflow-x:auto;padding-block:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:.42rem .9rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--bg-elev);font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--dur)}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.on{background:var(--grad-primary);border-color:transparent;color:var(--on-primary)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2);flex:none}
.dot.live{background:var(--success);box-shadow:0 0 0 4px rgba(5,150,105,.18);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* ── Surfaces ── */
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:var(--sp-5);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card.pad-sm{padding:var(--sp-3)}
.card.hover:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.glass{background:var(--bg-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-body{padding:var(--sp-5)}
.divider{border:0;border-top:1px solid var(--border);margin:var(--sp-4) 0}
.stat{display:flex;flex-direction:column;gap:6px;padding:var(--sp-4);border-radius:var(--r);background:var(--bg-elev);border:1px solid var(--border);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--grad-primary)}
.stat.danger::before{background:var(--danger)}
.stat.green::before{background:var(--success)}
.stat.amber::before{background:var(--accent)}
.stat b{font-family:var(--font-display);font-size:1.7rem;font-weight:800;line-height:1.15}
.stat small{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.stat .delta{font-size:var(--fs-xs);font-weight:700}
.delta.up{color:var(--success)}.delta.down{color:var(--danger)}
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--grad-primary);flex:none;font-size:var(--fs-base);letter-spacing:0}
.avatar.lg{width:64px;height:64px;font-size:var(--fs-lg)}
.avatar.sm{width:34px;height:34px;font-size:var(--fs-sm)}
.avatar.alt{background:linear-gradient(135deg,#7C3AED,#2563EB)}
.avatar.alt2{background:linear-gradient(135deg,#059669,#0EA5E9)}
.avatar.alt3{background:linear-gradient(135deg,#F59E0B,#DC2626)}
.list{display:flex;flex-direction:column}
.list-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--border);transition:background var(--dur)}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--bg-sunken)}
.list-row.clickable{cursor:pointer}
.empty{display:grid;gap:var(--sp-2);place-items:center;padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--muted)}
.empty svg{color:var(--muted-2)}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:620px}
table.tbl th{text-align:start;font-weight:700;color:var(--muted);font-size:var(--fs-xs);padding:var(--sp-3);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg-sunken)}
table.tbl td{padding:var(--sp-3);border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tbody tr{transition:background var(--dur)}
table.tbl tbody tr:hover{background:var(--bg-sunken)}
.progress{height:7px;border-radius:99px;background:var(--bg-sunken);overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:var(--grad-primary);transition:width .5s var(--ease)}
.skeleton{background:linear-gradient(90deg,var(--bg-sunken) 25%,var(--border) 50%,var(--bg-sunken) 75%);background-size:220% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-sm);height:14px}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-220% 0}}
/* ── Navbar ── */
.navbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:var(--navbar-h);padding-inline:var(--sp-5);background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);cursor:pointer}
.brand .logo-mark{width:36px;height:36px;flex:none}
.brand small{display:block;font-size:.58rem;letter-spacing:.34em;color:var(--muted);font-weight:600;direction:ltr;font-family:var(--font)}
.nav-links{display:flex;align-items:center;gap:var(--sp-1)}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:.5rem .85rem;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--dur)}
.nav-link:hover{color:var(--primary);background:var(--primary-soft)}
.nav-link.on{color:var(--primary);background:var(--primary-soft)}
@media (max-width:860px){.nav-links.desktop{display:none}}
/* ── Tabs ── */
.tabs{display:flex;gap:4px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-full);padding:4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;white-space:nowrap;text-align:center;padding:.5rem 1rem;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--dur)}
.tab:hover{color:var(--text)}
.tab.on{background:var(--bg-elev);color:var(--primary);box-shadow:var(--shadow-xs)}
/* ── Bottom sheet ── */
.sheet{position:absolute;inset-inline:0;bottom:0;z-index:40;background:var(--bg-elev);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -18px 50px rgba(8,47,73,.18);border:1px solid var(--border);border-bottom:none;max-height:calc(100% - 84px);display:flex;flex-direction:column;animation:sheetUp .38s var(--ease)}
.sheet-handle{width:44px;height:5px;border-radius:99px;background:var(--border-strong);margin:10px auto 4px;flex:none;cursor:grab}
.sheet-scroll{overflow-y:auto;padding:var(--sp-3) var(--sp-5) var(--sp-6)}
.sheet.folded{transform:translateY(calc(100% - 168px))}
@keyframes sheetUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
/* ── Modal ── */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(8,20,35,.55);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);animation:fadeIn .2s var(--ease)}
.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:88vh;overflow-y:auto;padding:var(--sp-6);animation:modalIn .28s var(--ease)}
.modal.wide{width:min(840px,100%)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
/* ── Toast ── */
.toast-wrap{position:fixed;bottom:var(--sp-5);inset-inline-start:var(--sp-5);z-index:400;display:flex;flex-direction:column;gap:var(--sp-2);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--sp-2);padding:.7rem 1.1rem;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-lg);background:var(--bg-elev);border:1px solid var(--border);animation:toastIn .3s var(--ease);max-width:340px}
.toast.success{border-color:var(--success);color:var(--success)}
.toast.error{border-color:var(--danger);color:var(--danger)}
.toast.info{border-color:var(--primary);color:var(--primary)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .45s var(--ease) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}
/* ── Map ── */
.map-wrap{position:relative;width:100%;height:100%;background:var(--map-land);overflow:hidden}
#map,.map-el{position:absolute;inset:0;z-index:1;background:var(--map-land)}
.leaflet-container{background:var(--map-land);font-family:var(--font)}
html[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.85) contrast(1.05) saturate(.85)}
.leaflet-control-zoom{border:none!important;box-shadow:var(--shadow-sm)!important;border-radius:var(--r-sm)!important;overflow:hidden}
.leaflet-control-zoom a{background:var(--bg-elev)!important;color:var(--text)!important;border-color:var(--border)!important;width:34px!important;height:34px!important;line-height:34px!important}
.leaflet-control-attribution{background:var(--bg-glass)!important;color:var(--muted)!important;font-size:9px!important;border-radius:var(--r-xs) 0 0 0}
.leaflet-popup-content-wrapper{background:var(--bg-elev);color:var(--text);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--bg-elev)}
.map-fallback{position:absolute;inset:0;z-index:0;background:
   repeating-linear-gradient(0deg,transparent 0 38px,var(--border) 38px 39px),
   repeating-linear-gradient(90deg,transparent 0 38px,var(--border) 38px 39px),
   radial-gradient(circle at 30% 40%,var(--map-water) 0 12%,transparent 12.5%);
   background-color:var(--map-land)}
.map-badge{position:absolute;z-index:20;top:var(--sp-4);inset-inline-end:var(--sp-4);background:var(--bg-glass);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r-full);padding:.35rem .8rem;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm)}
.pin-car{width:34px;height:34px;border-radius:50%;background:var(--grad-primary);display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(2,132,199,.45);border:2.5px solid #fff}
.pin-me{width:22px;height:22px;border-radius:50%;background:var(--primary);border:4px solid #fff;box-shadow:0 0 0 8px rgba(14,165,233,.22),var(--shadow)}
.pin-dest{width:26px;height:26px;border-radius:8px 8px 8px 0;transform:rotate(45deg);background:var(--danger);border:2.5px solid #fff;box-shadow:var(--shadow)}
.radar{position:absolute;inset:50% auto auto 50%;width:1px;height:1px;z-index:15}
.radar span{position:absolute;border:2px solid var(--primary);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 2.6s var(--ease) infinite;opacity:0}
.radar span:nth-child(2){animation-delay:.85s}.radar span:nth-child(3){animation-delay:1.7s}
@keyframes ripple{0%{width:20px;height:20px;opacity:.85}100%{width:420px;height:420px;opacity:0}}
.route-line{stroke:var(--primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 14;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-15}}