#root{width:1200px}:root{--text-color: #1a1a1a;--title-color: #1a1a1a;--input-bg: #f0f4f8;--input-border: #d1d8e0;--input-color: #1a1a1a;--list-bg: #f9fafc;--task-color: #333333;--date-color: #888888;--button-bg: #e1e8ed;--add-btn-bg: #007aff;--add-btn-hover-bg: #005ecb;--edit-btn-bg: #007aff;--edit-btn-hover-bg: #005ecb;--delete-btn-bg: #ff3b30;--delete-btn-hover-bg: #d32f2f;--body-bg: #f5f5f7;--container-bg: #ffffff;--list-bg: #ffffff;--modal-bg: #ffffff;--modal-title-color: #333;--input-bg: #f0f0f5;--input-border: #ccc}@media (prefers-color-scheme: dark){:root{--body-bg: #1c1c1e;--text-color: #f5f5f7;--title-color: #f5f5f7;--input-bg: #3a3a3c;--input-border: #525255;--input-color: #f5f5f7;--list-bg: #3a3a3c;--task-color: #f5f5f7;--date-color: #a1a1a3;--button-bg: #4a4a4c;--add-btn-bg: #007aff;--add-btn-hover-bg: #005ecb;--edit-btn-bg: #007aff;--edit-btn-hover-bg: #005ecb;--delete-btn-bg: #ff3b30;--delete-btn-hover-bg: #d32f2f;--container-bg: #2c2c2e;--list-bg: #3c3c3e;--modal-bg: #3c3c3e;--modal-title-color: #f5f5f7;--input-bg: #444;--input-border: #666}}*::selection{background-color:transparent}body{display:flex;justify-content:center;margin:100px;background-color:var(--body-bg);color:var(--text-color);transition:background-color .3s ease,color .3s ease;transition:all .3s ease;position:relative}.todo-container{background-color:var(--container-bg);padding:40px;border-radius:15px;box-shadow:0 10px 30px #0000001a;max-width:1200px;width:100%;text-align:center;transition:background-color .3s ease,box-shadow .3s ease}.title{font-size:28px;font-weight:600;color:var(--title-color);display:inline-block;margin-bottom:20px}.input-group{display:flex;justify-content:space-between;gap:10px;margin-bottom:20px;position:relative}.todo-input{flex:1;padding:15px;border:1px solid var(--input-border);border-radius:10px;font-size:16px;color:var(--input-color);background-color:var(--input-bg);transition:all .3s ease}.todo-input:focus{outline:none;border-color:#0071e3}.dataAddData{display:flex;align-items:center}.btnTodo{display:flex}.add-btn,.cancel-btn{background-color:var(--add-btn-bg);color:#fff;border:none;padding:0 20px;font-size:24px;border-radius:10px;cursor:pointer;transition:all .3s ease}.add-btn:active,.cancel-btn:active{transform:scale(.98)}.add-btn:hover{background-color:var(--add-btn-hover-bg)}.todo-list{list-style-type:none}.todo-list li{display:flex;justify-content:space-between;align-items:center;padding:15px;background-color:var(-- list-bg);border-radius:10px;margin-bottom:10px;box-shadow:0 5px 15px #0000000d;transition:all .3s ease}.todo-list li:hover{transform:translateY(-5px);cursor:pointer}.complated{opacity:.5}.todo-task{font-size:16px;color:var(--task-color);text-align:justify}.task-date{font-size:14px;color:var(--date-color);margin-left:10px}.edit-btn,.delete-btn{background-color:var(--button-bg);border:none;padding:8px 12px;font-size:14px;border-radius:8px;cursor:pointer;margin-left:10px;transition:all .3s ease}.edit-btn:active,.delete-btn:active{transform:scale(.96)}.edit-btn{background-color:var(--edit-btn-bg)}.edit-btn:hover{background-color:var(--edit-btn-hover-bg);color:#fff}.delete-btn{background-color:var(--delete-btn-bg)}.delete-btn:hover{background-color:var(--delete-btn-hover-bg);color:#fff}.task.completed{opacity:.5}.no-tasks{font-size:1rem;color:#888;font-weight:600}@media (max-width: 768px){body{margin:0}.todo-container{margin-top:50px;width:100vw;height:100vh;padding:40px;border-radius:0;background-color:var(--body-bg);box-shadow:none}.input-group{flex-direction:column;align-items:stretch}.todo-input{margin-bottom:10px;width:100%}.add-btn,.cancel-btn{width:100%;height:45px;font-size:20px}.todo-list li{padding:10px}.title{font-size:24px;margin-bottom:15px}}@media (max-width: 500px){.todo-container{padding:20px}}@media (max-width: 450px){.task-date{display:none}}@media (max-width: 400px){.todo-container{padding:10px}}*{margin:0;padding:0;font-family:Poppins,sans-serif;box-sizing:border-box;-webkit-tap-highlight-color:transparent}li{list-style:none}