*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:#f5f6fa}.app{flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;padding:40px 20px;display:flex}h1{color:#333;margin-bottom:30px;font-size:2.5rem}.input-section{gap:10px;margin-bottom:25px;display:flex}.input-section input{border:2px solid #ccc;border-radius:6px;outline:none;width:250px;padding:10px 15px;transition:border .2s}.input-section input:focus{border-color:#4b7bec}.input-section button{color:#fff;cursor:pointer;background-color:#4b7bec;border:none;border-radius:6px;padding:10px 18px;font-weight:700;transition:background .3s}.input-section button:hover{background-color:#3867d6}.task-list{width:100%;max-width:400px;list-style:none}.task-list li{background-color:#fff;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:12px 15px;transition:transform .1s;display:flex;box-shadow:0 2px 6px #0000001a}.task-list li:hover{transform:scale(1.01)}.task-list li.completed span{color:gray;opacity:.7;text-decoration:line-through}.task-list button{color:#eb3b5a;cursor:pointer;background:0 0;border:none;font-size:1.2rem;transition:color .2s}.task-list button:hover{color:#c0392b}.no-task{color:#777;text-align:center}