:root{--paper:#e8eae7;--canvas:#f1f2ef;--line:#5b6567;--line2:#a7ada9;--ink:#243033;--muted:#657174;--green:#588b6c;--amber:#d69a2c;--red:#d74436;--unknown:#889195;--mono:"IBM Plex Mono",Consolas,"SFMono-Regular",monospace}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);font:11px/1.3 var(--mono)}button{font:inherit;cursor:pointer}.system-bar{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 12px;border-bottom:2px solid #566163;background:#d6dbd8}.system-name{display:flex;align-items:center;gap:12px;white-space:nowrap}.system-name strong{font-size:14px;letter-spacing:.07em}.system-code{background:#364348;color:#fff;padding:7px 9px;font-weight:700}.system-sub{font-size:9px;color:var(--muted)}.operator-data{display:flex;align-items:center;gap:16px;white-space:nowrap;font-size:9px}.operator-data span{border-left:1px solid #9ba5a4;padding-left:9px}.operator-data b{font-size:11px;margin-left:3px}.operator-actions{display:flex;gap:5px}.operator-actions button{border:1px solid #657173;border-bottom:3px solid #657173;background:linear-gradient(#f6f7f4,#d5dbd8);padding:6px 9px;white-space:nowrap;font-size:9px;font-weight:700;color:var(--ink)}.operator-actions button:hover{background:#fff}.breaker{display:flex;align-items:center;gap:5px}.breaker i{width:19px;height:10px;background:#889895;border:2px solid #596662;display:block;position:relative}.breaker i:after{content:"";position:absolute;left:0;top:0;width:6px;height:6px;background:#fff}.breaker.engaged i{background:#c69233}.breaker.engaged i:after{left:9px}.alarm-banner{min-height:31px;border-bottom:2px solid #aeb8b4;background:#e3e6e2;display:flex;gap:12px;align-items:center;padding:4px 12px;font-size:10px}.alarm-banner strong{letter-spacing:.07em}.alarm-banner>span:last-child{color:#677274}.alarm-banner.active{background:#f6d6d0;border-color:#c15545;color:#8e231e}.alarm-banner.active>span:last-child{color:#8e231e}.alarm-banner.stale{background:#f6e5be;border-color:#c99025}.alarm-symbol{width:16px;height:16px;display:grid;place-items:center;background:#abb5b0;color:#fff;border-radius:50%;font-weight:900}.active .alarm-symbol{background:var(--red)}.stale .alarm-symbol{background:var(--amber)}.flash{animation:blink 1s steps(1,end) infinite}@keyframes blink{50%{opacity:.18}}.diagram-viewport{width:100%;overflow:auto;background:var(--canvas);max-height:calc(100vh - 114px);min-height:450px}#plant{display:block;width:max(100%,1440px);height:auto;background:var(--canvas)}.status-bar{height:31px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;border-top:2px solid #adb7b3;background:#d5dbd7;font-size:9px;white-space:nowrap}.status-bar>span:nth-child(2){display:flex;align-items:center;gap:5px}.legend{width:8px;height:8px;display:inline-block;border:1px solid #555;margin-left:9px}.legend.normal{background:var(--green)}.legend.warn{background:var(--amber)}.legend.alarm{background:var(--red)}.legend.unknown{background:var(--unknown)}.backdrop{fill:#edf0eb}.grid-line{stroke:#d8ddd8;stroke-width:1}.zone{fill:#f4f5f1;stroke:#7f8b8c;stroke-width:2}.zone.worker{fill:#eff2ef}.zone-head{fill:#d9dfdb;stroke:#7f8b8c;stroke-width:2}.zone-title{font-size:15px;fill:#293639;font-weight:800;letter-spacing:1px}.zone-meta{font-size:10px;fill:#5d6c6e}.zone-rule{stroke:#abb6b1;stroke-width:1}.diagram-title{font-size:17px;fill:#303d40;font-weight:800;letter-spacing:1px}.diagram-sub{font-size:10px;fill:#657376}.conduit{fill:none;stroke:var(--line);stroke-width:6;stroke-linejoin:round;stroke-linecap:square}.conduit.monitor{stroke:#7f8989;stroke-width:4;stroke-dasharray:9 6}.conduit.fabric{stroke:#515d60;stroke-width:9}.conduit.off{stroke:#b8c0be}.junction{fill:#5b6567}.conduit-label{fill:#f1f2ef;stroke:#b2bab5;stroke-width:1}.wire-text{font-size:9px;fill:#435155;font-weight:700;letter-spacing:.35px}.equipment{cursor:pointer}.equipment .body{fill:#fff;stroke:#667477;stroke-width:2}.equipment:hover .body{stroke:#24393e;stroke-width:3}.equipment .head{fill:#e1e6e1;stroke:#667477;stroke-width:1}.equipment .equip-id{fill:#46585a;font-size:9px;font-weight:700}.equipment .equip-name{fill:#253236;font-size:12px;font-weight:800}.equipment .equip-value{fill:#354a4a;font-size:10px;font-weight:700}.equipment .equip-place{fill:#677678;font-size:8px}.equipment .icon{fill:none;stroke:#4d5d5e;stroke-width:2}.equipment .icon-fill{fill:#d0d8d3;stroke:#4d5d5e;stroke-width:2}.equipment .status-normal{fill:var(--green)}.equipment .status-warn{fill:var(--amber)}.equipment .status-alarm{fill:var(--red)}.equipment .status-unknown{fill:var(--unknown)}.equipment .status-outline{fill:#fff;stroke:#515e60;stroke-width:1}.equipment.fault .body{stroke:#b54539;stroke-width:3}.equipment.degraded .body{stroke:#b6862e;stroke-width:3}.status-text{fill:#5a696b;font-size:8px;font-weight:700}.status-text.fault{fill:#ac3229}.status-text.degraded{fill:#996820}.symbol-external{fill:#fafbf8;stroke:#627174;stroke-width:2}.external-name{font-size:11px;font-weight:800;fill:#2e3b3e}.external-sub{font-size:9px;fill:#617073}.bus-label{fill:#d6ddd8;stroke:#6b797a;stroke-width:1}.bus-text{font-size:9px;fill:#354548;font-weight:700}.node-metric{fill:#465557;font-size:10px;font-weight:700}.value-warning{fill:#ad7320}.value-alarm{fill:#b9322a}.source-note{fill:#667477;font-size:9px}.faceplate-mark{fill:#fff;stroke:#7f8d8d;stroke-width:1}dialog{border:2px solid #5d6c6d;background:#f5f6f2;color:#283538;box-shadow:8px 8px 0 #4e5c5d55;padding:20px;max-width:390px;width:calc(100% - 32px);font:11px/1.7 var(--mono)}dialog::backdrop{background:#34434480}dialog h3{font-size:17px;margin:0 0 10px}dialog p{margin:4px 0;border-bottom:1px solid #d3dad5;padding:3px 0}dialog p b{float:right}#close-faceplate{float:right;border:1px solid #6e7d7f;background:#e5eae5;font-size:19px;line-height:1;width:25px;height:25px}#lamp-overlay{display:none;position:fixed;inset:0;border:8px solid var(--amber);pointer-events:none;z-index:10}body.testing #lamp-overlay{display:block}body.testing .equipment .status-normal,body.testing .equipment .status-warn,body.testing .equipment .status-alarm,body.testing .equipment .status-unknown{fill:var(--red)!important}body.testing .equipment .body{stroke:var(--red)!important}@media(max-width:1050px){.system-bar{flex-wrap:wrap}.system-sub{display:none}.operator-data{margin-left:auto}.diagram-viewport{max-height:calc(100vh - 150px)}}@media(max-width:700px){.system-bar{gap:6px}.system-name{width:100%}.operator-data{margin-left:0;gap:5px}.operator-data span{padding-left:4px}.operator-actions{margin-left:auto}.operator-actions button{padding:5px}.status-bar span:nth-child(2){display:none}}
.login-body{min-height:100vh;display:flex;flex-direction:column}.login-field{flex:1;min-height:560px;display:grid;place-items:center;position:relative;background:repeating-linear-gradient(0deg,transparent 0 39px,#d7ddd8 40px),repeating-linear-gradient(90deg,transparent 0 39px,#d7ddd8 40px),var(--canvas);overflow:hidden}.login-conduit{position:absolute;z-index:0;background:#727f7e}.login-conduit.one{width:8px;height:100%;left:18%}.login-conduit.two{height:8px;width:100%;top:66%}.login-console{position:relative;z-index:1;width:min(510px,calc(100% - 32px));background:#f7f8f5;border:3px solid #657475;box-shadow:8px 8px 0 #68767655}.login-title{background:#dbe2dd;padding:13px 19px;border-bottom:2px solid #758485}.login-title span{display:block;font-size:10px;color:#607073}.login-title strong{display:block;font-size:20px;margin-top:5px;letter-spacing:.05em}.login-schematic{display:flex;align-items:center;gap:0;padding:21px 23px 5px;font-size:9px;font-weight:700}.login-schematic span{border:1px solid #7b8989;padding:6px 7px;background:#f3f6f2;white-space:nowrap}.login-schematic i{height:5px;flex:1;background:#707d7d}.login-form{padding:15px 23px 22px;display:grid;gap:14px}.login-form label{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;font-size:10px;font-weight:700}.login-form input{border:2px solid #889896;background:#fff;padding:9px 10px;color:#273538;outline:none;min-width:0}.login-form input:focus{border-color:#4e6b6d}.login-form button{justify-self:end;border:1px solid #46585a;border-bottom:3px solid #46585a;background:#e1e7e1;padding:9px 15px;font-weight:800;font-size:10px;color:#273538}.login-form button:hover{background:#fff}.login-form button:disabled{opacity:.5}.login-form p{min-height:14px;margin:0;color:#ad3a30;font-size:10px}.login-note{border-top:1px solid #b6c1ba;padding:10px 22px;color:#667477;font-size:9px}@media(max-width:700px){.login-form label{grid-template-columns:1fr}.login-schematic{padding:17px 13px 2px}.login-schematic span{font-size:8px}}
/* The mimic keeps normal equipment quiet; values carry the visual weight. */
.backdrop{fill:#f3f4f0}.zone{fill:#f3f4f0;stroke:#9aa6a2;stroke-width:1.5}.zone.worker{fill:#f3f4f0}.zone-head{fill:#e0e5df;stroke:#9aa6a2;stroke-width:1.5}.equipment .surface{fill:#f3f4f0;stroke:none}.equipment:hover .surface{fill:#e5ebe4;stroke:#8a9995;stroke-width:1}.equipment.fault .surface{fill:#f8e4df;stroke:#c95345;stroke-width:1}.equipment.degraded .surface{fill:#f6edda;stroke:#bb8a2d;stroke-width:1}.equipment .equip-rule{stroke:#a7b1ac;stroke-width:1}.equipment .equip-id{font-size:9px;fill:#64716d}.equipment .equip-name{font-size:12px;fill:#2a383a}.equipment .equip-value{font-size:13px;fill:#283b3e;font-weight:800}.equipment .equip-place{font-size:9px;fill:#687874}.equipment .icon-fill{fill:#d7dfd8}.equipment .status-normal{fill:#718c75}.equipment .status-warn{fill:#d69a2c}.equipment .status-alarm{fill:#d74436}.equipment .status-unknown{fill:#889195}.diagram-title{font-size:15px}.conduit{stroke:#667472}.conduit.monitor{stroke:#9ba6a1;stroke-width:3}.conduit.fabric{stroke:#667a78;stroke-width:7}
/* Alarm convention: abnormal equipment stays red until normal; unacknowledged faults flash. */
.equipment.fault .surface{fill:#8d2722;stroke:#6f1b18;stroke-width:1.5}
.equipment.fault .equip-id,.equipment.fault .equip-name,.equipment.fault .equip-value,.equipment.fault .equip-place,.equipment.fault .status-text{fill:#fff}
.equipment.fault .equip-rule{stroke:#e4a9a2}
.equipment.fault .icon,.equipment.fault .icon-fill{stroke:#fff}
.equipment.fault .icon-fill{fill:#b84a43}
.equipment.fault .status-outline{stroke:#fff;fill:#6f1b18}
.equipment.fault.unack .surface{animation:fault-surface 1s steps(1,end) infinite}
@keyframes fault-surface{50%{fill:#f12f26;stroke:#fc2118}}
.equipment.degraded .surface{fill:#edc77d;stroke:#ad7620;stroke-width:1.5}
.equipment.degraded .equip-id,.equipment.degraded .equip-name,.equipment.degraded .equip-value,.equipment.degraded .equip-place,.equipment.degraded .status-text{fill:#443011}
.alarm-banner.active{background:#842a24;border-color:#6e1d19;color:#fff}
.alarm-banner.active>span:last-child{color:#fff}
.alarm-banner.active .alarm-symbol{background:#fff;color:#842a24}
.alarm-banner.active.unack{animation:fault-banner 1s steps(1,end) infinite}
@keyframes fault-banner{50%{background:#ef3025;border-color:#ce1d17}}
@media(prefers-reduced-motion:reduce){.equipment.fault.unack .surface,.alarm-banner.active.unack,.flash{animation:none}}
.alarm-banner.warning{background:#efcd8d;border-color:#bb8124;color:#403014}
.alarm-banner.warning>span:last-child{color:#403014}
.alarm-banner.warning .alarm-symbol{background:#9f6619;color:#fff}
/* Traffic flows are grouped by purpose; lines only represent verified paths. */
.flow-band{fill:#f5f6f3;stroke:#c5cdc7;stroke-width:1}
.flow-title{font-size:12px;font-weight:800;letter-spacing:.04em;fill:#3b4b4b}
.flow-note{font-size:9px;fill:#61706e}
.conduit{stroke:#65736f;stroke-width:3.5;stroke-linecap:butt}
.conduit.fabric{stroke:#607e81;stroke-width:3.5}
.conduit.monitor{stroke:#91a09b;stroke-width:2;stroke-dasharray:6 4}
.conduit-label{fill:#f5f6f3;stroke:#aebbb4}