.photo-viewer{border:1px solid rgba(255,244,220,.16);padding:24px;width:min(1200px,calc(100vw - 48px));height:calc(100vh - 48px);height:calc(100dvh - 48px);max-width:none;max-height:none;margin:auto;border-radius:12px;color:#fff7eb;background:#211c18;box-shadow:0 24px 100px rgba(0,0,0,.5);overflow:hidden}
.photo-viewer::backdrop{background:rgba(17,13,10,.84);backdrop-filter:blur(5px)}
.viewer-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto 70px;gap:14px;min-width:0}
.viewer-header{display:flex;justify-content:space-between;align-items:center;gap:20px}
#viewerTitle{font-size:1.1rem;line-height:1.6}
#viewerCount{font-family:var(--sans);font-size:.75rem;color:#beaea0;margin-top:3px;font-variant-numeric:tabular-nums}
.viewer-close{display:flex;gap:14px;align-items:center;font-family:var(--sans);font-size:.85rem;padding:8px 14px;min-height:44px;border:1px solid #76665a;border-radius:30px;white-space:nowrap}
.viewer-close span{font-size:1.5rem;line-height:1}
.viewer-stage{position:relative;min-height:0;min-width:0;display:block;overflow:hidden;background:#171310;border-radius:4px}
.viewer-stage img{position:absolute;min-height:0;max-width:none;max-height:none;object-fit:contain;display:block;transition:opacity .16s ease}
.viewer-error{position:absolute;padding:20px;text-align:center;color:#dec8b4;font-family:var(--sans);font-size:.85rem}
.viewer-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.viewer-controls button{border:1px solid #76665a;min-height:44px;border-radius:30px;padding:8px 16px;font-family:var(--sans);font-size:.8rem;white-space:nowrap}
.viewer-controls p{text-align:center;font-size:.85rem;color:#e3cdb8;line-height:1.5}
.viewer-controls button:hover,.viewer-close:hover{background:#3b2f26}
.viewer-thumbnails{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:3px 0 6px;scrollbar-width:thin;scrollbar-color:#877464 #211c18;min-width:0}
.viewer-thumbnails button{position:relative;flex:0 0 72px;height:58px;border:2px solid transparent;border-radius:3px;overflow:hidden;opacity:.55;background:#302720}
.viewer-thumbnails button[aria-pressed="true"]{border-color:#edd1a8;opacity:1}
.viewer-thumbnails button:hover{opacity:1}
.viewer-thumbnails img{position:absolute;max-width:none;max-height:none;object-fit:contain}
@media(max-width:760px){
  .photo-viewer{width:100vw;height:100vh;height:100dvh;margin:0;border:0;border-radius:0;padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .viewer-shell{grid-template-rows:auto minmax(0,1fr) auto 66px;gap:12px}
  #viewerTitle{font-size:.95rem}
  .viewer-close{font-size:.75rem;padding:6px 10px;gap:8px}
  .viewer-controls{grid-template-columns:1fr 1fr;gap:8px}
  .viewer-controls p{grid-row:1;grid-column:1/-1;font-size:.78rem;min-height:24px}
  .viewer-controls button{grid-row:2;padding:8px 12px}
  .viewer-thumbnails button{height:54px;flex-basis:68px}
}