:root{--bg-0: #1a1b1e;--bg-1: #25262b;--bg-2: #2c2e33;--bg-3: #373a40;--text: #c1c2c5;--text-dim: #909296;--border: #495057;--accent-ok: #4dab6d;--accent-warn: #e0a800;--accent-alarm: #e03131;--pipe-liq: #339af0;--pipe-vap: #74c0fc;--pipe-2ph: #a78bfa;--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}.hmi-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:10px 16px;background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border-bottom:1px solid var(--border)}.hmi-header h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--text)}.hmi-header .subtitle{font-size:12px;color:var(--text-dim)}.case-select label{margin-right:8px;color:var(--text-dim)}.case-select select{background:var(--bg-0);color:var(--text);border:1px solid var(--border);padding:4px 8px;border-radius:2px}.basis-banner{flex:1;min-width:200px;font-size:11px;color:var(--text-dim);line-height:1.35}.electrical-stack{display:flex;flex-direction:column;gap:4px;min-width:320px;flex:1}.electrical-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:2px}.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:2px;line-height:1.5}.electrical-load-list .mono{font-family:var(--mono);color:var(--text)}.electrical-bar .label{font-size:11px;color:var(--text-dim)}.electrical-bar meter{flex:1;height:14px;accent-color:var(--accent-ok)}.electrical-bar meter.warn{accent-color:var(--accent-warn)}.electrical-bar .amps{font-family:var(--mono);font-size:12px}.pid-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:8px 12px 10px;background:var(--bg-0)}.pid-svg{display:block;flex:1;width:100%;height:100%;min-height:480px;max-height:calc(100vh - 220px);background:#232428;border:1px solid var(--border);box-shadow:inset 0 0 40px #00000059}.stream-tag,.equip-tag-hit{cursor:pointer}.stream-tag:hover .tag-bg,.equip-tag-hit:hover .equip-outline{stroke:var(--text)}.tag-bg{fill:var(--bg-2);stroke:var(--border)}.pid-svg .tag-text{fill:var(--text);font-family:var(--mono)}.pid-svg .tag-live{fill:var(--text-dim);font-family:var(--mono)}.equip-outline{fill:var(--bg-1);stroke:var(--border);stroke-width:1.5}.pid-svg .equip-label{fill:var(--text);font-weight:600;font-family:var(--mono)}.pid-svg .equip-sublabel{fill:var(--text-dim)}.pipe-flow{fill:none;stroke-width:4;stroke-linecap:round}@keyframes dash-flow{to{stroke-dashoffset:-48}}.pipe-anim{animation:dash-flow linear infinite}.energy-bubble{fill:var(--bg-2);stroke:var(--border)}.pid-svg .energy-text{fill:var(--accent-warn);font-family:var(--mono)}.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:2px;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}.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}.modal .estimated{color:var(--accent-warn);font-size:11px}.footer-strip{padding:6px 16px;font-size:10px;color:var(--text-dim);border-top:1px solid var(--border);background:var(--bg-1)}@media(max-width:720px){.hmi-header{flex-direction:column;align-items:flex-start}.electrical-bar{width:100%}}