#photo-viewer{width:min(1200px,calc(100% - 24px));height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:16px;background:#10120f;overflow:hidden}
#photo-viewer[open]{display:flex;flex-direction:column;gap:12px}
.photo-toolbar{display:flex;align-items:center;gap:16px;flex-shrink:0}
#photo-title{flex:1;min-width:0;font-size:16px;line-height:1.4;letter-spacing:0;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#close-photo{flex-shrink:0;width:48px;height:48px;font-size:32px;line-height:1;background:var(--lime);color:var(--bg);border-color:var(--lime)}
#photo-status{color:var(--muted);font-size:14px;line-height:1.5;margin:0;flex-shrink:0}
#photo-content{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;overflow:hidden;touch-action:none;user-select:none}
#photo-content.photo-zoomed{cursor:grab}
#photo-content.photo-dragging{cursor:grabbing}
.photo-zoom-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0}
.photo-zoom-controls .button{min-width:48px;min-height:48px;padding:10px 14px}
.photo-zoom-controls .button:disabled{cursor:default}
#photo-zoom-level{min-width:4ch;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
#photo-gesture-help{color:var(--muted);font-size:12px;line-height:1.4;text-align:center;margin:0;flex-shrink:0}
#photo-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
#photo-navigation .button{min-height:48px;padding:12px 16px}
#photo-navigation .button:disabled{cursor:default}
#photo-counter{color:var(--muted);font-size:14px;white-space:nowrap}
.full-photo{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center;pointer-events:none;flex-shrink:0}
@media(max-width:640px){#photo-viewer{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}}