.photo-open { display: block; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; width: 100%; }
.photo-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 1rem; border: 0; background: #22251f; color: #f7f3ec; }
.photo-viewer[open] { display: flex; flex-direction: column; gap: .6rem; }
.photo-viewer::backdrop { background: #22251f; }
.viewer-toolbar { display: flex; align-items: center; gap: .6rem; }
.viewer-counter { margin: 0 auto 0 0; }
.photo-viewer button, .photo-viewer a { padding: .5rem .8rem; border: 1px solid #74816d; border-radius: 100px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.photo-viewer button:disabled { opacity: .35; cursor: default; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; gap: .7rem; }
.viewer-image { flex: 1; min-width: 0; width: 0; height: 100%; object-fit: contain; }
.viewer-footer { text-align: center; }
.viewer-caption, .viewer-status { margin: .3rem 0; }
.viewer-sharing { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.viewer-sharing small { flex-basis: 100%; }
.viewer-share-url { width: min(100%, 36rem); padding: .5rem; }
body.photo-viewer-open { overflow: hidden; }
@media (max-width: 580px) {
  .photo-viewer { padding: .6rem; font-size: .8rem; }
  .viewer-stage { gap: .2rem; }
  .viewer-stage button { padding: .5rem; }
}