/* Reserve control space before sizing the image, including mobile browser bars. */
html body #lightbox:not([hidden]){position:fixed!important;inset:auto 0 auto 0!important;top:var(--detail-top,0px)!important;width:100%!important;height:var(--detail-height,100dvh)!important;max-height:none!important;display:flex!important;flex-direction:column!important;gap:10px!important;box-sizing:border-box!important;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))!important;overflow:hidden!important}
html body #lightbox .detail-header{display:flex;align-items:center;gap:8px;flex:0 0 44px;width:100%;min-width:0}
.detail-header-space{flex:1}
html body #lightbox .detail-header :is(#lightboxEdit,#lightboxPrev,#lightboxNext,#lightboxClose){position:static!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;margin:0!important;height:44px!important;min-height:44px!important;width:44px!important;min-width:44px!important;max-width:none!important;border-radius:15px!important;display:grid!important;place-items:center!important}
html body #lightbox .detail-header #lightboxEdit{display:inline-flex!important;align-items:center;gap:4px;white-space:nowrap;width:auto!important;padding:0 14px!important;font-size:13px!important}
html body #lightbox .detail-header [hidden]{display:none!important}
html body #lightbox .lightbox-inner{width:100%!important;max-width:1600px!important;height:auto!important;max-height:none!important;flex:1 1 0!important;min-height:0!important;min-width:0!important;align-self:center!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto auto!important;gap:10px!important;overflow:visible!important}
html body #lightbox :is(.lightbox-single-view,.lighting-compare-view){width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;grid-row:1;grid-column:1}
html body #lightbox .lightbox-single-view{display:flex!important;align-items:center;justify-content:center}
html body #lightbox .lightbox-inner :is(#lightboxSingleView,#lightingCompareView)[hidden]{display:none!important}
html body #lightbox .lightbox-inner img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-height:0!important;object-fit:contain!important;border-radius:12px!important}
html body #lightbox .lighting-compare-pane{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
html body #lightbox .lightbox-action-row{grid-row:2;position:relative!important;inset:auto!important;transform:none!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center;gap:8px!important;margin:0!important;min-height:40px;z-index:2}
html body #lightbox .lightbox-action-row :is(button,#lightboxLike,#lightboxFavorite){position:static!important;inset:auto!important;transform:none!important;margin:0!important;min-height:40px!important;height:auto!important;min-width:40px!important;padding:9px 14px!important;border-radius:14px!important;font-size:13px!important;line-height:1.4!important}
html body #lightbox #lightboxTags{grid-row:3;flex:none!important;margin:0!important;padding:0!important;gap:5px!important;max-height:min(24dvh,150px)!important;overflow:auto!important;overscroll-behavior:contain;width:100%}
html body #lightbox #lightboxTags>*{min-height:0!important;min-width:0!important;font-size:13px!important;line-height:1.35!important;padding:5px 9px!important;border-radius:10px!important;max-width:100%;overflow-wrap:anywhere}
.detail-tools{position:relative}
html body #lightbox .detail-tools-menu:not([hidden]){display:flex;flex-direction:column;gap:5px;position:absolute;bottom:calc(100% + 10px);left:0;width:180px;padding:8px;border:1px solid #e5dff0;border-radius:18px;background:#fff;box-shadow:0 12px 35px #0003}
html body #lightbox .detail-tools-menu button{width:100%!important;text-align:left!important;background:#f5f1fa!important;color:#514362!important}
html body #lightbox .detail-tools-menu [hidden]{display:none!important}
@media(max-width:600px),(max-height:600px){html body #lightbox:not([hidden]){gap:6px!important;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}html body #lightbox .lightbox-inner{gap:7px!important}html body #lightbox #lightboxTags>*{font-size:11px!important;padding:3px 6px!important;border-radius:8px!important}html body #lightbox #lightboxTags{gap:4px!important;max-height:23dvh!important}html body #lightbox .lightbox-action-row :is(button,#lightboxLike,#lightboxFavorite){padding:7px 10px!important;font-size:12px!important;min-height:36px!important}}
/* A single visible guidance page prevents horizontal nested scrollbars. */
html body #poseResultModal #poseResultBody{display:block!important;overflow:auto!important;min-width:0!important;min-height:0!important;flex:1 1 auto!important;scroll-snap-type:none!important}
html body #poseResultModal .pose-photo-page{width:100%!important;height:auto!important;overflow:visible!important}
html body #poseResultModal #poseResultBody :is(.pose-photo-page,.pose-result-copy)[hidden]{display:none!important}
html body #poseResultModal #poseResultImage{max-width:100%!important;max-height:65dvh!important;width:100%!important;height:auto!important;object-fit:contain!important}
html body #poseResultModal #poseResultBody .pose-result-copy{width:100%!important;height:auto!important;min-width:0!important;box-sizing:border-box!important;overflow-wrap:anywhere;overflow:visible!important}
html body #poseResultModal .pose-page-nav:not([hidden]){display:flex!important;gap:8px}
html body #poseResultModal .pose-page-nav button{flex:1}
/* Edge-to-edge comparison; both media share one aspect-matched viewing frame. */
html body #poseResultModal.is-camera-comparing{padding:0!important;background:#111!important}
html body #poseResultModal.is-camera-comparing .pose-modal-card{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;overflow:hidden!important;background:#111!important;display:block!important}
html body #poseResultModal.is-camera-comparing .pose-modal-card>*:not(.pose-camera-comparison):not(.edit-panel-head):not(.pose-camera-status){display:none!important}
html body #poseResultModal.is-camera-comparing .edit-panel-head{position:absolute!important;inset:0!important;pointer-events:none;z-index:4;margin:0!important;padding:0!important;border:0!important}
html body #poseResultModal.is-camera-comparing .edit-panel-head>*:not(#poseResultClose){display:none!important}
html body #poseResultModal.is-camera-comparing #poseResultClose{pointer-events:auto;position:absolute!important;top:max(12px,env(safe-area-inset-top),env(safe-area-inset-right))!important;right:max(12px,env(safe-area-inset-top),env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;margin:0!important;background:#ffffffdf!important;z-index:5}
html body #poseResultModal .pose-camera-comparison:not([hidden]){position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:2px;width:100%;height:100%;background:#16131b}
html body #poseResultModal .pose-camera-comparison.is-landscape{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
html body #poseResultModal .pose-camera-comparison>div{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border-radius:0;background:#16131b}
html body #poseResultModal .pose-camera-comparison :is(img,video){position:absolute;width:var(--camera-frame-width,100%)!important;height:var(--camera-frame-height,100%)!important;max-width:100%;max-height:100%;flex:none;background:#16131b;object-fit:contain}
html body #poseResultModal .pose-camera-comparison video{object-fit:cover}
html body #poseResultModal .pose-camera-comparison span{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:12px;z-index:2;padding:5px 9px;border-radius:9px;color:#fff;background:#171320a6;font-size:12px}
html body #poseResultModal.is-camera-comparing .pose-camera-status{position:absolute;left:12px;bottom:12px;right:12px;color:white;z-index:3;text-align:center;pointer-events:none}
html body #poseResultModal.is-camera-comparing.has-camera-stream .pose-camera-status{display:none}

html body #poseResultModal.is-camera-comparing #poseResultBody{display:none!important}

/* Compact controls leave the reference image room on phone-sized screens. */
html body :is(#poseResultModal,#editPanel){--dialog-control:38px;--dialog-inset:16px}
html body :is(#poseResultModal,#editPanel) .edit-panel-head{margin-bottom:12px!important;gap:10px!important}
html body :is(#poseResultModal,#editPanel) h2{font-size:22px!important;font-weight:700!important}
html body :is(#poseResultModal,#editPanel) button.btn{font-size:14px!important;font-weight:500!important;line-height:1.35!important;min-height:36px!important;padding:7px 12px!important;border-radius:12px!important;width:auto!important}
html body :is(#poseResultClose,#editClose){padding:0!important;font-size:24px!important}
html body #poseResultModal .pose-page-nav{gap:6px!important;margin:0 0 10px!important}
html body #poseResultModal .pose-page-nav button{padding:8px 12px!important;min-height:36px!important}
html body #poseResultModal .pose-field-actions{margin:0 0 10px!important;gap:6px!important}
html body #poseResultModal .pose-sketch-panel{margin:10px 0 0!important;padding:0!important}
html body #poseResultModal .pose-sketch-actions{display:flex!important;flex-wrap:wrap;gap:6px!important;justify-content:flex-start!important}
html body #poseResultModal .pose-sketch-actions button{flex:0 1 auto!important;width:auto!important}
html body #poseResultModal :is(.pose-sketch-status,.pose-sketch-note){font-size:13px!important;line-height:1.6!important}
html body #editPanel #editSelected{gap:5px!important}
html body #editPanel #editSelected>*{font-size:13px!important;padding:4px 7px!important;line-height:1.35!important;border-radius:9px!important}
html body #editPanel .edit-actions{gap:8px!important;margin-top:12px!important}
html body #editPanel .edit-rotation-controls{gap:8px!important;margin:10px 0 0!important}
/* Navigation stays at the viewport edges; uploader and edit share the header. */
html body #lightbox :is(#lightboxPrev,#lightboxNext){position:absolute!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:44px!important;height:60px!important;min-width:44px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:16px!important;z-index:5!important}
html body #lightbox #lightboxPrev{left:max(8px,env(safe-area-inset-left))!important;right:auto!important}
html body #lightbox #lightboxNext{right:max(8px,env(safe-area-inset-right))!important;left:auto!important}
html body #lightbox :is(#lightboxPrev,#lightboxNext)[hidden]{display:none!important}
.detail-uploader{display:flex;align-items:center;gap:9px;min-width:0;max-width:min(50vw,320px);color:#fff;text-decoration:none;padding:4px 8px 4px 0;border-radius:12px}
.detail-uploader-avatar{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden;background:#79649e;color:white}
.detail-uploader-avatar img{width:100%;height:100%;object-fit:cover}
.detail-uploader-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
@media(max-width:600px){html body #lightbox :is(#lightboxPrev,#lightboxNext){width:34px!important;min-width:34px!important;height:48px!important;border-radius:12px!important}.detail-uploader{gap:6px;max-width:calc(100vw - 165px)}.detail-uploader-name{font-size:12px}.detail-uploader-avatar{width:30px;height:30px;flex-basis:30px}html body #lightbox .detail-header #lightboxEdit{padding:0 10px!important}}
html body #lightbox .detail-header #lightboxEdit[hidden],html body #lightbox .detail-header #lightboxEdit.permission-hidden,html body #lightbox .detail-header .detail-uploader[hidden]{display:none!important}
html body #lightbox .detail-header .detail-uploader,html body #lightbox .detail-header .detail-uploader-name{color:#fff!important}

html body #poseResultModal #poseResultBody[hidden]{display:none!important}