:root{color-scheme:light;--page:#eaf1fd;--surface:#fff;--surface2:#f4f8fc;--surface3:#e1ecf2;--sidebar:#18181f;--top:#2c2a36;--text:#1c2a36;--muted:#6d8293;--border:#d7e2ea;--shadow:0 8px 24px rgba(20,41,54,.1);--primary:#2196f3;--brand:#4dbbd6;--excellent:#1697e2;--good:#04b27d;--poor:#f8cc2c;--critical:#e22040;--offline:#bdbdbd;--danger:#d32f2f;--on-dark:#eff8fd;--side-muted:#a8bac5;--side:226px;--top-h:74px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--page:#24475d;--surface:#1e3a4b;--surface2:#1c3849;--surface3:#224358;--sidebar:#142936;--top:#142936;--text:#eef7fb;--muted:#a8bdca;--border:#36596f;--shadow:0 8px 24px rgba(16,38,51,.34)}}
:root[data-theme=dark]{color-scheme:dark;--page:#24475d;--surface:#1e3a4b;--surface2:#1c3849;--surface3:#224358;--sidebar:#142936;--top:#142936;--text:#eef7fb;--muted:#a8bdca;--border:#36596f;--shadow:0 8px 24px rgba(16,38,51,.34)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font:15px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--page);color:var(--text)}button,input,select{font:inherit;color:inherit}a{color:inherit}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:var(--side);display:flex;flex-direction:column;padding:18px 14px;background:var(--sidebar);color:var(--on-dark)}.brand{height:48px;display:flex;align-items:center;gap:12px;padding:4px 10px 16px;text-decoration:none;font-size:20px;font-weight:700}.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover}.sidebar nav{display:grid;gap:7px;margin-top:28px}.nav-item{min-height:48px;display:flex;align-items:center;gap:13px;padding:0 13px;border-radius:9px;color:var(--side-muted);text-decoration:none}.nav-item:hover{background:#ffffff12;color:#fff}.nav-item.active{background:#4dbbd62b;color:#fff;box-shadow:inset 3px 0 var(--brand)}.sidebar>small{margin-top:auto;padding:10px;color:#7f99a8}.column{width:calc(100% - var(--side));margin-left:var(--side);min-width:0}.topbar{position:sticky;top:0;z-index:20;min-height:var(--top-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 28px;background:var(--top);color:var(--on-dark);box-shadow:0 3px 14px #0002}.top-left,.top-right{display:flex;align-items:center;gap:14px}.top-left>div{display:grid}.top-left small{color:#9fb4c1}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;cursor:pointer}.icon-btn:hover{background:#ffffff18}.nav-toggle{display:none}.broker,.live-status{display:inline-flex;align-items:center;gap:8px;border-radius:999px}.broker{padding:7px 11px;background:#ffffff12;color:#c3d2da;font-size:12px}.broker i,.live-status i,.status i{width:9px;height:9px;border-radius:50%;background:var(--offline);box-shadow:0 0 0 3px #bdbdbd22}.broker[data-status=connected] i,.live-status[data-status=online] i{background:var(--good);box-shadow:0 0 0 3px #04b27d28}.broker[data-status=connecting] i{background:var(--poor)}.broker[data-status=error] i{background:var(--critical)}.user{display:flex;align-items:center;gap:9px;text-decoration:none}.user>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#4dbbd638;color:#72d3e9}.user b{max-width:160px;overflow:hidden;text-overflow:ellipsis}.top-right form{display:contents}.content{padding:28px;max-width:1780px;margin:auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}.page-head h1{margin:0;font-size:28px}.page-head p{margin:5px 0 0;color:var(--muted)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:20px}.panel h2{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:17px}.panel h2>.icon{color:var(--primary)}.panel h2 em{margin-left:auto;min-width:25px;height:25px;display:grid;place-items:center;border-radius:999px;background:var(--surface3);color:var(--muted);font-style:normal;font-size:12px}.top-grid{display:grid;grid-template-columns:1fr 1fr .62fr;gap:20px}.lower-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;margin-top:20px}.donut-row{min-height:220px;display:flex;align-items:center;justify-content:space-evenly;gap:24px}.donut{--online:0deg;width:190px;height:190px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--primary) 0 var(--online),var(--offline) var(--online) 360deg);position:relative;flex:none}.donut:after{content:"";position:absolute;inset:28px;border-radius:50%;background:var(--surface)}.donut span{z-index:1;display:grid;text-align:center;color:var(--muted);font-size:13px}.donut b{font-size:40px;line-height:1;color:var(--text)}.donut.iaq{background:conic-gradient(var(--excellent) 0 var(--e,0deg),var(--good) var(--e,0deg) var(--g,0deg),var(--poor) var(--g,0deg) var(--p,0deg),var(--critical) var(--p,0deg) var(--c,0deg),var(--offline) var(--c,0deg) 360deg)}.metrics{display:grid;gap:18px;min-width:150px}.metrics.two{grid-template-columns:1fr 1fr}.metrics p{margin:0;display:grid;grid-template-columns:14px 44px 1fr;align-items:center;gap:8px;color:var(--muted)}.metrics i{width:12px;height:12px;border-radius:50%;border:2px solid}.metrics i.excellent{color:var(--excellent)}.metrics i.good{color:var(--good)}.metrics i.poor{color:var(--poor)}.metrics i.critical{color:var(--critical)}.metrics i.offline{color:var(--offline)}.metrics b{font-size:25px;color:var(--text)}.alert-list{display:grid;gap:10px;max-height:222px;overflow:auto}.alert-item{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:10px;border-radius:8px;background:var(--surface2)}.alert-item>span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#e220401c;color:var(--critical)}.alert-item strong{display:block}.alert-item small{color:var(--muted)}.empty{min-height:88px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:16px}.panel-head{display:flex;justify-content:space-between;gap:12px}.panel-head>div{display:flex;gap:8px}.chart{min-height:330px}.chart svg{width:100%;height:330px}.gridline{stroke:var(--border)}.axis{fill:var(--muted);font-size:11px}.area{fill:#2196f329}.line{fill:none;stroke:var(--primary);stroke-width:2.5}.point{fill:var(--surface);stroke:var(--primary);stroke-width:2}.live-line{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px}.live-status{padding:7px 11px;background:var(--surface2);font-weight:600}.live-line small,.panel h2 small{color:var(--muted);font-weight:400}.sensor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sensor-grid>div{min-height:86px;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface2)}.sensor-grid .icon,.sensor-grid>div>strong{grid-row:1/3;color:var(--brand)}.sensor-grid>div>span{color:var(--muted);font-size:11px}.sensor-grid b{font-size:21px}.select-label,.filters>label:not(.search){display:grid;gap:5px;color:var(--muted);font-size:12px}select,input{min-height:40px;border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:7px 10px}.select-label select{min-width:220px;color:var(--text)}
.filters{display:grid;grid-template-columns:minmax(300px,1fr) repeat(3,minmax(145px,auto)) auto;align-items:end;gap:12px;margin-bottom:18px;padding:16px}.search{display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid var(--border);border-radius:7px;background:var(--surface2)}.search input{width:100%;border:0;background:transparent}.primary,.secondary,.danger-btn{min-height:42px;border:0;border-radius:7px;padding:9px 16px;cursor:pointer;font-weight:650;text-decoration:none;text-align:center}.primary{background:var(--primary);color:#fff}.secondary{background:var(--surface3)}.danger-btn{background:var(--danger);color:#fff}.count b{font-size:26px}.table-panel{padding:0;overflow:hidden}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:1320px}th{padding:11px 12px;background:var(--surface3);color:var(--muted);font-size:12px;text-align:left}td{padding:12px;border-top:1px solid var(--border)}tbody tr:hover{background:var(--surface2)}.name{display:grid}.name small{color:var(--muted)}.status,.iaq-badge,.badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:650}.status.online{color:var(--good)}.status.offline{color:var(--muted)}.iaq-badge.excellent{color:var(--excellent);background:#1697e21c}.iaq-badge.good{color:var(--good);background:#04b27d1c}.iaq-badge.poor{color:var(--poor);background:#f8cc2c24}.iaq-badge.critical{color:var(--critical);background:#e220401c}.iaq-badge.unknown{color:var(--muted);background:var(--surface2)}.truncate{display:inline-block;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.go{display:grid;place-items:center;width:34px;height:34px;color:var(--primary)}.cards{display:none}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings.danger{grid-column:1/-1;border-color:#d32f2f55}.settings dl{margin:0}.settings dl>div{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}dt{color:var(--muted)}dd{margin:0;font-weight:650}.badge{background:#2196f31c;color:var(--primary)}.muted{color:var(--muted)}.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.themes button{min-height:42px;border:1px solid var(--border);border-radius:7px;background:var(--surface2)}.themes button.active{border-color:var(--primary);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}.stack{display:grid;gap:14px;max-width:520px}.stack label{display:grid;gap:6px;font-weight:600}.notice{padding:11px 13px;border-radius:7px;margin-bottom:15px}.notice.error{color:#a72020;background:#e220401c;border:1px solid #e2204040}.notice.success{color:#247a2a;background:#04b27d1c;border:1px solid #04b27d40}.notice.info{color:#176d88;background:#4dbbd61f;border:1px solid #4dbbd647}code{padding:2px 5px;border-radius:4px;background:var(--surface3)}
.login-body{min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.brand-panel{position:relative;overflow:hidden;display:grid;place-items:center;align-content:center;gap:20px;padding:60px;background:#cbe6f6;color:#315d78}.brand-panel:after{content:"";position:absolute;width:720px;height:720px;border:90px solid #ffffff38;border-radius:50%;right:-260px;bottom:-440px}.brand-panel img{width:min(520px,72vw);max-height:360px;object-fit:contain}.logo-dark{display:none}.brand-panel p{z-index:1;max-width:540px;text-align:center;font-size:18px}.form-panel{display:grid;place-items:center;padding:42px;background:var(--surface)}.login-card{width:min(430px,100%)}.login-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}.login-head img,.error-card img{width:56px;height:56px;border-radius:50%}.login-head h1{margin:0;font-size:30px}.login-head p{margin:4px 0;color:var(--muted)}.login-card .primary{width:100%}.footnote{display:block;margin-top:18px;color:var(--muted)}.login-theme{position:fixed;z-index:5;right:18px;top:18px;background:var(--surface2);box-shadow:var(--shadow)}:root[data-theme=dark] .brand-panel{background:#05090c;color:#b8d0dc}:root[data-theme=dark] .logo-light{display:none}:root[data-theme=dark] .logo-dark{display:block}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .brand-panel{background:#05090c;color:#b8d0dc}:root:not([data-theme=light]) .logo-light{display:none}:root:not([data-theme=light]) .logo-dark{display:block}}.error-body{min-height:100vh;display:grid;place-items:center}.error-card{width:min(520px,90%);text-align:center;padding:36px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}.error-card>b{display:block;font-size:42px;color:var(--primary)}.backdrop{display:none}
@media(max-width:1250px){.top-grid{grid-template-columns:1fr 1fr}.alerts{grid-column:1/-1}.alert-list{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr 1fr 1fr}.search{grid-column:1/-1}}
@media(max-width:980px){.sidebar{transform:translateX(-105%);transition:.2s}.nav-open .sidebar{transform:none}.nav-open .backdrop{display:block;position:fixed;inset:0;z-index:25;background:#0007}.column{width:100%;margin:0}.nav-toggle{display:grid}.lower-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.settings.danger{grid-column:auto}.login-shell{grid-template-columns:1fr}.brand-panel{min-height:280px;padding:30px}.brand-panel p{display:none}.brand-panel img{max-height:220px}}
@media(max-width:720px){.topbar{padding:9px 14px}.top-left small,.broker,.user b{display:none}.content{padding:18px 14px}.page-head{align-items:stretch;flex-direction:column}.select-label select{width:100%}.top-grid{grid-template-columns:1fr}.alerts{grid-column:auto}.alert-list{grid-template-columns:1fr}.donut-row{flex-direction:column}.metrics{width:100%;grid-template-columns:repeat(3,1fr)}.panel-head{flex-direction:column}.panel-head>div select{width:49%}.sensor-grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.table-panel{background:transparent;border:0;box-shadow:none}.table-scroll{display:none}.cards{display:grid;gap:12px}.card{padding:16px;border:1px solid var(--border);border-radius:9px;background:var(--surface);box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;gap:10px}.card-head small{color:var(--muted)}.card-badges{display:flex;gap:6px;flex-wrap:wrap}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.card-grid div{padding:8px;border-radius:7px;background:var(--surface2)}.card-grid span{display:block;color:var(--muted);font-size:10px}.settings dl>div{grid-template-columns:1fr;gap:3px}.form-panel{padding:30px 22px}}