html.lightbox-open { overflow: hidden; }
.lightbox { width: min(100% - 48px, 1050px); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--ink); background: var(--paper-warm); color: var(--ink); box-shadow: 10px 10px 0 rgb(0 0 0 / .25); }
.lightbox::backdrop { background: rgb(24 9 11 / .88); }
.lightbox__head,.lightbox__foot { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: .8rem 1.3rem; font: .75rem/1.5 var(--font-ui); }
.lightbox__head { border-bottom: 1px solid var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.lightbox__foot { border-top: 1px solid var(--ink); }
.lightbox button,.lightbox__save { background: transparent; color: var(--ink); font: .8rem var(--font-ui); border: 1px solid var(--ink); padding: .6rem 1rem; min-height: 44px; min-width: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; }
.lightbox button:hover,.lightbox__save:hover { background: var(--brain); }
.lightbox__head .lightbox__close { border: 0; }
.lightbox__stage { height: min(67dvh, 720px); background: var(--paper); display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; overflow: hidden; }
.lightbox__image { width: 100%; height: 100%; object-fit: contain; }
#lightbox-title { margin: 0; font-size: .8rem; }
.lightbox__count { color: var(--ink-faint); font-size: .7rem; }
.lightbox__actions { display: flex; gap: .5rem; }
@media(max-width:640px) {
  .lightbox { width: calc(100% - 20px); max-height: calc(100dvh - 24px); }
  .lightbox__head,.lightbox__foot { padding: .65rem; gap: .6rem; }
  .lightbox__head { font-size: .6rem; }
  .lightbox__stage { height: 58dvh; }
  .lightbox__foot { flex-wrap: wrap; }
  .lightbox__actions { width: 100%; }
  .lightbox__save { margin-left: auto; }
}