body{background-color:#f9f9f9;padding:2rem;display:flex;justify-content:center;overflow-x:hidden;min-height:100vh;transition:background-color .3s ease}body.dark-mode{background-color:#121212}.app-container{width:350px;max-width:500px;background-color:#fff;padding:2rem;box-shadow:0 4px 12px #0000001a;border-radius:12px;transition:background-color .3s ease,box-shadow .3s ease}body.dark-mode .app-container{background-color:#232222;box-shadow:0 4px 12px #0000004d}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.header h1{margin:0;color:#333;transition:color .3s ease}body.dark-mode .header h1{color:#fff}.dark-mode-toggle{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .3s ease}.dark-mode-toggle:hover{background-color:#0000001a;scale:1.2;transition:all .3s ease-in-out}body.dark-mode .dark-mode-toggle:hover{background-color:#ffffff1a}.todo-form input{width:90%;padding:.8rem;font-size:1rem;border:1px solid #ddd;border-radius:8px;outline:none;background-color:#fff;color:#333;transition:background-color .3s ease,color .3s ease,border-color .3s ease}body.dark-mode .todo-form input{background-color:#3d3d3d;color:#fff;border-color:#555}body.dark-mode .todo-form input::placeholder{color:#aaa}.todo-list{list-style:none;padding:0;margin:1rem 0}.todo-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid #eee;transition:background .2s ease}.todo-item:hover{background-color:#f5f5f5}body.dark-mode .todo-item{border-bottom-color:#444}body.dark-mode .todo-item:hover{background-color:#3d3d3d}.todo-item input[type=checkbox]{margin-right:1rem;transform:scale(1.2)}.todo-item span{flex:1;font-size:1rem;color:#333;transition:color .3s ease}body.dark-mode .todo-item span{color:#fff}.todo-item.completed span{text-decoration:line-through;color:#aaa}body.dark-mode .todo-item.completed span{color:#666}.todo-item button{background:none;border:none;color:#c00;font-size:1.2rem;cursor:pointer;transition:color .3s ease}.todo-item button:hover{border-style:double;border-radius:6px}body.dark-mode .todo-item button{color:#ff6b6b}.footer{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #eee;font-size:.9rem;color:#333;transition:color .3s ease,border-color .3s ease}body.dark-mode .footer{color:#fff;border-top-color:#444}.footer button{background-color:#e74c3c;border:none;color:#fff;padding:.4rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background-color .3s ease}.footer button:hover{background-color:#c0392b}