body{transition:background-color .3s,color .3s;margin:0;padding:0}body.dark{background-color:#121212;color:#f5f5f5}.todo-container{max-width:800px;margin:0 auto;padding:2rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.1);background-color:#fff;transition:all .3s ease}.todo-container.dark-mode{background-color:#1e1e1e;color:#f5f5f5;box-shadow:0 8px 30px rgba(0,0,0,.3)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header h1{font-size:2.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,#42b883,#347474);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.theme-toggle{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:background-color .3s}.theme-toggle:hover{background-color:rgba(0,0,0,.1)}.dark-mode .theme-toggle:hover{background-color:hsla(0,0%,100%,.1)}.add-todo{display:flex;margin-bottom:1.5rem}.todo-input{flex:1;padding:.8rem 1rem;border:2px solid #e0e0e0;border-radius:8px 0 0 8px;font-size:1rem;transition:border-color .3s;outline:none}.dark-mode .todo-input{background-color:#2d2d2d;border-color:#444;color:#f5f5f5}.todo-input:focus{border-color:#42b883}.add-btn{padding:.8rem 1.5rem;background:linear-gradient(135deg,#42b883,#347474);color:#fff;border:none;border-radius:0 8px 8px 0;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}.add-btn:hover{background:linear-gradient(135deg,#3ca876,#2d6363);transform:translateY(-2px)}.filters{display:flex;justify-content:center;margin-bottom:1.5rem;gap:.5rem}.filter-btn{padding:.5rem 1rem;background-color:#f5f5f5;border:none;border-radius:20px;font-size:.9rem;cursor:pointer;transition:all .3s}.dark-mode .filter-btn{background-color:#2d2d2d;color:#f5f5f5}.filter-btn.active{background-color:#42b883;color:#fff;font-weight:600}.stats{margin-bottom:1.5rem}.progress-container{height:8px;background-color:#e0e0e0;border-radius:4px;margin-bottom:.5rem;overflow:hidden}.dark-mode .progress-container{background-color:#444}.progress-bar{height:100%;background:linear-gradient(135deg,#42b883,#347474);border-radius:4px;transition:width .5s ease-in-out}.todo-list{list-style:none;padding:0;margin:0}.todo-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;margin-bottom:.8rem;background-color:#f9f9f9;border-radius:8px;transition:all .3s;animation:fadeIn .5s}.dark-mode .todo-item{background-color:#2d2d2d}.todo-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.dark-mode .todo-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.3)}.todo-content{display:flex;align-items:center;flex:1}.todo-checkbox{margin-right:1rem;width:20px;height:20px;cursor:pointer}.todo-text{font-size:1.1rem;transition:all .3s}.completed .todo-text{text-decoration:line-through;color:#888}.delete-btn{padding:.5rem 1rem;background-color:#ff5252;color:#fff;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .3s;opacity:.8}.delete-btn:hover{opacity:1;transform:translateY(-2px)}.empty-message{text-align:center;color:#888;font-style:italic;margin-top:2rem}.todo-list-enter-active,.todo-list-leave-active{transition:all .5s ease}.todo-list-enter-from,.todo-list-leave-to{opacity:0;transform:translateY(30px)}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.spinner{width:40px;height:40px;border:4px solid rgba(66,184,131,.1);border-radius:50%;border-top-color:#42b883;animation:spin 1s ease-in-out infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(1turn)}}.error-message{background-color:#ffebee;color:#f44336;padding:1rem;border-radius:8px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between}.dark-mode .error-message{background-color:#3a2121;color:#ff8a80}.retry-btn{background-color:#f44336;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:background-color .3s}.retry-btn:hover{background-color:#d32f2f}button:disabled{opacity:.5;cursor:not-allowed}input:disabled{background-color:#f0f0f0;cursor:not-allowed}.dark-mode input:disabled{background-color:#333}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.todo-container{padding:1.5rem;margin:1rem;border-radius:8px}.header h1{font-size:2rem}.add-todo{flex-direction:column}.todo-input{margin-bottom:.5rem}.add-btn,.todo-input{border-radius:8px}.filters{flex-wrap:wrap}}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem;transition:background-color .3s,color .3s}.app-container{width:100%}