a[data-image-preview] { cursor: zoom-in; }
dialog.image-preview {
  box-sizing: border-box;
  width: fit-content;
  max-width: min(920px, 90vw);
  max-height: 84vh;
  max-height: 84dvh;
  margin: auto;
  padding: 12px;
  border: 1px solid #7d9297;
  border-radius: 18px;
  background: #122633;
  color: #fff;
  box-shadow: 0 20px 70px #0008;
}
.image-preview::backdrop { background: #07131ccc; }
.image-preview-back {
  display: block;
  margin: 0 0 12px auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #a2b7b8;
  border-radius: 10px;
  background: #243e4c;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.image-preview-back:focus-visible { outline: 3px solid #ffe49a; outline-offset: 2px; }
.image-preview > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(84vh - 94px);
  max-height: calc(84dvh - 94px);
  object-fit: contain;
  margin: auto;
  border-radius: 8px;
}

html[data-theme] dialog.image-preview{background:var(--overlay-glass);color:var(--ink);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme] .image-preview-back{background:var(--glass);color:var(--ink)}