:root{--font-family: Arial, Helvetica, sans-serif;--text-color: #e2e8f0;--background-color: #1e293b;--card-background: #2d3748;--button-radius: 8px;--button-padding: 10px 15px;--button-transition: background-color .3s ease, transform .2s ease, box-shadow .2s ease;--input-background: #2d374850;--input-border: #ffffff7e;--hover-transform: scale(1.05);--box-shadow: 0 5px 10px rgba(0, 0, 0, .2)}body{margin:10px;font-family:var(--font-family);color:var(--text-color);background-color:var(--background-color);display:flex;justify-content:center;align-items:center;min-width:320px;min-height:calc(100vh - 20px)}.todo-container{background-color:var(--card-background);padding:20px;border-radius:10px;box-shadow:var(--box-shadow);max-width:500px;width:90%;margin:auto}h1{font-size:3.2em;margin-bottom:30px;text-align:center}.text{flex:1;font-size:1rem;color:var(--text-color);text-align:left}.text.completed{text-decoration:line-through}button{border-radius:var(--button-radius);border-style:solid;border:1%;border-color:#00000052;padding:var(--button-padding);font-size:1rem;font-weight:500;color:#fff;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;cursor:pointer;transition:var(--button-transition);box-shadow:0 3px 5px #0003}button:hover{transform:var(--hover-transform)}.add-button{background-color:#56b12c}.add-button:hover{background-color:#207020}.clear-button{background-color:#f32a2a}.clear-button:hover{background-color:#eb8d8d}.delete-button{background-color:#fa3f3f;color:#fff}.delete-button:hover{background-color:#eb8d8d}.complete-button{background-color:#06cc10;color:#fff}.complete-button:hover{background-color:#bae6a8}.move-button{background-color:#09f;color:#fff}.move-button:hover{background-color:#9cf}.edit-button{background-color:#a80;color:#fff}.edit-button:hover{background-color:#fff599}.task-date{font-size:.8rem;color:#a0aec0;margin-left:auto;margin-right:10px;white-space:nowrap}.completed-icon{color:#48bb78;font-size:1.2rem}.task-content{display:flex;flex-direction:column;flex:1;overflow:hidden}.task-date{font-size:.75rem;color:#a0aec0;margin-top:4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.task-content-inline{display:flex;justify-content:space-between;align-items:center;flex:1;gap:20px;overflow:hidden}.task-content-inline .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-content-inline .task-date{font-size:.75rem;color:#a0aec0;white-space:nowrap}.completed-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.input-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px;gap:15px}input[type=text]{width:300px;padding:10px;font-size:1.5rem;border:.1px solid var(--input-border);border-radius:5px;background-color:var(--input-background);color:#fff}input[type=text]:focus{border-color:#646cff}.filter-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.filter-buttons button{background-color:#4104a1;color:#fff}.filter-buttons button:hover{background-color:#bf98ff;color:#fff}.filter-buttons button.active{background-color:#646cff;color:#fff}ol{padding:0;margin:0;display:flex;flex-direction:column;gap:15px}li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px;background-color:#2d3748;border-radius:10px;box-shadow:0 5px 10px #0000001a;transition:transform .2s ease,background-color .2s ease}li:hover{transform:translateY(-3px);background-color:#3b4758}.drag-handle{cursor:grab;font-size:1.2rem;color:#a0aec0;margin-right:5px}.empty-state{text-align:center;margin-top:50px;color:var(--text-color)}.empty-state .empty-icon{font-size:3rem;color:#4caf50;margin-bottom:10px}@media (max-width: 768px){h1{font-size:2.5rem}input[type=text]{width:100%}li{flex-direction:column;align-items:center;gap:10px;margin:10px}.text{font-size:1.5rem;text-align:center;width:100%}.delete-button,.complete-button,.edit-button,.move-button{width:auto;height:auto;font-size:1rem;padding:10px}.button-group{display:flex;gap:10px;justify-content:center;width:100%}.drag-handle{font-size:1rem;margin-right:0}}@media (max-width: 320px){h1{font-size:2rem}.todo-container{padding:15px;width:95%}input[type=text]{font-size:1.2rem;padding:8px}li{gap:8px;padding:10px}.text{flex:1;font-size:1rem;color:var(--text-color);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-group{gap:8px}.delete-button,.complete-button,.edit-button,.move-button{font-size:.9rem;padding:8px}}@media (max-width: 320px) and (max-height: 841px){h1{font-size:2rem;margin-bottom:20px}.todo-container{padding:15px;width:95%}input[type=text]{font-size:1.2rem;padding:8px;width:100%}li{gap:8px;padding:10px;flex-direction:column;align-items:center}.text{font-size:1.2rem;text-align:center;width:100%}.button-group{gap:8px;flex-wrap:wrap;justify-content:center}.delete-button,.complete-button,.edit-button,.move-button{font-size:.9rem;padding:8px;width:auto}.drag-handle{font-size:1rem;margin-right:0}}.responsive-wrapper{transform:scale(.7);transform-origin:top center;width:100%;height:auto}@media (min-width: 768px) and (max-width: 1024px){.responsive-wrapper{transform:none}}@media (min-width: 1025px){.responsive-wrapper{transform:scale(1.1);transform-origin:top center}}@media (max-width: 500px){.task-content-inline{flex-direction:column;align-items:flex-start}.task-content-inline .text{width:100%}.task-content-inline .task-date{align-self:flex-end}}