/* 4uPass presentation layer. Upstream security and form controls are preserved. */
:root{--fourupass-blue:#075ec8;--fourupass-cyan:#27b9ef;--fourupass-ink:#142a45}
body.layout_frontend{background:radial-gradient(ellipse at 20% 0%,#0678dc12,transparent 55%),rgb(var(--color-background-alt,245 248 252))!important}
img.new-logo-themed{content:url('../images/4upass/4upass-192.webp')!important;width:84px!important;height:84px!important;object-fit:contain;border-radius:20px}
bit-nav-logo a .fourupass-nav-icon{width:46px;height:46px;object-fit:contain;border-radius:10px}
bit-nav-logo a:has(.fourupass-nav-icon)>bit-svg{display:none!important}
bit-nav-logo a:has(.fourupass-nav-icon){display:flex!important;align-items:center;gap:10px;text-decoration:none!important;padding:8px!important}
.fourupass-wordmark{font-size:23px;font-weight:750;color:inherit;letter-spacing:-.7px}
.fourupass-wordmark span{color:#209ce8}
.fourupass-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font:13px/1.5 Inter,system-ui,sans-serif;margin:18px auto;padding:12px 16px;max-width:760px;color:rgb(var(--color-text-main,23 49 79))}
.fourupass-controls a{color:inherit;text-decoration:none}.fourupass-controls a:hover{text-decoration:underline}
.fourupass-languages{display:inline-flex;border:1px solid #7393b866;border-radius:10px;padding:3px;gap:2px}
.fourupass-languages button{border:0;border-radius:7px;background:transparent;padding:7px 10px;cursor:pointer;color:inherit;font-weight:650}
.fourupass-languages button[aria-pressed=true]{background:#075ec8;color:#fff}
.fourupass-controls button:focus-visible,.fourupass-controls a:focus-visible,.fourupass-url-tool summary:focus-visible{outline:3px solid #27b9ef;outline-offset:3px}
.fourupass-status{display:inline-flex;gap:6px;align-items:center;font-size:12px}.fourupass-status:before{content:'';width:7px;height:7px;border-radius:50%;background:#249968}.fourupass-status[data-offline=true]:before{background:#c47716}
#fourupass-auth-intro{text-align:center;color:rgb(var(--color-text-muted,82 98 123));font-size:14px;margin:0 20px 18px}
#fourupass-credit{font-size:11px;color:rgb(var(--color-text-muted,92 109 131));text-align:center;line-height:1.6;max-width:680px;margin:0 auto 20px;padding:0 20px}
#fourupass-app-tools{position:fixed;bottom:12px;right:14px;z-index:30;background-color:#ffffff;background-color:rgb(var(--color-background,255 255 255));box-shadow:0 6px 24px #02061740;border:1px solid #7f98b755;border-radius:14px;max-width:calc(100vw - 24px);margin:0}
body.layout_frontend #fourupass-app-tools{position:static;box-shadow:none;background:transparent;border:0;margin:12px auto}
#fourupass-app-tools .fourupass-advanced{font-size:12px}
body.fourupass-extension #fourupass-app-tools{position:static;border-radius:0;border-width:1px 0 0;box-shadow:none;margin:0;padding:8px;gap:8px;font-size:12px}
.fourupass-url-tool{font-size:12px;margin:8px 0 16px;padding:10px 12px;border:1px solid #7997b84d;border-radius:10px;color:rgb(var(--color-text-main,25 48 78))}
.fourupass-url-tool summary{cursor:pointer;font-weight:600}.fourupass-url-tool label{display:block;margin:10px 0 4px}.fourupass-url-tool input,.fourupass-url-tool select{width:100%;padding:9px;border:1px solid #829ab6;border-radius:7px;background-color:#ffffff;background-color:rgb(var(--color-background,255 255 255));color:inherit}.fourupass-url-tool output{display:block;padding:8px 0;font-weight:650}.fourupass-url-tool p{margin:7px 0}
@media(max-width:650px){html:not(.browser_chrome),body:not(.fourupass-extension){min-width:0!important;width:100%!important}body.layout_frontend app-root>div{min-width:0!important}body.layout_frontend .tw-w-96,body.layout_frontend .tw-w-\[400px\],body.layout_frontend .tw-w-\[450px\]{width:min(100% - 24px,440px)!important}body.layout_frontend .tw-min-w-96{min-width:0!important}body.layout_frontend img.new-logo-themed{width:58px!important;height:58px!important}body.layout_frontend .tw-fixed:has(>img.new-logo-themed){position:relative!important;padding:16px!important}body.layout_frontend footer{margin-top:20px!important;margin-bottom:20px!important}#fourupass-app-tools{position:static;margin:12px;max-width:calc(100% - 24px)}.fourupass-controls{gap:12px;padding:12px}input,textarea,select{font-size:16px!important}button[bitbutton],a[bitbutton]{min-height:44px}bit-dialog, [role=dialog]{max-width:calc(100vw - 16px)!important}}
@media(prefers-reduced-motion:reduce){.fourupass-controls *{scroll-behavior:auto!important}}

.fourupass-brand-link{display:flex!important;align-items:center;gap:12px;width:auto!important;min-width:165px;flex-shrink:0;text-decoration:none!important;color:rgb(var(--color-text-main,27 32 41))!important}.fourupass-brand-link>bit-svg{display:none!important}.fourupass-brand-link .fourupass-nav-icon{width:64px;height:64px;border-radius:14px}.fourupass-brand-link .fourupass-wordmark{font-size:25px}body.layout_frontend header:has(#fourupass-app-tools){align-items:center;flex-wrap:wrap;gap:8px}body.layout_frontend header #fourupass-app-tools{margin:0 0 0 auto;max-width:none;padding:10px 0;justify-content:flex-end}body.layout_frontend header #fourupass-app-tools .fourupass-status{display:none}@media(max-width:650px){.fourupass-brand-link .fourupass-nav-icon{width:44px;height:44px}.fourupass-brand-link{padding:10px 0!important}body.layout_frontend header #fourupass-app-tools{justify-content:center;margin:auto;gap:12px;width:100%}body.layout_frontend header #fourupass-app-tools a{font-size:12px}}

body.fourupass-extension popup-header{display:block}body.fourupass-extension popup-header #fourupass-app-tools{width:100%;max-width:none;background-color:#ffffff;background-color:rgb(var(--color-background,255 255 255));border-color:#7890ab44}body.fourupass-extension .fourupass-popup-brand{display:inline-flex!important;align-items:center;gap:8px;width:auto;font-weight:700;font-size:18px}body.fourupass-extension bit-svg[data-fourupass-logo=true]{display:none!important}body.fourupass-extension .fourupass-popup-brand img{border-radius:7px}

/* Supplied app artwork on login, signup and lock screens. */
body.fourupass-auth-screen bit-landing-hero bit-svg{display:none!important}
.fourupass-auth-hero-img{width:104px!important;height:104px!important;object-fit:contain;display:block;margin:0 auto;border-radius:20px}
bit-landing-hero div:has(>.fourupass-auth-hero-img){width:104px!important;height:104px!important}

body.fourupass-extension #fourupass-app-tools{font-size:11px;gap:6px;padding:6px;flex-shrink:0}body.fourupass-extension #fourupass-app-tools .fourupass-status{display:none}body.fourupass-extension #fourupass-app-tools button{padding:4px 7px}

/* Account, community and PWA install dialogs remain usable at phone widths with solid opaque surfaces. */
a[href*="dani-garcia/vaultwarden"]{display:none!important}
.fourupass-community-dialog,.fourupass-security-dialog,.fourupass-install-dialog{box-sizing:border-box;width:min(540px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #64748b88;border-radius:18px;padding:24px;background-color:#ffffff!important;background-color:rgb(var(--color-background,255 255 255))!important;color:#17314f;color:rgb(var(--color-text-main,23 49 79));box-shadow:0 24px 64px rgba(2,6,23,.68);font:15px/1.55 system-ui,sans-serif}
.theme_dark .fourupass-community-dialog,.theme_dark .fourupass-security-dialog,.theme_dark .fourupass-install-dialog,.theme_dark .fourupass-quick-unlock,.theme_dark .fourupass-quick-start,.theme_dark #fourupass-app-tools{background-color:#1e2633!important;color:#f3f6f9!important;border-color:#3b4a61!important}
.fourupass-community-dialog::backdrop,.fourupass-security-dialog::backdrop,.fourupass-install-dialog::backdrop{background:rgba(4,9,20,.88)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.fourupass-community-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.fourupass-community-grid a{padding:10px 12px;border:1px solid #7890ab55;border-radius:9px;background-color:rgb(var(--color-background-alt,243 246 249));color:inherit;text-decoration:none}.fourupass-community-dialog h2,.fourupass-security-dialog h2,.fourupass-install-dialog h2{font-size:22px;margin:0 0 8px}.fourupass-install-dialog ol{margin:12px 0 16px;padding-left:20px;display:grid;gap:8px}.fourupass-community-dialog button,.fourupass-security-dialog button,.fourupass-install-dialog button,.fourupass-quick-unlock button,.fourupass-quick-start button,#fourupass-app-tools>button{border:1px solid #7890ab77;border-radius:9px;padding:10px 14px;background-color:rgb(var(--color-background-alt,243 246 249));color:inherit;cursor:pointer;font-weight:600}.fourupass-security-dialog form{display:grid;gap:14px}.fourupass-security-dialog p{margin:0}.fourupass-security-badge{padding:10px 12px;border-radius:10px;background:#10b98122;border:1px solid #10b98177;color:#059669;font-weight:650;font-size:14px}.theme_dark .fourupass-security-badge{color:#34d399;background:#064e3b88;border-color:#10b98188}.fourupass-security-dialog label,.fourupass-quick-unlock label{display:grid;gap:6px;font-weight:600}.fourupass-security-dialog input,.fourupass-security-dialog select,.fourupass-quick-unlock input{box-sizing:border-box;min-width:0;width:100%;border:1px solid #64748b99;border-radius:9px;padding:11px 12px;background-color:#f3f6f9!important;background-color:rgb(var(--color-background-alt,243 246 249))!important;color:inherit;font:inherit}.theme_dark .fourupass-security-dialog input,.theme_dark .fourupass-security-dialog select,.theme_dark .fourupass-quick-unlock input{background-color:#111824!important;color:#f3f6f9!important;border-color:#4b5d78!important}.fourupass-security-dialog select option{background-color:#ffffff;color:#17314f}.theme_dark .fourupass-security-dialog select option{background-color:#111824;color:#f3f6f9}.fourupass-security-note{font-size:13px;opacity:.88}.fourupass-security-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:4px}.fourupass-security-actions button[type=submit],.fourupass-quick-unlock button[type=submit],.fourupass-quick-start button[data-primary],.fourupass-install-dialog button[data-primary]{background:#075ec8!important;border-color:#075ec8!important;color:#ffffff!important}.fourupass-quick-unlock,.fourupass-quick-start{padding:18px;margin:12px 0 20px;border:1px solid #7890ab66;border-radius:14px;background-color:#ffffff!important;background-color:rgb(var(--color-background,255 255 255))!important;color:#17314f;color:rgb(var(--color-text-main,23 49 79));box-shadow:0 8px 24px rgba(2,6,23,.14)}.fourupass-quick-start[data-confirmed=true]{border-color:#10b98188!important;background-color:#ecfdf5!important;color:#065f46!important}.theme_dark .fourupass-quick-start[data-confirmed=true]{background-color:#0f2922!important;color:#d1fae5!important;border-color:#10b98188!important}.fourupass-quick-unlock form{display:grid;gap:12px}.fourupass-quick-start p{margin:8px 0 12px}.fourupass-quick-start button{margin-right:8px;margin-top:4px}.fourupass-quick-unlock h2{font-size:18px;margin:0 0 10px}.fourupass-filter-toggle{display:none}
@media(max-width:650px){
 app-vault{display:block;min-width:0;max-width:100%}
 app-vault>div:has(app-vault-filter){display:flex!important;flex-direction:column!important;gap:12px;margin-inline:0!important}
 app-vault>div:has(app-vault-filter)>div{flex-basis:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;padding-inline:0!important}
 .fourupass-filter-toggle{display:block;width:100%;text-align:left;padding:12px;border:1px solid #7890ab55;border-radius:9px;background:transparent;color:inherit;font:inherit;margin-bottom:8px}
 .fourupass-filter-container[data-fourupass-expanded=false] app-vault-filter{display:none}
 app-vault-items{display:block;min-width:0;max-width:100%;overflow-x:auto}
 app-vault-items table{width:100%;min-width:300px}
 app-vault-items td,app-vault-items th{padding-inline:6px!important}
 app-vault-items th[colspan="2"]{width:64px!important}
 app-vault-items th:last-child{width:48px!important}
 app-vault-items td.tw-pr-7{padding-right:6px!important}
 .cdk-overlay-pane:has(app-vault-welcome-dialog){width:calc(100vw - 24px)!important;max-width:680px!important;max-height:calc(100dvh - 24px)!important}
 app-vault-welcome-dialog bit-dialog{width:100%!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto}
 app-vault-welcome-dialog .tw-px-12{padding-inline:14px!important}
 app-vault-welcome-dialog img{max-height:150px;object-fit:contain;width:100%}
 app-vault-welcome-dialog [bitdialogfooter]{flex-wrap:wrap;padding:16px!important;gap:12px!important}
 app-vault-welcome-dialog h2{font-size:24px!important;line-height:1.25!important}
 app-vault-welcome-dialog p{font-size:16px!important;line-height:1.55!important}
 app-vault-onboarding button[data-accordion-trigger]{flex-wrap:wrap!important;align-items:flex-start!important;gap:10px!important}
 app-vault-onboarding button[data-accordion-trigger]>div.tw-flex-1{flex:1 1 calc(100% - 76px)!important;min-width:170px!important}
 app-vault-onboarding button[data-accordion-trigger] bit-badge{margin-left:auto!important;max-width:100%;white-space:normal!important}
 app-vault-onboarding [data-accordion-content]>div{max-height:none!important}
 app-onboarding-task>div.tw-flex{flex-wrap:wrap!important;align-items:center!important;gap:10px!important}
 app-onboarding-task>div.tw-flex>div.tw-flex-1{flex:1 1 180px!important;min-width:160px!important}
 .fourupass-community-dialog,.fourupass-security-dialog,.fourupass-install-dialog{padding:18px}.fourupass-community-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fourupass-community-grid a{font-size:13px;overflow-wrap:anywhere}
}