[data-image-viewer] { display: block; cursor: zoom-in; }
[data-image-viewer]:focus-visible { outline: 3px solid #90d6a6; outline-offset: -3px; }
html.image-viewer-open { overflow: hidden; }
.image-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: white; }
.image-viewer::backdrop { background: rgba(10, 16, 12, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.image-viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 76px 80px 28px; gap: 20px; }
.image-viewer-photo { width: 100%; height: 100%; min-height: 0; object-fit: contain; touch-action: pan-y pinch-zoom; user-select: none; }
.image-viewer-caption { text-align: center; margin: 0; font: 14px/1.5 Manrope, sans-serif; overflow-wrap: anywhere; max-height: 20vh; overflow: auto; }
.image-viewer button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(0,0,0,.45); color: white; cursor: pointer; font: 30px/1 sans-serif; }
.image-viewer button:hover { background: #286c45; }
.image-viewer button:focus-visible { outline: 3px solid #90d6a6; outline-offset: 4px; }
.image-viewer button[hidden] { display: none; }
.image-viewer-close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.image-viewer-prev { left: 16px; top: calc(50% - 24px); }
.image-viewer-next { right: 16px; top: calc(50% - 24px); }
@media (max-width: 640px) {
    .image-viewer[open] { padding: 76px 12px max(94px, calc(76px + env(safe-area-inset-bottom))); gap: 16px; }
    .image-viewer-prev, .image-viewer-next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); }
    .image-viewer-prev { left: calc(50% - 64px); }
    .image-viewer-next { right: calc(50% - 64px); }
}