.image-preview-trigger { cursor: zoom-in; }
.image-preview-trigger:focus-visible { outline: 3px solid #b18b47; outline-offset: 4px; }
dialog.dinglu-image-viewer {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
  width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  color: #fff; background: #101814; overflow: hidden; box-sizing: border-box;
}
dialog.dinglu-image-viewer[open] { display: flex; flex-direction: column; }
.dinglu-image-viewer::backdrop { background: rgba(0, 0, 0, .88); }
.dinglu-image-viewer .image-viewer-toolbar, .dinglu-image-viewer .image-viewer-footer {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
}
.dinglu-image-viewer .image-viewer-toolbar { padding-top: max(12px, env(safe-area-inset-top)); }
.dinglu-image-viewer .image-viewer-count { flex: 1; font-size: 14px; }
.dinglu-image-viewer button {
  width: auto; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid #69756d;
  border-radius: 8px; color: #fff; background: #24372c; font: inherit; white-space: nowrap;
}
.dinglu-image-viewer button:focus-visible { outline: 2px solid #e6cd91; outline-offset: 2px; }
.dinglu-image-viewer button:disabled { opacity: .45; }
.dinglu-image-viewer [hidden] { display: none !important; }
.dinglu-image-viewer .image-viewer-stage {
  flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
.dinglu-image-viewer .image-viewer-picture {
  display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; border: 0; border-radius: 0; margin: 0;
}
.dinglu-image-viewer .image-viewer-stage.is-zoomed { display: block; touch-action: pan-x pan-y pinch-zoom; }
.dinglu-image-viewer .is-zoomed .image-viewer-picture { max-width: none; max-height: none; }
.dinglu-image-viewer .image-viewer-error { padding: 24px; text-align: center; }
.dinglu-image-viewer .image-viewer-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.dinglu-image-viewer .image-viewer-caption { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; text-align: center; max-height: 3em; overflow: auto; }
@media (max-width: 360px) { .dinglu-image-viewer button { padding: 8px; } }