*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}.gantt-wrapper{display:flex;position:relative;overflow:hidden}.gantt-empty{display:flex;align-items:center;justify-content:center;padding:80px 0;color:var(--text-muted);font-size:14px}.gantt-labels{flex-shrink:0;border-right:1px solid var(--border);z-index:10;background:#fff}.gantt-labels-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border)}.gantt-label-row{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #f8f8f8;cursor:pointer;transition:background .12s ease}.gantt-label-row:hover{background:var(--accent-light)}.label-info{display:flex;align-items:center;gap:10px;min-width:0}.label-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.label-text{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.label-assignee{font-size:13px;color:var(--text-secondary);flex-shrink:0}.gantt-scroll{flex:1;overflow-x:auto;overflow-y:hidden}.gantt-canvas{position:relative;min-width:100%}.gantt-header{display:flex;position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--border)}.gantt-col-header{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;border-right:1px solid var(--border)}.col-label{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px}.col-sublabel{font-size:10px;color:var(--text-muted)}.gantt-grid{position:absolute;left:0;pointer-events:none}.today-marker{position:absolute;width:2px;background:#ef4444;z-index:4;pointer-events:none}.today-label{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:10px;font-weight:600;color:#ef4444;background:#fef2f2;padding:2px 8px;border-radius:10px;white-space:nowrap}.gantt-bars{position:absolute;left:0;right:0;z-index:3}.gantt-bar-row{position:absolute;left:0;right:0;display:flex;align-items:center}.gantt-bar{position:absolute;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}.gantt-bar:hover{transform:scaleY(1.15);box-shadow:0 2px 8px #0000001a;z-index:10}.bar-progress{position:absolute;left:0;top:0;height:100%;border-radius:6px 0 0 6px;pointer-events:none}.bar-label{position:relative;z-index:1;padding:0 12px 0 14px;font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gantt-tooltip{position:fixed;z-index:100;background:var(--text-primary);color:#fff;border-radius:var(--radius-sm);padding:12px 16px;font-size:13px;pointer-events:none;box-shadow:var(--shadow-lg);min-width:200px}.tooltip-title{font-weight:600;margin-bottom:8px;font-size:14px}.tooltip-row{display:flex;justify-content:space-between;margin-bottom:4px;gap:16px}.tooltip-row span:first-child{color:#9ca3af}.tooltip-dates{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.15);color:#9ca3af;font-size:12px}.sidebar{width:240px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100vh;position:sticky;top:0}.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px;font-weight:700;font-size:16px;letter-spacing:-.3px}.sidebar-nav{flex:1;overflow-y:auto;padding:0 12px}.nav-section{margin-bottom:24px}.nav-section-label{display:block;padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted)}.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:none;border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);text-align:left}.nav-item:hover{background:var(--accent-light);color:var(--text-primary)}.nav-item.active{background:var(--accent);color:#fff}.nav-item.active-cat{background:#eef2ff;color:#4338ca;font-weight:500}.nav-icon{width:20px;text-align:center;font-weight:600;font-size:13px;opacity:.6}.nav-item.active .nav-icon{opacity:1}.cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.clear-x{margin-left:auto;font-size:16px;line-height:1;opacity:.6}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.sf-badge{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}.logout-btn{padding:8px;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.logout-btn:hover{border-color:#dc2626;color:#dc2626}@media(max-width:1024px){.sidebar{display:none}}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}.header-left{display:flex;align-items:center;gap:16px}.header-left h1{font-size:24px;font-weight:700;letter-spacing:-.5px}.connection-status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;background:#fef3c7;color:#92400e}.connection-status.connected{background:#dcfce7;color:#166534}.status-dot{width:6px;height:6px;border-radius:50%;background:#f59e0b}.connection-status.connected .status-dot{background:#22c55e;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.header-right{display:flex;align-items:center;gap:10px}.search-box{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);transition:var(--transition)}.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #0000000d}.search-box input{border:none;outline:none;font-size:13px;width:180px;color:var(--text-primary);background:transparent}.search-box input::placeholder{color:var(--text-muted)}.search-clear{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:0 2px;line-height:1}.search-clear:hover{color:var(--text-primary)}.header-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;color:var(--text-secondary);transition:var(--transition)}.header-btn:hover{border-color:var(--border-hover);color:var(--text-primary)}.user-picker-wrap{position:relative}.user-picker-dropdown{position:absolute;top:44px;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-lg);z-index:50;min-width:240px}.user-picker-dropdown label{display:block;font-size:12px;font-weight:500;color:var(--text-muted);margin-bottom:8px}.user-picker-dropdown input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;margin-bottom:10px;outline:none}.user-picker-dropdown input:focus{border-color:var(--accent)}.user-picker-dropdown button{width:100%;padding:8px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer}.connect-btn,.disconnect-btn{padding:8px 16px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition)}.connect-btn{background:var(--accent);color:#fff}.connect-btn:hover{opacity:.9}.disconnect-btn{background:#fff;color:#dc2626;border:1px solid #fecaca}.disconnect-btn:hover{background:#fef2f2;border-color:#dc2626}.stats-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:var(--transition)}.stat-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}.stat-label{font-size:12px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px}.stat-value{font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1}.stat-change{font-size:12px;font-weight:500;margin-top:6px}@media(max-width:1024px){.stats-bar{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.stats-bar{grid-template-columns:repeat(2,1fr)}}.login-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:24px}.login-card{width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:40px 32px;text-align:center;box-shadow:0 8px 32px #0000000f}.login-logo{margin-bottom:20px}.login-card h1{font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}.login-card p{font-size:14px;color:var(--text-muted);margin-bottom:28px}.input-group{margin-bottom:16px}.input-group input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;color:var(--text-primary);background:var(--bg-primary);outline:none;transition:var(--transition)}.input-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0000000d}.login-error{color:#dc2626;font-size:13px;margin-bottom:12px}.login-card button{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition)}.login-card button:hover{opacity:.9}.login-card button:disabled{opacity:.6;cursor:not-allowed}:root{--bg-primary: #fafafa;--bg-card: #ffffff;--bg-sidebar: #ffffff;--border: #f0f0f0;--border-hover: #e0e0e0;--text-primary: #1a1a1a;--text-secondary: #6b7280;--text-muted: #9ca3af;--accent: #1a1a1a;--accent-light: #f5f5f5;--radius: 12px;--radius-sm: 8px;--shadow-sm: 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.05);--shadow-lg: 0 8px 24px rgba(0,0,0,.08);--transition: .18s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Inter,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}.app{display:flex;min-height:100vh}.main-content{flex:1;padding:24px 32px;overflow-x:hidden;max-width:calc(100vw - 240px)}.chart-container{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:24px;overflow:hidden}.chart-toolbar{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}.chart-title{display:flex;align-items:baseline;gap:12px}.chart-title h2{font-size:18px;font-weight:600;letter-spacing:-.3px}.task-count{font-size:13px;color:var(--text-muted);font-weight:400}.view-modes{display:flex;gap:2px;background:var(--accent-light);border-radius:var(--radius-sm);padding:3px}.view-btn{padding:6px 14px;border:none;background:transparent;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.view-btn.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.view-btn:hover:not(.active){color:var(--text-primary)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 0;gap:16px;color:var(--text-muted)}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.data-table{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border)}.table-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:2px solid var(--accent)}.table-header h3{font-size:18px;font-weight:600;letter-spacing:-.3px}.table-actions{display:flex;align-items:center;gap:12px}.export-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;color:var(--text-secondary);transition:var(--transition)}.export-btn:hover{border-color:var(--border-hover);color:var(--text-primary)}.filter-dropdown{padding:8px 32px 8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text-primary);background:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}thead th{text-align:left;padding:12px 24px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}tbody td{padding:14px 24px;font-size:14px;border-bottom:1px solid var(--border);white-space:nowrap}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--accent-light)}.task-subject{display:flex;align-items:center;gap:10px;font-weight:500}.color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-badge{display:inline-flex;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}.status-badge.not-started{background:#f3f4f6;color:#6b7280}.status-badge.in-progress{background:#dbeafe;color:#2563eb}.status-badge.completed{background:#dcfce7;color:#16a34a}.status-badge.deferred{background:#fef3c7;color:#d97706}.status-badge.waiting-on-someone-else{background:#fce7f3;color:#db2777}.priority-badge{display:inline-flex;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}.priority-badge.high{background:#fee2e2;color:#dc2626}.priority-badge.normal{background:#f3f4f6;color:#6b7280}.priority-badge.low{background:#e0f2fe;color:#0284c7}.progress-cell{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}.mini-progress{width:60px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}.mini-progress-fill{height:100%;border-radius:2px;transition:width .4s ease}.active-tag{display:inline-flex;padding:3px 10px;background:#eef2ff;color:#4338ca;border-radius:12px;font-size:12px;font-weight:500}.category-badge{font-size:13px;color:var(--text-secondary)}@media(max-width:1024px){.main-content{max-width:100vw;padding:16px}}