:root{--primary:#f97316;--primary-hover:#ea580c;--primary-light:#ffedd5;--bg-color:#fafafa;--card-bg:#fff;--border-color:#f3f4f6;--border-hover:#e5e7eb;--text-main:#111827;--text-muted:#6b7280;--success:#10b981;--success-light:#d1fae5;--warning:#f59e0b;--warning-light:#fef3c7;--danger:#ef4444;--danger-light:#fee2e2;--font-family:"Inter", system-ui, -apple-system, sans-serif;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-card:0 10px 15px -3px #0000000d, 0 4px 6px -4px #0000000d;--radius-md:12px;--radius-lg:16px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;line-height:1.5}.app-container{max-width:1000px;margin:0 auto;padding:0 24px 64px}.navbar{justify-content:space-between;align-items:center;margin-bottom:24px;padding:24px 0;display:flex}.nav-left,.nav-right{align-items:center;gap:16px;display:flex}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;font-size:24px;transition:all .2s;display:flex}.icon-btn:hover{background:var(--border-color);color:var(--text-main)}.logo{align-items:center;gap:12px;margin-left:8px;display:flex}.logo-icon{background-color:var(--primary);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.logo-text{letter-spacing:-.5px;font-size:20px;font-weight:700}.avatar{background-color:var(--primary-light);color:var(--primary);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin-left:8px;font-size:14px;font-weight:600;display:flex}.header h1{letter-spacing:-1px;margin-bottom:8px;font-size:32px;font-weight:700}.header p{color:var(--text-muted);margin-bottom:32px;font-size:16px}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px;display:grid}.stat-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);padding:24px;transition:transform .2s,box-shadow .2s}.stat-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover);transform:translateY(-2px)}.stat-header{justify-content:space-between;align-items:flex-start;margin-bottom:16px;display:flex}.stat-title{color:var(--text-muted);font-size:14px;font-weight:500}.icon-wrapper{border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}#card-total .icon-wrapper{background:var(--primary-light);color:var(--primary)}#card-pending .icon-wrapper{background:var(--warning-light);color:var(--warning)}#card-important .icon-wrapper{color:#ef4444;background:#fee2e2}#card-completed .icon-wrapper{background:var(--success-light);color:var(--success)}.stat-value{color:var(--text-main);margin-bottom:8px;font-size:36px;font-weight:700;line-height:1}.stat-desc{color:var(--text-muted);font-size:13px}.task-form{gap:16px;margin-bottom:40px;display:flex}.input-group{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex:1;align-items:center;padding:6px 16px;transition:border-color .2s;display:flex}.input-group:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #f973161a}.input-group input[type=text]{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;padding:12px 0;font-size:16px}.input-group input[type=text]::placeholder{color:#9ca3af}.input-group select{background:var(--border-color);color:var(--text-main);cursor:pointer;border:none;border-radius:6px;outline:none;margin-right:12px;padding:8px 12px;font-size:14px;font-weight:500}.important-toggle{cursor:pointer;color:var(--text-muted);border-radius:6px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.important-toggle input{display:none}.important-toggle:hover{background:var(--border-color)}.active-star{color:var(--warning)}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;align-items:center;gap:8px;padding:0 24px;font-size:16px;font-weight:600;transition:background .2s;display:flex;box-shadow:0 4px 6px -1px #f9731633}.btn-primary:hover{background:var(--primary-hover)}.task-list{flex-direction:column;gap:16px;display:flex}.task-item{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);align-items:center;padding:20px;transition:all .2s;animation:.3s ease-out slideIn;display:flex}.task-item:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover);transform:translate(4px)}.task-item.completed .task-title{color:var(--text-muted);text-decoration:line-through}.checkbox-wrapper{cursor:pointer;justify-content:center;align-items:center;margin-right:20px;display:flex;position:relative}.task-checkbox-input{opacity:0;cursor:pointer;z-index:2;width:100%;height:100%;position:absolute}.checkbox-custom{border:2px solid #d1d5db;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex}.task-checkbox-input:checked+.checkbox-custom{background-color:var(--primary);border-color:var(--primary)}.task-body{flex-direction:column;flex:1;gap:8px;display:flex}.task-title{color:var(--text-main);font-size:16px;font-weight:500;transition:color .2s}.task-meta{align-items:center;gap:12px;display:flex}.chip{border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600}.chip-Work{color:#e11d48;background:#ffe4e6}.chip-Design{color:#ea580c;background:#ffedd5}.chip-Dev{color:#2563eb;background:#dbeafe}.chip-Personal{color:#16a34a;background:#dcfce7}.task-date{color:var(--text-muted);align-items:center;gap:4px;font-size:13px;display:flex}.task-actions{opacity:1;align-items:center;gap:8px;transition:opacity .2s;display:flex}.task-item:hover .task-actions{opacity:1}.btn-icon{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.btn-icon:hover{background:var(--border-color);color:var(--text-main)}.btn-icon.delete:hover{background:var(--danger-light);color:var(--danger)}.btn-icon.star{color:#cbd5e1}.btn-icon.star.active{color:var(--warning)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:60px 20px;display:flex}.empty-icon{color:#d1d5db}.empty-state p{font-size:16px}@media (width<=768px){.task-form{flex-direction:column}.btn-primary{justify-content:center;padding:16px}}.auth-container{justify-content:center;align-items:center;min-height:calc(100vh - 120px);display:flex}.auth-card{background:var(--card-bg);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-card);border:1px solid var(--border-color);text-align:center;padding:40px}.auth-logo{justify-content:center;margin-bottom:24px}.auth-card h2{margin-bottom:8px;font-size:24px}.auth-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:14px}.auth-error{background:var(--danger-light);color:var(--danger);border-radius:var(--radius-md);margin-bottom:24px;padding:12px;font-size:13px}.auth-form{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.auth-input-group{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-md);align-items:center;gap:12px;padding:12px 16px;transition:border-color .2s;display:flex}.auth-input-group:focus-within{border-color:var(--primary);background:#fff}.auth-input-group input{width:100%;color:var(--text-main);background:0 0;border:none;outline:none}.auth-submit{justify-content:center;width:100%;margin-top:8px;padding:12px}.auth-divider{text-align:center;margin:24px 0;position:relative}.auth-divider:before{content:"";background:var(--border-color);height:1px;position:absolute;top:50%;left:0;right:0}.auth-divider span{background:var(--card-bg);color:var(--text-muted);padding:0 12px;font-size:12px;font-weight:500;position:relative}.btn-google{border-radius:var(--radius-md);color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;justify-content:center;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:15px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 1px 2px #0000000d}.btn-google:hover{background:#f9fafb;border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000000d}.btn-google:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.auth-toggle{color:var(--text-muted);margin-top:32px;font-size:14px}.auth-toggle-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;font-weight:600}.auth-toggle-btn:hover{text-decoration:underline}.paywall-container{background-color:var(--bg-color);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.paywall-card{background:var(--card-bg);border-radius:var(--radius-lg);border:1px solid var(--border-color);width:100%;max-width:460px;padding:48px;box-shadow:0 20px 25px -5px #0000000d,0 10px 10px -5px #0000000a}.paywall-header{text-align:center;margin-bottom:32px}.paywall-logo{width:48px;height:48px;margin:0 auto 20px;font-size:24px}.paywall-header h2{color:var(--text-main);margin-bottom:8px;font-size:28px;font-weight:700}.paywall-header p{color:var(--text-muted);font-size:15px}.pricing-box{background:var(--primary-light);border-radius:var(--radius-md);text-align:center;border:1px solid #f9731633;margin-bottom:32px;padding:24px}.price-tag{color:var(--primary-hover);justify-content:center;align-items:baseline;margin-bottom:4px;display:flex}.currency{margin-top:4px;margin-right:2px;font-size:24px;font-weight:600}.amount{font-size:48px;font-weight:800;line-height:1}.period{color:var(--primary);margin-left:4px;font-size:16px;font-weight:500}.pricing-desc{color:var(--primary);font-size:13px;font-weight:500}.benefits-list{margin-bottom:36px;list-style:none}.benefits-list li{color:var(--text-main);align-items:center;gap:12px;margin-bottom:16px;font-size:15px;font-weight:500;display:flex}.benefit-icon{color:var(--success);flex-shrink:0}.paywall-submit{justify-content:center;width:100%;margin-bottom:20px;padding:16px;font-size:16px;font-weight:600}.paywall-submit:disabled{opacity:.8;cursor:wait}.loading-state{animation:1.5s infinite pulse}.secure-badge{color:var(--text-muted);justify-content:center;align-items:center;gap:6px;margin-top:16px;font-size:12px;display:flex}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.stripe-checkout-section{margin-top:24px}.card-element-container{border:1px solid var(--border-color);border-radius:var(--radius-md);background:#fff;margin-bottom:16px;padding:16px;transition:border-color .2s;box-shadow:inset 0 1px 2px #00000008}.card-element-container:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #f973161a}.stripe-error{color:var(--danger);text-align:center;background:var(--danger-light);border-radius:var(--radius-md);margin-bottom:16px;padding:8px 12px;font-size:13px}