body{color:#1f2937;background:#f5f5f5;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{width:100%;min-height:100vh;margin:0}:root{--primary:#4f46e5;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--info:#3b82f6;--light:#f3f4f6;--dark:#1f2937;--border:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;color:var(--dark);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app{background:#fff;flex-direction:column;min-height:100vh;display:flex}.app-header{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:2rem;box-shadow:0 4px 6px #0000001a}.app-header h1{text-shadow:2px 2px 4px #0003;margin-bottom:.5rem;font-size:2.5rem}.app-header p{opacity:.95;font-size:1.1rem}.app-nav{border-bottom:2px solid var(--border);background:#fff;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:1rem;display:flex}.nav-btn{border:2px solid var(--border);color:var(--dark);cursor:pointer;background:#fff;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:all .3s}.nav-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}.nav-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 8px #4f46e54d}.app-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.home-section{justify-content:center;align-items:center;min-height:400px;display:flex}.welcome-card{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;max-width:600px;padding:3rem;box-shadow:0 10px 30px #0003}.welcome-card h2{margin-bottom:1rem;font-size:2rem}.welcome-card p{margin-bottom:1.5rem;font-size:1.1rem;line-height:1.6}.feature-list{text-align:left;margin:2rem 0;padding:0 1rem;list-style:none}.feature-list li{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:8px;margin-bottom:.5rem;padding:.75rem;font-size:1.05rem}.intro-text{opacity:.9;margin-top:2rem;font-style:italic}.component-section{animation:.3s fadeIn}.card{background:#fff;border-radius:12px;margin-bottom:2rem;padding:2rem;box-shadow:0 4px 15px #0000001a}.card h2{color:var(--primary);margin-bottom:1.5rem;font-size:1.8rem}.count-display{color:var(--primary);margin:1rem 0;font-size:2.5rem;display:block}.input-group{align-items:center;gap:1rem;margin:1.5rem 0;display:flex}.input-group label{color:var(--dark);font-weight:500}.input-field{border:2px solid var(--border);border-radius:8px;flex:1;max-width:150px;padding:.75rem;font-size:1rem;transition:border-color .3s}.input-field:focus{border-color:var(--primary);outline:none}.button-group{flex-wrap:wrap;gap:1rem;margin:2rem 0;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;flex:1;min-width:120px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:all .3s}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#059669;transform:translateY(-2px);box-shadow:0 4px 8px #10b9814d}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 8px #ef44444d}.btn-reset{background:var(--info);color:#fff}.btn-reset:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 8px #3b82f64d}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:#4338ca;transform:translateY(-2px);box-shadow:0 4px 8px #4f46e54d}.btn:disabled{opacity:.6;cursor:not-allowed}.stats{background:var(--light);border-radius:8px;margin-top:1.5rem;padding:1.5rem}.stats p{margin:.5rem 0;font-size:1.05rem}.todo-input-group{gap:1rem;margin-bottom:1.5rem;display:flex}.todo-input-group .input-field{flex:1}.todo-input-group .btn{flex:0 120px}.progress-bar{background:var(--border);border-radius:10px;width:100%;height:8px;margin-bottom:.5rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--success), #10b981);height:100%;transition:width .3s}.progress-text{color:#6b7280;margin-bottom:1.5rem;font-size:.9rem}.todo-list{space-y:.5rem}.todo-item{background:var(--light);border-radius:8px;align-items:center;gap:1rem;margin-bottom:.75rem;padding:1rem;transition:all .3s;display:flex}.todo-item:hover{background:#e5e7eb;transform:translate(4px)}.todo-item.completed .todo-text{color:#9ca3af;text-decoration:line-through}.todo-checkbox{cursor:pointer;width:20px;height:20px;accent-color:var(--success)}.todo-text{color:var(--dark);flex:1;font-size:1.05rem}.btn-delete{cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:1.2rem;transition:transform .2s}.btn-delete:hover{transform:scale(1.2)}.empty-state{text-align:center;color:#9ca3af;padding:2rem;font-size:1.1rem}.weather-search{gap:1rem;margin-bottom:2rem;display:flex}.weather-search .input-field{flex:1}.weather-search .btn{flex:0 150px}.error-message{color:#991b1b;border-left:4px solid var(--danger);background:#fee2e2;border-radius:8px;margin-bottom:1rem;padding:1rem}.weather-display{background:var(--light);border-radius:12px;margin-bottom:1.5rem;padding:2rem}.weather-main{align-items:center;gap:2rem;margin-bottom:2rem;display:flex}.weather-icon{font-size:4rem}.weather-info h3{color:var(--dark);margin-bottom:.5rem;font-size:1.8rem}.temperature{color:var(--primary);margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.condition{color:#6b7280;font-size:1.2rem}.weather-details{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.detail-item{text-align:center;background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000000d}.detail-label{color:#6b7280;margin-bottom:.5rem;font-size:.9rem;display:block}.detail-value{color:var(--primary);font-size:1.3rem;font-weight:700;display:block}.weather-tips{border-left:4px solid var(--warning);background:#fff;border-radius:8px;padding:1rem}.tips-title{color:var(--dark);margin-bottom:.5rem;font-weight:700}.weather-tips p{color:#6b7280;margin-bottom:.3rem}.suggested-cities{margin-top:1.5rem}.suggestion-label{color:var(--dark);margin-bottom:.75rem;font-weight:500}.city-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.city-btn{border:2px solid var(--border);cursor:pointer;background:#fff;border-radius:20px;padding:.5rem 1rem;font-size:.95rem;font-weight:500;transition:all .3s}.city-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 2px 8px #4f46e533}.app-footer{background:var(--dark);color:#fff;text-align:center;margin-top:auto;padding:1.5rem}.app-footer p{margin:0}@media (width<=768px){.app-header h1{font-size:1.8rem}.app-content{padding:1rem}.welcome-card{padding:1.5rem}.button-group{flex-direction:column}.btn{min-width:auto}.weather-main{text-align:center;flex-direction:column}.card{padding:1.5rem}}@media (width<=480px){.app-nav{flex-direction:column;gap:.75rem}.nav-btn{width:100%}.weather-details{grid-template-columns:1fr}.todo-input-group{flex-direction:column}.todo-input-group .btn{width:100%}}