*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}.app-wrapper{display:flex;justify-content:center;align-items:flex-start;padding:40px 20px}.app-container{background-color:#fff;width:100%;max-width:700px;padding:40px 30px;border-radius:16px;box-shadow:0 12px 30px #0000001a;animation:fadeIn .6s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:30px}.header h1{font-size:2.8rem;color:#2e3a59;margin-bottom:10px}.header p{font-size:1.2rem;color:#555}.task-form{margin-bottom:30px}#inp{display:flex;gap:12px;margin-bottom:15px}#inp input{flex:1;padding:12px;font-size:1rem;border:2px solid #ddd;border-radius:10px;transition:border .3s}#inp input:focus{border-color:#4caf50;outline:none}#inp button{padding:12px 20px;background-color:#4caf50;color:#fff;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:background .3s}#inp button:hover{background-color:#43a047}#btns{display:flex;gap:12px;justify-content:space-between}#btns select{flex:1;padding:10px;border:2px solid #ccc;border-radius:10px;font-size:.95rem;transition:border .3s}#btns select:focus{border-color:#4caf50;outline:none}.task-list{margin-bottom:30px}.task-item{background-color:#f9f9f9;border:1px solid #e1e1e1;padding:15px;border-radius:10px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;transition:box-shadow .3s}.task-item:hover{box-shadow:0 6px 12px #0000000d}.task-item.completed{text-decoration:line-through;opacity:.6}.task-actions button{margin-left:10px;background-color:#e0e0e0;border:none;padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .3s}.task-actions button:hover{background-color:#ccc}.progress{text-align:center;font-size:1.1rem;font-weight:500;color:#444;margin-bottom:20px}.clear-btn{background-color:#e53935;color:#fff;border:none;padding:12px;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:700;width:100%;transition:background .3s}.clear-btn:hover{background-color:#d32f2f}@media (max-width: 600px){.app-container{padding:25px 20px}#inp,#btns{flex-direction:column}#inp input,#inp button,#btns select{width:100%}}#task-list{margin-bottom:30px}#task-list ul{list-style:none;padding:0}#task-list li{background-color:#fdfdfd;border:1px solid #ddd;padding:16px 20px;border-radius:12px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;transition:box-shadow .3s,transform .2s}#task-list li:hover{box-shadow:0 4px 12px #0000000f;transform:scale(1.01)}#task-list li div:first-child{flex:1;color:#333;font-size:1rem}#task-list li small{color:#777;font-size:.85rem;margin-left:6px}#task-list li span{font-weight:500;color:#222}#task-list li span.completed{text-decoration:line-through;color:#aaa}#task-list li div:last-child{display:flex;gap:10px}#task-list button{padding:6px 12px;font-size:.9rem;border-radius:8px;border:none;cursor:pointer;transition:background .3s}#task-list button:first-child{background-color:#4caf50;color:#fff}#task-list button:first-child:hover{background-color:#43a047}#task-list button:last-child{background-color:#f44336;color:#fff}#task-list button:last-child:hover{background-color:#d32f2f}