#viewer{position:fixed;inset:0;display:none;z-index:9999;background:rgba(0,0,0,.92)}
#viewer.show{display:block}
#viewer .stage{position:absolute;inset:0;display:grid;place-items:center}
#viewer img{max-width:96vw;max-height:92vh;object-fit:contain}
#viewer .spinner{position:absolute;width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin 1s linear infinite}
#viewer .close{position:absolute;top:10px;right:12px;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer}
#viewer .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border:0;color:#fff;width:44px;height:44px;border-radius:8px;cursor:pointer;font-size:24px}
#viewer .prev{left:10px} .next{right:10px}
@keyframes spin{to{transform:rotate(360deg)}}