:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--border-color: #dee2e6;--accent-color: #4f46e5;--accent-hover: #4338ca;--success-color: #10b981;--danger-color: #ef4444;--warning-color: #f59e0b;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}.dark-mode{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3d3d3d;--text-primary: #f1f3f5;--text-secondary: #adb5bd;--border-color: #495057;--accent-color: #6366f1;--accent-hover: #4f46e5;--success-color: #34d399;--danger-color: #f87171;--warning-color: #fbbf24;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;transition:background-color .3s ease,color .3s ease}#root{min-height:100vh}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-container{max-width:800px;margin:0 auto;padding:1rem;min-height:100vh}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1.5rem 0}.app-title{font-size:2rem;font-weight:700;color:var(--text-primary)}.dark-mode-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .2s ease;font-size:.875rem;font-weight:500}.dark-mode-toggle:hover{background-color:var(--accent-color);color:#fff;transform:translateY(-1px)}.dark-mode-toggle:focus{outline:2px solid var(--accent-color);outline-offset:2px}.task-input-form{margin-bottom:2rem}.input-group{display:flex;flex-direction:column;gap:.75rem}.task-input,.task-date-input{padding:.875rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background-color:var(--bg-primary);color:var(--text-primary);transition:border-color .2s ease;width:100%}.task-input:focus,.task-date-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #4f46e51a}.add-button{padding:.875rem 1.5rem;background-color:var(--accent-color);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.add-button:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.add-button:focus{outline:2px solid var(--accent-color);outline-offset:2px}.add-button:active{transform:translateY(0)}.task-stats{background-color:var(--bg-primary);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}.stat-item{text-align:center;padding:.75rem;background-color:var(--bg-secondary);border-radius:8px}.stat-value{display:block;font-size:1.75rem;font-weight:700;color:var(--accent-color);margin-bottom:.25rem}.stat-label{display:block;font-size:.875rem;color:var(--text-secondary);font-weight:500}.complete-all-button{width:100%;padding:.75rem;background-color:var(--success-color);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.complete-all-button:hover{opacity:.9;transform:translateY(-1px)}.complete-all-button:focus{outline:2px solid var(--success-color);outline-offset:2px}.filter-controls{display:flex;gap:.5rem;margin-bottom:1.5rem;background-color:var(--bg-primary);padding:.5rem;border-radius:10px;box-shadow:var(--shadow-sm)}.filter-button{flex:1;padding:.625rem 1rem;background-color:transparent;color:var(--text-secondary);border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease}.filter-button:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.filter-button.active{background-color:var(--accent-color);color:#fff}.filter-button:focus{outline:2px solid var(--accent-color);outline-offset:-2px}.task-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.task-item{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;transition:all .2s ease;box-shadow:var(--shadow-sm)}.task-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.task-item.completed{opacity:.7}.task-item.overdue{border-left:4px solid var(--danger-color)}.task-content{display:flex;align-items:flex-start;gap:1rem;flex:1}.checkbox-container{position:relative;display:inline-block;cursor:pointer;flex-shrink:0}.checkbox-container input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.checkmark{display:block;width:24px;height:24px;border:2px solid var(--border-color);border-radius:6px;background-color:var(--bg-primary);transition:all .2s ease}.checkbox-container:hover .checkmark{border-color:var(--accent-color)}.checkbox-container input:checked~.checkmark{background-color:var(--accent-color);border-color:var(--accent-color)}.checkbox-container input:checked~.checkmark:after{content:"";position:absolute;left:8px;top:4px;width:6px;height:12px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container input:focus~.checkmark{outline:2px solid var(--accent-color);outline-offset:2px}.task-details{flex:1}.task-text{display:block;font-size:1rem;color:var(--text-primary);margin-bottom:.5rem;word-break:break-word}.task-item.completed .task-text{text-decoration:line-through}.task-metadata{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.75rem;color:var(--text-secondary)}.task-due{color:var(--accent-color);font-weight:500}.task-due.overdue-label{color:var(--danger-color);font-weight:600}.delete-button{padding:.5rem 1rem;background-color:transparent;color:var(--danger-color);border:1px solid var(--danger-color);border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;flex-shrink:0}.delete-button:hover{background-color:var(--danger-color);color:#fff}.delete-button:focus{outline:2px solid var(--danger-color);outline-offset:2px}.empty-state{text-align:center;padding:4rem 2rem;background-color:var(--bg-primary);border-radius:12px;box-shadow:var(--shadow-sm)}.empty-state-icon{color:var(--text-secondary);margin-bottom:1.5rem}.empty-state-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.empty-state-description{font-size:1rem;color:var(--text-secondary);max-width:400px;margin:0 auto}.empty-filter{text-align:center;padding:3rem 2rem;background-color:var(--bg-primary);border-radius:12px;box-shadow:var(--shadow-sm)}.empty-filter p{font-size:1rem;color:var(--text-secondary)}@media(min-width:480px){.input-group{flex-direction:row;align-items:stretch}.task-input{flex:1}.task-date-input{width:auto;min-width:160px}.add-button{width:auto}}@media(min-width:640px){.app-container{padding:2rem}.app-title{font-size:2.5rem}.task-metadata{font-size:.813rem}}@media(min-width:768px){.app-container{padding:3rem 2rem}.stats-grid{gap:1.5rem}.stat-item{padding:1rem}}@media(min-width:1024px){.app-header{margin-bottom:2.5rem}}@media(min-width:1600px){.app-container{max-width:900px}}