/* Mechta Ops — платформа управления сетью. Бренд Mechta.kz: Lato, #E61771, светлые подложки, скругления 16px */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --brand:#E61771; --brand-d:#C50F5E; --brand-s:#FDE8F1; --brand-s2:#FBD0E2; --brand-rgb:230,23,113;
  --blue:#2C82D2; --vio:#7C4DFF; --ok:#17B978; --ok-s:#E3F8EF; --warn:#F2A300; --warn-s:#FFF3D6; --bad:#E6372E; --bad-s:#FDE7E5; --info:#2C82D2; --info-s:#E4F0FB; --grey:#9AA0AE; --amber:#F2A300;
  --bg:#F2F2F2; --panel:#FFFFFF; --panel2:#F7F7F8; --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.14);
  --ink:rgba(0,0,0,.85); --ink2:rgba(0,0,0,.65); --ink3:rgba(0,0,0,.45); --hint:rgba(0,0,0,.3);
  --r:16px; --r2:12px; --r3:8px; --sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.18); --sh2:0 18px 44px -20px rgba(0,0,0,.28);
  --font:'Lato',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --rail:244px; --top:60px;
  --p0:#E61771;--p1:#7C4DFF;--p2:#2C82D2;--p3:#17B978;--p4:#F2A300;--p5:#9AA0AE;
}
:root[data-theme="dark"]{ --bg:#111216; --panel:#1B1C22; --panel2:#22242B; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --ink:rgba(255,255,255,.92); --ink2:rgba(255,255,255,.68); --ink3:rgba(255,255,255,.45); --hint:rgba(255,255,255,.3); --brand-s:rgba(230,23,113,.16); --brand-s2:rgba(230,23,113,.3); --ok-s:rgba(23,185,120,.16); --warn-s:rgba(242,163,0,.16); --bad-s:rgba(230,55,46,.16); --info-s:rgba(44,130,210,.16); --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.6); }
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
b,strong{font-weight:700}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}

/* ---------- login ---------- */
.login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(1200px 600px at 70% 20%,rgba(230,23,113,.14),transparent 60%),var(--bg)}
.login .box{width:360px;max-width:92vw;background:var(--panel);border-radius:22px;box-shadow:var(--sh2);padding:36px 32px;text-align:center}
.login .logo{height:30px;margin:0 auto 14px;display:block}
.login h1{font-size:19px;margin-bottom:4px}
.login p{color:var(--ink3);font-size:13px;margin-bottom:22px}
.pin{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.pin i{width:40px;height:48px;border-radius:12px;border:1.5px solid var(--line2);display:grid;place-items:center;font:600 20px var(--mono);transition:.2s}
.pin i.on{border-color:var(--brand);background:var(--brand-s)}
.pin.err i{border-color:var(--bad);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.login .hint{font-family:var(--mono);font-size:11px;color:var(--hint);letter-spacing:.08em}
.login input{position:absolute;opacity:0;pointer-events:none;left:50%;top:50%;width:1px;height:1px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;overflow:auto}
.rail .brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.rail .brand img{height:22px}
.rail .brand small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);font-family:var(--mono);display:block;margin-top:3px}
.rail .grp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);padding:14px 10px 6px}
.rail a.ni{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--ink2);font-size:14px;transition:.2s;position:relative}
.rail a.ni:hover{background:var(--panel2);color:var(--ink)}
.rail a.ni.on{background:var(--brand-s);color:var(--brand);font-weight:700}
.rail a.ni .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:999px;background:var(--panel2);color:var(--ink3)}
.rail a.ni .cnt.hot{background:var(--brand);color:#fff}
.rail a.ni.later{opacity:.55}
.rail a.ni.later::after{content:"демо";margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.rail .foot{margin-top:auto;padding:14px 10px 4px;font-size:11px;color:var(--hint);line-height:1.5}
.rail .foot b{color:var(--ink3);font-weight:400}
.main{min-width:0}
.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .ttl{font-size:17px;font-weight:700}
.top .ttl small{display:block;font-size:12px;font-weight:400;color:var(--ink3)}
.top .srch{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;width:280px;color:var(--ink3);font-size:13px}
.top .srch input{border:0;background:transparent;outline:0;flex:1;font:inherit;color:var(--ink)}
.top .ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--ink2);position:relative;transition:.2s}
.top .ib:hover{border-color:var(--brand);color:var(--brand)}
.top .ib .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--panel)}
.top .date{font-family:var(--mono);font-size:11px;color:var(--ink3);letter-spacing:.06em}
.top .burger{display:none}
#content{padding:22px 24px 60px;max-width:1480px}
.demo-tag{position:fixed;right:16px;bottom:14px;z-index:30;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

/* ---------- layout ---------- */
.row{display:grid;gap:16px;margin-bottom:16px}
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}.c21{grid-template-columns:2fr 1fr}.c12{grid-template-columns:1fr 2fr}.c32{grid-template-columns:3fr 2fr}
.card{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--line);min-width:0}
.card .ch{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 0}
.card .ch h3{font-size:15px}
.card .ch p{font-size:12.5px;color:var(--ink3);margin-top:2px}
.card .cr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.card .cb{padding:14px 18px 18px}
.card.flat{box-shadow:none;background:var(--panel2);border:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px;position:relative;overflow:hidden;box-shadow:var(--sh);transition:.25s;min-width:0}
.kpi[data-href]{cursor:pointer}.kpi[data-href]:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--brand-s2)}
.kpi .l{font-size:12.5px;color:var(--ink3)}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.kpi .v small{font-size:13px;font-weight:400;color:var(--ink3)}
.kpi .sub{font-size:12px;color:var(--ink3);margin-top:2px}
.kpi .sts{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.kpi .st{font-size:11.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:5px}
.kpi .st i{width:7px;height:7px;border-radius:50%;background:var(--grey)}
.kpi .st.ok i{background:var(--ok)}.kpi .st.bad i{background:var(--bad)}.kpi .st.warn i{background:var(--warn)}.kpi .st.brand i{background:var(--brand)}
.kpi .spark{position:absolute;right:0;bottom:0;width:46%;height:38px;opacity:.9}
.kpi.brand{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border:0}
.kpi.brand .l,.kpi.brand .sub,.kpi.brand .v small,.kpi.brand .st{color:rgba(255,255,255,.8)}
.kpi.brand .spark .ln{stroke:#fff}.kpi.brand .spark .area{fill:rgba(255,255,255,.18)}.kpi.brand .spark .dot{fill:#fff}
.delta{font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--ok-s);color:var(--ok)}
.delta.dn{background:var(--bad-s);color:var(--bad)}
.kpi.brand .delta{background:rgba(255,255,255,.2);color:#fff}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--panel2);color:var(--ink2);white-space:nowrap}
.pill.ok{background:var(--ok-s);color:var(--ok)}.pill.bad{background:var(--bad-s);color:var(--bad)}.pill.warn{background:var(--warn-s);color:#b27600}.pill.brand{background:var(--brand-s);color:var(--brand)}.pill.info{background:var(--info-s);color:var(--info)}.pill.vio{background:rgba(124,77,255,.12);color:var(--vio)}.pill.grey{background:var(--panel2);color:var(--ink3)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;font-size:13.5px;font-weight:700;transition:.2s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}.btn.p:hover{background:var(--brand-d);color:#fff}
.btn.xs{padding:5px 11px;font-size:12px}.btn.sm{padding:7px 13px;font-size:12.5px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand)}
.btn.done{background:var(--ok-s);border-color:transparent;color:var(--ok);pointer-events:none}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- charts ---------- */
svg.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .bar{fill:var(--brand);opacity:0;transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;animation:barIn .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
.chart .bar.fc{fill:var(--brand-s2)}.chart .bar.hi{fill:var(--vio)}
@keyframes barIn{to{opacity:1;transform:none}}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:lnIn 1.4s ease .3s forwards}
@keyframes lnIn{to{stroke-dashoffset:0}}
.chart .area{fill:rgba(var(--brand-rgb),.1)}
.chart .lbl{font-family:var(--mono);font-size:10px;fill:var(--ink3)}.chart .lbl.b{fill:var(--bad);font-weight:600}
.chart .dot{fill:var(--brand)}.chart .dot.bad{fill:var(--bad)}
.chart .mark{stroke:var(--bad);stroke-dasharray:4 4}
.spark .ln{fill:none;stroke:var(--brand);stroke-width:1.6}.spark .area{fill:rgba(var(--brand-rgb),.12)}.spark .dot{fill:var(--brand)}
.hbars{display:grid;gap:9px}
.hb{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr auto;gap:12px;align-items:center;font-size:13px}
.hb .n{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .trk{height:9px;border-radius:999px;background:var(--panel2);overflow:hidden}
.hb .trk i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);animation:wIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes wIn{to{width:var(--w)}}
.hb.ok .trk i{background:var(--ok)}.hb.warn .trk i{background:var(--warn)}.hb.bad .trk i{background:var(--bad)}.hb.vio .trk i{background:var(--vio)}.hb.info .trk i{background:var(--info)}.hb.grey .trk i{background:var(--grey)}
.hb .val{font-family:var(--mono);font-size:12px;white-space:nowrap;text-align:right}
.donut{position:relative;width:150px;height:150px;flex:none}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut .bg{fill:none;stroke:var(--panel2)}
.donut .seg{fill:none;stroke-linecap:butt;opacity:0;animation:segIn .5s ease forwards;animation-delay:var(--d,0ms)}
@keyframes segIn{to{opacity:1}}
.donut .c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:12px;color:var(--ink3)}
.donut .c b{display:block;font-size:22px;color:var(--ink)}
.seg.p0,i.p0{stroke:var(--p0);background:var(--p0)}.seg.p1,i.p1{stroke:var(--p1);background:var(--p1)}.seg.p2,i.p2{stroke:var(--p2);background:var(--p2)}.seg.p3,i.p3{stroke:var(--p3);background:var(--p3)}.seg.p4,i.p4{stroke:var(--p4);background:var(--p4)}.seg.p5,i.p5{stroke:var(--p5);background:var(--p5)}
.seg.brand,i.brand{stroke:var(--brand);background:var(--brand)}.seg.vio,i.vio{stroke:var(--vio);background:var(--vio)}.seg.info,i.info{stroke:var(--info);background:var(--info)}.seg.grey,i.grey{stroke:var(--grey);background:var(--grey)}.seg.amber,i.amber{stroke:var(--amber);background:var(--amber)}.seg.ok,i.ok{stroke:var(--ok);background:var(--ok)}
.legend{display:grid;gap:7px;font-size:13px}
.legend .li{display:flex;align-items:center;gap:8px}.legend .li i{width:9px;height:9px;border-radius:50%;flex:none}.legend .li span{color:var(--ink2);flex:1}.legend .li b{font-family:var(--mono);font-size:12px;font-weight:500}
.dl{display:flex;gap:22px;align-items:center}
.ring{position:relative;flex:none}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring .bg{fill:none;stroke:var(--panel2);stroke-width:5}.ring .fg{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.ring.ok .fg{stroke:var(--ok)}.ring.warn .fg{stroke:var(--warn)}.ring.bad .fg{stroke:var(--bad)}.ring.brand .fg{stroke:var(--brand)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px}
.heat{display:grid;grid-template-columns:36px repeat(var(--cols),1fr);gap:3px;font-family:var(--mono);font-size:9.5px;color:var(--ink3)}
.heat .hc{text-align:center}.heat .hr{align-self:center}
.heat .cell{aspect-ratio:1.4;border-radius:3px;background:rgba(var(--brand-rgb),calc(.06 + var(--a)*.9))}
.funnel{display:grid;gap:6px}
.fs{position:relative;height:38px;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:13px}
.fs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:var(--brand-s);animation:wIn .7s ease forwards;animation-delay:var(--d)}
.fs span,.fs b,.fs em{position:relative}.fs b{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:500}.fs em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--brand);min-width:48px;text-align:right}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right;font-family:var(--mono);font-size:12.5px}
.tbl tr[data-href]{cursor:pointer}.tbl tr[data-href]:hover td{background:var(--panel2)}
.tbl tr.warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}.tbl tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.flags{display:grid;gap:8px}
.fi{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;background:var(--panel2)}
.fi i{width:10px;height:10px;border-radius:50%;background:var(--grey)}
.fi.r i{background:var(--bad);box-shadow:0 0 0 4px var(--bad-s);animation:pulse 1.8s infinite}.fi.a i{background:var(--warn);box-shadow:0 0 0 4px var(--warn-s)}.fi.m i{background:var(--ok);box-shadow:0 0 0 4px var(--ok-s)}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.fi b{font-size:13.5px;display:block}.fi .s{font-size:12px;color:var(--ink3);margin-top:1px}
.note{font-size:12.5px;color:var(--ink3);line-height:1.5}
.stat-row{display:flex;gap:18px;flex-wrap:wrap}
.stat{min-width:120px}.stat .l{font-size:12px;color:var(--ink3)}.stat .v{font-size:20px;font-weight:700;margin-top:2px}.stat .v small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:4px}
.list{display:grid;gap:8px}
.li2{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--panel2);font-size:13px}
.li2 .n{flex:1;min-width:0}.li2 .n small{display:block;color:var(--ink3);font-size:12px}.li2 .v{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.pb{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden;flex:1}.pb i{display:block;height:100%;border-radius:999px;background:var(--brand);width:var(--w)}
.pb.ok i{background:var(--ok)}.pb.warn i{background:var(--warn)}.pb.bad i{background:var(--bad)}

/* ---------- 3D map ---------- */
.mapwrap{position:relative;height:560px;border-radius:var(--r);overflow:hidden;background:radial-gradient(900px 500px at 50% 60%,var(--brand-s),transparent 70%),var(--panel);border:1px solid var(--line);box-shadow:var(--sh)}
.mapwrap canvas{display:block;outline:none}
.mapwrap .lbl3d{font:700 11px var(--font);color:var(--ink);background:color-mix(in srgb,var(--panel) 86%,transparent);padding:3px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;pointer-events:none;transform:translate(-50%,-140%);backdrop-filter:blur(6px);transition:opacity .3s}
.mapwrap .lbl3d.reg{font-weight:400;color:var(--ink2);font-size:10.5px;background:transparent;border:0;backdrop-filter:none;text-shadow:0 0 6px var(--panel),0 0 6px var(--panel);transform:translate(-50%,-50%)}
.mapwrap .lbl3d.reg b{display:block;font-size:12px;color:var(--ink)}
.mapwrap .lbl3d.city{cursor:pointer;pointer-events:auto}
.mapwrap .lbl3d.city small{color:var(--ink3);font-weight:400;margin-left:4px}
.mapwrap .lbl3d.store{font-weight:400;font-size:10.5px;transform:translate(-50%,-150%)}
.mapwrap .hud{position:absolute;left:16px;top:14px;right:16px;display:flex;align-items:center;gap:10px;pointer-events:none;z-index:3}
.mapwrap .hud>*{pointer-events:auto}
.crumbs{display:flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 6px;font-size:13px;box-shadow:var(--sh)}
.crumbs button{border:0;background:transparent;cursor:pointer;padding:5px 10px;border-radius:999px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.crumbs button:hover{background:var(--panel2);color:var(--ink)}
.crumbs button.cur{color:var(--ink);font-weight:700;background:var(--brand-s)}
.crumbs .sep{color:var(--hint)}
.mapwrap .mode{margin-left:auto;display:flex;gap:4px;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--sh)}
.mapwrap .mode button{border:0;background:transparent;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:12.5px;color:var(--ink2);font-weight:700}
.mapwrap .mode button.on{background:var(--brand);color:#fff}
.mapwrap .legend3d{position:absolute;left:16px;bottom:14px;display:flex;gap:14px;font-size:12px;color:var(--ink2);background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;padding:7px 14px;z-index:3}
.mapwrap .legend3d i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.mapwrap .tip{position:absolute;z-index:4;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:12.5px;box-shadow:var(--sh2);opacity:0;transform:translate(-50%,-115%);transition:opacity .15s;white-space:nowrap}
.mapwrap .tip.on{opacity:1}.mapwrap .tip b{display:block}.mapwrap .tip small{color:var(--ink3)}
.mapwrap .hint3d{position:absolute;right:16px;bottom:14px;z-index:3;font-size:11.5px;color:var(--ink3);background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.side{position:absolute;right:16px;top:64px;bottom:14px;width:340px;z-index:5;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);padding:16px;overflow:auto;transform:translateX(24px);opacity:0;pointer-events:none;transition:.35s cubic-bezier(.2,.8,.2,1)}
.side.on{transform:none;opacity:1;pointer-events:auto}
.side h3{font-size:16px;display:flex;align-items:center;gap:10px}
.side h3 .ring{margin-left:auto}
.side .sub{font-size:12.5px;color:var(--ink3);margin:2px 0 12px}
.side .close{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;display:grid;place-items:center}
.side .kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:10px 0}
.side .kv div{background:var(--panel2);border-radius:10px;padding:8px 10px}.side .kv small{display:block;font-size:11px;color:var(--ink3)}.side .kv b{font-size:15px}
.side .lst a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:12.5px;cursor:pointer}
.side .lst a:hover{background:var(--panel2)}
.side .lst a small{color:var(--ink3)}
.side .lst a .ring{width:30px;height:30px}.side .lst a .ring b{font-size:10px}

/* ---------- health matrix ---------- */
.hm{display:grid;gap:4px}
.hm .hrow{display:grid;grid-template-columns:52px 1.4fr 1fr 1fr 1fr 1.2fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;transition:.2s;font-size:13px}
.hm .hrow:hover{background:var(--panel2)}
.hm .hrow.open{background:var(--brand-s)}
.hm .hrow .nm b{display:block}.hm .hrow .nm small{color:var(--ink3);font-size:11.5px}
.hm .hrow .m{font-family:var(--mono);font-size:12px}.hm .hrow .m small{display:block;font-family:var(--font);color:var(--ink3);font-size:11px}
.hm .sig{display:flex;gap:6px;flex-wrap:wrap}.hm .sig span{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--ink2)}.hm .sig span.bad{background:var(--bad-s);color:var(--bad)}.hm .sig span.warn{background:var(--warn-s);color:#b27600}
.hm .det{grid-column:1/-1;padding:6px 10px 12px 62px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hm .det .tbl td{padding:6px 8px}

/* ---------- chat ---------- */
.chat{display:grid;grid-template-rows:1fr auto auto;height:calc(100vh - var(--top) - 44px);min-height:520px}
.chat .msgs{overflow:auto;padding:4px 4px 12px;display:grid;gap:12px;align-content:start}
.msg{display:flex;gap:10px;max-width:78%}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg .ava{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.msg.me .ava{background:var(--ink)}
.msg .bub{background:var(--panel2);border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.5}
.msg.me .bub{background:var(--ink);color:#fff}
.msg .cite{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.msg .cite span{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink3)}
.msg .acts{margin-top:10px}
.typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink3);margin-right:4px;animation:ty 1s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes ty{50%{transform:translateY(-4px);opacity:.5}}
.sugg{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0}
.sugg button{border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:7px 13px;font-size:12.5px;cursor:pointer}
.sugg button:hover{border-color:var(--brand);color:var(--brand)}
.chat .in{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:6px 6px 6px 18px}
.chat .in input{flex:1;border:0;outline:0;font:inherit;background:transparent;color:var(--ink);font-size:14px}
.chat .in button{width:42px;height:42px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}

/* ---------- misc ---------- */
#toasts{position:fixed;right:20px;bottom:52px;z-index:60;display:grid;gap:8px}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;font-size:13px;box-shadow:var(--sh2);transform:translateY(12px);opacity:0;transition:.3s;max-width:360px}
:root[data-theme="dark"] .toast{background:#fff;color:#111}
.toast.on{transform:none;opacity:1}.toast svg{color:var(--ok)}
.soon{display:grid;place-items:center;min-height:420px;text-align:center}
.soon .box{max-width:460px}.soon h2{font-size:22px;margin:12px 0 8px}.soon p{color:var(--ink3);font-size:14px}
.soon .pre{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.rv{animation:rvIn .5s ease both}
@keyframes rvIn{from{opacity:0;transform:translateY(8px)}}
.rv.d1{animation-delay:.08s}.rv.d2{animation-delay:.16s}.rv.d3{animation-delay:.24s}

@media(max-width:1200px){.c4{grid-template-columns:1fr 1fr}.c3{grid-template-columns:1fr 1fr}.hm .hrow{grid-template-columns:52px 1.4fr 1fr 1fr auto}.hm .hrow .m:nth-child(5),.hm .hrow .sig{display:none}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:40;transform:translateX(-100%);transition:.3s}
  .rail.open{transform:none;box-shadow:var(--sh2)}
  .top .burger{display:grid}.top .srch{display:none}
  #content{padding:14px 14px 70px}
  .row,.c2,.c3,.c4,.c21,.c12,.c32{grid-template-columns:1fr}
  .mapwrap{height:520px}.side{left:12px;right:12px;width:auto;top:auto;bottom:12px;max-height:55%}
  .mapwrap .legend3d,.mapwrap .hint3d{display:none}
  .hm .hrow{grid-template-columns:44px 1fr auto}.hm .hrow .m{display:none}.hm .det{grid-template-columns:1fr;padding-left:10px}
  .chat{height:auto;min-height:60vh}.msg{max-width:92%}
  .top .date{display:none}
}

/* ---------- розничный отдел ---------- */
.fbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:12px;box-shadow:var(--sh)}
.fsel{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.fsel select{font:inherit;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:7px 12px;max-width:300px}
.fchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fchips .fl{font-size:12px;color:var(--ink3);margin-right:4px}
.chip{border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--ink2);transition:.2s}
.chip:hover{border-color:var(--brand);color:var(--brand)}.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fnote{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;background:var(--panel2);border-radius:999px;padding:4px;width:fit-content;max-width:100%}
.tabs button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer}
.tabs button.on{background:var(--panel);color:var(--brand);box-shadow:var(--sh)}
.grow2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;box-shadow:var(--sh);position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ok)}.gcard.dn::before{background:var(--bad)}
.gcard .t{font-size:12.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);font-size:10.5px}
.gcard .v{font-size:38px;font-weight:700;letter-spacing:-.02em;margin:4px 0;color:var(--ok)}.gcard.dn .v{color:var(--bad)}
.gcard .s{font-size:13px;color:var(--ink2)}
.chart.gb .lbl.v{font-size:9.5px;fill:var(--ink2)}
.chart .bar.p1{fill:var(--p0)}.chart .bar.p2{fill:var(--p1)}.chart .bar.p4{fill:var(--p4)}.chart .bar.p5{fill:#c9ccd6}
.legend.row2{display:flex;gap:16px;margin-top:8px;justify-content:center}
.hg{display:grid;gap:7px}
.hgr{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;font-size:12.5px}
.hgr .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.hgr .bars{display:grid;gap:3px}
.hgr .b{display:flex;align-items:center;gap:8px}.hgr .b i{display:block;height:9px;border-radius:999px;width:var(--w);min-width:2px;background:var(--p0)}.hgr .b i.p5{background:#c9ccd6}.hgr .b i.p2{background:var(--p1)}
.hgr .b span{font-family:var(--mono);font-size:11px;color:var(--ink3);white-space:nowrap}
.rsd{display:flex;gap:18px}.rsd .y{flex:1;background:var(--panel2);border-radius:12px;padding:12px 14px}.rsd .y small{display:block;color:var(--ink3);font-size:12px}.rsd .y b{display:block;font-size:22px;margin:2px 0 4px}.rsd .y.cur{background:var(--brand-s)}
.tbl.st td,.tbl.st th{padding:7px 8px;font-size:12.5px}
.tbl.mkt td{font-size:12.5px;vertical-align:top;line-height:1.45}
.cred{display:grid;gap:10px;flex:1}.cc{background:var(--panel2);border-radius:12px;padding:10px 14px;border-left:5px solid var(--p0)}.cc.p5{border-left-color:#c9ccd6}.cc small{display:block;font-size:12px;color:var(--ink3)}.cc b{font-size:19px}.cc span{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--ink3)}
.donut.big{width:190px;height:190px}
.mt16{margin-top:16px}
.rtfoot{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12px;color:var(--ink3)}
@media(max-width:900px){.grow2{grid-template-columns:1fr}.fnote{display:none}.hgr{grid-template-columns:100px 1fr}}

/* ---------- лояльность: NPS / CSI ---------- */
.chart .bar.sp{fill:var(--ok)}.chart .bar.sn{fill:#c9ccd6}.chart .bar.sd{fill:var(--bad)}.chart .bar.bad{fill:var(--bad)}
.chart .norm{stroke:var(--bad);stroke-dasharray:4 4;stroke-width:1.2}.chart .lbl.nrm{font-size:9px;fill:var(--bad)}
.chart .lbl.in{font-size:9px;fill:#fff;font-weight:700}
.seg.sp{stroke:var(--ok)}.seg.sn{stroke:#c9ccd6}.seg.sd{stroke:var(--bad)}
.legend .li i.sp{background:var(--ok)}.legend .li i.sn{background:#c9ccd6}.legend .li i.sd{background:var(--bad)}
.legend .li i.c0{background:var(--p0)}.legend .li i.c1{background:var(--p1)}.legend .li i.c2{background:var(--p4)}.legend .li i.c3{background:#8b93a7}
.hgr .b i.c0{background:var(--p0)}.hgr .b i.c1{background:var(--p1)}.hgr .b i.c2{background:var(--p4)}.hgr .b i.c3{background:#8b93a7}.hgr .b i.bad{background:var(--bad)}
.hs{display:grid;gap:6px}
.hsr{display:grid;grid-template-columns:150px 1fr 58px;gap:10px;align-items:center;font-size:12.5px}
.hsr .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.hsr .trk{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--panel2)}
.hsr .trk i{display:block;width:var(--w);height:100%;font-style:normal;font-size:9.5px;line-height:16px;text-align:center;color:#fff;font-weight:700}
.hsr .trk i.sp{background:var(--ok)}.hsr .trk i.sn{background:#c9ccd6;color:var(--ink2)}.hsr .trk i.sd{background:var(--bad)}
.hsr .val{font-family:var(--mono);font-size:12px;text-align:right;font-weight:700}.hsr .val.bad{color:var(--bad)}
.pv{overflow:auto;max-height:520px;border:1px solid var(--line);border-radius:12px}.pv.tall{max-height:640px}
.tbl.pivot{font-size:12.5px}.tbl.pivot th{position:sticky;top:0;background:var(--panel);z-index:1;white-space:nowrap}
.tbl.pivot td{padding:6px 10px;white-space:nowrap}.tbl.pivot td:first-child{white-space:normal;min-width:130px;max-width:260px;line-height:1.3;position:sticky;left:0;background:var(--panel)}
.tbl.pivot td.bad{color:var(--bad);font-weight:700;background:rgba(var(--bad-rgb,220,53,69),.07)}.tbl.pivot td.na{color:var(--ink3)}.tbl.pivot td.tot{font-weight:700;border-left:1px solid var(--line)}
.gauge{display:flex;flex-direction:column;align-items:center}.gauge svg{width:260px;max-width:100%}
.gauge path{fill:none;stroke-width:18;stroke-linecap:butt}.gauge .g-bad{stroke:rgba(var(--bad-rgb,220,53,69),.18)}.gauge .g-ok{stroke:rgba(var(--ok-rgb,25,135,84),.18)}.gauge .g-val{stroke:var(--brand);stroke-width:18}
.gauge .g-ndl{stroke:var(--ink);stroke-width:3;stroke-linecap:round}.gauge .g-pin{fill:var(--ink)}.gauge .g-min{font-size:10px;fill:var(--ink3);font-family:var(--mono)}
.gauge .g-v{font-size:34px;font-weight:700;letter-spacing:-.02em;margin-top:-28px;text-align:center}.gauge .g-v small{display:block;font-size:12px;font-weight:400;color:var(--ink3)}.gauge .g-v.bad{color:var(--bad)}.gauge .g-v.ok{color:var(--ok)}
.split{height:14px}
.bigv{font-size:40px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}.bigv small{display:block;font-size:12.5px;font-weight:400;color:var(--ink3)}.bigv.bad{color:var(--bad)}.bigv.ok{color:var(--ok)}
.cmt{overflow:auto;max-height:420px;border:1px solid var(--line);border-radius:12px}.cmt .tbl td{font-size:12.5px;padding:7px 10px;vertical-align:top}.cmt .tbl td.st{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}.cmt .tbl td.tx{line-height:1.4}.cmt .tbl td.bad{color:var(--bad);font-weight:700}
.mrc{display:grid;gap:8px}.mr{background:var(--panel2);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center}.mr small{color:var(--ink3);font-size:12px}.mr b{font-size:18px}.mr.bad b{color:var(--bad)}
.row.c14{display:grid;grid-template-columns:150px 1fr;gap:16px}
.fbar.sub{background:var(--panel2);box-shadow:none;border-style:dashed}.fsel.sm select{padding:5px 8px;font-size:12px}
.tabs.sub{margin-bottom:10px}.tabs.sub button{padding:6px 12px;font-size:12px}
.col{display:flex;flex-direction:column}.col>.card{flex:1}
.kpi.bad .v{color:var(--bad)}
@media(max-width:900px){.row.c14{grid-template-columns:1fr}.mrc{grid-template-columns:repeat(2,1fr)}.hsr{grid-template-columns:100px 1fr 52px}}