@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap";body{font-family:Roboto,sans-serif;background:#f0f2f5;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh}.container{max-width:500px;width:90%;margin-top:50px;background:#fff;padding:2rem;border-radius:10px;box-shadow:0 0 15px #0000001a}h1{text-align:center;color:#2d3436;margin-bottom:1.5rem}.input-group{display:flex;gap:.5rem}input{flex:1;padding:12px;border:2px solid #dfe6e9;border-radius:8px;font-size:1rem;outline:none;transition:border .3s}input:focus{border-color:#00b894}button{background:linear-gradient(45deg,#00b894,#00cec9);color:#fff;border:none;padding:12px 18px;border-radius:8px;cursor:pointer;font-weight:700;transition:background .3s,transform .2s}button:hover{background:linear-gradient(45deg,#00cec9,#00b894);transform:scale(1.05)}ul{list-style:none;padding:0;margin-top:1rem}li{background:#b2bec3;margin:.5rem;padding:.8rem;display:flex;justify-content:space-between;align-items:center;border-radius:8px;cursor:pointer;transition:background .3s,transform .2s}li:hover{background:#b2bec3;transform:translate(5px)}li.done span{text-decoration:line-through;color:#636e72}li button{background:none;border:none;color:#d63031;font-size:1.2rem;cursor:pointer;transition:color .3s,transform .2s}li button:hover{color:#e17055;transform:scale(1.2)}.container.dark{background:#2d3436;color:#dfe6e9}.container.dark h1{color:#fff}.container.dark input{background:#636e72;color:#fff}.container.dark li.done span{color:#b2bec3}.container.dark button{background:linear-gradient(45deg,#0984e3,#6c5ce7)}.container.dark .toggle-mode{background:#00cec9;color:#2d3436}.toggle-mode{margin-bottom:1rem;padding:10px 15px;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all .3s}.task-buttons{display:flex;gap:.5rem}.done-btn{background-color:#00b894;color:#fff;border:none;padding:6px 10px;border-radius:5px;cursor:pointer;font-size:.9rem}.done-btn:hover{background-color:#019875}.delete-btn{background-color:#d63031;color:#fff;border:none;padding:6px 10px;border-radius:5px;cursor:pointer;font-size:.9rem}.delete-btn:hover{background-color:#c0392b}.filterr-buttons{display:flex;gap:.5rem;margin-bottom:1rem;margin-top:12px}.filterr-buttons button{background-color:#0984e3;color:#fff;border:none;padding:8px 12px;border-radius:5px;cursor:pointer;font-weight:700;transition:background .3s,transform .2s}.filterr-buttons button:hover{background-color:#74b9ff;transform:scale(1.05)}p{text-align:center;font-weight:700;color:#2d3436}.container.dark p{color:#dfe6e9}@media (max-width: 600px){.container{width:85%}body{padding:10px}h1{font-size:1.5rem}input,button{font-size:1rem}.filterr-buttons{flex-direction:column}.filterr-buttons button{width:100%}.task-buttons{flex-direction:column}.task-buttons button{width:100%}}