.image-zoom { cursor: zoom-in; }
.image-zoom:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
dialog.image-viewer { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 16px 24px; border: 0; background: rgb(0 0 0 / .93); color: #fff; overflow: auto; text-align: center; }
dialog.image-viewer[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
dialog.image-viewer::backdrop { background: #000; }
dialog.image-viewer > img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; flex-shrink: 1; min-height: 0; }
dialog.image-viewer > p { margin: 0; max-width: 70ch; max-height: 3em; overflow: auto; overflow-wrap: anywhere; font: 14px/1.5 sans-serif; }
dialog.image-viewer > .image-viewer-close { position: fixed; top: 12px; right: 16px; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid #aaa; border-radius: 4px; background: #222; color: #fff; cursor: pointer; font: 16px/1.5 sans-serif; }
.image-viewer-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media print { dialog.image-viewer { display: none !important; } }