/* A quiet first-open signature. It disappears for the rest of this page session. */
.welcome-sign {position:absolute;top:min(94svh,calc(100svh - 32px - env(safe-area-inset-bottom)));left:50%;transform:translate(-50%,-50%);color:var(--welcome-sign-color);opacity:.62;font-family:Georgia,"Times New Roman",serif;font-size:clamp(23px,4vw,29px);font-weight:400;letter-spacing:.09em;line-height:1.5;white-space:nowrap;user-select:none;pointer-events:none}
.welcome-sign[hidden]{display:none}
html:has(.utility-drawers .open,.modal-backdrop.show,.image-viewer.open,.storage-notice:not([hidden])) .welcome-sign{visibility:hidden}
.image-position-editor{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.image-position-editor[hidden]{display:none}
.image-position-heading{font-size:13px;font-weight:600;margin-bottom:5px}
.image-position-help{font-size:12px;line-height:1.7;color:var(--text-sub);margin:0 0 12px}
.image-position-preview{position:relative;width:min(220px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--glass);cursor:grab;touch-action:none;user-select:none}
.image-position-preview.dragging{cursor:grabbing}
.image-position-preview:focus-visible{outline:3px solid var(--ss-accent,var(--cyan));outline-offset:3px}
.image-position-preview img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.image-position-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.image-position-actions .soft-btn{min-width:44px;min-height:44px;padding:8px 12px;touch-action:manipulation}
.image-position-actions button:disabled{opacity:.4;cursor:default}
.detail-icon,.image-preview{position:relative}
.image-zoom-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 4px;font-size:12px;color:var(--text-sub)}
.image-zoom-reset{border:0;background:transparent;color:inherit;font:inherit;min-height:36px;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.image-zoom-controls{display:flex;align-items:center;gap:10px}
.image-zoom-controls .soft-btn{flex:0 0 44px;min-height:44px;padding:8px;font-size:18px}
.image-zoom-range{flex:1;width:0;min-width:0;height:44px;margin:0;accent-color:var(--ss-accent,var(--cyan));cursor:pointer;touch-action:pan-y}
.image-zoom-range:focus-visible{outline:2px solid var(--ss-accent,var(--cyan));outline-offset:2px;border-radius:8px}
.image-zoom-value{min-width:42px;text-align:right;font-size:12px;color:var(--text-sub);font-variant-numeric:tabular-nums}
/* Keep full-photo pinch zoom independent of Safari page zoom and heavy blur layers. */
.image-viewer .viewer-backdrop,.image-viewer .viewer-caption,.image-viewer .viewer-close{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.image-viewer .viewer-backdrop{background:var(--ss-bottom)!important}
.image-viewer{touch-action:none}
.image-viewer .viewer-stage{will-change:auto;touch-action:none;box-shadow:0 12px 30px rgba(0,0,0,.14)!important}
.image-viewer .viewer-stage img{transform-origin:50% 50%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.viewer-caption{pointer-events:none}
.viewer-zoom-controls{position:fixed;z-index:906;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--glass-solid);border:1px solid var(--line);white-space:nowrap}
.viewer-zoom-controls .soft-btn{min-height:44px;min-width:44px;padding:8px 12px;touch-action:manipulation}
.viewer-zoom-controls output{min-width:42px;font-size:12px;color:var(--text-sub);font-variant-numeric:tabular-nums}
html:has(.image-viewer.open) .shell,html:has(.image-viewer.open) .page-canvas,html:has(.image-viewer.open) .modal-backdrop{visibility:hidden}

/* Keep the chosen crop stable when the card is selected. */
.liquid-card .card-art{transform:none!important}
/* Freeze background effects only while viewing a full photo. */
html:has(.image-viewer.open),html:has(.image-viewer.open) .caustics{animation-play-state:paused}
html:has(.image-viewer.open) .motion-effects{visibility:hidden}

/* Per-picture quality: inherits each UI's own button/theme treatment. */
.image-quality{margin-top:14px}
.image-quality-heading{font-size:13px;font-weight:600;margin-bottom:8px}
.image-quality-options{display:flex;gap:10px}
.image-quality-options .image-quality-btn{flex:1;min-width:0;min-height:48px;display:grid;gap:2px;padding:8px 12px;text-align:center;font-size:13px;line-height:1.4}
.image-quality-caption{font-size:11px;font-weight:400;opacity:.75}
.image-quality-btn[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:-3px;font-weight:700}
.image-quality-btn:disabled{cursor:wait}

/* Explicit backup preparation and recovery, inheriting each UI theme. */
.backup-file-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:8px}
.backup-file-actions[hidden]{display:none}
.recovery-dialog{position:fixed!important;inset:0!important;transform:none!important;margin:auto!important;width:min(600px,calc(100vw - 32px))!important;max-height:calc(100svh - 64px)!important;overflow:auto;box-sizing:border-box;font:inherit;color:inherit}
.recovery-dialog:not([open]){display:none}
.recovery-dialog::backdrop{background:var(--mono-paper,rgba(0,0,0,.28))}
.recovery-dialog p,.recovery-dialog li{color:var(--text-main);opacity:1;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.recovery-dialog ul{padding-left:20px}
.recovery-actions{display:flex;flex-wrap:wrap;gap:8px}
.recovery-actions .soft-btn,.backup-file-actions .soft-btn{min-height:44px;white-space:normal}
.recovery-actions [hidden]{display:none}
#recoveryStatus{min-height:1.7em}

.settings-drawer.open[data-backup-active]{overflow-y:auto!important;overscroll-behavior-y:contain;min-height:0}