.image-dialog.image-viewer {
  width: min(1400px, calc(100vw - 32px));
  max-height: 92svh;
  padding: 20px;
  overflow: auto;
  border-radius: 24px;
  color: #103f39;
  background: #f8fbf8;
}
.image-dialog.image-viewer .dialog-top { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.image-dialog.image-viewer .dialog-top h2 { font: 550 16px/1.6 SourceHan, 'Microsoft YaHei', sans-serif; margin: 0; }
.image-dialog.image-viewer .dialog-close { width: 44px; height: 44px; display: grid; place-items: center; margin-left: auto; flex: none; }
.image-viewer .viewer-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.image-viewer .viewer-toolbar button, .image-viewer .viewer-original { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; font: 550 14px/1.5 SourceHan, 'Microsoft YaHei', sans-serif; border: 1px solid #c9dfd1; border-radius: 999px; color: #15594c; background: #edf5ef; }
.image-viewer .viewer-toolbar button:hover { background: #deeee3; }
.image-viewer .viewer-toolbar button:disabled { color: #6c8177; border-color: #dbe6df; background: #f1f5f1; cursor: default; }
.image-viewer .viewer-toolbar output { font-size: 13px; color: #426956; min-width: 43px; text-align: center; }
.image-viewer .viewer-original { margin-left: auto; background: #fff; text-decoration: none; }
.image-viewer .viewer-viewport { position: relative; width: 100%; height: clamp(220px, 48vw, 620px); max-height: calc(90svh - 170px); min-height: 110px; overflow: hidden; background: #eaf1eb; border-radius: 14px; touch-action: none; outline-offset: 3px; }
.image-viewer .viewer-viewport.is-zoomed { cursor: grab; }
.image-viewer .viewer-viewport.is-dragging { cursor: grabbing; }
.image-viewer .viewer-viewport img { position: absolute; max-width: none; max-height: none; object-fit: contain; margin: 0; border-radius: 0; transform-origin: center; user-select: none; -webkit-user-select: none; pointer-events: none; }
.image-viewer .viewer-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #416350; font-size: 14px; }
.image-viewer .viewer-message[hidden] { display: none; }
.image-dialog.image-viewer .viewer-help { font: 400 12px/1.8 SourceHan, 'Microsoft YaHei', sans-serif; color: #486b59; margin: 10px 0 0; }
@media (max-width: 760px) {
  .image-dialog.image-viewer { padding: 14px; border-radius: 20px; }
  .image-dialog.image-viewer .dialog-top h2 { font-size: 14px; }
  .image-viewer .viewer-toolbar { gap: 6px; }
  .image-viewer .viewer-toolbar button, .image-viewer .viewer-original { font-size: 13px; padding-inline: 12px; }
  .image-viewer .viewer-toolbar output { font-size: 12px; min-width: 39px; }
  .image-viewer .viewer-original { margin-left: 0; }
}
@media (max-height: 500px) {
  .image-dialog.image-viewer { padding: 10px 14px; }
  .image-dialog.image-viewer .dialog-top, .image-viewer .viewer-toolbar { margin-bottom: 6px; }
  .image-dialog.image-viewer .viewer-help { display: none; }
  .image-viewer .viewer-viewport { max-height: calc(90svh - 130px); }
}