:root{--bg-light: #f7f7f7;--bg-dark: #1a1a1a;--text-light: #333;--text-dark: #fff;--primary-color: #4CAF50;--primary-hover: #45a049;--delete-color: #ff4444;--edit-color: #4CAF50;--completed-bg: #5E35B1}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;min-height:100vh;background-color:var(--bg-light);color:var(--text-light);transition:background-color .3s,color .3s}body.dark-mode{background-color:var(--bg-dark);color:var(--text-dark)}.app{max-width:600px;margin:2rem auto;padding:2rem;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;transition:background-color .3s}.app.dark{background-color:#2d2d2d;color:var(--text-dark)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.theme-toggle{background:none;border:none;font-size:1.5rem;cursor:pointer;color:inherit;padding:.5rem;transition:transform .3s ease}.theme-toggle:hover{transform:rotate(180deg)}.input-container{display:flex;gap:1rem;margin-bottom:2rem}.todo-input{flex:1;padding:.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;max-width:100%;box-sizing:border-box;overflow:hidden;word-wrap:break-word;white-space:normal}.dark .todo-input{background-color:#3d3d3d;color:var(--text-dark);border-color:#555}.add-todo{padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.add-todo:hover{background-color:var(--primary-hover)}.todos-list{list-style:none;padding:0;margin:0}.todo-item{background-color:#fff;padding:1rem;margin-bottom:.75rem;border-radius:4px;box-shadow:0 2px 4px #0000001a;transition:transform .3s,background-color .3s}.dark .todo-item{background-color:#3d3d3d}.todo-item.completed{background-color:var(--completed-bg);color:#fff}.todo-content{display:flex;justify-content:space-between;align-items:center}.todo-text{display:flex;align-items:center;gap:.75rem}.todo-text span{max-width:90%;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word}.todo-actions{display:flex;gap:.5rem}.todo-checkbox{width:1.2rem;height:1.2rem;cursor:pointer;border-radius:4px}.edit-btn,.trash-btn,.save-btn,.cancel-btn{width:2.5rem;background:none;border:none;color:#4caf50;padding:.5rem;cursor:pointer;transition:all .3s}.edit-btn{color:var(--edit-color)}.trash-btn{color:var(--delete-color)}.edit-btn:hover,.trash-btn:hover{transform:scale(1.1)}.edit-mode{display:flex;gap:.5rem;width:99%}.edit-mode input{flex:1;padding:.5rem;border:1px solid #ccc;border-radius:4px}.dark .edit-mode input{background-color:#3d3d3d;color:var(--text-dark);border-color:#555}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.confetti-piece{position:absolute;top:-20px;border-radius:50%;animation:confettiFall linear forwards;transform:rotate(0)}@keyframes confettiFall{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}25%{transform:translateY(25vh) rotate(90deg) scale(.9);opacity:.9}50%{transform:translateY(50vh) rotate(180deg) scale(.8);opacity:.8}75%{transform:translateY(75vh) rotate(270deg) scale(.7);opacity:.7}to{transform:translateY(100vh) rotate(360deg) scale(.6);opacity:0}}@media (max-width: 600px){.app{margin:0;border-radius:0;min-height:100vh}.input-container{flex-direction:column}.add-todo{width:100%}}