:root{--bg:#070a14;--panel:#0b1020;--line:#1e2a44;--txt:#c8d4ea;--dim:#6b7a99;--acc:#4ea8ff;--ok:#39d98a;--warn:#ffb020;--bad:#ff5c5c}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex;flex-direction:column;height:100vh;overflow:hidden}
header{display:flex;align-items:center;gap:14px;flex:none;padding:8px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1424,#080c16)}
header h1{font-size:14px;margin:0;font-weight:600;letter-spacing:.04em}
header h1 span{color:var(--acc)}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.badge.live{border-color:#1d5c3a;color:var(--ok)}
.badge.scn{border-color:#1e2a44;color:var(--acc)}
main{flex:1;display:grid;gap:8px;padding:8px;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;position:relative;min-height:0;min-width:0;overflow:hidden}
.card canvas{display:block;width:100%;height:100%}
footer{flex:none;display:grid;gap:8px;padding:0 8px 8px;grid-template-columns:330px 1fr 1fr;height:196px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.panel h2{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin:0 0 7px;font-weight:600;flex:none}
.tele{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12px;overflow:auto}
.tele .k{color:var(--dim)}
.tele .v{text-align:right;font-variant-numeric:tabular-nums}
.tele .v.warn{color:var(--warn)}
.tele .v.bad{color:var(--bad)}
.tele .v.ok{color:var(--ok)}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
button{font:inherit;font-size:12px;cursor:pointer;background:#131c30;color:var(--txt);border:1px solid var(--line);padding:5px 10px;border-radius:6px;transition:background .12s,border-color .12s}
button:hover{background:#1a2740;border-color:#2c3d5f}
button.on{background:var(--acc);color:#04101f;border-color:var(--acc);font-weight:600}
button.fault{color:var(--warn)}
button.fault.on{background:var(--bad);color:#1a0000;border-color:var(--bad);font-weight:600}
button.scn{color:var(--acc)}
#log{flex:1;overflow-y:auto;font-size:11px;line-height:1.5;color:var(--dim);min-height:0}
#log div{border-bottom:1px solid #0f1728;padding:2px 0;white-space:pre-wrap}
#log div.hi{color:var(--warn)}
#log div.bad{color:var(--bad)}
#log div.ok{color:var(--ok)}
.sub{color:var(--dim);font-size:11px}
@media (max-width:1100px){main{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}footer{grid-template-columns:1fr 1fr;height:auto;max-height:260px}}