:root{
  --orange:#F5821F; --orange-dark:#d96f12; --orange-soft:#FFF1E4;
  --ink:#1F2430; --muted:#6B7280; --line:#E9EBF0; --bg:#F6F7FB; --card:#fff;
  --green:#2E9E5B; --red:#E53935; --radius:16px;
  --nav-h:62px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg)}
button{font:inherit;color:inherit}
#map{position:fixed;inset:0;z-index:0;background:#e8ecef}
.leaflet-control-attribution{font-size:9px;opacity:.7}
.leaflet-top.leaflet-right{top:calc(16px + var(--safe-t))}

/* Дээд хэсэг */
.top{position:fixed;top:0;left:0;right:0;z-index:20;padding:calc(10px + var(--safe-t)) 12px 0;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:8px 12px;box-shadow:0 4px 18px rgba(0,0,0,.12);pointer-events:auto}
.logo{width:36px;height:36px;border-radius:10px;background:var(--orange);display:grid;place-items:center;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:15px}
.status{font-size:11px;color:var(--muted)}
.status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#bbb;margin-right:5px;vertical-align:middle}
.status.live::before{background:var(--green);box-shadow:0 0 0 3px rgba(46,158,91,.2)}
.status.err::before{background:var(--red)}
.chips{display:flex;gap:6px;margin-top:8px;pointer-events:auto}
.chip{border:0;background:var(--card);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);box-shadow:0 2px 10px rgba(0,0,0,.1);cursor:pointer}
.chip.active{background:var(--orange);color:#fff}

/* FAB */
.fabs{position:fixed;right:12px;z-index:20;display:flex;flex-direction:column;gap:10px;transition:bottom .25s}
.fab{width:46px;height:46px;border-radius:50%;border:0;background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.fab.primary{background:var(--orange);color:#fff}
.fab.active{background:#1E88E5;color:#fff}

/* Доод хуудас */
.sheet{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b));z-index:15;background:var(--card);border-radius:22px 22px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.14);display:flex;flex-direction:column;transition:height .28s cubic-bezier(.2,.8,.2,1);height:38%;max-height:calc(100% - 120px)}
.sheet[data-state="hidden"]{height:0;box-shadow:none}
.sheet[data-state="peek"]{height:38%}
.sheet[data-state="full"]{height:82%}
.sheet.dragging{transition:none}
.handle{padding:10px 0 6px;display:grid;place-items:center;cursor:grab;flex:none;touch-action:none}
.handle span{width:40px;height:5px;border-radius:3px;background:#D5D8E0}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:0 14px 20px;flex:1;-webkit-overflow-scrolling:touch}
.tab h2{font-size:17px;margin:6px 0 10px}
.muted{color:var(--muted);font-size:13px}
.search{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:12px;padding:0 12px;margin-bottom:10px;color:var(--muted)}
.search input{flex:1;border:0;background:transparent;padding:11px 0;font-size:15px;outline:none;color:var(--ink)}
.list{display:flex;flex-direction:column;gap:8px}
.sec{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:12px 2px 4px}

/* Маршрутын мөр */
.route-row{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:14px;padding:10px 12px;cursor:pointer;border:2px solid transparent}
.route-row:active{transform:scale(.99)}
.route-row.selected{border-color:var(--orange)}
.badge{min-width:44px;height:36px;padding:0 8px;border-radius:10px;color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px;flex:none}
.route-row .txt{flex:1;min-width:0}
.route-row .txt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-row .txt small{color:var(--muted);font-size:12px}
.pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#fff;color:var(--muted);border:1px solid var(--line);flex:none}
.pill.student{background:#FFF7ED;color:#B45309;border-color:#FED7AA}
.pill.main{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.chev{color:#C4C8D2;flex:none}

/* Дэлгэрэнгүй */
.detail-head{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
.back{border:0;background:var(--bg);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.detail-head .txt{flex:1;min-width:0}
.detail-head b{display:block;font-size:15px}
.btn{border:0;background:var(--orange);color:#fff;font-weight:700;padding:10px 14px;border-radius:12px;cursor:pointer;font-size:14px}
.btn.ghost{background:var(--orange-soft);color:var(--orange-dark)}
.btn.block{width:100%;margin:6px 0}
.btn.sm{padding:7px 10px;font-size:12px;border-radius:9px}
.row-actions{display:flex;gap:8px;margin:4px 0 10px}

/* Буудлын жагсаалт (timeline) */
.stops{position:relative;margin:4px 0 8px;padding-left:4px}
.stop{display:flex;align-items:center;gap:12px;padding:8px 0;position:relative;cursor:pointer}
.stop .dot{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--rc,#999);flex:none;z-index:1;box-shadow:0 0 0 2px #fff}
.stop:not(:last-child)::before{content:"";position:absolute;left:6px;top:24px;bottom:-10px;width:3px;background:var(--rc,#999);opacity:.35}
.stop .txt{flex:1;min-width:0}
.stop .txt b{font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop .txt small{color:var(--muted);font-size:12px}
.stop.dir{padding:12px 0 4px}
.eta{font-weight:800;font-size:14px;color:var(--green);white-space:nowrap;text-align:right;line-height:1.1}
.eta small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.eta.soon{color:var(--orange-dark)}
.eta.none{color:#B0B4BE;font-weight:600}

/* Автобусны мөр */
.veh{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:9px 12px;cursor:pointer}
.veh .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.veh .txt{flex:1;min-width:0}
.veh .txt b{display:block;font-size:14px}
.veh .txt small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh.off{opacity:.55}

/* Ойрхон */
.near-stop{background:var(--bg);border-radius:14px;padding:10px 12px;margin-bottom:8px}
.near-stop .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer}
.near-stop .hd b{flex:1;font-size:14px}
.near-stop .hd small{color:var(--muted);font-size:12px;white-space:nowrap}
.arr{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #fff}
.arr .badge{min-width:38px;height:28px;font-size:13px;border-radius:8px}
.arr .txt{flex:1;min-width:0;font-size:13px}
.arr .txt small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}
.tag.ok{background:#E3F5EA;color:#1E7A43}.tag.no{background:#FDE8E8;color:#B42323}.tag.walk{background:#EEF0F5;color:#555}
.empty{text-align:center;padding:24px 10px;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:8px}

/* Мэдээлэл */
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv span:last-child{font-weight:600;text-align:right}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.legend .badge{height:28px;min-width:38px;font-size:13px;border-radius:8px}

/* Доод цэс */
.nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);z-index:30;background:var(--card);border-top:1px solid var(--line);display:flex}
.nav-btn{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer}
.nav-btn.active{color:var(--orange)}

/* Газрын зургийн тэмдэглэгээ */
.leaflet-marker-icon.bus-marker{transition:transform 1s linear}
.leaflet-zoom-anim .leaflet-marker-icon.bus-marker,.no-anim .leaflet-marker-icon.bus-marker{transition:none}
.bus{position:relative;width:38px;height:38px}
.bus .body{position:absolute;inset:4px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.35);border:2px solid #fff}
.bus .arrow{position:absolute;inset:0;transform:rotate(var(--h,0deg));transition:transform .6s}
.bus .arrow::before{content:"";position:absolute;left:50%;top:-4px;margin-left:-6px;border:6px solid transparent;border-bottom:9px solid var(--c);border-top:0}
.bus.stopped .body{opacity:.85}
.bus.stopped .arrow{display:none}
.bus.plain .body{font-size:10px;letter-spacing:-.02em}
.bus.idling .body{box-shadow:0 0 0 3px rgba(245,130,31,.35),0 2px 8px rgba(0,0,0,.35)}
.bus.off .body{background:#9AA0AC}
.bus.dim{opacity:.35}
.bus.sel .body{box-shadow:0 0 0 4px rgba(245,130,31,.45),0 2px 8px rgba(0,0,0,.35)}
.me{width:20px;height:20px;border-radius:50%;background:#1E88E5;border:3px solid #fff;box-shadow:0 0 0 6px rgba(30,136,229,.25)}
.leaflet-popup-content{margin:10px 12px;font-size:13px;line-height:1.35}
.leaflet-popup-content b.t{font-size:14px}
.leaflet-popup-content-wrapper{border-radius:12px}
.pop-arr{display:flex;align-items:center;gap:8px;margin-top:6px}
.pop-arr .badge{min-width:34px;height:24px;font-size:12px;border-radius:7px}

.toast{position:fixed;left:50%;transform:translateX(-50%);z-index:40;background:#1F2430;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;max-width:92%;box-shadow:0 6px 20px rgba(0,0,0,.25)}

@media (min-width:900px){
  .sheet{left:16px;right:auto;width:400px;bottom:calc(var(--nav-h) + 16px);border-radius:22px;height:calc(100% - 200px) !important;max-height:none}
  .sheet[data-state="hidden"]{height:calc(100% - 200px) !important}
  .top{left:16px;right:auto;width:400px}
  .nav{left:16px;right:auto;width:400px;bottom:16px;border-radius:22px;border:0;box-shadow:0 8px 30px rgba(0,0,0,.15);height:var(--nav-h)}
  .fabs{bottom:24px !important}
  .handle{display:none}
}