/* ---------- stage: the 3D dish canvas and its overlays ---------- */
#stage{position:relative; min-height:0; min-width:0}
#view{display:block; width:100%; height:100%}
.hint{position:absolute; left:14px; bottom:12px; color:var(--muted); font-size:11.5px;
      pointer-events:none; background:rgba(11,13,18,.5); padding:5px 9px; border-radius:6px}

/* view toggles, built from TOGGLE_DEFS in js/ui/toggles.js */
.togbar{position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.tog{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink2);
     background:rgba(21,24,33,.72); border:1px solid var(--line); padding:5px 9px; border-radius:7px; cursor:pointer}
.tog input{accent-color:var(--bore); margin:0}
.tog:hover{border-color:var(--line2)}
.tog.off{opacity:.42; cursor:default}          /* predicate in TOGGLE_DEFS says it does nothing here */
.tog.off:hover{border-color:var(--line)}

/* drag & drop target (js/ui/upload.js) — an overlay on the stage, so it lives here */
#drop{position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(11,13,18,.86); backdrop-filter:blur(3px)}
#drop.on{display:flex}
#drop .box{border:2px dashed var(--bore); border-radius:16px; padding:44px 60px; text-align:center; color:var(--ink)}
#drop .box b{font-size:18px} #drop .box p{color:var(--muted); margin:8px 0 0}

@media (max-width:880px){
  #stage{height:52vh}
}