*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #6366f1;--primary-dark: #4f46e5;--secondary-color: #10b981;--text-light: #ffffff;--text-dark: #1f2937;--text-gray: #6b7280;--card-bg: rgba(255, 255, 255, .95);--card-bg-dark: rgba(0, 0, 0, .2);--shadow: 0 8px 32px rgba(0, 0, 0, .1);--shadow-hover: 0 20px 60px rgba(0, 0, 0, .2);--border-radius: 20px;--border-radius-sm: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}.app{min-height:100vh;min-width:100vw;transition:all .8s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column}.app-container{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1rem;display:flex;flex-direction:column}.app.default{background:linear-gradient(135deg,#667eea,#764ba2);color:var(--text-light)}.app.sunny{background:linear-gradient(135deg,#ff9a00,#ff6a00,#ee0979);color:var(--text-light);animation:sunnyGlow 8s ease-in-out infinite alternate}.app.cloudy{background:linear-gradient(135deg,#4a5568,#2d3748);color:var(--text-light)}.app.rainy{background:linear-gradient(135deg,#2c3e50,#3498db);color:var(--text-light);position:relative;overflow:hidden}.app.rainy:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0 45%,#ffffff1a,#fff0 55%);animation:rainFall 1s linear infinite;transform:rotate(15deg);pointer-events:none}.app.snowy{background:linear-gradient(135deg,#e2e8f0,#cbd5e0);color:#2d3748}.app.stormy{background:linear-gradient(135deg,#1a202c,#2d3748);color:var(--text-light);animation:lightning 15s infinite}.app.foggy{background:linear-gradient(135deg,#718096,#a0aec0);color:var(--text-light)}@keyframes sunnyGlow{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes rainFall{0%{transform:translateY(-100%) rotate(15deg)}to{transform:translateY(100%) rotate(15deg)}}@keyframes lightning{0%,85%,to{filter:brightness(1)}86%,89%{filter:brightness(1.5)}87%,88%{filter:brightness(1.2)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.app-header{text-align:center;margin-bottom:2rem;animation:fadeInUp .6s ease-out}.app-header h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;margin-bottom:.5rem;text-shadow:0 4px 8px rgba(0,0,0,.3);color:var(--text-light)}.app.sunny .app-header h1,.app.cloudy .app-header h1,.app.rainy .app-header h1,.app.stormy .app-header h1,.app.foggy .app-header h1{color:var(--text-light)}.app.snowy .app-header h1{color:#2d3748}.app-header p{font-size:clamp(1rem,2vw,1.2rem);opacity:.9;color:var(--text-light)}.app.snowy .app-header p{color:#4a5568}.main-content{display:grid;grid-template-columns:350px 1fr;gap:2rem;align-items:start;flex:1}.sidebar{display:flex;flex-direction:column;gap:1.5rem}.weather-form-container{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.2)}.input-group{display:flex;gap:.5rem;margin-bottom:1rem}.weather-form input{flex:1;padding:1rem 1.5rem;border:none;border-radius:var(--border-radius-sm);background:#ffffffe6;font-size:1rem;transition:var(--transition);outline:none;color:var(--text-dark)}.weather-form input::placeholder{color:#6b7280}.weather-form input:focus{background:#fff;box-shadow:0 0 0 3px #6366f14d}.search-btn,.location-btn{padding:1rem 1.5rem;border:none;border-radius:var(--border-radius-sm);background:var(--primary-color);color:#fff;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}.location-btn{background:var(--secondary-color);width:100%}.search-btn:hover,.location-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.recent-searches{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow)}.recent-searches h3{margin-bottom:1rem;font-size:1.1rem;color:var(--text-dark)}.recent-list{display:flex;flex-direction:column;gap:.5rem}.recent-item{padding:.75rem 1rem;border:none;border-radius:var(--border-radius-sm);background:#6366f11a;color:var(--primary-color);cursor:pointer;transition:var(--transition);text-align:left;font-weight:500}.recent-item:hover{background:var(--primary-color);color:#fff}.unit-toggle{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow)}.unit-toggle label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-dark)}.toggle-buttons{display:flex;gap:.5rem}.toggle-buttons button{flex:1;padding:.75rem;border:2px solid var(--primary-color);border-radius:var(--border-radius-sm);background:transparent;color:var(--primary-color);cursor:pointer;transition:var(--transition);font-weight:600}.toggle-buttons button.active{background:var(--primary-color);color:#fff}.weather-content{min-height:600px;flex:1}.tabs{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}.tab{padding:1rem 2rem;border:none;border-radius:var(--border-radius-sm);background:#fff3;color:var(--text-light);cursor:pointer;transition:var(--transition);font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app.snowy .tab{background:#ffffff80;color:var(--text-dark)}.tab.active{background:var(--card-bg);color:var(--text-dark)}.tab:hover:not(.active){background:#ffffff4d}.app.snowy .tab:hover:not(.active){background:#ffffffb3}.welcome-message{text-align:center;padding:3rem 2rem}.welcome-card{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:3rem;box-shadow:var(--shadow);max-width:600px;margin:0 auto}.welcome-card h2{margin-bottom:1rem;color:var(--text-dark);font-size:2rem}.welcome-card p{color:var(--text-gray);font-size:1.1rem;margin-bottom:2rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.5rem;margin-top:2rem}.feature{text-align:center}.feature span{font-size:2rem;display:block;margin-bottom:.5rem}.feature p{color:var(--text-dark);font-weight:500;margin:0}.weather-display{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow);margin-bottom:2rem;animation:fadeInUp .6s ease-out}.weather-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:2rem}.location h2{font-size:clamp(1.5rem,3vw,2.5rem);margin-bottom:.5rem;color:var(--text-dark)}.weather-desc{font-size:1.2rem;color:var(--text-gray);text-transform:capitalize}.temperature-section{display:flex;align-items:center;gap:1rem}.current-temp{display:flex;align-items:baseline}.temp{font-size:clamp(3rem,6vw,5rem);font-weight:300;color:var(--text-dark)}.temp-unit{font-size:2rem;color:var(--text-gray)}.weather-icon{width:clamp(80px,15vw,120px);height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));animation:float 3s ease-in-out infinite}.weather-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.detail-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff80;border-radius:var(--border-radius-sm);transition:var(--transition)}.detail-card:hover{background:#fffc;transform:translateY(-2px)}.detail-icon{font-size:1.5rem}.detail-info{display:flex;flex-direction:column}.detail-label{font-size:.9rem;color:var(--text-gray)}.detail-value{font-weight:600;color:var(--text-dark)}.forecast-display{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow)}.forecast-display h3{color:var(--text-dark);margin-bottom:1.5rem;font-size:1.5rem}.forecast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.forecast-card{background:#ffffff80;border-radius:var(--border-radius-sm);padding:1.5rem;text-align:center;transition:var(--transition)}.forecast-card:hover{background:#fffc;transform:translateY(-5px)}.forecast-date{font-weight:600;margin-bottom:1rem;color:var(--text-dark)}.forecast-icon{width:60px;height:60px;margin:.5rem 0}.forecast-temp{font-size:1.5rem;font-weight:600;margin:.5rem 0;color:var(--text-dark)}.forecast-desc{color:var(--text-gray);margin-bottom:1rem;text-transform:capitalize}.forecast-details{display:flex;justify-content:space-around;font-size:.9rem;color:var(--text-gray)}.air-quality{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow);margin-bottom:2rem}.air-quality h3{color:var(--text-dark);margin-bottom:1.5rem;font-size:1.5rem}.aqi-card{border-left:4px solid;padding:1.5rem;background:#ffffff80;border-radius:var(--border-radius-sm)}.aqi-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.aqi-level{font-size:1.5rem;font-weight:600}.aqi-value{font-weight:600;color:var(--text-gray)}.aqi-desc{margin-bottom:1.5rem;color:var(--text-gray)}.pollutants{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.pollutant{display:flex;justify-content:space-between;padding:.5rem;background:#ffffff4d;border-radius:8px;color:var(--text-dark)}.pollutant span:first-child{font-weight:600}.weather-charts{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow)}.weather-charts h3{color:var(--text-dark);margin-bottom:1.5rem;font-size:1.5rem}.charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}.chart-card{background:#ffffff80;border-radius:var(--border-radius-sm);padding:1.5rem}.chart-card h4{color:var(--text-dark);margin-bottom:1rem;font-size:1.2rem}.temp-bars{display:flex;justify-content:space-between;align-items:end;height:200px;margin-top:2rem}.temp-bar{display:flex;flex-direction:column;align-items:center;flex:1}.bar-label{font-size:.9rem;color:var(--text-dark);margin-bottom:.5rem;font-weight:500}.bar-container{height:150px;width:30px;background:#ffffff80;border-radius:15px;position:relative;overflow:hidden;margin:.5rem 0}.temp-fill{position:absolute;bottom:0;left:0;right:0;border-radius:15px;transition:var(--transition)}.temp-value{font-size:.9rem;color:var(--text-dark);font-weight:600;margin-top:.5rem}.detail-grid{display:grid;gap:1rem}.detail-item{display:flex;justify-content:space-between;padding:1rem;background:#ffffff4d;border-radius:var(--border-radius-sm);color:var(--text-dark)}.weather-map{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow)}.weather-map h3{color:var(--text-dark);margin-bottom:1.5rem;font-size:1.5rem}.map-container{margin-top:1rem}.map-actions{margin-top:1rem;text-align:center}.map-link{display:inline-block;padding:.75rem 1.5rem;background:var(--primary-color);color:#fff;text-decoration:none;border-radius:var(--border-radius-sm);transition:var(--transition);font-weight:600}.map-link:hover{background:var(--primary-dark);transform:translateY(-2px)}.loading-container{display:flex;justify-content:center;align-items:center;min-height:400px}.weather-spinner{text-align:center}.spinner-circle{width:60px;height:60px;border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.weather-spinner p{color:var(--text-light);font-size:1.1rem}.app.snowy .weather-spinner p{color:var(--text-dark)}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#dc2626;padding:1.5rem;border-radius:var(--border-radius);text-align:center;margin-bottom:2rem;font-weight:600}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1024px){.main-content{grid-template-columns:300px 1fr;gap:1.5rem}.charts-grid{grid-template-columns:1fr}}@media (max-width: 768px){.app-container{padding:.5rem}.main-content{grid-template-columns:1fr;gap:1rem}.sidebar{order:2}.weather-content{order:1}.weather-main{flex-direction:column;text-align:center}.temperature-section,.tabs{justify-content:center}.tab{padding:.75rem 1rem;font-size:.9rem}.forecast-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.weather-details{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.features-grid{grid-template-columns:repeat(2,1fr)}.welcome-card{padding:2rem 1.5rem}}@media (max-width: 480px){.app{min-height:100vh;min-width:100vw}.app-header h1{font-size:2rem}.weather-form-container,.recent-searches,.unit-toggle{padding:1rem}.input-group,.tabs{flex-direction:column}.tab{text-align:center}.forecast-grid,.features-grid,.pollutants{grid-template-columns:1fr}.weather-display,.forecast-display,.air-quality,.weather-charts,.weather-map{padding:1.5rem}.charts-grid{grid-template-columns:1fr;gap:1rem}}@media (min-width: 1920px){.app-container{max-width:1600px;padding:2rem}.main-content{grid-template-columns:400px 1fr;gap:3rem}}@media (min-width: 2560px){.app-container{max-width:2000px}}@media print{.sidebar,.tabs,.map-actions{display:none}.main-content{grid-template-columns:1fr}.app{background:#fff!important;color:#000!important}.weather-display,.forecast-display{background:#fff;box-shadow:none;border:1px solid #ccc}}.text-contrast-light{color:var(--text-light)!important}.text-contrast-dark{color:var(--text-dark)!important}.weather-display,.forecast-display,.air-quality,.weather-charts,.weather-map,.weather-form-container,.recent-searches,.unit-toggle,.welcome-card,.weather-display h2,.weather-display h3,.forecast-display h3,.air-quality h3,.weather-charts h3,.weather-map h3{color:var(--text-dark)}.app.snowy .weather-display,.app.snowy .forecast-display,.app.snowy .air-quality,.app.snowy .weather-charts,.app.snowy .weather-map,.app.snowy .weather-form-container,.app.snowy .recent-searches,.app.snowy .unit-toggle,.app.snowy .welcome-card,.app.snowy .weather-display h2,.app.snowy .weather-display h3,.app.snowy .forecast-display h3,.app.snowy .air-quality h3,.app.snowy .weather-charts h3,.app.snowy .weather-map h3,.app.snowy .recent-searches h3,.app.snowy .unit-toggle label{color:#2d3748}