.photo-viewer {
    width: min(1100px, 96vw);
    max-width: 96vw;
    max-height: 94dvh;
    padding: .75rem;
    border: 0;
    border-radius: 14px;
    background: #17231d;
    color: #fff;
}
.photo-viewer[open] { display: grid; gap: .6rem; }
.photo-viewer::backdrop { background: rgba(0, 0, 0, .85); }
.photo-viewer .photo-image {
    display: block;
    width: 100%;
    min-height: 0;
    max-height: calc(94dvh - 8rem);
    object-fit: contain;
}
.photo-viewer button {
    min-height: 44px;
    padding: .5rem .8rem;
    border: 1px solid #819489;
    border-radius: 9px;
    background: #263e31;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.photo-viewer button:hover:not(:disabled) { background: #365c45; }
.photo-viewer button:focus-visible { outline: 3px solid #b7dd43; outline-offset: 2px; }
.photo-viewer button:disabled { opacity: .4; cursor: default; }
.photo-viewer [hidden] { display: none; }
.photo-close { justify-self: end; }
.photo-navigation { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.photo-position { margin: 0; flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
body:has(.photo-viewer[open]) { overflow: hidden; }
@media (max-width: 420px) {
    .photo-viewer { padding: .5rem; }
    .photo-viewer button { padding: .5rem .6rem; font-size: .9rem; }
}