:root{--bg-app: #f8f9fa;--bg-card: white;--bg-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-modal-overlay: rgba(0, 0, 0, .5);--bg-modal-footer: #f8f9fa;--bg-light-hover: #f8f9fa;--bg-polling-status: rgba(0, 0, 0, .2);--text-primary: #495057;--text-secondary: #6c757d;--text-muted: #adb5bd;--text-light: white;--text-link: #007bff;--text-header-p: rgba(255, 255, 255, .9);--text-polling-status: rgba(255, 255, 255, .9);--border-base: #e9ecef;--border-input: #dee2e6;--border-dashed: #dee2e6;--border-header-btn: rgba(255, 255, 255, .3);--border-spinner-base: rgba(255, 255, 255, .3);--border-spinner-top: var(--color-primary-accent);--color-primary-accent: #007bff;--color-success-accent: #28a745;--color-warning-accent: #ffc107;--color-danger-accent: #dc3545;--color-info-accent: #0c5460;--color-secondary-accent: #6c757d;--color-purple-accent: #6f42c1;--color-purple-hover: #5f37a5;--color-primary-gradient-start: #28a745;--color-primary-gradient-end: #20c997;--filter-btn-bg: white;--filter-btn-text: var(--text-primary);--filter-btn-border: var(--border-input);--filter-btn-hover-text: var(--color-primary-accent);--filter-btn-hover-border: var(--color-primary-accent);--filter-btn-active-bg: var(--color-primary-accent);--filter-btn-active-text: var(--text-light);--filter-btn-active-border: var(--color-primary-accent);--refresh-btn-bg: rgba(255, 255, 255, .2);--refresh-btn-hover-bg: rgba(255, 255, 255, .3);--file-tag-bg: #e9ecef;--file-tag-text: var(--text-primary);--dependency-tag-bg: #d1ecf1;--dependency-tag-text: var(--color-info-accent);--error-banner-bg: #f8d7da;--error-banner-text: #721c24;--error-banner-border: #f5c6cb;--error-banner-btn-bg: #dc3545;--error-banner-btn-hover-bg: #c82333;--loading-h3: var(--color-primary-accent);--loading-border: var(--color-primary-accent);--admin-link-bg: var(--color-primary-accent);--admin-link-hover-bg: #0056b3;--toast-bg: white;--toast-shadow: 0 4px 12px rgba(0, 0, 0, .15);--toast-message-text: var(--text-primary);--toast-close-btn-color: var(--text-secondary);--toast-close-btn-hover-color: var(--text-primary);--modal-header-text: var(--text-primary);--form-label-text: var(--text-primary);--form-input-text: var(--text-primary);--form-input-focus-border: var(--color-primary-accent);--cancel-btn-bg: var(--color-secondary-accent);--cancel-btn-hover-bg: #545b62;--add-btn-bg: var(--color-success-accent);--add-btn-hover-bg: #218838;--delete-btn-bg: var(--color-purple-accent);--delete-btn-hover-bg: var(--color-purple-hover);--shadow-card: 0 2px 10px rgba(0,0,0,.1);--shadow-card-hover: 0 4px 20px rgba(0,0,0,.15);--shadow-modal: 0 10px 30px rgba(0,0,0,.3);--shadow-btn-hover-success: 0 4px 12px rgba(40, 167, 69, .3);--shadow-btn-hover-primary: 0 4px 10px rgba(0, 123, 255, .2);--status-pending-color: var(--color-secondary-accent);--status-completed-color: var(--color-success-accent);--status-in-progress-color: var(--color-warning-accent);--color-add-todo-btn-start: var(--color-purple-accent);--color-add-todo-btn-end: var(--color-purple-hover);--shadow-add-todo-btn-hover: 0 4px 12px rgba(111, 66, 193, .3)}:root[data-theme=dark]{--bg-app: #1a202c;--bg-card: #2d3748;--bg-header: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);--bg-modal-overlay: rgba(0, 0, 0, .7);--bg-modal-footer: #2d3748;--bg-light-hover: #4a5568;--bg-polling-status: rgba(255, 255, 255, .1);--text-primary: #e2e8f0;--text-secondary: #a0aec0;--text-muted: #718096;--text-light: #e2e8f0;--text-link: #90cdf4;--text-header-p: rgba(255, 255, 255, .8);--text-polling-status: rgba(255, 255, 255, .8);--border-base: #4a5568;--border-input: #4a5568;--border-dashed: #4a5568;--border-header-btn: rgba(255, 255, 255, .2);--border-spinner-base: rgba(255, 255, 255, .2);--border-spinner-top: var(--color-primary-accent);--color-primary-accent: #63b3ed;--color-success-accent: #68d391;--color-warning-accent: #f6e05e;--color-danger-accent: #fc8181;--color-info-accent: #4fd1c5;--color-secondary-accent: #a0aec0;--color-purple-accent: #a78bfa;--color-purple-hover: #805ad5;--color-primary-gradient-start: #68d391;--color-primary-gradient-end: #4fd1c5;--filter-btn-bg: #2d3748;--filter-btn-text: var(--text-primary);--filter-btn-border: var(--border-base);--filter-btn-hover-text: var(--color-primary-accent);--filter-btn-hover-border: var(--color-primary-accent);--filter-btn-active-bg: var(--color-primary-accent);--filter-btn-active-text: var(--bg-app);--filter-btn-active-border: var(--color-primary-accent);--refresh-btn-bg: rgba(255, 255, 255, .1);--refresh-btn-hover-bg: rgba(255, 255, 255, .15);--file-tag-bg: #4a5568;--file-tag-text: var(--text-primary);--dependency-tag-bg: #38b2ac;--dependency-tag-text: var(--text-light);--error-banner-bg: #fed7d7;--error-banner-text: #822727;--error-banner-border: #fc8181;--error-banner-btn-bg: #e53e3e;--error-banner-btn-hover-bg: #c53030;--loading-h3: var(--color-primary-accent);--loading-border: var(--color-primary-accent);--admin-link-bg: var(--color-primary-accent);--admin-link-hover-bg: #3182ce;--toast-bg: #2d3748;--toast-shadow: 0 4px 12px rgba(0, 0, 0, .3);--toast-message-text: var(--text-primary);--toast-close-btn-color: var(--text-secondary);--toast-close-btn-hover-color: var(--text-primary);--modal-header-text: var(--text-primary);--form-label-text: var(--text-primary);--form-input-text: var(--text-primary);--form-input-focus-border: var(--color-primary-accent);--cancel-btn-bg: var(--color-secondary-accent);--cancel-btn-hover-bg: #718096;--add-btn-bg: var(--color-success-accent);--add-btn-hover-bg: #48bb78;--delete-btn-bg: var(--color-purple-accent);--delete-btn-hover-bg: var(--color-purple-hover);--shadow-card: 0 2px 10px rgba(0,0,0,.2);--shadow-card-hover: 0 4px 20px rgba(0,0,0,.3);--shadow-modal: 0 10px 30px rgba(0,0,0,.5);--shadow-btn-hover-success: 0 4px 12px rgba(104, 211, 145, .3);--shadow-btn-hover-primary: 0 4px 10px rgba(99, 179, 237, .2);--status-pending-color: var(--color-secondary-accent);--status-completed-color: var(--color-success-accent);--status-in-progress-color: var(--color-warning-accent);--color-add-todo-btn-start: var(--color-purple-accent);--color-add-todo-btn-end: var(--color-purple-hover);--shadow-add-todo-btn-hover: 0 4px 12px rgba(167, 139, 250, .3)}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-app);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}.app{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;background:var(--bg-header);color:var(--text-light);padding:30px;border-radius:12px;flex-wrap:wrap;gap:20px;transition:background .3s ease,color .3s ease}.header-content{flex:1;color:var(--text-light)}.header h1{margin:0 0 10px;font-size:2.5rem;color:var(--text-light)}.header p{margin:0;opacity:.9;font-size:1.1rem;color:var(--text-header-p)}.refresh-btn{background:var(--refresh-btn-bg);color:var(--text-light);border:1px solid var(--border-header-btn);width:44px;height:44px;padding:0;border-radius:8px;cursor:pointer;font-size:1.25rem;transition:all .3s ease;margin-top:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.refresh-btn:hover:not(:disabled){background:var(--refresh-btn-hover-bg);transform:scale(1.05)}.refresh-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--bg-card);padding:25px;border-radius:12px;text-align:center;box-shadow:var(--shadow-card);border:1px solid var(--border-base);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}.stat-card h3{margin:0 0 10px;font-size:2.5rem;color:var(--text-primary)}.stat-card p{margin:0;color:var(--text-secondary);font-weight:500}.filters{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}.filters button{padding:12px 24px;border:2px solid var(--filter-btn-border);background:var(--filter-btn-bg);color:var(--filter-btn-text);border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.filters button:hover{border-color:var(--filter-btn-hover-border);color:var(--filter-btn-hover-text)}.filters button.active{background:var(--filter-btn-active-bg);color:var(--filter-btn-active-text);border-color:var(--filter-btn-active-border)}.todos-container{display:grid;gap:20px}.no-todos{text-align:center;padding:60px 20px;background:var(--bg-card);border-radius:12px;border:2px dashed var(--border-dashed);transition:background .3s ease,border-color .3s ease}.no-todos h3{color:var(--text-secondary);margin-bottom:10px}.no-todos p{color:var(--text-muted);margin:0}.todo-card{background:var(--bg-card);border-radius:12px;padding:25px;box-shadow:var(--shadow-card);border:1px solid var(--border-base);border-left:5px solid var(--border-base);transition:transform .3s ease,box-shadow .3s ease,background .3s ease,border-color .3s ease}.todo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}.todo-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;flex-wrap:wrap;gap:10px}.todo-header h3{margin:0;color:var(--text-primary);font-size:1.3rem;flex:1;min-width:0}.todo-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.status-badge,.priority-badge{padding:4px 12px;border-radius:20px;color:var(--text-light);font-size:.8rem;font-weight:500;text-transform:capitalize}.todo-description{color:var(--text-secondary);line-height:1.6;margin-bottom:20px}.todo-notes,.todo-files,.todo-dependencies{margin-bottom:20px}.todo-files h4,.todo-dependencies h4,.todo-notes h4{margin:0 0 8px;color:var(--text-primary);font-size:.9rem}.file-list,.dependency-list{display:flex;flex-wrap:wrap;gap:6px}.file-tag,.dependency-tag{background:var(--file-tag-bg);color:var(--file-tag-text);padding:4px 8px;border-radius:6px;font-size:.8rem;font-family:Monaco,Menlo,monospace;transition:background .3s ease,color .3s ease}.dependency-tag{background:var(--dependency-tag-bg);color:var(--dependency-tag-text)}.todo-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:15px;border-top:1px solid var(--border-base);flex-wrap:wrap;gap:10px}.todo-footer small{color:var(--text-muted);font-size:.8rem}.footer{text-align:center;margin-top:40px;padding:20px;background:var(--bg-card);border-radius:12px;border:1px solid var(--border-base);transition:background .3s ease,border-color .3s ease}.footer p{margin:5px 0;color:var(--text-secondary)}.footer a{color:var(--text-link);text-decoration:none}.footer a:hover{text-decoration:underline}@media (max-width: 768px){.app{padding:10px}.header h1{font-size:2rem}.stats{grid-template-columns:repeat(2,1fr)}.filters{justify-content:center}.todo-header,.todo-footer{flex-direction:column;align-items:flex-start}}.error-banner{background:var(--error-banner-bg);color:var(--error-banner-text);border:1px solid var(--error-banner-border);border-radius:8px;padding:15px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;transition:background .3s ease,color .3s ease,border-color .3s ease}.error-banner button{background:var(--error-banner-btn-bg);color:var(--text-light);border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.8rem}.error-banner button:hover{background:var(--error-banner-btn-hover-bg)}.loading{text-align:center;padding:60px 20px;background:var(--bg-card);border-radius:12px;border:2px dashed var(--loading-border);transition:background .3s ease,border-color .3s ease}.loading h3{color:var(--loading-h3);margin-bottom:10px}.loading p{color:var(--text-secondary);margin:0}.admin-link{display:inline-block;background:var(--admin-link-bg);color:var(--text-light);padding:10px 20px;border-radius:8px;text-decoration:none;margin-top:15px;transition:all .3s ease}.admin-link:hover{background:var(--admin-link-hover-bg);text-decoration:none;color:var(--text-light);transform:translateY(-2px)}.todo-notes ul{margin:0;padding-left:20px;color:var(--text-secondary);list-style-type:disc}.todo-notes li{margin-bottom:4px;font-size:.9rem;line-height:1.4}.todo-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-base)}.generate-files-btn{background:linear-gradient(135deg,var(--color-primary-gradient-start) 0%,var(--color-primary-gradient-end) 100%);color:var(--text-light);border:none;padding:10px 20px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:fit-content}.generate-files-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-btn-hover-success)}.generate-files-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.todo-card[data-status=pending]{border-left-color:var(--status-pending-color)}.todo-card[data-status=completed]{border-left-color:var(--status-completed-color)}.todo-card[data-status=in-progress]{border-left-color:var(--status-in-progress-color)}.footer p:last-child{color:var(--color-success-accent);font-weight:500}.spinner{display:inline-block;border:2px solid var(--border-spinner-base);border-radius:50%;border-top:2px solid var(--border-spinner-top);animation:spin 1s linear infinite}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.theme-toggle-button{background:var(--refresh-btn-bg);color:var(--text-light);border:1px solid var(--border-header-btn);width:44px;height:44px;padding:0;border-radius:8px;cursor:pointer;font-size:1.25rem;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.theme-toggle-button:hover:not(:disabled){background:var(--refresh-btn-hover-bg);transform:scale(1.05)}.theme-toggle-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.polling-status{display:flex;align-items:center;gap:8px;background:var(--bg-polling-status);padding:6px 12px;border-radius:6px;font-size:.9rem;color:var(--text-polling-status);transition:background .3s ease,color .3s ease}.toast-container{position:fixed;top:20px;right:20px;z-index:1100;display:flex;flex-direction:column;gap:10px}.toast{background:var(--toast-bg);border-radius:8px;padding:15px 20px;box-shadow:var(--toast-shadow);border-left:4px solid;display:flex;justify-content:space-between;align-items:center;min-width:300px;animation:slideIn .3s ease-out;transition:background .3s ease,box-shadow .3s ease}.toast.success{border-left-color:var(--color-success-accent)}.toast.error{border-left-color:var(--color-danger-accent)}.toast-message{margin:0;color:var(--toast-message-text);font-weight:500}.toast-close-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--toast-close-btn-color);padding:0;margin-left:15px}.toast-close-btn:hover{color:var(--toast-close-btn-hover-color)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.todo-card.busy{opacity:.7;pointer-events:none}.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:20px}.add-todo-btn{background:linear-gradient(135deg,var(--color-add-todo-btn-start) 0%,var(--color-add-todo-btn-end) 100%);color:var(--text-light);border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px}.add-todo-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-add-todo-btn-hover)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-modal-overlay);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow-modal);max-width:500px;width:90%;max-height:80vh;overflow-y:auto;transition:background .3s ease,box-shadow .3s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid var(--border-base)}.modal-header h3{margin:0;color:var(--modal-header-text)}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.close-btn:hover{background:var(--bg-light-hover);color:var(--text-primary)}.modal-body{padding:25px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--form-label-text)}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:2px solid var(--border-input);border-radius:6px;font-size:1rem;transition:border-color .3s ease,background-color .3s ease,color .3s ease;box-sizing:border-box;background-color:var(--bg-card);color:var(--form-input-text)}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--form-input-focus-border)}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px 25px;border-top:1px solid var(--border-base);background:var(--bg-modal-footer);border-radius:0 0 12px 12px;transition:background .3s ease,border-color .3s ease}.cancel-btn,.add-btn{padding:10px 20px;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;color:var(--text-light)}.cancel-btn{background:var(--cancel-btn-bg)}.cancel-btn:hover{background:var(--cancel-btn-hover-bg)}.add-btn{background:var(--add-btn-bg)}.add-btn:hover:not(:disabled){background:var(--add-btn-hover-bg)}.add-btn:disabled{opacity:.6;cursor:not-allowed}.status-controls{display:flex;align-items:center;gap:10px}.status-controls label{font-weight:500;color:var(--form-label-text);flex-shrink:0}.status-controls select{padding:6px 10px;border:1px solid var(--border-input);border-radius:4px;font-size:.9rem;background-color:var(--bg-card);color:var(--form-input-text);transition:background-color .3s ease,color .3s ease,border-color .3s ease}.delete-btn{background:var(--delete-btn-bg);color:var(--text-light);border:none;width:40px;height:40px;padding:0;border-radius:8px;font-size:1.2rem;cursor:pointer;transition:all .3s ease;flex-shrink:0;display:flex;align-items:center;justify-content:center}.delete-btn:hover{background:var(--delete-btn-hover-bg);transform:translateY(-1px)}@media (max-width: 768px){.controls{flex-direction:column;align-items:stretch}.filters{order:2}.add-todo-btn{order:1;justify-content:center}.modal{width:95%}.modal-footer{flex-direction:column}.cancel-btn,.add-btn{width:100%}.status-controls{justify-content:space-between}.header{flex-direction:column;text-align:center}}.refresh-button{background:transparent;border:none;padding:10px;border-radius:var(--border-radius, 8px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-accent, #667eea);transition:all .2s ease-in-out;outline:none;position:relative;font-size:1rem;line-height:1}.refresh-button:hover{background-color:var(--bg-light-hover, rgba(0, 0, 0, .05));color:var(--text-accent-hover, #764ba2)}.refresh-button:focus-visible{background-color:var(--bg-light-hover, rgba(0, 0, 0, .05));color:var(--text-accent-hover, #764ba2);box-shadow:0 0 0 3px var(--color-primary-light, rgba(102, 126, 234, .4))}.refresh-button:active{transform:translateY(1px)}.refresh-button .icon-wrapper{display:flex;align-items:center;justify-content:center}.refresh-button .refresh-icon{width:24px;height:24px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease-in-out}.refresh-button:hover .refresh-icon{transform:rotate(30deg)}.refresh-button.is-loading{cursor:not-allowed;opacity:.7;pointer-events:none}.refresh-button.is-loading .refresh-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--text-primary, #495057);background-color:var(--bg-app, #f8f9fa);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-app, #f8f9fa);color:var(--text-primary, #495057);transition:background-color .3s ease,color .3s ease}#root{width:100%;min-height:100vh}a{font-weight:500;color:var(--color-primary, #007bff);text-decoration:inherit;transition:color .25s ease}a:hover{color:var(--color-primary-hover, #0056b3)}h1{font-size:3.2em;line-height:1.1;margin:0}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-primary, #007bff);color:var(--text-light, white);cursor:pointer;transition:all .25s ease}button:hover{background-color:var(--color-primary-hover, #0056b3)}button:focus,button:focus-visible{outline:2px solid var(--color-primary, #007bff);outline-offset:2px}button:disabled{opacity:.6;cursor:not-allowed}.theme-toggle-button{background:none;border:none;padding:.5em;font-size:1.5em;color:var(--text-secondary, #6c757d);cursor:pointer;border-radius:50%;width:2.5em;height:2.5em;display:flex;align-items:center;justify-content:center;transition:all .25s ease;box-shadow:none;line-height:1}.theme-toggle-button:hover{background-color:var(--bg-light-hover, #e9ecef);color:var(--text-primary, #495057)}.theme-toggle-button:focus,.theme-toggle-button:focus-visible{outline:2px solid var(--color-primary, #007bff);outline-offset:2px;background-color:var(--bg-light-hover, #e9ecef)}