* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #000;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #fff;
  cursor: grab;
}
body.dragging { cursor: grabbing; }

#view { display: block; width: 100vw; height: 100vh; touch-action: none; }

/* 顶部信息条 */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 20px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
#pano-title { font-size: 17px; font-weight: 600; letter-spacing: 1px; }
#pano-name { font-size: 12px; opacity: .65; margin-top: 2px; }

/* 操作提示（首次交互后淡出） */
#hint {
  position: fixed; left: 14px; bottom: 96px;
  font-size: 12px; opacity: .7; padding: 6px 12px;
  background: rgba(0,0,0,.35); border-radius: 14px;
  transition: opacity .6s;
  pointer-events: none;
}
#hint.fade { opacity: 0; }

/* 加载进度 */
#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #000; z-index: 50;
}
#loading.hidden { display: none; }
#loading-bar {
  width: min(360px, 70vw); height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.15); overflow: hidden;
}
#loading-bar::after {
  content: ""; display: block; width: 0%; height: 100%;
  background: #4da3ff; border-radius: 2px;
  transition: width .15s;
}
#loading-bar.active::after { animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: .6; } to { opacity: 1; } }
#loading-text { margin-top: 12px; font-size: 13px; opacity: .7; }

/* 竖排侧栏按钮 */
.side-btns, .zoom-btns {
  position: fixed; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 20;
}
.zoom-btns { top: 80px; }
button {
  font: inherit; color: #fff; background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: 8px 14px; font-size: 13px;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background .15s, transform .05s;
}
button:hover { background: rgba(77,163,255,.6); }
button:active { transform: scale(.96); }
#btn-rotate.on { background: rgba(77,163,255,.75); border-color: #4da3ff; }

/* 竖排文字按钮 */
.side-btns button { writing-mode: vertical-rl; padding: 10px 8px; letter-spacing: 3px; }

/* 缩放按钮 */
.zoom-btns button { width: 42px; height: 42px; font-size: 18px; text-align: center; padding: 0; }

/* 左右切换箭头 */
.nav-arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 72px; font-size: 30px; line-height: 1;
  padding: 0; z-index: 20;
}
#btn-prev { left: 12px; }
#btn-next { right: 12px; }

/* 底部缩略图画廊 */
#gallery {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 20;
  padding: 8px 12px; border-radius: 14px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
}
.thumb {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px; border-radius: 8px;
  border: 2px solid transparent; opacity: .7;
}
.thumb img { width: 96px; height: 48px; object-fit: cover; border-radius: 4px; display: block; }
.thumb span { font-size: 10px; opacity: .7; }
.thumb:hover { opacity: 1; background: rgba(255,255,255,.12); }
.thumb.active { opacity: 1; border-color: #4da3ff; }