@import"https://fonts.googleapis.com/css2?family=Satoshi:wght@400;500;700;900&display=swap";[data-theme=dark]{--bg-primary: #050505;--bg-secondary: #0a0a0a;--bg-tertiary: #111111;--bg-hover: #1a1a1a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #555555;--accent-primary: #00ff88;--accent-secondary: #00cc6a;--accent-glow: rgba(0, 255, 136, .4);--border-color: #1a1a1a;--danger: #ff4757;--warning: #ffa502;--success: #2ed573;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .5);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--font-display: "Satoshi", sans-serif;--font-body: "Satoshi", sans-serif}body{overflow-x:hidden}.app{display:flex;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);position:relative;overflow:hidden}.ambient-glow{position:fixed;top:-50%;left:-20%;width:80%;height:80%;background:radial-gradient(ellipse at center,var(--accent-glow) 0%,transparent 70%);pointer-events:none;z-index:0;animation:pulse-glow 8s ease-in-out infinite}.ambient-glow-2{position:fixed;bottom:-30%;right:-10%;width:60%;height:60%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent-secondary) 50%,transparent) 0%,transparent 60%);pointer-events:none;z-index:0;animation:pulse-glow 10s ease-in-out infinite reverse}[data-theme=light] .ambient-glow,[data-theme=light] .ambient-glow-2{opacity:.5}@keyframes pulse-glow{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.loading{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;font-size:18px;color:var(--text-secondary)}.sidebar{width:220px;background:var(--bg-secondary);border-right:1px solid var(--border-color);padding:32px 16px;display:flex;flex-direction:column;position:relative;z-index:1}.logo{display:flex;align-items:center;gap:12px;padding:0 8px;margin-bottom:40px}.logo-icon-wrapper{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-md);box-shadow:0 0 20px var(--accent-glow)}.logo-icon{width:22px;height:22px;color:var(--bg-primary);stroke-width:2.5}.logo-text{font-family:var(--font-display);font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px}.nav-list{display:flex;flex-direction:column;gap:8px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);text-align:left}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:color-mix(in srgb,var(--accent-primary) 15%,transparent);color:var(--accent-primary)}.nav-item .nav-icon{width:20px;height:20px}.nav-badge{margin-left:auto;padding:2px 8px;background:var(--bg-hover);border-radius:10px;font-size:12px;color:var(--text-muted)}.sidebar-footer{margin-top:auto;padding:16px 8px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.task-total{font-size:13px;color:var(--text-muted)}.theme-toggle{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.theme-toggle:hover{background:color-mix(in srgb,var(--accent-primary) 15%,transparent);border-color:var(--accent-primary);color:var(--accent-primary)}.theme-icon{width:18px;height:18px}.main{flex:1;display:flex;flex-direction:column;padding:40px 48px;position:relative;z-index:1;overflow-y:auto;max-height:100vh}.date-title{font-family:var(--font-display);font-size:32px;font-weight:700;margin-bottom:32px;color:var(--text-primary);letter-spacing:-.5px}.page-title{font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:24px;color:var(--text-primary)}.add-task-form{display:flex;gap:12px;margin-bottom:24px;align-items:center}.priority-selector{display:flex;gap:4px;padding:4px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-lg)}.priority-option{padding:10px 18px;font-family:var(--font-body);font-size:13px;font-weight:600;background:transparent;border:2px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all .2s ease}.priority-option:hover{color:var(--text-primary)}.priority-option.active{border-color:var(--priority-color);color:var(--priority-color);background:var(--bg-hover)}.task-input-wrapper{flex:1;display:flex;gap:12px;align-items:center}.task-input{flex:1;padding:14px 20px;font-family:var(--font-body);font-size:15px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-xl);color:var(--text-primary);transition:var(--transition)}.task-input::placeholder{color:var(--text-muted)}.task-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 20px var(--accent-glow)}.add-btn{padding:14px 28px;font-family:var(--font-body);font-size:14px;font-weight:600;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:var(--radius-xl);color:var(--bg-primary);cursor:pointer;transition:all .3s ease;white-space:nowrap}.add-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00ff8859}.date-picker-wrapper{position:relative}.date-picker-toggle{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-muted);cursor:pointer;transition:all .3s ease;font-family:var(--font-body);font-size:13px}.date-picker-toggle:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary)}.date-picker-toggle.active{background:color-mix(in srgb,var(--accent-primary) 15%,transparent);border-color:var(--accent-primary);color:var(--accent-primary)}.date-picker-icon{width:18px;height:18px}.date-picker-popup{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px;z-index:100;box-shadow:var(--shadow-md);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.date-input{width:100%;padding:10px 14px;font-family:var(--font-body);font-size:14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);margin-bottom:12px}.date-input::-webkit-calendar-picker-indicator{background-color:var(--accent-primary);border-radius:4px;padding:4px;cursor:pointer;width:18px;height:18px}.date-input:focus{outline:none;border-color:var(--accent-primary)}.date-quick-options{display:flex;gap:8px;margin-bottom:12px}.date-quick-options button{flex:1;padding:8px 10px;font-family:var(--font-body);font-size:12px;font-weight:500;background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.date-quick-options button:hover{background:color-mix(in srgb,var(--accent-primary) 15%,transparent);border-color:var(--accent-primary);color:var(--accent-primary)}.date-clear-btn{width:100%;padding:8px;font-family:var(--font-body);font-size:13px;font-weight:500;background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);border-radius:var(--radius-sm);color:var(--danger);cursor:pointer;transition:all .2s ease}.date-clear-btn:hover{background:#ff475733}.gantt-container{flex:1;display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;position:relative}.gantt-header{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.gantt-nav{display:flex;align-items:center;gap:8px;padding:12px 16px;border-right:1px solid var(--border-color)}.gantt-nav-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.gantt-nav-btn:hover{background:color-mix(in srgb,var(--accent-primary) 15%,transparent);border-color:var(--accent-primary);color:var(--accent-primary)}.gantt-nav-btn .nav-icon{width:16px;height:16px}.today-btn{padding:8px 16px;font-family:var(--font-body);font-size:13px;font-weight:600;background:color-mix(in srgb,var(--accent-primary) 15%,transparent);border:1px solid var(--accent-primary);border-radius:var(--radius-sm);color:var(--accent-primary);cursor:pointer;transition:all .2s ease}.today-btn:hover{background:color-mix(in srgb,var(--accent-primary) 25%,transparent)}.gantt-timeline-header{flex:1;overflow-x:auto}.gantt-timeline-header::-webkit-scrollbar{display:none}.timeline-grid{display:flex;height:56px}.timeline-cell{width:60px;min-width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--border-color);transition:background .2s ease}.timeline-cell.today{background:color-mix(in srgb,var(--accent-primary) 12%,transparent)}.timeline-cell.weekend{background:var(--bg-tertiary)}.day-name{font-family:var(--font-body);font-size:10px;font-weight:500;color:var(--text-muted);text-transform:uppercase;margin-bottom:4px}.day-number{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-primary)}.timeline-cell.today .day-number{color:var(--accent-primary)}.gantt-body{flex:1;display:flex;overflow:hidden}.task-list-panel{width:300px;min-width:300px;border-right:1px solid var(--border-color);overflow-y:auto;padding:8px 0}.task-checkbox{width:22px;height:22px;min-width:22px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:50%;cursor:pointer;transition:all .2s ease}.task-checkbox:hover{border-color:var(--accent-primary);box-shadow:0 0 12px var(--accent-glow)}.task-checkbox.checked{background:var(--accent-primary);border-color:var(--accent-primary);animation:check-pop .3s ease}@keyframes check-pop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.task-row{display:flex;align-items:center;gap:10px;padding:0 16px;transition:all .2s ease;animation:slideIn .3s ease forwards}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.task-row:hover{background:var(--bg-hover)}.task-row.completing{animation:complete-slide .3s ease forwards}@keyframes complete-slide{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(30px)}}.task-row.deleting{animation:delete-slide .3s ease forwards}@keyframes delete-slide{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}.task-priority-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}.task-name{flex:1;font-family:var(--font-body);font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-countdown{font-family:var(--font-body);font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;background:var(--bg-hover);flex-shrink:0}.task-delete-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;opacity:0;transition:all .2s ease}.task-row:hover .task-delete-btn{opacity:1}.task-delete-btn:hover{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}.delete-icon{width:14px;height:14px}.empty-gantt{display:flex;align-items:center;justify-content:center;height:120px;font-family:var(--font-body);font-size:14px;color:var(--text-muted)}.timeline-panel{flex:1;position:relative;overflow:auto;padding:8px 0}.timeline-grid-bg{display:flex;height:100%;pointer-events:none}.timeline-cell-bg{width:60px;min-width:60px;border-right:1px solid var(--border-color)}.timeline-cell-bg.today{background:color-mix(in srgb,var(--accent-primary) 5%,transparent)}.timeline-cell-bg.weekend{background:var(--bg-tertiary)}.today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:10;pointer-events:none;animation:today-pulse 2s ease-in-out infinite}@keyframes today-pulse{0%,to{box-shadow:0 0 8px var(--danger)}50%{box-shadow:0 0 20px var(--danger),0 0 30px var(--danger)}}.today-label{position:absolute;top:-22px;left:50%;transform:translate(-50%);padding:2px 8px;background:var(--danger);border-radius:4px;font-family:var(--font-body);font-size:10px;font-weight:600;color:#fff;white-space:nowrap}.task-bars{position:absolute;top:8px;left:0;right:0}.task-bar{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-radius:6px;cursor:pointer;transition:all .2s ease;animation:bar-appear .3s ease forwards}@keyframes bar-appear{0%{opacity:0;transform:scaleX(.8)}to{opacity:1;transform:scaleX(1)}}.task-bar:hover{transform:scaleY(1.15);z-index:5}.task-bar.completing{animation:bar-complete .3s ease forwards}@keyframes bar-complete{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}to{opacity:0;transform:scale(.9)}}.task-bar.priority-high{background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 40%,transparent),color-mix(in srgb,var(--danger) 20%,transparent));border:1px solid var(--danger);box-shadow:0 0 15px color-mix(in srgb,var(--danger) 20%,transparent)}.task-bar.priority-high:hover{box-shadow:0 0 25px color-mix(in srgb,var(--danger) 40%,transparent)}.task-bar.priority-low{background:linear-gradient(135deg,color-mix(in srgb,var(--success) 40%,transparent),color-mix(in srgb,var(--success) 20%,transparent));border:1px solid var(--success);box-shadow:0 0 15px color-mix(in srgb,var(--success) 20%,transparent)}.task-bar.priority-low:hover{box-shadow:0 0 25px color-mix(in srgb,var(--success) 40%,transparent)}.bar-text{flex:1;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-countdown{font-family:var(--font-body);font-size:10px;font-weight:600;padding:2px 8px;background:#0006;border-radius:8px;flex-shrink:0}.edit-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;z-index:100;min-width:280px;box-shadow:var(--shadow-md),0 0 40px var(--accent-glow);animation:popup-appear .2s ease}@keyframes popup-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.edit-popup-header{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:16px}.edit-popup-input{width:100%;padding:12px 14px;font-family:var(--font-body);font-size:14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);margin-bottom:16px}.edit-popup-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 15px #0f83}.edit-popup-actions{display:flex;gap:12px;justify-content:flex-end}.edit-popup-cancel,.edit-popup-save{padding:10px 20px;font-family:var(--font-body);font-size:13px;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.edit-popup-cancel{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}.edit-popup-cancel:hover{background:var(--bg-hover);color:var(--text-primary)}.edit-popup-save{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;color:var(--bg-primary)}.edit-popup-save:hover{transform:translateY(-2px);box-shadow:0 5px 20px var(--accent-glow)}.completed-search{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-xl);margin-bottom:24px}.completed-search .search-icon{width:18px;height:18px;color:var(--text-muted)}.completed-search .search-input{flex:1;background:transparent;border:none;font-family:var(--font-body);font-size:14px;color:var(--text-primary)}.completed-search .search-input::placeholder{color:var(--text-muted)}.completed-search .search-input:focus{outline:none}.completed-list{display:flex;flex-direction:column;gap:8px}.completed-item{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s ease;animation:slideIn .2s ease}.completed-item:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.completed-item .checkbox{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--accent-primary);border:2px solid var(--accent-primary);border-radius:50%;flex-shrink:0}.completed-item .checkmark-svg{width:12px;height:12px;color:var(--bg-primary);stroke-width:3}.completed-item .task-text{flex:1;font-family:var(--font-body);font-size:14px;color:var(--text-muted);text-decoration:line-through}.completed-item .task-date{font-family:var(--font-body);font-size:12px;color:var(--text-muted)}.completed-item .delete-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;opacity:0;transition:all .2s ease}.completed-item:hover .delete-btn{opacity:1}.completed-item .delete-btn:hover{background:#ff475726;color:var(--danger)}.completed-item .trash-icon-svg{width:16px;height:16px}.empty-state{display:flex;align-items:center;justify-content:center;padding:60px 20px;font-family:var(--font-body);font-size:14px;color:var(--text-muted)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.app{flex-direction:column}.sidebar{width:100%;padding:20px 16px;border-right:none;border-bottom:1px solid var(--border-color)}.logo{margin-bottom:24px}.nav-list{flex-direction:row;gap:12px}.nav-item{flex:1;justify-content:center;padding:12px}.nav-item span,.sidebar-footer{display:none}.main{padding:24px 16px;max-height:none}.date-title{font-size:24px;margin-bottom:20px}.add-task-form{flex-direction:column}.priority-selector{width:100%;justify-content:center}.gantt-body{flex-direction:column}.task-list-panel{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--border-color);max-height:150px}.task-countdown,.ambient-glow,.ambient-glow-2{display:none}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary)}#root{width:100%;min-height:100vh}[data-theme=light]{--bg-primary: #f5f5f7;--bg-secondary: #ffffff;--bg-tertiary: #eaeaec;--bg-hover: #dcdcde;--text-primary: #1d1d1f;--text-secondary: #6e6e73;--text-muted: #a1a1a6;--accent-primary: #00c853;--accent-secondary: #00a844;--accent-glow: rgba(0, 200, 83, .2);--border-color: #d2d2d7;--danger: #ff3b30;--warning: #ff9500;--success: #34c759;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 20px rgba(0, 0, 0, .12);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--font-display: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}[data-theme=dark]{--bg-primary: #050505;--bg-secondary: #0a0a0a;--bg-tertiary: #111111;--bg-hover: #1a1a1a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #555555;--accent-primary: #00ff88;--accent-secondary: #00cc6a;--accent-glow: rgba(0, 255, 136, .15);--border-color: #1a1a1a;--danger: #ff4757;--warning: #ffa502;--success: #2ed573;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .5);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--font-display: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}
