*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif;font-optical-sizing:auto}body{background-color:#fffbb0;color:#1d1d1d;display:flex;justify-content:center;min-height:100vh;padding:20px;max-width:750px;margin:0 auto}h1{font-family:Bebas Neue,sans-serif;font-weight:400;font-size:72px;color:#a0074c;text-align:center;margin-bottom:20px}p{font-size:16px}.todo-form{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}.dueDate-submit-container{display:flex;gap:20px}.todo-form input[type=text]{flex-grow:1;word-break:break-word;padding:8px;border:1px solid #a0074c;background-color:#fff;border-radius:4px;font-size:16px;transition:border-color .3s ease}.todo-form input[type=text]:focus{border-color:#a0074c;outline:none;box-shadow:0 0 0 3px #a0074c33}.todo-form input[type=date]{padding:8px;border:1px solid #a0074c;background-color:transparent;border-radius:4px;font-size:16px;cursor:pointer;transition:border-color .3s ease}.todo-form input[type=date]:focus{border-color:#a0074c;outline:none;box-shadow:0 0 0 3px #a0074c33}.todo-form button{font-family:Inter,sans-serif;padding:8px;border:1px solid #a0074c;background-color:transparent;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .2s ease}.todo-form button:hover{background-color:#a0074c;color:#fffbb0}.task-count{display:flex;flex-direction:row;justify-content:space-between;gap:20px;margin-bottom:20px;color:#a0074c}.task-count p{margin:5px 0}.todo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}.task-main-content{display:flex;align-items:center;width:100%;margin-bottom:20px;gap:20px}.todo-item{display:flex;justify-content:space-evenly;flex-direction:column;padding:20px;border-bottom:1px solid #a0074c;transition:background-color .2s ease}.todo-item.completed{background-color:#e6ffe6}.todo-item input[type=checkbox]{transform:scale(1.3);cursor:pointer;accent-color:#a0074c;border-radius:4px;transition:all .2s ease}.todo-item input[type=checkbox]:focus{outline:1px solid #a0074c;outline-offset:1px}.todo-item .task-text{flex-grow:1;font-size:16px;word-break:break-word}.todo-item.completed .task-text{text-decoration:line-through;color:#888}.todo-item button{background-color:transparent;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .2s ease}.todo-item button span{border-bottom:1px solid #a0074c}.todo-item button span:hover{border-bottom:1px solid #1d1d1d}.task-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:16px}.todo-item.overdue{border-left:5px solid #f80000}.overdue-text{color:#f80000}.task-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;justify-content:space-between;border-radius:8px}.task-filters button{padding:8px;border:1px solid #a0074c;background-color:transparent;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease,transform .1s ease;flex-shrink:1}.task-filters button:hover{background-color:#a0074c;color:#fffbb0;transform:translateY(-1px)}.task-filters button.active{background-color:#a0074c;color:#fffbb0;font-weight:700}.empty-state{text-align:center;color:#1d1d1d;padding:20px;border:2px dashed #a0074c;border-radius:4px;margin-top:20px;font-style:italic}@media (max-width: 768px){.todo-form{flex-direction:column}.todo-form button{width:100%}.todo-item{flex-wrap:wrap}.todo-item .task-text{flex-basis:100%;margin-bottom:10px}.todo-item button{margin-left:0;margin-top:10px;width:100%}.todo-item{flex-direction:column;align-items:flex-start}.task-main-content{margin-bottom:10px}.task-meta{margin-left:30px;margin-bottom:10px}.todo-item button{position:static;width:auto;margin-top:10px;align-self:flex-end}.task-filters{display:flex;flex-wrap:wrap;justify-content:stretch;gap:8px;margin-bottom:20px;border-radius:8px}}@media (max-width: 480px){body{padding:10px}h1{font-size:42px}p,.todo-form input,.todo-form button{font-size:12px}.todo-item{padding:10px;max-width:100%}.todo-item .task-text{font-size:12px}.task-filters{flex-direction:column;align-items:stretch}.task-filters button{width:100%;font-size:12px}.todo-item button{width:100%;margin-left:0}.todo-item button,.todo-form input[type=text],.todo-form input[type=date],.task-meta{font-size:12px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}