:root{--surface:#111318;--surface-container-low:#1a1c20;--surface-container-highest:#282a2f;--surface-bright:#37393e;--primary:#afc6ff;--primary-container:#0060d6;--secondary:#40e56c;--error:#ffb4ab;--warning:#facc15;--on-surface:#e2e2e8;--on-surface-variant:#c3c5d9;--outline-variant:#ffffff14;--surface-variant-glass:#111318d9;--shadow-diffused:0 10px 40px #0006;--font-body:"Inter", sans-serif;--font-heading:"Space Grotesk", sans-serif;--font-mono:"Space Mono", monospace;--transition-bounce:.3s cubic-bezier(.175, .885, .32, 1.275)}body.light{--surface:#f0f2f6;--surface-container-low:#f0f2f6;--surface-container-highest:#fff;--surface-bright:#e4e7ed;--primary:#0052ff;--primary-container:#dce4ff;--secondary:#02c953;--error:#ba1a1a;--on-surface:#111318;--on-surface-variant:#434656;--outline-variant:#00000014;--surface-variant-glass:#f0f2f6d9;--shadow-diffused:0 8px 30px #0000000f}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--surface);color:var(--on-surface);min-height:100vh;transition:background-color .3s,color .3s;overflow-x:hidden}#root{width:100%;min-height:100vh;display:flex}.app-layout{width:100%;height:100vh;display:flex}.sidebar{background-color:var(--surface-container-low);border-right:1px solid var(--outline-variant);flex-direction:column;flex-shrink:0;gap:.5rem;width:280px;padding:2.5rem 1.5rem;display:flex}.main-content{background-color:var(--surface);flex-direction:column;flex-grow:1;display:flex;overflow-y:auto}.content-header{justify-content:space-between;align-items:center;padding:3rem 4rem 1.5rem;display:flex}.content-body{width:100%;padding:0 4rem 4rem}.centered-content{flex-grow:1;justify-content:center;align-items:center;width:100%;padding-bottom:4rem;display:flex}h1,h2,h3,h4{font-family:var(--font-heading);margin:0;font-weight:600}.title-xl{letter-spacing:-.02em;font-size:2.5rem}.title-lg{letter-spacing:-.02em;font-size:1.75rem}.headline-md{font-size:1.25rem}.code-lg{font-family:var(--font-mono);letter-spacing:.1em;font-size:2.75rem;font-weight:700;line-height:1}.label-sm{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.body-lg{color:var(--on-surface-variant);font-size:1.125rem}.nav-link{color:var(--on-surface-variant);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:.75rem;align-items:center;gap:1rem;width:100%;padding:1rem 1.25rem;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.nav-link:hover{background:var(--surface-container-highest);color:var(--on-surface)}.nav-link.active{background:var(--surface-container-highest);color:var(--primary)}button{outline:none}.btn{font-family:var(--font-body);cursor:pointer;border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.75rem;padding:1rem 1.5rem;font-size:1.05rem;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-container));color:#fff;box-shadow:var(--shadow-diffused)}.btn-primary:active{box-shadow:none;transform:scale(.97)}.btn-primary:hover{opacity:.9}.btn-secondary{background:var(--surface);border:1px solid var(--outline-variant);color:var(--on-surface)}.btn-secondary:hover{background:var(--surface-bright)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{filter:brightness(.9)}.btn-icon{color:var(--on-surface-variant);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;display:flex}.btn-icon:hover{background:var(--surface-bright);color:var(--on-surface)}.group-badges-container{scrollbar-width:thin;gap:.75rem;margin-bottom:2rem;padding-bottom:1rem;display:flex;overflow-x:auto}.group-badge{background:var(--surface-container-highest);color:var(--on-surface-variant);border:1px solid var(--outline-variant);cursor:pointer;white-space:nowrap;border-radius:2rem;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.group-badge.active{background:var(--primary);color:#111318;border-color:var(--primary)}.group-badge:hover:not(.active){background:var(--surface-bright)}.badge-delete{color:var(--on-surface-variant);border-radius:50%;justify-content:center;align-items:center;margin-left:.25rem;padding:.125rem;transition:all .2s;display:inline-flex}.badge-delete:hover{background:var(--error);color:#fff}.group-section{margin-bottom:3rem}.group-title{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--outline-variant);align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1rem;font-weight:600;display:flex}.account-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;display:grid}.account-card{background-color:var(--surface-container-highest);-webkit-user-select:none;user-select:none;border:1px solid var(--outline-variant);border-radius:1rem;padding:1.5rem 1.5rem 2rem;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s,filter .3s,opacity .3s;position:relative;overflow:visible}.account-card.menu-open{z-index:50}.account-card:hover{box-shadow:var(--shadow-diffused);transform:translateY(-4px)}.account-card-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;display:flex}.account-card-header-text{flex:1;min-width:0}.account-card-header-text h2,.account-card-header-text p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.card-actions-wrapper{position:relative}.dropdown-menu{background:var(--surface-container-highest);border:1px solid var(--outline-variant);box-shadow:var(--shadow-diffused);z-index:50;border-radius:.75rem;min-width:180px;padding:.5rem;animation:.15s forwards fadeUp;position:absolute;top:100%;right:0}.dropdown-item{width:100%;color:var(--on-surface);text-align:left;cursor:pointer;font-family:var(--font-body);background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.9rem;display:flex}.dropdown-item:hover{background:var(--surface-bright)}.dropdown-item.danger:hover{background:var(--error);color:#fff}.submenu-wrapper{position:relative}.submenu{background:var(--surface-container-highest);border:1px solid var(--outline-variant);box-shadow:var(--shadow-diffused);z-index:60;border-radius:.75rem;min-width:150px;margin-left:.25rem;padding:.5rem;animation:.15s forwards fadeUp;display:none;position:absolute;top:-.5rem;left:100%}@media (width<=1600px){.submenu{margin-left:0;margin-right:.25rem;left:auto;right:100%}}.submenu-wrapper:hover .submenu{display:block}.account-grid.focus-mode-active:has(.account-card.menu-open) .account-card:not(.menu-open){filter:blur(6px)grayscale(40%);opacity:.4;pointer-events:none;transform:scale(.97)}.account-grid.focus-mode-active:not(:has(.account-card.menu-open)):not(:has(.account-card.is-dragging)):has(.account-card:hover) .account-card:not(:hover){filter:blur(6px)grayscale(40%);opacity:.4;transform:scale(.97)}.code-display{cursor:pointer;border-radius:.75rem;align-items:center;gap:1rem;margin-bottom:.75rem;padding:.5rem;transition:background .2s;display:inline-flex;position:relative}.code-display:hover{background:var(--surface-bright)}.code-display.copied .code-text{opacity:.3}.copied-toast{background:var(--surface);color:var(--secondary);pointer-events:none;box-shadow:var(--shadow-diffused);border-radius:1rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;animation:.3s forwards fadeUp;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.code-text{align-items:center;gap:.75rem;transition:opacity .2s;display:flex}.progress-track{background:#80808033;border-radius:0 0 1rem 1rem;width:100%;height:6px;position:absolute;bottom:0;left:0;overflow:visible}.progress-fill{background:#ffffffb3;border-radius:0 0 0 1rem;height:100%;transition:width 1s linear,background-color .3s}body.light .progress-fill{background:#0009}.progress-fill.danger{background:var(--error)}.time-indicator{color:var(--on-surface-variant);background:var(--surface-container-highest);border:1px solid var(--outline-variant);opacity:.8;border-radius:.5rem;padding:.1rem .5rem;font-size:.75rem;font-weight:700;position:absolute;top:-24px;right:1.5rem}.settings-panel,.form-panel{background:var(--surface-container-highest);width:100%;max-width:680px;box-shadow:var(--shadow-diffused);border:1px solid var(--outline-variant);border-radius:1.5rem;margin:0 auto;padding:3rem}.input-group{margin-bottom:2rem}.input-label{font-family:var(--font-heading);color:var(--on-surface-variant);margin-bottom:.75rem;font-size:.875rem;display:block}.input-field{background:var(--surface);border:1px solid var(--outline-variant);width:100%;color:var(--on-surface);font-size:1.125rem;font-family:var(--font-body);border-radius:.75rem;padding:1.25rem;transition:all .2s}.input-field:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px #afc6ff1a}.search-bar{background:var(--surface-container-highest);border:1px solid var(--outline-variant);border-radius:1rem;align-items:center;width:100%;max-width:480px;padding:1rem 1.5rem;transition:border-color .2s;display:flex}.search-bar:focus-within{border-color:var(--primary)}.search-bar input{color:var(--on-surface);font-family:var(--font-body);background:0 0;border:none;outline:none;width:100%;margin-left:1rem;font-size:1.125rem}.lock-screen{background:var(--surface);flex-direction:column;flex-grow:1;justify-content:center;align-items:center;display:flex}.lock-box{background:var(--surface-container-highest);text-align:center;box-shadow:var(--shadow-diffused);border:1px solid var(--outline-variant);border-radius:2rem;width:100%;max-width:480px;padding:4rem}.modal-overlay{background:var(--surface-variant-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1050;justify-content:center;align-items:center;animation:.2s backdropFade;display:flex;position:fixed;inset:0}@keyframes backdropFade{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--surface-container-highest);box-shadow:var(--shadow-diffused);border:1px solid var(--outline-variant);border-radius:1.5rem;width:100%;max-width:480px;padding:2.5rem;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards fadeUp}.toast{background:var(--surface-container-highest);color:var(--on-surface);box-shadow:var(--shadow-diffused);z-index:1100;border:1px solid var(--outline-variant);border-radius:.75rem;align-items:center;gap:.75rem;padding:1rem 1.5rem;font-weight:600;animation:.3s forwards slideUp;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.toast.success{border-bottom:3px solid var(--secondary)}.toast.error{border-bottom:3px solid var(--error)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.hidden-file-input{display:none}