.image-viewer{padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);width:min(1440px,calc(100vw - 2 * var(--space-8)));height:calc(100dvh - 2 * var(--space-8));max-width:none;max-height:none;overflow:hidden}
.image-viewer::backdrop{background:var(--scrim)}
.viewer-shell{display:flex;flex-direction:column;height:100%;min-width:0}
.viewer-header{display:flex;align-items:start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line)}
.viewer-header>div{min-width:0}.viewer-header h2{font-size:var(--text-h3);line-height:1.4;margin-top:var(--space-2);text-wrap:pretty}.viewer-count{font-size:var(--text-small);color:var(--muted)}
.image-viewer button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:var(--text-label);line-height:1.5;background:var(--panel);color:var(--ink)}
.image-viewer button:hover:not(:disabled){background:var(--surface)}.image-viewer button[aria-pressed=true]{background:var(--tint);border-color:var(--accent);color:var(--accent)}
.viewer-close{flex-shrink:0}.viewer-close svg{width:24px;height:24px}
.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--line)}
.viewer-navigation,.viewer-zoom{display:flex;align-items:center;gap:var(--space-2)}.viewer-navigation[hidden]{display:none}.viewer-zoom{flex-wrap:wrap}.viewer-scale{min-width:4ch;text-align:center;font-size:var(--text-label);font-variant-numeric:tabular-nums}
.viewer-stage{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--surface);touch-action:pan-x pan-y pinch-zoom;outline-offset:-3px}
.viewer-stage:focus-visible{outline:2px solid var(--accent)}
.viewer-canvas{display:grid;place-items:center;padding:var(--space-4);min-width:100%;min-height:100%}.viewer-canvas[hidden]{display:none}.viewer-canvas img{display:block;max-width:none;max-height:none;object-fit:contain;user-select:none}
.viewer-stage.is-zoomed{cursor:grab}.viewer-stage.is-dragging{cursor:grabbing}
.viewer-status{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--card-inset);text-align:center;color:var(--muted)}.viewer-status[hidden]{display:none}.viewer-status button[hidden]{display:none}
.viewer-footer{display:flex;align-items:start;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-6);border-top:1px solid var(--line);max-height:25dvh;overflow:auto}.viewer-footer details{min-width:0;flex:1}.viewer-footer summary{min-height:44px;align-content:center;cursor:pointer}.viewer-footer p{font-size:var(--text-small);margin-block:var(--space-3);max-width:75ch}.viewer-hint{font-size:var(--text-small);color:var(--muted);padding-block:var(--space-3)}
@media(max-width:700px){.image-viewer{width:100vw;height:100dvh;border-radius:0;border:0;margin:0}.viewer-header{padding:var(--space-3) var(--space-4)}.viewer-toolbar{padding:var(--space-2) var(--space-4)}.viewer-footer{padding:var(--space-2) var(--space-4);padding-bottom:max(var(--space-2),env(safe-area-inset-bottom))}.viewer-hint{display:none}.viewer-zoom{gap:var(--space-1)}.image-viewer .viewer-zoom button{padding-inline:var(--space-2)}}
@media(prefers-reduced-motion:no-preference){.image-viewer[open]{animation:viewer-open .16s ease-out}@keyframes viewer-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}