.image-viewer {
 position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none;
 margin:0; padding:0; border:0; background:#0b111af5; color:#edf4ff;
 overflow:hidden; grid-template-rows:auto minmax(0,1fr);
}
.image-viewer[open] { display:grid; animation:viewer-enter 200ms cubic-bezier(.22,1,.36,1); }
.image-viewer::backdrop { background:#05080eeb; }
.image-viewer-toolbar {
 display:flex; align-items:center; justify-content:space-between; gap:16px;
 padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));
 border-bottom:1px solid #b5c9e025; background:#131e2c; z-index:1;
}
.image-viewer-toolbar h2 { font-size:14px; line-height:1.5; font-weight:600; letter-spacing:0; }
.image-viewer-close {
 display:inline-flex; align-items:center; gap:14px; min-height:44px; flex:none; padding:10px 18px;
 border:1px solid #bed7f35c; border-radius:999px; background:linear-gradient(145deg,#b0d2ff20,#7399c10d);
 box-shadow:inset 0 1px 0 #eff7ff2b; color:#f3f7ff; font-size:14px; font-weight:600;
 transition:background-color 200ms ease,border-color 200ms ease,transform 200ms cubic-bezier(.22,1,.36,1);
}
.image-viewer-close:hover { background-color:#a6caf224; border-color:#d3e9ff8c; }
.image-viewer-close:active { transform:scale(.97); }
.image-viewer-stage { display:flex; align-items:center; justify-content:center; min-height:0; padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
.image-viewer-stage img { width:100%; height:100%; max-width:2560px; object-fit:contain; }
@keyframes viewer-enter { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:none} }
@media(max-width:540px) { .image-viewer-toolbar { padding:12px; gap:10px; } .image-viewer-toolbar h2 { font-size:12px; } .image-viewer-close { padding:10px 13px; gap:10px; font-size:13px; } .image-viewer-stage { padding:8px; } }
@media(prefers-reduced-motion:reduce) { .image-viewer[open] { animation:none; } .image-viewer-close { transition:none; } .image-viewer-close:active { transform:none; } }