.viewer-open{overflow:hidden}
dialog.image-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:12px;margin:0;border:0;border-radius:0;background:#081640;color:#fff;box-sizing:border-box}
dialog.image-viewer[open]{display:flex;flex-direction:column;gap:12px}
.image-viewer::backdrop{background:#081640e8}
.viewer-toolbar,.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;direction:rtl}
.viewer-toolbar strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;flex:1;font-size:16px}
.viewer-toolbar span{white-space:nowrap;font-size:14px;direction:ltr}
.image-viewer button{background:#fff;color:#081640;border:0;border-radius:12px;padding:10px 12px;min-height:44px;cursor:pointer;font-size:14px;white-space:nowrap}
.image-viewer button:disabled{opacity:.35}
.viewer-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;touch-action:none;direction:ltr;border-radius:14px;background:#030b20}
.viewer-stage img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;user-select:none;will-change:transform}
.viewer-controls p{margin:0;text-align:center;font-size:12px;color:#b9c6dc}
@media(max-width:430px){.viewer-toolbar{flex-wrap:wrap}.viewer-toolbar strong{flex-basis:65%}.viewer-controls p{font-size:10px}.image-viewer button{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.viewer-stage img{transition:none}}