main{grid-template-columns:280px minmax(360px,1fr) 340px;max-width:1800px;gap:14px;padding:18px}#viewport{grid-column:2;min-height:0}.hmi{grid-column:3;grid-row:1;min-width:0;align-self:start}.hmi-bezel{background:linear-gradient(130deg,#485159,#242c32 55%,#39434b);padding:14px 12px 9px;border:2px solid #1c252b;border-radius:15px;box-shadow:inset 0 1px 1px #fff6,0 8px 20px #1b2a2b22}.hmi-brand,.hmi-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#e0e9ec;letter-spacing:.08em;padding:0 2px 12px}.hmi-brand>span:first-child{font-weight:800;font-size:15px}.hmi-led{font-size:9px;color:#94ecb9}.hmi-bottom{font-size:8px;padding:12px 2px 0;color:#b0bec6}.hmi-screen{background:#0b1924;border:3px solid #111b21;border-radius:6px;color:#edf5fa;min-height:490px;padding:12px;box-shadow:inset 0 0 12px #0006}.hmi-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #304350}.hmi-header small{font-size:9px;letter-spacing:.12em;color:#87a7bc}.hmi-header strong{display:block;font-size:16px;margin-top:4px}.hmi-header>span{font-size:9px;background:#35434c;color:#b7c7d1;padding:6px;border-radius:4px}.hmi-header>span.running{background:#174d39;color:#8ff0b8}.hmi-tabs{display:flex;gap:4px;margin:12px 0}.hmi-tabs button{flex:1;min-width:0;font-size:10px;padding:8px 2px;background:#1b3040;border-color:#3a5366;color:#b7cede}.hmi-tabs button.active{background:#1b6859;border-color:#68b39e;outline:0;color:white}.hmi-page[hidden]{display:none}.hmi-page{min-height:290px}.hmi .metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.hmi .metric{padding:12px 8px;border:1px solid #304858;border-radius:6px;font-size:9px;color:#97b2c3;background:#132938}.hmi .metric strong{color:#d7f7ea;font-size:21px;white-space:nowrap}.hmi-operating{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.hmi-operating span{font-size:10px;color:#8ea8b9}.hmi-operating strong{display:block;margin-top:4px;color:#dce9f0;font-size:13px}.hmi p,.hmi small{color:#99b2c4;line-height:1.5}.hmi p{font-size:11px}.hmi h2{font-size:14px;margin:12px 0 4px;color:#e3edf4}.hmi .scope{height:190px;margin-top:8px;border:1px solid #304858}.hmi #scope-status{font-size:11px}.hmi-legend{display:flex;justify-content:space-between;margin:10px 0;font-size:11px}.hmi-legend span:first-child{color:#51c4a1}.hmi-legend span:last-child{color:#e8ad59}.hmi-commands{display:flex;gap:8px;margin-top:12px}.hmi-commands button{flex:1;padding:12px 4px;font-size:12px;font-weight:700;color:#d9f7e8;background:#1a5741;border-color:#368264}.hmi-commands #hmi-stop{background:#642e32;border-color:#a45358;color:#ffe0e0}.hmi-commands button:disabled{opacity:.45}#hmi-feedback{margin-top:12px;padding:8px;background:#142b38;border-left:3px solid #4caa91;color:#acc9d8;font-size:10px;line-height:1.5;min-height:48px}.hmi-caption{font-size:10px!important}@media(max-width:1250px){main{grid-template-columns:250px minmax(0,1fr);height:auto;align-items:start}#viewport{height:760px}.hmi{grid-column:2;grid-row:2}aside{max-height:760px}.hmi-screen{min-height:0}.hmi-page{min-height:220px}.hmi .scope{height:220px}}@media(max-width:850px){main{grid-template-columns:1fr;padding:12px}#viewport{grid-column:1;grid-row:1;height:720px}aside{grid-column:1;grid-row:3;max-height:none}.hmi{grid-column:1;grid-row:2}.hmi-bezel{max-width:600px;margin:auto}.hmi-page{min-height:230px}}