*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#F7F8FA;color:#1F2937;line-height:1.5}header{background:#fff;padding:1rem 0;box-shadow:0 1px 3px rgba(0,0,0,.05);position:sticky;top:0;z-index:100}.header-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#1F2937}.logo-box{width:40px;height:40px;background:linear-gradient(135deg,#EF4444,#DC2626);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.logo-text{font-size:1.25rem;font-weight:700}nav{display:flex;gap:2rem}nav a{text-decoration:none;color:#6B7280;font-weight:500;font-size:.9375rem;transition:color .2s}nav a:hover{color:#1F2937}main{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.city-header{background:#fff;padding:2rem;border-radius:16px;margin-bottom:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05);display:none}.city-header.show{display:block}.city-header h1{font-size:2.5rem;font-weight:800;color:#1F2937;margin-bottom:.75rem}.breadcrumb{font-size:.875rem;color:#6B7280;margin-bottom:1rem}.breadcrumb a{color:#3B82F6;text-decoration:none}.city-description{color:#4B5563;line-height:1.7;margin-bottom:1rem}.seo-content{background:#fff;padding:2.5rem;border-radius:16px;margin-top:2rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}.seo-content h2{font-size:1.75rem;font-weight:700;color:#1F2937;margin-bottom:1.25rem;margin-top:2rem}.seo-content h2:first-child{margin-top:0}.seo-content h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:.875rem;margin-top:1.5rem}.seo-content p{color:#4B5563;line-height:1.7;margin-bottom:1rem}.seo-content ul{margin-left:1.5rem;margin-bottom:1rem}.seo-content li{color:#4B5563;margin-bottom:.5rem;line-height:1.7}.search-section{background:#fff;padding:1.25rem 1.5rem;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:1.5rem;display:flex;gap:1rem;align-items:center}.search-input-wrapper{flex:1;position:relative}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#EF4444;font-size:1.125rem}.search-input{width:100%;padding:.875rem 1rem .875rem 3rem;border:1px solid #E5E7EB;border-radius:12px;font-size:.9375rem;font-weight:500;background:#F9FAFB;transition:all .2s}.search-input:focus{outline:0;border-color:#EF4444;background:#fff}.autocomplete-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1);max-height:300px;overflow-y:auto;z-index:1000;display:none}.autocomplete-dropdown.show{display:block}.autocomplete-item{padding:.875rem 1rem;cursor:pointer;transition:background .2s;border-bottom:1px solid #F3F4F6}.autocomplete-item:last-child{border-bottom:none}.autocomplete-item:hover{background:#F9FAFB}.autocomplete-item-name{font-weight:600;font-size:.9375rem;color:#1F2937}.autocomplete-item-details{font-size:.8125rem;color:#9CA3AF;margin-top:.125rem}.timeframe-select{padding:.875rem 1.25rem;border:1px solid #E5E7EB;border-radius:12px;font-size:.9375rem;font-weight:600;background:#fff;cursor:pointer;color:#1F2937;min-width:160px}.hero-card{background:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);border-radius:24px;padding:2.5rem;color:#fff;margin-bottom:1.5rem;box-shadow:0 10px 40px rgba(139,92,246,.3);position:relative;overflow:hidden}.hero-card::before{content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:rgba(255,255,255,.1);border-radius:50%}.hero-content{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center}.hero-left h2{font-size:1.75rem;font-weight:700;margin-bottom:.25rem}.hero-date{font-size:.9375rem;opacity:.9;margin-bottom:1.5rem}.hero-temp{font-size:4rem;font-weight:300;line-height:1;margin-bottom:.5rem}.hero-condition{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.hero-feels{font-size:.9375rem;opacity:.9}.hero-right{text-align:right}.hero-icon{font-size:6rem;margin-bottom:.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.1))}.hero-uv{font-size:.9375rem;opacity:.9}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}.stat-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}.stat-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.stat-icon.blue{background:#DBEAFE;color:#3B82F6}.stat-icon.green{background:#D1FAE5;color:#10B981}.stat-icon.cyan{background:#CFFAFE;color:#06B6D4}.stat-icon.purple{background:#E9D5FF;color:#A855F7}.stat-title{font-size:.9375rem;font-weight:600;color:#6B7280}.stat-value{font-size:2rem;font-weight:700;color:#1F2937;line-height:1;margin-bottom:.375rem}.stat-label{font-size:.875rem;color:#9CA3AF}.forecast-title{font-size:1.25rem;font-weight:700;color:#1F2937;margin-bottom:1.25rem}.forecast-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem;margin-bottom:1.5rem}.day-card{background:#fff;border-radius:16px;padding:1.25rem .875rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:all .2s}.day-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.day-name{font-size:.875rem;font-weight:600;color:#6B7280;margin-bottom:.75rem}.day-icon{font-size:2.5rem;margin:.75rem 0}.day-temp-range{font-size:1.125rem;font-weight:700;color:#1F2937;margin-bottom:.25rem}.day-condition{font-size:.8125rem;color:#9CA3AF}.hourly-forecast{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:1.5rem}.hourly-title{font-size:1.125rem;font-weight:700;color:#1F2937;margin-bottom:1.25rem}.hourly-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem}.hour-card{flex:0 0 90px;text-align:center;padding:1rem .75rem;background:#F9FAFB;border-radius:12px;transition:all .2s}.hour-card:hover{background:#F3F4F6}.hour-time{font-size:.875rem;font-weight:600;color:#6B7280;margin-bottom:.75rem}.hour-icon{font-size:2rem;margin:.5rem 0}.hour-temp{font-size:1.125rem;font-weight:700;color:#1F2937}.bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:1.5rem}.info-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}.info-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}.info-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.info-card-icon.blue{background:#DBEAFE;color:#3B82F6}.info-card-icon.orange{background:#FED7AA;color:#F97316}.info-card-icon.green{background:#D1FAE5;color:#10B981}.info-card-title{font-size:1rem;font-weight:700;color:#1F2937}.info-card-subtitle{font-size:.8125rem;color:#9CA3AF}.precipitation-value{font-size:3rem;font-weight:700;color:#1F2937;line-height:1;margin-bottom:.5rem}.precipitation-label{font-size:.9375rem;color:#6B7280;margin-bottom:1.25rem}.precipitation-details{display:flex;flex-direction:column;gap:.625rem}.precipitation-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.precipitation-time{font-size:.875rem;color:#6B7280}.precipitation-percent{font-size:.875rem;font-weight:600;color:#1F2937}.sun-times{display:flex;flex-direction:column;gap:1rem}.sun-time-row{display:flex;justify-content:space-between;align-items:center}.sun-time-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#6B7280}.sun-time-value{font-size:1.125rem;font-weight:700;color:#1F2937}.aqi-value{font-size:3rem;font-weight:700;line-height:1;margin-bottom:.5rem}.aqi-label{font-size:.9375rem;margin-bottom:1.25rem}.aqi-good{color:#10B981}.aqi-moderate{color:#F59E0B}.aqi-pollutants{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.pollutant{text-align:center}.pollutant-name{font-size:.75rem;color:#9CA3AF;margin-bottom:.375rem}.pollutant-value{font-size:1.125rem;font-weight:700;color:#1F2937}.popular-cities{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:2rem}.popular-title{font-size:1.125rem;font-weight:700;color:#1F2937;margin-bottom:1.25rem}.cities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.city-card{padding:1rem;background:#F9FAFB;border-radius:12px;cursor:pointer;transition:all .2s}.city-card:hover{background:#F3F4F6;transform:translateY(-2px)}.city-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.city-name{font-size:1rem;font-weight:700;color:#1F2937}.city-temp{font-size:1.5rem;font-weight:700;color:#1F2937}.city-condition{font-size:.8125rem;color:#9CA3AF;display:flex;align-items:center;gap:.375rem}footer{background:#fff;padding:2.5rem 0;border-top:1px solid #E5E7EB}.footer-container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2rem}.footer-brand{display:flex;gap:.75rem}.footer-brand-text p{font-size:.875rem;color:#6B7280}.footer-section h4{font-size:.875rem;font-weight:700;color:#1F2937;margin-bottom:1rem}.footer-links{display:flex;flex-direction:column;gap:.75rem}.footer-links a{text-decoration:none;color:#6B7280;font-size:.875rem;transition:color .2s}.footer-links a:hover{color:#1F2937}.footer-bottom{padding-top:2rem;border-top:1px solid #E5E7EB;text-align:center}.footer-copyright{font-size:.875rem;color:#9CA3AF}.loading{text-align:center;padding:4rem 0}.spinner{width:48px;height:48px;border:4px solid #F3F4F6;border-top-color:#EF4444;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.forecast-days{grid-template-columns:repeat(4,1fr)}.bottom-grid{grid-template-columns:1fr}.cities-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){nav{display:none}.search-section{flex-direction:column;align-items:stretch}.timeframe-select{width:100%}.hero-content{flex-direction:column;text-align:center}.hero-right{text-align:center;margin-top:2rem}.stats-grid{grid-template-columns:1fr}.forecast-days{grid-template-columns:repeat(2,1fr)}.cities-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.city-header h1{font-size:2rem}}.main-title{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 1rem;text-align:center}.main-title h1{font-size:2.5rem;color:#1F2937;margin:0;font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.main-title h1{font-size:1.75rem}}