.header{position:sticky;top:0;z-index:100;padding:1.25rem 0;border-bottom:1px solid var(--glass-border);margin-bottom:1rem}.header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.header-left{display:flex;align-items:center;gap:var(--spacing-md)}.logo{font-size:2rem;font-weight:800;margin:0;letter-spacing:-.5px;filter:drop-shadow(0 0 20px rgba(102,126,234,.5));animation:logoGlow 3s ease-in-out infinite}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 20px rgba(102,126,234,.5))}50%{filter:drop-shadow(0 0 30px rgba(118,75,162,.8))}}.tagline{font-size:.85rem;color:var(--text-secondary);margin:0;display:none}.header-right{display:flex;align-items:center;gap:var(--spacing-md)}.stats-summary{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--glass-bg);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-value{font-size:1.2rem;font-weight:700;line-height:1}.stat-value.completed{color:var(--priority-low)}.stat-value.active{color:var(--accent-primary)}.stat-label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.stat-divider{width:1px;height:30px;background:var(--glass-border)}.icon-button{width:48px;height:48px;border-radius:var(--radius-full);background:var(--glass-bg);display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:all .3s ease}.icon-button:hover{transform:scale(1.1);background:var(--gradient-primary)}.stats-button:hover{background:var(--gradient-accent)}@media (max-width: 768px){.logo{font-size:1.5rem}.tagline,.stats-summary{display:none}.icon-button{width:42px;height:42px;font-size:1.2rem}}@media (min-width: 769px){.tagline{display:block}}.todo-input{border-radius:var(--radius-lg);padding:2rem;animation:fadeIn .5s ease-out;margin-bottom:.5rem}.input-header{display:flex;gap:var(--spacing-sm);align-items:center}.title-input{flex:1;background:transparent;border:none;font-size:1.1rem;color:var(--text-primary);padding:var(--spacing-sm)}.title-input::placeholder{color:var(--text-secondary)}.advanced-toggle{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--glass-bg);color:var(--text-primary);font-size:.9rem;transition:all .3s ease}.advanced-toggle:hover{background:var(--gradient-primary);color:#fff}.advanced-options{margin-top:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md);animation:fadeIn .3s ease-out}.description-input{width:100%;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);font-size:.95rem;resize:vertical;min-height:60px}.description-input::placeholder{color:var(--text-secondary)}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md)}.option-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.option-group label{font-size:.8rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.option-group select,.option-group input[type=date]{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);font-size:.95rem;cursor:pointer}.option-group select:focus,.option-group input[type=date]:focus{border-color:var(--accent-primary);outline:none}.add-button{margin-top:var(--spacing-md);width:100%;padding:var(--spacing-md);border-radius:var(--radius-md);color:#fff;font-size:1rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:all .3s ease}.add-button:disabled{opacity:.5;cursor:not-allowed}.add-button:not(:disabled):hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 40px #667eea66,0 0 60px #764ba24d}.button-icon{font-size:1.5rem;line-height:1}@media (max-width: 480px){.options-grid{grid-template-columns:1fr}}.filter-bar{border-radius:var(--radius-lg);padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;animation:fadeIn .5s ease-out .1s backwards;margin-bottom:.5rem}.filter-tabs{display:flex;gap:var(--spacing-xs);background:var(--glass-bg);padding:var(--spacing-xs);border-radius:var(--radius-md)}.filter-tab{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);font-weight:500;transition:all .3s ease}.filter-tab:hover{color:var(--text-primary);background:var(--glass-bg)}.filter-tab.active{background:var(--gradient-primary);color:#fff}.filter-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.search-box{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--spacing-sm);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:0 var(--spacing-md);transition:all .3s ease}.search-box:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px #667eea1a}.search-icon{font-size:1rem;opacity:.6}.search-input{flex:1;background:transparent;border:none;padding:var(--spacing-sm) 0;color:var(--text-primary);font-size:.95rem}.search-input::placeholder{color:var(--text-secondary)}.clear-search{width:24px;height:24px;border-radius:50%;background:var(--glass-bg);color:var(--text-secondary);font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.clear-search:hover{background:var(--gradient-primary);color:#fff}.category-filter{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);font-size:.95rem;cursor:pointer;transition:all .3s ease}.category-filter:focus{border-color:var(--accent-primary);outline:none}.clear-completed-button{background:var(--gradient-accent);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:.9rem;font-weight:500;transition:all .3s ease;white-space:nowrap}.clear-completed-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}@media (max-width: 600px){.filter-controls{flex-direction:column}.search-box{min-width:100%}.category-filter,.clear-completed-button{width:100%}}.todo-item{border-radius:var(--radius-md);padding:1.25rem 1.5rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;transition:all .3s ease;animation:slideIn .4s ease-out backwards;border-left:4px solid transparent}.todo-item:hover{transform:translate(6px) translateY(-2px);box-shadow:0 16px 40px var(--shadow),0 0 40px #667eea33;border-left-color:var(--accent-primary)}.todo-item.completed{opacity:.7}.todo-item.overdue{border-left-color:var(--priority-high)}.todo-main{flex:1;display:flex;gap:var(--spacing-md);align-items:flex-start}.checkbox{width:24px;height:24px;min-width:24px;border-radius:6px;border:2px solid var(--accent-primary);background:transparent;display:flex;align-items:center;justify-content:center;transition:all .3s ease;margin-top:2px}.checkbox:hover{background:var(--gradient-primary);transform:scale(1.1)}.checkmark{color:#fff;font-size:1rem;font-weight:700}.todo-content{flex:1;min-width:0}.todo-title{font-size:1.05rem;font-weight:500;color:var(--text-primary);margin:0 0 var(--spacing-xs) 0;word-wrap:break-word}.completed .todo-title{text-decoration:line-through;opacity:.6}.todo-description{font-size:.9rem;color:var(--text-secondary);margin:0 0 var(--spacing-sm) 0;line-height:1.5}.todo-meta{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;align-items:center}.priority-badge{padding:4px 12px;border-radius:var(--radius-full);font-size:.7rem;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.8px;box-shadow:0 4px 12px #0003}.due-date{font-size:.8rem;color:var(--text-secondary);padding:2px 8px;background:var(--glass-bg);border-radius:var(--radius-sm)}.due-date.overdue{color:var(--priority-high);font-weight:600}.todo-actions{display:flex;gap:var(--spacing-xs)}.action-button{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--glass-bg);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;opacity:.7}.action-button:hover{opacity:1;transform:scale(1.1)}.action-button.edit:hover{background:var(--gradient-accent)}.action-button.delete:hover{background:linear-gradient(135deg,#ef4444,#dc2626)}.edit-form{display:flex;flex-direction:column;gap:var(--spacing-sm)}.edit-title,.edit-description{width:100%;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--spacing-sm);color:var(--text-primary);font-size:.95rem}.edit-description{resize:vertical;min-height:60px}.edit-actions{display:flex;gap:var(--spacing-sm)}.save-button,.cancel-button{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:.9rem;font-weight:500}.save-button{background:var(--gradient-primary);color:#fff}.cancel-button{background:var(--glass-bg);color:var(--text-primary)}@media (max-width: 600px){.todo-item{flex-direction:column}.todo-actions{align-self:flex-end}}.todo-list{display:flex;flex-direction:column;gap:2.5rem}.category-group{animation:fadeIn .5s ease-out .2s backwards}.category-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding:0 .5rem}.category-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.category-title:before{content:"";width:4px;height:20px;background:var(--gradient-primary);border-radius:var(--radius-full)}.category-count{background:var(--glass-bg);color:var(--text-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:.85rem;font-weight:600}.todos-container{display:flex;flex-direction:column;gap:1rem}.empty-state{border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;animation:fadeIn .5s ease-out .2s backwards}.empty-icon{font-size:4rem;margin-bottom:var(--spacing-md);animation:float 3s ease-in-out infinite}.empty-state h3{font-size:1.3rem;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.empty-state p{color:var(--text-secondary);font-size:.95rem}.stats-panel{border-radius:var(--radius-lg);padding:2rem;display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto}.stats-title{font-size:1.4rem;font-weight:700;margin:0 0 1rem;color:var(--text-primary)}.stat-card{border-radius:var(--radius-md);padding:1.5rem}.stat-card h3{font-size:.95rem;font-weight:600;color:var(--text-secondary);margin:0 0 var(--spacing-md) 0;text-transform:uppercase;letter-spacing:.5px}.progress-circle{position:relative;width:120px;height:120px;margin:0 auto}.progress-circle svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-bg{fill:none;stroke:var(--glass-border);stroke-width:8}.progress-bar{fill:none;stroke:url(#gradient);stroke-width:8;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset 1s ease}.progress-circle svg circle{stroke:var(--accent-primary)}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.progress-value{font-size:2rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);background:var(--glass-bg);border-radius:var(--radius-sm)}.stat-label{font-size:.9rem;color:var(--text-primary);text-transform:capitalize}.stat-badge{background:var(--gradient-primary);color:#fff;padding:2px 10px;border-radius:var(--radius-full);font-size:.85rem;font-weight:600}.stat-badge.priority-badge[data-priority=high]{background:var(--priority-high)}.stat-badge.priority-badge[data-priority=medium]{background:var(--priority-medium)}.stat-badge.priority-badge[data-priority=low]{background:var(--priority-low)}.upcoming-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.upcoming-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);background:var(--glass-bg);border-radius:var(--radius-sm);gap:var(--spacing-sm)}.upcoming-title{font-size:.85rem;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upcoming-date{font-size:.75rem;color:var(--accent-primary);font-weight:600;white-space:nowrap}.animated-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;animation:float 20s ease-in-out infinite}.orb-1{width:500px;height:500px;background:radial-gradient(circle,#667eea 0%,#764ba2 50%,transparent 100%);top:-200px;left:-200px;animation-duration:25s}.orb-2{width:600px;height:600px;background:radial-gradient(circle,#ec4899 0%,#06b6d4 50%,transparent 100%);bottom:-250px;right:-250px;animation-delay:-7s;animation-duration:30s}.orb-3{width:450px;height:450px;background:radial-gradient(circle,#8b5cf6 0%,#10b981 50%,transparent 100%);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s;animation-duration:28s}.orb-4{width:350px;height:350px;background:radial-gradient(circle,#f59e0b 0%,#ec4899 50%,transparent 100%);top:20%;right:20%;animation-delay:-10s;animation-duration:22s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-50px,50px) scale(.9)}}@media (max-width: 768px){.orb{filter:blur(50px)}.orb-1,.orb-2,.orb-3{width:250px;height:250px}}.footer{margin-top:auto;padding:2.5rem 0;border-top:1px solid rgba(255,255,255,.1);background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:100%;position:relative;z-index:10;box-shadow:0 -4px 30px #0000001a}.footer-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.footer-text{font-size:1.1rem;color:var(--text-primary);font-weight:500;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}.heart{display:inline-block;animation:beat 1.5s ease-in-out infinite}.footer-name{font-weight:800;text-decoration:none;font-size:1.2rem;position:relative;transition:transform .3s ease;cursor:pointer}.footer-name:after{content:"";position:absolute;width:100%;height:2px;bottom:-2px;left:0;background:var(--gradient-primary);transform:scaleX(0);transform-origin:bottom right;transition:transform .3s ease-out}.footer-name:hover{transform:translateY(-2px)}.footer-name:hover:after{transform:scaleX(1);transform-origin:bottom left}.copyright{font-size:.85rem;color:var(--text-secondary);opacity:.8}@keyframes beat{0%,to{transform:scale(1)}25%{transform:scale(1.2)}}@media (max-width: 480px){.footer{padding:1.5rem 0}.footer-text{font-size:1rem}}.app{min-height:100vh;background:var(--bg-primary);position:relative;display:flex;flex-direction:column;gap:3rem}.app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:var(--gradient-bg);opacity:.6;z-index:-1;pointer-events:none}.main-content{padding-top:3rem;padding-bottom:3rem;flex:1;width:100%}.app-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:900px;margin:0 auto}.app-grid:has(.stats-column){grid-template-columns:1fr 380px;max-width:1400px;gap:3rem}.main-column{display:flex;flex-direction:column;gap:2rem}.stats-column{animation:slideIn .3s ease-out}@media (max-width: 1024px){.app-grid:has(.stats-column){grid-template-columns:1fr}.stats-column{order:-1}}@media (max-width: 768px){.main-content{padding-top:var(--spacing-md)}.app-grid,.main-column{gap:var(--spacing-md)}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);--bg-secondary: #ffffff;--text-primary: #1a202c;--text-secondary: #64748b;--accent-primary: #667eea;--accent-secondary: #764ba2;--glass-bg: rgba(255, 255, 255, .85);--glass-border: rgba(102, 126, 234, .2);--shadow: rgba(102, 126, 234, .15);--overlay: rgba(0, 0, 0, .5);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-accent: linear-gradient(135deg, #06b6d4 0%, #ec4899 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);--gradient-premium: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);--gradient-bg: linear-gradient(135deg, #667eea10 0%, #ec489920 50%, #06b6d430 100%);--priority-low: linear-gradient(135deg, #10b981 0%, #34d399 100%);--priority-medium: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);--priority-high: #ef4444;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-full: 9999px}[data-theme=dark]{--bg-primary: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--bg-secondary: #1e293b;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--glass-bg: rgba(30, 41, 59, .85);--glass-border: rgba(139, 92, 246, .3);--shadow: rgba(102, 126, 234, .25)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:background-color .3s ease,color .3s ease;overflow-x:hidden}#root{min-height:100vh;position:relative}.glass{background:var(--glass-bg);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1.5px solid var(--glass-border);box-shadow:0 8px 32px 0 var(--shadow),inset 0 1px #ffffff1a}.gradient-primary{background:var(--gradient-primary)}.gradient-accent{background:var(--gradient-accent)}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.fade-in{animation:fadeIn .5s ease-out}.slide-in{animation:slideIn .5s ease-out}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gradient-accent)}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .3s ease}button:active{transform:scale(.95)}input,textarea{font-family:inherit;outline:none;transition:all .3s ease}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.grid{display:grid}@media (max-width: 768px){:root{font-size:14px}.container{padding:0 var(--spacing-sm)}}@media (max-width: 480px){:root{font-size:13px}}