:root,[data-theme="swiss"]{
  --bg:#ffffff;--bg-soft:#f6f7f9;--panel:#ffffff;--panel-2:#f7f8fa;
  --border:#e6e8ec;--hair:#111418;--text:#0a0c0f;--muted:#5b626b;--muted-2:#9aa0a8;
  --anchor:#1b4dff;--c-ok:#1b4dff;--c-warn:#cf8e00;--c-limit:#e5484d;--bar:#1b4dff;
  --ui:'Inter','Helvetica Neue',Arial,sans-serif;--mono:'Roboto Mono',ui-monospace,Menlo,monospace;--radius:4px;
}
[data-theme="scada"]{
  --bg:#9a9ea3;--bg-soft:#8f9398;--panel:#c9ccd0;--panel-2:#bfc3c7;
  --border:#7d8186;--hair:#3a3e43;--text:#16191c;--muted:#3d4248;--muted-2:#5d626a;
  --anchor:#2f3439;--c-ok:#2f3439;--c-warn:#b07d00;--c-limit:#b3271c;--bar:#5a6066;
  --ui:'Inter','Helvetica Neue',Arial,sans-serif;--mono:'Roboto Mono',ui-monospace,Menlo,monospace;--radius:2px;
}
[data-theme="nerd"]{
  --bg:#0b0e13;--bg-soft:#0e1218;--panel:#11161d;--panel-2:#0e131a;
  --border:#1e2632;--hair:#2a3340;--text:#d7dde6;--muted:#7b8696;--muted-2:#5b6573;
  --anchor:#5b8cff;--c-ok:#5b8cff;--c-warn:#d29922;--c-limit:#f85149;--bar:#3b7dff;
  --ui:'Roboto Mono',ui-monospace,Menlo,monospace;--mono:'Roboto Mono',ui-monospace,Menlo,monospace;--radius:3px;
}
[data-theme="noc"]{
  --bg:#06080c;--bg-soft:#0a0e14;--panel:#0c1017;--panel-2:#0a0e14;
  --border:#18202c;--hair:#243140;--text:#e8eef6;--muted:#7e8a99;--muted-2:#566273;
  --anchor:#3b82f6;--c-ok:#22c55e;--c-warn:#f0b429;--c-limit:#ef4444;--bar:#3b82f6;
  --ui:'Inter',system-ui,sans-serif;--mono:'Roboto Mono',ui-monospace,Menlo,monospace;--radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:14px;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
.app{max-width:1340px;margin:0 auto;padding:0 28px 60px}
.mono{font-family:var(--mono)}
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0 14px;background:var(--bg);border-bottom:1.5px solid var(--hair)}
.bar-left{display:flex;align-items:center;gap:18px;min-width:0}
.logo{height:26px;display:block}
.vr{width:1.5px;height:26px;background:var(--hair)}
.ctx .t{font-weight:700;font-size:14px;letter-spacing:-.2px;line-height:1.1}
.ctx .s{font-size:11.5px;color:var(--muted);margin-top:2px}
.bar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.stat{font-size:11.5px;color:var(--muted)}
.stat b{color:var(--text);font-family:var(--mono);font-weight:500}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--c-ok);transition:background .3s}
[data-theme="scada"] .live i,[data-theme="noc"] .live i{background:#2f8f4e}
/* source-state pill: live / simulated / offline */
@keyframes tf-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
.live.st-live{color:var(--c-ok)}
.live.st-live i{background:var(--c-ok);animation:tf-pulse 1.5s ease-in-out infinite}
.live.st-sim{color:var(--c-warn)}
.live.st-sim i{background:var(--c-warn);animation:none}
.live.st-off{color:var(--c-limit)}
.live.st-off i{background:var(--c-limit);animation:none}
.seg{display:inline-flex;border:1.5px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.seg button{appearance:none;border:0;background:transparent;color:var(--muted);font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:7px 12px;cursor:pointer;border-right:1.5px solid var(--hair)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--anchor);color:#fff}
[data-theme="scada"] .seg button.on{background:var(--hair);color:#e9eaec}
[data-theme="nerd"] .seg button.on{background:var(--anchor);color:#06101f}
[data-theme="noc"] .seg button.on{background:var(--anchor);color:#05080d}
.label{display:flex;align-items:baseline;gap:14px;margin:30px 0 14px}
.label h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:700}
.label .ln{flex:1;height:1.5px;background:var(--hair);opacity:.55}
.label .meta{font-size:11px;color:var(--muted-2);font-family:var(--mono)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);border:1.5px solid var(--hair);border-radius:var(--radius);margin-top:22px;overflow:hidden}
.kpi{padding:16px 18px;border-right:1.5px solid var(--hair)}
.kpi:last-child{border-right:0}
.kpi .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .v{font-family:var(--mono);font-size:27px;font-weight:600;margin-top:10px;letter-spacing:-1px;line-height:1}
.kpi .d{font-size:11px;color:var(--muted-2);margin-top:8px}
.v.ok{color:var(--c-ok)}.v.warn{color:var(--c-warn)}.v.limit{color:var(--c-limit)}
.treat{border:1.5px solid var(--hair);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.tg{display:grid;grid-template-columns:1fr 1.1fr 1fr}
.tc{padding:22px 24px}
.tc.mid{border-left:1.5px solid var(--hair);border-right:1.5px solid var(--hair);background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.tc .cap{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;gap:9px;align-items:center}
.tag{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1.5px solid var(--border);border-radius:3px;padding:2px 6px}
.tc .iso{font-family:var(--mono);font-size:44px;font-weight:600;line-height:1.05;margin-top:14px;letter-spacing:-1.5px}
.tc.in .iso{color:var(--c-limit)}.tc.out .iso{color:var(--c-ok)}
.tc .rows{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.tc .rows div{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.tc .rows b{font-family:var(--mono);font-weight:500;color:var(--text)}
.proc-t{font-size:11px;color:var(--anchor);font-weight:700;text-align:center;letter-spacing:.02em}
[data-theme="scada"] .proc-t{color:var(--text)}
.proc-s{font-size:11px;color:var(--muted);font-family:var(--mono);text-align:center}
.redux{margin-top:8px;text-align:center}
.redux .n{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--text)}
.redux .x{font-size:11px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:16px}
.card{border:1.5px solid var(--hair);border-radius:var(--radius);background:var(--panel);padding:18px}
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.chead .nm{font-weight:700;font-size:15px;letter-spacing:-.2px}
.chead .rl{font-size:11px;color:var(--muted-2);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.spill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-family:var(--mono);color:var(--muted);border:1.5px solid var(--border);border-radius:3px;padding:4px 9px;white-space:nowrap}
.spill i{width:7px;height:7px;border-radius:50%;background:var(--c-ok)}
.spill.testing i{background:var(--c-warn)}.spill.limit i{background:var(--c-limit)}
[data-theme="scada"] .spill i{background:#2f8f4e}
.ctop{display:flex;align-items:center;gap:16px;margin:16px 0 4px}
.ctop .left{flex:1;min-width:0}
.iso-h{font-family:var(--mono);font-size:38px;font-weight:600;line-height:1;letter-spacing:-1.5px}
.iso-h.ok{color:var(--c-ok)}.iso-h.warn{color:var(--c-warn)}.iso-h.limit{color:var(--c-limit)}
.iso-sub{font-size:11px;color:var(--muted-2);margin-top:8px;font-family:var(--mono)}
.spark{width:100%;height:36px;margin-top:10px;display:block}
.mrow{display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0 2px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.m{padding:10px 11px;border-right:1px solid var(--border)}
.m:last-child{border-right:0}
.m .ml{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.m .mv{font-family:var(--mono);font-size:15px;margin-top:5px;font-weight:500}
.m .mv small{font-size:10px;color:var(--muted);margin-left:2px}
.chart{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.chart .ct{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between}
.bars{display:flex;align-items:flex-end;gap:8px;height:56px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar .col{width:100%;background:var(--bar);border-radius:1px;transition:height .45s ease;min-height:2px}
.bar .um{font-size:9.5px;color:var(--muted-2);font-family:var(--mono)}
details.tbl{margin-top:12px;border-top:1px solid var(--border);padding-top:9px}
details.tbl summary{cursor:pointer;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);list-style:none}
details.tbl summary::-webkit-details-marker{display:none}
details.tbl summary::before{content:"+ ";font-family:var(--mono);color:var(--muted-2)}
details.tbl[open] summary::before{content:"\2212 "}
table{width:100%;border-collapse:collapse;margin-top:8px;font-family:var(--mono);font-size:11.5px}
td{padding:4px 2px;color:var(--muted);border-bottom:1px solid var(--border)}
td:last-child{text-align:right;color:var(--text)}
.alarms{display:none;border:1.5px solid var(--hair);border-radius:var(--radius);margin-top:22px;background:var(--panel);font-family:var(--mono);font-size:12px}
[data-theme="scada"] .alarms{display:block}
.alarms .ah{display:flex;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--muted);font-weight:700;font-family:var(--ui)}
.alarms .arow{display:flex;gap:14px;padding:8px 14px;border-bottom:1px solid var(--border);align-items:center}
.alarms .arow:last-child{border-bottom:0}
.alarms .sev{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.alarms .sev.warn{background:var(--c-warn)}.alarms .sev.limit{background:var(--c-limit)}.alarms .sev.ok{background:#2f8f4e}
#view-standard{display:block}
#view-nerd,#view-noc{display:none}
[data-theme="nerd"] #view-standard,[data-theme="noc"] #view-standard{display:none}
[data-theme="nerd"] #view-nerd{display:block}
[data-theme="noc"] #view-noc{display:block}
.matrix{border:1.5px solid var(--hair);border-radius:var(--radius);overflow:auto;font-family:var(--mono);font-size:12.5px;background:var(--panel)}
.matrix table{width:100%;border-collapse:collapse;margin:0}
.matrix th,.matrix td{padding:6px 12px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
.matrix th{position:sticky;top:0;background:var(--panel-2);color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.matrix td.k{text-align:left;color:var(--muted)}
.matrix td.v{color:var(--text)}
.matrix td.ok{color:var(--c-ok)}.matrix td.warn{color:var(--c-warn)}.matrix td.limit{color:var(--c-limit)}
.matrix tr:hover td{background:var(--panel-2)}
.raw{margin-top:16px;border:1.5px solid var(--hair);border-radius:var(--radius);background:var(--panel)}
.raw .rh{padding:9px 14px;border-bottom:1px solid var(--border);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;justify-content:space-between}
.raw pre{margin:0;padding:14px;font-family:var(--mono);font-size:11.5px;color:var(--muted);max-height:340px;overflow:auto;line-height:1.5}
.noc-hd{display:flex;align-items:center;gap:18px;border:1.5px solid var(--hair);border-radius:var(--radius);background:var(--panel);padding:16px 18px;margin-top:22px;flex-wrap:wrap}
.noc-sys{display:flex;align-items:center;gap:12px;padding-right:18px;border-right:1px solid var(--border)}
.noc-sys .big{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:.02em}
.noc-sys .lab{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.noc-sys.ok .big{color:var(--c-ok)}.noc-sys.warn .big{color:var(--c-warn)}.noc-sys.limit .big{color:var(--c-limit)}
.noc-led{width:14px;height:14px;border-radius:50%}
.noc-stats{display:flex;gap:26px;flex-wrap:wrap;flex:1}
.noc-st .l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.noc-st .v{font-family:var(--mono);font-size:20px;font-weight:600;margin-top:4px}
.noc-clock{font-family:var(--mono);font-size:14px;color:var(--muted)}
.noc-grid{display:grid;grid-template-columns:1fr 330px;gap:14px;margin-top:14px}
.noc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-content:start}
.noc-tile{border:1.5px solid var(--hair);border-top:3px solid var(--c-ok);border-radius:var(--radius);background:var(--panel);padding:14px}
.noc-tile.warn{border-top-color:var(--c-warn)}.noc-tile.limit{border-top-color:var(--c-limit)}
.noc-tile .tn{font-weight:700;font-size:13px}
.noc-tile .tr{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-top:2px}
.noc-tile .tiso{font-family:var(--mono);font-size:30px;font-weight:600;margin-top:10px;letter-spacing:-1px}
.noc-tile .tiso.ok{color:var(--c-ok)}.noc-tile .tiso.warn{color:var(--c-warn)}.noc-tile .tiso.limit{color:var(--c-limit)}
.noc-tile .tmeta{display:flex;gap:14px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.noc-tile .tspark{width:100%;height:30px;margin-top:8px;display:block}
.noc-side{display:flex;flex-direction:column;gap:14px}
.noc-panel{border:1.5px solid var(--hair);border-radius:var(--radius);background:var(--panel)}
.noc-panel .ph{padding:10px 14px;border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;display:flex;justify-content:space-between}
.noc-log{max-height:362px;overflow:auto;font-family:var(--mono);font-size:11.5px}
.noc-log .ev{display:flex;gap:10px;padding:7px 14px;border-bottom:1px solid var(--border);align-items:center}
.noc-log .ev:last-child{border-bottom:0}
.noc-log .ts{color:var(--muted-2);flex:0 0 auto}
.noc-log .sd{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.noc-log .sd.ok{background:var(--c-ok)}.noc-log .sd.warn{background:var(--c-warn)}.noc-log .sd.limit{background:var(--c-limit)}.noc-log .sd.info{background:var(--anchor)}
.noc-avail{padding:18px 14px;text-align:center}
.noc-avail .pct{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--c-ok)}
.noc-avail .sub{font-size:11px;color:var(--muted);margin-top:4px}
.noc-trend{border:1.5px solid var(--hair);border-radius:var(--radius);background:var(--panel);margin-top:14px;padding:14px}
.noc-trend .th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;display:flex;justify-content:space-between;margin-bottom:10px}
.noc-trend svg{width:100%;height:90px;display:block}
.noc-leg{display:flex;gap:16px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.noc-leg span{display:inline-flex;align-items:center;gap:6px}
.noc-leg i{width:12px;height:2px;display:inline-block}
.foot{margin-top:32px;color:var(--muted-2);font-size:11px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--border);padding-top:16px}
.legend{display:flex;gap:18px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
@media(max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(even){border-right:0}.tg{grid-template-columns:1fr}.tc.mid{border-left:0;border-right:0;border-top:1.5px solid var(--hair);border-bottom:1.5px solid var(--hair)}.noc-grid{grid-template-columns:1fr}}