:root { --bg:#0d1117; --fg:#e6edf3; --muted:#9aa4b2; --ok:#1f883d; --warn:#f0ad4e; --bad:#da3633; --pri:#2f81f7; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:#0d1117;color:#e6edf3}
header{padding:12px 16px;border-bottom:1px solid #222;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
main{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;padding:16px}
#stage{position:relative;aspect-ratio:4/3;background:#000;border-radius:10px;overflow:hidden;border:1px solid #222}
#stage video, #overlay { position:absolute; inset:0; width:100%; height:100%; }
#three { position:relative; width:100%; height:360px; background:#000; border-radius:8px }
#three canvas { position:static !important; display:block; }

.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button,.pill,select,input[type=range]{background:#161b22;color:#e6edf3;border:1px solid #30363d;border-radius:8px;padding:8px 12px;cursor:pointer}
button.primary{background:#2f81f7;border-color:#2f81f7;color:white}
button.ok{background:#1f883d;border-color:#1f883d;color:white}
.pill{display:inline-flex;align-items:center;gap:6px}
.faces{display:grid;grid-template-columns:repeat(3,90px);gap:10px}
.face{background:#0b0d11;border:1px solid #222;border-radius:8px;padding:8px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.tile{aspect-ratio:1;border-radius:4px;border:1px solid #1d2127;display:flex;align-items:center;justify-content:center;font-weight:700}
.muted{color:#9aa4b2}
.log{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:#0b0d11;border:1px solid #222;border-radius:8px;padding:8px;max-height:200px;overflow:auto}
#hud{position:absolute;left:8px;bottom:8px;background:#0009;padding:6px 8px;border-radius:8px;font-size:12px;max-width:70%}
#statusBar{position:absolute;right:8px;bottom:8px;background:#0009;padding:6px 8px;border-radius:8px;font-size:12px;text-align:right}
.meter{height:8px;background:#1a1f2a;border-radius:4px;overflow:hidden}
.meter>div{height:100%;background:linear-gradient(90deg,#1f883d,#8cc665);width:0%}
.badge{padding:2px 6px;border-radius:999px;background:#111;border:1px solid #333;font-size:12px}
#viewer{background:#0b0d11;border:1px solid #222;border-radius:10px;padding:10px}

#editor{background:#0b0d11;border:1px solid #222;border-radius:10px;padding:10px;margin-top:12px}
#editorFaces{display:grid;grid-template-columns:repeat(3,120px);gap:10px}
.edFace{background:#0e1218;border:1px solid #222;border-radius:8px;padding:8px}
.edTitle{display:flex;justify-content:space-between;align-items:center}
.edGrid{display:grid;grid-template-columns:repeat(3,36px);gap:4px;margin-top:6px}
.edTile{width:36px;height:36px;border-radius:4px;border:1px solid #1d2127;display:flex;align-items:center;justify-content:center;font-weight:900;cursor:pointer}
.edTile.lock{outline:2px dashed #888;cursor:not-allowed}
.counts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.count{padding:2px 6px;border-radius:999px;border:1px solid #333}

#netWrap{background:#0b0d11;border:1px solid #222;border-radius:10px;padding:10px;margin-top:12px}
#netGrid{display:grid;grid-template-columns:repeat(4, 114px);grid-auto-rows:114px;gap:6px;justify-content:center}
.netCell{background:#0e1218;border:1px solid #222;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px}
.netTitle{font-size:12px;color:#9aa4b2;margin-bottom:4px}
.net3{display:grid;grid-template-columns:repeat(3, 30px);gap:3px}
.netTile{width:30px;height:30px;border-radius:4px;border:1px solid #1d2127}

.card{background:#0b0d11;border:1px solid #222;border-radius:10px;padding:10px;margin-top:12px}
.tunerGrid{display:grid;grid-template-columns:repeat(3, minmax(220px,1fr));gap:12px;margin-top:8px}
.tcol label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.tcol input[type=range]{flex:1}
.tcol .val{width:48px;text-align:right;color:#9aa4b2}
.tsec{font-weight:600;margin-bottom:4px;color:#c9d1d9}