:root {
  --bg: #b9bdc1; --canvas: #e9e8e2; --panel: #f3f2ee; --ink: #1d1f22; --muted: #5d636a;
  --val-bg: #fbf5a6; --val-bd: #b8ae4a; --run: #2fb34a; --stop: #9aa0a6; --fault: #d62f2f;
  --start: #f2c230; --gas: #c9c26a; --meal: #d9a3a3; --air: #2f5fd0; --coal: #5b3b2a;
  --steel: #7d858c; --steel2: #c5cacf; --accent: #3a78c2; --nav: #d9dcdf;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 13px/1.3 "Segoe UI", Tahoma, Arial, sans-serif; }
#app { display: grid; grid-template-columns: 118px 1fr; grid-template-rows: 1fr 64px; height: 100vh; }
#nav { grid-row: 1 / 3; background: var(--nav); padding: 8px 6px; display: flex; flex-direction: column; gap: 5px;
  border-right: 1px solid #8d9297; overflow-y: auto; }
.brand { font-weight: 800; font-size: 18px; text-align: center; margin: 2px 0 8px; letter-spacing: .5px; }
.brand span { color: #d62f2f; }
#nav button { text-align: left; border: 1px solid #8d9297; background: linear-gradient(#f7f7f7, #d4d7da);
  border-radius: 2px; padding: 6px 7px; cursor: pointer; font: inherit; border-top: 6px solid var(--stop); }
#nav button.active { border-top-color: #f2e33a; background: linear-gradient(#fffbd0, #efe69b); }
#nav button.trainer { border-top-color: #7fb3e8; }
#nav .sep { flex: 1; min-height: 8px; }
#nav b { color: #fff; background: var(--fault); border-radius: 8px; padding: 0 5px; font-size: 11px; }
#main { position: relative; overflow: auto; padding: 8px; }
.screen { display: none; height: 100%; }
.screen.active { display: block; }
svg { width: 100%; height: 100%; max-height: calc(100vh - 90px); background: var(--canvas); border: 1px solid #9ca1a6; }
#alarm-banner { position: absolute; top: 10px; right: 16px; z-index: 5; max-width: 45%; }
#alarm-banner div { background: var(--fault); color: #fff; padding: 3px 8px; margin-bottom: 2px; border-radius: 2px;
  font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
#alarm-banner div.ack { background: #b76a6a; }
#footer { grid-column: 2; background: #c8ccd0; border-top: 1px solid #8d9297; display: flex; align-items: center;
  gap: 14px; padding: 4px 10px; overflow-x: auto; }
.units { display: grid; grid-template-columns: repeat(2, auto); gap: 1px 8px; font-size: 11px; }
.units span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--stop); margin-right: 4px; vertical-align: -1px; }
.units span.on::before { background: var(--run); }
.units span.fault::before { background: var(--fault); }
.runbtn { width: 58px; height: 30px; border-radius: 15px; border: 1px solid #555; background: #444; color: #fff; cursor: pointer; }
.runbtn.on { background: var(--run); }
.clock { font-size: 11px; background: #eee; border: 1px solid #999; padding: 2px 6px; }
.clock #simclock { font: 600 15px monospace; }
.clock select { font-size: 11px; }
.trainerbtn { border: 1px solid #777; background: #f3f3f3; padding: 6px 10px; cursor: pointer; font-weight: 700; }
.kpis { display: flex; gap: 10px; font-size: 11px; white-space: nowrap; }
.kpis div { background: #eee; border: 1px solid #aaa; padding: 2px 6px; }
.kpis b { font-size: 13px; }
.fc { font-size: 11px; }
.logo { margin-left: auto; font: 900 20px Arial; letter-spacing: 1px; color: #333; }
.logo span { color: #d62f2f; font-size: 12px; vertical-align: top; }
/* svg mimic */
.val rect { fill: var(--val-bg); stroke: var(--val-bd); }
.val text { font: 12px Arial; fill: #111; }
.val.alarm rect { fill: #ffb3b3; stroke: var(--fault); }
.lbl { font: 11px Arial; fill: #333; }
.title { font: 700 14px Arial; fill: #222; }
.pipe-gas { stroke: var(--gas); fill: none; }
.pipe-meal { stroke: var(--meal); fill: none; }
.pipe-air { stroke: var(--air); fill: none; }
.pipe-coal { stroke: var(--coal); fill: none; }
.equip { cursor: pointer; }
.equip:hover { filter: brightness(1.15) drop-shadow(0 0 3px #3a78c2); }
.st-RUNNING { fill: var(--run); }
.st-STOPPED { fill: var(--stop); }
.st-FAULT { fill: var(--fault); }
.st-STARTING, .st-STOPPING { fill: var(--start); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.btnbox rect { fill: #e9eef6; stroke: #5572a5; }
.btnbox text { font: 700 11px Arial; fill: #1d3c78; }
.btnbox:hover rect { fill: #cfe0fb; }
.sbtn rect { fill: #fff; stroke: #333; }
.sbtn text { font: 700 11px Arial; }
.sbtn.auto rect { fill: #cfe7ff; }
/* panels */
.panel { background: var(--panel); border: 1px solid #9ca1a6; padding: 10px 12px; margin-bottom: 8px; }
.panel h3 { margin: 4px 0 8px; font-size: 14px; }
.panel h3 small { color: var(--muted); font-weight: 400; }
.panel.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
canvas { width: 100%; background: #fff; border: 1px solid #c3c6c9; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
input, select, button { font: inherit; }
button { cursor: pointer; }
table.grid { border-collapse: collapse; width: 100%; font-size: 12px; background: #fff; }
table.grid th, table.grid td { border: 1px solid #c9ccd0; padding: 3px 6px; text-align: left; }
table.grid th { background: #e3e6e9; position: sticky; top: 0; }
table.grid tr.p1 td { color: #b00; font-weight: 600; }
table.grid tr.unack td:first-child { border-left: 4px solid var(--fault); }
#trend-tags label { margin-right: 6px; white-space: nowrap; font-size: 12px; }
#trend-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 12px; }
#trend-legend span i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 4px; }
.dist { display: grid; grid-template-columns: 1fr 110px 60px 60px; gap: 4px 6px; align-items: center; margin-bottom: 10px; }
.dist h4 { grid-column: 1 / -1; margin: 8px 0 2px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
.dist input { width: 100%; }
.dist .cur { font-family: monospace; font-size: 12px; }
#group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gcard { background: #fff; border: 1px solid #b3b7bb; padding: 8px; }
.gcard h4 { margin: 0 0 6px; display: flex; justify-content: space-between; }
.gcard .state { font-size: 11px; padding: 1px 6px; border-radius: 2px; color: #fff; }
.gcard .drv { display: flex; justify-content: space-between; font-size: 12px; border-top: 1px dotted #ccc; padding: 2px 0; }
.badge { padding: 0 6px; border-radius: 2px; color: #fff; font-size: 11px; }
.b-RUNNING { background: var(--run); } .b-STOPPED { background: var(--stop); } .b-FAULT { background: var(--fault); }
.b-STARTING, .b-STOPPING { background: #d9a400; }
/* faceplate */
#faceplate { position: fixed; z-index: 50; background: #eceff2; border: 1px solid #50565c; box-shadow: 0 6px 22px rgba(0,0,0,.35);
  width: 250px; font-size: 12px; }
#faceplate.hidden { display: none; }
#faceplate .fp-head { background: linear-gradient(#5c8fd6, #3c6db5); color: #fff; padding: 5px 8px; cursor: move;
  display: flex; justify-content: space-between; font-weight: 600; }
#faceplate .fp-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
#faceplate .fp-body button { padding: 5px; background: linear-gradient(#fafafa, #dcdfe2); border: 1px solid #888; font-weight: 600; }
#faceplate .fp-body button.danger { color: #b00; }
#faceplate .kv { display: flex; justify-content: space-between; }
#faceplate .msg { color: #b00; min-height: 14px; }
#hb-box table { width: 520px; }
#hb-box td.num { text-align: right; font-family: monospace; }
.bar { height: 10px; background: var(--accent); display: inline-block; vertical-align: middle; }
#gdefs { position: absolute; width: 0 !important; height: 0 !important; border: 0; pointer-events: none; overflow: hidden; }
#toasts { position: fixed; bottom: 76px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 6px; }
.toast { background: #3b2020; color: #fff; padding: 8px 12px; border-left: 4px solid var(--fault); border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); max-width: 420px; font-size: 12px; }
.fc { font-size: 11px; max-width: 360px; }
.fc-row { display: flex; gap: 4px; align-items: center; }
.fc-msg { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.fc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--stop); display: inline-block; }
.fc-dot.fc-live { background: var(--run); }
.fc-dot.fc-building, .fc-dot.fc-checking { background: var(--start); animation: blink 1s steps(2) infinite; }
.fc-dot.fc-error { background: var(--fault); }