:root{
  --panel-bg: rgba(0,0,0,.38);
  --panel-brd: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --maxw: 1100px;
  --topbar-h: 86px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#000;
  color:var(--text);
  overflow-y:auto;
  overflow-x:hidden;
}

/* TŁO 360 */
#pano{
  position: fixed;
  inset: 0;
  z-index: 0;
  background:#000;
}

/* Przyciemnienie + klimat */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(0,0,0,.08), rgba(0,0,0,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.18), rgba(0,0,0,.62));
  backdrop-filter: blur(3px);
}

/* Zanik treści pod belką (gdy topbar jest sticky) */
.overlayFadeTop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--topbar-h) + 74px);
  z-index: 3; /* poniżej topbar(4), powyżej treści(2) */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.70) 40%,
    rgba(0,0,0,0.00) 100%
  );
}

/* LOADER */
.loader{
  position: fixed;
  inset: 0;
  z-index: 5;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .25s ease;
}
.loader.hidden{ opacity:0; pointer-events:none; }
.spinner{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.9);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }