:root{--accent:#c2185b;--bg:#111;--bar:rgba(20,20,24,.78);--fg:#fff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);font:14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg)}
#pano{position:absolute;inset:0}
#pano canvas{outline:none}

#topbar{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:8px;padding:0 10px;background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,0));z-index:20;pointer-events:none}
#topbar>*{pointer-events:auto}
.iconbtn{width:38px;height:38px;border:0;border-radius:50%;background:var(--bar);color:var(--fg);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;backdrop-filter:blur(6px)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.active{background:var(--accent)}
.iconbtn:disabled{opacity:.35;cursor:default}
.hs.down .ring{border-radius:12px;background:rgba(40,80,160,.55)}
#floors{display:flex;gap:4px;background:var(--bar);border-radius:20px;padding:4px;backdrop-filter:blur(6px)}
#floors button{border:0;background:transparent;color:#ddd;padding:6px 12px;border-radius:16px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap}
#floors button.active{background:var(--accent);color:#fff}
#title{flex:1;text-align:center;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#sidebar{position:absolute;top:0;bottom:0;left:0;width:260px;background:rgba(14,14,18,.92);backdrop-filter:blur(10px);z-index:30;transform:translateX(-100%);transition:transform .25s;overflow-y:auto;padding:60px 10px 20px}
#sidebar.open{transform:none}
.floorhead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999;margin:14px 6px 6px}
.scene{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;cursor:pointer;color:#ddd}
.scene:hover{background:rgba(255,255,255,.08)}
.scene.active{background:var(--accent);color:#fff}
.scene img{width:72px;height:36px;object-fit:cover;border-radius:4px;flex:0 0 auto;background:#222}
.scene span{font-size:12px;line-height:1.25}

#hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--bar);padding:6px 14px;border-radius:16px;font-size:12px;color:#ccc;z-index:20;transition:opacity 1s;pointer-events:none}
#hint.fade{opacity:0}

/* hotspots */
.hs{position:relative;width:44px;height:44px;margin:-22px 0 0 -22px;cursor:pointer}
.hs .ring{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.9);backdrop-filter:blur(3px);display:grid;place-items:center;transition:transform .15s,background .15s;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.hs:hover .ring{transform:scale(1.15);background:var(--accent)}
.hs .ring svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hs .tip{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);padding:4px 9px;border-radius:6px;white-space:nowrap;font-size:12px;opacity:0;transition:opacity .15s;pointer-events:none}
.hs:hover .tip{opacity:1}
.hs.back .ring{width:36px;height:36px;margin:4px;border-color:rgba(255,255,255,.6);background:rgba(0,0,0,.25)}
.hs.up .ring{border-radius:12px;background:rgba(194,24,91,.55)}
.hs.up .tip{top:48px}

#editbox{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.8);color:#9f9;font:12px/1.5 ui-monospace,Menlo,monospace;padding:8px 10px;border-radius:6px;z-index:40;white-space:pre}

#floors button .short{display:none}
@media (max-width:640px){
  #title{display:none}
  #topbar{gap:6px;padding:0 8px}
  .iconbtn{width:36px;height:36px}
  #floors{min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  #floors::-webkit-scrollbar{display:none}
  #floors button{padding:6px 8px;font-size:12px;scroll-snap-align:start}
  #floors button .full{display:none}
  #floors button .short{display:inline}
  #sidebar{width:min(260px,85vw)}
}

.scene b{font-weight:600}
.scene span{color:inherit}