/* Shared surfaces are scoped to overlays and menus, never the page or wallpaper preview. */
body{--popup-panel:rgba(255,255,255,.94);--popup-input:rgba(239,242,249,.9);--popup-option:#fff;--popup-ink:#252d40;--popup-muted:#5d687d;--popup-line:rgba(153,166,196,.3);--popup-soft:rgba(99,91,224,.1);--popup-accent:#5753d9;--popup-danger:#bd435d;--popup-shadow:0 16px 48px rgba(22,28,55,.18)}
body.dark-mode{--popup-panel:rgba(44,34,73,.93);--popup-input:rgba(18,13,37,.38);--popup-option:#302744;--popup-ink:#f8f7ff;--popup-muted:#d4cfe3;--popup-line:rgba(222,214,255,.22);--popup-soft:rgba(180,158,255,.16);--popup-accent:#d3c7ff;--popup-danger:#ffabb9;--popup-shadow:0 16px 48px rgba(15,9,34,.3)}
body.wallpaper-dusk{--popup-panel:rgba(97,81,128,.55);--popup-input:rgba(255,255,255,.1);--popup-option:#645477;--popup-ink:#fff;--popup-muted:#eee8f7;--popup-line:rgba(241,232,255,.28);--popup-soft:rgba(221,204,255,.18);--popup-accent:#eee4ff;--popup-danger:#ffc0c9;--popup-shadow:0 12px 36px rgba(36,22,60,.16)}
body.wallpaper-photo{--popup-panel:rgba(78,85,99,.55);--popup-input:rgba(255,255,255,.1);--popup-option:#505969;--popup-ink:#fff;--popup-muted:#e9edf5;--popup-line:rgba(235,242,255,.28);--popup-soft:rgba(212,220,255,.18);--popup-accent:#e7e9ff;--popup-danger:#ffc0c9;--popup-shadow:0 12px 36px rgba(12,18,30,.16)}
body:is(.wallpaper-light):not(.wallpaper-photo):not(.wallpaper-dusk){--popup-panel:rgba(255,255,255,.94);--popup-input:rgba(239,242,249,.9);--popup-option:#fff;--popup-ink:#252d40;--popup-muted:#5d687d;--popup-line:rgba(153,166,196,.3);--popup-soft:rgba(99,91,224,.1);--popup-accent:#5753d9;--popup-danger:#bd435d}
body :is(.bookmark-modal-content,.modal-content,.popup-content,.bookmark-menu-content,#userDropdownMenu,#createGroupForm){
    --surface:var(--popup-panel);--wallpaper-solid:var(--popup-panel);--page:var(--popup-input);--ink:var(--popup-ink);--muted:var(--popup-muted);--line:var(--popup-line);--soft:var(--popup-soft);--hover:var(--popup-soft);--accent:var(--popup-accent);--danger:var(--popup-danger);
    /* Existing dialogs have ID-specific and photo-specific surfaces. */
    background:var(--popup-panel)!important;color:var(--popup-ink);border:1px solid var(--popup-line);box-shadow:var(--popup-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color-scheme:light
}
body:is(.wallpaper-dusk,.wallpaper-photo,.dark-mode:not(.wallpaper-light)) :is(.bookmark-modal-content,.modal-content,.popup-content,.bookmark-menu-content,#userDropdownMenu,#createGroupForm){color-scheme:dark}
body :is(.bookmark-modal-content,.modal-content,.popup-content){border-radius:20px}
body :is(.bookmark-menu-content,#userDropdownMenu,#createGroupForm){border-radius:13px}
body :is(.bookmark-modal-content,.modal-content,.popup-content) :is(h2,h3,.popup-title){color:var(--popup-ink)}
body :is(.bookmark-modal-content,.modal-content,.popup-content) :is(label,.popup-description,[class*="text-gray-"]){color:var(--popup-muted)}
body :is(.bookmark-modal-content,.modal-content,.popup-content,.bookmark-menu-content,#createGroupForm) :is(input:not([type=range]):not([type=radio]):not([type=checkbox]),textarea,select),
body #createGroupForm #newGroupName{background:var(--popup-input);color:var(--popup-ink);border:1px solid var(--popup-line);border-radius:10px;caret-color:var(--popup-ink);box-shadow:none}
body :is(.bookmark-modal-content,.modal-content,.popup-content,.bookmark-menu-content,#createGroupForm) :is(input,textarea)::placeholder{color:var(--popup-muted);opacity:.75}
body :is(.bookmark-modal-content,.modal-content,.bookmark-menu-content,#createGroupForm) :is(input,textarea,select):focus-visible{outline:2px solid var(--popup-accent);outline-offset:2px}
body :is(.bookmark-modal-content,.modal-content,.bookmark-menu-content) select option{background:var(--popup-option);color:var(--popup-ink)}
body :is(.bookmark-modal-content,.modal-content,.popup-content,.bookmark-menu-content,#userDropdownMenu,#createGroupForm) :is(.bookmark-text-button,.bookmark-button:not(.bookmark-add),.popup-close){color:var(--popup-accent)}
body :is(.bookmark-menu-content,#userDropdownMenu) a{color:var(--popup-ink)}
body :is(.bookmark-menu-content,#userDropdownMenu) :is(a,button):hover{background:var(--popup-soft)}
body :is(.bookmark-menu-content,.bookmark-modal-content) .bookmark-remove,body #clearImportedBookmarks{color:var(--popup-danger)}
body :is(.bookmark-modal-content,.modal-content) .bookmark-add,body #saveSort,body #saveDeviceCode{--accent:#6058e9;--on-accent:#fff;background:linear-gradient(140deg,#7369ed,#6058e9);color:#fff}
body #createGroupForm #saveGroupButton{background:var(--popup-soft);color:var(--popup-accent)}
body .background-preset{background:var(--popup-input);color:var(--popup-muted);border-color:var(--popup-line)}
body .background-preset[aria-pressed=true]{border-color:var(--popup-accent);color:var(--popup-ink);box-shadow:0 0 0 1px var(--popup-accent)}
body #bookmarkForm .bookmark-form-actions{background:transparent;border-color:var(--popup-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body .bookmark-modal,body .modal-overlay{background-color:rgba(14,18,32,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.wallpaper-dusk :is(.bookmark-modal,.modal-overlay){background-color:rgba(28,18,46,.24)}
body.wallpaper-photo :is(.bookmark-modal,.modal-overlay){background-color:rgba(14,18,32,.24)}
/* Menus stay reachable in short windows; scrolling their contents never scrolls the page. */
body .bookmark-menu-content{box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body .bookmark-menu-content :is(button,select){min-height:36px}
body .bookmark-menu-content.bookmark-floating-menu{position:fixed;z-index:90;margin:0;max-width:calc(100vw - 16px)}
body #userDropdownMenu{box-sizing:border-box;width:220px;max-width:calc(100vw - 24px);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body :is(.bookmark-modal,.modal-overlay){box-sizing:border-box;padding:16px;overflow-y:auto;overscroll-behavior:contain}
body .background-dialog{--dialog-width:470px}
body .bookmark-import-dialog{--dialog-width:480px}
body .feedback-dialog{--dialog-width:400px}
body .modal-content{--dialog-width:480px}
body :is(.bookmark-modal-content,.modal-content,.popup-content){box-sizing:border-box;max-width:min(var(--dialog-width,440px),calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body #backgroundModal .background-dialog,body #bookmarkModal .bookmark-modal-content,body #sortCategoriesModal .modal-content{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
@media(max-width:760px),(max-height:700px){
    body :is(.bookmark-modal-content,.modal-content,.popup-content){padding:18px 20px;border-radius:17px}
    body .bookmark-modal-header{margin-bottom:12px}
    body .bookmark-modal-header h2{font-size:18px}
    body .bookmark-modal-content label{margin:12px 0}
    body .bookmark-form-actions{margin-top:16px}
}
@media(max-width:480px){
    body :is(.bookmark-modal,.modal-overlay){padding:12px}
    body :is(.bookmark-modal-content,.modal-content,.popup-content){width:100%;max-width:min(var(--dialog-width,440px),calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border-radius:16px}
    body #backgroundModal .background-dialog,body #bookmarkModal .bookmark-modal-content,body #sortCategoriesModal .modal-content{max-height:calc(100dvh - 24px);padding:16px}
    body .background-presets{gap:6px}
}
@media(pointer:coarse){
    body .bookmark-menu summary{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0}
    body .bookmark-menu-content :is(button,select),body #userDropdownMenu a,body .bookmark-modal-content button{min-height:44px}
    body .bookmark-modal-content :is(input:not([type=range]),textarea,select),body #createGroupForm input,body .bookmark-menu-content select{font-size:16px}
}
@media(max-height:500px){
    body :is(.bookmark-modal,.modal-overlay){align-items:flex-start;padding-top:10px;padding-bottom:10px}
    body :is(.bookmark-modal-content,.modal-content){max-height:calc(100dvh - 20px);padding:12px 16px}
    body #backgroundModal .background-dialog,body #bookmarkModal .bookmark-modal-content,body #sortCategoriesModal .modal-content{max-height:calc(100dvh - 20px);padding:12px 16px}
}
@media(max-height:760px){
    body #backgroundModal .background-dialog{--dialog-width:440px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:16px 18px 12px}
    body #backgroundModal .bookmark-modal-header{margin-bottom:8px}
    body #backgroundModal .background-preset-swatch{height:32px}
    body #backgroundModal .background-preview{height:64px;flex-shrink:0}
    body #backgroundModal .background-control{margin:8px 0}
    body #backgroundModal .background-help{font-size:11px;line-height:1.6;margin-bottom:8px}
    body #backgroundModal .bookmark-form-actions{margin-top:10px;padding-top:8px}
}