.pano-module { width: min(1220px, 100%); margin: 0 auto; display: grid; gap: 12px; }
.pano-stage { overflow: hidden; border-radius: 8px; background: #111; box-shadow: 0 2px 18px rgba(0,0,0,.22); }
.pano-viewer-shell { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; background: #090909; touch-action: none; user-select: none; }
.pano-canvas, .pano-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pano-canvas { cursor: grab; }
.pano-viewer-shell.dragging .pano-canvas { cursor: grabbing; }
.pano-fallback { object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.pano-viewer-shell.fallback .pano-fallback { opacity: 1; }
.pano-loading { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; letter-spacing: .02em; background: linear-gradient(120deg, rgba(18,18,18,.92), rgba(38,38,38,.78)); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.pano-viewer-shell.loading .pano-loading { opacity: 1; }
.pano-hint { position: absolute; left: 14px; bottom: 14px; border-radius: 999px; padding: 7px 11px; background: rgba(0,0,0,.58); color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; line-height: 16px; backdrop-filter: blur(10px); pointer-events: none; }
.pano-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; color: #333; font-size: 14px; font-weight: 700; line-height: 20px; background: rgba(255,255,255,.34); }
.pano-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pano-filmstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pano-thumb { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 8px; padding: 0; background: #d8d8d8; box-shadow: 0 1px 10px -1px rgba(0,0,0,.22); cursor: pointer; }
.pano-thumb.active { border-color: #292929; box-shadow: 0 2px 16px rgba(0,0,0,.32); }
.pano-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .28s ease; }
.pano-thumb:hover img, .pano-thumb:focus-visible img { transform: scale(1.05); }
.pano-thumb:focus-visible { outline: none; border-color: #292929; }
.pano-thumb-label { position: absolute; left: 8px; right: 8px; bottom: 8px; overflow: hidden; border-radius: 5px; padding: 4px 7px; background: rgba(0,0,0,.66); color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .pano-module { gap: 10px; }
  .pano-viewer-shell { min-height: 260px; aspect-ratio: 4 / 3; }
  .pano-caption { flex-direction: column; align-items: flex-start; gap: 9px; }
  .pano-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .pano-filmstrip { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .pano-thumb { flex: 0 0 178px; scroll-snap-align: start; }
}