.image-preview{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:70px 24px 24px;background:rgba(12,22,18,.95);color:#fff;overflow:auto;overscroll-behavior:contain}
.image-preview[open]{display:flex;align-items:center;justify-content:center}
.image-preview::backdrop{background:rgba(0,0,0,.7)}
.image-preview figure{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.image-preview figure img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain;border-radius:8px}
.image-preview figcaption{font:400 13px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;color:#e5ede7;text-align:center;max-width:65ch}
.image-preview-close{position:fixed;top:16px;right:20px;z-index:10;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #ffffff60;border-radius:24px;background:#fff;color:#143527;font:600 14px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer}
.image-preview-close:focus-visible{outline:3px solid #ffe078;outline-offset:4px}
@media(max-width:500px){.image-preview{padding:76px 12px 20px}.image-preview-close{right:12px}}

/* Replay a gentle entrance each time the native dialog opens. */
@keyframes image-preview-fade{from{opacity:0}to{opacity:1}}
@keyframes image-preview-reveal{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.image-preview[open]{animation:image-preview-fade 180ms ease-out both}
.image-preview[open]::backdrop{animation:image-preview-fade 180ms ease-out both}
.image-preview[open] figure{animation:image-preview-reveal 260ms cubic-bezier(.2,.7,.2,1) both;transform-origin:center}
@media(prefers-reduced-motion:reduce){.image-preview[open],.image-preview[open]::backdrop,.image-preview[open] figure{animation:none}}
/* Zoom controls remain visible while the image pans inside a clipped stage. */
.image-preview{padding-bottom:86px}
.image-preview figure{width:100%;height:100%;max-height:100%;min-height:0}
.image-preview-stage{display:grid;place-items:center;width:100%;flex:1;min-height:0;overflow:hidden;touch-action:none;user-select:none}
.image-preview .image-preview-stage img{max-width:100%;max-height:calc(100dvh - 205px);transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}
.image-preview-stage.is-zoomed{cursor:grab}.image-preview-stage.is-dragging{cursor:grabbing}
.image-preview-zoom{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px;border:1px solid #ffffff45;border-radius:30px;background:#fff;color:#143527;z-index:10;box-shadow:0 5px 20px #0003}
.image-preview-tool{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#143527;font:500 24px/1 -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer}
.image-preview-tool:hover{background:#eaf0e8}.image-preview-tool:disabled{opacity:.35;cursor:default}.image-preview-tool:focus-visible{outline:3px solid #2d7956;outline-offset:1px}
.image-preview-zoom output{min-width:54px;text-align:center;font:600 13px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;font-variant-numeric:tabular-nums}