/* Photo first: one persistent control bar, no competing toolbars. */
body.viewer-open{overflow:hidden}
.viewer{padding:0;border:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;background:#000;color:#fff;overflow:hidden;overscroll-behavior:contain}
.viewer[open]{display:flex;flex-direction:column}
.viewer::backdrop{background:#000}
.viewer-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.viewer-heading{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:start;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 20px;background:linear-gradient(#000b,transparent);pointer-events:none;text-shadow:0 1px 6px #000}
.viewer-heading h2{font-size:clamp(24px,4vw,30px);line-height:1.1;max-width:85%}
#viewer-count{flex-shrink:0;font:14px/1.5 system-ui;padding:2px 6px;border-radius:4px;background:#0009}
.compare-window{position:absolute;inset:0;--split:50%;background:#000;overflow:hidden}
.photo-layer{position:absolute;inset:0;background:#000;pointer-events:none}
.photo-layer img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;-webkit-user-drag:none}
.after-layer{clip-path:inset(calc(100% - var(--split)) 0 0 0)}
.photo-label{position:absolute;z-index:2;padding:3px 8px;background:#000b;border-radius:4px;font:600 14px/1.4 system-ui;pointer-events:none}
.before-label{top:calc(52px + env(safe-area-inset-top));left:12px}
.after-label{bottom:12px;left:12px}
.comparison-line{position:absolute;z-index:2;left:0;right:0;top:calc(100% - var(--split));height:2px;background:#fff;box-shadow:0 1px 6px #000;pointer-events:none}
.divider{position:absolute;z-index:3;left:0;right:0;top:clamp(22px,calc(100% - var(--split)),calc(100% - 22px));height:44px;margin-top:-22px;cursor:ns-resize;touch-action:none;outline-offset:-3px}
.divider-handle{position:absolute;left:50%;transform:translateX(-50%);height:44px;min-width:92px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:2px solid #fff;background:#b91420;color:#fff;box-shadow:0 2px 12px #0009;font:24px/1 system-ui}
.divider-handle strong{font-size:14px;letter-spacing:.03em}
.drag-help{position:absolute;z-index:3;top:calc(100% - var(--split) - 66px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:5px 9px;border-radius:5px;background:#000d;color:#fff;font:14px/1.3 system-ui;text-align:center;pointer-events:none}
.viewer.has-compared .drag-help{display:none}
.photo-canvas{position:absolute;inset:0;overflow:hidden;background:#000}
.photo-canvas>img{position:absolute;left:50%;top:50%;max-width:none;object-fit:contain;transform-origin:center;-webkit-user-drag:none}
.photo-canvas.zoomed{cursor:grab}.photo-canvas.zoomed:active{cursor:grabbing}
.photo-canvas .photo-label{top:calc(52px + env(safe-area-inset-top));left:12px}
.viewer-bar{display:flex;flex-shrink:0;gap:5px;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:1px solid #ffffff30;background:#111}
.viewer-actions{display:contents}
.viewer-bar button{flex:1 1 0;min-width:44px;min-height:44px;max-width:150px;margin:0;padding:5px 3px;border:1px solid #ffffff50;border-radius:9px;background:#222;color:#fff;font:600 14px/1.2 system-ui;touch-action:manipulation}
.viewer-bar{justify-content:center}
.viewer-bar button[aria-pressed=true]{background:#fff;color:#111;border-color:#fff}
.viewer-bar button:active{background:#b91420;color:#fff;border-color:#fff}
.viewer button:focus-visible,.viewer [role=slider]:focus-visible{outline:3px solid #f8d16f;outline-offset:-3px}
.viewer button:disabled{opacity:.45}
.viewer #viewer-error{position:absolute;z-index:5;inset:40% 12px auto;padding:16px;background:#181818ed;color:#fff;font:16px/1.4 system-ui;text-align:center}
@media(orientation:landscape) and (max-height:550px){.viewer-heading{padding-top:8px}.viewer-heading h2{font-size:24px}.before-label,.photo-canvas .photo-label{top:42px}.viewer-bar{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}}