:root{--bg:#0b0f14;--panel:#121821;--cu:#c98a2b;--cu2:#3a7bd5;--gnd:#4caf50;--txt:#d7e0ea;--dim:#7d8ba0;--acc:#f0b429;--hl:#ff4d6d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:13px/1.4 ui-monospace,Menlo,Consolas,monospace}
#app{display:flex;flex-direction:column;height:100vh}
#hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:linear-gradient(90deg,#0e1620,#0b0f14);border-bottom:1px solid #1d2938}
h1{font-size:15px;margin:0;letter-spacing:.5px;color:var(--acc)}
.sub{color:var(--dim);font-weight:400;font-size:11px}
#viewbtns{display:flex;gap:6px}
#viewbtns button{background:#182230;color:var(--txt);border:1px solid #26374d;padding:5px 10px;border-radius:5px;cursor:pointer;font:inherit}
#viewbtns button.active{background:var(--cu);color:#111;border-color:var(--cu)}
main{display:flex;flex:1;min-height:0}
#stage{flex:1;padding:10px;overflow:auto;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#0f1621,#080b10)}
#viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#viewport svg{max-width:100%;max-height:100%;background:#0a2018;border:1px solid #1d3a2c;border-radius:6px}
#panel{width:320px;background:var(--panel);border-left:1px solid #1d2938;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.card{background:#0e141d;border:1px solid #1d2938;border-radius:7px;padding:10px}
.card h2{font-size:12px;margin:0 0 8px;color:var(--acc);letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center}
.badge{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--gnd);color:#05130a;font-weight:700}
.badge.stop{background:var(--hl);color:#fff}
#hud{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;font-size:11px}
#hud .k{color:var(--dim)}
#hud .v{color:#e8f0ff;text-align:right;font-variant-numeric:tabular-nums}
#hud .v.hi{color:var(--acc)}
#ctrls{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
#ctrls button{flex:1;min-width:70px;background:#182230;color:var(--txt);border:1px solid #26374d;padding:7px;border-radius:5px;cursor:pointer;font:inherit}
#ctrls button.on{background:var(--gnd);color:#05130a;border-color:var(--gnd)}
#ctrls button.estop{background:#2a1116;border-color:#5a2130;color:#ff8fa3}
#ctrls button.estop.on{background:var(--hl);color:#fff;border-color:var(--hl)}
select,input,button{font:inherit}
#netsel{width:100%;background:#0a0f16;color:var(--txt);border:1px solid #26374d;padding:6px;border-radius:5px}
#netinfo,#boardinfo{font-size:11px;color:var(--dim);margin-top:8px;line-height:1.6}
#netinfo b,#boardinfo b{color:#e8f0ff}
.row{display:flex;gap:6px;margin:8px 0}
#resetbtn,#gerberbtn{background:var(--cu2);color:#fff;border:none;padding:7px 10px;border-radius:5px;cursor:pointer}
#gerberbtn{width:100%;background:#243244}
.ok{color:var(--gnd)}.bad{color:var(--hl)}
body.presentation #panel,body.presentation #viewbtns,body.presentation .sub{display:none}
body.presentation #stage{padding:0}
@media(max-width:720px){main{flex-direction:column}#panel{width:100%;border-left:none;border-top:1px solid #1d2938}}