body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.notification-container{position:fixed;top:1rem;right:1rem;z-index:10000;display:flex;flex-direction:column;gap:.75rem;max-width:400px;pointer-events:none}.notification{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:slideIn .3s ease-out;pointer-events:all;border-left:4px solid;transition:var(--transition-fast)}.notification.updated{animation:pulse .4s ease;transform:scale(1.02)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%{transform:scale(1);box-shadow:var(--shadow-lg)}50%{transform:scale(1.02);box-shadow:0 6px 25px #0003}to{transform:scale(1);box-shadow:var(--shadow-lg)}}.notification-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;flex-shrink:0}.notification-message{flex:1;font-size:.9375rem;line-height:1.5;color:var(--text-primary)}.notification-close{background:none;border:none;font-size:1.25rem;color:var(--text-tertiary);cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-bg);flex-shrink:0}.notification-close:hover{background:#0000000d}.notification-success{border-left-color:var(--color-success)}.notification-success .notification-icon{color:var(--color-success)}.notification-error{border-left-color:#f44336}.notification-error .notification-icon{color:#f44336}.notification-warning{border-left-color:var(--color-warning)}.notification-warning .notification-icon{color:var(--color-warning)}.notification-info{border-left-color:#2196f3}.notification-info .notification-icon{color:#2196f3}@media(max-width:600px){.notification-container{left:1rem;right:1rem;max-width:none}}.sync-status{position:fixed;bottom:1rem;right:1rem;background:var(--gradient-primary);color:#fff;padding:1rem 1.25rem;border-radius:var(--radius-lg);box-shadow:0 4px 20px #667eea4d;z-index:9999;animation:slideUp .3s ease-out;max-width:400px}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.sync-status-offline{background:linear-gradient(135deg,var(--color-warning) 0%,#f57c00 100%)}.sync-status-content{display:flex;align-items:center;gap:.75rem}.sync-status-icon{font-size:1.5rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.sync-status-text{flex:1;display:flex;flex-direction:column;gap:.25rem}.sync-status-text strong{font-size:.9375rem;font-weight:600}.sync-status-text span{font-size:.8125rem;opacity:.9}.sync-status-actions{display:flex;flex-direction:column;gap:.5rem}.sync-status-cancel,.sync-status-force{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.5rem .75rem;border-radius:var(--radius-md);font-size:.75rem;font-weight:500;cursor:pointer;transition:var(--transition-fast);white-space:nowrap;min-width:80px}.sync-status-cancel{background:#dc3545cc;border-color:#dc3545e6}.sync-status-cancel:hover:not(:disabled){background:#c82333e6}.sync-status-force:hover:not(:disabled){background:#ffffff4d}.sync-status-cancel:disabled,.sync-status-force:disabled{opacity:.6;cursor:not-allowed}@media(max-width:600px){.sync-status{left:1rem;right:1rem;max-width:none}.sync-status-content{flex-wrap:wrap}.sync-status-actions{flex-direction:row;width:100%}.sync-status-cancel,.sync-status-force{flex:1}}.loading-container{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:18px;color:var(--text-medium)}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:var(--gradient-primary)}.error-boundary-content{background:#fff;border-radius:var(--radius-xl);padding:3rem;max-width:600px;width:100%;box-shadow:var(--shadow-overlay);text-align:center}.error-boundary-icon{font-size:4rem;margin-bottom:1rem}.error-boundary-title{font-size:2rem;color:var(--text-primary);margin:0 0 1rem}.error-boundary-message{font-size:1.1rem;color:var(--text-medium);line-height:1.6;margin:0 0 2rem}.error-boundary-details{text-align:left;margin:2rem 0;padding:1rem;background:var(--bg-light);border-radius:var(--radius);border:1px solid var(--border-color)}.error-boundary-details summary{cursor:pointer;font-weight:600;padding:.5rem;color:var(--text-medium)}.error-boundary-details summary:hover{color:var(--text-heading)}.error-boundary-stack{margin-top:1rem}.error-boundary-stack h3{font-size:.9rem;color:var(--text-medium);margin:1rem 0 .5rem;text-transform:uppercase;letter-spacing:.5px}.error-boundary-stack pre{background:#fff;padding:1rem;border-radius:var(--radius-sm);overflow-x:auto;font-size:.85rem;color:#d32f2f;border:1px solid var(--color-danger-border);white-space:pre-wrap;word-break:break-word}.error-boundary-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.error-boundary-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:var(--transition-fast)}.error-boundary-button.primary{background:var(--color-primary);color:#fff}.error-boundary-button.primary:hover{background:#5568d3;transform:translateY(-2px);box-shadow:var(--shadow-primary)}.error-boundary-button.secondary{background:var(--bg-light);color:var(--text-medium)}.error-boundary-button.secondary:hover{background:var(--border-color);color:var(--text-heading)}@media(max-width:480px){.error-boundary-content{padding:2rem 1.5rem}.error-boundary-title{font-size:1.5rem}.error-boundary-message{font-size:1rem}.error-boundary-actions{flex-direction:column}.error-boundary-button{width:100%}}.wrtm-input,.option-selector-input,.wizard-text-input,.wrtm-search-input,.filter-search .search-input,.search-bar .search-input,.search-input,.task-form .form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.task-form .form-group select,.task-form .form-group textarea,.frequency-custom-input input{width:100%;padding:.625rem .875rem;font-size:.9375rem;font-family:inherit;color:var(--text-primary);background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius);transition:var(--transition-fast);outline:none;box-sizing:border-box}.wrtm-input:focus,.option-selector-input:focus,.wizard-text-input:focus,.wrtm-search-input:focus,.filter-search .search-input:focus,.search-bar .search-input:focus,.search-input:focus,.task-form .form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,.task-form .form-group select:focus,.task-form .form-group textarea:focus,.frequency-custom-input input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea1f}.wrtm-input::placeholder,.option-selector-input::placeholder,.wizard-text-input::placeholder,.wrtm-search-input::placeholder,.filter-search .search-input::placeholder,.search-bar .search-input::placeholder,.search-input::placeholder{color:var(--text-disabled)}.wrtm-input:disabled,.option-selector-input:disabled{background:var(--bg-light);color:var(--text-hint);cursor:not-allowed}.wrtm-input--compact{padding:.5rem .75rem;font-size:.875rem}.wrtm-input.input-error,.task-form .form-group input.input-error{border-color:var(--color-danger)}.wrtm-typeahead{position:relative;width:100%}.wrtm-typeahead__menu{position:absolute;top:100%;left:0;right:0;margin-top:2px;max-height:220px;overflow-y:auto;z-index:20;background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.wrtm-typeahead__option{padding:.5rem .75rem;font-size:.9375rem;color:var(--text-heading);cursor:pointer;transition:var(--transition-bg)}.wrtm-typeahead__option:hover,.wrtm-typeahead__option--highlight{background:var(--row-hover-bg)}.wrtm-typeahead__option--create{font-style:italic;color:var(--color-primary);border-top:1px solid var(--border-light)}.wrtm-typeahead__option--create:hover,.wrtm-typeahead__option--create.wrtm-typeahead__option--highlight{background:var(--color-info-bg)}.wrtm-typeahead__empty{padding:.5rem .75rem;font-size:.875rem;color:var(--text-hint)}:root{--gradient-primary: linear-gradient(135deg, #37676e 0%, #764ba2 100%);--color-primary: #667eea;--color-primary-light: #a8b3ff;--color-success: #4caf50;--color-success-dark: #2e7d32;--color-success-bg: #e8f5e9;--color-warning: #ff9800;--color-warning-dark: #e65100;--color-warning-bg: #fff3e0;--color-warning-border: #ffe0b2;--color-danger: #c62828;--color-danger-bg: #ffebee;--color-danger-border: #ffcdd2;--color-danger-bright: #ff5722;--color-info-bg: #e3f2fd;--text-primary: #212121;--text-heading: #333;--text-dark: #424242;--text-body: #555;--text-secondary: #616161;--text-medium: #666;--text-cool: #6b7280;--text-tertiary: #757575;--text-subtle: #9ca3af;--text-hint: #999;--text-disabled: #9e9e9e;--border-dark: #ccc;--border-medium: #ddd;--border-color: #e0e0e0;--border-light: #eee;--bg-light: #f5f5f5;--bg-subtle: #f9f9f9;--bg-page: #fafafa;--row-hover-bg: #e3f0fc;--row-hover-accent: #64b5f6;--shadow-xs: 0 2px 4px rgba(0, 0, 0, .1);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-primary: 0 4px 12px rgba(102, 126, 234, .4);--shadow-lg: 0 4px 20px rgba(0, 0, 0, .15);--shadow-overlay: 0 20px 60px rgba(0, 0, 0, .3);--radius-sm: 4px;--radius-md: 6px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-snappy: all .15s;--transition-fast: all .2s;--transition-bg: background .2s;--color-paused: #f9a825;--color-paused-bg: #fff8e1}.wrtm-search-bar{position:relative;margin-bottom:12px}.wrtm-search-input{padding-right:2.25rem}.wrtm-search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:none;background:var(--border-color);color:var(--text-secondary);width:22px;height:22px;border-radius:50%;font-size:12px;line-height:1;cursor:pointer;padding:0}.wrtm-search-clear:hover{background:var(--border-dark);color:var(--text-primary)}*{box-sizing:border-box}.app{min-height:100vh;background:var(--gradient-primary)}.app-header{background:#fffffff2;padding:1.5rem 0;box-shadow:var(--shadow-md);width:100%;position:sticky;top:0;z-index:100}.app-header-content{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.header-content{display:flex;align-items:center;gap:1.5rem}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:2rem}.logo h1{margin:0;font-size:1.75rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);font-size:.875rem;padding-left:1.5rem;border-left:2px solid var(--border-color);margin:0}.main-content{max-width:1400px;margin:0 auto;padding:2rem}.page-header-wrapper{width:100%;background:transparent;padding:2rem 2rem 0}.page-header{background:#fff;padding:2rem;border-radius:var(--radius-xl);margin:0 auto;box-shadow:var(--shadow-md);max-width:calc(1400px - 4rem)}.page-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;margin-bottom:1rem}.header-actions{display:flex;gap:.75rem;align-items:center;flex-shrink:0}.header-more-trigger{display:inline-flex;align-items:center;gap:.375rem}.header-more-dropdown{min-width:240px}.header-more-option-icon{display:inline-flex;align-items:center;flex-shrink:0}.browse-button,.search-button,.calendar-button{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);padding:.75rem 1.5rem;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.browse-button:hover,.search-button:hover,.calendar-button:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-primary)}.add-item-button{background:var(--gradient-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.add-item-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary)}.task-count{display:inline-block;padding:.5rem 1rem;background:var(--gradient-primary);color:#fff;border-radius:var(--radius);font-weight:600}.task-count-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.filter-sort-controls{display:flex;gap:.75rem;align-items:center}.task-grid{display:grid;grid-template-columns:repeat(auto-fill,300px);justify-content:start;gap:1.5rem}.task-grid-virtual-container{width:100%;max-width:1400px;margin:0 auto;padding:2rem}.task-grid-virtual-container .task-card{width:300px}.task-list-grouped{display:flex;flex-direction:column;gap:2rem}.task-group-header{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:2px solid rgba(255,255,255,.15);margin-bottom:.75rem}.task-group-icon{font-size:1.25rem}.task-group-title{font-size:1.1rem;font-weight:600;color:#fff;margin:0}.task-group-description{font-size:.85rem;color:#ffffff80;margin-left:auto}.task-group-overdue .task-group-header{border-bottom-color:#f44336}.task-group-dueSoon .task-group-header{border-bottom-color:var(--color-warning)}.task-group-upcoming .task-group-header{border-bottom-color:#2196f3}.task-group-recentlyCompleted .task-group-header{border-bottom-color:var(--color-success)}.task-list-empty{text-align:center;padding:3rem 2rem;color:#ffffffb3}.task-list-empty-icon{font-size:3rem;display:block;margin-bottom:1rem}.loading,.error{text-align:center;padding:4rem 2rem;color:#fff;font-size:1.25rem}.error{color:var(--color-danger-border)}@media(max-width:768px){.header-content{flex-direction:column;align-items:flex-start;gap:.5rem}.header-user-section{flex-direction:column;gap:.5rem;align-items:flex-end}.username-display{font-size:.75rem}.subtitle{padding-left:0;border-left:none}.page-header-top{flex-direction:column;gap:1rem}.header-actions{width:100%;flex-wrap:nowrap;justify-content:flex-end}.header-more-trigger,.add-item-button{flex:1;min-width:0;font-size:.875rem;padding:.625rem 1rem;justify-content:center}.task-count-row{flex-direction:column;align-items:stretch}.filter-sort-controls{width:100%;justify-content:space-between}.filter-button{flex:1}.task-grid{grid-template-columns:1fr}.task-grid-virtual-container .task-card{width:100%}.main-content{padding:1rem}.page-header{padding:1.5rem}}.header-user-section{display:flex;align-items:center;gap:1rem}.username-display{color:var(--color-primary);font-size:.875rem;font-weight:500}.logout-button{padding:8px 16px;background:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition-fast)}.logout-button:hover{background:#764ba2;border-color:#764ba2}.logo.clickable{cursor:pointer}.filter-button{display:inline-flex;background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;gap:.5rem;white-space:nowrap}.filter-button:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-primary)}.filter-button.filter-active{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border-color:#f5576c;animation:pulse 2s ease-in-out 1}@keyframes pulse{0%,to{box-shadow:0 4px 12px #667eea4d}50%{box-shadow:0 4px 20px #f5576c80}}.clear-filters-inline{background:#fff;border:2px solid var(--color-primary);color:var(--color-primary);font-size:.875rem;font-weight:700;cursor:pointer;margin-left:.75rem;padding:.35rem .85rem;border-radius:var(--radius-md);transition:var(--transition-fast);box-shadow:0 3px 6px #00000026;text-shadow:0 0 1px rgba(102,126,234,.3)}.clear-filters-inline:hover{background:var(--color-primary);color:#fff;box-shadow:0 4px 8px #667eea4d;transform:translateY(-1px)}.sort-menu{position:relative;display:inline-block}.sort-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:220px;z-index:100;overflow:hidden}.sort-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:#fff;text-align:left;cursor:pointer;font-size:.875rem;color:var(--text-dark);transition:background .15s}.sort-option:hover{background:var(--bg-light)}.sort-option.active{background:#e8eaf6;color:var(--color-primary);font-weight:600}.sort-option-icon{display:inline-flex;align-items:center;width:1.25rem;flex-shrink:0}.sort-option-label{flex:1}.sort-check{color:var(--color-primary);font-weight:700}.hidden-completed-note{font-size:.8125rem;color:#dedede;font-style:italic;margin-left:.5rem}.no-tasks{grid-column:1 / -1;text-align:center;padding:3rem 1rem;color:#2f2f2f;background:#ffffffeb;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-xl);box-shadow:0 12px 30px #0000001f;max-width:720px;margin:0 auto}.no-tasks h3{color:#1f1f1f;margin-bottom:.75rem}.no-tasks p{font-size:1.125rem;margin-bottom:1rem}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius);font-size:.9375rem;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}