*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0e12;color:#dce6f0;font:14px/1.45 -apple-system,Segoe UI,Roboto,sans-serif}
#app{display:flex;flex-direction:column;height:100vh}
#hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid #1c2530;background:#0d1117;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px}.brand .logo{font-size:20px}
.brand .sub{color:#7d8ea0;font-size:12px;margin-left:6px}
.scenebtns{display:flex;gap:6px}
.scenebtns button{background:#16202b;border:1px solid #263544;color:#b9c8d8;padding:5px 12px;border-radius:6px;cursor:pointer;text-transform:capitalize}
.scenebtns button.active{background:#1e88e5;border-color:#1e88e5;color:#fff}
#stage{flex:1;display:flex;min-height:0}
#viewwrap{flex:1;position:relative;min-width:0}
#view{width:100%;height:100%;display:block}
#gridcanvas{width:100%;height:100%}
#panel{width:440px;max-width:44vw;overflow:auto;padding:14px;border-left:1px solid #1c2530;background:#0d1117}
#panel h3{margin:14px 0 6px;font-size:13px;color:#9fb4c8;letter-spacing:.02em}
.pill{background:#193b2a;color:#57d38c;font-size:10px;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}
.live .row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted #1a2430}
.live .row span{color:#7d8ea0}.live .row b{color:#e6eef7}.live .bk{font-size:11px;color:#57d38c;font-weight:600;text-align:right;max-width:250px}
.hw{background:#101a24;border:1px solid #1e2a36;padding:8px 10px;border-radius:6px;font-size:11px;color:#9fb4c8;margin-bottom:6px}
.measured table{width:100%;border-collapse:collapse;font-size:11px;margin:4px 0 10px}
.measured th,.measured td{border:1px solid #1a2530;padding:3px 6px;text-align:right}
.measured th{background:#12202c;color:#8fb6d8;font-weight:600}
.measured td:first-child,.measured th:first-child{text-align:left}
.measured .good{color:#57d38c;font-weight:700}.measured .warn{color:#e0a95a}
.note{font-size:11px;color:#8ba0b4;background:#101a24;border-left:3px solid #1e88e5;padding:8px 10px;border-radius:0 6px 6px 0}
.muted{color:#5f7183}
/* presentation: hide panels, full scene */
body.presentation #hdr,body.presentation #panel{display:none}
body.presentation #stage{height:100vh}
/* debug grid */
body.gridmode #view{display:none}body.gridmode #panel{display:none}body.gridmode #hdr{display:none}
body.gridmode #gridcanvas{display:block}
@media(max-width:820px){#stage{flex-direction:column}#panel{width:100%;max-width:100%;max-height:45vh;border-left:none;border-top:1px solid #1c2530}}

.hw .proof a{color:#57d38c;text-decoration:none;font-weight:600}.hw .proof a:hover{text-decoration:underline}
.hw.big{font-size:12px}.hw .pl{color:#7d8ea0;font-size:10.5px;margin-top:4px;line-height:1.4}
.chart{width:100%;height:auto;background:#0c141c;border:1px solid #1a2530;border-radius:6px;margin:6px 0 10px}
.chart .ln{fill:none;stroke:#57d38c;stroke-width:2}
.chart .dot{fill:#8fd3ff}
.chart .ax1{stroke:#334455;stroke-dasharray:3 3}
.chart .axl{fill:#8ba0b4;font:10px monospace}