.image-host.expanded { position:fixed; inset:0; display:grid; place-items:center; width:100vw; height:100dvh; background:#080808; }
.image-host.expanded .image-frame>img { max-width:100vw; max-height:100dvh; }
.image-frame { color:#fff; }
.image-frame[data-state="error"] { width:min(520px,calc(100vw - 48px)); height:min(420px,calc(100dvh - 48px)); background:#111; }
.image-frame button { color:#fff; border:0; background:#0007; }
.image-frame button:hover { background:#000b; }
.image-frame button:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.image-close { width:36px; height:36px; z-index:2; }
.image-fullscreen { position:absolute; top:8px; left:8px; width:38px; height:38px; padding:7px; border-radius:5px; }
.image-fullscreen svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.image-arrow { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:64px; padding:0 0 6px; border-radius:0; font-size:58px; font-weight:300; line-height:1; }
.image-prev { left:0; }
.image-next { right:0; }
.image-count { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); padding:10px 17px; border-radius:24px; background:#0006; font-size:16px; font-weight:600; line-height:1; white-space:nowrap; pointer-events:none; }
.image-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; line-height:1.5; padding:60px; font-size:14px; background:#0005; pointer-events:none; }
.image-status .spinner { border-color:#ffffff50; border-top-color:#fff; }
@media(max-width:600px) { .image-arrow { width:42px; height:56px; font-size:48px; } }
@media(max-width:1199px){
  .image-frame>img{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .image-close,.image-fullscreen{width:44px;height:44px}.image-arrow{min-width:44px;min-height:56px}
  .image-host.expanded .image-close,.image-host.expanded .image-fullscreen{top:max(8px,env(safe-area-inset-top))}
  .image-host.expanded .image-count{bottom:max(16px,env(safe-area-inset-bottom))}
  .image-status{padding:56px 44px}
}