:root{--primary-color: #667eea;--primary-dark: #5a67d8;--primary-light: #f7fafc;--success-color: #48bb78;--warning-color: #ed8936;--danger-color: #f56565;--info-color: #4299e1;--priority-urgent: #e53e3e;--priority-high: #f56565;--priority-normal: #4299e1;--priority-low: #48bb78;--status-todo: #a0aec0;--status-in-progress: #4299e1;--status-review: #ed8936;--status-completed: #48bb78;--gray-50: #f7fafc;--gray-100: #edf2f7;--gray-200: #e2e8f0;--gray-300: #cbd5e0;--gray-400: #a0aec0;--gray-500: #718096;--gray-600: #4a5568;--gray-700: #2d3748;--gray-800: #1a202c;--gray-900: #171923;--bg-primary: #ffffff;--bg-secondary: #f7fafc;--bg-tertiary: #edf2f7;--text-primary: #2d3748;--text-secondary: #4a5568;--text-muted: #718096;--border-color: #e2e8f0;--border-color-light: #f1f5f9;--border-radius: 12px;--border-radius-sm: 8px;--border-radius-lg: 16px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--transition-fast: .15s;--transition-base: .2s;--transition-slow: .3s}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-primary);background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);min-height:100vh;overflow-x:hidden}.app-container{width:100vw;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column}.app-header{display:flex;justify-content:center;background:transparent}.header-content{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);max-width:1200px;width:100%;padding:var(--spacing-lg) var(--spacing-xl);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:sticky;top:var(--spacing-lg);z-index:100}.app-title{font-size:var(--text-2xl);font-weight:700;display:flex;align-items:center;gap:var(--spacing-sm)}.app-icon{font-size:var(--text-3xl);background:#fff3;padding:var(--spacing-sm);border-radius:var(--border-radius-sm)}.header-stats{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.stat-item{font-size:var(--text-sm);background:#ffffff26;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.header-actions{display:flex;gap:var(--spacing-md)}.view-toggle-btn{background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--text-sm);transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.view-toggle-btn:hover{background:#ffffff40;transform:translateY(-1px)}.app-main{flex:1;display:flex;justify-content:center;max-width:1400px;margin:0 auto;width:100%;min-height:calc(100vh - 120px);padding:var(--spacing-lg) var(--spacing-xl)}.main-content{width:100%;max-width:1200px;display:flex;flex-direction:column;background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.section-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}.task-input-section{margin-bottom:var(--spacing-xl)}.input-container{background:var(--bg-primary);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.task-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-row{display:flex;gap:var(--spacing-md);align-items:flex-end}.form-field{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1}.form-field.half{flex:0 0 calc(50% - var(--spacing-sm))}.form-field label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}.form-input,.form-select,.form-textarea{border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm);transition:all var(--transition-base);background:var(--bg-primary);color:var(--text-primary)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.form-textarea{resize:vertical;min-height:80px;font-family:inherit}.form-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-md)}.btn-primary,.btn-secondary,.btn-danger{border:none;border-radius:var(--border-radius);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-sm);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-base);text-decoration:none}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--gray-200);color:var(--text-primary)}.btn-secondary:hover{background:var(--gray-300)}.btn-danger{background:var(--danger-color);color:#fff}.btn-danger:hover{background:#e53e3e;transform:translateY(-1px)}.quick-actions-section{margin-bottom:var(--spacing-xl)}.quick-actions{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm)}.quick-action-btn{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-md);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-sm);transition:all var(--transition-base);color:var(--text-primary)}.quick-action-btn:hover{background:var(--gray-100);border-color:var(--primary-color);transform:translateY(-1px)}.filter-section{margin-bottom:var(--spacing-xl)}.filter-controls{display:flex;flex-direction:column;gap:var(--spacing-lg)}.filter-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.filter-group label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}.filter-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-xs);background:var(--bg-tertiary);padding:var(--spacing-xs);border-radius:var(--border-radius)}.filter-tab{background:transparent;border:none;padding:var(--spacing-sm);border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);transition:all var(--transition-base);text-align:center}.filter-tab:hover{background:#667eea1a;color:var(--primary-color)}.filter-tab.active{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm)}.content-toolbar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:var(--spacing-md)}.view-tabs{display:flex;gap:var(--spacing-xs);background:var(--bg-primary);padding:var(--spacing-xs);border-radius:var(--border-radius);border:1px solid var(--border-color)}.view-tab{background:transparent;border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);transition:all var(--transition-base);white-space:nowrap}.view-tab:hover{background:var(--gray-100);color:var(--primary-color)}.view-tab.active{background:var(--primary-color);color:#fff}.search-icon{position:absolute;left:var(--spacing-md);color:var(--text-muted);font-size:var(--text-sm);z-index:1}.search-input{border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.5rem;font-size:var(--text-sm);background:var(--bg-primary);color:var(--text-primary);min-width:200px;transition:all var(--transition-base)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.toolbar-btn{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);transition:all var(--transition-base);color:var(--text-secondary);min-width:36px;height:36px}.toolbar-btn:hover{background:var(--gray-100);border-color:var(--primary-color);color:var(--primary-color)}.table-view,.list-view,.completed-view{display:none;flex:1;overflow:hidden}.table-view.active,.list-view.active,.completed-view.active{display:flex;flex-direction:column}.table-container{flex:1;overflow:auto;padding:var(--spacing-lg)}.task-table{width:100%;border-collapse:collapse;background:var(--bg-primary);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-sm);table-layout:fixed}.task-table th,.task-table td{padding:var(--spacing-md);text-align:center;vertical-align:middle;border-bottom:1px solid var(--border-color-light)}.col-description,.col-title{text-align:left!important}.task-table th.col-description,.task-table th.col-title{text-align:center!important}.task-table th{background:var(--bg-secondary);font-weight:600;font-size:var(--text-sm);color:var(--text-secondary);position:sticky;top:0;z-index:10}.col-checkbox{width:65px}.col-title{width:120px}.col-status,.col-priority,.col-type{width:80px}.col-due-date,.col-created-date{width:100px}.col-description,.col-actions{width:120px}.actions-cell{padding:var(--spacing-xs)!important}.table-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--transition-base);justify-content:center;flex-wrap:nowrap}.table-action-btn{background:none;border:none;padding:4px;border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-muted);transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;font-size:14px;min-width:24px;height:24px;flex-shrink:0}.table-action-btn.add-child:hover{background:var(--success-color);color:#fff}.table-action-btn.toggle:hover{background:var(--primary-color);color:#fff}.task-table th{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.column-resizer{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:10}.column-resizer:hover{background-color:var(--primary-color);opacity:.5}.column-resizer.resizing{background-color:var(--primary-color);opacity:.7}.resizing-cursor,.resizing-cursor *{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.task-table tbody tr{transition:all var(--transition-base);cursor:pointer}.task-table tbody tr:hover{background:var(--gray-50)}.task-table tbody tr.selected{background:#667eea1a}.task-table tbody tr.completed{opacity:.6}.task-table tbody tr.completed .task-title{text-decoration:line-through;color:var(--text-muted)}.task-title{font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}.task-title:hover{white-space:normal;word-wrap:break-word}.status-badge,.priority-badge,.type-badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--text-xs);font-weight:500;white-space:nowrap}.status-badge.todo{background:#a0aec033;color:var(--status-todo)}.status-badge.in-progress{background:#4299e133;color:var(--status-in-progress)}.status-badge.review{background:#ed893633;color:var(--status-review)}.status-badge.completed{background:#48bb7833;color:var(--status-completed)}.priority-badge.urgent{background:#e53e3e33;color:var(--priority-urgent)}.priority-badge.high{background:#f5656533;color:var(--priority-high)}.priority-badge.normal{background:#4299e133;color:var(--priority-normal)}.priority-badge.low{background:#48bb7833;color:var(--priority-low)}.type-badge{background:var(--gray-100);color:var(--text-secondary)}.task-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.task-tag{background:var(--gray-100);color:var(--text-secondary);padding:2px var(--spacing-xs);border-radius:var(--border-radius-sm);font-size:var(--text-xs)}.task-date{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}.task-date.overdue{color:var(--danger-color);font-weight:500}.task-date.due-soon{color:var(--warning-color);font-weight:500}.table-actions{display:flex;gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-base)}.task-table tbody tr:hover .table-actions{opacity:1}.table-action-btn{background:none;border:none;padding:var(--spacing-xs);border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-muted);transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);min-width:28px;height:28px}.table-action-btn:hover{background:var(--gray-100);color:var(--text-primary)}.table-action-btn.edit:hover{background:var(--info-color);color:#fff}.table-action-btn.delete:hover{background:var(--danger-color);color:#fff}.table-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;width:100%;border-radius:0 0 var(--border-radius) var(--border-radius)}.table-stats{font-size:var(--text-sm);color:var(--text-muted)}.expand-btn{background:none;border:none;cursor:pointer;padding:0;margin:0;color:var(--text-muted);transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1;min-width:14px;height:14px}.expand-btn:hover{color:var(--primary-color)}.expand-btn.expanded{transform:rotate(90deg)}.task-table tbody tr.child-row{background:var(--gray-50)}.task-table tbody tr.child-row td:first-child{padding-left:calc(var(--spacing-md) + 24px)}.task-table tbody tr.child-row .task-title{font-weight:400;font-size:var(--text-sm)}.task-table tbody tr.group-header-row{background:var(--bg-secondary);border-top:2px solid var(--primary-color)}.task-table tbody tr.group-header-row:hover{background:var(--bg-secondary)}.group-header-cell{padding:var(--spacing-lg) var(--spacing-md)!important;font-weight:600;color:var(--text-primary)}.group-header-content{display:flex;align-items:center;gap:var(--spacing-md);-webkit-user-select:none;user-select:none}.group-icon{font-size:var(--text-lg)}.group-name{font-size:var(--text-base);font-weight:600;flex:1}.group-count{font-size:var(--text-sm);color:var(--text-muted);background:var(--bg-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm)}.group-collapse-btn{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--border-radius-sm);color:var(--text-muted);transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);min-width:24px;height:24px}.group-collapse-btn:hover{background:var(--gray-100);color:var(--primary-color)}.task-table tbody tr.grouped-task{background:var(--bg-primary)}.task-table tbody tr.grouped-task td:first-child{padding-left:calc(var(--spacing-md) + 20px)}.task-table tbody tr.group-header-row.collapsed+tr.grouped-task{display:none}.task-table tbody tr[data-level="1"] td:first-child{padding-left:calc(var(--spacing-md) + 30px)}.task-table tbody tr[data-level="2"] td:first-child{padding-left:calc(var(--spacing-md) + 50px)}.task-table tbody tr[data-level="3"] td:first-child{padding-left:calc(var(--spacing-md) + 70px)}.table-view-controls{display:flex;gap:var(--spacing-md);align-items:center;margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--border-radius)}.group-selector{display:flex;align-items:center;gap:var(--spacing-sm)}.group-selector label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}.group-selector select{border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-sm);background:var(--bg-primary);color:var(--text-primary)}.table-toolbar-extended{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);gap:var(--spacing-md);flex-wrap:wrap}.table-toolbar-left,.table-toolbar-right{display:flex;align-items:center;gap:var(--spacing-md)}.col-actions .batch-btn{background:var(--gray-200);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);transition:all var(--transition-base);white-space:nowrap}.col-actions .batch-btn:hover{background:var(--gray-300);color:var(--text-primary)}.col-actions .batch-btn.danger:hover{background:var(--danger-color);color:#fff;border-color:var(--danger-color)}.inline-edit-input{width:100%!important;border:2px solid var(--primary-color)!important;border-radius:var(--border-radius-sm)!important;padding:var(--spacing-xs) var(--spacing-sm)!important;font-size:var(--text-sm)!important;background:var(--bg-primary)!important;color:var(--text-primary)!important;outline:none!important;box-shadow:0 0 0 3px #667eea1a!important}.task-list{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto}.task-item{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-lg);transition:all var(--transition-base);cursor:pointer;box-shadow:var(--shadow-sm)}.task-item:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md);transform:translateY(-2px)}.task-item.completed{opacity:.7;background:var(--gray-50)}.task-item-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.task-checkbox{width:20px;height:20px;border:2px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.task-checkbox:checked{background:var(--primary-color);border-color:var(--primary-color)}.task-content{flex:1}.task-text{font-size:var(--text-base);font-weight:500;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.task-item.completed .task-text{text-decoration:line-through;color:var(--text-muted)}.task-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-md);font-size:var(--text-sm);color:var(--text-muted)}.task-description{margin-top:var(--spacing-sm);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.completed-view{padding:var(--spacing-lg);overflow-y:auto}.completed-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.completed-header h3{font-size:var(--text-xl);font-weight:600;color:var(--text-primary)}.completed-stats{display:flex;align-items:center;gap:var(--spacing-lg)}.completed-stats-card{background:var(--bg-secondary);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-lg)}.stats-grid .stat-item{text-align:center;padding:var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius);border:1px solid var(--border-color-light)}.stat-value{font-size:var(--text-2xl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-xs)}.stat-label{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}.completed-view .task-due-date{font-size:var(--text-xs);color:var(--text-muted);margin-left:var(--spacing-sm)}.completed-groups{display:flex;flex-direction:column;gap:var(--spacing-xl)}.completed-group{background:var(--bg-secondary);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color)}.completed-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color-light)}.completed-group-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.completed-group-count{font-size:var(--text-sm);color:var(--text-muted);background:var(--bg-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm)}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--text-muted);flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.empty-illustration{margin-bottom:var(--spacing-lg)}.empty-icon{font-size:4rem;opacity:.5}.empty-title{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-secondary)}.empty-description{font-size:var(--text-base)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all var(--transition-base);padding:var(--spacing-md)}.modal-overlay.show{opacity:1;visibility:visible}.modal-content{background:var(--bg-primary);border-radius:var(--border-radius-lg);max-width:500px;width:90%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-xl);transform:scale(.9);transition:transform var(--transition-base);position:relative;margin:auto}.modal-content.large{max-width:600px}.modal-overlay.show .modal-content{transform:scale(1)}.modal-header{padding:var(--spacing-lg) var(--spacing-lg) 0;display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:var(--text-xl);cursor:pointer;color:var(--text-muted);padding:var(--spacing-sm);line-height:1}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:var(--spacing-lg)}.modal-message{color:var(--text-secondary);line-height:1.5}.modal-actions{padding:0 var(--spacing-lg) var(--spacing-lg);display:flex;gap:var(--spacing-md);justify-content:flex-end}.modal-btn{padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--border-radius);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.modal-btn.primary{background:var(--primary-color);color:#fff}.modal-btn.primary:hover{background:var(--primary-dark)}.modal-btn.secondary{background:var(--gray-200);color:var(--text-primary)}.modal-btn.secondary:hover{background:var(--gray-300)}.toast{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%) translateY(100px);background:var(--gray-800);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);display:flex;align-items:center;gap:var(--spacing-sm);box-shadow:var(--shadow-lg);z-index:1001;transition:transform var(--transition-base);max-width:400px}.toast.show{transform:translate(-50%) translateY(0)}.toast.success{background:var(--success-color)}.toast.error{background:var(--danger-color)}.toast.warning{background:var(--warning-color)}.toast-icon{font-size:var(--text-lg)}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:200px;opacity:1}}@media (max-width: 1400px){.left-panel{width:320px}.header-content{padding:0 var(--spacing-lg)}}@media (max-width: 1200px){.app-main{flex-direction:column}.left-panel{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.main-content{flex:1}.filter-tabs{grid-template-columns:1fr 1fr 1fr}}@media (max-width: 768px){.app-header{padding:var(--spacing-md)}.header-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.header-stats{flex-direction:column;gap:var(--spacing-sm);width:100%}.left-panel{padding:var(--spacing-md)}.content-toolbar{flex-direction:column;gap:var(--spacing-md);align-items:stretch}.toolbar-left,.toolbar-right{justify-content:space-between}.view-tabs{flex:1}.search-input{min-width:auto;flex:1}.table-container{padding:var(--spacing-md);overflow-x:auto}.task-table{min-width:800px}.form-row{flex-direction:column;gap:var(--spacing-md)}.form-field.half{flex:1}.quick-actions{grid-template-columns:1fr 1fr}.modal-content{width:95%;margin:var(--spacing-md)}}@media (max-width: 480px){.app-title{font-size:var(--text-xl)}.stat-item{font-size:var(--text-xs);padding:var(--spacing-xs) var(--spacing-sm)}.task-table th,.task-table td{padding:var(--spacing-sm)}.table-actions{opacity:1}.empty-icon{font-size:3rem}.quick-actions{grid-template-columns:1fr}}@media (prefers-color-scheme: dark){:root{--bg-primary: #1a202c;--bg-secondary: #2d3748;--bg-tertiary: #4a5568;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-muted: #a0aec0;--border-color: #4a5568;--border-color-light: #2d3748;--gray-50: #2d3748;--gray-100: #4a5568;--gray-200: #718096}body{background:linear-gradient(135deg,#1a202c,#2d3748)}.task-item.completed{background:var(--gray-100)}.completed-group{background:var(--bg-tertiary)}}.filter-icon,.sort-icon{display:inline-block;vertical-align:middle}.filter-sort-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);width:90%;max-width:600px;max-height:80vh;overflow:hidden;z-index:1000;display:flex;flex-direction:column}.filter-sort-panel:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:-1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.panel-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary)}.panel-header h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin:0}.panel-close{background:none;border:none;font-size:var(--text-2xl);cursor:pointer;color:var(--text-muted);padding:0;line-height:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);transition:all var(--transition-base)}.panel-close:hover{background:var(--gray-100);color:var(--text-primary)}.panel-body{padding:var(--spacing-lg);overflow-y:auto;flex:1}.filter-sort-list{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.filter-item,.sort-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius)}.filter-value-container{flex:1;display:flex}.filter-item select,.sort-item select,.filter-text-input,.filter-date-input{flex:1;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-sm);background:var(--bg-primary);color:var(--text-primary);min-width:120px}.filter-item select:focus,.sort-item select:focus,.filter-text-input:focus,.filter-date-input:focus{outline:none;border-color:var(--primary-color)}.delete-filter-btn,.delete-sort-btn{background:var(--danger-color);color:#fff;border:none;border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;font-size:var(--text-xs);transition:all var(--transition-base);min-width:60px}.delete-filter-btn:hover,.delete-sort-btn:hover{background:#e53e3e}.add-filter-sort-btn{background:var(--gray-100);color:var(--text-primary);border:1px dashed var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-md);cursor:pointer;font-size:var(--text-sm);font-weight:500;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);width:100%}.add-filter-sort-btn:hover{background:var(--gray-200);border-color:var(--primary-color);color:var(--primary-color)}.filter-sort-list:empty:after{content:"暂无筛选条件";display:block;text-align:center;color:var(--text-muted);padding:var(--spacing-xl);font-size:var(--text-sm)}.filter-sort-list[data-type=sort]:empty:after{content:"暂无排序条件"}.add-task-btn{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--text-sm)}.add-task-btn:hover{background:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.filter-controls-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center;padding:var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.filter-group{display:flex;align-items:center;gap:var(--spacing-sm)}.filter-group label{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);white-space:nowrap}.controls-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.data-operations{display:flex;gap:var(--spacing-sm)}.data-op-btn{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--text-xs);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:var(--spacing-xs)}.data-op-btn:hover{background:var(--bg-secondary);border-color:var(--primary-color)}.table-container{background:var(--bg-primary);border-radius:var(--border-radius-md);overflow:hidden;box-shadow:0 2px 8px #0000001a}.task-table thead th{background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);color:var(--text-primary);font-weight:600;font-size:var(--text-sm);padding:var(--spacing-md);border-bottom:2px solid var(--border-color);position:sticky;top:0;z-index:10}.task-table tbody tr{transition:all .2s ease;border-bottom:1px solid var(--border-color-light)}.task-table tbody tr:hover{background:var(--bg-secondary);transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.content-toolbar{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border-bottom:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-lg);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.view-tab{background:#ffffffb3;color:var(--text-secondary);border:1px solid var(--border-color-light);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:var(--text-sm);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-xs)}.view-tab:hover{background:var(--bg-primary);color:var(--primary-color);transform:translateY(-1px)}.view-tab.active{background:var(--primary-color);color:#fff;border-color:var(--primary-dark);box-shadow:0 2px 8px #667eea4d}.search-box{position:relative;display:flex;align-items:center}.search-input{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-xl);font-size:var(--text-sm);color:var(--text-primary);transition:all .3s ease;min-width:250px}.search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a;outline:none}.search-icon{position:absolute;left:var(--spacing-sm);color:var(--text-muted);pointer-events:none}.filter-tabs{display:flex;gap:var(--spacing-xs)}.filter-tab{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--text-xs);cursor:pointer;transition:all .2s ease}.filter-tab:hover{background:var(--bg-secondary);color:var(--primary-color)}.filter-tab.active{background:var(--primary-color);color:#fff;border-color:var(--primary-dark)}.modal-overlay{background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s ease;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content{background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:0 20px 40px #00000026;border:1px solid var(--border-color-light);animation:modalSlideIn .3s ease;position:relative;margin:auto}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.form-input,.form-select,.form-textarea{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);font-size:var(--text-sm);color:var(--text-primary);transition:all .3s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a;outline:none}.modal-btn.primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-sm);font-weight:600;cursor:pointer;transition:all .3s ease}.modal-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.modal-btn.secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-sm);font-weight:600;cursor:pointer;transition:all .3s ease}.modal-btn.secondary:hover{background:var(--bg-tertiary);border-color:var(--primary-color)}.toast{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:0 8px 24px #00000026;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@media (max-width: 1024px){.search-input{min-width:200px}.filter-controls-row,.controls-row{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}}@media (max-width: 768px){.content-toolbar{flex-direction:column;gap:var(--spacing-md)}.search-input{min-width:100%}.view-tabs{justify-content:center}.filter-tabs{justify-content:center;flex-wrap:wrap}}.completed-expand{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px 8px;margin-right:8px;font-size:14px;font-weight:700;line-height:1;transition:background-color .2s ease,color .2s ease;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px}.completed-expand:hover{background:var(--gray-100);color:var(--primary-color)}.completed-children{margin-left:20px;border-left:2px solid var(--gray-200);padding-left:10px}.completed-children .task-item{opacity:.9;margin-top:8px}.child-count{font-size:12px;color:var(--text-muted);font-weight:400;margin-left:8px}.task-item.completed .task-checkbox.checked{width:20px;height:20px;background:var(--success-color);border:2px solid var(--success-color);border-radius:4px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;flex-shrink:0;margin-right:12px}.toolbar-right{position:relative}.filter-btn-wrapper,.sort-btn-wrapper{position:relative;display:inline-block}.filter-icon,.sort-icon{display:inline-block;vertical-align:middle;padding-top:2px}.filter-sort-btn{display:flex;align-items:center;gap:4px;padding:var(--spacing-sm) var(--spacing-md);min-width:auto;position:relative}.filter-sort-btn .btn-text{font-size:var(--text-sm)}.badge-count{background:var(--primary-color);color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;font-weight:600;margin-left:4px}.feishu-filter-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px #00000026;width:517px;min-height:154px;overflow:visible;z-index:1000;display:none;flex-direction:column}.sort-btn-wrapper .feishu-filter-panel{width:420px}.feishu-filter-panel.show{display:flex}.feishu-filter-panel:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #e0e0e0}.feishu-filter-panel:after{content:"";position:absolute;top:-7px;left:50%;transform:translate(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ffffff}.feishu-filter-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:999;display:none}.feishu-panel-header{padding:16px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;background:#fff}.feishu-header-left{flex:1}.feishu-panel-title{font-size:14px;font-weight:500;color:#1f1f1f}.feishu-header-right{display:flex;align-items:center;gap:16px}.feishu-match-mode{display:flex;align-items:center;gap:6px;font-size:13px}.feishu-match-label{color:#646464;font-size:13px}.feishu-match-select{border:1px solid #e0e0e0;border-radius:4px;padding:4px 24px 4px 8px;font-size:13px;background:#fff;color:#3370ff;font-weight:500;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233370ff' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}.feishu-match-select:hover{background-color:#f7f8fa}.feishu-match-select:focus{border-color:#3370ff}.feishu-panel-close{background:none;border:none;font-size:20px;cursor:pointer;color:#8f8f8f;padding:0;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.feishu-panel-close:hover{background:#f2f3f5;color:#1f1f1f}.feishu-panel-body{padding:24px 0;overflow-y:auto;flex:1;background:#fff}.feishu-filter-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 24px}.feishu-filter-item{display:flex;align-items:center;gap:8px;padding:0;background:transparent;border:none}.feishu-filter-item select,.feishu-filter-text-input,.feishu-filter-date-input{border:1px solid #e0e0e0;border-radius:4px;padding:6px 10px;font-size:13px;background:#fff;color:#1f1f1f;transition:all .2s;min-height:32px}.feishu-filter-item select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238f8f8f' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}.feishu-filter-item select:hover,.feishu-filter-text-input:hover,.feishu-filter-date-input:hover{background-color:#f7f8fa;border-color:#c9cdd4}.feishu-filter-item select:focus,.feishu-filter-text-input:focus,.feishu-filter-date-input:focus{outline:none;border-color:#3370ff;background-color:#fff}.feishu-field-select{min-width:120px;flex-shrink:0}.feishu-condition-select{min-width:100px;flex-shrink:0}.feishu-value-container{flex:1;display:flex;min-width:200px}.feishu-delete-btn{background:none;border:none;cursor:pointer;color:#8f8f8f;padding:6px;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px}.feishu-delete-btn:hover{background:#f2f3f5;color:#f54a45}.feishu-delete-btn svg{width:14px;height:14px}.feishu-add-condition-btn{background:none;border:1px dashed #e0e0e0;border-radius:4px;padding:8px 12px;cursor:pointer;font-size:13px;color:#646464;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px;width:calc(100% - 48px);margin:0 24px}.feishu-add-condition-btn:hover{background:#f7f8fa;border-color:#3370ff;color:#3370ff}.feishu-filter-list:empty:after{content:"暂无筛选条件，点击下方按钮添加";display:block;text-align:center;color:#8f8f8f;padding:32px;font-size:13px}.feishu-sort-direction{display:flex;gap:4px;flex-shrink:0}.feishu-direction-btn{border:1px solid #e0e0e0;background:#fff;color:#646464;border-radius:4px;padding:6px 12px;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap;outline:none}.feishu-direction-btn:hover{background:#f7f8fa;border-color:#c9cdd4}.feishu-direction-btn.active{background:#3370ff;color:#fff;border-color:#3370ff}.feishu-direction-btn.active:hover{background:#2b5dd8;border-color:#2b5dd8}