:root { --text:#fff; --muted:#ddd; --stroke:#ffffff36; --accent:#fff; --r:2px; --viewer-surface:rgba(25,25,25,.78); }
.btn { border:0; border-radius:2px; background:var(--viewer-surface); font-weight:500; justify-content:center; }
.btn:hover:not(:disabled),.btn.primary:hover:not(:disabled) { background:#444; }
.btn.primary { background:var(--viewer-surface); border:0; color:#fff; }
.btn:focus-visible,.view-item:focus-visible { outline:2px solid white; outline-offset:3px; }
.btn svg { width:23px; height:23px; stroke-width:1.7; flex:none; pointer-events:none; }
.btn[data-tooltip] { width:48px; height:48px; padding:0; position:relative; }
.btn[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 9px); right:0; background:#222; color:#fff; font-size:14px; padding:7px 10px; border-radius:2px; white-space:nowrap; opacity:0; pointer-events:none; }
.btn[data-tooltip]:hover::after,.btn[data-tooltip]:focus-visible::after { opacity:1; }
#topbar { inset:16px 16px auto 16px; }
.brand { background:var(--viewer-surface); border:0; border-radius:2px; backdrop-filter:none; padding:10px 14px; }
.brand-logo { height:30px; } .brand-sub { display:none; }
.controls { position:fixed; right:16px; bottom:16px; gap:2px; flex-wrap:nowrap; max-width:none; }
#hero { left:16px; bottom:16px; width:310px; max-width:calc(100vw - 248px); padding:14px; background:var(--viewer-surface); border:0; border-radius:2px; box-shadow:none; backdrop-filter:none; }
#hero h2 { font-size:18px; font-weight:500; } #hero p { font-size:14px; line-height:1.6; }
#hero.collapsed { padding:0 0 0 14px; width:auto; } #hero.collapsed h2 { font-size:16px; }
#hero .btn { background:transparent; } #hero .btn:hover { background:#ffffff18; }
#visitorNav { top:16px; right:16px; bottom:auto; left:auto; transform:none; display:flex; flex-direction:column; align-items:stretch; width:192px; gap:2px; max-height:calc(100dvh - 96px); overflow:visible; padding:0; background:none; border:0; border-radius:0; }
.room-group { display:flex; flex-direction:column; gap:2px; min-width:0; }
.views-toggle { justify-content:space-between; width:100%; text-align:left; font-size:14px; }
.views-toggle::after { content:'\2212'; font-size:20px; } .views-toggle[aria-expanded=false]::after { content:'+'; }
#viewList { display:flex; flex-direction:column; gap:2px; max-height:calc(100dvh - 250px); overflow:auto; }
.view-item { text-align:left; min-height:44px; border:0; border-left:3px solid transparent; background:var(--viewer-surface); color:#fff; font:inherit; font-size:14px; cursor:pointer; padding:10px 12px; border-radius:0; }
.view-item:hover { background:#444; } .view-item[aria-current=true] { border-left-color:#fff; background:rgba(65,65,65,.94); }
.tour-controls { display:flex; gap:2px; align-self:stretch; }
.tour-controls .btn[data-tooltip] { flex:1; height:44px; width:auto; min-width:0; }
.tour-controls .btn[data-tooltip]::after { right:0; top:calc(100% + 8px); bottom:auto; z-index:2; }
.tour-controls .btn[aria-pressed=true] { background:#eee; color:#222; }
#tourStatus { font-size:12px; text-align:center; padding:7px; background:var(--viewer-surface); color:#e0e0e0; min-width:0; }
#settings { top:auto; bottom:76px; right:16px; width:min(340px,calc(100% - 32px)); max-height:calc(100dvh - 100px); background:#252525; border:1px solid #555; border-radius:2px; }
#settings > .btn { background:#3b3b3b; }
#gallery { background:rgba(20,20,20,.94); backdrop-filter:blur(8px); }
#galleryHeader h3 { font-size:28px; font-weight:500; } #galleryHeader .muted { font-size:14px; }
.tile { border-radius:2px; background:#292929; border:1px solid #555; } .tile:hover { background:#353535; border-color:#fff; transform:none; }
.tileTitle { font-size:20px; font-weight:500; } .tileDesc { font-size:14px; line-height:1.6; } .tileBody::after { color:#fff; }
#loadHud .wrap { background:#252525; border:0; border-radius:2px; }.prog-label { font-size:14px; }.prog-fill { background:#fff; }
#toast { border-radius:2px; bottom:85px; background:#222; }
#joystick { bottom:84px; right:20px; }
#visitorHelp { background:#252525; border:1px solid #666; border-radius:2px; } #visitorHelp h2 { font-weight:500; }
@media (max-width:600px) {
  #topbar { top:12px; left:12px; right:12px; }.brand { padding:10px; }.brand-logo { width:94px; height:auto; }
  #visitorNav { top:12px; right:12px; bottom:auto; width:155px; flex-wrap:nowrap; gap:2px; padding:0; }
  #viewList { max-height:calc(100dvh - 280px); }
  .controls { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); gap:2px; }
  .controls .btn[data-tooltip] { width:44px; height:44px; padding:0; }
  #hero { left:12px; bottom:72px; width:min(280px,calc(100% - 112px)); max-width:calc(100% - 112px); padding:12px; }
  #hero.collapsed { padding-left:12px; } #hero h2,#hero.collapsed h2 { font-size:14px; }
  #joystick { bottom:80px; right:12px; } #settings { top:auto; bottom:68px; right:12px; max-height:calc(100dvh - 90px); }
  #loadHud { top:80px; width:calc(100% - 32px); z-index:35; }
}
@media (max-height:500px) and (orientation:landscape) {
  #hero { display:none; } #visitorNav { top:12px; bottom:auto; width:160px; padding:0; flex-wrap:nowrap; }
  #settings { top:auto; max-height:calc(100dvh - 85px); } #viewList { max-height:calc(100dvh - 180px); }
}