*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f0f2f5;color:#333;line-height:1.6;transition:background-color .3s,color .3s}body.dark-mode{background-color:#121212;color:#e0e0e0}#app{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:10px}.container{background:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:15px;width:100%;max-width:100%;transition:background .3s,box-shadow .3s}body.dark-mode .container{background:#1e1e1e;box-shadow:0 4px 12px #0000004d}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}h1{text-align:center;color:#2c3e50;font-size:1.5rem;transition:color .3s}body.dark-mode h1{color:#bb86fc}.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.5rem;padding:5px;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color .3s}.theme-toggle:hover{background-color:#0000001a}body.dark-mode .theme-toggle:hover{background-color:#ffffff1a}.input-container{display:flex;gap:10px;margin-bottom:15px;flex-direction:column}input{flex:1;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s,box-shadow .3s,background .3s,color .3s}body.dark-mode input{background:#2c2c2c;border:1px solid #444;color:#e0e0e0}input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}body.dark-mode input:focus{border-color:#bb86fc;box-shadow:0 0 0 2px #bb86fc33}button{padding:12px;border:none;border-radius:6px;cursor:pointer;font-size:16px;transition:background-color .3s ease,transform .2s ease,color .3s;min-width:80px;color:#333}body.dark-mode button{color:#fff}button:hover{opacity:.9}button:active{transform:scale(.98)}ul{list-style-type:none}li{display:flex;justify-content:space-between;align-items:center;padding:12px;margin-bottom:10px;background:#f8f9fa;border-radius:6px;box-shadow:0 2px 4px #0000000d;transition:background-color .3s ease,box-shadow .3s;word-break:break-word;flex-direction:column;align-items:flex-start}body.dark-mode li{background:#2c2c2c;box-shadow:0 2px 4px #0003}li:hover{background:#e9ecef}body.dark-mode li:hover{background:#3a3a3a}.done{text-decoration:line-through;color:#999}body.dark-mode .done{color:#999}.actions{display:flex;gap:8px;flex-shrink:0;margin-top:10px;align-self:flex-end}.complete{background-color:#28a745}.undo{background-color:#ffc107;color:#212529}.remove{background-color:#dc3545}@media (min-width: 601px){#app{padding:40px 20px}.container{padding:30px;max-width:500px}.header{margin-bottom:20px}h1{font-size:1.8rem;margin-bottom:0}.input-container{flex-direction:row;margin-bottom:20px}input{padding:14px}button{padding:14px 20px}li{flex-direction:row;align-items:center}.actions{margin-top:0;align-self:auto}}