body{font-family:sans-serif;display:flex;justify-content:center;align-items:center;margin-top:30px;background-color:#293969}#todo-app{width:100%;max-width:400px;background:#fff;border:1px solid #ccc;padding:20px;border-radius:12px}#header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}#toggle-mode{text-align:center;border-radius:10px;cursor:pointer}body.dark-mode,body.dark-mode input,body.dark-mode button,body.dark-mode li{background-color:#121212;color:#eee}body.dark-mode h1{color:#333}input{flex:1;padding:10px;font-size:16px;border:1px solid #8a8787;border-radius:8px}button{padding:10px 20px;font-size:16px;margin-left:10px;cursor:pointer;border:1px solid #8a8787;border-radius:8px}#input-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}ul{list-style:none;padding:0;margin-top:20px}li{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid #8a8787;margin-bottom:10px;border-radius:8px}li.completed span{text-decoration:line-through;color:#000;opacity:.6;text-decoration-color:green}body.dark-mode li.completed span{color:#eee}li button{background:none;border:none;color:red;cursor:pointer;font-size:16px}.fade-in{animation:fadeIn .4s ease forwards}.fade-out{animation:fadeOut .3s ease forwards}.dragging{opacity:.5;background:#ccc!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}