/* One viewer for normal and expanded viewing. Never leave for a bare image URL. */
.image-gallery{
 --viewer-top:0px;--viewer-left:0px;--viewer-width:100vw;--viewer-height:100dvh;
 --viewer-safe-top:max(14px,env(safe-area-inset-top));
 --viewer-safe-bottom:max(14px,env(safe-area-inset-bottom));
 --viewer-safe-left:max(12px,env(safe-area-inset-left));
 --viewer-safe-right:max(12px,env(safe-area-inset-right));
}
dialog.image-gallery[open]{
 position:fixed;box-sizing:border-box;display:flex;flex-direction:column;
 inset:auto;inset-inline:auto;margin:0;
 top:calc(var(--viewer-top) + var(--viewer-safe-top));
 left:calc(var(--viewer-left) + var(--viewer-safe-left));
 width:calc(var(--viewer-width) - var(--viewer-safe-left) - var(--viewer-safe-right));
 height:calc(var(--viewer-height) - var(--viewer-safe-top) - var(--viewer-safe-bottom));
 max-width:none;max-height:none;min-width:0;min-height:0;padding:0;overflow:hidden;
 background:#111318;color:#f1f4f9;border:1px solid #3a424f;border-radius:22px;
 box-shadow:0 18px 70px #0008;
}
dialog.image-gallery.gallery-expanded[open]{
 top:var(--viewer-top);left:var(--viewer-left);width:var(--viewer-width);height:var(--viewer-height);
 padding:var(--viewer-safe-top) var(--viewer-safe-right) var(--viewer-safe-bottom) var(--viewer-safe-left);
 border:0;border-radius:0;box-shadow:none;background:#090b0f;
}
.image-gallery .gallery-toolbar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;min-height:72px;flex:0 0 auto;padding:12px 14px;border-bottom:1px solid #303743;background:#171b23}
.image-gallery .gallery-toolbar>#gallery-title{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:1.6;color:#e4e9f1}
.image-gallery #gallery-title small{display:block;font-size:12px;color:#a7b3c6;font-variant-numeric:tabular-nums}
.image-gallery .gallery-close{min-height:48px;min-width:88px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #48566b;background:#2f3b4f;border-radius:14px;color:#fff;font-size:15px;padding:10px 12px;white-space:nowrap}
.image-gallery .gallery-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.image-gallery .gallery-close span{font-size:15px;color:inherit}
.image-gallery .gallery-stage{display:flex;align-items:center;justify-content:center;position:relative;flex:1 1 0;min-height:0;min-width:0;overflow:auto;padding:12px;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain}
.image-gallery #gallery-picture{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.image-gallery #gallery-picture[hidden],.image-gallery .gallery-error[hidden]{display:none}
.image-gallery.zoomed .gallery-stage{display:block;padding:0}
.image-gallery.zoomed #gallery-picture{width:200%;height:auto;max-width:none;max-height:none;border-radius:0}
.image-gallery .gallery-controls{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;flex:0 0 auto;padding:12px;border-top:1px solid #303743;background:#171b23}
.image-gallery .gallery-controls button{flex:1;min-height:48px;min-width:54px;max-width:170px;padding:10px 8px;font-size:14px;border-radius:13px;border:1px solid #3a4658;background:#293344;color:#e2eaf7;white-space:nowrap}
.image-gallery .gallery-controls button:disabled{opacity:.4}
.image-gallery .gallery-error{color:#bfc8d6;font-size:15px;line-height:1.75;padding:24px;text-align:center}
.image-gallery::backdrop{background:#000d;backdrop-filter:blur(12px)}
@media(min-width:1050px){dialog.image-gallery:not(.gallery-expanded)[open]{width:min(1000px,calc(var(--viewer-width) - 64px));left:calc(var(--viewer-left) + (var(--viewer-width) - min(1000px,calc(var(--viewer-width) - 64px)))/2)}}
@media(max-height:450px){.image-gallery .gallery-toolbar{min-height:58px;padding:5px 10px}.image-gallery .gallery-controls{padding:6px 10px}.image-gallery .gallery-stage{padding:8px}}