.app{min-height:100vh;background-color:#f5f5f5;padding:20px 0}.container{max-width:600px;margin:0 auto;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;padding:20px}h1{text-align:center;color:#333;margin-bottom:30px}.task-form{display:flex;gap:10px;margin-bottom:20px}.task-input{flex:1;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px}.add-button{padding:12px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}.add-button:hover{background-color:#45a049}.task-filters{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.filter-button{padding:8px 16px;background-color:#e0e0e0;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.filter-button.active{background-color:#2196f3;color:#fff}.filter-button:hover:not(.active){background-color:#d0d0d0}.task-list{margin-top:20px}.task-item{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #eee;animation:fadeIn .3s}.task-item.completed{opacity:.7}.task-checkbox{transform:scale(1.2);cursor:pointer}.task-text{flex:1;font-size:16px}.task-item.completed .task-text{text-decoration:line-through;color:#888}.delete-button{padding:6px 12px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.delete-button:hover{background-color:#da190b}.no-tasks{text-align:center;color:#888;font-style:italic;padding:20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.container{margin:0 10px;padding:15px}.task-form{flex-direction:column}.task-filters{flex-wrap:wrap}}