/* ClearVault: warm paper, bold ink, friendly blue. All assets stay local. */
:root{--paper:#f5f1e7;--ink:#20201f;--blue:#719ff1;--blue-light:#e6eeff;--coral:#ff6659;--muted:#66645f;--line:#dedbd3;--purple:#315ca0;--purple-dark:#24477f;--lilac:#e6eeff;--shadow:4px 4px 0 #20201f;color:var(--ink);background:var(--paper);font-family:"Arial Rounded MT Bold","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
body{background:var(--paper);color:var(--ink)}
.brand,.brand>span,.brand-dot{color:var(--ink);font-weight:850;letter-spacing:-1px}.brand>svg{color:var(--ink);fill:#fff;stroke-width:2}.brand-dot{color:var(--coral)}
.button{border-radius:18px;font-weight:700;min-height:44px;padding:12px 19px;border:1.5px solid var(--ink);transition:background .15s,transform .15s,box-shadow .15s}
.button.primary{background:var(--blue);color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.button.primary:hover{background:#8eb5fa;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.button.secondary{color:var(--ink);background:#fffef9;border:1.5px solid var(--ink)}.button.secondary:hover{background:#e7edfa}.button.danger{background:#fff0ec;color:#922c25;border-color:#922c25}
.text-button{color:#294f8c;font-weight:650}.icon-button{color:#595a58;border-radius:10px}.icon-button:hover{color:var(--ink);background:var(--blue-light)}
button:focus-visible,a:focus-visible,input:focus,textarea:focus,select:focus{outline:3px solid #416db6;outline-offset:3px}
.welcome{background:var(--paper);max-width:1320px;margin:auto;padding:0 6%}.welcome-header{padding:26px 0;border-bottom:1px solid #20201f18}.welcome-header .brand{font-size:29px}.welcome-header-actions{gap:22px}
.privacy-pill{color:#55564f;font-size:12px}.privacy-pill i,.tiny-dot,.saved-dot{background:#398268}.welcome-header .privacy-pill{border:1px solid var(--ink);padding:9px 14px;border-radius:30px;background:#fffdf7}
.language-picker,.language-picker select{color:var(--ink)}.language-picker select{border:1px solid #bcbab4;background:#fffdf7;border-radius:12px;padding:8px 10px;font-size:12px}
.welcome-main{display:flex;flex-direction:column;gap:0;padding:64px 0 35px;min-height:0}.welcome-copy{width:100%;max-width:850px;text-align:center}
.overline{color:#484944;font-weight:750;font-size:11px;letter-spacing:2px}.welcome-copy h1,html[lang=en] .welcome-copy h1{font-family:Georgia,"STZhongsong","Microsoft YaHei",serif;font-size:clamp(46px,5.8vw,76px);line-height:1.13;font-weight:900;letter-spacing:-2.5px;margin:24px 0 28px;color:var(--ink)}
.welcome-copy h1>span{color:var(--coral)}.welcome-copy>p{font-size:17px;color:#4d4e47;line-height:1.85}.welcome-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:15px;margin-top:30px}.large-button{min-height:54px;font-size:15px;padding:15px 24px;border-radius:20px}
.welcome-secondary{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:18px;margin-top:20px}.welcome-secondary>span{color:#66645f;font-size:11px}.welcome-secondary .text-button{font-size:12px}
.welcome-art{width:min(510px,100%);height:260px;margin:48px auto 5px;transform:none;isolation:isolate}.orbit{border:1.5px solid #292923;width:285px;height:225px;transform:rotate(-15deg);border-radius:48%;background:#f9de77;z-index:-1}.orbit-two{width:350px;height:230px;transform:rotate(16deg);background:none;border-style:dashed}
.vault-illustration{width:150px;height:180px;border-radius:27px;background:#a8c8ff;border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transform:rotate(-9deg)}.vault-face{inset:12px 15px 18px 10px;border:2px solid var(--ink);background:#eff5ff;color:var(--ink);border-radius:20px}.vault-face>svg{filter:none;stroke-width:1.8;width:65px;height:65px;fill:#ff796a}.vault-face>span{color:var(--ink);font-size:6px;font-weight:800;letter-spacing:1px}.vault-foot{background:#fffdf7;border-color:var(--ink);height:25px;top:70px;right:12px}
.floating-tag{border:1.5px solid var(--ink);background:#fffdf7;color:var(--ink);border-radius:30px;box-shadow:3px 3px 0 var(--ink);font-weight:650}.tag-top{top:6px;right:0;transform:rotate(5deg)}.tag-top svg{color:#398268}
.floating-otp{left:0;bottom:0;border:1.5px solid var(--ink);border-radius:18px;background:#fffdf7;box-shadow:4px 4px 0 var(--ink);padding:13px 18px;transform:rotate(3deg)}.floating-otp small{font-size:10px;color:#555}.floating-otp strong,.floating-otp strong span{color:var(--ink);font-weight:800}.mini-brand{background:#ffd0c5;color:var(--ink);border:1px solid var(--ink)}.illustration-ring{color:#315ca0;border-color:#719ff1}.art-sparkle{color:var(--ink);right:20px;bottom:22px;font-size:35px}
.welcome-features{gap:20px;border:0;padding:30px 0 42px}.welcome-features article,.welcome-features article+article{padding:26px;border:1.5px solid var(--ink);border-radius:22px;background:#fffdf8;box-shadow:3px 3px 0 var(--ink)}.welcome-features article:nth-child(2){background:#e5edff}.welcome-features article:nth-child(3){background:#fce8df}.welcome-features svg{color:var(--ink);stroke-width:1.8}.welcome-features h3{font-size:17px;color:var(--ink);font-weight:800;margin:15px 0 9px}.welcome-features p{font-size:13px;color:#575750;line-height:1.8}
.welcome-footer{border-top:1px solid #c9c6be;color:#66645f;gap:15px;flex-wrap:wrap}.welcome-footer a{font-weight:700;color:#315ca0}
/* Workspace stays compact and easy to scan. */
.sidebar{background:#eeeade;border-color:#d2cfc6}.vault-switch{border:1px solid #c4c2b9;background:#fffdf8;box-shadow:none;border-radius:14px}.vault-glyph{background:#dce9ff;color:var(--ink);border:1px solid #a6b5cd}.vault-switch strong{font-weight:700;color:var(--ink)}.vault-switch small,.nav-caption,.local-note,.local-note small,.local-note svg,.sidebar-actions button{color:#65635d}
.nav-item{font-size:13px;color:#55534f;border:1px solid transparent;border-radius:12px}.nav-item:hover{background:#e2ded3}.nav-item.active{background:#dce8ff;color:#223d65;border-color:#9eafc9;font-weight:750}.nav-item small,.nav-item.active small{color:#5c6370}.nav-divider,.sidebar-actions{border-color:#d3cec1}.nav-divider{background:#d3cec1}.topbar{border-color:#ded9cd;background:#faf7ef}.breadcrumb,.breadcrumb strong{color:#62615b}.profile{background:#ffb8a5;color:#333;border-color:#fffdf8;box-shadow:0 0 0 1px #aaa69b}.demo-pill{background:#f9dd7b;color:#4c431f}
.eyebrow{color:#6a6961;font-weight:700}.page-heading h1{font-weight:850;letter-spacing:-1px;font-size:30px}.page-heading h1>span{color:#333;background:#e2eaff;border-color:#aeb9cc}.page-heading p,.status-line,.list-meta,.list-footer,.page-footer,.detail-toolbar{color:#66645e}.status-line{font-size:11px}.vault-content{border:1.5px solid #343530;border-radius:20px;box-shadow:4px 4px 0 #20201f12;background:#fffdf8}.entry-pane{border-color:#d9d7ce}.detail-pane{background:#fffef9}.search-box{background:#f5f2e9;border-color:#d4d1c7;border-radius:12px;color:#65635d}.search-box input{color:var(--ink);font-size:12px}.search-box input::placeholder{color:#77766d}.key-hint{color:#777;background:#fffdf8;border-color:#d4d1c7}
.entry-row{border-radius:13px}.entry-row:hover{background:#f5f2ea}.entry-row.selected{background:#e7efff;border-color:#b2c6e6}.entry-summary strong{color:var(--ink);font-weight:700;font-size:13px}.entry-summary small,.identity>p,.data-field label,.detail-section-title{color:#66645e}.row-tail{color:#767975}.otp-badge{background:#d5e3fc;color:#2b4e83}.star-mark{color:#9a7423}.color-0{background:#e6e7df;color:#40463c}.color-1{background:#ffd8cc;color:#9b4136}.color-2{background:#dce9ff;color:#315985}.color-3{background:#ede2cd;color:#715b36}.color-4{background:#dbecdc;color:#39754b}.color-5{background:#f8e69f;color:#705c21}.avatar{border:1px solid #20201f33;border-radius:12px}.avatar.large{border:1.5px solid var(--ink);border-radius:20px}.identity h2{color:var(--ink);font-weight:800}.tag-list span{background:#f3efdf;border-color:#d9d4be;color:#5a574b}
.field-group{border-color:#d9d5cb;border-radius:14px}.data-field+.data-field,.detail-toolbar,.list-footer{border-color:#e2ded4}.field-value,.notes{color:#343732}.auth-card{background:#e8effc;border:1px solid #aebed7;border-radius:16px}.auth-card-heading,.auth-card>p,.otp-copy-hint,.countdown small{color:#4f6382}.otp-code{color:#244c86;font-weight:750}.live-label{color:#347356}.ring-bg{stroke:#d3def0}.ring-progress{stroke:#477cc8}.detail-bottom{color:#6b6a61;border-color:#e2ded4}.preserved-note{background:#f5edda;color:#6d614a}
dialog{border:1.5px solid var(--ink);border-radius:24px;background:#fffdf8;color:var(--ink);box-shadow:6px 6px 0 #20201f40}dialog::backdrop{background:#20201f55;backdrop-filter:blur(3px)}.modal-heading h2{font-weight:800;color:var(--ink)}.modal-heading p,.form-label,.form-help,.editor-section-heading,.generator-rules small,.generator-option small,.generator-length>span{color:#64635c}.form-label{font-size:12px}.form-help,.modal-heading p{font-size:12px}
input:not([type=checkbox]),textarea,select{background:#fffef9;border-color:#c7c4b9;color:var(--ink);border-radius:10px}.editor-field .field-input{background:#fffef9}.editor-field{background:#f4f1e7;border-color:#d9d4c7;border-radius:14px}.editor-field-head .field-name-input{color:#57574f}.editor-field-head select{background:#e2ebfa;color:#3f536e}.password-vault,.settings-note{background:#e5edfc;border-color:#b5c6e0;color:#31547f;border-radius:14px}.password-vault strong,.password-vault small,.settings-note p{color:#3c526f}.label-options label{background:#f2eddf;color:#565348;border-color:#d7d0bd}.modal-footer{border-color:#dfdace}.form-error{color:#a33e35}.backup-settings{background:#f6f2e7;border-color:#d0cabd;border-radius:16px}.generator-rules label{background:#f6f2e7;border-color:#d0cabd;border-radius:12px}#generated-password{background:#e8effc;color:#244c86;border-color:#afbed6}.generator-option{color:#57574f}#toast{background:var(--ink);color:#fffdf8;border:1px solid #fffdf8;box-shadow:3px 3px 0 #20201f40;border-radius:14px}
@media(max-width:900px){.welcome-header .privacy-pill{font-size:10px}.welcome-copy h1,html[lang=en] .welcome-copy h1{font-size:58px}.welcome-header-actions{gap:10px}.page-heading h1{font-size:26px}}
@media(max-width:700px){.welcome{padding:0 6%}.welcome-header{padding:20px 0}.welcome-header .brand{font-size:24px}.welcome-main{padding:42px 0 15px}.welcome-copy h1,html[lang=en] .welcome-copy h1{font-size:43px;letter-spacing:-1.5px;line-height:1.2;margin:19px 0 22px}.welcome-copy>p{font-size:14px}.overline{font-size:9px}.welcome-buttons{gap:11px;flex-wrap:wrap}.large-button{font-size:12px;padding:13px 16px;min-height:48px}.welcome-secondary{gap:10px 16px;flex-wrap:wrap}.welcome-secondary>span{font-size:10px}.welcome-art{width:min(350px,100%);height:250px;transform:scale(.9);margin:26px auto 0}.floating-otp{left:-6px}.tag-top{right:-4px}.welcome-features{grid-template-columns:1fr;gap:16px;padding:18px 0 30px}.welcome-features article,.welcome-features article+article{padding:22px;column-gap:15px}.welcome-features h3{font-size:16px;margin:0 0 6px}.welcome-features p{font-size:13px}.welcome-footer{font-size:10px;line-height:1.8}.sidebar{background:#eeeadef5;border-bottom-color:#c8c4b7}.topbar{background:#faf7ef}.page-heading h1,html[lang=en] .page-heading h1{font-size:25px}.page-heading p{font-size:11px}.status-line,html[lang=en] .status-line{font-size:10px}.heading-actions .button,html[lang=en] .heading-actions .button{font-size:10px;padding:9px 12px}.vault-content{border-radius:16px}.field-value{font-size:13px}.entry-summary small{font-size:11px}.detail-section-title,.data-field label{font-size:11px}}

.search-box input{border:0;background:none;border-radius:0;padding:0 32px 0 0;box-shadow:none}.field-actions .icon-button{color:#62645f}.auth-card .live-label{color:#347356}
/* Constrain the grid row so its flex panes scroll instead of growing and
   being clipped by the outer card. Headers and footers stay in view. */
.vault-content{grid-template-rows:minmax(0,1fr)}
.entry-pane,.detail-pane{min-height:0;overflow:hidden}
.entry-list,.detail-scroll{min-height:0;overscroll-behavior-y:contain;scrollbar-gutter:stable}
.search-row,.list-meta,.list-footer,.detail-toolbar{flex-shrink:0}
/* Keep editor actions visible, including their shadow and rounded corners,
   while the fields scroll inside the available viewport height. */
dialog:has(> #editor-form){padding:0;overflow:hidden;max-height:min(90dvh,calc(100dvh - 32px))}
#editor-form{padding:28px 28px 0;max-height:min(calc(90dvh - 3px),calc(100dvh - 35px));overflow-y:auto;overscroll-behavior-y:contain;scroll-padding-block:24px 110px}
#editor-form>.modal-footer{position:sticky;bottom:0;z-index:2;margin:24px -28px 0;padding:16px 28px max(24px,env(safe-area-inset-bottom));background:#fffdf8;border-top:1px solid #d6d0c3;box-shadow:0 -6px 16px #20201f0b}
#editor-form>.modal-footer .button{flex-shrink:0}
@media(max-width:700px){#editor-form{padding:22px 20px 0}#editor-form>.modal-footer{margin-inline:-20px;padding:14px 20px max(22px,env(safe-area-inset-bottom))}}
.welcome-footer .support-link,.page-footer .support-link{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid #20201f;border-radius:20px;background:#ffe1d7;color:#20201f;font:700 12px/1.5 "Segoe UI",sans-serif;white-space:nowrap}
.support-link:hover{background:#ffd0c2}.page-footer{flex-wrap:wrap;gap:10px}

/* Keep footer actions on one centered row, with support at the far right. */
.welcome-footer,.page-footer{align-items:center;justify-content:flex-start;gap:16px 24px}
.welcome-footer>a:not(.support-link),.page-footer>span:nth-child(2){margin-left:auto}
.welcome-footer .support-link,.page-footer .support-link{order:1;flex-shrink:0;margin-left:0;align-self:center}