:root{--bg-color: #e0e5ec;--primary-color: #4a90e2;--primary-color-dark: #357abd;--text-color: #555e67;--text-color-light: #9ba4b0;--text-color-completed: #a0a8b1;--danger-color: #e74c3c;--prioritized-color: #f39c12;--border-radius: 12px;--transition-speed: .2s;--shadow-light: #ffffff;--shadow-dark: #a3b1c6}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem 1rem}.container{width:100%;max-width:600px;margin:0 auto}header{text-align:center;margin-bottom:2rem}h1{font-size:2.5rem;font-weight:700;color:var(--text-color-light);text-shadow:1px 1px 1px var(--shadow-light),-1px -1px 1px var(--shadow-dark)}.btn,.input-field,.sort-dropdown,.task-item,.btn-filter{border-radius:var(--border-radius);transition:all var(--transition-speed) ease;border:none;outline:none}.input-group,.controls{background-color:var(--bg-color);border-radius:var(--border-radius);padding:1rem;margin-bottom:1.5rem;box-shadow:inset 5px 5px 10px var(--shadow-dark),inset -5px -5px 10px var(--shadow-light)}.input-section{display:flex;gap:.5rem}.date-reminder-section{display:flex;gap:.5rem;margin-top:1rem}.suggestion-section{margin-top:1rem;display:flex}.input-field{flex-grow:1;padding:.75rem 1rem;background-color:var(--bg-color);font-size:1rem;color:var(--text-color);font-family:inherit;box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}.input-field::placeholder{color:var(--text-color-light)}.date-picker:invalid{color:var(--text-color-light)}.btn{padding:.75rem 1.5rem;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--bg-color);box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light);color:var(--text-color)}.btn:hover{color:var(--primary-color)}.btn:active,.btn:disabled{box-shadow:inset 5px 5px 10px var(--shadow-dark),inset -5px -5px 10px var(--shadow-light);color:var(--text-color-light)}.btn:disabled{cursor:not-allowed}.btn-primary{color:var(--primary-color)}.btn-primary:hover:not(:disabled){color:var(--primary-color-dark)}.btn-secondary{flex-grow:1}.btn-tertiary{background:transparent;box-shadow:none;color:var(--text-color-light)}.btn-tertiary:hover{color:var(--text-color)}.btn-icon{background:none;border:none;cursor:pointer;padding:.5rem;color:var(--text-color-light);border-radius:50%;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.btn-icon:hover{color:var(--text-color);background-color:#0000000d}.btn-delete:hover{color:var(--danger-color)}.controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.filter-controls{display:flex;align-items:center;gap:.5rem}.btn-filter{padding:.5rem 1rem;cursor:pointer;font-weight:500;background-color:var(--bg-color);color:var(--text-color-light);box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light)}.btn-filter:hover{color:var(--text-color)}.btn-filter.active{box-shadow:inset 5px 5px 10px var(--shadow-dark),inset -5px -5px 10px var(--shadow-light);color:var(--primary-color)}.sort-control{display:flex;align-items:center;gap:.5rem}.sort-control label{font-size:.9rem;color:var(--text-color-light)}.sort-dropdown{padding:.5rem 1rem;background-color:var(--bg-color);color:var(--text-color);box-shadow:3px 3px 6px var(--shadow-dark),-3px -3px 6px var(--shadow-light)}.task-list{list-style-type:none}.task-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;margin-bottom:1rem;background-color:var(--bg-color);box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light);word-break:break-word}.task-item.completed .task-text{text-decoration:line-through;color:var(--text-color-completed)}.task-item.prioritized{box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light),inset 0 0 0 2px var(--prioritized-color)}.task-item.prioritized .btn-icon svg{stroke:var(--prioritized-color)}.task-item.overdue{box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light),inset 0 0 0 2px var(--danger-color)}.task-text{cursor:pointer;flex-grow:1}.task-meta{display:flex;align-items:center;gap:.5rem;margin-left:1rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.task-date{font-size:.8rem;color:var(--text-color-light);display:inline-flex;align-items:center;gap:.25rem}.task-actions{display:flex;align-items:center;gap:.25rem}.archived-section{margin-top:2rem}.archived-section h2{text-align:center;color:var(--text-color-light);margin-bottom:1rem}.task-item.archived{background-color:#d1d9e6;color:var(--text-color-light);box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light)}.error-message{text-align:center;color:var(--danger-color);background-color:#fdd;padding:.75rem;border-radius:var(--border-radius);margin-bottom:1.5rem}.date-picker::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(.5)}