:root{color-scheme:dark;--bg: #0f151b;--panel: #182129;--panel-2: #202b34;--panel-3: #28343e;--line: #3b4852;--line-strong: #596670;--text: #eef3f5;--muted: #aeb8bf;--disabled: #6f7b83;--ok: #55b87a;--ok-dim: #173d2a;--info: #5e9fc7;--info-dim: #183246;--warn: #e4b04c;--warn-dim: #4a3517;--danger: #e45f5f;--danger-dim: #4a1e22;--stop: #cf5158;--action: #477b9b;--action-hover: #578eae;--write: #d08b3f;--write-dim: #4a321c;--shadow: rgba(0, 0, 0, .32);--radius: 4px;--font: "Microsoft YaHei UI", "Noto Sans SC", Arial, sans-serif}*{box-sizing:border-box}html,body{height:100%}body{margin:0;min-width:960px;min-height:600px;background:#070b0e;color:var(--text);font-family:var(--font);font-size:14px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}button,input,select{font:inherit}button{touch-action:manipulation}.hmi-shell{width:100vw;height:100vh;min-height:600px;display:grid;grid-template-rows:68px 42px minmax(0,1fr) 72px;background:radial-gradient(circle at 50% -20%,rgba(94,159,199,.08),transparent 40%),var(--bg)}.topbar{display:grid;grid-template-columns:280px minmax(360px,1fr) 310px;gap:8px;padding:6px 8px;background:#111920;border-bottom:1px solid var(--line)}.user-panel,.alarm-strip,.datetime-panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.user-panel{padding:7px 9px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.user-row{min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.section-kicker{color:var(--muted);font-size:12px}.user-row strong{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-badge{padding:2px 5px;border:1px solid;border-radius:2px;font-size:10px;letter-spacing:.4px}.role-viewer{color:#c0cad0;border-color:#64727b;background:#2b363d}.role-operator{color:#b9ddf2;border-color:var(--info);background:var(--info-dim)}.role-administrator{color:#f1d19d;border-color:var(--write);background:var(--write-dim)}.user-actions{display:flex;gap:5px}.compact-btn,.ack-btn,.mode-chip,.nav-btn,.control-btn,.tab-btn,.primary-btn,.secondary-btn,.danger-btn,.icon-close{border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text);background:var(--panel-3);cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(94,159,199,.65);outline-offset:1px}button:hover:not(:disabled){filter:brightness(1.12)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;color:var(--disabled)!important;background:#20272c!important;border-color:#384148!important;filter:none}.compact-btn{min-width:48px;min-height:38px;padding:0 9px}.compact-btn.muted{color:var(--muted)}.alarm-strip{overflow:hidden}.alarm-summary{width:100%;height:100%;padding:5px 12px;border:0;color:var(--text);background:transparent;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.alarm-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;color:#1d1710;background:var(--warn);font-weight:700;font-size:21px;box-shadow:0 0 0 4px #e4b04c21}.alarm-copy{min-width:0;display:grid;gap:2px}.alarm-copy b{color:#ffd989}.alarm-copy span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.datetime-panel{padding:5px 7px;display:grid;grid-template-columns:112px 1fr;gap:8px;align-items:stretch}.ack-btn{background:var(--warn-dim);border-color:var(--warn);color:#ffdc92;font-weight:500}.datetime{display:grid;place-content:center end;text-align:right}.datetime strong{font:500 22px/1.05 Consolas,monospace;letter-spacing:.5px}.datetime span{color:var(--muted);font:12px/1.4 Consolas,monospace}.modebar{min-width:0;display:flex;align-items:center;gap:7px;padding:4px 10px;background:#121a20;border-bottom:1px solid var(--line)}.mode-label{color:var(--muted);font-weight:500;margin-right:3px}.mode-group{display:flex;gap:4px}.mode-group.grow{flex:1}.mode-chip{min-width:60px;min-height:30px;padding:2px 12px;color:var(--muted)}.mode-chip.active{color:#c7e8f8;background:var(--info-dim);border-color:var(--info);box-shadow:inset 3px 0 0 var(--info)}.mode-divider{height:22px;width:1px;background:var(--line);margin:0 3px}.system-state{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}.system-state b{color:var(--text);font-weight:500}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--disabled);border:2px solid rgba(255,255,255,.15)}.dot.ok{background:var(--ok);box-shadow:0 0 6px #55b87a6b}.dot.alarm{background:var(--danger);box-shadow:0 0 6px #e45f5f80}.workspace{min-height:0;padding:7px 8px;overflow:hidden}.page{height:100%;min-height:0;display:grid;gap:7px}.page-titlebar{min-height:35px;display:flex;align-items:center;gap:9px;padding:0 10px;background:var(--panel);border-left:4px solid var(--info)}.page-titlebar h1{margin:0;font-size:16px;font-weight:500}.page-titlebar .subtitle{margin-left:auto;color:var(--muted);font-size:12px}.panel{min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panel-head{height:34px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:14px;font-weight:500}.panel-head span{color:var(--muted);font-size:11px}.hpu-page{grid-template-rows:35px minmax(0,1fr)}.hpu-grid{min-height:0;display:grid;grid-template-columns:34% minmax(300px,1fr) 230px;gap:7px}.status-panel,.schematic-panel,.operations-panel{display:grid;grid-template-rows:34px minmax(0,1fr)}.status-list{min-height:0;padding:5px 7px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(32px,1fr);gap:4px}.status-item{min-width:0;display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:6px;align-items:center;padding:3px 6px;background:#151d23;border-left:2px solid var(--line-strong)}.status-item .label{min-width:0;color:#d8e0e4;white-space:normal;line-height:1.15}.status-item .value{color:var(--text);font-family:Consolas,monospace;font-weight:500;white-space:nowrap}.status-item.state-alarm{border-left-color:var(--danger);background:#251a1d}.status-item.state-off .value{color:var(--muted)}.schematic{min-height:0;position:relative;padding:8px 10px;display:grid;grid-template-rows:1fr auto;gap:6px;background:linear-gradient(#ffffff04,#fff0)}.hydraulic-map{min-height:170px;position:relative}.reservoir{position:absolute;left:36%;right:36%;bottom:7%;height:31%;border:3px solid var(--line-strong);border-top:0;background:linear-gradient(to top,rgba(94,159,199,.32) 0 62%,transparent 62%)}.reservoir:after{content:"油箱 62%";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#c7e8f8;font-weight:500}.pump-node,.cooler-node,.filter-node,.load-node{position:absolute;display:grid;place-items:center;min-width:64px;height:54px;padding:4px;text-align:center;background:var(--panel-3);border:2px solid var(--line-strong);font-size:12px}.pump-node{border-radius:50%;min-width:58px;width:58px}.node-running{border-color:var(--ok);box-shadow:0 0 0 3px #55b87a1a}.pump-1{left:9%;top:20%}.pump-2{left:9%;top:60%}.filter-node{left:39%;top:5%}.cooler-node{right:7%;top:10%}.load-node{right:5%;top:57%;height:65px}.pipe{position:absolute;background:var(--line-strong)}.pipe.flow{background:var(--ok);box-shadow:0 0 5px #55b87a42}.pipe-h{height:4px}.pipe-v{width:4px}.pipe.p1{left:19%;right:58%;top:34%}.pipe.p2{left:19%;right:58%;top:72%}.pipe.p3{left:42%;right:21%;top:34%}.pipe.p4{left:58%;right:21%;top:72%}.pipe.p5{left:42%;top:27%;height:11%}.pipe.p6{right:20%;top:34%;height:41%}.pipe.p7{left:49.5%;bottom:35%;height:19%}.schematic-values{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.metric-tile{padding:6px 7px;background:#141c22;border-top:2px solid var(--info)}.metric-tile span{display:block;color:var(--muted);font-size:11px}.metric-tile b{display:block;margin-top:2px;font:500 18px/1.1 Consolas,monospace}.metric-tile small{color:var(--muted);font-size:11px}.operation-grid{min-height:0;padding:8px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:7px}.control-btn{min-height:62px;padding:7px 5px;display:grid;place-content:center;gap:4px;border-width:1px;font-weight:500}.control-btn .btn-no{color:var(--muted);font:11px Consolas,monospace}.control-btn.start,.control-btn.request{background:var(--info-dim);border-color:var(--info);color:#c7e8f8}.control-btn.stop{background:var(--danger-dim);border-color:var(--stop);color:#ffd4d5}.control-btn.load{background:var(--warn-dim);border-color:var(--warn);color:#ffe1a1}.control-btn.admin{background:var(--write-dim);border-color:var(--write);color:#ffe0b3}.control-btn.active{background:var(--ok-dim);border-color:var(--ok);color:#c5f0d3;box-shadow:inset 0 0 0 1px var(--ok)}.bottom-nav{min-width:0;padding:6px 8px 7px;display:grid;grid-template-columns:178px repeat(7,minmax(92px,1fr));gap:5px;background:#111920;border-top:1px solid var(--line)}.brand{min-width:0;display:flex;align-items:center;gap:9px;padding:0 10px;color:#dfe9ed}.brand-mark{width:39px;height:39px;display:grid;place-items:center;border:4px solid var(--info);border-right-color:transparent;border-radius:50%;color:#b9ddf2;font:700 21px Arial}.brand b{display:block;letter-spacing:1.6px}.brand small{display:block;margin-top:2px;color:var(--muted);font-size:8px;letter-spacing:.8px}.nav-btn{position:relative;min-width:0;min-height:54px;padding:4px 5px;color:var(--muted);background:var(--panel);font-weight:500}.nav-btn.active{color:#d7edf8;background:var(--info-dim);border-color:var(--info);box-shadow:inset 0 4px 0 var(--info)}.alarm-nav b{position:absolute;top:4px;right:5px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:9px;color:#21190a;background:var(--warn);font:700 11px Arial}.system-page{grid-template-rows:35px minmax(0,1fr)}.system-grid{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:7px}.system-left{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:7px}.data-grid{min-height:0;padding:7px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(52px,1fr);gap:5px}.readout{min-width:0;padding:6px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;background:#141c22;border-left:3px solid var(--info)}.readout .label{color:#d7dfe3;line-height:1.25}.readout .reading{text-align:right;white-space:nowrap}.readout .reading b{font:500 18px Consolas,monospace}.readout .reading small{display:block;color:var(--muted);font-size:10px}.state-row{padding:7px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.limit-state{min-height:48px;padding:5px;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;background:#151d23;border:1px solid var(--line)}.system-actions{display:grid;grid-template-rows:34px minmax(0,1fr)}.system-actions .operation-grid{grid-template-columns:1fr;grid-auto-rows:minmax(52px,1fr);grid-template-rows:none;overflow:auto}.suction-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:7px}.suction-visual{position:relative;display:grid;place-items:center;background:linear-gradient(180deg,#152028,#10171c);overflow:hidden}.deck-line{position:absolute;left:8%;right:8%;bottom:24%;height:5px;background:var(--line-strong)}.pipe-arm{width:52%;height:28px;background:var(--panel-3);border:2px solid var(--info);transform:rotate(-8deg);transform-origin:right center}.pipe-arm:before{content:"吸管器";position:absolute;left:40%;top:-24px;color:var(--muted)}.pipe-head{position:absolute;left:20%;top:52%;width:60px;height:80px;border:3px solid var(--info);background:var(--panel-2)}.suction-state{position:absolute;top:14px;right:14px;padding:8px 12px;background:var(--ok-dim);border:1px solid var(--ok);color:#c5f0d3}.parameter-page{grid-template-rows:35px 40px minmax(0,1fr)}.subtabs{display:flex;gap:5px;padding:4px;background:var(--panel);border:1px solid var(--line)}.tab-btn{min-width:128px;padding:4px 16px;color:var(--muted)}.tab-btn.active{color:#ffe2b2;background:var(--write-dim);border-color:var(--write);box-shadow:inset 3px 0 0 var(--write)}.parameter-content{min-height:0;display:grid;gap:7px}.parameter-columns{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.parameter-group{min-height:0;display:grid;grid-template-rows:34px minmax(0,1fr)}.parameter-list{min-height:0;padding:6px;display:grid;align-content:start;gap:5px;overflow:auto}.parameter-row{min-height:46px;padding:5px 6px;display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:7px;align-items:center;background:#151d23;border-left:3px solid var(--write)}.parameter-row label{line-height:1.25}.parameter-input{width:100%;height:34px;padding:4px 26px 4px 8px;border:1px solid var(--write);border-radius:3px;color:#ffe3bb;background:var(--write-dim);font:500 16px Consolas,monospace;text-align:right}.parameter-input:disabled{color:var(--disabled);background:#20272c;border-color:#3a444a}.input-wrap{position:relative}.input-unit{position:absolute;right:7px;top:50%;transform:translateY(-50%);color:#c9a779;font-size:10px;pointer-events:none}.write-legend{display:flex;align-items:center;gap:8px}.legend-swatch{width:13px;height:13px;background:var(--write-dim);border:2px solid var(--write)}.parameter-note{color:var(--muted);font-size:11px}.save-bar{min-height:50px;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:7px 10px;background:var(--panel);border:1px solid var(--line)}.save-bar .dirty-state{margin-right:auto;color:var(--muted)}.save-bar .dirty-state.changed{color:#ffe0a1}.primary-btn,.secondary-btn,.danger-btn{min-height:38px;min-width:90px;padding:6px 14px}.primary-btn{color:#fff0d4;background:var(--write-dim);border-color:var(--write)}.secondary-btn{color:var(--text);background:var(--panel-3)}.danger-btn{color:#ffd8d8;background:var(--danger-dim);border-color:var(--danger)}.alarm-page{grid-template-rows:35px 42px minmax(0,1fr)}.alarm-toolbar{display:flex;align-items:center;gap:6px;padding:5px 7px;background:var(--panel);border:1px solid var(--line)}.alarm-filter{min-height:30px;padding:3px 12px;border:1px solid var(--line-strong);color:var(--muted);background:var(--panel-3);cursor:pointer}.alarm-filter.active{color:#ffe0a0;border-color:var(--warn);background:var(--warn-dim)}.alarm-table-wrap{min-height:0;overflow:auto;background:var(--panel);border:1px solid var(--line)}.alarm-table{width:100%;border-collapse:collapse}.alarm-table th{position:sticky;top:0;height:34px;padding:5px 8px;text-align:left;color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--line);font-weight:500}.alarm-table td{height:42px;padding:5px 8px;border-bottom:1px solid #2d3941}.alarm-row-active{background:#e4b04c14}.alarm-row-critical{background:#e45f5f1a}.severity{display:inline-block;min-width:52px;padding:2px 5px;border:1px solid;text-align:center;font-size:11px}.severity.critical{color:#ffcaca;border-color:var(--danger);background:var(--danger-dim)}.severity.warning{color:#ffe0a0;border-color:var(--warn);background:var(--warn-dim)}.severity.info{color:#c7e8f8;border-color:var(--info);background:var(--info-dim)}.io-page{grid-template-rows:35px minmax(0,1fr)}.io-columns{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}.io-grid{min-height:0;padding:6px;display:grid;grid-template-columns:repeat(2,1fr);align-content:start;gap:4px;overflow:auto}.io-point{min-height:38px;padding:5px 7px;display:grid;grid-template-columns:38px 14px minmax(0,1fr);gap:6px;align-items:center;background:#151d23}.io-point code{color:var(--muted);font:11px Consolas,monospace}.io-point span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-backdrop{position:fixed;z-index:50;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#040709c7}.modal-backdrop.hidden,.toast.hidden{display:none}.modal{width:min(430px,90vw);padding:18px;background:#1a242c;border:1px solid var(--line-strong);border-top:4px solid var(--info);box-shadow:0 18px 55px var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:16px}.modal h2{margin:2px 0 0;font-size:20px;font-weight:500}.eyebrow{color:var(--info);font-size:11px;letter-spacing:1px}.icon-close{width:36px;height:36px;min-width:0;padding:0;font-size:24px}.login-dialog label{display:grid;gap:5px;margin:12px 0;color:var(--muted)}.login-dialog select,.login-dialog input{width:100%;height:43px;padding:7px 10px;color:var(--text);background:#11181e;border:1px solid var(--line-strong);border-radius:3px}.form-error{min-height:20px;color:#ffb7b7}.form-hint{margin:0;color:var(--muted);font-size:11px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.confirm-dialog{text-align:center;border-top-color:var(--warn)}.confirm-symbol{width:48px;height:48px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;color:#21190a;background:var(--warn);font-size:26px;font-weight:700}.confirm-dialog p{color:var(--muted)}.confirm-checks{text-align:left;padding:8px 10px;background:#131b21;border-left:3px solid var(--warn)}.confirm-checks div{margin:5px 0}.toast{position:fixed;z-index:70;left:50%;bottom:88px;transform:translate(-50%);min-width:280px;max-width:70vw;padding:11px 16px;text-align:center;color:#dff2e5;background:#1d3a29;border:1px solid var(--ok);box-shadow:0 8px 30px var(--shadow)}.toast.error{color:#ffd5d5;background:var(--danger-dim);border-color:var(--danger)}@media (max-width: 1100px),(max-height: 680px){body{font-size:12px}.hmi-shell{grid-template-rows:62px 38px minmax(0,1fr) 64px}.topbar{grid-template-columns:310px minmax(270px,1fr) 275px}.datetime-panel{grid-template-columns:100px 1fr}.datetime strong{font-size:19px}.hpu-grid{grid-template-columns:34% minmax(250px,1fr) 206px}.status-list{grid-auto-rows:minmax(27px,1fr)}.status-item{padding:2px 4px}.bottom-nav{grid-template-columns:140px repeat(7,minmax(82px,1fr))}.nav-btn{min-height:48px}.brand{padding:0 5px}.brand-mark{width:32px;height:32px;font-size:17px}.metric-tile b,.readout .reading b{font-size:15px}.data-grid{grid-auto-rows:minmax(44px,1fr)}.parameter-row{min-height:40px;grid-template-columns:minmax(0,1fr) 108px}.parameter-input{height:31px;font-size:14px}}:root{color-scheme:light;--bg: #b7b9b7;--panel: #a9abaa;--panel-2: #969997;--panel-3: #d5d3d5;--line: #74797b;--line-strong: #5d6264;--text: #17191a;--muted: #4e5355;--disabled: #818486;--ok: #00ef25;--ok-dim: #a7c9a9;--info: #18549a;--info-dim: #c5c9cd;--warn: #fff200;--warn-dim: #d8cf75;--danger: #f20e14;--danger-dim: #d88c8e;--stop: #f20e14;--action: #00ef25;--action-hover: #1cff3a;--write: #245da4;--write-dim: #747879;--shadow: rgba(29, 33, 34, .42);--radius: 2px;--font: "SimSun", "Microsoft YaHei UI", Arial, sans-serif}body{background:#85898a;color:var(--text);font-size:15px}.hmi-shell{background:#b9bbb9;border:3px ridge #f4f4f4}.topbar{gap:5px;padding:4px 5px;background:#d0ced0;border-bottom:3px ridge #f5f5f5}.user-panel,.alarm-strip,.datetime-panel,.panel,.subtabs,.save-bar,.alarm-toolbar,.alarm-table-wrap{background:#a7aaa8;border:2px outset #eceaec;border-radius:2px;box-shadow:none}.user-panel{background:#d1cfd1}.section-kicker{color:#252829;font-size:15px}.user-row strong{font:700 17px/1.1 Arial,sans-serif}.role-badge{color:#252829;background:#d7d5d7;border:2px inset #f4f4f4;font-size:10px}.role-operator{color:#083f83;background:#dce7f0}.role-administrator{color:#7a4800;background:#eee0b8}.compact-btn,.ack-btn,.mode-chip,.nav-btn,.control-btn,.tab-btn,.primary-btn,.secondary-btn,.danger-btn,.icon-close,.alarm-filter{color:#202223;background:#d5d3d5;border:2px outset #f4f2f4;border-radius:2px;box-shadow:none;text-shadow:none}button:hover:not(:disabled){filter:brightness(1.04)}button:active:not(:disabled){transform:none;border-style:inset}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #174e91;outline-offset:-3px}button:disabled{color:#858585!important;background:#b5b3b5!important;border-color:#e8e6e8 #777 #777 #e8e6e8!important;filter:none}.compact-btn{min-height:40px;font-size:16px}.compact-btn.muted{color:#555}.alarm-strip{background:#d1cfd1;padding:2px}.alarm-summary{background:var(--warn);border:1px solid #262626;color:#121212;padding:3px 9px}.alarm-icon{width:32px;height:32px;color:#111;background:var(--warn);border:2px solid #444;box-shadow:none}.alarm-copy b{color:#111;font-size:16px}.alarm-copy span{color:#272727}.datetime-panel{background:#d1cfd1}.ack-btn{color:#161616;background:#d5d3d5;border-color:#f4f2f4 #777 #777 #f4f2f4}.datetime strong{color:#181818;font-family:Consolas,monospace;font-weight:700}.datetime span{color:#242424;font-family:Consolas,monospace}.modebar{gap:6px;background:#c8c9c8;border-top:1px solid #6e7374;border-bottom:3px ridge #f2f2f2}.mode-label{color:#303334;font-size:16px}.mode-chip{color:#303334;background:#c7c5c7}.mode-chip.active{color:#00b41c;background:#aaaead;border:2px inset #f1eff1;box-shadow:none;font-weight:700}.mode-divider{background:#777b7d}.system-state{color:#282b2c;font-size:13px}.system-state b{color:#171919;font-weight:700}.dot{width:17px;height:17px;background:#d5d3d5;border:2px outset #fff;box-shadow:none}.dot.ok{background:var(--ok);box-shadow:none}.dot.warn{background:var(--warn)}.dot.alarm{background:var(--danger);box-shadow:none}.workspace{background:#b9bbb9}.page-titlebar{background:#a6a9a7;border:2px outset #eceaec;border-left:8px solid #f4f4f4;color:#fff}.page-titlebar h1{font-size:18px;font-weight:400}.page-titlebar .subtitle{color:#fff}.panel-head{background:#9da09e;border-bottom:2px groove #eceaec;color:#fff}.panel-head h2{font-size:16px;font-weight:400}.panel-head span{color:#f6f6f6;font-size:12px}.status-list{background:#a7aaa8}.status-item{background:#a7aaa8;border:1px solid transparent;border-left:3px solid #e4e4e4;color:#fff}.status-item .label{color:#fff;font-size:15px}.status-item .value{min-width:72px;padding:4px 6px;color:#fff;background:#666a69;border:2px inset #ededed;border-radius:3px;text-align:right}.status-item.state-ok{border-left-color:var(--ok)}.status-item.state-warn{border-left-color:var(--warn)}.status-item.state-warn .value{color:#fff500}.status-item.state-alarm{background:#aaa1a1;border-left-color:var(--danger)}.status-item.state-alarm .value{color:#ff1218}.status-item.state-off .value{color:#eee}.schematic{background:#a3a6a4;color:#fff}.reservoir{border-color:#e8e8e8;background:linear-gradient(to top,#5a829a 0 62%,transparent 62%)}.reservoir:after{color:#fff}.pump-node,.cooler-node,.filter-node,.load-node{color:#171717;background:#d3d1d3;border:2px outset #f5f3f5}.node-running{border:3px solid var(--ok);box-shadow:none}.pipe{background:#e2e2e2}.pipe.flow{background:var(--ok);box-shadow:none}.schematic-values{border-top:2px groove #f1f1f1}.metric-tile{color:#fff;background:#777b79;border:2px inset #ededed}.metric-tile span,.metric-tile small,.metric-tile b{color:#fff}.operation-grid{background:#a7aaa8}.control-btn{font-size:16px;font-weight:400}.control-btn .btn-no{color:inherit;opacity:.78}.control-btn.start,.control-btn.request,.control-btn.active{color:#001f05;background:var(--ok);border:2px outset #efffef;box-shadow:none}.control-btn.stop{color:#fff;background:var(--danger);border:2px outset #fff}.control-btn.load{color:#222;background:#d4d2d4;border:2px outset #f7f5f7}.control-btn.admin{color:#fff;background:#225a9d;border:2px outset #dce9f8}.bottom-nav{gap:3px;padding:5px;background:#d0ced0;border-top:3px ridge #f7f7f7}.brand{color:#252829;background:#dedcde;border:2px outset #f4f2f4}.brand-mark{color:#333;border-color:#303335;border-right-color:transparent}.brand small{color:#4b5052}.nav-btn{color:#252525;background:#d5d3d5;border:2px outset #f4f2f4;font-size:16px}.nav-btn.active{color:#202020;background:#b6b8b7;border:2px inset #f4f2f4;box-shadow:inset 0 5px #5f6567}.alarm-nav b{color:#111;background:var(--warn);border:1px solid #7c7100}.data-grid,.state-row,.io-grid,.parameter-list{background:#a7aaa8}.readout,.limit-state,.io-point,.parameter-row{color:#fff;background:#9da09e;border:2px outset #d8d8d8}.readout{border-left:5px solid #245da4}.readout .label{color:#fff}.readout .reading{min-width:76px;padding:3px 6px;color:#fff;background:#626665;border:2px inset #eee}.readout .reading small,.limit-state{color:#fff}.suction-visual{background:#a3a6a4}.deck-line{background:#eee}.pipe-arm{background:#c9c7c9;border-color:#245da4}.pipe-arm:before{color:#fff}.pipe-head{background:#d1cfd1;border-color:#245da4}.suction-state{color:#07320d;background:var(--ok);border:2px outset #efffef}.subtabs{background:#aaaead}.tab-btn{color:#242424}.tab-btn.active{color:#fff;background:#245da4;border:2px inset #dce9f8;box-shadow:none}.parameter-row{border-left:5px solid #245da4}.parameter-input{color:#fff;background:#656968;border:2px inset #eaeaea;border-radius:2px}.parameter-input:disabled{color:#e5e5e5;background:#7c7f7e;border-color:#efefef #777 #777 #efefef}.input-unit{color:#fff}.legend-swatch{background:#656968;border:2px solid #245da4}.parameter-note,.save-bar .dirty-state{color:#fff}.save-bar .dirty-state.changed{color:#fff500}.primary-btn{color:#fff;background:#245da4;border-color:#dce9f8 #123a6b #123a6b #dce9f8}.secondary-btn{color:#222;background:#d5d3d5}.danger-btn{color:#fff;background:var(--danger);border-color:#fff #810000 #810000 #fff}.alarm-toolbar{background:#aaaead}.alarm-filter.active{color:#111;border:2px inset #f4f2f4;background:var(--warn)}.alarm-table-wrap{background:#d1cfd1}.alarm-table{color:#111}.alarm-table th{color:#fff;background:#666a69;border:1px solid #f0f0f0}.alarm-table td{border:1px solid #777}.alarm-row-active{background:var(--warn)}.alarm-row-critical{color:#fff;background:var(--danger)}.severity{color:#111!important;background:#d6d4d6!important;border:2px inset #fff!important}.severity.critical{color:#fff!important;background:var(--danger)!important}.severity.warning{background:var(--warn)!important}.io-point code{color:#152a43;font-weight:700}.io-point span:last-child{color:#fff}.modal-backdrop{background:#26292aad}.modal{color:#151515;background:#d0ced0;border:4px outset #f5f3f5;box-shadow:8px 8px #28282859}.modal h2{color:#151515}.eyebrow{color:#184d8a}.login-dialog label,.form-hint,.confirm-dialog p{color:#303334}.login-dialog select,.login-dialog input{color:#111;background:#f2f0f2;border:2px inset #fff;border-radius:1px}.form-error{color:#d40000}.confirm-dialog{border-top-color:#f5f3f5}.confirm-symbol{color:#111;background:var(--warn);border:2px solid #555}.confirm-checks{color:#111;background:#bbbdbb;border:2px inset #eee;border-left:6px solid var(--warn)}.toast{color:#001a04;background:var(--ok);border:3px outset #efffef;box-shadow:5px 5px #28282852}.toast.error{color:#fff;background:var(--danger);border-color:#fff #850000 #850000 #fff}.brand{justify-content:center;padding:2px 8px;overflow:hidden}.brand-logo{display:block;width:auto;height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}body{min-width:800px;min-height:480px;display:grid;place-items:center;overflow:auto;background:#5f6466;font-family:Arial,SimSun,sans-serif;font-size:11px}.hmi-shell{width:800px;height:480px;min-height:480px;grid-template-rows:54px 32px minmax(0,1fr) 54px;border-width:2px}.topbar{grid-template-columns:185px minmax(300px,1fr) 154px;gap:3px;padding:2px 3px;border-bottom-width:2px}.user-panel{padding:3px 5px;grid-template-columns:minmax(0,1fr) auto;gap:3px}.user-row{gap:3px}.section-kicker{font-size:12px}.user-row strong{max-width:72px;font-size:13px}.role-badge{padding:1px 3px;font-size:7px}.user-actions{gap:2px}.compact-btn{min-width:38px;min-height:32px;padding:0 5px;font-size:12px}.alarm-strip{padding:1px}.alarm-summary{padding:2px 6px;gap:6px}.alarm-icon{width:26px;height:26px;font-size:17px}.alarm-copy{gap:0}.alarm-copy b{font-size:12px}.alarm-copy span{font-size:10px}.datetime-panel{padding:2px 3px;grid-template-columns:70px 1fr;gap:3px}.ack-btn{font-size:11px}.datetime strong{font-size:16px}.datetime span{font-size:9px}.modebar{gap:3px;padding:2px 5px;border-bottom-width:2px}.mode-label{margin-right:1px;font-size:11px}.mode-group{gap:2px}.mode-chip{min-width:40px;min-height:25px;padding:1px 6px;font-size:10px}.mode-divider{height:20px;margin:0 1px}.system-state{gap:3px;font-size:9px}.dot{width:12px;height:12px;border-width:1px}.workspace{padding:3px}.page{gap:3px}.page-titlebar{min-height:24px;padding:0 6px;border-width:1px;border-left-width:5px}.page-titlebar h1{font-size:13px}.page-titlebar .subtitle{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.panel{border-width:1px}.panel-head{height:23px;padding:0 6px;border-bottom-width:1px}.panel-head h2{font-size:11px}.panel-head span{font-size:8px}.hpu-page,.system-page,.io-page{grid-template-rows:24px minmax(0,1fr)}.hpu-grid{grid-template-columns:34% minmax(230px,1fr) 184px;gap:3px}.status-panel,.schematic-panel,.operations-panel,.system-actions{grid-template-rows:23px minmax(0,1fr)}.status-list{padding:2px;grid-auto-rows:minmax(25px,1fr);gap:1px}.status-item{grid-template-columns:10px minmax(0,1fr) auto;gap:2px;padding:1px 3px;border-left-width:2px}.status-item .label{font-size:9px;line-height:1.05}.status-item .value{min-width:49px;padding:2px 3px;border-width:1px;font-size:9px}.schematic{padding:3px 5px;gap:2px}.hydraulic-map{min-height:110px}.pump-node,.cooler-node,.filter-node,.load-node{min-width:46px;height:36px;padding:2px;font-size:8px;border-width:1px}.pump-node{min-width:38px;width:38px}.node-running{border-width:2px}.load-node{height:44px}.pipe-h{height:3px}.pipe-v{width:3px}.reservoir{border-width:2px}.reservoir:after{font-size:9px}.schematic-values{gap:2px;border-top-width:1px}.metric-tile{padding:2px 4px;border-width:1px}.metric-tile span,.metric-tile small{font-size:7px}.metric-tile b{margin-top:0;font-size:12px}.operation-grid{padding:4px;gap:3px}.control-btn{min-height:40px;padding:3px 2px;gap:2px;border-width:1px!important;font-size:10px}.control-btn .btn-no{font-size:7px}.bottom-nav{grid-template-columns:98px repeat(7,minmax(0,1fr));gap:2px;padding:3px;border-top-width:2px}.brand{padding:1px 4px;border-width:1px}.brand-logo{max-height:46px}.nav-btn{min-height:46px;padding:12px 2px 2px;border-width:1px;font-size:10px}.nav-btn:before{content:attr(data-key);position:absolute;top:2px;left:4px;color:#4e5253;font:7px Arial,sans-serif}.nav-btn.active{border-width:1px;box-shadow:inset 0 3px #5f6567}.alarm-nav b{top:2px;right:3px;min-width:14px;height:14px;padding:0 2px;font-size:8px}.system-grid{grid-template-columns:minmax(0,1fr) 190px;gap:3px}.system-left{gap:3px}.data-grid{padding:3px;grid-auto-rows:minmax(36px,1fr);gap:2px}.readout{padding:2px 4px;gap:3px;border-width:1px;border-left-width:3px}.readout .label{font-size:9px}.readout .reading{min-width:52px;padding:2px 3px;border-width:1px}.readout .reading b{font-size:11px}.readout .reading small{font-size:7px}.state-row{padding:3px;gap:2px}.limit-state{min-height:34px;padding:2px;gap:3px;border-width:1px;font-size:8px}.system-actions .operation-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:auto;overflow:hidden}.suction-layout{grid-template-columns:minmax(0,1fr) 190px;gap:3px}.suction-state{top:6px;right:6px;padding:4px 6px;border-width:1px}.deck-line{height:3px}.pipe-arm{height:18px;border-width:1px}.pipe-arm:before{top:-16px}.pipe-head{width:40px;height:54px;border-width:2px}.parameter-page{grid-template-rows:24px 29px minmax(0,1fr)}.subtabs{gap:2px;padding:2px;border-width:1px}.tab-btn{min-width:86px;padding:2px 8px;border-width:1px;font-size:9px}.subtabs .subtitle{font-size:8px}.parameter-content,.parameter-columns{gap:3px}.parameter-group{grid-template-rows:23px minmax(0,1fr)}.parameter-list{padding:3px;gap:2px}.parameter-row{min-height:32px;padding:2px 3px;grid-template-columns:minmax(0,1fr) 76px;gap:3px;border-width:1px;border-left-width:3px;font-size:8px}.parameter-input{height:25px;padding:2px 18px 2px 4px;border-width:1px;font-size:10px}.input-unit{right:4px;font-size:7px}.save-bar{min-height:35px;gap:4px;padding:3px 5px;border-width:1px;font-size:8px}.primary-btn,.secondary-btn,.danger-btn{min-width:66px;min-height:28px;padding:3px 7px;border-width:1px;font-size:9px}.alarm-page{grid-template-rows:24px 30px minmax(0,1fr)}.alarm-toolbar{gap:3px;padding:2px 3px;border-width:1px}.alarm-filter{min-height:24px;padding:2px 7px;border-width:1px;font-size:9px}.alarm-table-wrap{border-width:1px}.alarm-table th{height:25px;padding:3px 5px}.alarm-table td{height:31px;padding:3px 5px}.severity{min-width:38px;padding:1px 3px;border-width:1px!important;font-size:8px}.io-columns{gap:3px}.io-grid{padding:3px;gap:2px}.io-point{min-height:30px;padding:2px 4px;grid-template-columns:27px 11px minmax(0,1fr);gap:3px;border-width:1px}.io-point code{font-size:8px}.modal-backdrop{width:800px;height:480px;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);padding:12px}.modal{width:360px;padding:10px;border-width:3px;box-shadow:none}.modal-head{margin-bottom:8px}.modal h2{font-size:15px}.icon-close{width:28px;height:28px;font-size:18px}.login-dialog label{gap:3px;margin:7px 0}.login-dialog select,.login-dialog input{height:32px;padding:4px 6px;border-width:1px}.modal-actions{gap:4px;margin-top:10px}.confirm-symbol{width:36px;height:36px;margin-bottom:5px;font-size:20px}.confirm-checks{padding:4px 6px;border-width:1px;border-left-width:4px}.confirm-checks div{margin:3px 0}.toast{left:50%;bottom:calc(50% - 184px);min-width:260px;max-width:520px;padding:5px 9px;border-width:1px;box-shadow:none;font-size:9px}