/* ============================ 大图预览 ============================ */

.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; box-sizing: border-box;
  position: fixed; inset: 0; background: rgba(15, 23, 42, .78); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.lightbox img { max-width: 88%; max-height: 88%; border-radius: var(--radius-card, 16px); box-shadow: var(--shadow-card, 0 8px 30px rgba(0,0,0,.2)); object-fit: contain; transition: transform .16s ease, opacity .14s ease; will-change: transform; cursor: grab; touch-action: none; contain: layout paint; }
.lightbox img.is-dragging { cursor: grabbing; transition: none; }
.lightbox img.is-loading { opacity: .48; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 36px; height: 36px; border: none;
  border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.07rem; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .32); }
.lightbox-nav {
  position: fixed; top: 50vh; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.33rem; cursor: pointer; z-index: 101;
}
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }
.lightbox-nav:hover { background: rgba(255, 255, 255, .32); transform: translateY(-50%); }
.lightbox-nav:active { transform: translateY(-50%); }
.lightbox .lightbox-nav,
.lightbox .lightbox-nav:hover:not(:disabled),
.lightbox .lightbox-nav:active { transform: translateY(-50%); transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.lightbox-tools {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(15, 23, 42, .55); padding: 6px 12px; border-radius: var(--radius-pill, 999px);
}
.lightbox-counter { color: rgba(255, 255, 255, .85); font-size: 0.8rem; padding-right: 4px; }
.lightbox-tool {
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff;
  width: 32px; height: 32px; font-size: 0.93rem; cursor: pointer;
}
.lightbox-tool:hover { background: rgba(255, 255, 255, .38); }
/* 缩放百分比（夹在 🔍− 与 🔍+ 之间，位于中间工具条、下载按钮左边） */
.lightbox-scale-label {
  color: rgba(255, 255, 255, .85); font-size: .78rem; min-width: 44px; text-align: center;
}

/* Shared finished-image viewer: native dialog focus and original aspect ratio. */
.lightbox .lightbox-nav[hidden] { display: none; }
.lightbox .lightbox-fit { width: 44px; border-radius: 16px; font-size: 12px; }
.lightbox .lightbox-tools { max-width: calc(100vw - 20px); box-sizing: border-box; white-space: nowrap; }
.lightbox .lightbox-counter, .lightbox .lightbox-tool { flex-shrink: 0; }
@media (max-width: 480px) {
  .lightbox { padding: 12px; }
  .lightbox img { max-width: 100%; max-height: calc(100dvh - 120px); }
  .lightbox .lightbox-tools { gap: 5px; padding: 6px 8px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .lightbox-close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .lightbox-nav.prev { left: 6px; }
  .lightbox-nav.next { right: 6px; }
}