#main-photo[data-photo-open]{cursor:zoom-in}
#main-photo[data-photo-open]:focus-visible{outline:3px solid #c6a765;outline-offset:-3px}
.photo-dialog{position:fixed;inset:auto;margin:0;left:var(--viewer-left,0);top:var(--viewer-top,0);width:var(--viewer-width,100vw);height:var(--viewer-height,100dvh);max-width:none;max-height:none;border:0;border-radius:0;padding:0;background:#111214;color:#fff;overflow:hidden;overscroll-behavior:none;z-index:2147483647}
.photo-dialog::backdrop{background:#111214}
.photo-dialog .photo-dialog-panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;padding:0;overflow:hidden}
.photo-dialog header{min-height:58px;padding:8px 20px;border-bottom:1px solid #ffffff24;background:#181a1d;gap:12px}
.photo-dialog header span{font-size:14px}
.photo-dialog button{min-height:44px;background:#292c31;color:#fff;border:1px solid #ffffff24;border-radius:8px;padding:10px 16px;cursor:pointer}
.photo-dialog button:hover{background:#3c4047}
.photo-dialog button:focus-visible{outline:3px solid #d4b779;outline-offset:2px}
.photo-dialog button:disabled{opacity:.35;cursor:default}
.photo-viewer-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);min-height:0;min-width:0}
.photo-viewer-stage{position:relative;min-width:0;min-height:0;overflow:hidden}
.photo-dialog .photo-large-frame{position:relative;width:100%;height:100%;min-height:0;margin:0;padding:12px;display:flex;align-items:center;justify-content:center}
.photo-dialog .photo-large-frame img{display:block;position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.photo-dialog .photo-large-frame img[hidden]{display:none}
.photo-viewer-stage>.photo-stage-step{position:absolute;top:50%;transform:translateY(-50%);width:44px;min-height:48px;padding:0;font-size:28px;background:#17191ed9;z-index:1}
.photo-stage-prev{left:16px}.photo-stage-next{right:16px}
.photo-picker{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:20px 16px;gap:12px;background:#1a1c20;border-left:1px solid #ffffff24}
.photo-picker-title{margin:0;font-size:16px;font-weight:600}
.photo-picker-rail{position:relative;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:6px 3px 12px;flex-shrink:0;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#8a8d93 #292c31;overscroll-behavior-x:contain;touch-action:pan-x pinch-zoom}
.photo-dialog .photo-choice{position:relative;flex:0 0 112px;width:112px;min-height:0;height:84px;padding:3px;border:2px solid transparent;overflow:hidden;scroll-snap-align:center;background:#0e0f11}
.photo-dialog .photo-choice.selected{border-color:#d4b779;background:#34302a}
.photo-choice img{display:block;width:100%;height:100%;object-fit:contain}
.photo-choice span{position:absolute;right:4px;bottom:4px;padding:1px 5px;border-radius:4px;background:#000c;color:white;font-size:12px;line-height:1.5}
.photo-dialog .photo-picker-controls{display:flex;justify-content:space-between;gap:8px}
.photo-dialog .photo-picker-controls button{flex:1;min-width:0;padding:8px 12px;font-size:20px}
.photo-viewer-open{overflow:hidden;overscroll-behavior:none}
@media(max-width:850px){.photo-viewer-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.photo-picker{padding:10px 16px;gap:6px;border-left:0;border-top:1px solid #ffffff24}.photo-picker-title{font-size:13px}.photo-picker-rail{padding:4px 3px 8px}.photo-dialog .photo-choice{flex-basis:96px;width:96px;height:70px}.photo-dialog .photo-picker-controls{display:none}.photo-dialog header{padding:8px 12px}.photo-dialog .photo-large-frame{padding:8px}.photo-stage-prev{left:8px}.photo-stage-next{right:8px}}
@media(max-height:420px) and (max-width:850px){.photo-dialog header{min-height:44px;padding:4px 10px}.photo-dialog header button{min-height:36px;padding:6px 10px}.photo-picker{padding:6px 12px;gap:2px}.photo-picker-title{display:none}.photo-dialog .photo-choice{flex-basis:78px;width:78px;height:52px}.photo-picker-rail{padding-bottom:6px}}
@media(prefers-reduced-motion:reduce){.photo-picker-rail{scroll-behavior:auto}}

/* Vertical photo picker */
.photo-dialog .photo-viewer-layout{
 grid-template-columns:minmax(0,1fr) 180px;
 grid-template-rows:minmax(0,1fr);
}
.photo-dialog .photo-picker{
 justify-content:flex-start;padding:12px;gap:10px;
 border-left:1px solid #ffffff24;border-top:0;overflow:hidden;
}
.photo-dialog .photo-picker-title{display:block;font-size:14px}
.photo-dialog .photo-picker-rail{
 flex-direction:column;flex:1 1 0;min-height:0;
 overflow-x:hidden;overflow-y:auto;
 scroll-snap-type:y proximity;touch-action:pan-y pinch-zoom;
 padding:4px;
}
.photo-dialog .photo-choice{
 flex:0 0 100px;width:100%;height:100px;scroll-snap-align:center;
}
.photo-dialog .photo-picker-controls{display:flex;flex-shrink:0}
@media(max-width:850px){
 .photo-dialog .photo-viewer-layout{grid-template-columns:minmax(0,1fr) 110px}
 .photo-dialog .photo-picker{padding:6px;gap:6px}
 .photo-dialog .photo-choice{flex-basis:70px;height:70px}
 .photo-dialog .photo-picker-title{font-size:12px}
}