/* ==========================================================================
   album.css —— 共享相册灯箱样式（配合 album.js 使用）
   ========================================================================== */

.lb {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 8, 16, 0.92);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.lb.open { opacity: 1; visibility: visible; }
.lb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
/* 缩放容器：zoom 变换放在包层，img 自身的 .swap 过渡互不干扰 */
.lb-zoom { line-height: 0; transform-origin: center center; will-change: transform; }
.lb-img {
  max-width: calc(100vw - 48px); max-height: calc(100vh - 96px);
  object-fit: contain; border-radius: 4px;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  touch-action: none;
  transition: opacity .18s ease, transform .18s ease;
}
.lb-img.swap { opacity: 0; transform: scale(0.985); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11, 17, 32, 0.7);
  border: 1px solid #2a3a55;
  color: #e9e6e0; font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: #c9a26b; border-color: #c9a26b; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-prev.hide, .lb-next.hide { visibility: hidden; }
.lb-counter {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: Consolas, "Courier New", "PingFang SC", monospace;
  font-size: 13px; color: #a5acbd;
  background: rgba(11, 17, 32, 0.7); border: 1px solid #2a3a55;
  border-radius: 999px; padding: 4px 14px;
}
.lb-loading, .lb-error {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #6b7488; font-size: 14px; display: none;
}
.lb-loading.show, .lb-error.show { display: block; }
body.lb-open { overflow: hidden; }

@media (max-width: 768px) {
  .lb-close { top: 12px; right: 12px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-img { max-width: calc(100vw - 24px); }
}