.image-viewer { width:min(1200px,calc(100vw - 32px)); height:calc(100dvh - 32px); max-height:900px; border:0; border-radius:16px; padding:0; background:var(--app-surface); color:var(--app-text); }
.image-viewer[open] { display:flex; flex-direction:column; }
.image-viewer::backdrop { background:rgb(0 0 0 / .65); }
body:has(.image-viewer[open]) { overflow:hidden; }
.image-viewer-heading { padding:12px 20px; border-bottom:1px solid var(--app-border); }
.image-viewer-heading h2 { flex:1; margin:0; font-size:inherit; letter-spacing:normal; }
.image-viewer-image { position:relative; flex:1; min-height:0; padding:16px 56px; }
.image-viewer-image img { display:block; width:100%; height:100%; object-fit:contain; }
.image-viewer-control { position:absolute; top:calc(50% - 22px); display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:12px; background:var(--app-surface-alt); font-size:16px; }
.image-viewer-control.previous { left:8px; }
.image-viewer-control.next { right:8px; }
.image-viewer-control[hidden] { display:none; }
[data-image-viewer] img[data-zoom-ready] { cursor:zoom-in; }
[data-image-viewer] img[data-zoom-ready]:focus-visible { outline:var(--app-focus-ring); outline-offset:4px; }
@media(max-width:767px) { .image-viewer-image { padding:8px; } }