.viewer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto; color: white; background: #08100e; touch-action: none; }
.viewer[hidden] { display: none; }
.viewer-topbar, .viewer-footer { z-index: 2; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: rgba(8,16,14,.86); }
.viewer-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.viewer-icon, .viewer-arrow { display: grid; place-items: center; min-width: 48px; min-height: 48px; color: white; border: 0; background: rgba(255,255,255,.08); border-radius: 999px; font-size: 1.5rem; cursor: pointer; }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
.viewer-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }
.viewer-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.viewer-meta { display: grid; gap: 2px; margin-bottom: 10px; }
.viewer-meta small { color: #c7cfcc; }
.viewer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.download-link { display: block; margin-top: 10px; color: white; text-align: center; }
@media (max-width: 520px) { .viewer-arrow { opacity: .78; } }