:root{--primary-blue: #3b82f6;--primary-blue-hover: #2563eb;--primary-blue-light: #dbeafe;--success-green: #10b981;--success-green-light: #d1fae5;--warning-yellow: #f59e0b;--warning-yellow-light: #fef3c7;--danger-red: #ef4444;--danger-red-light: #fee2e2;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--text-primary: var(--gray-900);--text-secondary: var(--gray-600);--text-muted: var(--gray-500);--text-disabled: var(--gray-400);--bg-primary: #ffffff;--bg-secondary: var(--gray-50);--bg-tertiary: var(--gray-100);--border-light: var(--gray-200);--border-medium: var(--gray-300);--border-dark: var(--gray-400);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-base: 1rem;--spacing-lg: 1.25rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 3rem;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1280px;--touch-target: 44px;--z-dropdown: 10;--z-sticky: 20;--z-fixed: 30;--z-modal-backdrop: 40;--z-modal: 50;--z-popover: 60;--z-tooltip: 70;--z-notification: 80}[data-theme=dark]{--text-primary: var(--gray-100);--text-secondary: var(--gray-300);--text-muted: var(--gray-400);--text-disabled: var(--gray-500);--bg-primary: var(--gray-900);--bg-secondary: var(--gray-800);--bg-tertiary: var(--gray-700);--border-light: var(--gray-700);--border-medium: var(--gray-600);--border-dark: var(--gray-500);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3)}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.6;color:var(--text-primary);background-color:var(--bg-secondary);transition:background-color var(--transition-base),color var(--transition-base)}.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-visible{outline:2px solid var(--primary-blue);outline-offset:2px}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}#app{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:var(--container-md);margin:0 auto;padding:0 var(--spacing-base)}.app-header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-light);padding:var(--spacing-xl) 0;transition:background-color var(--transition-base),border-color var(--transition-base)}.header-content{max-width:var(--container-md);margin:0 auto;padding:0 var(--spacing-base);display:flex;align-items:center;justify-content:space-between;position:relative}.app-title{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--spacing-sm)}.title-icon{font-size:var(--font-size-xl);color:var(--primary-blue)}.app-subtitle{margin:var(--spacing-xs) 0 0 0;font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:var(--font-weight-normal)}.theme-toggle{background:none;border:1px solid var(--border-medium);border-radius:var(--radius-lg);padding:var(--spacing-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--touch-target);height:var(--touch-target);transition:all var(--transition-fast);color:var(--text-secondary)}.theme-toggle:hover{border-color:var(--border-dark);color:var(--text-primary);transform:translateY(-1px)}.theme-icon{font-size:var(--font-size-lg);transition:opacity var(--transition-fast)}[data-theme=light] .dark-icon,[data-theme=dark] .light-icon{display:none}.main-content{flex:1;padding:var(--spacing-2xl) 0}.add-todo-section{margin-bottom:var(--spacing-2xl)}.todo-form{display:flex;flex-direction:column;gap:var(--spacing-sm)}.todo-input{flex:1;padding:var(--spacing-md) var(--spacing-base);border:2px solid var(--border-light);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:inherit;background-color:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast);min-height:var(--touch-target)}.todo-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px var(--primary-blue-light)}.todo-input::placeholder{color:var(--text-muted)}.add-button{background-color:var(--primary-blue);color:#fff;border:none;border-radius:var(--radius-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-fast);min-height:var(--touch-target);min-width:var(--touch-target);white-space:nowrap}.add-button:hover{background-color:var(--primary-blue-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.add-button:active{transform:translateY(0)}.add-icon{font-size:var(--font-size-lg);font-weight:700;line-height:1}.input-help{font-size:var(--font-size-xs);color:var(--text-muted);padding-left:var(--spacing-base)}.filter-section{margin-bottom:var(--spacing-xl)}.filter-buttons{display:flex;gap:var(--spacing-xs);background-color:var(--bg-primary);padding:var(--spacing-xs);border-radius:var(--radius-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}.filter-button{background:none;border:none;padding:var(--spacing-sm) var(--spacing-base);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs);min-height:var(--touch-target);white-space:nowrap}.filter-button:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.filter-button .count{font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-sm);background-color:rgba(255,255,255,.2);border-radius:var(--radius-md);font-weight:var(--font-weight-medium)}.filter-button:not(.active) .count{background-color:var(--bg-tertiary);color:var(--text-muted)}.todo-stats{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-base);font-size:var(--font-size-sm);color:var(--text-secondary)}.todo-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl)}.empty-state.hidden{display:none}.empty-title{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.empty-description{margin:0;font-size:var(--font-size-sm);line-height:1.5}.bulk-actions{display:flex;gap:var(--spacing-sm);padding:var(--spacing-base) 0;border-top:1px solid var(--border-light);margin-top:var(--spacing-base)}.bulk-actions.hidden{display:none}.bulk-button{background-color:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-medium);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);min-height:var(--touch-target)}.bulk-button:hover{color:var(--text-primary);border-color:var(--border-dark);background-color:var(--bg-tertiary)}.bulk-button.secondary{color:var(--danger-red);border-color:var(--danger-red)}.bulk-button.secondary:hover{background-color:var(--danger-red-light);color:var(--danger-red)}.app-footer{background-color:var(--bg-primary);border-top:1px solid var(--border-light);padding:var(--spacing-xl) 0;margin-top:auto}.footer-content{max-width:var(--container-md);margin:0 auto;padding:0 var(--spacing-base);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-base)}.footer-text{margin:0;font-size:var(--font-size-sm);color:var(--text-muted)}.privacy-note{color:var(--success-green);font-weight:var(--font-weight-medium)}.footer-links{display:flex;gap:var(--spacing-base)}.footer-link{background:none;border:none;color:var(--primary-blue);font-size:var(--font-size-sm);text-decoration:underline;cursor:pointer;transition:color var(--transition-fast)}.footer-link:hover{color:var(--primary-blue-hover)}@media (max-width: 640px){.container{padding:0 var(--spacing-sm)}.header-content{padding:0 var(--spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--spacing-base)}.app-title{font-size:var(--font-size-xl)}.theme-toggle{position:absolute;top:0;right:var(--spacing-sm)}.input-group{flex-direction:column}.add-button,.filter-buttons{justify-content:center}.footer-content{flex-direction:column;text-align:center;gap:var(--spacing-sm)}.bulk-actions{flex-direction:column}.bulk-button{justify-content:center}}@media (max-width: 480px){.container{padding:0 var(--spacing-xs)}.main-content{padding:var(--spacing-base) 0}.add-todo-section{margin-bottom:var(--spacing-xl)}.filter-buttons{flex-direction:column;gap:var(--spacing-xs)}.filter-button{justify-content:center}}@media (prefers-contrast: high){:root{--border-light: var(--gray-400);--border-medium: var(--gray-500);--border-dark: var(--gray-600)}.todo-input:focus{box-shadow:0 0 0 3px var(--primary-blue)}}@media print{.theme-toggle,.add-todo-section,.filter-section,.bulk-actions,.app-footer{display:none}.app-header{border-bottom:2px solid #000;margin-bottom:1rem}.main-content{padding:0}.todo-item{break-inside:avoid;margin-bottom:.5rem}}.todo-item{background-color:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-base);display:flex;align-items:flex-start;gap:var(--spacing-md);transition:all var(--transition-fast);position:relative;box-shadow:var(--shadow-sm)}.todo-item:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-1px)}.todo-item.completed{opacity:.7;background-color:var(--bg-tertiary)}.todo-item.editing{border-color:var(--primary-blue);box-shadow:0 0 0 3px var(--primary-blue-light)}.todo-item.deleting{opacity:.5;transform:scale(.95);pointer-events:none}.todo-checkbox{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-medium);border-radius:var(--radius-sm);cursor:pointer;position:relative;flex-shrink:0;margin-top:2px;transition:all var(--transition-fast);background-color:var(--bg-primary)}.todo-checkbox:hover{border-color:var(--primary-blue)}.todo-checkbox:checked{background-color:var(--primary-blue);border-color:var(--primary-blue)}.todo-checkbox:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;line-height:1}.todo-checkbox:focus{outline:2px solid var(--primary-blue);outline-offset:2px}.todo-content{flex:1;min-width:0}.todo-text{display:block;font-size:var(--font-size-base);line-height:1.5;color:var(--text-primary);word-wrap:break-word;hyphens:auto;margin:0;padding:var(--spacing-xs) 0;cursor:pointer;transition:color var(--transition-fast)}.todo-item.completed .todo-text{text-decoration:line-through;color:var(--text-muted)}.todo-text:hover{color:var(--primary-blue)}.todo-text:focus{outline:2px solid var(--primary-blue);outline-offset:2px;border-radius:var(--radius-sm)}.todo-edit-input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--primary-blue);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:inherit;line-height:1.5;background-color:var(--bg-primary);color:var(--text-primary);resize:none;min-height:auto;transition:border-color var(--transition-fast)}.todo-edit-input:focus{outline:none;border-color:var(--primary-blue-hover);box-shadow:0 0 0 3px var(--primary-blue-light)}.todo-meta{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--text-muted)}.todo-timestamp{display:flex;align-items:center;gap:var(--spacing-xs)}.todo-priority{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:2px var(--spacing-xs);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.025em}.todo-priority.high{background-color:var(--danger-red-light);color:var(--danger-red)}.todo-priority.medium{background-color:var(--warning-yellow-light);color:var(--warning-yellow)}.todo-priority.low{background-color:var(--success-green-light);color:var(--success-green)}.todo-actions{display:flex;gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0}.todo-item:hover .todo-actions,.todo-item:focus-within .todo-actions{opacity:1}.todo-action-button{background:none;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:all var(--transition-fast);color:var(--text-muted)}.todo-action-button:hover{color:var(--text-primary);border-color:var(--border-medium);background-color:var(--bg-tertiary);transform:translateY(-1px)}.todo-action-button.edit-button:hover{color:var(--primary-blue);border-color:var(--primary-blue);background-color:var(--primary-blue-light)}.todo-action-button.delete-button:hover{color:var(--danger-red);border-color:var(--danger-red);background-color:var(--danger-red-light)}.todo-action-button:focus{outline:2px solid var(--primary-blue);outline-offset:2px}.todo-edit-actions{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.todo-edit-button{background-color:var(--primary-blue);color:#fff;border:none;border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.todo-edit-button:hover{background-color:var(--primary-blue-hover);transform:translateY(-1px)}.todo-edit-button.cancel{background-color:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-medium)}.todo-edit-button.cancel:hover{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-dark)}.modal-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all var(--transition-base)}.modal-container.visible{opacity:1;visibility:visible}.modal{background-color:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:90vw;max-height:90vh;width:400px;transform:scale(.95) translateY(20px);transition:transform var(--transition-base);z-index:var(--z-modal)}.modal-container.visible .modal{transform:scale(1) translateY(0)}.modal-content{padding:var(--spacing-xl)}.modal-title{margin:0 0 var(--spacing-base) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.modal-description{margin:0 0 var(--spacing-xl) 0;font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.5}.modal-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.modal-button{padding:var(--spacing-sm) var(--spacing-base);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;min-height:var(--touch-target);min-width:80px}.modal-button.primary{background-color:var(--danger-red);color:#fff;border-color:var(--danger-red)}.modal-button.primary:hover{background-color:#dc2626;transform:translateY(-1px)}.modal-button.secondary{background-color:var(--bg-secondary);color:var(--text-secondary);border-color:var(--border-medium)}.modal-button.secondary:hover{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-dark)}.notification{position:fixed;bottom:var(--spacing-xl);left:50%;transform:translate(-50%) translateY(100px);background-color:var(--gray-800);color:#fff;padding:var(--spacing-base) var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--spacing-base);z-index:var(--z-notification);transition:transform var(--transition-base);max-width:90vw}.notification.visible{transform:translate(-50%) translateY(0)}.notification-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.undo-button{background:none;border:1px solid rgba(255,255,255,.3);color:var(--primary-blue-light);border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.undo-button:hover{background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}.loading-state{display:flex;justify-content:center;align-items:center;padding:var(--spacing-2xl);color:var(--text-muted)}.loading-spinner{width:24px;height:24px;border:2px solid var(--border-light);border-top:2px solid var(--primary-blue);border-radius:50%;animation:spin 1s linear infinite;margin-right:var(--spacing-sm)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-container{position:relative;margin-bottom:var(--spacing-base)}.search-input{width:100%;padding:var(--spacing-sm) var(--spacing-base) var(--spacing-sm) 40px;border:1px solid var(--border-light);border-radius:var(--radius-lg);font-size:var(--font-size-sm);background-color:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast)}.search-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px var(--primary-blue-light)}.search-icon{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:var(--font-size-sm);pointer-events:none}.search-clear{position:absolute;right:var(--spacing-sm);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:color var(--transition-fast)}.search-clear:hover{color:var(--text-primary)}.todo-item.dragging{opacity:.5;transform:rotate(5deg);z-index:var(--z-fixed)}.todo-item.drag-over{border-color:var(--primary-blue);box-shadow:0 0 0 2px var(--primary-blue-light)}.drag-handle{cursor:grab;color:var(--text-muted);padding:var(--spacing-xs);margin-right:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast)}.todo-item:hover .drag-handle{opacity:1}.drag-handle:active{cursor:grabbing}.priority-selector{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.priority-option{background:none;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;font-weight:var(--font-weight-medium);letter-spacing:.025em}.priority-option:hover{border-color:var(--border-medium);background-color:var(--bg-tertiary)}.priority-option.selected.high{background-color:var(--danger-red);border-color:var(--danger-red);color:#fff}.priority-option.selected.medium{background-color:var(--warning-yellow);border-color:var(--warning-yellow);color:#fff}.priority-option.selected.low{background-color:var(--success-green);border-color:var(--success-green);color:#fff}@keyframes slideInFromRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutToRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeOutScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-10px,0)}70%{transform:translate3d(0,-5px,0)}90%{transform:translate3d(0,-2px,0)}}.animate-slide-in{animation:slideInFromRight .3s ease-out}.animate-slide-out{animation:slideOutToRight .3s ease-in}.animate-fade-in{animation:fadeInScale .2s ease-out}.animate-fade-out{animation:fadeOutScale .2s ease-in}.animate-shake{animation:shake .5s ease-in-out}.animate-pulse{animation:pulse 1s infinite}.animate-bounce{animation:bounce 1s}.todo-form{width:100%;margin-bottom:var(--spacing-lg)}.input-group{display:flex;gap:var(--spacing-sm);align-items:stretch}.input-wrapper{flex:1;position:relative}.todo-input{width:100%;padding:var(--spacing-md) var(--spacing-base);border:2px solid var(--border-light);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:inherit;background-color:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast)}.todo-input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px var(--primary-blue-light)}.todo-input:disabled{background-color:var(--bg-secondary);color:var(--text-disabled);cursor:not-allowed}.todo-form.focused .input-wrapper{transform:scale(1.02)}.todo-form.error .todo-input{border-color:var(--danger-red);box-shadow:0 0 0 3px var(--danger-red-light)}.todo-form.success .input-wrapper{transform:scale(1.02);box-shadow:0 0 0 3px var(--success-green-light)}.character-counter{position:absolute;right:var(--spacing-xs);bottom:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--text-muted);background:var(--bg-primary);padding:var(--spacing-xs);border-radius:var(--radius-sm)}.add-button{background-color:var(--primary-blue);color:#fff;border:none;border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-fast);min-height:var(--touch-target);white-space:nowrap}.add-button:hover:not(:disabled){background-color:var(--primary-blue-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.add-button:disabled{background-color:var(--gray-300);color:var(--text-disabled);cursor:not-allowed;transform:none}.add-button.submitting .add-icon{animation:spin 1s linear infinite}.input-help{margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--text-muted);display:flex;justify-content:space-between;align-items:center}.error-message{color:var(--danger-red);font-weight:var(--font-weight-medium)}.filter-container{display:flex;flex-direction:column;gap:var(--spacing-base);margin-bottom:var(--spacing-xl)}.filter-buttons{display:flex;gap:var(--spacing-xs);background-color:var(--bg-secondary);padding:var(--spacing-xs);border-radius:var(--radius-lg);overflow-x:auto}.filter-button{background:none;border:none;padding:var(--spacing-sm) var(--spacing-base);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs);white-space:nowrap;min-height:var(--touch-target)}.filter-button:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.filter-button.active{background-color:var(--primary-blue);color:#fff}.filter-button .filter-icon{font-size:var(--font-size-base)}.filter-count{background-color:rgba(255,255,255,.2);padding:2px var(--spacing-xs);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.filter-button:not(.active) .filter-count{background-color:var(--bg-tertiary);color:var(--text-muted)}.filter-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.action-button{background:none;border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs)}.action-button:hover:not(:disabled){border-color:var(--border-dark);background-color:var(--bg-tertiary);color:var(--text-primary)}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button.loading{pointer-events:none}.action-button.loading .action-icon{animation:spin 1s linear infinite}.todo-list-container{width:100%}.todo-list-wrapper{position:relative}.todo-stats{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-base);padding:var(--spacing-sm) var(--spacing-base);background-color:var(--bg-secondary);border-radius:var(--radius-lg);font-size:var(--font-size-sm);color:var(--text-secondary)}.stats-separator{color:var(--text-muted)}.todo-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.empty-state{text-align:center;padding:var(--spacing-3xl) var(--spacing-base);color:var(--text-muted)}.empty-icon{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-base)}.empty-message{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--text-secondary);margin:0 0 var(--spacing-sm) 0}.empty-hint{font-size:var(--font-size-sm);color:var(--text-muted);margin:0}.virtual-scroll-container{position:relative;overflow-y:auto;max-height:70vh}@media (max-width: 640px){.todo-item{padding:var(--spacing-md);flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.todo-checkbox{align-self:flex-start}.todo-actions{opacity:1;align-self:flex-end;margin-top:var(--spacing-sm)}.modal{width:calc(100vw - var(--spacing-base) * 2);margin:var(--spacing-base)}.modal-actions{flex-direction:column-reverse}.modal-button{width:100%;justify-content:center}.notification{left:var(--spacing-base);right:var(--spacing-base);transform:translateY(100px);max-width:none}.notification.visible{transform:translateY(0)}}@media (max-width: 480px){.todo-item{padding:var(--spacing-sm)}.todo-actions{flex-wrap:wrap}.todo-action-button{width:40px;height:40px}}