:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--spinner-animation-speed: 2s}body{padding:0;margin:0}#app{background-color:#212228;background-image:linear-gradient(#292a30 .1em,transparent .1em),linear-gradient(90deg,#292a30 .1em,transparent .1em);background-size:4em 4em;height:100vh;position:relative;overflow:auto}.card{width:400px;border-radius:5px;cursor:pointer;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013;position:absolute}.card-body{padding:1em;border-radius:0 0 5px 5px}.card-body textarea{background-color:inherit;border:none;width:100%;height:100%;resize:none;font-size:16px}textarea:focus{background-color:inherit;outline:none;width:100%;height:100%}.card-header{background-color:#9bd1de;border-radius:5px 5px 0 0;display:flex;justify-content:space-between;align-items:center;padding:5px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin var(--spinner-animation-speed) linear infinite}.card-saving{display:flex;align-items:center;gap:5px}#controls{display:flex;flex-direction:column;gap:1em;align-items:center;position:fixed;left:1em;top:50%;transform:translateY(-50%);background-color:#35363e;padding:1em;border-radius:40px;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013;z-index:10000}#add-btn{background-color:#6b6b6b;display:flex;justify-content:center;align-items:center;height:40px;width:40px;border-radius:50%;cursor:pointer;transition:.3s}#add-btn:hover{height:45px;width:45px}.color{background-color:gray;border:2px solid;height:40px;width:40px;border-radius:50%;justify-content:center;align-items:center;cursor:pointer;transition:.3s}.color:hover{height:45px;width:45px}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#212228;background-image:linear-gradient(#292a30 .1em,transparent .1em),linear-gradient(90deg,#292a30 .1em,transparent .1em);background-size:4em 4em}.login-form{background-color:#35363e;padding:2.5rem;border-radius:12px;width:400px;max-width:90vw;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013}.login-logo{display:flex;justify-content:center;margin-bottom:1.5rem}.login-logo-icon{transition:transform .3s ease}.login-logo-icon:hover{transform:scale(1.1)}.login-title{color:#ffffffde;text-align:center;margin-bottom:2rem;font-size:1.5rem;font-weight:500}.login-input{width:100%;padding:.75rem 1rem;margin:.75rem 0;background-color:#212228;border:1px solid #404040;border-radius:8px;color:#ffffffde;font-size:16px;transition:border-color .3s ease,box-shadow .3s ease;box-sizing:border-box}.login-input:focus{outline:none;border-color:#6b6b6b;box-shadow:0 0 0 2px #6b6b6b33}.login-input::placeholder{color:#ffffff80}.login-button{width:100%;padding:.75rem 1rem;margin:1rem 0;background-color:#6b6b6b;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.login-button:hover:not(:disabled){background-color:#7a7a7a;transform:translateY(-1px)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{background-color:#4a4a4a;cursor:not-allowed;opacity:.7}.login-error{color:#ff6b6b;text-align:center;margin:.5rem 0;font-size:14px}.login-switch{color:#ffffffde;text-align:center;margin-top:1.5rem}.login-switch-button{background:none;border:none;color:#6b6b6b;cursor:pointer;text-decoration:underline;font-size:inherit;transition:color .3s ease}.login-switch-button:hover{color:#7a7a7a}.app-header{position:fixed;top:1rem;right:1rem;z-index:10000;display:flex;align-items:center;gap:1rem;background-color:#35363e;padding:.75rem 1.25rem;border-radius:12px;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013}.welcome-text{color:#ffffffde;font-weight:500}.logout-button{padding:.5rem 1rem;background-color:#6b6b6b;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .3s ease,transform .2s ease}.logout-button:hover{background-color:#7a7a7a;transform:translateY(-1px)}.logout-button:active{transform:translateY(0)}.app-logo{flex-shrink:0;transition:transform .2s ease}.app-logo:hover{transform:scale(1.05)}@media (max-width: 768px){.app-header{padding:.5rem .75rem;gap:.75rem}.app-logo{width:24px;height:24px}.login-logo-icon{width:40px;height:40px}.welcome-text{font-size:.9rem}}@media (max-width: 480px){.app-header{padding:.5rem;gap:.5rem}.app-logo{width:20px;height:20px}.login-logo-icon{width:36px;height:36px}.welcome-text{font-size:.8rem;display:none}}