.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.kpi b{display:block;font-size:26px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kpi span{color:var(--mute);font-size:13px}.kpi.alert b{color:var(--bad)}.kpi .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.ov{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.ov .wide{grid-column:1/-1}
.head{margin-bottom:8px}.head h3{margin:0}.sp{flex:1}.small{font-size:12.5px}
.legend{display:flex;gap:12px;font-size:12.5px;color:var(--mute);flex-wrap:wrap}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}.dot.ok{background:var(--mala)}.dot.warn{background:var(--bad)}.dot.open{background:var(--gold)}
#plan{width:100%;height:auto;display:block;border-radius:10px;background:color-mix(in srgb,var(--bg) 70%,var(--card))}
#plan .room{fill:var(--card);stroke:var(--line);stroke-width:2}#plan .room.hot{fill:color-mix(in srgb,var(--bad) 10%,var(--card))}
#plan .rname{fill:var(--mute);font-size:15px;font-weight:600}#plan .rtemp{fill:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
#plan .s{cursor:pointer}#plan .s circle{stroke:var(--card);stroke-width:3}#plan .s text{font-size:11px;fill:var(--mute);pointer-events:none}
#plan .s.sel circle.c{stroke:var(--gold);stroke-width:4}#plan .s .ring{fill:none;stroke:var(--bad);stroke-width:2;animation:ring 1.6s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
#plan .door{stroke-width:7;stroke-linecap:round}
.detail .big{font-size:40px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}.detail .big small{font-size:18px;color:var(--mute);font-weight:500}
.detail canvas{width:100%;display:block;margin:10px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}.stats div{background:var(--bg);border-radius:10px;padding:8px 10px}.stats span{display:block;font-size:12px;color:var(--mute)}.stats b{font-variant-numeric:tabular-nums}
canvas{max-width:100%}
.filters{margin-bottom:12px}.filters input[type=search]{flex:1 1 180px}
#stable td{vertical-align:middle}#stable tr{cursor:pointer}#stable tr:hover td{background:color-mix(in srgb,var(--mala) 6%,transparent)}#stable .val{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.alist{display:grid;gap:10px}.alarm{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.alarm .sev{width:6px;align-self:stretch;border-radius:4px}.alarm .sev.critical{background:var(--bad)}.alarm .sev.warning{background:var(--warn)}.alarm .sev.info{background:var(--mala)}
.alarm h4{margin:0 0 3px;font-size:15px}.alarm .meta{font-size:13px;color:var(--mute)}.alarm .meta b{color:var(--ink);font-weight:600}
.rule{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.rule:last-child{border:0}.rule .txt{flex:1 1 260px}.rule .txt b{display:block}.rule .txt span{font-size:13px;color:var(--mute)}
.sw{position:relative;width:40px;height:23px;flex:none}.sw input{opacity:0;width:0;height:0}.sw i{position:absolute;inset:0;background:var(--chip);border-radius:99px;cursor:pointer;transition:.2s}.sw i:after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}.sw input:checked+i{background:var(--mala)}.sw input:checked+i:after{left:20px}
.llist{max-height:640px;overflow:auto}.ev{display:grid;grid-template-columns:120px 26px 1fr;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px;align-items:start}.ev time{color:var(--mute);font-variant-numeric:tabular-nums;font-size:13px}.ev .ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;background:var(--chip)}
.ev .ic.bad{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}.ev .ic.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}.ev .ic.gold{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}
.tip{position:fixed;pointer-events:none;background:var(--mala-d);color:#eee6cf;font-size:12px;padding:5px 8px;border-radius:7px;z-index:60;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:980px){.kpis{grid-template-columns:repeat(3,1fr)}.ov{grid-template-columns:1fr}}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,1fr);gap:8px}.kpi{padding:10px 12px}.kpi b{font-size:21px}.alarm{grid-template-columns:auto 1fr;}.alarm .act{grid-column:2}.ev{grid-template-columns:78px 24px 1fr}.stats{grid-template-columns:repeat(3,1fr)}#plan .rname{font-size:19px}#plan .rtemp{font-size:17px}#plan .s text{display:none}}
canvas{display:block;width:100%}
[hidden]{display:none!important}
@media (max-width:640px){#stable th:nth-child(2),#stable td:nth-child(2){display:none}#stable td.val{white-space:nowrap}.kpis .kpi:last-child{grid-column:span 2}}