html.image-viewer-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Scoped to the viewer: the existing page, image assets and type scale stay intact. */
dialog.image-viewer {
  box-sizing: border-box;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: 1600px;
  max-height: none;
  margin: auto;
  padding: 16px;
  border: 1px solid #d3e0ee;
  border-radius: 16px;
  background: #f5f8fc;
  color: #172b43;
  box-shadow: 0 20px 70px #06122a40;
  overflow: hidden;
}
dialog.image-viewer:not([open]) { display: none; }
dialog.image-viewer[open] { display: flex; flex-direction: column; gap: 16px; }
dialog.image-viewer::backdrop { background: #06122acc; }
.image-viewer-toolbar { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.image-viewer-toolbar h2 {
  flex: 1; min-width: 0; margin: 0;
  font-size: 18px; line-height: 1.4; font-weight: 650;
}
.image-viewer-close {
  flex: 0 0 auto; min-height: 44px; padding: 6px 14px;
  border: 1px solid #b7d2ed; border-radius: 10px;
  background: #fff; color: #1464b9;
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer;
}
.image-viewer-close span { font-size: 24px; line-height: 1; vertical-align: -1px; }
.image-viewer-close:hover { background: #eaf4ff; }
.image-viewer-close:focus-visible { outline: 3px solid #1672d4; outline-offset: 3px; }
.image-viewer-stage {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0; min-height: 0;
}
.image-viewer-stage img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
  margin: 0; border: 0; border-radius: 0;
}
.image-viewer-status { margin: 0; padding: 16px; font-size: 16px; text-align: center; }
.image-viewer-stage [hidden] { display: none; }
@media (max-width: 600px) {
  dialog.image-viewer { width: calc(100% - 16px); height: calc(100% - 16px); padding: 12px; }
  dialog.image-viewer[open] { gap: 12px; }
  .image-viewer-toolbar { gap: 8px; }
  .image-viewer-toolbar h2 { font-size: 16px; }
  .image-viewer-close { padding: 6px 10px; font-size: 14px; }
}