:root { --bg:#0e1116; --card:#171c24; --fg:#e6e9ef; --mut:#8b95a7; --acc:#4f8cff; --ok:#39d98a; --err:#ff6b6b; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; -webkit-tap-highlight-color:transparent; }
#topbar { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; font-weight:700;
  border-bottom:1px solid #222a36; }
#topbar .logo { color:var(--acc); font-size:1.3rem; }
#topbar small { color:var(--mut); font-weight:400; margin-left:.25rem; }
#app { position:relative; height:calc(100% - 49px); }
.view { display:none; position:absolute; inset:0; }
.view.active { display:flex; }
#view-upload, #view-progress { align-items:center; justify-content:center; padding:1rem; overflow:auto; }
.card { background:var(--card); border:1px solid #232b38; border-radius:16px; padding:1.5rem;
  width:min(560px,100%); }
h1 { font-size:1.5rem; margin:.2rem 0 .6rem; }
h2 { margin:.2rem 0 1rem; }
.muted { color:var(--mut); } .small { font-size:.85rem; }
#drop { display:block; border:2px dashed #33405a; border-radius:14px; padding:2rem 1rem; text-align:center;
  cursor:pointer; transition:.15s; margin:1rem 0; }
#drop:hover, #drop.drag { border-color:var(--acc); background:#1b2330; }
#drop .big { font-size:2.4rem; color:var(--acc); }
button { font:inherit; border:none; border-radius:10px; padding:.7rem 1.1rem; cursor:pointer; }
button.ghost { background:transparent; color:var(--fg); border:1px solid #33405a; width:100%; }
button.ghost:hover { border-color:var(--acc); }
#stages { list-style:none; padding:0; margin:0 0 1rem; }
#stages li { display:flex; align-items:center; gap:.6rem; padding:.35rem 0; color:var(--mut); }
#stages li .dot { width:18px; height:18px; border-radius:50%; border:2px solid #33405a; flex:0 0 auto; }
#stages li.active { color:var(--fg); } #stages li.active .dot { border-color:var(--acc); }
#stages li.done { color:var(--ok); } #stages li.done .dot { background:var(--ok); border-color:var(--ok); }
.bar { height:8px; background:#222a36; border-radius:6px; overflow:hidden; }
#bar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--acc),#6fa8ff); transition:width .4s; }
#progress-msg { margin:.6rem 0; }
#progress-msg.error { color:var(--err); }
pre#log { max-height:180px; overflow:auto; background:#0b0e13; padding:.6rem; border-radius:8px;
  font-size:.75rem; color:#9fb0c8; white-space:pre-wrap; }
details { margin:.5rem 0 1rem; }
#view-viewer { padding:0; }
#viewer-canvas { position:absolute; inset:0; }
#viewer-canvas canvas { display:block; }
#hud-help { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#000a; color:#fff;
  padding:.4rem .8rem; border-radius:20px; font-size:.8rem; pointer-events:none; }
#btn-recenter { position:absolute; right:14px; bottom:14px; width:48px; height:48px; border-radius:50%;
  background:#000a; color:#fff; font-size:1.3rem; }
#btn-new { position:absolute; left:14px; bottom:14px; width:auto; background:#000a; color:#fff;
  border:1px solid #33405a; }
#joystick { position:absolute; left:18px; bottom:78px; width:120px; height:120px; border-radius:50%;
  background:#ffffff14; border:1px solid #ffffff22; display:none; touch-action:none; }
#joystick-knob { position:absolute; left:35px; top:35px; width:50px; height:50px; border-radius:50%;
  background:#ffffff55; }
body.touch #joystick { display:block; }
body.touch #hud-help { font-size:.72rem; }