:root{
  --bg:#0e1116; --fg:#e6edf3; --mut:#9aa7b2; --panel:#111827; --line:#243041; --acc:#7cc5ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); display:flex; flex-direction:column}
header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:#0b121f}
h1{margin:0; font-size:18px}
.dim{color:var(--mut)}
.controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
button{background:#1f2937; color:var(--fg); border:1px solid #2a3442; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600}
button:hover{background:#243041}
button:disabled{opacity:.5; cursor:not-allowed}
.badge{border:1px solid #2a3442; padding:6px 10px; border-radius:12px; display:flex; gap:8px; align-items:center}
.badge.file input{display:none}

main{display:grid; grid-template-columns: 1fr 320px; gap:16px; padding:16px; max-width:1200px; margin:0 auto; width:100%}
#stage{position:relative; background:#0a1320; border:1px solid #223044; border-radius:12px; overflow:hidden; display:grid; place-items:center}
#video{display:none}
#canvas{width:100%; height:auto; display:block}
#loading{position:absolute; inset:auto 12px 12px 12px; background:rgba(0,0,0,.4); border:1px solid #2a3442; border-radius:10px; padding:8px 10px; font-size:14px}

aside{background:var(--panel); border:1px solid #223044; border-radius:12px; padding:12px}
aside h2,h3{margin:6px 0}
#status{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:#0a1320; border:1px solid #223044; padding:6px 8px; border-radius:8px; margin-bottom:10px}
#exprList{margin:0; padding-left:18px}

footer{padding:10px 16px; border-top:1px solid #1f2730; color:var(--mut); margin-top:auto}

@media (max-width: 980px){
  main{grid-template-columns:1fr}
}