@font-face{font-family:Inter;font-weight:400;src:url(fonts/Inter-400.ttf) format('truetype');font-display:swap}
@font-face{font-family:Inter;font-weight:500;src:url(fonts/Inter-500.ttf) format('truetype');font-display:swap}
@font-face{font-family:Inter;font-weight:600;src:url(fonts/Inter-600.ttf) format('truetype');font-display:swap}
@font-face{font-family:Inter;font-weight:700;src:url(fonts/Inter-700.ttf) format('truetype');font-display:swap}
@font-face{font-family:Inter;font-weight:800;src:url(fonts/Inter-800.ttf) format('truetype');font-display:swap}
:root{
  --accent:#E2231A;--accent-soft:#FBE4E2;--text:#151515;--muted:#6B6F76;--bg:#F6F4F1;--panel:#fff;--line:#E6E3DE;
  --store:#F7F2F0;--store-stroke:#8E929B;--room:#E4E5E8;--route:#E2231A;
  --sidebar:360px;--hdr:88px;--top:36px;--radius:16px;--shadow:0 10px 30px rgba(20,20,20,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
body.kiosk{cursor:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.app{display:grid;grid-template-rows:var(--top) var(--hdr) 1fr;height:100vh;height:100dvh}
/* ---- yuqori qism */
.topbar{display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);letter-spacing:.02em}
.topbar .info{display:flex;gap:0}.topbar .info>span+span:before{content:'·';margin:0 14px;color:#C9C5BE}.topbar b{color:var(--text);font-weight:600}
.topbar .clock{position:absolute;right:20px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;background:var(--bg)}
.hdr .left,.hdr .right{display:flex;gap:12px;align-items:center}
.hdr .right{justify-content:flex-end}
.hdr .logo{height:64px;display:flex;align-items:center;justify-content:center}
.hdr .logo img{height:100%;width:auto;max-width:260px;object-fit:contain}
.hbtn{height:54px;min-width:54px;padding:0 16px;border-radius:999px;border:1.5px solid #D9D5CF;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;transition:transform .15s,background .2s,border-color .2s}
.hbtn:active{transform:scale(.94)}
.hbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.hbtn.on{background:var(--text);border-color:var(--text);color:#fff}
.hbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lang{display:inline-flex;border:1.5px solid #D9D5CF;border-radius:999px;background:#fff;overflow:hidden;height:54px}
.lang button{padding:0 16px;font-weight:700;font-size:14px;color:var(--muted)}
.lang button.on{background:var(--accent);color:#fff}
/* ---- asosiy */
.main{position:relative;display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:0;transition:grid-template-columns .35s cubic-bezier(.4,0,.2,1)}
.main.nosb{grid-template-columns:0 1fr}
.sidebar{background:var(--bg);display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0 0 0 22px;transition:opacity .25s}
.main.nosb .sidebar{opacity:0;pointer-events:none}
.search{position:relative;margin:2px 14px 12px 0}
.search input{width:100%;height:54px;border-radius:14px;border:1.5px solid #D9D5CF;background:#fff;padding:0 48px 0 46px;font-size:16px;outline:0;color:var(--text)}
.search input:focus{border-color:var(--accent)}
.search svg{position:absolute;left:16px;top:16px;width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.search .clr{position:absolute;right:8px;top:9px;width:36px;height:36px;border-radius:50%;background:#EEE;display:none;align-items:center;justify-content:center;font-size:18px}
.search.has .clr{display:flex}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 14px 12px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:40px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid #E2DED8;font-weight:600;font-size:14px;color:var(--text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip.on{background:var(--text);border-color:var(--text);color:#fff}
.list{flex:1;overflow-y:auto;padding:0 14px 20px 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.list .cnt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:6px 4px 10px;font-weight:600}
.item{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:10px 10px 10px 8px;border-radius:14px;transition:background .15s}
.item:active,.item.sel{background:#fff;box-shadow:var(--shadow)}
.item.sel{outline:2px solid var(--accent)}
.item .th{width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.item .th img{width:82%;height:82%;object-fit:contain}
.item .nm{font-weight:700;font-size:16px;line-height:1.2}
.item .sub{font-size:13px;color:var(--muted);margin-top:3px}
.item .fl{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid #D9D5CF;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.empty{padding:40px 10px;text-align:center;color:var(--muted)}
/* ---- xarita */
.maparea{position:relative;overflow:hidden;background:var(--bg);touch-action:none;border-radius:var(--radius) 0 0 0}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.floor{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease;transform:scale(.985)}
.floor.on{opacity:1;visibility:visible;transform:none}
.floor svg{width:100%;height:100%;display:block;overflow:visible}
.fp-sh{fill:#D8DAE0}.fp{fill:#fff;stroke:#BFC3CC;stroke-width:1.1}
.room{fill:var(--room);stroke:#C6C9D1;stroke-width:.6}
.store{fill:var(--store);stroke:var(--store-stroke);stroke-width:.8;cursor:pointer;transition:fill .2s}
.store.dim{fill:#EDEBE8;stroke:#CFD1D7}
.store.hl{fill:#EADFD9}
.store.sel{fill:var(--accent);stroke:#8E1610;stroke-width:1.2}
.lbl{font-family:Inter,sans-serif;font-weight:800;fill:#1A212F;text-anchor:middle;pointer-events:none;letter-spacing:.02em;text-transform:uppercase}
.lbl.dim{fill:#A6A8AE}.lbl.sel{fill:#fff}
.ico{pointer-events:none}
.ico rect{fill:#3B3E46}.ico.acc rect{fill:var(--accent)}
.ico path,.ico text{fill:#fff;stroke:none}
.ico text{font-family:Inter,sans-serif;font-weight:800;text-anchor:middle}
.kiosk circle.p{fill:var(--accent);opacity:.35;transform-origin:center;transform-box:fill-box;animation:pulse 1.8s ease-out infinite}
.kiosk circle.c{fill:var(--accent);stroke:#fff;stroke-width:1.2}
.kiosk .tag rect{fill:#151515}.kiosk .tag text{fill:#fff;font-family:Inter,sans-serif;font-weight:700;text-anchor:middle}
@keyframes pulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.route-bg{fill:none;stroke:#fff;stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.route{fill:none;stroke:var(--route);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.route-dash{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 6;animation:flow 1.1s linear infinite;opacity:.9}
@keyframes flow{to{stroke-dashoffset:-9}}
.pin{pointer-events:none}
.pin .body{fill:var(--accent);stroke:#fff;stroke-width:1}
.pin .dot{fill:#fff}
.pin{transform-box:fill-box;transform-origin:50% 100%;animation:drop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes drop{from{transform:translateY(-14px) scale(.6);opacity:0}}
.ent{pointer-events:none}
/* boshqaruv */
.fsw{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;gap:10px;z-index:5}
.fsw button{width:58px;height:58px;border-radius:50%;background:#fff;border:1.5px solid #D9D5CF;font-weight:700;font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .15s,background .2s}
.fsw button:active{transform:scale(.92)}
.fsw button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fsw button.rt{box-shadow:0 0 0 3px var(--accent-soft)}
.fsw .lab{text-align:center;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:-4px}
.zoom{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:5}
.zoom button{width:52px;height:52px;border-radius:14px;background:#fff;border:1.5px solid #D9D5CF;font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center}
.zoom button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.legend{position:absolute;left:18px;bottom:18px;display:flex;gap:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:12px;color:var(--muted);font-weight:600;z-index:4;backdrop-filter:blur(6px)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:16px;border-radius:4px;background:#3B3E46;display:inline-flex;align-items:center;justify-content:center}
.legend i svg{width:11px;height:11px;fill:#fff}
.legend i.acc{background:var(--accent);border-radius:50%}
.here{position:absolute;left:18px;top:18px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;z-index:4;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.here b{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.here small{font-size:10px;font-weight:800;color:#fff;background:var(--muted);border-radius:6px;padding:2px 6px;letter-spacing:.06em}.here.gps small{background:#0F9D58}.here.manual small{background:var(--text)}.here small:empty{display:none}
.here.wait b{animation:blink 1s ease-in-out infinite}@keyframes blink{50%{opacity:.3}}
.maparea.setpos{cursor:crosshair;outline:3px dashed var(--accent);outline-offset:-3px}
/* popup */
.popup{position:absolute;left:0;top:0;width:360px;background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.18);z-index:8;transform:translate(-50%,calc(-100% - 22px));opacity:0;pointer-events:none;transition:opacity .2s}
.popup.on{opacity:1;pointer-events:auto}
.popup:after{content:"";position:absolute;left:50%;top:100%;margin-left:-11px;border:11px solid transparent;border-top-color:#fff;border-bottom:0}
.popup .x{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:#F1EFEB;display:flex;align-items:center;justify-content:center;font-size:20px}
.popup .body{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:16px}
.popup .lg{width:104px;height:104px;border-radius:14px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.popup .lg img{width:84%;height:84%;object-fit:contain}
.popup h3{margin:2px 30px 4px 0;font-size:20px;line-height:1.15;font-weight:800}
.popup .meta{color:var(--muted);font-size:13px;line-height:1.5}
.popup .meta b{color:var(--text);font-weight:600}
.popup .rt{display:flex;align-items:center;gap:10px;margin-top:10px;font-weight:700;font-size:14px;color:var(--accent)}
.popup .rt svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.popup .acts{display:flex;gap:8px;padding:0 16px 16px}
.popup .acts button{flex:1;height:46px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.popup .acts button.sec{background:#F1EFEB;color:var(--text)}
.popup .acts svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* marshrut qadamlari */
.steps{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#fff;border-radius:999px;padding:8px 10px 8px 8px;box-shadow:var(--shadow);z-index:6;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.steps.on{opacity:1;pointer-events:auto}
.step{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);background:#F6F4F1;cursor:pointer}
.step.on{background:var(--text);color:#fff}
.step.done{color:var(--text)}
.step i{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:13px}
.step.on i{background:var(--accent);color:#fff}
.steps .sum{padding:0 12px;font-weight:800;font-size:15px;white-space:nowrap}
.steps .sum small{display:block;font-size:11px;color:var(--muted);font-weight:600}
/* toast / loading */
.loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);z-index:50;transition:opacity .4s}
.loader.off{opacity:0;pointer-events:none}
.loader img{height:64px}
.loader .bar{width:180px;height:4px;border-radius:2px;background:#E6E3DE;overflow:hidden}
.loader .bar i{display:block;height:100%;width:40%;background:var(--accent);animation:ld 1s ease-in-out infinite alternate}
@keyframes ld{to{transform:translateX(150%)}}
.toast{position:fixed;left:50%;top:calc(var(--top) + var(--hdr) + 14px);transform:translateX(-50%);background:#151515;color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;z-index:60;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}
/* portret (vertikal doska) */
@media (orientation:portrait){
  :root{--sidebar:0px}
  .main{grid-template-columns:1fr;grid-template-rows:1fr 42vh}
  .main.nosb{grid-template-rows:1fr 0}
  .sidebar{grid-row:2;padding:12px 16px 0 16px;border-top:1px solid var(--line);background:#fff}
  .maparea{grid-row:1;border-radius:0}
  .hdr{padding:0 14px}
  .popup{width:320px}
  .steps{bottom:12px}
  .legend{display:none}
}
@media (max-width:1100px) and (orientation:landscape){:root{--sidebar:300px}}

/* ---- reklama rejimi */
.attract{position:fixed;inset:0;z-index:40;background:#0F0A1F;opacity:0;transition:opacity .45s;cursor:pointer;overflow:hidden}
.attract.on{opacity:1}
.attract video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0F0A1F}
.attract .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 65%,rgba(0,0,0,.55));pointer-events:none}
.attract .alogo{position:absolute;left:34px;top:26px;height:54px;filter:brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,.4));opacity:.95}
.attract .ahint{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;color:#fff;font-weight:700;font-size:22px;letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.5);transition:opacity .3s,transform .3s}
.attract .ahint i{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ring 1.6s ease-out infinite}
@keyframes ring{to{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.attract.touched .ahint{opacity:0;transform:translateX(-50%) translateY(20px)}
.attract .abtns{position:absolute;left:50%;bottom:60px;transform:translateX(-50%) translateY(40px);display:flex;gap:18px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.attract.touched .abtns{opacity:1;transform:translateX(-50%);pointer-events:auto}
.attract .abtns button{height:92px;padding:0 44px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:30px;display:inline-flex;align-items:center;gap:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);cursor:pointer;transition:transform .15s}
.attract .abtns button:active{transform:scale(.95)}
.attract .abtns button.apromo{background:#fff;color:#151515}
.attract .abtns button svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.attract .alangs{position:absolute;right:30px;top:30px;display:flex;gap:8px;opacity:0;transition:opacity .3s}
.attract.touched .alangs{opacity:1}
.attract .alangs button{height:52px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:16px;backdrop-filter:blur(8px)}
.attract .alangs button.on{background:#fff;color:#151515}