body{background:#f0f2f5;font-family:Inter,sans-serif;display:flex;justify-content:center;align-items:flex-start;height:100vh;margin:0;padding-top:60px}.todo{background:#fff;padding:25px 30px;border-radius:16px;box-shadow:0 8px 20px #0000001a;width:350px}.todo h1{text-align:center;color:#333;margin-bottom:25px;font-size:26px}.todo__input{display:flex;gap:10px;margin-bottom:20px}.todo__input input{flex:1;padding:10px 12px;border:1px solid #ccc;border-radius:8px;outline:none;font-size:15px}.todo__input input:focus{border-color:#2563eb}.todo__input button{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 16px;cursor:pointer;font-weight:500;transition:background .3s ease}.todo__input button:hover{background:#1e40af}.todo__list{list-style:none;margin:0;padding:0}.todo__list li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.todo__list li:last-child{border-bottom:none}.todo__list li span{cursor:pointer;color:#333;font-size:15px}.todo__list li button{background:#ef4444;color:#fff;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;transition:background .3s ease}.todo__list li button:hover{background:#b91c1c}