[data-expand-image] { cursor:zoom-in; }
[data-expand-image]:focus-visible { outline:2px solid #586f5b; outline-offset:4px; }
.image-viewer { position:fixed; inset:0; margin:auto; padding:0; border:0; border-radius:0; background:transparent; color:#fff; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); box-shadow:none; overflow:hidden; }
.image-viewer[open] { animation:image-viewer-pop 240ms cubic-bezier(.23,1,.32,1) both; }
.image-viewer::backdrop { background:rgb(0 0 0 / .6); animation:image-viewer-fade 180ms ease-out both; }
.image-viewer header { display:flex; align-items:center; justify-content:space-between; gap:16px; height:44px; padding:0 6px; }
.image-viewer header span { min-width:0; max-width:min(800px,65vw); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:600 13px/1.4 sans-serif; }
.image-viewer button { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; padding:7px; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }
.image-viewer button:hover { background:#ffffff24; }
.image-viewer button svg { width:18px; height:18px; }
.image-viewer-media { overflow:hidden; border-radius:0; background:transparent; }
.image-viewer-media img { display:block; width:auto; height:auto; max-width:min(960px,90vw); max-height:calc(100dvh - 150px); margin:auto; object-fit:contain; }
@keyframes image-viewer-fade { from { opacity:0; } to { opacity:1; } }
@keyframes image-viewer-pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .image-viewer[open], .image-viewer::backdrop { animation:none; } }