/* Hakuya дизайны систем — гурван апп-д дундын.
   Өнгө: data-accent (theme.js), цайвар/бараан: data-theme. Хуудас бүр зөвхөн өөрийн байрлалын CSS-тэй. */

/* ---------- Өнгө (token) ---------- */
:root{
  --a1:#7b4fc0;--a2:#9b6fe0;--al:#f3edfc;--ad:#b08cf0;--g2:#3d3170;
  --p:var(--a1);--p2:var(--a2);--pl:var(--al);--on-p:#fff;--g1:#1b2033;
  --bg:#f3f4f8;--card:#fff;--surf:#fff;--surf2:#f8f9fb;--field:#f1f3f7;--hover:#f5f6f9;
  --tx:#111827;--tx2:#374151;--mut:#6b7280;--mut2:#9ca3af;--bd:#e5e7ee;--bd2:#eef0f4;
  --ok:#16a34a;--okl:#e7f6ec;--err:#dc2626;--errl:#fdecec;--warn:#b45309;--warnl:#fff4e2;--info:#2563eb;--infol:#e9f0fe;
  --r1:10px;--r2:14px;--r3:20px;
  --sh1:0 1px 2px rgba(17,24,39,.05);
  --sh2:0 1px 2px rgba(17,24,39,.04),0 4px 14px rgba(17,24,39,.05);
  --sh3:0 24px 60px rgba(17,24,39,.22);
  --ring:color-mix(in srgb,var(--p) 22%,transparent);
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
:root[data-accent=purple]{--a1:#7b4fc0;--a2:#9b6fe0;--al:#f3edfc;--ad:#b08cf0;--g2:#3d3170}
:root[data-accent=blue]{--a1:#2f6fdc;--a2:#5b8ef0;--al:#eaf1fd;--ad:#7aa7f7;--g2:#22406f}
:root[data-accent=green]{--a1:#12875f;--a2:#2fb487;--al:#e4f5ee;--ad:#4fd2a3;--g2:#1d4a43}
:root[data-accent=pink]{--a1:#cf3f76;--a2:#e66e98;--al:#fcebf2;--ad:#f08fb3;--g2:#5c2b52}
:root[data-accent=orange]{--a1:#d0620f;--a2:#f08a3a;--al:#fdf0e3;--ad:#f6a868;--g2:#5a3a26}
:root[data-theme=dark]{color-scheme:dark;
  --p:var(--ad);--pl:color-mix(in srgb,var(--ad) 16%,#151a28);--on-p:#10131f;--g1:#0f1320;
  --bg:#0c0f1a;--card:#151a28;--surf:#1a2030;--surf2:#181d2c;--field:#202739;--hover:#1d2335;
  --tx:#e8ebf3;--tx2:#c6ccda;--mut:#8f99b0;--mut2:#69728a;--bd:#272e42;--bd2:#20273a;
  --ok:#34d17a;--okl:#11291c;--err:#f26b66;--errl:#341a1d;--warn:#f1b24a;--warnl:#33280f;--info:#6aa1ff;--infol:#152340;
  --sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);--sh3:0 24px 60px rgba(0,0,0,.5)}

/* ---------- Суурь ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;line-height:1.4}
a{color:var(--p);text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
[hidden]{display:none!important}
.mut{color:var(--mut)} small{color:var(--mut)}
.ic{width:1.2em;height:1.2em;flex:none;vertical-align:-.22em;stroke:currentColor;fill:none}
.ic.lg{width:1.5em;height:1.5em}
.grow{flex:1;min-width:0}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.hstack{display:flex;align-items:center;gap:8px}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Оролт ---------- */
input,select,textarea{font:inherit;color:var(--tx);background:var(--field);border:1.5px solid transparent;border-radius:var(--r2);padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder,textarea::placeholder{color:var(--mut2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p);background:var(--surf);box-shadow:0 0 0 4px var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
textarea{resize:vertical}
input[type=checkbox],input[type=radio]{width:18px;height:18px;padding:0;accent-color:var(--p);cursor:pointer}
label.lbl,.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin:14px 0 6px}
.req{color:var(--err)}
.search{position:relative}
.search>.ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut2);pointer-events:none}
.search>input{padding-left:40px}
:root[data-theme=dark] :is(input,textarea,select):-webkit-autofill{-webkit-text-fill-color:var(--tx);-webkit-box-shadow:0 0 0 1000px var(--field) inset;transition:background-color 99999s}

/* ---------- Товч ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:var(--r2);padding:11px 16px;font-weight:650;font-size:14.5px;
  background:var(--field);color:var(--tx);white-space:nowrap;text-decoration:none;transition:filter .15s,background .15s,transform .05s;line-height:1.2}
.btn:hover:not(:disabled){filter:brightness(.97)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--p);color:var(--on-p)}
.btn.soft{background:var(--pl);color:var(--p)}
.btn.ok{background:var(--ok);color:#fff}
.btn.okl{background:var(--okl);color:var(--ok)}
.btn.danger{background:var(--errl);color:var(--err)}
.btn.ghost{background:transparent;color:var(--tx2)}
.btn.ghost:hover:not(:disabled){background:var(--hover);filter:none}
.btn.line{background:var(--surf);border:1px solid var(--bd);color:var(--tx2)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:var(--r1);gap:5px}
.btn.lg{padding:15px 20px;font-size:16px;border-radius:16px}
.btn.block{display:flex;width:100%}
.btn.icon{padding:0;width:40px;height:40px;border-radius:12px}
.btn.icon.sm{width:32px;height:32px;border-radius:9px}
:root[data-theme=dark] .btn.ok{color:#08130c}

/* ---------- Chip / сегмент ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);background:var(--surf);color:var(--tx2);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:600;white-space:nowrap;line-height:1.2}
.chip:hover{background:var(--hover)}
.chip.on{background:var(--p);border-color:var(--p);color:var(--on-p)}
.chip .n{font-size:11.5px;font-weight:700;background:var(--field);color:var(--mut);border-radius:999px;padding:1px 7px}
.chip.on .n{background:rgba(255,255,255,.22);color:inherit}
.seg{display:flex;background:var(--field);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;color:var(--mut);padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:650;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg button.on{background:var(--surf);color:var(--tx);box-shadow:var(--sh1)}

/* ---------- Карт, жагсаалт ---------- */
.card{background:var(--card);border-radius:var(--r3);box-shadow:var(--sh2);border:1px solid var(--bd2)}
.card.pad{padding:16px}
.sec-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:750;margin:0 0 12px;letter-spacing:-.1px}
.sec-t .ic{color:var(--p)}
.sec-t .sp{flex:1}
.sec-t small{font-weight:500}
.kv{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--bd2);font-size:14px}
.kv:first-child{border-top:0}
.kv .k{width:108px;flex:none;color:var(--mut);font-weight:500}
.kv .v{flex:1;min-width:0;word-break:break-word}
.divider{height:1px;background:var(--bd2);margin:12px 0}
.empty{text-align:center;color:var(--mut);padding:36px 16px;font-size:14px}
.empty .ic{width:40px;height:40px;color:var(--mut2);display:block;margin:0 auto 10px;stroke-width:1.6}
.empty b{display:block;color:var(--tx);font-size:15px;margin-bottom:3px}

/* ---------- Шошго ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--cb,var(--field));color:var(--c,var(--mut));line-height:1.35}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
:root[data-theme=dark] .badge{background:color-mix(in srgb,var(--c,#888) 18%,transparent)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--field);color:var(--tx2);white-space:nowrap}
.pill.gift{background:#fff1d9;color:#a35400}
:root[data-theme=dark] .pill.gift{background:#3a2a10;color:#f6b55c}

/* ---------- Анхааруулга ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r2);padding:11px 13px;font-size:13.5px;line-height:1.45;background:var(--field);color:var(--tx2)}
.alert>.ic{margin-top:1px}
.alert.warn{background:var(--warnl);color:var(--warn)}
.alert.ok{background:var(--okl);color:var(--ok)}
.alert.err{background:var(--errl);color:var(--err)}
.alert.info{background:var(--infol);color:var(--info)}
.alert b{color:inherit}
.alert .grow>div+div{margin-top:4px}

/* ---------- Цонх (modal / sheet) ---------- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(10,13,24,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--sh3);animation:up .22s ease-out}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--bd);margin:0 auto 14px}
.sheet h2{font-size:19px;font-weight:800;margin:2px 0 14px;letter-spacing:-.2px;display:flex;align-items:center;gap:10px}
.sheet .acts{display:flex;gap:10px;margin-top:18px}
.sheet .acts>*{flex:1}
.modal.center{align-items:center;padding:18px}
.modal.center .sheet{border-radius:24px;padding:24px 22px;animation:pop .18s ease-out}
.modal.center .sheet::before{display:none}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:90;display:none;max-width:min(92vw,460px);
  background:#111827;color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.28);animation:pop .18s ease-out}
.toast.ok{background:#15803d}.toast.err{background:#dc2626}
:root[data-theme=dark] .toast{background:#2a3147}

/* ---------- Мобайл апп: толгой, доод цэс ---------- */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));
  background:linear-gradient(120deg,var(--g1) 0%,var(--g2) 70%,var(--a1) 130%);color:#fff}
.appbar .logo{width:36px;height:36px;flex:none;border-radius:11px;background:#fff;padding:3px;display:grid;place-items:center;overflow:hidden}
.appbar .logo img{width:100%;height:100%;object-fit:contain}
.appbar h1{font-size:16.5px;font-weight:800;margin:0;letter-spacing:-.2px;line-height:1.2}
.appbar .sub{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:500;display:flex;align-items:center;gap:6px}
.appbar .abtn{width:38px;height:38px;flex:none;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.appbar .abtn:active{background:rgba(255,255,255,.22)}
.dotnet{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.dotnet.off{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.25)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;justify-content:space-around;background:var(--card);border-top:1px solid var(--bd);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(17,24,39,.05)}
.tabbar button{flex:1;max-width:120px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;color:var(--mut);font-size:11.5px;font-weight:650;position:relative}
.tabbar button .ic{width:24px;height:24px;stroke-width:1.9}
.tabbar button.on{color:var(--p)}
.tabbar button.on .ic{stroke-width:2.3}
.tabbar .cnt{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--err);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--card)}
.tabbar .fab{flex:none;width:56px;height:56px;margin-top:-22px;border-radius:18px;background:var(--p);color:var(--on-p);display:grid;place-items:center;box-shadow:0 10px 24px color-mix(in srgb,var(--p) 40%,transparent)}
.tabbar .fab .ic{width:28px;height:28px}

/* ---------- Газрын зураг (OpenStreetMap) бараан горимд ---------- */
:root[data-theme=dark] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6)}
:root[data-theme=dark] .leaflet-container{background:#1a1f30}
:root[data-theme=dark] .leaflet-popup-content-wrapper,:root[data-theme=dark] .leaflet-popup-tip{background:var(--surf);color:var(--tx)}
:root[data-theme=dark] .leaflet-control-attribution{background:rgba(24,28,46,.8)!important;color:var(--mut)}
:root[data-theme=dark] .leaflet-bar a{background:var(--surf);color:var(--tx);border-color:var(--bd)}
.leaflet-popup-content{font-family:var(--font)!important}

/* ---------- Лого бараан дээр ---------- */
:root[data-theme=dark] img.logo-full{background:#fff;border-radius:18px;padding:8px 14px}

/* ---------- Загвар сонгогч ---------- */
.hk-th{display:flex;flex-direction:column;gap:12px}
.hk-seg{display:flex;background:var(--field);border-radius:12px;padding:3px;gap:3px}
.hk-seg button{flex:1;border:0;background:transparent;color:var(--mut);padding:9px 6px;border-radius:9px;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap}
.hk-seg button.on{background:var(--surf);color:var(--tx);box-shadow:var(--sh1)}
.hk-sw{display:flex;gap:10px;flex-wrap:wrap}
.hk-sw button{width:34px;height:34px;border-radius:50%;border:3px solid var(--card);background:var(--sw);box-shadow:0 0 0 2px transparent;cursor:pointer;padding:0;transition:box-shadow .15s}
.hk-sw button.on{box-shadow:0 0 0 2px var(--sw)}
.hk-label{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin:16px 0 8px}

/* ---------- Зураг харах ---------- */
.viewer{position:fixed;inset:0;background:rgba(8,10,18,.92);display:none;align-items:center;justify-content:center;z-index:95;cursor:zoom-out}
.viewer img{max-width:95%;max-height:92%;border-radius:12px}

/* =====================================================================
   BENTO GRID — <html data-style="bento">
   Хүрээгүй, том дугуй булантай хавтангууд; том тоо; нэг бараан, нэг өнгөт онцлох хавтан.
   ===================================================================== */
:root[data-style=bento]{
  --bg:#f2f2f5;--card:#fff;--surf:#fff;--surf2:#f6f6f9;--field:#f2f2f5;--hover:#f6f6f9;--bd:#e6e6ec;--bd2:#eeeef2;
  --sh1:none;--sh2:none;--sh3:0 24px 60px rgba(17,17,20,.18);--g1:#111114;--g2:#2a2a33;--tile:#111114;--tile-tx:#fff;--tile-mut:#9b9ba8;--r3:26px
}
:root[data-style=bento][data-theme=dark]{
  --bg:#0b0b0f;--card:#17171d;--surf:#17171d;--surf2:#1d1d24;--field:#202028;--hover:#1d1d24;--bd:#2a2a33;--bd2:#22222a;
  --g1:#1f1f27;--g2:#2b2b36;--tile:#24242e;--tile-tx:#fff;--tile-mut:#9b9ba8
}
[data-style=bento] body{letter-spacing:-.01em}
[data-style=bento] .card{border:0;box-shadow:none;border-radius:26px}
[data-style=bento] :is(input,select,textarea){border:1.5px solid transparent;background-color:var(--field);border-radius:14px}
[data-style=bento] :is(input,select,textarea):focus{background-color:var(--card);border-color:var(--tx);box-shadow:none}
[data-style=bento] .btn{border-radius:999px}
[data-style=bento] .btn.pri{background:var(--tx);color:var(--bg)}
[data-style=bento] .btn.line{border:0;background:var(--field)}
[data-style=bento] .chip{border:0;background:var(--card)}
[data-style=bento] .chip.on{background:var(--tx);color:var(--bg)}
[data-style=bento] .chip.on .n{background:rgba(127,127,127,.25);color:inherit}
[data-style=bento] :is(.seg,.hk-seg){border-radius:999px;padding:4px}
[data-style=bento] :is(.seg,.hk-seg) button{border-radius:999px}
[data-style=bento] :is(.seg,.hk-seg) button.on{background:var(--tx);color:var(--bg);box-shadow:none}
[data-style=bento] .sec-t{font-size:16px;letter-spacing:-.3px}
[data-style=bento] .sec-t .ic{color:var(--tx)}
[data-style=bento] .badge{font-weight:700}
[data-style=bento] .sheet{border-radius:30px 30px 0 0}
[data-style=bento] .modal.center .sheet,[data-style=bento] .mcard{border-radius:30px}
/* Мобайл: толгой ил тод, доод цэс хөвөгч бараан хавтан */
[data-style=bento] .appbar{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--tx);padding-top:calc(12px + env(safe-area-inset-top))}
[data-style=bento] .appbar h1{font-size:19px;letter-spacing:-.4px}
[data-style=bento] .appbar .sub{color:var(--mut)}
[data-style=bento] .appbar .logo{border-radius:14px;background:var(--card)}
[data-style=bento] .appbar .abtn{background:var(--card);color:var(--tx);border-radius:14px}
[data-style=bento] .appbar .gpsbtn::after{border-color:var(--card)}
[data-style=bento] .appbar .shiftbtn{border-radius:999px}
[data-style=bento] .appbar .shiftbtn.on{background:var(--card);color:var(--tx)}
[data-style=bento] .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;border:0;border-radius:26px;background:var(--tile);box-shadow:0 14px 30px rgba(17,17,20,.28)}
[data-style=bento] .tabbar button{color:var(--tile-mut);border-radius:20px}
[data-style=bento] .tabbar button.on{color:var(--tile);background:var(--tile-tx)}
[data-style=bento] .tabbar .cnt{border-color:var(--tile)}
[data-style=bento] main{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
[data-style=bento] main:has(> #pg-new:not([hidden])){padding-bottom:calc(180px + env(safe-area-inset-bottom))}
[data-style=bento] .cartbar{bottom:calc(84px + env(safe-area-inset-bottom))}
[data-style=bento] .cartbar .in{background:var(--card);color:var(--tx);border-radius:26px;box-shadow:0 10px 30px rgba(17,17,20,.12)}
[data-style=bento] .cartbar .sum span{color:var(--mut);opacity:1}
[data-style=bento] .cartbar .btn{background:var(--tx);color:var(--bg)}
[data-style=bento] #mapView{bottom:0}
/* Хавтан (stat): эхнийх нь бараан, хоёр дахь нь өнгөт */
[data-style=bento] .stats{gap:10px}
[data-style=bento] .stat{border:0;box-shadow:none;border-radius:24px;padding:16px}
[data-style=bento] .stat b{font-size:26px;letter-spacing:-.8px}
[data-style=bento] .stat:first-child{background:var(--tile);color:var(--tile-tx)}
[data-style=bento] .stat:first-child span{color:var(--tile-mut)}
[data-style=bento] .stat:nth-child(2){background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
[data-style=bento] .stat:nth-child(2) span{color:rgba(255,255,255,.8)}
/* Төлөөлөгч */
[data-style=bento] .prod{border:0;background:var(--surf2);border-radius:20px}
[data-style=bento] .prod.has{background:color-mix(in srgb,var(--pc) 9%,var(--card));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pc) 60%,transparent)}
[data-style=bento] .pimg{border-radius:16px}
[data-style=bento] .stepper button{border-radius:14px;background:var(--card)}
[data-style=bento] .locline,[data-style=bento] .photo{border:0;border-radius:18px}
[data-style=bento] .bonus{border:0;border-radius:22px}
[data-style=bento] .picked,[data-style=bento] .rv{border:0;border-radius:20px}
/* Жолооч */
[data-style=bento] .hero{border-radius:28px;background:var(--tile);color:var(--tile-tx);padding:18px}
[data-style=bento] .hero .ring>div{background:var(--tile)}
[data-style=bento] .hero .pills span{background:rgba(255,255,255,.1)}
[data-style=bento] .hero .btn{background:var(--a2);color:#fff}
[data-style=bento] .ocard::before{display:none}
[data-style=bento] .ocard{border-radius:26px;padding:16px 18px}
[data-style=bento] .ocard.next{border:0;box-shadow:inset 0 0 0 2px var(--tx)}
[data-style=bento] .nexttag{background:var(--tx);color:var(--bg)}
[data-style=bento] .seq{border-radius:12px;background:var(--tx)!important;color:var(--bg)}
[data-style=bento] .qacts .btn{border-radius:20px;padding:14px 4px}
[data-style=bento] .items{border:0;border-radius:18px}
[data-style=bento] .done-acts .btn{border-radius:20px}
/* Админ: хөвөгч бараан цэс, bento KPI хавтангууд */
[data-style=bento] .layout{grid-template-columns:256px minmax(0,1fr)}
[data-style=bento] .side{margin:12px;height:calc(100vh - 24px);top:12px;border-radius:28px;background:var(--tile)}
[data-style=bento] .nav button{border-radius:999px}
[data-style=bento] .nav button.on{background:var(--tile-tx);color:var(--tile);box-shadow:none}
[data-style=bento] .nav button.on .n{background:var(--a1)}
[data-style=bento] .topbar{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:22px}
[data-style=bento] .topbar h1{font-size:30px;letter-spacing:-1px}
[data-style=bento] .kpis{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(112px,auto);gap:14px}
[data-style=bento] .kpi{border:0;box-shadow:none;border-radius:26px;padding:18px;display:flex;flex-direction:column}
[data-style=bento] .kpi:hover{transform:none;box-shadow:none;filter:brightness(.98)}
[data-style=bento] .kpi b{font-size:36px;letter-spacing:-1.2px;margin-top:auto}
[data-style=bento] .kpi .t i{border-radius:11px}
[data-style=bento] .kpi:nth-child(1){grid-column:span 2;grid-row:span 2;background:var(--tile);color:var(--tile-tx)}
[data-style=bento] .kpi:nth-child(1) .t{color:var(--tile-mut);font-size:14px}
[data-style=bento] .kpi:nth-child(1) .t i{background:rgba(255,255,255,.12);color:#fff}
[data-style=bento] .kpi:nth-child(1) b{font-size:96px;letter-spacing:-4px;line-height:1}
[data-style=bento] .kpi:nth-child(2){grid-column:span 2;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
[data-style=bento] .kpi:nth-child(2) .t{color:rgba(255,255,255,.85)}
[data-style=bento] .kpi:nth-child(2) .t i{background:rgba(255,255,255,.18);color:#fff}
[data-style=bento] .kpi:nth-child(2) .progress{background:rgba(255,255,255,.25)}
[data-style=bento] .dash,[data-style=bento] .dash2{gap:14px}
[data-style=bento] .gap{gap:14px}
[data-style=bento] #map{border-radius:20px}
[data-style=bento] .tablewrap{border-radius:0}
[data-style=bento] .bulk{border-radius:999px;background:var(--tile)}
[data-style=bento] .savebar{border:0;border-radius:999px}
@media (max-width:1250px){ [data-style=bento] .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  [data-style=bento] .layout{grid-template-columns:minmax(0,1fr)}
  [data-style=bento] .side{margin:8px;height:auto;top:8px;border-radius:22px}
}
@media (max-width:560px){
  [data-style=bento] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-style=bento] .kpi:nth-child(1){grid-row:span 1}
  [data-style=bento] .kpi:nth-child(1) b{font-size:56px}
}

/* =====================================================================
   3D — <html data-style="depth">
   Давхаргатай гүн: өнгөт гэрэлтэй дэвсгэр, дээд ирмэгт гялбаа, өнгөт сүүдэр,
   товч нь доод ирмэгтэй (дарахад доошилно), KPI хавтан хазайж хөдөлнө.
   ===================================================================== */
:root[data-style=depth]{
  --bg:#eef0fa;--card:#fff;--surf:#fff;--surf2:#f7f8fe;--field:#f4f5fc;--hover:#f3f4fc;--bd:#dfe3f1;--bd2:#e9ecf6;
  --edge:#cfd4e6;--hi:rgba(255,255,255,.95);
  --sh1:inset 0 1px 0 var(--hi),0 1px 2px rgba(30,40,90,.08),0 4px 10px -3px rgba(30,40,90,.12);
  --sh2:inset 0 1px 0 var(--hi),0 2px 4px rgba(30,40,90,.06),0 16px 32px -12px color-mix(in srgb,var(--a1) 35%,rgba(30,40,90,.25));
  --sh3:0 40px 80px -24px rgba(40,30,110,.5);
  --cardbg:linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%)
}
:root[data-style=depth][data-theme=dark]{
  --bg:#0e1020;--card:#1b1f33;--surf:#1b1f33;--surf2:#20253b;--field:#151829;--hover:#20253b;--bd:#2c3250;--bd2:#252a44;
  --edge:#0b0d19;--hi:rgba(255,255,255,.07);
  --sh2:inset 0 1px 0 var(--hi),0 2px 4px rgba(0,0,0,.3),0 18px 36px -14px color-mix(in srgb,var(--a1) 45%,rgba(0,0,0,.6));
  --cardbg:linear-gradient(180deg,#20253c 0%,#191c2f 100%)
}
[data-style=depth] body{background:
  radial-gradient(900px 520px at 0% -8%,color-mix(in srgb,var(--a2) 26%,transparent),transparent 70%),
  radial-gradient(800px 480px at 105% 0%,rgba(56,189,248,.16),transparent 70%),
  radial-gradient(700px 500px at 50% 110%,color-mix(in srgb,var(--a1) 14%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
[data-style=depth] .card{background:var(--cardbg);border:1px solid color-mix(in srgb,var(--hi) 70%,transparent);box-shadow:var(--sh2);border-radius:22px}
[data-style=depth] :is(input,select,textarea){background-color:var(--surf);border:1px solid var(--bd);box-shadow:inset 0 2px 4px rgba(30,40,90,.07)}
[data-style=depth] :is(input,select,textarea):focus{border-color:var(--p);box-shadow:inset 0 2px 4px rgba(30,40,90,.07),0 0 0 4px var(--ring)}
/* Товч — доод ирмэгтэй, дарахад доошилно */
[data-style=depth] .btn{background:linear-gradient(180deg,var(--surf),var(--surf2));border:1px solid var(--bd);box-shadow:0 3px 0 var(--edge),0 8px 14px -8px rgba(30,40,90,.35);transition:transform .06s,box-shadow .06s}
[data-style=depth] .btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--edge),0 3px 6px -4px rgba(30,40,90,.3)}
[data-style=depth] .btn:hover:not(:disabled){filter:brightness(1.03)}
[data-style=depth] .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
[data-style=depth] .btn.pri{background:linear-gradient(180deg,var(--a2),var(--a1));border-color:color-mix(in srgb,var(--a1) 70%,#000);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 color-mix(in srgb,var(--a1) 62%,#000),0 12px 20px -8px color-mix(in srgb,var(--a1) 70%,transparent)}
[data-style=depth] .btn.ok{background:linear-gradient(180deg,#34d17a,#16a34a);border-color:#12803b;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 #0f6e33,0 12px 20px -8px rgba(22,163,74,.6)}
[data-style=depth] .btn.danger{background:linear-gradient(180deg,#fff5f5,#fde4e4);border-color:#f6c4c4;box-shadow:0 3px 0 #efb3b3,0 8px 14px -8px rgba(220,38,38,.35)}
[data-style=depth] .btn.soft{background:linear-gradient(180deg,var(--surf),var(--pl));border-color:color-mix(in srgb,var(--p) 25%,var(--bd))}
[data-style=depth] .btn.okl{background:linear-gradient(180deg,var(--surf),var(--okl))}
[data-style=depth][data-theme=dark] .btn.danger{background:linear-gradient(180deg,#3a1e24,#2c161b);border-color:#4a2329;box-shadow:0 3px 0 #1a0b0e}
/* Chip, сегмент */
[data-style=depth] .chip{background:linear-gradient(180deg,var(--surf),var(--surf2));border:1px solid var(--bd);box-shadow:0 2px 0 var(--edge)}
[data-style=depth] .chip.on{background:linear-gradient(180deg,var(--a2),var(--a1));border-color:color-mix(in srgb,var(--a1) 70%,#000);color:#fff;box-shadow:0 2px 0 color-mix(in srgb,var(--a1) 60%,#000),0 8px 14px -8px color-mix(in srgb,var(--a1) 70%,transparent)}
[data-style=depth] :is(.seg,.hk-seg){background:var(--field);box-shadow:inset 0 2px 5px rgba(30,40,90,.12);padding:4px;border-radius:14px}
[data-style=depth] :is(.seg,.hk-seg) button.on{background:linear-gradient(180deg,var(--surf),var(--surf2));color:var(--p);box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--edge),0 6px 10px -6px rgba(30,40,90,.35)}
/* Мобайл: гялгар толгой, хөвөгч доод цэс */
[data-style=depth] .appbar{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,var(--a1),var(--a2));box-shadow:0 12px 26px -12px color-mix(in srgb,var(--a1) 70%,transparent)}
[data-style=depth] .appbar .abtn{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.18)}
[data-style=depth] .appbar .logo{box-shadow:0 3px 0 rgba(0,0,0,.18),0 6px 14px -6px rgba(0,0,0,.4)}
[data-style=depth] .tabbar{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));border:1px solid color-mix(in srgb,var(--hi) 70%,transparent);border-radius:24px;background:var(--cardbg);box-shadow:var(--sh2),0 20px 40px -18px rgba(30,40,90,.4)}
[data-style=depth] .tabbar button.on{color:#fff;background:linear-gradient(180deg,var(--a2),var(--a1));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 color-mix(in srgb,var(--a1) 60%,#000),0 8px 14px -8px color-mix(in srgb,var(--a1) 80%,transparent)}
[data-style=depth] main{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
[data-style=depth] main:has(> #pg-new:not([hidden])){padding-bottom:calc(180px + env(safe-area-inset-bottom))}
[data-style=depth] .cartbar{bottom:calc(82px + env(safe-area-inset-bottom))}
[data-style=depth] .cartbar .in{background:linear-gradient(180deg,#2b2f4a,#1b1e33);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 0 #0d0f1d,0 20px 36px -14px rgba(20,20,60,.6)}
[data-style=depth] .cartbar .btn{background:linear-gradient(180deg,var(--a2),var(--a1));border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 color-mix(in srgb,var(--a1) 60%,#000)}
[data-style=depth] #mapView{bottom:0}
/* Хавтан, KPI — 3D дүрс, хазайх */
[data-style=depth] :is(.stat,.kpi){background:var(--cardbg);border:1px solid color-mix(in srgb,var(--hi) 70%,transparent);box-shadow:var(--sh2);transition:transform .2s,box-shadow .2s}
[data-style=depth] .kpi:hover{transform:perspective(700px) rotateX(7deg) translateY(-4px);box-shadow:var(--sh2),0 26px 40px -18px color-mix(in srgb,var(--c) 60%,transparent)}
[data-style=depth] .kpi .t i{width:38px;height:38px;border-radius:13px;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.65),transparent 45%),linear-gradient(145deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.18),0 6px 12px -4px color-mix(in srgb,var(--c) 65%,transparent)}
[data-style=depth] .kpi .t i .ic{width:19px;height:19px}
[data-style=depth] .kpi b{font-size:32px;text-shadow:0 2px 0 rgba(30,40,90,.08)}
/* Төлөөлөгч */
[data-style=depth] .prod{border:1px solid var(--bd2);background:linear-gradient(180deg,var(--surf),var(--surf2));box-shadow:0 3px 0 var(--edge),0 10px 18px -12px rgba(30,40,90,.35)}
[data-style=depth] .prod.has{border-color:var(--pc);box-shadow:0 3px 0 color-mix(in srgb,var(--pc) 70%,#000),0 14px 24px -12px color-mix(in srgb,var(--pc) 70%,transparent)}
[data-style=depth] .pimg{box-shadow:0 6px 12px -6px rgba(30,40,90,.45);transform:rotate(-4deg)}
[data-style=depth] .stepper button{background:linear-gradient(180deg,var(--surf),var(--surf2));border:1px solid var(--bd);box-shadow:0 3px 0 var(--edge)}
[data-style=depth] .stepper button[data-d="1"]{background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 75%,#fff),var(--pc));border-color:color-mix(in srgb,var(--pc) 70%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 color-mix(in srgb,var(--pc) 60%,#000)}
[data-style=depth] .stepper button:active{transform:translateY(3px);box-shadow:none}
[data-style=depth] .photo{border-color:var(--bd)}
/* Жолооч */
[data-style=depth] .hero{background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.25),transparent 45%),linear-gradient(135deg,var(--a1),var(--a2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 0 color-mix(in srgb,var(--a1) 55%,#000),0 24px 40px -18px color-mix(in srgb,var(--a1) 80%,transparent)}
[data-style=depth] .hero .ring>div{background:color-mix(in srgb,var(--a1) 75%,#000)}
[data-style=depth] .hero .btn{background:linear-gradient(180deg,#fff,#eef0fb);color:var(--a1);border:0;box-shadow:0 3px 0 rgba(0,0,0,.2)}
[data-style=depth] .ocard::before{width:5px;border-radius:0 4px 4px 0;box-shadow:2px 0 8px color-mix(in srgb,var(--c) 50%,transparent)}
[data-style=depth] .ocard.next{border-color:var(--p);box-shadow:var(--sh2),0 0 0 3px var(--ring)}
[data-style=depth] .seq{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.25)}
[data-style=depth] .items{background:var(--field);border-color:var(--bd2);box-shadow:inset 0 2px 5px rgba(30,40,90,.08)}
/* Админ */
[data-style=depth] .side{background:radial-gradient(circle at 0% 0%,color-mix(in srgb,var(--a2) 35%,transparent),transparent 55%),linear-gradient(180deg,#1d2140,#141729)}
[data-style=depth] .nav button.on{background:linear-gradient(180deg,var(--a2),var(--a1));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 color-mix(in srgb,var(--a1) 55%,#000),0 10px 18px -8px color-mix(in srgb,var(--a1) 80%,transparent)}
[data-style=depth] .topbar{background:transparent;border:0}
[data-style=depth] #map{box-shadow:inset 0 2px 8px rgba(30,40,90,.15)}
[data-style=depth] .mcard{background:var(--cardbg)}
[data-style=depth] .bulk{background:linear-gradient(180deg,#2b2f4a,#1b1e33);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 0 #0d0f1d,0 24px 44px -16px rgba(20,20,60,.6)}