@import "https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Michroma&display=swap";body{min-height:100vh}.auth-wrapper{background-color:#2b2737;width:100%;min-height:100vh;padding:12px;font-family:Sora,sans-serif;display:flex}.auth-left{background:linear-gradient(#6b68c8 0%,#4a4890 30%,#2c2a5e 60%,#1a1830 100%);border-radius:20px;flex-direction:column;flex:1;justify-content:space-between;margin:10px;display:flex}.auth-left h1{color:#f5f5f5;margin-top:2rem;margin-left:2rem;font-size:4rem}.auth-left p{color:#ffffffd9;margin-left:2rem;margin-right:2rem}.auth-tagline{margin-top:1rem;font-size:1.5rem;font-weight:500}.auth-description{opacity:.8;margin-top:.5rem;margin-bottom:3rem;font-size:.95rem;line-height:1.5}.auth-right{border-radius:20px;flex:1;justify-content:center;align-items:center;margin:10px;display:flex}.auth-form{color:#fff;width:100%;max-width:400px}.auth-form h2{margin-bottom:1rem;font-size:2rem}.auth-input{color:#fff;background-color:#3b384a;border:none;border-radius:8px;width:100%;margin-top:8px;margin-bottom:16px;padding:12px}.auth-input:focus{outline-offset:1px;outline:3px solid #6b68c8}.auth-button{color:#fff;cursor:pointer;background-color:#6b68c8;border:none;border-radius:10px;width:100%;padding:12px;font-size:1rem}@media screen and (width<=850px){.auth-wrapper{flex-direction:column;padding:8px}.auth-left{flex:unset;margin:8px;padding-bottom:1.5rem}.auth-left h1{margin-top:1.5rem;margin-left:1.5rem;font-size:2.2rem}.auth-right h2{font-size:2rem}.auth-left p{margin-left:1.5rem;margin-right:1.5rem}.auth-tagline{margin-top:2rem;font-size:1.2rem}.auth-description{display:none}.auth-right{flex:unset;margin:8px;padding:2rem 0}}*,:before,:after{box-sizing:border-box}:not(dialog){margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{-webkit-font-smoothing:antialiased;line-height:1.5}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.icon-spin{animation:1s linear infinite spin;display:inline-block}:root{--bg-base:#1c1c22;--bg-surface:#272730;--bg-input:#32323e;--primary:#6c5ce7;--primary-hover:#5a4bcf;--text-main:#fff;--text-muted:#a1a1aa;--danger:#ef4444;--danger-hover:#dc2626;--radius-lg:16px;--radius-md:10px;--radius-sm:6px;--transition:all .2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-main);font-family:Inter,sans-serif}.app{flex-direction:column;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}.main{flex-direction:column;gap:2rem;width:100%;max-width:1000px;display:flex}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.topbar-title{margin-bottom:.25rem;font-family:Michroma,sans-serif;font-size:1.75rem;font-weight:700}.topbar-sub{color:var(--text-muted);font-size:.95rem}.header-actions{gap:1rem;align-items:space-between;display:flex}.search-wrap{width:100%;max-width:400px;position:relative}.search-ico{color:var(--text-muted);font-size:1.2rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-input{background:var(--bg-input);width:100%;color:var(--text-main);border-radius:var(--radius-md);transition:var(--transition);border:1px solid #0000;outline:none;padding:.8rem 1rem .8rem 2.8rem;font-size:.95rem}.search-input:focus{border-color:var(--primary)}button{cursor:pointer;transition:var(--transition);align-items:center;gap:.5rem;font-family:inherit;font-size:.95rem;font-weight:500;display:flex}.btn-solid{background:var(--primary);color:#fff;border-radius:var(--radius-md);border:none;padding:.6rem 1.2rem}.btn-solid:hover{background:var(--primary-hover)}.btn-ghost{color:var(--text-main);border:1px solid var(--bg-input);border-radius:var(--radius-md);background:0 0;padding:.6rem 1.2rem}.btn-ghost:hover{background:var(--bg-input)}.ico-btn{color:var(--text-muted);border-radius:var(--radius-sm);background:0 0;border:none;padding:.5rem;font-size:1.2rem}.ico-btn:hover{color:var(--text-main);background:var(--bg-input)}.ico-btn.danger:hover{color:var(--danger);background:#ef44441a}.ico-btn.copied{color:#10b981}.empty{text-align:center;background:var(--bg-surface);border-radius:var(--radius-lg);flex-direction:column;align-items:center;gap:1rem;padding:4rem 2rem;display:flex}.empty-icon-wrap{color:var(--primary);background:#6c5ce71a;border-radius:50%;margin-bottom:1rem;padding:1.5rem;font-size:3rem}.empty p{color:var(--text-muted)}.card-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.cred-card{background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid #ffffff08;flex-direction:column;gap:1.2rem;padding:1rem;display:flex;box-shadow:0 4px 20px #0003}.card-top{justify-content:space-between;align-items:flex-start;display:flex}.card-identity{align-items:center;gap:1rem;display:flex}.favicon-wrap{border-radius:var(--radius-md);background:var(--bg-input);justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.favicon{width:24px;height:24px}.favicon-fallback{color:var(--text-muted);font-size:1.2rem;font-weight:600}.card-site{font-size:1.05rem;font-weight:600}.card-user{color:var(--text-muted);margin-top:.2rem;font-size:.85rem}.card-actions{gap:.25rem;display:flex}.pw-row{background:var(--bg-base);border-radius:var(--radius-md);justify-content:space-between;align-items:center;padding:.8rem 1rem;display:flex}.pw-text{flex-direction:column;display:flex}.pw-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.pw-val{margin-top:.2rem;font-family:monospace;font-size:1rem}.pw-actions{gap:.25rem;display:flex}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-surface);border-radius:var(--radius-lg);overscroll-behavior:contain;border:1px solid #ffffff0d;width:100%;max-width:420px;padding:1.5rem;box-shadow:0 10px 40px #00000080}.modal-head{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.field{flex-direction:column;gap:.5rem;margin-bottom:1.2rem;display:flex}.field label{color:var(--text-muted);align-items:center;gap:.4rem;font-size:.9rem;display:flex}.field input{background:var(--bg-input);color:var(--text-main);border-radius:var(--radius-md);transition:var(--transition);border:1px solid #0000;outline:none;padding:.8rem 1rem;font-size:.95rem}.field input:focus{border-color:var(--primary)}.modal-foot{justify-content:flex-end;gap:1rem;margin-top:2rem;display:flex}.edit-title{border-bottom:1px solid var(--bg-input);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;font-weight:600;display:flex}.edit-footer{justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.footer{border-top:1px solid #ffffff0d;width:100%;max-width:1000px;margin-top:auto;padding-top:1.5rem}.footer-content{color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:.85rem;display:flex}.security-badge{color:var(--primary);align-items:center;gap:.4rem;font-weight:500;display:flex}.footer-links{gap:1.5rem;display:flex}.footer-links a{color:var(--text-muted);transition:var(--transition);text-decoration:none}.footer-links a:hover{color:var(--text-main)}.modal:before{content:"";background:#666;border-radius:999px;width:40px;height:4px;margin:0 auto 1rem;display:block}@media screen and (width<=600px){.footer-content{text-align:center;flex-direction:column;justify-content:center;gap:1.2rem}.header-actions{justify-content:space-between;width:100%}.overlay{align-items:flex-end}.modal{border-radius:20px 20px 0 0;width:100%;max-width:none;max-height:90vh;padding:1.25rem;overflow-y:auto}.follow-cursor{display:hidden}}@media (width<=400px){.modal-foot{flex-direction:column}.modal-foot button{justify-content:center;width:100%}}