:root{--bg-0: #14151a;--bg-1: #1c1e24;--bg-2: #262830;--bg-3: #32343c;--text: #d8d9dc;--text-dim: #9aa0a8;--border: #464a54;--accent-ok: #5cb87a;--accent-warn: #d4a843;--accent-alarm: #e05c5c;--pipe-liq: #3d8fd4;--pipe-vap: #7eb8e8;--pipe-2ph: #a894e8;--title-bar: #2a2d35;--font: "Segoe UI", "Noto Sans", system-ui, sans-serif;--mono: "Consolas", "Liberation Mono", monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg-0);color:var(--text);font-family:var(--font);font-size:14px}#app{min-height:100vh;display:flex;flex-direction:column}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.hmi-chrome{flex-shrink:0;border-bottom:1px solid var(--border);background:var(--bg-1)}.title-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:10px 16px;background:linear-gradient(180deg,#353840,var(--title-bar));border-bottom:1px solid #1a1b1f}.title-brand{display:flex;align-items:center;gap:12px}.app-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;background:#1f2126;border:1px solid var(--border);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--pipe-vap)}.title-main{font-size:15px;font-weight:600;letter-spacing:.01em}.title-sub{font-size:12px;color:var(--text-dim);margin-top:2px}.status-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:3px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim)}.status-pill.ok{color:var(--accent-ok);border-color:#3d6b4f}.status-pill.alarm{color:var(--accent-alarm)}.status-pill.neutral{color:var(--text)}.status-lamp{width:8px;height:8px;border-radius:50%;background:var(--accent-ok);box-shadow:0 0 6px var(--accent-ok)}.status-pill.alarm .status-lamp{background:var(--accent-alarm);box-shadow:0 0 6px var(--accent-alarm)}.status-lamp.sim{background:var(--pipe-vap);box-shadow:0 0 6px var(--pipe-vap)}.plant-clock{font-family:var(--mono);font-size:12px;color:var(--text);padding:4px 10px;background:#1a1b1f;border:1px solid var(--border);border-radius:3px}.hmi-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:8px 16px 10px}.case-select label{margin-right:6px;color:var(--text-dim);font-size:12px}.case-select select{background:var(--bg-0);color:var(--text);border:1px solid var(--border);padding:5px 8px;border-radius:3px;font-size:13px}.case-active{margin:0;font-size:12px;color:var(--text-dim)}.basis-banner{flex:1;min-width:200px;font-size:11px;color:var(--text-dim);line-height:1.4;margin:0}.electrical-stack{display:flex;flex-direction:column;gap:4px;min-width:300px}.electrical-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:3px}.electrical-bar .label{font-size:11px;color:var(--text-dim)}.electrical-bar meter{flex:1;height:12px;accent-color:var(--accent-ok)}.electrical-bar meter.warn{accent-color:var(--accent-warn)}.electrical-bar .amps{font-family:var(--mono);font-size:12px;white-space:nowrap}.electrical-load-list{margin:0;padding:4px 12px 6px;list-style:none;font-size:11px;color:var(--text-dim);background:var(--bg-1);border:1px solid var(--border);border-radius:3px;line-height:1.45}.electrical-load-list .mono{font-family:var(--mono);color:var(--text)}.pid-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 10px 8px;background:var(--bg-0)}.pid-svg{display:block;flex:1;width:100%;height:100%;min-height:520px;max-height:calc(100vh - 200px);background:linear-gradient(180deg,#1a1c21,#15171b);border:1px solid var(--border);box-shadow:inset 0 1px #ffffff0a}.pid-svg .tag-bg{fill:#2a2d34;stroke:#50555f;stroke-width:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.pid-svg .tag-leader{stroke:#5a5d64;stroke-width:1;stroke-dasharray:3 3}.pid-svg .connector-label-bg{fill:#24262c;stroke:#50555f;stroke-width:1}.pid-svg .legend-panel{fill:#24262c;stroke:#464a54}.pid-svg .legend-title{fill:var(--text);font-weight:600}.pid-svg .energy-bubble{fill:#2e2820;stroke:#8a6d2e;stroke-width:1}.stream-tag,.equip-tag-hit{cursor:pointer}.stream-tag:hover .tag-bg,.equip-tag-hit:hover .equip-outline{stroke:#c5c7cb}.pid-svg .tag-text{fill:var(--text);font-family:var(--mono)}.pid-svg .tag-live{fill:var(--text-dim);font-family:var(--mono)}.pid-svg .tag-val{fill:var(--text)}.pid-svg .equip-label{fill:var(--text);font-weight:600;font-family:var(--mono)}.pid-svg .equip-sublabel{fill:var(--text-dim)}.pid-svg .energy-text{fill:var(--accent-warn);font-family:var(--mono)}.pipe-flow{fill:none}@keyframes dash-flow{to{stroke-dashoffset:-56}}.pipe-anim{animation:dash-flow linear infinite}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--bg-1);border:1px solid var(--border);border-radius:4px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 8px 32px #00000080}.modal header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-2)}.modal header h2{margin:0;font-size:14px;font-family:var(--mono)}.modal header button{background:var(--bg-0);border:1px solid var(--border);color:var(--text);padding:4px 10px;cursor:pointer;border-radius:3px}.modal .body{padding:14px;font-size:13px;line-height:1.45}.modal table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}.modal th,.modal td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--bg-3)}.modal th{color:var(--text-dim);font-weight:500}.modal .note{font-size:11px;color:var(--accent-warn);margin-top:10px}.footer-strip{padding:6px 16px;font-size:10px;color:var(--text-dim);border-top:1px solid var(--border);background:var(--bg-1);flex-shrink:0}@media(max-width:720px){.title-bar,.hmi-toolbar{flex-direction:column;align-items:flex-start}.electrical-stack{width:100%}}