.photo-thumbnail{position:relative;display:block;padding:0;border:0;width:100%;overflow:hidden;cursor:zoom-in;background:#071915;text-align:start}
.photo-thumbnail img{display:block;width:100%}
.photo-enlarge{position:absolute;inset:auto 10px 10px auto;display:flex;align-items:center;gap:7px;padding:8px 10px;background:#102923e8;border:1px solid #dbe9c942;border-radius:4px;color:#f0f3df;font-size:11px}
.photo-enlarge svg{width:16px;height:16px}
dialog.photo-dialog{width:min(1120px,calc(100vw - 28px));height:min(900px,calc(100dvh - 28px));max-height:calc(100dvh - 28px);overflow:hidden}
dialog.photo-dialog[open]{display:flex;flex-direction:column}
.photo-dialog .dialog-top{flex:none;padding:16px 22px}
.photo-dialog .dialog-top h2{font-size:clamp(19px,3vw,27px);margin-top:5px}
.photo-dialog #overlay-body{display:flex;flex-direction:column;flex:1;min-height:0;max-height:none;padding:0 20px 15px;overflow:hidden;gap:10px}
.photo-stage{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;background:#071611;border:1px solid #c4d4b623;direction:ltr;scrollbar-width:thin}
.photo-zoom{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in;touch-action:pan-x pan-y}
.photo-zoom:hover{background:transparent}
.photo-zoom:active{transform:none}
.photo-zoom img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.photo-stage.is-zoomed .photo-zoom{width:200%;height:200%;cursor:zoom-out}
.photo-empty{height:100%;display:grid;place-items:center;padding:20px;text-align:center;color:var(--muted)}
.photo-viewer-meta{flex:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:11px;line-height:1.5;color:var(--muted);margin:0}
.photo-viewer-actions{flex:none;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:10px}
.photo-viewer-actions button{min-height:44px;padding:8px;font-size:12px;white-space:normal}
.photo-viewer-actions button:first-child,.photo-viewer-actions button:last-child{font-size:26px;line-height:1}
.photo-dialog .controller-help{display:none}
@media(max-width:650px),(max-height:500px){
 dialog.photo-dialog{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px)}
 .photo-dialog .dialog-top{padding:10px 12px}.photo-dialog .dialog-top .micro-label{font-size:9px}
 .photo-dialog #overlay-body{padding:0 10px 10px;gap:8px}.photo-viewer-meta{font-size:10px}
}