* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    background-color: #f0f2f5;
    padding: 40px;
}
.container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px #00000015;
}
h1 {
    text-align: center;
    margin-bottom: 24px;
    color: #333;
}
.input-box {
    display: flex;
    gap:8px;
    margin-bottom:20px;
}
#todoInput {
    flex:1;
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:16px;
}
#addBtn {
    padding:10px 18px;
    background:#238636;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
#addBtn:hover{
    background:#1b6e2b;
}
ul {
    list-style:none;
}
li {
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:12px 14px;
    background:#f8f9fa;
    border-radius:6px;
    margin-bottom:10px;
}
li.done span {
    text-decoration: line-through;
    color:#888;
}
.del-btn{
    background:#d93025;
    color:white;
    border:none;
    padding:6px 10px;
    border-radius:4px;
    cursor:pointer;
}