*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{height:100%}body{height:100%;line-height:1.5;-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{height:100%;isolation:isolate}:root{--primary: #3b82f6;--primary-hover: #2563eb;--primary-active: #1d4ed8;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--danger-hover: #dc2626;--priority-low: #10b981;--priority-medium: #f59e0b;--priority-high: #ef4444;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-hover: #f8fafc;--bg-active: #e2e8f0;--text-primary: #1f2937;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--text-muted: #d1d5db;--border: #e5e7eb;--border-hover: #d1d5db;--border-focus: var(--primary);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: .25rem;--radius: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--transition-fast: .15s ease;--transition: .2s ease;--transition-slow: .3s ease}[data-theme=dark]{--bg-primary: #1f2937;--bg-secondary: #111827;--bg-tertiary: #0f172a;--bg-hover: #374151;--bg-active: #4b5563;--text-primary: #f9fafb;--text-secondary: #d1d5db;--text-tertiary: #9ca3af;--text-muted: #6b7280;--border: #374151;--border-hover: #4b5563;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .2)}body{background-color:var(--bg-secondary);color:var(--text-primary);transition:background-color var(--transition),color var(--transition)}h1{font-size:2rem;font-weight:700;line-height:1.2}h2{font-size:1.5rem;font-weight:600;line-height:1.3}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*:focus{outline:2px solid var(--primary);outline-offset:2px}*:focus:not(:focus-visible){outline:none}*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}button{background:none;border:none;cursor:pointer;font-size:inherit;color:inherit;transition:all var(--transition)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);background-color:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition),box-shadow var(--transition)}input:hover,select:hover,textarea:hover{border-color:var(--border-hover)}input:focus,select:focus,textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #3b82f61a}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 640px){:root{--space-container: var(--space-4)}}@media (min-width: 641px){:root{--space-container: var(--space-8)}}.todo-app{max-width:600px;margin:0 auto;padding:var(--space-container, var(--space-8));min-height:100vh;display:flex;flex-direction:column}.todo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:2px solid var(--border)}.todo-header h1{color:var(--primary);font-size:2.5rem;font-weight:800;letter-spacing:-.025em}.todo-main{flex:1;background-color:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-6);transition:background-color var(--transition),box-shadow var(--transition)}.todo-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border);font-size:.875rem;color:var(--text-secondary)}.todo-count{font-weight:500}.clear-completed{padding:var(--space-2) var(--space-4);background-color:var(--danger);color:#fff;border-radius:var(--radius);font-size:.875rem;font-weight:500;transition:background-color var(--transition),transform var(--transition)}.clear-completed:hover{background-color:var(--danger-hover);transform:translateY(-1px)}.clear-completed:active{transform:translateY(0)}.todo-list-empty{text-align:center;padding:var(--space-12) var(--space-4);color:var(--text-secondary)}.empty-message{font-size:1.125rem;font-style:italic}@media (max-width: 640px){.todo-app{padding:var(--space-4)}.todo-header{flex-direction:column;gap:var(--space-4);text-align:center}.todo-header h1{font-size:2rem}.todo-main{padding:var(--space-4)}.todo-footer{flex-direction:column;gap:var(--space-3);text-align:center}}@media (max-width: 480px){.todo-app{padding:var(--space-3)}.todo-header h1{font-size:1.75rem}.todo-main{padding:var(--space-3);border-radius:var(--radius-lg)}}.todo-form{margin-bottom:var(--space-6)}.todo-form-main{display:flex;gap:var(--space-3);align-items:flex-start}.todo-input-wrapper{flex:1;position:relative;display:flex;align-items:center}.todo-input{flex:1;padding:var(--space-3) var(--space-4);padding-right:var(--space-10);font-size:1.125rem;border:2px solid var(--border);border-radius:var(--radius-lg);background-color:var(--bg-primary);transition:all var(--transition)}.todo-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.todo-input::placeholder{color:var(--text-tertiary)}.expand-button{position:absolute;right:var(--space-3);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background-color:var(--bg-hover);color:var(--text-secondary);transition:all var(--transition)}.expand-button:hover{background-color:var(--bg-active);color:var(--text-primary)}.expand-button.expanded{background-color:var(--primary);color:#fff}.expand-icon{transition:transform var(--transition)}.expand-icon.rotated{transform:rotate(45deg)}.add-button{padding:var(--space-3);background-color:var(--primary);color:#fff;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;min-width:48px;transition:all var(--transition);animation:scaleIn .2s ease}.add-button:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.add-button:active{transform:translateY(0)}.todo-form-options{margin-top:var(--space-4);padding:var(--space-4);background-color:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border);display:flex;gap:var(--space-4);animation:slideIn .3s ease}.form-group{flex:1;min-width:0}.form-label{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);font-size:.875rem;font-weight:500;color:var(--text-secondary)}.date-input,.priority-select{width:100%;font-size:.875rem}.character-count{margin-top:var(--space-2);font-size:.75rem;color:var(--text-tertiary);text-align:right}.todo-filters{display:flex;margin-bottom:var(--space-6);background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-1);border:1px solid var(--border)}.filter-button{flex:1;padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-md);font-weight:500;transition:all var(--transition);color:var(--text-secondary)}.filter-button:hover{background-color:var(--bg-hover);color:var(--text-primary)}.filter-button.active{background-color:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.filter-label{font-size:.875rem}.filter-count{font-size:.75rem;background-color:#fff3;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);min-width:20px;text-align:center}.filter-button.active .filter-count{background-color:#ffffff4d}.todo-list-container{max-height:600px;overflow-y:auto;margin:0 calc(-1 * var(--space-6));padding:0 var(--space-6)}.todo-list{list-style:none}.todo-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--border);transition:all var(--transition);position:relative;animation:slideIn .3s ease}.todo-item:hover{background-color:var(--bg-hover)}.todo-item:last-child{border-bottom:none}.todo-item.completed{opacity:.6}.todo-item.completed .todo-text{text-decoration:line-through;color:var(--text-tertiary)}.todo-item.priority-high{border-left:4px solid var(--priority-high)}.todo-item.priority-medium{border-left:4px solid var(--priority-medium)}.todo-item.priority-low{border-left:4px solid var(--priority-low)}.todo-item.due-overdue{background-color:#ef44440d}.todo-item.due-overdue .due-date{color:var(--danger);font-weight:600}.todo-item.due-due-soon .due-date{color:var(--warning);font-weight:600}.todo-item-content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--space-3)}.todo-checkbox-wrapper{position:relative;display:flex;align-items:center;cursor:pointer;margin-top:var(--space-1)}.todo-checkbox{width:20px;height:20px;opacity:0;position:absolute}.checkmark{width:20px;height:20px;border:2px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition);background-color:var(--bg-primary)}.checkmark:after{content:"✓";font-size:12px;color:#fff;opacity:0;transform:scale(0);transition:all var(--transition)}.todo-checkbox:checked+.checkmark{background-color:var(--success);border-color:var(--success)}.todo-checkbox:checked+.checkmark:after{opacity:1;transform:scale(1)}.todo-checkbox:focus+.checkmark{box-shadow:0 0 0 3px #3b82f61a}.todo-text-section{flex:1;min-width:0}.todo-text{display:block;font-size:1rem;line-height:1.5;word-break:break-word;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);transition:background-color var(--transition)}.todo-text:hover:not(.completed){background-color:var(--bg-hover)}.todo-item.completed .todo-text{cursor:default}.todo-meta{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);font-size:.75rem}.due-date,.priority-indicator{display:flex;align-items:center;gap:var(--space-1);color:var(--text-tertiary)}.priority-indicator.priority-high{color:var(--priority-high)}.priority-indicator.priority-medium{color:var(--priority-medium)}.priority-indicator.priority-low{color:var(--priority-low)}.todo-item-actions{display:flex;gap:var(--space-2);opacity:0;transition:opacity var(--transition);align-items:flex-start;margin-top:var(--space-1)}.todo-item:hover .todo-item-actions{opacity:1}.action-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);color:var(--text-secondary);transition:all var(--transition)}.action-button:hover{background-color:var(--bg-hover);color:var(--text-primary)}.edit-button:hover{background-color:#3b82f61a;color:var(--primary)}.delete-button:hover{background-color:#ef44441a;color:var(--danger)}.save-button:hover{background-color:#10b9811a;color:var(--success)}.cancel-button:hover{background-color:#6b72801a;color:var(--text-secondary)}.todo-item.editing{background-color:var(--bg-secondary);border:2px solid var(--primary);border-radius:var(--radius-lg)}.edit-form{width:100%}.edit-input{width:100%;padding:var(--space-2) var(--space-3);font-size:1rem;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-3)}.edit-options{display:flex;gap:var(--space-3)}.edit-group{flex:1;display:flex;align-items:center;gap:var(--space-2)}.edit-label{color:var(--text-secondary);display:flex;align-items:center}.edit-date-input,.edit-priority-select{flex:1;font-size:.875rem;padding:var(--space-1) var(--space-2)}.theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--bg-primary);border:1px solid var(--border);color:var(--text-secondary);transition:all var(--transition);box-shadow:var(--shadow-sm)}.theme-toggle:hover{background-color:var(--bg-hover);color:var(--text-primary);transform:translateY(-1px);box-shadow:var(--shadow)}.theme-toggle:active{transform:translateY(0)}.theme-icon{transition:transform var(--transition)}.theme-toggle:hover .theme-icon{transform:rotate(12deg)}@media (max-width: 640px){.todo-form-options{flex-direction:column;gap:var(--space-3)}.todo-filters{flex-direction:column;gap:var(--space-1)}.filter-button{justify-content:space-between;padding:var(--space-3) var(--space-4)}.todo-item{padding:var(--space-3)}.todo-item-actions{opacity:1}.action-button{width:40px;height:40px}.edit-options{flex-direction:column;gap:var(--space-2)}.edit-group{flex-direction:column;align-items:flex-start;gap:var(--space-1)}.edit-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}}@media (max-width: 480px){.todo-input{font-size:1rem;padding:var(--space-3);padding-right:var(--space-8)}.expand-button{right:var(--space-2);width:24px;height:24px}.add-button{min-width:44px;padding:var(--space-3)}.todo-item{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.todo-item-content{width:100%}.todo-item-actions{width:100%;justify-content:flex-end;margin-top:var(--space-2)}}@media (prefers-contrast: high){:root{--border: #000000;--text-secondary: #000000}[data-theme=dark]{--border: #ffffff;--text-secondary: #ffffff}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}