:root{--font-ui:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;--font-num:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;--r:6px}
[data-theme=dark]{--bg:#0E0F10;--panel:#15171A;--panel2:#1B1E22;--line:#262A2F;--line2:#30353B;--tx:#D9DBDD;--mut:#8A9096;--faint:#5C6268;--acc:#4F98A3;--acc2:#6FB7C1;--accbg:rgba(79,152,163,.13);--ok:#5FB878;--okbg:rgba(95,184,120,.14);--warn:#E0A33A;--warnbg:rgba(224,163,58,.14);--avg:#E07B3A;--bad:#E0525A;--badbg:rgba(224,82,90,.14);--info:#6C8EEF;--off:#3A3F45;--susp:#6E5A9E;--sel:#F2F3F4;--okw:#A9C34A;--empty:#202328;--shadow:0 8px 30px rgba(0,0,0,.4)}
[data-theme=light]{--bg:#F2F3F4;--panel:#FFFFFF;--panel2:#F7F8F9;--line:#E1E4E7;--line2:#D2D6DA;--tx:#1C1F22;--mut:#5E656C;--faint:#9AA1A8;--acc:#01696F;--acc2:#0C4E54;--accbg:rgba(1,105,111,.09);--ok:#2E8B4E;--okbg:rgba(46,139,78,.10);--warn:#B07A12;--warnbg:rgba(176,122,18,.10);--avg:#C25E1E;--bad:#C2333B;--badbg:rgba(194,51,59,.09);--info:#3B5FCF;--off:#C9CED3;--susp:#8D78C4;--sel:#1C1F22;--okw:#8FA531;--empty:#E9ECEE;--shadow:0 8px 30px rgba(0,0,0,.14)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--tx);font:13px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--acc)}
.mut{color:var(--mut)} .small{font-size:12px} .faint{color:var(--faint)}
svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side svg,.ib svg{width:20px;height:20px}
/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.lg-card{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px;text-align:center}
.lg-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:20px;margin-bottom:14px}
.lg-card h1{font-size:18px;margin:6px 0}
.qrbox{width:220px;height:220px;margin:18px auto;background:#fff;border-radius:8px;display:grid;place-items:center;padding:10px}
.qrbox svg,.qrbox img{width:100%;height:100%}
.spin{width:28px;height:28px;border:3px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel2);font-weight:500;text-decoration:none;color:var(--tx);white-space:nowrap}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.ghost{background:none}
.btn.wide{width:100%;height:38px}

/* app shell: top bar with tabs (Zabbix/Hive-like) */
.app{display:flex;flex-direction:column;height:100dvh}
.top{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);flex:none;min-width:0}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--tx);text-decoration:none;margin-right:10px;flex:none}
.tabs{display:flex;align-items:stretch;height:100%;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;padding:0 12px;color:var(--mut);font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--tx)}
.tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--acc);border-radius:2px 2px 0 0}
.badge{min-width:18px;height:17px;border-radius:9px;background:var(--bad);color:#fff;font:600 10px/17px var(--font-num);text-align:center;padding:0 5px}
.gsearch{position:relative;flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center}
.gsearch svg{position:absolute;left:9px;color:var(--faint);pointer-events:none}
.gsearch input{width:100%;height:30px;padding:0 10px 0 30px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel2)}
.gsearch input:focus{outline:none;border-color:var(--acc)}
.gres{position:absolute;top:36px;left:0;right:0;min-width:360px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:var(--shadow);z-index:80;max-height:70dvh;overflow:auto;padding:4px}
.gr{display:block;width:100%;text-align:left;padding:7px 9px;border-radius:6px;font-size:12.5px;line-height:1.5}
.gr:hover,.gr.hi{background:var(--panel2)}
.gr .pill{margin-right:4px}
.auto{font-size:11px;color:var(--faint);white-space:nowrap;flex:none}
.auto i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px;animation:pulse 2s infinite}
.auto.stale i{background:var(--warn);animation:none}
@keyframes pulse{50%{opacity:.35}}
.ib{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;color:var(--mut);flex:none}
.ib:hover{background:var(--panel2);color:var(--tx)}
.ib svg{width:18px;height:18px}
.av{width:28px;height:28px;border-radius:50%;background:var(--accbg);color:var(--acc);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.phead{display:flex;align-items:center;gap:8px;padding:10px 16px 0;flex:none;flex-wrap:wrap;min-width:0}
.phead h1{font-size:17px;margin:0 6px 0 0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.phead .sp{flex:1}
.aside{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sel{height:30px;padding:0 8px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel2);font-weight:500;max-width:240px}
.main{flex:1;overflow:auto;padding:10px 16px 90px;min-width:0}
.crumb-a{color:var(--acc);text-decoration:none;cursor:pointer}.crumb-a:hover{text-decoration:underline}
/* widgets */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.w{background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0;display:flex;flex-direction:column}
.wh{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 12px;border-bottom:1px solid var(--line);color:var(--mut);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap}
.wh .sp{flex:1}
.wh .mini,.wh .seg,.wh .btn{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
.wb{padding:12px;flex:1;min-height:0}
.wb.p0{padding:0}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.grid>.kpis{margin-bottom:0}
.k{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px 14px;min-width:0;text-align:left;color:var(--tx);display:block}
button.k{cursor:pointer;width:100%}
button.k:hover,.k.click:hover{border-color:var(--acc)}
.k.click{cursor:pointer}
.k .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.k .v{font:600 24px/1.2 var(--font-num);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k .v small{font-size:12px;color:var(--mut);font-weight:500;margin-left:3px}
.k .s{font-size:12px;color:var(--mut);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:4px;border-radius:2px;background:var(--line);margin-top:8px;overflow:hidden;display:flex}
.bar span{display:block;height:100%}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
/* attention list */
.att{display:flex;flex-direction:column}
.arow{display:grid;grid-template-columns:10px minmax(0,1fr) auto 14px;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;width:100%}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--panel2)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.at{display:flex;flex-direction:column;min-width:0}
.at b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at span{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an{font-size:16px;font-weight:600}
.chev{color:var(--faint);font-size:18px;line-height:1}
.okbox{padding:24px 14px;color:var(--ok);text-align:center}
.mbar{height:6px;min-width:90px;border-radius:3px;background:var(--line);display:flex;overflow:hidden}
.mbar span{display:block;height:100%}
.kind{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.k-air{background:var(--accbg);color:var(--acc)}
.k-hydro{background:rgba(108,142,239,.14);color:var(--info)}
.k-bath{background:rgba(141,120,196,.16);color:var(--susp)}
.pct{display:inline-block;min-width:46px;text-align:center;padding:1px 7px;border-radius:10px;font:600 12px var(--font-num)}
.p-ok{background:var(--okbg);color:var(--ok)}.p-warn{background:var(--warnbg);color:var(--warn)}.p-bad{background:var(--badbg);color:var(--bad)}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{position:sticky;top:0;background:var(--panel2);color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;z-index:2}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.tbl tbody tr{cursor:pointer}
.tbl tr:hover td{background:var(--panel2)}
.tbl tr.on td{background:var(--accbg)}
.tbl td.cb,.tbl th.cb{width:30px;padding-right:0}
.tbl .lnk{color:var(--tx)}.tbl tr:hover .lnk{color:var(--acc)}
.tbl tr.grp td{background:var(--panel2);color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;cursor:default}
.cn{font-weight:500}
.scroll{overflow:auto;max-height:calc(100dvh - 230px)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:10px;font-size:11.5px;font-weight:500;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;display:inline-block}
.pill .x{cursor:pointer;color:var(--mut);margin-left:2px}.pill .x:hover{color:var(--bad)}
.st-working i{background:var(--ok)}.st-offline i{background:var(--bad)}.st-suspended i{background:var(--susp)}.st-unknown i{background:var(--off)}
.lv3{color:var(--bad)}.lv2{color:var(--avg)}.lv1{color:var(--warn)}.lv0{color:var(--mut)}
/* filters */
.fbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.fbar input[type=search]{height:30px;width:280px;max-width:100%;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel)}
.fbar .sp{flex:1}
.lbl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);font-size:12px;color:var(--mut);display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--tx)}
.chip b{font-family:var(--font-num);font-weight:600;color:var(--tx)}
.chip.on{border-color:var(--acc);color:var(--tx);background:var(--accbg)}
.chip.q{border-style:dashed}.chip.q.on{border-style:solid}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;flex:none}
.seg button{padding:5px 11px;font-size:12px;color:var(--mut);white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--panel2);color:var(--tx);box-shadow:inset 0 -2px 0 var(--acc)}
.tgl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:500;white-space:nowrap}
.tgl input{accent-color:var(--acc);width:15px;height:15px}
.in{height:28px;padding:0 8px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel2);width:100%;min-width:80px}
.in.n{width:70px;min-width:0;font-family:var(--font-num)}
.hint{font-size:12px;color:var(--faint)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mut);align-items:center}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.empty-i{background:var(--empty);border:1px dashed var(--line2)}
/* charts */
.chartbox{position:relative;height:300px;width:100%}
.chartbox.sm{height:180px}
.chart{display:block;width:100%;height:100%}
.chart path.l{stroke:var(--acc);stroke-width:1.8;fill:none}
.chart path.a{stroke:none}.chart path.a:not([fill]){fill:var(--accbg)}
.chart text{fill:var(--faint);font:10.5px var(--font-num);stroke:none}
.chart line{stroke:var(--line);stroke-width:1}
.chart .cx{stroke:var(--mut);stroke-dasharray:3 3}
.chart .cd{fill:var(--acc);stroke:var(--panel);stroke-width:2}
.ctip{position:absolute;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:5px 9px;font-size:12px;white-space:nowrap;box-shadow:var(--shadow);z-index:5}
.ctip b{font-family:var(--font-num)}
/* container map */
.cmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px 10px;text-align:left;display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--tx)}
.cbox:hover{border-color:var(--acc)}
.cb-h{display:flex;align-items:center;gap:8px;min-width:0}
.cb-h .nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.cb-m{display:flex;gap:12px;align-items:baseline;font-size:12.5px;flex-wrap:wrap}
.cb-m .sp{flex:1}
.cb-f{font-size:11.5px}
.mini-l{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.ml-sec{display:flex;gap:3px;flex-wrap:wrap}
.ml-rack{display:grid;gap:1px;width:42px}
.ml-hydro .ml-rack,.ml-bath .ml-rack{width:120px}
.ml-rack i{display:block;aspect-ratio:1;border-radius:1px;background:var(--off)}
.ml-rack i.e{background:var(--empty)}
.ml-rack i.x{visibility:hidden}
/* container page */
.layout-wrap{overflow:auto}
.layout{display:flex;flex-direction:column;gap:16px;--pc:24px}
.sec2-h{display:flex;gap:10px;align-items:baseline;margin-bottom:8px;font-size:13px}
.racks{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.rack{border:1px solid var(--line);border-radius:6px;padding:6px 8px 8px;background:var(--panel2)}
.rk{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;cursor:pointer;user-select:none}
.rk:hover{color:var(--acc)}
.shelf{display:flex;align-items:center;gap:5px;margin-top:3px}
.sh{width:16px;text-align:right;font:500 10.5px var(--font-num);color:var(--faint);cursor:pointer;flex:none}
.sh:hover{color:var(--acc)}
.pcs{display:grid;gap:3px}
.pc{width:var(--pc);height:var(--pc);border-radius:3px;background:var(--off);display:grid;place-items:center;cursor:pointer;position:relative;font-style:normal}
.pc span{font:600 9px var(--font-num);color:rgba(0,0,0,.6);pointer-events:none}
.pc.e{background:var(--empty);border:1px dashed var(--line2);cursor:default}
.pc.e span{color:var(--faint);font-weight:500}
.pc.x{visibility:hidden}
.pc[data-id]:hover{outline:2px solid var(--tx);z-index:2}
.pc.on{outline:2px solid var(--sel);outline-offset:1px;z-index:1;box-shadow:0 0 0 4px var(--accbg)}
.l-hydro .racks,.l-bath .racks{gap:10px}
/* problems */
.cls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px;margin-bottom:12px}
.clsc{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--tx);border-top:3px solid var(--line2)}
.clsc span{font-size:12px;color:var(--mut);font-weight:600}
.clsc b{font-size:22px}
.clsc i{font-style:normal;font-size:11.5px;color:var(--faint)}
.clsc:hover{border-color:var(--acc)}
.clsc.on{background:var(--accbg);border-color:var(--acc)}
.c-power{border-top-color:var(--bad)}.c-hash{border-top-color:var(--avg)}.c-fan,.c-temp{border-top-color:var(--warn)}.c-net{border-top-color:var(--info)}
/* tooltip */
.tip2{position:fixed;z-index:95;pointer-events:none;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:var(--shadow);max-width:320px;line-height:1.5}
.tip2 b{font-weight:600}
/* selection bar */
.selbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--acc);border-radius:10px;padding:8px 10px 8px 14px;display:flex;gap:6px;align-items:center;box-shadow:var(--shadow);z-index:50;white-space:nowrap;max-width:calc(100vw - 20px);overflow-x:auto}
.selbar .sn{margin-right:6px}
.selbar b{font-family:var(--font-num);font-size:15px}
/* drawer */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:60;display:flex;justify-content:flex-end}
.dr-in{width:min(620px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line2);overflow:auto;padding:16px 18px 40px}
.dr-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.dr-h h2{margin:0;font-size:16px}
.dr-h .sp{flex:1}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 12px;font-size:12.5px}
.kv dt{color:var(--mut)} .kv dd{margin:0;overflow-wrap:anywhere}
.sec{margin-top:16px}
.sec h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.life{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.life .k .v{font-size:16px}
.tl{list-style:none;margin:0;padding:0;font-size:12.5px}
.tl li{display:grid;grid-template-columns:110px 16px minmax(0,1fr);gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.tl .d{color:var(--mut);font-family:var(--font-num);font-size:11.5px}
.tl .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--mut)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:grid;place-items:center;padding:20px}
.md-in{background:var(--panel);border:1px solid var(--line2);border-radius:10px;max-width:min(1200px,100%);max-height:90dvh;overflow:auto;padding:16px}
.toast{position:fixed;top:56px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:8px 14px;border-radius:8px;z-index:90}
.empty{padding:30px;text-align:center;color:var(--mut)}
.sec .tbl td{max-width:220px}
#tP tr[data-pacc]{cursor:pointer}
input[type=date].sel{height:30px}
@media (max-width:1100px){.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}.gsearch{max-width:260px}.auto{display:none}}
@media (max-width:760px){.top{flex-wrap:wrap;height:auto;padding:6px 10px;gap:6px}.logo span{display:none}.tabs{order:3;width:100%;height:38px}.gsearch{order:2;max-width:none}.gres{min-width:0}#themeBtn,.top a.ib{display:none}.phead{padding:8px 10px 0}.main{padding:8px 10px 90px}.kpis{grid-template-columns:repeat(2,1fr)}.cmap{grid-template-columns:1fr}.kv{grid-template-columns:110px 1fr}.selbar{left:8px;right:8px;transform:none}.layout{--pc:20px}.sel{max-width:46vw}}
.more{padding:12px;text-align:center}
.cb-f{display:flex;gap:8px;align-items:baseline}
.cb-f .go{color:var(--acc);white-space:nowrap}
.cb-m{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
/* Неактивные варианты (0 результатов) — бледные и не нажимаются */
.chip:disabled, .chip[disabled] { opacity: .38; cursor: default; pointer-events: none; }
.fbar .sel { max-width: 320px; text-overflow: ellipsis; }
/* Обзор: график и «Требует внимания» одной высоты, без растягивания */
.grid > .ovr { height: 380px; }
.ovr .chartbox { height: auto; flex: 1; min-height: 0; padding: 4px 8px 8px; }
.ovr .att { overflow: auto; flex: 1; min-height: 0; padding: 0; }
.cstats { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 14px 0; font-size: 12px; color: var(--mut); }
.cstats b { color: var(--text); font-size: 15px; font-weight: 600; margin: 0 2px; }
@media (max-width: 700px) { .grid > .ovr { height: auto; } .ovr .chartbox { height: 230px; flex: none; } .ovr .att { max-height: 380px; } }

/* ---- мультивыбор площадок и клиентов ---- */
.msel{position:relative}
.msb{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding-right:24px;cursor:pointer}
.msb::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:11px}
.msb.on{border-color:var(--acc);color:var(--tx)}
.msp{position:absolute;z-index:60;top:calc(100% + 4px);left:0;min-width:280px;max-width:360px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px}
.msq{width:100%;height:30px;margin-bottom:4px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--tx);padding:0 8px}
.msl{max-height:320px;overflow:auto}
.msi{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;cursor:pointer;font-size:13px}
.msi:hover{background:var(--hover,rgba(127,127,127,.1))}
.msi span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msi b{font-weight:500;color:var(--mut);font-variant-numeric:tabular-nums}
.msi[hidden]{display:none}
.msall{border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px}
.msf{display:flex;gap:6px;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px;margin-top:4px}
.btn.sm{height:26px;padding:0 10px;font-size:12px}
.back{height:28px;margin-right:4px}

/* ---- общая таблица ---- */
.dt .tbl th.srt{cursor:pointer;user-select:none;white-space:nowrap}
.dt .tbl th.srt .ar{font-style:normal;color:var(--faint,var(--mut));margin-left:4px;font-size:10px;opacity:.6}
.dt .tbl th.srt:hover .ar{opacity:1}
.dt .frow th{padding:3px 4px;background:var(--panel2);top:31px;text-transform:none;letter-spacing:0;cursor:default}
.dtf{width:100%;min-width:56px;height:24px;font:inherit;font-size:12px;font-weight:400;background:var(--bg);border:1px solid var(--line);border-radius:5px;color:var(--tx);padding:0 6px}
select.dtf{padding:0 2px}
.dtf:focus{outline:none;border-color:var(--acc)}
.dt-foot{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line)}
.dt-foot .sp{flex:1}

/* ---- легенда-фильтр ---- */
.lgb{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--mut);font:inherit;font-size:12px;cursor:pointer}
.lgb i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:2px}
.lgb b{font-weight:500;color:var(--tx)}
.lgb:hover{border-color:var(--line2)}
.lgb.on{border-color:var(--acc);color:var(--tx);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.lgb.off{opacity:.5}
.lgb:disabled{opacity:.35;cursor:default}
.pc.dim{opacity:.16;filter:saturate(.3)}
.cerr{margin-top:10px}
.lowset input{width:56px;height:26px;margin:0 4px;background:var(--bg);border:1px solid var(--line);border-radius:5px;color:var(--tx);text-align:center}

/* ---- выбор периода ---- */
.btn.per.on{border-color:var(--acc);color:var(--tx)}
.perpop{position:absolute;z-index:70;width:290px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:8px;font-size:13px}
.pp-l{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.pp-i{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:var(--tx);font:inherit;cursor:pointer;text-align:left}
.pp-i:hover,.pp-i.on{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.pp-d{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px;margin-bottom:6px}
.pp-d label{display:flex;gap:4px;align-items:center;color:var(--mut)}
.pp-d input{height:28px;background:var(--bg);border:1px solid var(--line);border-radius:5px;color:var(--tx);padding:0 4px;color-scheme:dark light}
@media (max-width:700px){.msb{max-width:170px}.msp{min-width:240px}.dt-foot{flex-wrap:wrap}}

/* калькулятор и уведомления */
.cform{display:flex;flex-direction:column;gap:8px}.crow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.crow .in{flex:1}.c2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.c2s{grid-column:1/-1}.c2 .lbl,.cform .lbl{display:block;font-size:12px;color:var(--mut);margin-bottom:3px}.ntypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}select.in[size]{padding:4px}select.in[size] option{padding:3px 4px}
@media(max-width:900px){.c2,.ntypes{grid-template-columns:1fr}}
.enf .wh{position:relative}.enfl{width:4px;height:16px;border-radius:2px;background:var(--fc);margin-right:8px}
.enk{border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:8px;background:var(--panel2)}
.enkh{display:flex;align-items:center;gap:8px;font-size:12.5px}.enkh .sp{flex:1}
.enbar{width:110px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}.enbar i{display:block;height:100%}
.encs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.enc{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--line2);border-radius:13px;background:var(--panel);font-size:12px;color:var(--tx);cursor:pointer}
.enc:hover{border-color:var(--fc,var(--acc))}.enc i{width:7px;height:7px;border-radius:50%}.enc em{font-style:normal;color:var(--faint);font-size:11px}
svg.enh{stroke:none}svg.enh .tk{font:11px var(--font-num);fill:var(--faint)}
.enkh b,.enkh .num{white-space:nowrap}
@media(max-width:900px){.enbar{width:60px}}@media(max-width:600px){.enkh .faint{display:none}}
.nstrip{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:12px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--tx);font-size:13px;text-align:left;cursor:pointer}
.nstrip:hover{border-color:var(--acc)}.nstrip svg{flex:none;color:var(--acc)}.nstrip .sp{flex:1}.nstrip .lnk{color:var(--acc);white-space:nowrap;font-size:12.5px}
.nstrip .mut{color:var(--mut)}.nstrip b.ok{color:#3FA96B}.nstrip b.warn{color:#D9A21E}.nstrip b.bad{color:#E05252}
.ib.on-dot{position:relative}.ib.on-dot::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#3FA96B;box-shadow:0 0 0 2px var(--bg)}
.ncol{display:flex;flex-direction:column;gap:12px;min-width:0}
.nlog{max-height:340px;overflow:auto}.nli{border-bottom:1px solid var(--line);padding:6px 0}.nli summary{display:flex;gap:8px;align-items:baseline;cursor:pointer;font-size:12.5px;list-style:none}
.nli summary::-webkit-details-marker{display:none}.nli summary .mut{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nli pre{white-space:pre-wrap;font:12px/1.5 var(--font-num);color:var(--mut);margin:6px 0 2px;background:var(--panel2);padding:8px;border-radius:6px}
.tbl.adm tr.click{cursor:pointer}.tbl.adm tr.on td{background:var(--accbg)}.admlast{display:flex;gap:4px;flex-wrap:wrap}.admlast .chip{font-size:11px}
@media(max-width:900px){.nstrip .mut{display:none}}
.admlast .chip{height:22px;padding:0 8px}
.chip.acc{height:22px;font-size:11.5px;padding:0 8px;white-space:nowrap}.chip.acc.pro{color:#3FA96B;border-color:#3FA96B66}.chip.acc.pro.trial{color:#5aa9e6;border-color:#5aa9e666}.chip.acc.pro.gift{color:#D9A21E;border-color:#D9A21E66}
.chat{display:flex;flex-direction:column;gap:8px;max-height:420px;flex-shrink:0;overflow:auto;padding:4px 2px}
.bub{flex-shrink:0;max-width:78%;padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.bub span{display:block;margin-top:4px;font-size:11px;color:var(--faint)}
.bub.bin{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}.bub.bout{align-self:flex-end;background:var(--accbg);border:1px solid var(--acc)}
.bub.fail{border-color:#E05252}
.bcast{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-bottom:1px solid var(--line)}.bcast textarea{flex:1;resize:vertical}
.accnow{display:flex;align-items:center;gap:10px;margin-bottom:8px}.accnow .chip.acc{height:26px;font-size:13px}
.accbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.r2{display:flex;gap:10px;justify-content:space-between;font-size:12.5px;padding:3px 0;border-bottom:1px solid var(--line)}
.admmsg{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.btn.danger{color:#E05252;border-color:#E0525266}
@media(max-width:900px){.accbtns{grid-template-columns:1fr}.bub{max-width:92%}}
.bimg{margin:-2px -4px 6px;cursor:zoom-in}.bimg img{display:block;max-width:100%;max-height:260px;border-radius:6px}
.bfile{display:inline-block;margin-bottom:4px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.chip.attch{height:26px;gap:6px}.chip.attch a{color:var(--faint);text-decoration:none}
.drop{outline:2px dashed var(--acc);outline-offset:-4px}
/* Подключения */
.cnrow{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.cnrow.srv{background:var(--bg2,rgba(127,127,127,.06))}
.cnh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cnh .sp{flex:1}
.cnk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 6px}
.cnk div{display:flex;flex-direction:column}
.cnk b{font-size:18px}
.cnk span{font-size:11.5px;color:var(--mut)}
.cnt{margin-top:6px}
.cnchips{display:inline-flex;flex-wrap:wrap;gap:4px}
.okbox.bad{border-color:var(--bad);color:var(--bad);margin-top:8px}
.hint.err{color:var(--bad)}
.btn.sm{height:24px;padding:0 8px;font-size:12px}
.pill.ok{color:var(--ok);background:var(--okbg);border-color:transparent}
.pill.bad{color:var(--bad);background:var(--badbg);border-color:transparent}
.cnrow .tbl tbody tr{cursor:default}
/* цитата в переписке */
.bub .bq{border-left:3px solid var(--acc);background:var(--panel2);border-radius:4px;padding:5px 8px;margin:0 0 6px;font-size:12px;color:var(--mut);max-height:140px;overflow:auto;white-space:normal}
.bub .bq .bqh{font-size:11px;font-weight:600;color:var(--acc);margin-bottom:2px}
.bub .bq a{color:var(--acc)}
.evtxt{white-space:pre-wrap;font:12.5px/1.5 var(--mono,ui-monospace,monospace);margin:0;color:var(--tx)}
code.cp{cursor:copy;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 4px}
code.cp:hover{border-color:var(--acc)}
/* советы по пулу */
.tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tips li{padding:6px 9px;border-radius:6px;border-left:3px solid var(--line);background:var(--panel2);font-size:12.5px;line-height:1.45}
.tips .tip-bad{border-left-color:var(--bad)}.tips .tip-warn{border-left-color:var(--warn)}.tips .tip-ok{border-left-color:var(--ok)}.tips .tip-info{border-left-color:var(--info,var(--acc))}
.padd .crow{display:flex;gap:8px}
.pbdg{display:inline-block;padding:1px 6px;border:1px solid var(--line2);border-radius:3px;font-size:11px;color:var(--mut);white-space:nowrap}
.addr{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;word-break:break-all;cursor:copy;border-bottom:1px dashed var(--line2)}
.addr:hover{color:var(--acc)}
.addr.sm{font-size:11px}
.addr.big{font-size:15px;display:inline-block;padding:6px 0}
.in.mono{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12.5px}
label.chk{display:inline-flex;align-items:center;gap:5px;margin-right:12px;cursor:pointer;font-weight:400;text-transform:none;letter-spacing:0}
tr.clk{cursor:pointer}
.tbl.wtx td{padding-left:6px;padding-right:6px}
.tbl.wtx td.wfrom{white-space:nowrap}
.tbl.wtx td.wfrom .addr{line-height:1.35}
.tbl td.nw{white-space:nowrap}