:root{
 --bg:#060c11;--panel:#0a141c;--panel2:#0d1922;--panel3:#101e28;--line:#17303c;--line2:#234350;--text:#e4eef2;--muted:#78909b;--muted2:#526874;
 --cyan:#25c7ff;--cyan2:#6ee4ff;--green:#4ee19a;--amber:#ffbd54;--red:#ff5d68;--violet:#ae95ff;--shadow:0 20px 55px rgba(0,0,0,.34);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% -10%,rgba(28,86,110,.18),transparent 33%),linear-gradient(180deg,#050b10,#071018 45%,#050b0f);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(50,114,140,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(50,114,140,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(180deg,#000,transparent 96%)}
a{color:inherit;text-decoration:none}button,input{font:inherit}
.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;z-index:30;left:0;top:0;bottom:0;width:250px;border-right:1px solid #122934;background:linear-gradient(180deg,#071017,#081219 70%,#061017);padding:22px 16px;display:flex;flex-direction:column}.sidebar-brand{display:flex;gap:12px;align-items:center;padding:0 8px 20px;border-bottom:1px solid #122630}.brand-mark{width:40px;height:40px;border-radius:10px;border:1px solid #285266;background:linear-gradient(145deg,#0d2230,#08151c);display:grid;place-items:center;position:relative;box-shadow:0 0 20px rgba(37,199,255,.08)}.brand-mark span{font:800 11px ui-monospace,monospace;color:#b7efff;letter-spacing:.04em}.brand-mark i{position:absolute;right:4px;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px rgba(37,199,255,.8)}.sidebar-brand b{display:block;font-size:12px;letter-spacing:.16em}.sidebar-brand small{display:block;color:#58727e;font-size:8px;margin-top:3px;letter-spacing:.12em}.nav-section{padding:20px 0 0}.nav-section>span{display:block;color:#425c68;font:800 8px ui-monospace,monospace;letter-spacing:.12em;padding:0 10px 9px}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;color:#738b96;font-size:12px;margin-bottom:4px;transition:.18s;border:1px solid transparent}.nav-item:hover{background:#0b1922;color:#d9edf3;border-color:#17313d}.nav-item.active{background:linear-gradient(90deg,rgba(37,199,255,.12),transparent);border-color:#214858;color:#e4f7fd;box-shadow:inset 2px 0 var(--cyan)}.nav-ico{width:21px;color:#668592;text-align:center;font-size:14px}.nav-item em{margin-left:auto;background:#11222b;border:1px solid #203d48;border-radius:999px;padding:1px 6px;color:#72a7ba;font-style:normal;font:700 8px ui-monospace,monospace}.sidebar-bottom{margin-top:auto}.device-card{padding:12px;border:1px solid #18323f;background:#09141b;border-radius:9px}.device-card-top{display:flex;align-items:center;gap:8px;font:700 9px ui-monospace,monospace}.status-led,.pill-led,.mini-led{width:7px;height:7px;border-radius:50%;display:inline-block;background:#586b75}.status-led.good,.mini-led.good,.pill-led.good{background:var(--green);box-shadow:0 0 10px rgba(78,225,154,.5)}.status-led.warn,.mini-led.warn{background:var(--amber);box-shadow:0 0 10px rgba(255,189,84,.45)}.status-led.danger,.mini-led.danger{background:var(--red);box-shadow:0 0 10px rgba(255,93,104,.45)}.device-meta{display:flex;justify-content:space-between;margin-top:8px;color:#5b707a;font:700 8px ui-monospace,monospace}.logout-link{display:block;margin-top:10px;text-align:center;padding:9px;border:1px solid #152a34;border-radius:8px;color:#6d818a;font-size:11px}.workspace{margin-left:250px;width:calc(100% - 250px);padding:0 30px 34px}.topbar{height:78px;border-bottom:1px solid rgba(25,51,64,.75);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(6,12,17,.82);backdrop-filter:blur(12px);z-index:20}.mobile-menu{display:none;background:#0a1720;border:1px solid #1b3743;color:#9eb8c2;border-radius:7px;padding:7px 10px}.top-title{min-width:0}.eyebrow{color:#4d7483;font:800 8px ui-monospace,monospace;letter-spacing:.14em}.top-title h1{margin:4px 0 0;font-size:21px;font-weight:650;letter-spacing:-.025em}.top-actions{display:flex;align-items:center;gap:12px}.top-pill{display:flex;align-items:center;gap:7px;border:1px solid #1c3946;background:#09141b;padding:7px 10px;border-radius:999px;font:800 8px ui-monospace,monospace;color:#9bb2bb}.top-pill.danger{border-color:#633039;color:#ff9ca3}.top-time{text-align:right}.top-time b{display:block;font:700 11px ui-monospace,monospace}.top-time small{display:block;color:#516872;font-size:7px;margin-top:2px}.icon-link{display:grid;place-items:center;width:31px;height:31px;border:1px solid #1b3642;border-radius:8px;color:#6d8590}
.command-bar,.alert-rail,.panel{background:linear-gradient(180deg,rgba(13,25,34,.97),rgba(8,17,24,.97));border:1px solid #18323f;border-radius:13px;box-shadow:var(--shadow)}.command-bar{margin-top:18px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px}.command-state{display:flex;align-items:center;gap:12px}.state-orb{width:14px;height:14px;border-radius:50%;background:#51656f;box-shadow:0 0 0 5px rgba(81,101,111,.07)}.state-orb.good{background:var(--green);box-shadow:0 0 0 5px rgba(78,225,154,.08),0 0 14px rgba(78,225,154,.35)}.state-orb.warn{background:var(--amber);box-shadow:0 0 0 5px rgba(255,189,84,.08),0 0 14px rgba(255,189,84,.35)}.state-orb.danger{background:var(--red);box-shadow:0 0 0 5px rgba(255,93,104,.08),0 0 14px rgba(255,93,104,.35);animation:alarmPulse 1.8s ease-in-out infinite}.command-state b{display:block;font-size:12px}.command-state small{display:block;color:#607985;font-size:8px;margin-top:4px}.bar-metrics{display:flex;align-items:center;gap:28px}.bar-metrics>div{min-width:84px}.bar-metrics span{display:block;color:#4e6a75;font:800 7px ui-monospace,monospace}.bar-metrics b{display:block;margin-top:4px;font:800 10px ui-monospace,monospace;color:#ccdee4}.alert-rail{margin-top:11px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;transition:.2s}.alert-rail.warn{border-color:#5a4422;background:linear-gradient(90deg,rgba(98,70,25,.18),rgba(8,17,24,.97))}.alert-rail.critical{border-color:#6a2c34;background:linear-gradient(90deg,rgba(103,36,48,.21),rgba(8,17,24,.97));animation:alarmPulse 2s ease-in-out infinite}.alert-main{display:flex;align-items:center;gap:10px}.alert-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid #28503c;color:var(--green);font-weight:900}.warn .alert-icon{border-color:#735323;color:var(--amber)}.critical .alert-icon{border-color:#7d3038;color:var(--red)}.alert-main b{font-size:10px}.alert-main small{display:block;color:#617a85;font-size:8px;margin-top:3px}.alert-actions{display:flex;align-items:center;gap:12px}.alert-actions a{font-size:8px;color:#70a4b5}.alert-chip,.badge,.tiny-status{display:inline-flex;align-items:center;border:1px solid #23404d;border-radius:999px;padding:4px 7px;color:#6d8c99;font:800 7px ui-monospace,monospace}.badge.cyan{color:#77ddff;border-color:#225468;background:rgba(37,199,255,.07)}.badge.green{color:#73e8a9;border-color:#21533c;background:rgba(78,225,154,.07)}.badge.amber{color:#ffd183;border-color:#5a4523;background:rgba(255,189,84,.07)}.badge.red{color:#ff9da4;border-color:#652d34;background:rgba(255,93,104,.07)}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:14px;margin-top:14px}.panel{padding:17px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.panel-head h2{font-size:15px;margin:4px 0 0;font-weight:650;letter-spacing:-.02em}.temperature-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;align-items:center;margin-top:18px}.radial-wrap{text-align:center}.radial-gauge{--angle:180deg;width:210px;height:210px;margin:auto;border-radius:50%;background:conic-gradient(from -90deg,#23c9ff 0 var(--angle),#15323e var(--angle) 360deg);display:grid;place-items:center;box-shadow:inset 0 0 45px rgba(0,0,0,.38),0 0 32px rgba(37,199,255,.08);position:relative}.radial-gauge:before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#112530,#071117 70%);border:1px solid #21404e}.radial-core{position:relative;z-index:2}.radial-core small,.radial-core span{color:#607d88;font:800 8px ui-monospace,monospace}.radial-core strong{display:block;font-size:48px;line-height:1;font-weight:350;letter-spacing:-.05em;margin:5px 0 1px}.radial-core span{font-size:10px}.radial-core em{display:block;font-style:normal;color:#58a7bf;font:700 8px ui-monospace,monospace;margin-top:10px}.gauge-foot{display:flex;justify-content:center;gap:11px;margin-top:10px;color:#506b77;font:700 7px ui-monospace,monospace;flex-wrap:wrap}.gauge-foot b{color:#afc5cd;margin-left:3px}.metric-cluster{display:grid;gap:9px}.metric-big,.metric-pair>div{border:1px solid #17313c;border-radius:9px;background:#08131a;padding:12px}.metric-big span,.metric-pair span{display:block;color:#54717d;font:800 7px ui-monospace,monospace}.metric-big b{display:inline-block;font-size:24px;font-weight:350;margin-top:5px}.metric-big small{color:#58717c;font-size:8px;margin-left:4px}.metric-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric-pair b{display:block;margin-top:7px;font:800 11px ui-monospace,monospace;color:#d8e6eb}.humidity-layout{display:grid;grid-template-columns:145px 1fr;gap:13px;align-items:center;margin-top:17px}.semi-gauge{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 270deg,#4ee19a 0deg,#ffbd54 105deg,#ff5d68 140deg,#1a2e38 140deg 180deg,#1a2e38 180deg 360deg);transform:rotate(0);position:relative}.semi-gauge:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#08131a;border:1px solid #1b3541}.semi-gauge>div{position:relative;text-align:center}.semi-gauge small{display:block;color:#55727e;font:800 7px ui-monospace,monospace}.semi-gauge strong{display:block;font-size:34px;font-weight:350;letter-spacing:-.04em;margin-top:4px}.semi-gauge span{color:#6c8590;font-size:9px}.humidity-scale{min-width:0}.scale-head,.scale-values{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.scale-head{color:#496671;font:800 7px ui-monospace,monospace}.scale-values{margin-top:5px}.scale-values b{font:800 10px ui-monospace,monospace;color:#c7d9df}.range-line{height:9px;margin:11px 0 15px;background:linear-gradient(90deg,#27333a 0 20%,#4ee19a 20% 53%,#ffbd54 53% 72%,#ff5d68 72% 100%);border-radius:999px;position:relative;overflow:visible}.range-line i{position:absolute;top:0;height:100%;left:26%;width:33%;background:rgba(255,255,255,.12);border-radius:999px}.range-line em{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#e8fbff;border:2px solid #071118;box-shadow:0 0 14px rgba(37,199,255,.65);transform:translate(-50%,-50%)}.humidity-bottom{display:flex;gap:10px;color:#5b737e;font:700 7px ui-monospace,monospace}.humidity-bottom b{color:#c7d9df}.outdoor-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.outdoor-primary{border:1px solid #17303c;background:#08131a;border-radius:9px;padding:12px}.outdoor-primary span,.outdoor-secondary span{display:block;color:#526f7a;font:800 7px ui-monospace,monospace}.outdoor-primary b{font-size:31px;font-weight:350;display:inline-block;margin-top:8px}.outdoor-primary small{color:#5f7883;font-size:9px;margin-left:4px}.outdoor-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.outdoor-secondary div{padding:10px;border-top:1px solid #17303c}.outdoor-secondary b{display:block;margin-top:5px;font:800 9px ui-monospace,monospace;color:#cddde2}.condition-pill{display:flex;align-items:center;gap:6px;color:#6e8c98;font:800 7px ui-monospace,monospace}.condition-pill i{width:7px;height:7px;border-radius:50%;background:#596c75}.condition-pill.good i{background:var(--green);box-shadow:0 0 10px rgba(78,225,154,.4)}.condition-pill.warn i{background:var(--amber);box-shadow:0 0 10px rgba(255,189,84,.4)}.vent-decision{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:11px 10px;border:1px solid #17313c;border-radius:8px;margin-top:10px;background:#08131a}.decision-light{width:7px;height:7px;border-radius:50%;background:#5b6c74}.vent-decision.good .decision-light,.decision-light.good{background:var(--green);box-shadow:0 0 8px rgba(78,225,154,.45)}.vent-decision.warn .decision-light,.decision-light.warn{background:var(--amber)}.vent-decision span{display:block;color:#4e6c78;font:800 7px ui-monospace,monospace}.vent-decision b{display:block;font-size:8px;margin-top:4px;color:#b6cbd2}.vent-decision strong{font:900 8px ui-monospace,monospace;color:#6b8995}.vent-decision.good strong{color:var(--green)}.vent-decision.warn strong{color:var(--amber)}
.dashboard-grid{display:grid;grid-template-columns:1.65fr .9fr;gap:14px;margin-top:14px}.process-panel{overflow:hidden}.process-stage{position:relative;padding:26px 10px 16px;margin-top:6px}.air-lane{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:#496b78;font:800 7px ui-monospace,monospace}.pipe{height:2px;background:#18313d;position:relative;flex:1;overflow:hidden}.pipe:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#225064,transparent);animation:flowline 2.8s linear infinite}.air-lane .pipe i{position:absolute;left:0;top:0;bottom:0;width:35%;background:#24c7ff;opacity:.3}.lane-label{white-space:nowrap}.process-stage{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:center;gap:7px}.air-lane{grid-column:1/-1}.process-unit,.aux-unit{appearance:none;background:linear-gradient(180deg,#0c1a22,#081219);border:1px solid #1a3542;color:inherit;border-radius:11px;cursor:pointer;transition:.2s;text-align:center}.process-unit{padding:14px 9px}.process-unit:hover,.aux-unit:hover{transform:translateY(-2px);border-color:#326478;box-shadow:0 10px 25px rgba(0,0,0,.22)}.process-unit.active,.aux-unit.active{border-color:#2e7792;box-shadow:inset 0 0 20px rgba(37,199,255,.06),0 0 18px rgba(37,199,255,.06)}.unit-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin:0 auto 9px;background:radial-gradient(circle at 45% 35%,#122a36,#071117);border:1px solid #234452;color:#76929d;font-size:18px}.process-unit small,.aux-unit small{display:block;color:#55727e;font:800 7px ui-monospace,monospace}.process-unit b,.aux-unit b{display:block;margin-top:5px;font:900 10px ui-monospace,monospace}.process-unit em{display:block;color:#4f6975;font-size:7px;margin-top:4px;font-style:normal}.unit-connector{height:2px;background:#173542;position:relative}.unit-connector i{display:block;height:100%;width:0;background:#25c7ff;box-shadow:0 0 12px rgba(37,199,255,.6);transition:width .35s}.aux-units{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:3px}.aux-unit{display:flex;align-items:center;text-align:left;gap:10px;padding:10px}.aux-unit .unit-icon{margin:0;width:38px;height:38px;flex:0 0 38px}.fan-active .unit-icon{color:var(--cyan);animation:spin 1.2s linear infinite}.heat-active .unit-icon{color:var(--amber);box-shadow:0 0 17px rgba(255,189,84,.11)}.pump-active .unit-icon{color:var(--green);animation:pumpPulse 1s ease-in-out infinite}.process-footer{display:flex;gap:15px;align-items:center;border-top:1px solid #17303c;padding-top:11px;margin-top:3px;color:#526c77;font-size:7px;flex-wrap:wrap}.legend{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#647780}.legend.green{background:var(--green)}.legend.cyan{background:var(--cyan)}.legend.amber{background:var(--amber)}.legend.red{background:var(--red)}.foot-hint{margin-left:auto;color:#4a6571}.process-top-state{display:flex;align-items:center;gap:6px;color:#72909b;font:800 8px ui-monospace,monospace}.system-panel{min-height:100%}.health-main{display:grid;grid-template-columns:100px 1fr;gap:15px;align-items:center;margin-top:13px}.health-ring{--health:100%;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--health),#172d37 var(--health) 100%);display:grid;place-items:center;position:relative}.health-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#08131a;border:1px solid #1a3542}.health-ring b,.health-ring span{position:relative;z-index:1;display:block;text-align:center}.health-ring b{font-size:22px;font-weight:450}.health-ring span{font:800 6px ui-monospace,monospace;color:#55717d;margin-top:-2px}.health-main h3{margin:0;font-size:12px}.health-main p{margin:4px 0 11px;color:#59717c;font-size:8px;line-height:1.45}.health-bars{display:grid;gap:8px}.health-bars>div{display:grid;grid-template-columns:80px 1fr 35px;gap:7px;align-items:center;color:#56727d;font:800 7px ui-monospace,monospace}.health-bars i{height:4px;background:#152934;border-radius:99px;overflow:hidden}.health-bars em{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1b7187,var(--cyan));border-radius:99px}.health-bars b{text-align:right;color:#97aeb8;font-size:7px}.health-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border:1px solid #17303c;border-radius:8px;overflow:hidden;background:#08131a}.health-grid div{padding:10px;border-right:1px solid #17303c;border-bottom:1px solid #17303c}.health-grid div:nth-child(2n){border-right:0}.health-grid div:nth-last-child(-n+2){border-bottom:0}.health-grid span{display:block;color:#506d78;font:800 7px ui-monospace,monospace}.health-grid b{display:block;margin-top:5px;font:800 9px ui-monospace,monospace;color:#d6e3e8}.sensor-row{grid-template-columns:1.5fr 1fr}.sensor-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.sensor-card{background:#08131a;border:1px solid #17303c;border-radius:8px;padding:11px;position:relative;overflow:hidden}.sensor-card:after{content:"";position:absolute;inset:auto -20% -55% 35%;height:90px;background:radial-gradient(circle,rgba(37,199,255,.10),transparent 68%);pointer-events:none}.sensor-card.ok{border-color:#1c3d3f}.sensor-card.warn{border-color:#574520}.sensor-card.bad{border-color:#5a2c33}.sensor-top{display:flex;justify-content:space-between;align-items:center}.sensor-top span{color:#5d7883;font:900 7px ui-monospace,monospace}.sensor-top em{font:800 6px ui-monospace,monospace;color:#58717b;font-style:normal}.sensor-card.ok .sensor-top em{color:var(--green)}.sensor-card.warn .sensor-top em{color:var(--amber)}.sensor-card.bad .sensor-top em{color:var(--red)}.sensor-card strong{display:block;font-size:22px;font-weight:350;margin-top:10px}.sensor-bottom{margin-top:9px;display:grid;gap:5px;color:#54717c;font:700 7px ui-monospace,monospace}.sensor-bottom i{height:3px;border-radius:99px;background:#17303c;overflow:hidden}.sensor-bottom i b{display:block;height:100%;background:linear-gradient(90deg,#216981,#25c7ff);border-radius:99px}.field-footer{display:flex;gap:22px;margin-top:12px;padding-top:11px;border-top:1px solid #17303c;color:#55717d;font:800 7px ui-monospace,monospace}.field-footer b{display:block;color:#c8dae0;margin-top:3px}.automation-panel{min-height:100%}.decision-stack{display:grid;gap:7px;margin-top:14px}.decision-stack>div{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:10px;border:1px solid #17303c;background:#08131a;border-radius:8px}.decision-stack>div.good{border-color:#1d4134}.decision-stack>div.warn{border-color:#55421f}.decision-stack>div.danger{border-color:#5b2c33}.decision-stack b{display:block;font-size:8px}.decision-stack small{display:block;color:#58727d;font-size:7px;margin-top:3px;line-height:1.35}.decision-stack strong{font:900 7px ui-monospace,monospace;color:#718c97}.decision-stack .good strong{color:var(--green)}.decision-stack .warn strong{color:var(--amber)}.decision-stack .danger strong{color:var(--red)}
.analytics-panel{margin-top:14px}.range-switch{display:flex;gap:5px}.range-btn{border:1px solid #203b48;background:#09141b;color:#6f8791;padding:7px 9px;border-radius:6px;cursor:pointer;font:900 7px ui-monospace,monospace}.range-btn.active,.range-btn:hover{color:#d7f6ff;border-color:#2d6177;background:#0a1d27}.analytics-toolbar{display:flex;justify-content:space-between;align-items:center;margin:13px 0 8px}.chart-legend{display:flex;gap:16px;font:800 7px ui-monospace,monospace;color:#607982}.chart-legend i{display:inline-block;width:18px;height:2px;background:var(--cyan);vertical-align:middle;margin-right:5px}.chart-legend .l-hum{background:var(--violet)}.chart-legend .l-out{background:#6c838c}.analytics-kpis{display:flex;gap:18px;font:800 7px ui-monospace,monospace;color:#56717c}.analytics-kpis b{color:#c8d9df;margin-left:3px}.chart-shell{position:relative}.chart-shell canvas{display:block;width:100%;border:1px solid #17303c;border-radius:9px;background:linear-gradient(180deg,#071219,#09151d)}.chart-overlay{position:absolute;inset:0;display:grid;place-items:center;color:#4d6874;font:800 9px ui-monospace,monospace;pointer-events:none}
.lower-grid{grid-template-columns:1fr 1.6fr}.event-list{display:grid;gap:6px;margin-top:13px;max-height:330px;overflow:auto}.event-row{display:grid;grid-template-columns:62px 1fr;gap:9px;align-items:center;padding:9px;border:1px solid #17303c;background:#08131a;border-radius:8px}.event-sev{font:900 6px ui-monospace,monospace;padding:4px 5px;border-radius:4px;text-align:center;background:#12212a;color:#78949f}.event-sev.info{color:#81dfff}.event-sev.alarm{color:var(--amber);background:rgba(255,189,84,.06)}.event-sev.critical{color:#ff9ca3;background:rgba(255,93,104,.08)}.event-row b{display:block;font-size:8px}.event-row small{display:block;margin-top:3px;color:#58717c;font:700 7px ui-monospace,monospace}.event-empty{padding:22px;text-align:center;border:1px dashed #18313d;border-radius:8px;color:#4f6874;font-size:8px}.operator-warning{display:flex;gap:9px;padding:9px 10px;border:1px solid #3a3a24;background:#11140e;border-radius:8px;margin-top:12px}.operator-warning>span{color:var(--amber);font-size:13px}.operator-warning b{display:block;font-size:8px}.operator-warning small{display:block;color:#6e7763;font-size:7px;margin-top:3px}.command-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.command-grid form{margin:0}.cmd-card{width:100%;min-height:80px;padding:10px;border-radius:8px;border:1px solid #1a3441;background:linear-gradient(180deg,#0a171f,#081119);color:#dce9ed;text-align:left;cursor:pointer;transition:.18s}.cmd-card:hover{transform:translateY(-2px);border-color:#3a6d7f;box-shadow:0 10px 25px rgba(0,0,0,.25)}.cmd-card span{display:block;color:#496570;font:900 6px ui-monospace,monospace}.cmd-card b{display:block;font:900 9px ui-monospace,monospace;margin-top:6px;letter-spacing:.04em}.cmd-card small{display:block;color:#5f7882;margin-top:6px;font-size:7px;line-height:1.35}.cmd-card.good{border-color:#1e4937}.cmd-card.good b{color:#7fe7ac}.cmd-card.accent{border-color:#225970}.cmd-card.accent b{color:#79defe}.cmd-card.danger{border-color:#622c34;background:linear-gradient(180deg,#1a0e12,#10090c)}.cmd-card.danger b{color:#ff9fa7}.command-note{color:#54707b;font:800 7px ui-monospace,monospace}.goodtext{color:var(--green)!important}.warntext{color:var(--amber)!important}.dangertext{color:var(--red)!important}.tiny-status{color:#69d9fa}.process-top-state .dangertext{color:var(--red)}
.unit-modal{position:fixed;inset:0;z-index:60;display:none}.unit-modal[aria-hidden="false"]{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(2,7,10,.72);backdrop-filter:blur(5px)}.modal-card{position:absolute;right:24px;top:86px;width:min(470px,calc(100% - 32px));padding:22px;border:1px solid #294958;background:linear-gradient(180deg,#0d1b24,#081118);border-radius:14px;box-shadow:0 28px 80px rgba(0,0,0,.46)}.modal-close{position:absolute;right:10px;top:7px;background:none;border:0;color:#708893;font-size:26px;cursor:pointer}.modal-card h2{margin:5px 0 0;font-size:20px}.modal-state{margin-top:10px;color:#6fe3ff;font:900 10px ui-monospace,monospace}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:17px}.modal-grid div{padding:10px;border:1px solid #17303c;background:#08131a;border-radius:7px}.modal-grid span{display:block;color:#4f6b76;font:900 6px ui-monospace,monospace}.modal-grid b{display:block;margin-top:5px;font-size:9px}.modal-note{margin-top:12px;padding-top:12px;border-top:1px solid #17303c;color:#607983;font-size:8px;line-height:1.5}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pumpPulse{0%,100%{transform:scale(1);opacity:.68}50%{transform:scale(1.08);opacity:1}}@keyframes flowline{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}@keyframes alarmPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,93,104,0),var(--shadow)}50%{box-shadow:0 0 0 2px rgba(255,93,104,.08),var(--shadow)}}
@media(max-width:1280px){.hero-grid{grid-template-columns:1.15fr 1fr}.panel-outdoor{grid-column:1/-1}.dashboard-grid{grid-template-columns:1fr}.sensor-row{grid-template-columns:1fr}.lower-grid{grid-template-columns:1fr}}
@media(max-width:980px){.sidebar{transform:translateX(-100%);transition:.22s;box-shadow:20px 0 40px rgba(0,0,0,.4)}.sidebar.open{transform:translateX(0)}.workspace{margin-left:0;width:100%;padding:0 15px 25px}.mobile-menu{display:block}.topbar{gap:9px}.top-title h1{font-size:15px}.top-actions .top-time{display:none}.bar-metrics{gap:13px}.bar-metrics>div:nth-child(n+3){display:none}.temperature-layout{grid-template-columns:1fr}.radial-gauge{width:190px;height:190px}.command-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.topbar{height:68px}.top-title .eyebrow{display:none}.top-title h1{font-size:13px}.command-bar{align-items:flex-start}.command-state{flex:1}.bar-metrics{display:none}.alert-actions a{display:none}.hero-grid{grid-template-columns:1fr}.panel-outdoor{grid-column:auto}.humidity-layout{grid-template-columns:120px 1fr}.semi-gauge{width:120px;height:120px}.outdoor-secondary{grid-template-columns:1fr 1fr}.outdoor-secondary div:last-child{grid-column:1/-1}.process-stage{grid-template-columns:1fr}.air-lane,.unit-connector{display:none}.aux-units{grid-template-columns:1fr}.sensor-tiles{grid-template-columns:1fr 1fr}.field-footer{flex-wrap:wrap}.analytics-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.lower-grid{grid-template-columns:1fr}.command-grid{grid-template-columns:1fr}.modal-card{top:70px;right:12px;width:calc(100% - 24px)}}

/* === Professional HMI refinement v3 === */
:root{
 --bg:#05090d;--panel:#0a141b;--panel2:#0c1820;--panel3:#0f1d26;--line:#17303b;
 --text:#edf6f9;--muted:#7f9aa5;--cyan:#26c9ff;--cyan2:#8ae9ff;--green:#53dfa0;--amber:#ffc35f;--red:#ff6470;--violet:#b9a2ff;
 --shadow:0 12px 34px rgba(0,0,0,.28);
}
body{font-size:13px;letter-spacing:.005em}
body:before{opacity:.10;background-size:36px 36px}
.workspace{padding:0 22px 28px;max-width:1880px}
.sidebar{width:226px;padding:18px 12px}.workspace{margin-left:226px;width:calc(100% - 226px)}
.sidebar-brand{padding-bottom:16px}.brand-mark{width:38px;height:38px}
.nav-section{padding-top:16px}.nav-item{padding:9px 9px;font-size:11px}
.topbar{height:70px}.top-title h1{font-size:18px}.top-pill{padding:6px 9px}.top-time b{font-size:10px}
.command-bar{margin-top:12px;padding:10px 13px;border-radius:10px}.command-state{gap:10px}.command-state b{font-size:11px}.command-state small{font-size:8px}.bar-metrics{gap:18px}.bar-metrics span{font-size:7px}.bar-metrics b{font-size:9px}
.alert-rail{margin-top:10px;padding:9px 12px;border-radius:9px}.alert-main{gap:9px}.alert-icon{width:24px;height:24px;font-size:12px}.alert-main b{font-size:10px}.alert-main small{font-size:8px}.alert-chip{font-size:7px}
.hero-grid{grid-template-columns:1.15fr .9fr .9fr;gap:10px;margin-top:10px}.panel{padding:13px;border-radius:10px;box-shadow:var(--shadow)}.panel-head h2{font-size:13px}.eyebrow{font-size:7px}
.temperature-layout{grid-template-columns:155px 1fr;gap:12px;margin-top:10px}.radial-gauge{width:156px;height:156px}.radial-gauge:before{inset:7px}.radial-core small{font-size:7px}.radial-core strong{font-size:31px}.radial-core span{font-size:8px}.radial-core em{font-size:7px}.gauge-foot{font-size:6px;margin-top:7px}.metric-big b{font-size:23px}.metric-pair{gap:7px}.metric-pair div{padding:8px}.metric-pair span{font-size:6px}.metric-pair b{font-size:10px}
.humidity-layout{gap:10px;margin-top:10px}.semi-gauge{width:132px;height:118px}.semi-gauge strong{font-size:25px}.humidity-scale{padding-top:2px}.scale-head,.scale-values{font-size:6px}.range-line{height:7px}.humidity-bottom{font-size:6px;margin-top:7px}
.outdoor-grid{gap:7px;margin-top:9px}.outdoor-primary{padding:9px}.outdoor-primary b{font-size:21px}.outdoor-secondary{gap:6px;margin-top:7px}.outdoor-secondary div{padding:7px}.outdoor-secondary span{font-size:6px}.outdoor-secondary b{font-size:9px}.vent-decision{margin-top:7px;padding:8px}.vent-decision span{font-size:6px}.vent-decision b{font-size:8px}.vent-decision strong{font-size:7px}
.dashboard-grid{grid-template-columns:1.55fr .9fr;gap:10px;margin-top:10px}.process-stage{padding:18px 8px 10px;margin-top:2px;grid-template-columns:1fr 30px 1fr 30px 1fr}.air-lane{margin-bottom:10px}.pipe{height:3px}.process-unit{min-height:78px;padding:10px}.process-unit .unit-icon{width:36px;height:36px;font-size:15px}.process-unit small,.aux-unit small{font-size:6px}.process-unit b,.aux-unit b{font-size:9px}.process-unit em{font-size:6px}.aux-units{margin-top:10px;gap:7px}.aux-unit{padding:8px}.aux-unit .unit-icon{width:30px;height:30px}.process-footer{font-size:6px;padding-top:8px}
.health-main{gap:10px}.health-ring{width:94px;height:94px}.health-ring b{font-size:21px}.health-ring span{font-size:6px}.health-main h3{font-size:11px}.health-main p{font-size:7px}.health-grid{margin-top:10px}.health-grid div{padding:8px}.health-grid span{font-size:6px}.health-grid b{font-size:8px}
.sensor-row{grid-template-columns:1.35fr .85fr}.sensor-tiles{gap:7px;margin-top:10px}.sensor-card{padding:9px}.sensor-card strong{font-size:18px;margin-top:7px}.sensor-bottom{font-size:6px}
.analytics-panel{margin-top:10px}.analytics-toolbar{margin:9px 0 7px}.chart-legend,.analytics-kpis{font-size:6px}.chart-shell canvas{height:280px!important}.chart-shell{min-height:280px}.chart-tooltip{position:absolute;min-width:145px;padding:8px 10px;border:1px solid #294957;background:rgba(7,17,24,.96);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);font:700 7px ui-monospace,monospace;color:#9db6c0;pointer-events:none;z-index:4}.chart-tooltip[aria-hidden="true"]{display:none}.chart-tooltip b{display:block;color:#e7f5f8;margin-bottom:5px}.chart-tooltip span{display:flex;justify-content:space-between;gap:12px;margin-top:3px}.chart-tooltip strong{color:#dceef4}
.lower-grid{grid-template-columns:.95fr 1.55fr;gap:10px}.event-list{max-height:260px}.event-row{grid-template-columns:58px 1fr;padding:8px}.event-row b{font-size:7px}.event-row small{font-size:6px}.command-grid{gap:6px}.cmd-card{min-height:72px;padding:9px}.cmd-card b{font-size:8px}.cmd-card small{font-size:6px}
.unit-modal .modal-card{top:72px;right:20px;width:min(510px,calc(100% - 40px))}
.status-led.good,.pill-led.good,.mini-led.good{box-shadow:0 0 0 4px rgba(83,223,160,.06),0 0 12px rgba(83,223,160,.3)}
.process-unit.active,.aux-unit.fan-active,.aux-unit.heat-active,.aux-unit.pump-active{box-shadow:0 0 0 1px rgba(38,201,255,.25),0 10px 24px rgba(0,0,0,.22);transform:translateY(-1px)}
.process-unit.fan-active .fan-icon,.aux-unit.fan-active .fan-icon{animation:spin 1.15s linear infinite}.aux-unit.pump-active .pump-icon{animation:pumpPulse 1.1s ease-in-out infinite}.aux-unit.heat-active .heat-icon{animation:heatPulse 1.2s ease-in-out infinite}
.pipe.flowing:after{animation-duration:1.25s}
@keyframes heatPulse{0%,100%{opacity:.6;transform:scaleY(.9)}50%{opacity:1;transform:scaleY(1.1)}}
@media(min-width:1500px){.hero-grid{grid-template-columns:1.2fr .92fr .92fr}.radial-gauge{width:168px;height:168px}}
@media(max-width:1280px){.workspace{padding-left:16px;padding-right:16px}.sidebar{width:210px}.workspace{margin-left:210px;width:calc(100% - 210px)}.hero-grid{grid-template-columns:1fr 1fr}.panel-outdoor{grid-column:1/-1}.sensor-row{grid-template-columns:1fr}.lower-grid{grid-template-columns:1fr}}
@media(max-width:980px){.workspace{margin-left:0;width:100%}.sidebar{width:232px}.topbar{height:64px}.hero-grid,.dashboard-grid,.lower-grid{grid-template-columns:1fr}.panel-outdoor{grid-column:auto}.temperature-layout{grid-template-columns:150px 1fr}.radial-gauge{width:150px;height:150px}.bar-metrics{display:none}.command-bar{padding:10px}.sensor-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.workspace{padding:0 11px 18px}.temperature-layout{grid-template-columns:1fr}.radial-gauge{width:150px;height:150px}.humidity-layout{grid-template-columns:120px 1fr}.semi-gauge{width:116px;height:105px}.process-stage{grid-template-columns:1fr}.air-lane,.unit-connector{display:none}.aux-units{grid-template-columns:1fr}.sensor-tiles{grid-template-columns:1fr 1fr}.chart-shell canvas{height:240px!important}.chart-shell{min-height:240px}}

.settings-page{background:radial-gradient(circle at 70% 0%,rgba(31,95,121,.16),transparent 36%),linear-gradient(180deg,#050b10,#071018 45%,#050b0f)}.settings-top{padding:0 22px;margin:0}.settings-shell{max-width:1180px;margin:20px auto;padding:0 18px 30px}.settings-intro{margin:9px 0 18px;color:#78929d;font-size:9px;line-height:1.55}.settings-msg{margin:0 0 14px;padding:10px 12px;border-radius:8px;font-size:9px}.settings-groups{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-groups>section{border:1px solid #17303c;background:#08131a;border-radius:9px;padding:13px}.settings-groups>section:last-child{grid-column:1/-1}.settings-groups h3{margin:0 0 11px;color:#bcd2d9;font-size:10px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.settings-grid label{display:grid;gap:5px;color:#5f7b85;font:800 7px ui-monospace,monospace}.settings-grid input{width:100%;border:1px solid #21404c;background:#071118;color:#e5f1f4;border-radius:7px;padding:8px 9px;outline:none}.settings-grid input:focus{border-color:#347f97;box-shadow:0 0 0 2px rgba(38,201,255,.08)}.settings-grid small{font-size:6px;color:#405c67;font-weight:700}.settings-actions{display:flex;gap:9px;margin-top:14px}.settings-actions .cmd-card{max-width:260px;text-decoration:none;display:block}.settings-top .brand{display:flex;gap:10px;align-items:center}.settings-top .brand-mark{display:grid;place-items:center;color:#b7efff;font-weight:800}.settings-top .brand h1{margin:0;font-size:14px}.settings-top .subtitle{color:#58727e;font-size:8px}.top-status{display:flex;gap:8px}.nav-link{padding:7px 9px;border:1px solid #1b3642;border-radius:7px;color:#8eabb6;font-size:9px}.nav-link:hover{color:#e4f7fd;border-color:#316679}
@media(max-width:900px){.settings-groups{grid-template-columns:1fr}.settings-groups>section:last-child{grid-column:auto}}@media(max-width:620px){.settings-grid{grid-template-columns:1fr}.settings-actions{flex-direction:column}.settings-actions .cmd-card{max-width:none}.settings-shell{padding:0 10px 20px}}

/* =============================
   ERGONOMIC HMI / OPERATOR MODE
   ============================= */
:root{
 --font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}
body{font-family:var(--font-ui);font-size:15px;line-height:1.45;letter-spacing:.005em}
button,input,select,textarea{font-family:var(--font-ui)}
.sidebar{width:268px;padding:24px 18px}
.workspace{margin-left:268px;width:calc(100% - 268px);padding:0 34px 42px}
.sidebar-brand{padding:0 9px 22px}
.sidebar-brand b{font-size:15px;letter-spacing:.13em}
.sidebar-brand small{font-size:10px;letter-spacing:.1em}
.brand-mark{width:44px;height:44px}
.brand-mark span{font-size:12px}
.nav-section{padding-top:24px}
.nav-section>span{font-size:10px;padding:0 11px 10px}
.nav-item{gap:12px;padding:12px 12px;font-size:14px;margin-bottom:5px;min-height:44px}
.nav-ico{width:24px;font-size:17px}
.nav-item em{font-size:9px;padding:2px 7px}
.device-card{padding:14px}
.device-card-top{font-size:10px}
.device-meta{font-size:9px}
.logout-link{padding:11px;font-size:13px}
.topbar{height:82px}
.eyebrow{font-size:10px;letter-spacing:.12em}
.top-title h1{font-size:24px}
.top-pill{padding:9px 12px;font-size:10px}
.top-time b{font-size:13px}
.top-time small{font-size:9px}
.icon-link{width:36px;height:36px;font-size:17px}
.command-bar{margin-top:20px;padding:14px 18px;border-radius:14px}
.command-state{gap:14px}
.command-state b{font-size:15px}
.command-state small{font-size:11px}
.bar-metrics{gap:30px}
.bar-metrics>div{min-width:100px}
.bar-metrics span{font-size:9px}
.bar-metrics b{font-size:12px}
.alert-rail{padding:13px 16px}
.alert-main b{font-size:13px}
.alert-main small{font-size:10px}
.alert-actions a{font-size:10px}
.alert-chip,.badge,.tiny-status{font-size:9px;padding:5px 8px}
.hero-grid{gap:16px;margin-top:16px}
.panel{padding:20px;border-radius:15px}
.panel-head h2{font-size:18px;margin-top:5px}
.radial-gauge{width:236px;height:236px}
.radial-core strong{font-size:54px}
.radial-core small,.radial-core span{font-size:10px}
.radial-core em{font-size:10px}
.gauge-foot{font-size:9px}
.metric-big,.metric-pair>div{padding:14px}
.metric-big span,.metric-pair span{font-size:9px}
.metric-big b{font-size:28px}
.metric-big small{font-size:10px}
.metric-pair b{font-size:13px}
.humidity-layout{grid-template-columns:165px 1fr;gap:18px}
.semi-gauge{width:165px;height:165px}
.outdoor-primary span,.outdoor-secondary span{font-size:9px}
.outdoor-primary b{font-size:30px}
.outdoor-primary small{font-size:12px}
.outdoor-secondary b{font-size:13px}
.vent-decision{padding:13px}
.vent-decision span{font-size:9px}
.vent-decision b{font-size:12px}
.process-unit,.aux-unit{min-height:92px}
.process-unit small,.aux-unit small{font-size:9px}
.process-unit b,.aux-unit b{font-size:12px}
.process-unit em{font-size:10px}
.process-footer,.field-footer{font-size:10px}
.system-panel p{font-size:12px;line-height:1.55}
.health-main h3{font-size:17px}
.health-main p{font-size:12px}
.health-bars span{font-size:9px}
.health-bars b{font-size:10px}
.health-grid span{font-size:9px}
.health-grid b{font-size:12px}
.sensor-tiles{gap:10px}
.sensor-tile{padding:14px}
.sensor-tile .name{font-size:10px}
.sensor-tile .value{font-size:27px}
.sensor-tile .meta{font-size:10px}
.decision-stack>div{padding:13px 0}
.decision-stack b{font-size:13px}
.decision-stack small{font-size:10px;line-height:1.4}
.decision-stack strong{font-size:11px}
.analytics-toolbar{gap:16px}
.chart-legend,.analytics-kpis{font-size:10px}
.range-btn{min-height:38px;padding:0 12px;font-size:10px}
.event-list{max-height:320px}
.event-item{padding:10px 0}
.event-item b{font-size:11px}
.event-item small{font-size:10px}
.command-note{font-size:10px}
.command-grid{gap:10px}
.cmd-card{min-height:82px;padding:14px}
.cmd-card b{font-size:12px}
.cmd-card small{font-size:10px;line-height:1.4}
.modal-card{max-width:640px;padding:26px}
.modal-card h2{font-size:24px}
.modal-grid span{font-size:9px}
.modal-grid b{font-size:13px}

/* Settings: operator-first layout */
.settings-page{font-size:15px}
.settings-shell{max-width:1500px;margin:26px auto;padding:0 24px 40px}
.settings-top{padding:0 28px}
.settings-top .brand h1{font-size:20px}
.settings-top .subtitle{font-size:11px}
.settings-groups{grid-template-columns:1fr 1fr;gap:18px}
.settings-groups>section{padding:22px;border-radius:13px}
.settings-groups>section:last-child{grid-column:1/-1}
.settings-groups h3{font-size:16px;margin-bottom:16px;color:#d5e7ec}
.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px}
.settings-grid label{display:grid;gap:7px;color:#aec3ca;font:600 12px/1.25 var(--font-ui);letter-spacing:0}
.settings-grid label small{font-size:10px;color:#607985;font-weight:500;line-height:1.35}
.settings-grid input{min-height:48px;font-size:17px;font-weight:650;padding:10px 13px;border-radius:9px;border-color:#234653;background:#061117}
.settings-grid input:hover{border-color:#2a5a6b}
.settings-grid input:focus{border-color:#35c9ff;box-shadow:0 0 0 3px rgba(37,199,255,.11)}
.field-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#d7e5ea}
.field-label .unit{color:#6faabd;font:700 10px var(--font-mono);letter-spacing:.04em}
.settings-intro{font-size:12px;line-height:1.6;margin:10px 0 20px;max-width:950px}
.settings-msg{font-size:12px;padding:12px 14px}
.settings-actions{gap:12px;margin-top:20px}
.settings-actions .cmd-card{max-width:320px;min-height:72px;padding:15px 18px}
.settings-actions .cmd-card b{font-size:13px}
.settings-actions .cmd-card small{font-size:10px;line-height:1.45}
@media(max-width:1250px){
 .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero-grid{grid-template-columns:1fr 1fr}
 .panel-outdoor{grid-column:1/-1}
}
@media(max-width:980px){
 .sidebar{width:230px}.workspace{margin-left:230px;width:calc(100% - 230px);padding-left:20px;padding-right:20px}
 .hero-grid{grid-template-columns:1fr}.panel-outdoor{grid-column:auto}
 .settings-groups{grid-template-columns:1fr}
 .settings-groups>section:last-child{grid-column:auto}
 .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
 body{font-size:14px}
 .sidebar{display:none}.workspace{margin-left:0;width:100%;padding:0 12px 26px}.topbar{height:68px}.mobile-menu{display:block}
 .top-title h1{font-size:18px}.top-actions{gap:7px}.top-pill{display:none}
 .command-bar{align-items:flex-start;flex-direction:column}.bar-metrics{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
 .temperature-layout,.humidity-layout{grid-template-columns:1fr}.radial-gauge{width:210px;height:210px}
 .settings-top{padding:0 14px}.settings-shell{padding:0 12px 24px}.settings-grid{grid-template-columns:1fr}.settings-actions{flex-direction:column}.settings-actions .cmd-card{max-width:none;width:100%}
}


/* ================================================================
   V5 — OPERATOR READABILITY PASS
   Final desktop overrides intentionally come LAST so they win over
   earlier experimental/mobile rules in this stylesheet.
   ================================================================ */
@media (min-width: 1200px) {
  html { font-size: 16px; }
  body { font-size: 16px; }

  .sidebar { width: 250px; padding: 24px 16px; }
  .sidebar-brand b { font-size: 16px; letter-spacing: .12em; }
  .sidebar-brand small { font-size: 10px; }
  .nav-section { padding-top: 24px; }
  .nav-section>span { font-size: 10px; padding-bottom: 11px; }
  .nav-item { font-size: 15px; min-height: 46px; padding: 11px 12px; gap: 12px; }
  .nav-ico { font-size: 17px; width: 23px; }
  .nav-item em { font-size: 10px; padding: 2px 7px; }
  .device-card { padding: 14px; }
  .device-card-top { font-size: 11px; }
  .device-card small { font-size: 10px; }

  .workspace { margin-left: 250px; width: calc(100% - 250px); padding: 0 30px 40px; }
  .topbar { height: 88px; }
  .eyebrow { font-size: 10px; }
  .top-title h1 { font-size: 27px; margin-top: 6px; }
  .top-pill { font-size: 10px; padding: 9px 12px; }
  .top-time b { font-size: 15px; }
  .top-time small { font-size: 10px; }
  .icon-link { width: 38px; height: 38px; font-size: 16px; }

  .command-bar { margin-top: 20px; padding: 15px 18px; }
  .command-state b { font-size: 16px; }
  .command-state small { font-size: 11px; margin-top: 5px; }
  .bar-metrics { gap: 34px; }
  .bar-metrics>div { min-width: 100px; }
  .bar-metrics span { font-size: 9px; }
  .bar-metrics b { font-size: 13px; }

  .alert-rail { margin-top: 14px; padding: 14px 16px; }
  .alert-icon { width: 28px; height: 28px; font-size: 14px; }
  .alert-main b { font-size: 15px; }
  .alert-main small { font-size: 11px; margin-top: 3px; }
  .alert-actions a { font-size: 11px; }
  .alert-chip { font-size: 10px; padding: 4px 7px; }

  .hero-grid { gap: 18px; margin-top: 18px; }
  .panel { padding: 20px; border-radius: 14px; }
  .panel-head h2 { font-size: 19px; margin-top: 6px; }
  .panel-head .eyebrow { font-size: 10px; }

  .temperature-layout { gap: 18px; margin-top: 20px; }
  .radial-gauge { width: 235px; height: 235px; }
  .radial-core small, .radial-core span { font-size: 11px; }
  .radial-core strong { font-size: 56px; }
  .radial-core em { font-size: 11px; }
  .gauge-foot { font-size: 11px; }

  .metric-big>div { padding: 15px; }
  .metric-big span, .metric-pair span { font-size: 10px; }
  .metric-big b { font-size: 31px; }
  .metric-big small { font-size: 12px; }
  .metric-pair { gap: 10px; }
  .metric-pair>div { padding: 14px; }
  .metric-pair b { font-size: 15px; }
  .metric-pair small { font-size: 11px; }

  .humidity-layout { grid-template-columns: 170px 1fr; gap: 18px; margin-top: 18px; }
  .semi-gauge { width: 170px; height: 170px; }
  .humidity-bottom { font-size: 10px; }
  .scale-head, .scale-values { font-size: 9px; }
  .range-line { height: 9px; }

  .outdoor-primary b { font-size: 34px; }
  .outdoor-primary small { font-size: 13px; }
  .outdoor-secondary b { font-size: 15px; }
  .outdoor-secondary span { font-size: 10px; }
  .vent-decision { margin-top: 10px; padding: 14px; }
  .vent-decision span { font-size: 10px; }
  .vent-decision b { font-size: 13px; }
  .vent-decision strong { font-size: 10px; }

  .dashboard-grid { gap: 18px; }
  .process-unit, .aux-unit { min-height: 112px; padding: 18px 12px; }
  .unit-icon { width: 52px; height: 52px; font-size: 21px; margin-bottom: 11px; }
  .process-unit small, .aux-unit small { font-size: 11px; }
  .process-unit b, .aux-unit b { font-size: 15px; }
  .process-unit em { font-size: 10px; }
  .process-footer, .field-footer { font-size: 11px; }

  .system-panel { min-height: 100%; }
  .health-main { grid-template-columns: 112px 1fr; gap: 18px; margin-top: 16px; }
  .health-ring { width: 108px; height: 108px; }
  .health-ring b { font-size: 27px; }
  .health-ring span { font-size: 8px; }
  .health-main h3 { font-size: 16px; }
  .health-main p { font-size: 11px; line-height: 1.45; }
  .health-bars span { font-size: 10px; }
  .health-bars b { font-size: 12px; }
  .health-grid div { padding: 10px; }
  .health-grid span { font-size: 10px; }
  .health-grid b { font-size: 13px; }

  .sensor-tiles { gap: 10px; margin-top: 16px; }
  .sensor-card { padding: 14px; }
  .sensor-top span { font-size: 9px; }
  .sensor-top em { font-size: 8px; }
  .sensor-card .value { font-size: 30px; }
  .sensor-card .name { font-size: 11px; }
  .sensor-card .meta { font-size: 10px; }

  .decision-stack { gap: 9px; margin-top: 16px; }
  .decision-stack>div { padding: 13px; gap: 11px; }
  .decision-stack b { font-size: 12px; }
  .decision-stack small { font-size: 10px; }
  .decision-stack strong { font-size: 10px; }

  .event-row { grid-template-columns: 72px 1fr; gap: 11px; padding: 11px; }
  .event-sev { font-size: 8px; padding: 5px 6px; }
  .event-row b { font-size: 11px; }
  .event-row small { font-size: 9px; }

  .command-grid { gap: 12px; }
  .cmd-card { min-height: 92px; padding: 16px; }
  .cmd-card b { font-size: 14px; }
  .cmd-card small { font-size: 10px; line-height: 1.45; }

  .settings-shell { max-width: 1480px; padding: 0 20px 36px; }
  .settings-top .subtitle { font-size: 12px; }
  .settings-intro { font-size: 13px; line-height: 1.6; }
  .settings-msg { font-size: 13px; padding: 13px 15px; }
  .settings-groups { gap: 16px; }
  .settings-groups>section { padding: 18px; border-radius: 11px; }
  .settings-groups h3 { font-size: 16px; margin-bottom: 14px; }
  .settings-grid { gap: 13px; }
  .settings-grid label { gap: 7px; color: #9eb8c2; font: 700 12px ui-monospace, monospace; }
  .settings-grid input { min-height: 46px; font-size: 16px; padding: 10px 12px; border-radius: 8px; }
  .settings-grid small { font-size: 11px; line-height: 1.4; }
  .field-label .unit { font-size: 11px; }
  .settings-actions { gap: 12px; margin-top: 20px; }
  .settings-actions .cmd-card { min-height: 76px; max-width: 360px; padding: 16px 20px; }
  .settings-actions .cmd-card b { font-size: 15px; }
  .settings-actions .cmd-card small { font-size: 11px; }
}

@media (min-width: 1200px) and (max-width: 1450px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr .95fr; }
  .radial-gauge { width: 215px; height: 215px; }
  .top-title h1 { font-size: 24px; }
}

/* ================================================================
   V6 — LAYOUT INTEGRITY / NO-OVERLAP PASS
   Desktop operator HMI: use bounded grid columns so gauges,
   metrics, labels and process units never intrude into neighbors.
   ================================================================ */
@media (min-width: 1200px) {
  .workspace,
  .hero-grid,
  .dashboard-grid,
  .lower-grid,
  .panel,
  .panel > * { min-width: 0; }

  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) minmax(0, .92fr);
    align-items: stretch;
  }

  .hero-grid > .panel { min-width: 0; overflow: hidden; }

  .panel-temperature .temperature-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }

  .panel-temperature .radial-wrap {
    min-width: 0;
  }

  .panel-temperature .radial-gauge {
    width: 200px;
    height: 200px;
    max-width: 100%;
  }

  .metric-cluster,
  .metric-big,
  .metric-pair,
  .metric-pair > div,
  .humidity-scale,
  .outdoor-grid,
  .outdoor-primary,
  .outdoor-secondary,
  .vent-decision {
    min-width: 0;
  }

  .metric-big b,
  .metric-big small,
  .metric-pair b,
  .outdoor-primary b,
  .outdoor-primary small,
  .outdoor-secondary b,
  .vent-decision b,
  .vent-decision strong {
    overflow-wrap: anywhere;
  }

  .panel-humidity .humidity-layout {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
  }

  .panel-humidity .semi-gauge {
    width: 150px;
    height: 150px;
    max-width: 100%;
  }

  .panel-outdoor .outdoor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .panel-outdoor .outdoor-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .9fr);
    align-items: stretch;
  }

  .process-stage {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  }

  .process-unit,
  .aux-unit,
  .health-main,
  .health-bars > div {
    min-width: 0;
  }

  .process-unit b,
  .process-unit em,
  .aux-unit b,
  .aux-unit small,
  .health-main h3,
  .health-main p {
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1500px) {
  .panel-temperature .temperature-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .panel-temperature .radial-gauge { width: 210px; height: 210px; }
  .panel-humidity .humidity-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .panel-humidity .semi-gauge { width: 155px; height: 155px; }
}

@media (max-width: 1499px) and (min-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, .92fr); }
  .panel-temperature .temperature-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .panel-temperature .radial-gauge { width: 180px; height: 180px; }
  .panel-humidity .humidity-layout { grid-template-columns: 135px minmax(0, 1fr); }
  .panel-humidity .semi-gauge { width: 135px; height: 135px; }
}

@media (max-width: 1199px) and (min-width: 981px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel-outdoor { grid-column: 1 / -1; }
  .panel-temperature .temperature-layout,
  .panel-humidity .humidity-layout { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
}

/* Never let operator text push a card wider than its grid track. */
.panel, .process-unit, .aux-unit, .metric-pair > div, .metric-big,
.outdoor-primary, .outdoor-secondary > div, .vent-decision,
.health-grid > div, .sensor-card, .event-row, .cmd-card {
  overflow: hidden;
}

/* ================================================================
   V7 — MOBILE / PHONE HMI PASS
   Designed for ~320–480px phones: larger operator text, touch targets,
   single-column process flow, no horizontal overlap.
   ================================================================ */
@media (max-width: 720px) {
  html { font-size: 16px; }
  body { font-size: 16px; overflow-x: hidden; }
  .workspace { padding: 0 10px 28px; }
  .topbar { height: 64px; padding: 0 2px; }
  .mobile-menu { width: 44px; height: 44px; display:grid; place-items:center; font-size:20px; flex:0 0 44px; }
  .top-title { flex:1; min-width:0; }
  .eyebrow { font-size: 10px; letter-spacing:.12em; }
  .top-title h1 { font-size: 19px; line-height:1.15; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .top-actions { gap:6px; }
  .top-actions .top-pill { display:none; }
  .top-actions .icon-link { width:42px; height:42px; font-size:18px; }
  .top-time { display:none; }

  .command-bar { margin-top:12px; padding:14px; gap:14px; border-radius:14px; }
  .command-state { gap:11px; }
  .state-orb { width:12px; height:12px; flex:0 0 12px; }
  .command-state b { font-size:17px; line-height:1.2; }
  .command-state small { font-size:13px; line-height:1.35; }
  .bar-metrics { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .bar-metrics>div { min-width:0; padding:9px 10px; border:1px solid #15303b; border-radius:9px; background:#07131a; }
  .bar-metrics span { font-size:10px; }
  .bar-metrics b { font-size:14px; margin-top:3px; }
  .bar-metrics>div:nth-child(n+3){ display:block; }

  .alert-rail { margin-top:10px; padding:13px 14px; border-radius:12px; gap:10px; }
  .alert-main { gap:10px; }
  .alert-icon { width:34px; height:34px; font-size:17px; flex:0 0 34px; }
  .alert-main b { font-size:16px; line-height:1.2; }
  .alert-main small { font-size:12px; line-height:1.4; }
  .alert-actions { display:flex; align-items:center; gap:8px; }
  .alert-chip { font-size:10px; padding:6px 8px; }
  .alert-actions a { font-size:12px; }

  .hero-grid, .dashboard-grid, .lower-grid { grid-template-columns:1fr !important; gap:12px; margin-top:12px; }
  .panel { width:100%; min-width:0; padding:16px; border-radius:14px; box-sizing:border-box; overflow:hidden; }
  .panel-head { gap:10px; align-items:flex-start; }
  .panel-head h2 { font-size:19px; line-height:1.2; margin-top:4px; }
  .panel-head .eyebrow { font-size:10px; }
  .badge, .tiny-status, .condition-pill, .process-top-state b { font-size:10px; }

  .temperature-layout, .humidity-layout { grid-template-columns:1fr !important; gap:14px; margin-top:14px; }
  .radial-wrap { display:flex; flex-direction:column; align-items:center; }
  .radial-gauge { width:190px; height:190px; }
  .radial-core small { font-size:12px; }
  .radial-core strong { font-size:52px; }
  .radial-core span { font-size:14px; }
  .radial-core em { font-size:12px; }
  .gauge-foot { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; width:100%; font-size:12px; margin-top:8px; }
  .gauge-foot span { display:flex; justify-content:space-between; gap:8px; }
  .gauge-foot b { font-size:14px; }
  .metric-cluster { display:grid; gap:10px; }
  .metric-big>div, .metric-big { padding:14px; min-height:84px; box-sizing:border-box; }
  .metric-big span, .metric-pair span { font-size:11px; }
  .metric-big b { font-size:32px; }
  .metric-big small { font-size:13px; }
  .metric-pair { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric-pair>div { padding:12px; min-height:72px; box-sizing:border-box; }
  .metric-pair b { font-size:16px; line-height:1.2; }

  .humidity-layout { align-items:center; }
  .semi-gauge { width:180px; height:180px; margin:0 auto; }
  .semi-gauge strong { font-size:42px; }
  .semi-gauge small { font-size:12px; }
  .semi-gauge span { font-size:13px; }
  .humidity-scale { width:100%; }
  .scale-head, .scale-values { font-size:11px; }
  .scale-values b { font-size:13px; }
  .range-line { height:10px; margin-top:8px; }
  .humidity-bottom { font-size:11px; gap:10px; flex-wrap:wrap; }
  .humidity-bottom b { font-size:13px; }

  .panel-outdoor .outdoor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .outdoor-primary { padding:13px; min-height:88px; }
  .outdoor-primary span, .outdoor-secondary span { font-size:10px; }
  .outdoor-primary b { font-size:30px; margin-top:8px; }
  .outdoor-primary small { font-size:13px; }
  .panel-outdoor .outdoor-secondary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
  .outdoor-secondary>div { padding:10px; min-height:62px; }
  .outdoor-secondary b { font-size:14px; }
  .vent-decision { padding:13px; margin-top:10px; }
  .vent-decision b { font-size:15px; }
  .vent-decision span, .vent-decision strong { font-size:10px; }

  .process-stage { display:flex; flex-direction:column; gap:10px; }
  .air-lane { order:0; min-height:28px; }
  .air-lane .lane-label { font-size:9px; }
  .process-unit { width:100%; min-height:86px; padding:14px; display:grid; grid-template-columns:48px 1fr auto; grid-template-rows:auto auto; gap:3px 10px; text-align:left; align-items:center; box-sizing:border-box; }
  .process-unit .unit-icon { grid-row:1/3; width:44px; height:44px; margin:0; }
  .process-unit small { font-size:11px; }
  .process-unit b { font-size:16px; }
  .process-unit em { font-size:11px; }
  .unit-connector { display:none; }
  .aux-units { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .aux-unit { min-height:74px; padding:10px; gap:8px; }
  .aux-unit .unit-icon { width:38px; height:38px; font-size:17px; }
  .aux-unit small { font-size:9px; }
  .aux-unit b { font-size:14px; }
  .process-footer { flex-wrap:wrap; gap:8px 12px; font-size:11px; }
  .foot-hint { width:100%; text-align:left; }

  .health-main { grid-template-columns:96px 1fr; gap:14px; }
  .health-ring { width:92px; height:92px; }
  .health-ring b { font-size:24px; }
  .health-ring span { font-size:8px; }
  .health-main h3 { font-size:17px; }
  .health-main p { font-size:12px; line-height:1.45; }
  .health-bars span { font-size:10px; }
  .health-bars b { font-size:12px; }
  .health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .health-grid div { padding:11px; }
  .health-grid span { font-size:10px; }
  .health-grid b { font-size:14px; }

  .sensor-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .sensor-card { padding:12px; min-height:92px; }
  .sensor-top span { font-size:11px; }
  .sensor-top em { font-size:9px; }
  .sensor-card .value, .sensor-card .value strong { font-size:24px; }
  .sensor-card .name { font-size:11px; }
  .sensor-card .meta { font-size:10px; }
  .field-footer { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .field-footer span { font-size:9px; }
  .field-footer b { font-size:12px; }

  .decision-stack { gap:8px; }
  .decision-stack>div { padding:11px; gap:9px; }
  .decision-stack b { font-size:14px; }
  .decision-stack small { font-size:11px; line-height:1.35; }
  .decision-stack strong { font-size:10px; }

  .analytics-panel .panel-head { flex-direction:column; }
  .range-switch { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .range-btn { min-height:44px; font-size:12px; }
  .analytics-toolbar { flex-direction:column; align-items:flex-start; gap:10px; }
  .chart-legend { flex-wrap:wrap; font-size:11px; gap:10px; }
  .analytics-kpis { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .analytics-kpis>div { padding:8px; font-size:10px; }
  .analytics-kpis b { font-size:13px; }
  .chart-shell { min-height:220px; }
  #chart { height:220px !important; }

  .event-row { grid-template-columns:82px 1fr; gap:9px; padding:11px; }
  .event-sev { font-size:10px; }
  .event-row b { font-size:12px; line-height:1.25; }
  .event-row small { font-size:10px; line-height:1.3; }

  .command-grid { grid-template-columns:1fr !important; gap:9px; }
  .cmd-card { width:100%; min-height:82px; padding:14px; text-align:left; }
  .cmd-card b { font-size:15px; }
  .cmd-card small { font-size:11px; line-height:1.4; }
  .operator-warning { padding:11px; }
  .operator-warning b { font-size:13px; }
  .operator-warning small { font-size:11px; }

  .unit-modal .modal-card { width:calc(100% - 20px); max-width:none; padding:18px; }
  .modal-card h2 { font-size:21px; }
  .modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .modal-grid div { padding:11px; }
  .modal-grid span { font-size:9px; }
  .modal-grid b { font-size:14px; }
  .modal-note { font-size:12px; line-height:1.45; }

  .sidebar { width:min(320px,88vw); padding:18px 14px; }
  .sidebar-brand b { font-size:15px; }
  .sidebar-brand small { font-size:9px; }
  .nav-item { min-height:48px; font-size:15px; padding:11px 12px; }
  .nav-ico { font-size:17px; }
  .device-card-top { font-size:11px; }
  .device-meta { font-size:10px; }
  .logout-link { min-height:44px; display:grid; place-items:center; font-size:13px; }
}

@media (max-width: 420px) {
  .workspace { padding-left:8px; padding-right:8px; }
  .top-title h1 { font-size:18px; }
  .command-state b { font-size:16px; }
  .command-state small { font-size:12px; }
  .panel { padding:14px; }
  .panel-head h2 { font-size:18px; }
  .radial-gauge { width:174px; height:174px; }
  .radial-core strong { font-size:48px; }
  .metric-pair { grid-template-columns:1fr; }
  .panel-outdoor .outdoor-grid { grid-template-columns:1fr; }
  .panel-outdoor .outdoor-secondary { grid-template-columns:1fr 1fr; }
  .aux-units { grid-template-columns:1fr; }
  .field-footer { grid-template-columns:1fr; }
  .range-switch { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analytics-kpis { grid-template-columns:1fr; }
  .sensor-tiles { grid-template-columns:1fr; }
}

/* ================================================================
   V8 — EXTRA LARGE MOBILE OPERATOR TYPOGRAPHY
   Final mobile override: prioritize readability and touch operation.
   ================================================================ */
@media (max-width: 720px) {
  html { font-size: 18px; }
  body { font-size: 18px; line-height: 1.45; }

  .workspace { padding: 0 12px 34px; }
  .topbar { height: 74px; }
  .mobile-menu,
  .top-actions .icon-link { width: 48px; height: 48px; font-size: 22px; }
  .eyebrow { font-size: 11px; }
  .top-title h1 { font-size: 22px; line-height: 1.15; }

  .command-bar { padding: 17px; }
  .command-state b { font-size: 19px; }
  .command-state small { font-size: 15px; }
  .bar-metrics { gap: 12px; }
  .bar-metrics>div { padding: 11px 12px; }
  .bar-metrics span { font-size: 11px; }
  .bar-metrics b { font-size: 16px; }

  .alert-rail { padding: 16px; }
  .alert-main b { font-size: 18px; }
  .alert-main small { font-size: 14px; }
  .alert-chip { font-size: 11px; padding: 7px 10px; }
  .alert-actions a { font-size: 13px; }

  .panel { padding: 19px; border-radius: 16px; }
  .panel-head h2 { font-size: 22px; line-height: 1.2; }
  .panel-head .eyebrow { font-size: 11px; }
  .badge, .tiny-status, .condition-pill, .process-top-state b { font-size: 11px; }

  .temperature-layout, .humidity-layout { gap: 18px; margin-top: 18px; }
  .radial-gauge { width: 224px; height: 224px; }
  .radial-core small { font-size: 14px; }
  .radial-core strong { font-size: 60px; }
  .radial-core span { font-size: 16px; }
  .radial-core em { font-size: 13px; margin-top: 12px; }
  .gauge-foot { gap: 8px 14px; font-size: 13px; }
  .gauge-foot b { font-size: 16px; }

  .metric-cluster { gap: 12px; }
  .metric-big, .metric-pair>div { padding: 16px; min-height: 92px; }
  .metric-big span, .metric-pair span { font-size: 12px; }
  .metric-big b { font-size: 38px; }
  .metric-big small { font-size: 15px; }
  .metric-pair { gap: 12px; }
  .metric-pair b { font-size: 18px; }

  .semi-gauge { width: 210px; height: 210px; }
  .semi-gauge small { font-size: 13px; }
  .semi-gauge strong { font-size: 48px; }
  .semi-gauge span { font-size: 15px; }
  .scale-head, .scale-values { font-size: 12px; }
  .scale-values b { font-size: 15px; }
  .range-line { height: 12px; margin-top: 10px; }
  .humidity-bottom { font-size: 12px; }
  .humidity-bottom b { font-size: 15px; }

  .panel-outdoor .outdoor-grid { gap: 12px; }
  .outdoor-primary { padding: 16px; min-height: 104px; }
  .outdoor-primary span, .outdoor-secondary span { font-size: 12px; }
  .outdoor-primary b { font-size: 36px; }
  .outdoor-primary small { font-size: 15px; }
  .panel-outdoor .outdoor-secondary { gap: 10px; margin-top: 12px; }
  .outdoor-secondary>div { padding: 13px; min-height: 72px; }
  .outdoor-secondary b { font-size: 17px; }
  .vent-decision { padding: 16px; margin-top: 12px; }
  .vent-decision b { font-size: 18px; }
  .vent-decision span, .vent-decision strong { font-size: 12px; }

  .process-stage { gap: 12px; }
  .air-lane { min-height: 34px; }
  .air-lane .lane-label { font-size: 11px; }
  .process-unit { min-height: 98px; padding: 17px; grid-template-columns:54px 1fr auto; gap: 4px 12px; }
  .process-unit .unit-icon { width: 50px; height: 50px; }
  .process-unit small { font-size: 13px; }
  .process-unit b { font-size: 19px; }
  .process-unit em { font-size: 13px; }
  .aux-units { gap: 10px; }
  .aux-unit { min-height: 86px; padding: 13px; gap: 9px; }
  .aux-unit .unit-icon { width: 42px; height: 42px; font-size: 19px; }
  .aux-unit small { font-size: 11px; }
  .aux-unit b { font-size: 16px; }
  .process-footer { gap: 10px 14px; font-size: 12px; }

  .health-main { grid-template-columns: 112px 1fr; gap: 16px; }
  .health-ring { width: 106px; height: 106px; }
  .health-ring b { font-size: 28px; }
  .health-ring span { font-size: 10px; }
  .health-main h3 { font-size: 19px; }
  .health-main p { font-size: 13px; line-height: 1.5; }
  .health-bars span { font-size: 11px; }
  .health-bars b { font-size: 14px; }
  .health-grid { gap: 10px; }
  .health-grid div { padding: 13px; }
  .health-grid span { font-size: 11px; }
  .health-grid b { font-size: 16px; }

  .sensor-tiles { gap: 10px; }
  .sensor-card { padding: 14px; min-height: 104px; }
  .sensor-top span { font-size: 12px; }
  .sensor-top em { font-size: 10px; }
  .sensor-card .value, .sensor-card .value strong { font-size: 30px; }
  .sensor-card .name { font-size: 13px; }
  .sensor-card .meta { font-size: 11px; }
  .field-footer { gap: 9px; }
  .field-footer span { font-size: 10px; }
  .field-footer b { font-size: 14px; }

  .decision-stack { gap: 10px; }
  .decision-stack>div { padding: 14px; gap: 10px; }
  .decision-stack b { font-size: 17px; }
  .decision-stack small { font-size: 13px; line-height: 1.45; }
  .decision-stack strong { font-size: 11px; }

  .range-switch { gap: 8px; }
  .range-btn { min-height: 50px; font-size: 14px; }
  .chart-legend { font-size: 12px; }
  .analytics-kpis { gap: 8px; }
  .analytics-kpis>div { padding: 10px; font-size: 11px; }
  .analytics-kpis b { font-size: 15px; }
  .chart-shell { min-height: 260px; }
  #chart { height: 260px !important; }

  .event-row { grid-template-columns: 92px 1fr; gap: 10px; padding: 13px; }
  .event-sev { font-size: 11px; }
  .event-row b { font-size: 14px; }
  .event-row small { font-size: 12px; line-height: 1.4; }

  .cmd-card { min-height: 94px; padding: 17px; }
  .cmd-card b { font-size: 17px; }
  .cmd-card small { font-size: 13px; line-height: 1.45; }
  .operator-warning { padding: 14px; }
  .operator-warning b { font-size: 15px; }
  .operator-warning small { font-size: 13px; }

  .unit-modal .modal-card { width: calc(100% - 16px); padding: 20px; }
  .modal-card h2 { font-size: 24px; }
  .modal-grid { gap: 10px; }
  .modal-grid div { padding: 13px; }
  .modal-grid span { font-size: 10px; }
  .modal-grid b { font-size: 16px; }
  .modal-note { font-size: 13px; }

  .sidebar { width: min(340px, 90vw); padding: 20px 16px; }
  .sidebar-brand b { font-size: 17px; }
  .sidebar-brand small { font-size: 10px; }
  .nav-item { min-height: 54px; font-size: 17px; padding: 13px 14px; }
  .nav-ico { font-size: 19px; }
  .device-card-top { font-size: 12px; }
  .device-meta { font-size: 11px; }
  .logout-link { min-height: 50px; font-size: 14px; }

  /* settings page on phone */
  .settings-page { font-size: 18px; }
  .settings-shell { padding: 0 12px 28px; }
  .settings-top { padding: 0 12px; }
  .settings-top .brand h1 { font-size: 22px; }
  .settings-top .subtitle { font-size: 13px; }
  .settings-groups { gap: 14px; }
  .settings-groups>section { padding: 18px; }
  .settings-groups h3 { font-size: 19px; margin-bottom: 17px; }
  .settings-grid { gap: 14px; }
  .settings-grid label { font-size: 14px; gap: 8px; }
  .settings-grid label small { font-size: 12px; line-height: 1.45; }
  .settings-grid input { min-height: 56px; font-size: 19px; padding: 12px 14px; border-radius: 10px; }
  .settings-actions .cmd-card { min-height: 78px; padding: 17px 19px; }
  .settings-actions .cmd-card b { font-size: 16px; }
  .settings-actions .cmd-card small { font-size: 12px; }
}

@media (max-width: 420px) {
  .workspace { padding-left: 10px; padding-right: 10px; }
  .topbar { height: 72px; }
  .top-title h1 { font-size: 20px; }
  .command-state b { font-size: 18px; }
  .command-state small { font-size: 14px; }
  .panel { padding: 17px; }
  .panel-head h2 { font-size: 21px; }
  .radial-gauge { width: 208px; height: 208px; }
  .radial-core strong { font-size: 56px; }
  .metric-pair { grid-template-columns: 1fr; }
  .panel-outdoor .outdoor-grid { grid-template-columns: 1fr; }
  .panel-outdoor .outdoor-secondary { grid-template-columns: 1fr 1fr; }
  .aux-units { grid-template-columns: 1fr; }
  .field-footer { grid-template-columns: 1fr; }
  .range-switch { grid-template-columns: 1fr 1fr; }
  .analytics-kpis { grid-template-columns: 1fr; }
  .sensor-tiles { grid-template-columns: 1fr; }
  .bar-metrics { grid-template-columns: 1fr 1fr; }
}


/* V9 operator-command feedback */
.control-flash{margin:12px 0;padding:14px 18px;border:1px solid var(--border,#284050);border-radius:12px;font-size:16px;line-height:1.45;background:rgba(11,22,30,.92)}
.control-flash.success{border-color:#2b9a73;color:#bff5df}
.control-flash.warning{border-color:#c49331;color:#ffe1a4}
.control-flash.error{border-color:#c94d5b;color:#ffd2d7}
@media (max-width:680px){.control-flash{font-size:18px;padding:16px 18px}}


/* V12 unified operator feedback */
.operator-toast{
  position:fixed;
  top:84px;
  right:24px;
  z-index:3000;
  width:min(460px,calc(100vw - 32px));
  min-height:76px;
  display:none;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border:1px solid #274655;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(11,24,33,.98),rgba(7,16,23,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.40),0 0 0 1px rgba(49,200,255,.04) inset;
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.operator-toast.show{display:flex;opacity:1;transform:translateY(0);pointer-events:auto}
.operator-toast.success{border-color:#245e47;box-shadow:0 18px 48px rgba(0,0,0,.40),0 0 28px rgba(54,226,156,.10)}
.operator-toast.warning{border-color:#71572a;box-shadow:0 18px 48px rgba(0,0,0,.40),0 0 28px rgba(241,192,88,.08)}
.operator-toast.error{border-color:#70313a;box-shadow:0 18px 48px rgba(0,0,0,.40),0 0 28px rgba(255,101,119,.10)}
.operator-toast .toast-mark{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;border:1px solid #2c5666;background:#0b1b24;color:#86ddff;font-weight:900;font-size:20px}
.operator-toast.success .toast-mark{border-color:#2b9a73;color:#7fe7ac;background:#0b2119}
.operator-toast.warning .toast-mark{border-color:#c49331;color:#ffe1a4;background:#241d0b}
.operator-toast.error .toast-mark{border-color:#c94d5b;color:#ffd2d7;background:#241013}
.operator-toast .toast-body{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}
.operator-toast .toast-body b{font-size:14px;line-height:1.25;letter-spacing:.03em;color:#eaf7fb}
.operator-toast .toast-body small{font-size:12px;line-height:1.45;color:#94aeb8}
.operator-toast .toast-close{width:38px;height:38px;flex:0 0 38px;border:1px solid #274655;border-radius:10px;background:#0a151c;color:#aac0c8;font-size:23px;line-height:1;cursor:pointer;display:grid;place-items:center}
.operator-toast .toast-close:hover{border-color:#4d8094;color:#fff;background:#10232d}
.operator-toast .toast-close:active{transform:scale(.96)}
.command-form .cmd-card{cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.command-form .cmd-card:hover{transform:translateY(-1px)}
.command-form .cmd-card:disabled{opacity:.55;cursor:wait;transform:none}
.command-form .cmd-card.busy{box-shadow:0 0 0 1px rgba(49,200,255,.16) inset,0 0 24px rgba(49,200,255,.10)}
@media(max-width:680px){
  .operator-toast{top:70px;right:12px;width:calc(100vw - 24px);min-height:84px;padding:14px}
  .operator-toast .toast-body b{font-size:16px}
  .operator-toast .toast-body small{font-size:14px}
  .operator-toast .toast-close{width:42px;height:42px;flex-basis:42px;font-size:25px}
}