:root{font-family:Inter,Roboto,"Segoe UI",system-ui,sans-serif;color-scheme:light;--bg:#f7f8fc;--panel:#fff;--line:#dce2ed;--text:#18233a;--muted:#55657d;--accent:#305bd1;--hover:#e9efff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5}button,input,textarea{font:inherit}button{cursor:pointer;border-radius:13px;padding:11px 16px;min-height:46px;font-weight:700}button:disabled{opacity:.55;cursor:wait}a{color:inherit;text-decoration:none}.top{background:var(--panel);border-bottom:1px solid var(--line);padding:16px max(18px,calc((100vw - 1060px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand img{border-radius:12px}.brand strong{font-size:22px;display:block;line-height:1.2}.brand small{color:var(--muted);display:block;font-size:12px}.top-actions{display:flex;gap:10px;align-items:center}.badge{font-size:11px;line-height:1.3;font-weight:800;background:#fff0dc;color:#87551f;padding:8px 10px;border-radius:30px}.page{max-width:1060px;margin:0 auto;padding:30px 18px 70px}.panel,.item,.tab{background:var(--panel);border:1px solid var(--line);border-radius:22px}.gate{max-width:510px;margin:7vh auto 0;padding:34px}.bigicon{font-size:54px}.gate h1,.headline h1{font-size:clamp(28px,4vw,38px);margin:12px 0 6px;letter-spacing:-.04em}.gate p,.headline p{color:var(--muted)}label{display:block;font-weight:700;font-size:15px;margin:15px 0 8px}input:not([type=file]):not([type=hidden]),textarea{display:block;border:1px solid #bfcbdc;background:#fff;color:var(--text);border-radius:12px;padding:12px 13px;min-height:48px;width:100%;margin-top:7px;outline-offset:2px}input:focus,textarea:focus{outline:2px solid #7e9bff}.primary{color:white;border:1px solid var(--accent);background:var(--accent)}.secondary,.subtle,.file-label{border:1px solid var(--line);background:var(--panel);color:var(--text)}.subtle{min-height:42px;padding:8px 12px}.wide{width:100%;margin-top:15px}.warning{font-size:13px;color:#76521f;background:#ffefd7;border-radius:12px;padding:13px}.hint{font-size:13px!important;color:var(--muted);font-weight:400}.headline{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:23px}.count{background:#e6efff;color:#224aa4;font-weight:800;padding:10px 15px;border-radius:40px;white-space:nowrap}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.tabs button{background:#fff;border:1px solid var(--line);font-size:16px}.tabs button.selected{background:#e2eafe;border-color:#81a0eb;color:#214aab}.tab{padding:25px;margin-bottom:20px;min-height:250px}.section-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.section-head h2,.tab h2{margin:0;font-size:24px;letter-spacing:-.03em}.item-list{display:grid;gap:10px;margin-top:22px}.item{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.item-body{min-width:0;flex:1}.item-body strong{font-size:19px;display:block;overflow-wrap:anywhere}.item-body span{font-size:14px;color:var(--muted);display:block;overflow-wrap:anywhere}.item-actions{display:flex;flex-wrap:wrap;gap:8px}.item-actions button{font-size:14px;padding:9px 12px}.empty{padding:25px;color:var(--muted);border:1px dashed var(--line);border-radius:14px;text-align:center}.button-line,.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.file-label{display:flex;align-items:center;min-height:46px;padding:10px 15px;border-radius:13px;cursor:pointer;margin:0}.password-row{display:flex;align-items:center;gap:7px}.password-row input{flex:1;min-width:0}dialog{border:1px solid var(--line);border-radius:22px;padding:24px;width:min(550px,calc(100vw - 24px));max-height:92vh;overflow:auto;box-shadow:0 20px 80px #172b4d33}dialog::backdrop{background:#14213bb3}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-head h2{font-size:25px;letter-spacing:-.04em;margin:0}.result{background:#f1f6ff;border-radius:13px;padding:15px;margin:15px 0}.totp-code{font-size:32px!important;font-variant-numeric:tabular-nums;letter-spacing:.12em;font-weight:800!important;color:var(--text)!important}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:13px 18px;border-radius:12px;background:#1e2b44;color:#fff;display:none;max-width:calc(100vw - 32px);font-size:14px}.toast.visible{display:block}#qr-video{width:100%;max-height:250px;object-fit:cover;border-radius:12px;margin-top:12px}footer{font-size:13px;text-align:center;color:var(--muted);margin-top:25px}hr{border:0;border-top:1px solid var(--line);margin:30px 0}[hidden]{display:none!important}@media(max-width:600px){.top{padding:12px 14px}.badge{font-size:10px;padding:7px}.brand strong{font-size:19px}.page{padding:19px 12px 70px}.gate{padding:22px;margin:10px 0}.tab{padding:17px}.item{flex-direction:column;align-items:stretch}.item-actions button{flex:1}.headline h1{font-size:29px}.section-head h2{font-size:20px}.section-head button{font-size:14px}.item-body strong{font-size:18px}.tabs button{flex:1;padding:10px 8px}}
.reveal-value{display:block;background:var(--bg);border-radius:12px;padding:18px;overflow-wrap:anywhere;font-size:22px;font-weight:800;letter-spacing:.04em}

select{display:block;border:1px solid #bfcbdc;background:#fff;color:var(--text);border-radius:12px;padding:12px 13px;min-height:48px;width:100%;margin-top:7px;font:inherit}


.brand-lockup{display:grid;gap:5px;min-width:0}
.brand .brand-wordmark{display:block;width:200px;max-width:100%;height:auto;border-radius:0}
@media(max-width:600px){.top{flex-wrap:wrap}.brand{min-width:0}.brand .brand-wordmark{width:180px}.top-actions{flex-wrap:wrap}.brand small{font-size:11px}}

.brand-lockup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.brand-symbol{width:48px;height:48px}.brand-lockup small{flex-basis:100%}.brand strong{color:#073da8}:root{--accent:#087bd5;--bg:#f4f8fc;--text:#112b48;--line:#dce8f0}

.recovery-key{display:block;padding:14px;background:#e2f3f8;border-radius:12px;overflow-wrap:anywhere;font:600 16px/1.6 ui-monospace,monospace;user-select:all}.restore-consent{display:flex;align-items:flex-start;gap:10px}.restore-consent input[type=checkbox]{width:22px;min-height:22px;flex:0 0 22px;margin:0}#restore-file{max-width:100%}

/* Responsive primary vault surface and explicit demo navigation */
.catalog-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:13px;font-weight:700;white-space:nowrap}
.catalog-link:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
:root{color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#101923;--panel:#192632;--line:#344555;--text:#eaf2fc;--muted:#b2c4d5;--hover:#233b53;--accent:#2c80dc;color-scheme:dark}
 input:not([type=file]):not([type=hidden]),textarea,select{background:#182735;color:var(--text);border-color:#66798a}
 .tabs button{background:var(--panel);color:var(--text)}.tabs button.selected,.result{background:#23415a;color:var(--text);border-color:#6194bb}
 .count,.recovery-key{background:#21435a;color:#eaf2fc}.warning{background:#493820;color:#ffdeb0}.badge{background:#4b3921;color:#ffdfa8}
 .brand strong{color:#77b6ff}dialog{background:var(--panel);color:var(--text)}
}
@media(max-width:600px){body{font-size:17px}.top-actions{gap:6px}.badge{font-size:10px}.catalog-link{font-size:12px;padding:8px}.item-actions button{min-height:48px}.gate{margin:0;padding:22px 18px}.gate h1{font-size:30px}}

/* Live vault counts: numbers and icons aligned, no dummy demo totals. */
.vault-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.vault-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:112px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px;text-align:center;font-size:14px;font-weight:750;color:var(--muted)}
.vault-stat-main{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text)}
.vault-stat-main strong{font-size:clamp(25px,4vw,36px);line-height:1;font-variant-numeric:tabular-nums}
.vault-stat-symbol{font-size:29px;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:36px}
.vault-search-label{display:block;margin:17px 0 10px;font-weight:700;font-size:14px}
#login-search{border-radius:999px;padding-inline:18px}
@media(max-width:600px){.vault-summary{gap:7px}.vault-stat{min-height:100px;padding:10px 5px;border-radius:15px;font-size:12px}.vault-stat-main{gap:3px}.vault-stat-main strong{font-size:26px}.vault-stat-symbol{font-size:22px;min-width:24px}}