:root { --bg:#070A12; --card:#0F1526; --txt:#EAF0FF; --muted:#9AA7C7; --acc:#3DA2FF; }
*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:var(--bg); color:var(--txt); }
.topbar{ display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand{ font-weight:800; letter-spacing:.5px; }
.brand span{ color:var(--acc); }
.layout{ display:grid; grid-template-columns: 1fr 340px; gap:14px; padding:14px; }
.stage{ position:relative; background:#000; border-radius:16px; overflow:hidden; min-height:70vh; }
#vrCanvas{ width:100%; height:100%; display:block; }
#instructorVideo{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; }
.hud{ position:absolute; left:12px; bottom:12px; display:flex; gap:8px; flex-wrap:wrap; }
button{ background:rgba(255,255,255,.08); color:var(--txt); border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:12px; cursor:pointer; }
button:disabled{ opacity:.45; cursor:not-allowed; }
.panel{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px; }
.hint{ color:var(--muted); margin-top:0; }
.row{ display:grid; gap:6px; margin:10px 0; }
input,select{ background:#0B1020; color:var(--txt); border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:12px; }
.log{ background:#0B1020; border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:10px; height:240px; overflow:auto; color:#CFE1FF; }
.status{ color:var(--muted); }
@media (max-width: 980px){ .layout{ grid-template-columns:1fr; } .stage{ min-height:60vh; } }