.photos-layout { position: absolute; left: 97px; top: 73px; width: 530px; height: 575px; }
.gallery-back { position: absolute; left: 332px; top: 5px; color: #eee; font-size: 10px; line-height: 12px; text-decoration: none; }
.gallery-back:hover { text-decoration: underline; }
.gallery-frame { position: absolute; left: -4px; top: 29px; width: 393px; height: 546px; display: grid; grid-template-rows: 24px minmax(0, 1fr) 24px; gap: 12px; padding: 8px; border: 1px solid #333; }
.photo-tabs { display: flex; gap: 6px; }
.photo-tabs button { flex: 1; padding: 0; border: 1px solid #444; background: #222; color: #aaa; font: 10px/20px Verdana, Geneva, sans-serif; cursor: pointer; }
.photo-tabs button[aria-selected="true"] { border-color: #777; background: #666; color: #fff; }
.photo-tabs button:hover { color: #fff; }
.gallery-panel { min-width: 0; min-height: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px 12px; height: 100%; }
.photo-card { display: grid; grid-template-rows: minmax(0, 1fr) 15px; gap: 3px; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; color: #ccc; font: inherit; text-align: left; cursor: pointer; }
.photo-thumb { display: block; min-width: 0; min-height: 0; padding: 3px; border: 1px solid #333; background: #080808; }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-credit { font-size: 10px; line-height: 15px; }
.photo-card:hover .photo-thumb { border-color: #999; }
.photo-card:hover .photo-credit { color: #fff; }
.gallery-pagination { display: flex; align-items: center; justify-content: space-between; color: #888; font-size: 9px; line-height: 12px; }
.gallery-controls { display: flex; align-items: center; gap: 6px; }
.gallery-page-number { min-width: 30px; color: #aaa; text-align: center; }
.gallery-page-button { height: 22px; min-width: 50px; padding: 0 6px; border: 1px solid #444; background: #222; color: #ccc; font: 10px/18px Verdana, Geneva, sans-serif; cursor: pointer; }
.gallery-page-button:hover:not(:disabled) { background: #333; color: #fff; }
.gallery-page-button:disabled { border-color: #222; color: #555; cursor: default; }
.photos-layout button:focus-visible, .gallery-back:focus-visible, .gallery-panel:focus-visible { outline: 1px dotted #ddd; outline-offset: 2px; }

.photo-viewer { width: min(900px, calc(100vw - 32px)); height: min(740px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 5px; border: 1px solid #555; background: #000; color: #ccc; overflow: hidden; font: 11px/14px Verdana, Geneva, sans-serif; }
.photo-viewer[open] { display: grid; grid-template-rows: 28px minmax(0, 1fr) 30px; gap: 8px; }
.photo-viewer::backdrop { background: rgb(0 0 0 / 90%); }
.viewer-heading { display: flex; align-items: center; justify-content: space-between; padding-left: 6px; background: #666; color: #eee; }
.viewer-heading h2 { font: 15px/20px Arial, Helvetica, sans-serif; }
.viewer-close { align-self: stretch; width: 28px; padding: 0; border: 0; border-left: 1px solid #777; background: #555; color: #fff; font: 20px/24px Arial, Helvetica, sans-serif; cursor: pointer; }
.viewer-close:hover { background: #777; }
.viewer-stage { min-width: 0; min-height: 0; }
.viewer-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.viewer-controls > button { height: 26px; min-width: 62px; font-size: 11px; }
.viewer-caption { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.viewer-caption [hidden] { display: none; }
.viewer-count { color: #888; font-size: 10px; }
.photo-viewer button:focus-visible { outline: 1px dotted #eee; outline-offset: 2px; }