@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap');
:root{--ink:#20202a;--muted:#888895;--line:#ebeaf0;--purple:#6556d9;--lav:#f2efff;--bg:#fafafd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}.sidebar{width:246px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:31px 18px;display:flex;flex-direction:column}.brand{font-size:24px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:9px;padding:0 14px}.brand-mark{color:var(--purple);font-size:27px}.brand-dot{color:#a7a0ed}.side-label,.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:700;color:#a0a0ac}.side-label{margin:65px 14px 16px}.nav-item{display:flex;align-items:center;gap:13px;color:#858590;text-decoration:none;padding:12px 14px;border-radius:9px;margin:3px 0;width:100%;background:transparent}.nav-item.active{background:var(--lav);color:var(--purple);font-weight:700}.nav-icon{font-size:18px;width:19px;text-align:center}.nav-count{margin-left:auto;font-size:12px}.sidebar-bottom{margin-top:auto}.security-card{margin:0 4px 18px;padding:14px;background:#f8f7ff;border-radius:10px;display:flex;gap:10px;color:var(--purple)}.security-card strong,.security-card small{display:block}.security-card small{color:#9995ae;font-size:11px;margin-top:3px}.logout{font-weight:600}.main{margin-left:246px;max-width:1300px;padding:31px 55px 60px}.topbar{display:flex;justify-content:space-between;align-items:center}.topbar h1{font:600 31px 'Playfair Display',serif;margin:5px 0}.header-actions{display:flex;align-items:center;gap:10px}.avatar{background:#e6e2ff;color:var(--purple);border-radius:50%;font-weight:700;width:38px;height:38px;display:grid;place-items:center}.account strong,.account small{display:block}.account small{font-size:11px;color:var(--muted);margin-top:2px}.welcome{margin-top:38px;padding:28px 32px;border-radius:13px;background:linear-gradient(105deg,#eeeaff,#faf7ff);display:flex;align-items:center;justify-content:space-between}.welcome h2{font:600 24px 'Playfair Display',serif;margin:0 0 8px}.welcome p,.muted{color:var(--muted);margin:0}.button{border-radius:8px;padding:12px 17px;font-weight:700}.button.primary{background:var(--purple);color:#fff;box-shadow:0 5px 12px #6556d933}.button.secondary{background:#fff;color:var(--purple);border:1px solid #dedbf6}.button.full{width:100%;margin-top:20px;display:flex;justify-content:center;gap:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:21px 0 43px}.stat{background:#fff;border:1px solid var(--line);border-radius:11px;padding:19px 22px;display:flex;gap:15px;align-items:center}.stat-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;font-size:18px}.purple{background:#f0edff;color:#6656d9}.blue{background:#eaf5ff;color:#3495db}.green{background:#e7f8f1;color:#36aa77}.stat small{display:block;color:#9b9aa5;font-size:10px;letter-spacing:1px}.stat strong{display:block;font-size:20px;margin-top:4px}.stat .safe{font-size:14px;color:#36aa77}.content-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.content-head h2{font:600 21px 'Playfair Display',serif;margin:0 0 5px}.content-head p{color:var(--muted);margin:0;font-size:12px}.toolbar{display:flex;gap:10px}.search{background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:#aaa;display:flex;align-items:center;gap:8px}.search input{border:0;outline:0;padding:11px 0;width:180px}.vault-list{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}.vault-row{display:flex;align-items:center;padding:18px 21px;border-bottom:1px solid var(--line);gap:15px}.vault-row:last-child{border:0}.service-icon{width:39px;height:39px;border-radius:10px;background:#f0eff8;color:#514e70;display:grid;place-items:center;font-weight:700}.service-info{min-width:175px}.service-info strong,.service-info span{display:block}.service-info span{font-size:12px;color:var(--muted);margin-top:4px}.row-tag{font-size:11px;padding:5px 9px;border-radius:5px;background:#f4f2ff;color:#6758ca}.row-url{color:#aaa;font-size:12px;flex:1}.row-actions{display:flex;gap:5px}.row-actions button{background:transparent;color:#aaa;font-size:16px;padding:6px}.row-actions button:hover,.row-actions button.on{color:var(--purple)}.empty{text-align:center;padding:60px 20px}.empty-icon{color:#c9c3ff;font-size:35px}.empty h3{margin:12px 0 5px}.empty p{color:var(--muted);margin:0 0 20px}.alert{padding:12px 16px;border-radius:8px;margin:18px 0}.success{background:#eaf8f2;color:#26835d}.error{background:#fff0f0;color:#b34b4b}.modal-backdrop{position:fixed;inset:0;background:#1c183c55;display:none;place-items:center;padding:20px;z-index:4}.modal-backdrop.open{display:grid}.modal{background:#fff;border-radius:15px;padding:31px;width:min(600px,100%);position:relative;box-shadow:0 20px 60px #28205d33}.modal.small{width:min(430px,100%)}.modal h2{font:600 25px 'Playfair Display',serif;margin:7px 0}.modal>.muted{margin-bottom:22px}.close{position:absolute;right:18px;top:16px;background:transparent;color:#aaa;font-size:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{display:block;color:#54535f;font-size:12px;font-weight:600}label input,label select{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #dfdee6;border-radius:7px;outline:0;background:#fff;color:var(--ink)}label input:focus,label select:focus{border-color:var(--purple)}.password-input{position:relative}.password-input input{padding-right:38px}.eye{position:absolute;right:7px;top:7px;color:#aaa;background:transparent;padding:5px}.eye.on{color:var(--purple)}.hidden{display:none}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f9f8ff,#f3f0ff)}.login-shell{width:min(420px,calc(100% - 36px));text-align:center}.login-shell .brand{justify-content:center;margin-bottom:30px}.login-card{background:#fff;text-align:left;padding:37px;border:1px solid #e7e5f2;border-radius:15px;box-shadow:0 18px 50px #40358e12}.login-card h1{font:600 32px 'Playfair Display',serif;margin:8px 0}.login-card .muted{margin-bottom:28px}.login-card label{margin:18px 0}.login-foot{color:#aaa;font-size:11px;margin-top:23px}
@media(max-width:800px){.sidebar{width:70px;padding:25px 10px}.sidebar .brand span:not(.brand-mark),.side-label,.nav-item:not(.active) span:not(.nav-icon),.nav-count,.security-card,.logout span{display:none}.nav-item{justify-content:center;padding:12px}.main{margin-left:70px;padding:25px 20px}.welcome{align-items:start;gap:20px;flex-direction:column}.stats{gap:8px}.stat{padding:14px}.stat small{font-size:8px}.row-url{display:none}.service-info{min-width:0;flex:1}.content-head{align-items:start;gap:12px;flex-direction:column}.toolbar{width:100%}.search{flex:1}.form-grid{grid-template-columns:1fr}}