@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Raleway:wght@700;900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Lora:wght@400..700&display=swap";
body{color:#e2e8f0;box-sizing:border-box;background:radial-gradient(circle,#1a2e45 0%,#0b1a2a 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0 20px 60px;display:flex;font-family:Poppins,sans-serif!important}header{margin-bottom:40px}.header-title{flex-direction:column;align-items:center;margin-bottom:20px;display:flex}.header-title__title{color:#fff;text-align:center;white-space:nowrap;width:0;margin:0;font-family:Lora,serif;font-size:5em;font-weight:400;animation:3s steps(11,end) forwards typing;overflow:hidden}.header-title__title:after{content:"";vertical-align:top;background:#fff;width:.15em;height:1em;animation:.75s step-end infinite blink-caret;display:inline-block}.header-title__description{color:#94a3b8;margin:0;font-size:15px}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{background-color:#0000}50%{background-color:#fff}}main{box-shadow:none;text-align:center;background-color:#0000;border-radius:8px;width:100%;max-width:600px;padding:40px}.login-layout{flex-direction:row;justify-content:space-between;align-items:center;gap:80px;width:100%;max-width:1000px;margin:0 auto;display:flex}.app-layout{flex-direction:column;align-items:center;width:100%;max-width:600px;margin:0 auto;display:flex}.login-layout .header-title{text-align:left;align-items:flex-start}.app-layout .header-title{text-align:center;align-items:center}.auth-card{box-sizing:border-box;background-color:#112236;border:1px solid #1f344e;border-radius:12px;width:100%;max-width:400px;padding:40px;box-shadow:0 10px 30px #0006}.auth-title{color:#fff;margin-top:0;margin-bottom:5px;font-family:Raleway,sans-serif;font-size:1.8em}.auth-subtitle{color:#94a3b8;margin-bottom:25px;font-size:.9em}.auth-input{color:#fff;box-sizing:border-box;background-color:#0b1a2a;border:1px solid #1f344e;border-radius:8px;outline:none;width:100%;margin-bottom:15px;padding:14px;font-size:1em;transition:border-color .3s}.auth-input:focus{border-color:#38a169}.auth-btn{cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:10px;padding:14px;font-size:1em;font-weight:700;transition:background-color .3s,transform .2s}.auth-btn.primary-btn{color:#fff;background-color:#38a169}.auth-btn.primary-btn:hover{background-color:#2f855a;transform:translateY(-2px)}.auth-footer{color:#94a3b8;text-align:center;margin-top:25px;font-size:.9em}.register-link{color:#38a169;cursor:pointer;font-weight:700;text-decoration:none;transition:color .3s}.register-link:hover{color:#2f855a;text-decoration:underline}#taskInputContainer{background-color:#0000;border-bottom:2px solid #1a2e45;align-items:center;gap:10px;margin-bottom:20px;padding:0;display:flex}#taskInput{color:#fff;background:0 0;border:none;outline:none;flex-grow:1;padding:12px;font-size:1em}#taskInput::placeholder{color:#94a3b8}#addTaskButton{color:#38a169;cursor:pointer;background-color:#0000;border:none;padding:12px 20px;font-size:1em;font-weight:700;transition:color .3s,transform .2s}#addTaskButton:hover{color:#2f855a;transform:translateY(-2px)}#taskList{width:100%;margin:0;padding:0;list-style:none}.task-item{background-color:#1a2e45;border:none;border-radius:25px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:10px 15px;transition:background-color .2s,box-shadow .2s;display:flex;box-shadow:0 2px 5px #0000001a}.task-item:hover{background-color:#1f344e;box-shadow:0 4px 10px #0003}.task-item.completed{color:#64748b;background-color:#1f344e;text-decoration:line-through}.task-item.completed label:before{background-color:#38a169;border-color:#38a169}.task-item input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.task-item label{cursor:pointer;text-align:left;flex-grow:1;align-items:center;padding-left:30px;display:flex;position:relative}.task-item label:before{content:"";border:2px solid #94a3b8;border-radius:50%;width:20px;height:20px;transition:background-color .2s,border-color .2s;position:absolute;top:50%;left:0;transform:translateY(-50%)}.task-item input[type=checkbox]:checked+label:before{background-color:#38a169;border-color:#38a169}.task-item input[type=checkbox]:checked+label:after{content:"✓";color:#fff;font-size:14px;font-weight:700;position:absolute;top:50%;left:6px;transform:translateY(-50%)}.task-item label span{color:#e2e8f0;flex-grow:1;margin-left:10px}.task-item button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.task-item button svg{stroke:#fca5a5;width:20px;height:20px;transition:stroke .3s}.task-item button:hover svg{stroke:#ef4444}.filters__container{justify-content:center;gap:15px;margin-top:20px;margin-bottom:20px;display:flex}.filters__button{color:#94a3b8;cursor:pointer;background-color:#0000;border:2px solid #94a3b8;border-radius:20px;padding:8px 16px;font-size:.9em;transition:all .3s}.filters__button:hover{color:#1a2e45;background-color:#94a3b8}.filters__button.active{color:#fff;background-color:#38a169;border-color:#38a169}footer{color:#e2e8f0;text-align:center;z-index:10;background-color:#0d1e2f;width:100%;padding:15px 0;position:fixed;bottom:0;left:0}footer p{margin:0;font-size:.9em}@media (max-width:800px){.login-layout{text-align:center;flex-direction:column;gap:40px}.login-layout .header-title{text-align:center;align-items:center}}@media (max-width:650px){.header-title__title{font-size:3.5em}.task-item{padding:8px 10px}}
