.hw-page{max-width:1180px;margin:auto;padding:24px 16px 56px;color:#182230}
.hw-hero,.hw-city-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:30px;border:1px solid #dfe7ee;border-radius:24px;background:linear-gradient(135deg,#f5fbff,#eef8ff 60%,#fbfdff)}
.hw-hero h1,.hw-city-head h1{margin:7px 0 8px;font-size:clamp(25px,4vw,42px);line-height:1.35}
.hw-hero p,.hw-city-head p{margin:0;color:#536273}
.hw-hero-icon{font-size:68px;line-height:1}
.hw-city-head span{display:inline-block;padding:5px 10px;border-radius:999px;background:#e8f3ff;color:#1769d2;font-weight:800}
.hw-search,.hw-provinces,.hw-city-group,.hw-card,.hw-related,.hw-seo,.hw-tomorrow{margin-top:18px;padding:18px;border:1px solid #e2e9ef;border-radius:18px;background:#fff;position:relative}
.hw-search>label{display:block;margin-bottom:8px;font-weight:800}
.hw-search-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.hw-search input{min-height:50px;border:1px solid #ccd7e1;border-radius:12px;padding:0 14px;font-size:16px;background:#fff;color:#182230}
.hw-search button{min-width:100px;border:0;border-radius:12px;background:#1769d2;color:#fff;font-weight:800;cursor:pointer}
.hw-search-results{position:absolute;z-index:20;right:18px;left:18px;top:88px;background:#fff;border:1px solid #dce5ed;border-radius:14px;box-shadow:0 14px 35px #0002;overflow:hidden}
.hw-search-results[hidden]{display:none}
.hw-search-results a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid #eef2f5;text-decoration:none;color:#17202b}
.hw-search-results a:last-child{border-bottom:0}
.hw-search-results small{color:#687583}
.hw-province-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.hw-province-grid a{padding:13px;border:1px solid #e4eaf0;border-radius:13px;text-decoration:none;color:#263444;display:grid;gap:4px;transition:.18s}
.hw-province-grid a:hover{transform:translateY(-1px);border-color:#bfd5ea;background:#f8fbff}
.hw-province-grid small{color:#6a7886}
.hw-city-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hw-city-grid a{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:2px;align-items:center;padding:13px;border:1px solid #e4eaf0;border-radius:14px;text-decoration:none;color:#243242;background:#fff}
.hw-city-grid a>span{grid-row:1/3;font-size:24px}
.hw-city-grid a small{color:#768390}
.hw-city-links{display:flex;flex-wrap:wrap;gap:8px}
.hw-city-links a{padding:8px 11px;border-radius:999px;background:#f5f8fa;text-decoration:none;color:#607080}
.hw-bc{display:flex;gap:7px;align-items:center;margin-bottom:12px;font-size:13px;flex-wrap:wrap}
.hw-bc a{text-decoration:none;color:#1769d2}
.hw-current{margin-top:18px;padding:22px;border-radius:24px;background:linear-gradient(135deg,#1769d2,#2c87e9);color:#fff;display:grid;grid-template-columns:280px 1fr;gap:24px;box-shadow:0 10px 28px #1769d21f}
.hw-current-main{display:flex;align-items:center;gap:18px}
.hw-weather-icon{font-size:72px}
.hw-current-main strong{display:block;font-size:62px;line-height:1}
.hw-current-main span{display:block;margin-top:8px;font-weight:800}
.hw-current-main small{display:block;margin-top:8px;opacity:.88}
.hw-current-grid,.hw-tomorrow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.hw-metric{padding:12px;border-radius:16px;background:#ffffff20;display:grid;gap:5px;min-width:0}
.hw-metric>span{font-size:21px}.hw-metric small{opacity:.85}.hw-metric strong{overflow-wrap:anywhere}
.hw-tomorrow{background:linear-gradient(135deg,#fffaf1,#fff 62%);border-color:#f0dfbe}
.hw-tomorrow-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}
.hw-tomorrow-title span{display:inline-block;padding:4px 9px;border-radius:999px;background:#fff0cb;color:#9a6500;font-weight:800}
.hw-tomorrow-title h2{margin:5px 0 4px;font-size:22px}
.hw-tomorrow-title p{margin:0;color:#6b7580}
.hw-tomorrow-icon{font-size:58px}
.hw-tomorrow .hw-metric{background:#fff;border:1px solid #eee2c8}
.hw-tomorrow .hw-metric small{color:#776d5b}
.hw-hourly{display:flex;overflow-x:auto;gap:9px;padding-bottom:4px;scrollbar-width:thin}
.hw-hourly>div{flex:0 0 92px;text-align:center;padding:11px;border:1px solid #e8edf2;border-radius:15px;display:grid;gap:5px;background:#fbfcfd}
.hw-hourly .i,.hw-day .i{font-size:28px}
.hw-hourly small{color:#697786}
.hw-daily{display:grid;gap:4px}
.hw-day{display:grid;grid-template-columns:minmax(220px,1.4fr) 44px 1fr 90px 110px;align-items:center;gap:10px;padding:11px 7px;border-bottom:1px solid #edf1f4}
.hw-day:last-child{border-bottom:0}
.hw-day .temps{display:flex;gap:8px}.hw-day em{font-style:normal;color:#718096}.hw-day small{color:#6b7785}
.hw-related-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hw-related-head h2{margin:0;font-size:20px}.hw-related-head>a{text-decoration:none;color:#1769d2;font-size:13px}
.hw-province-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hw-province-summary>div{padding:14px;border-radius:14px;background:#f7fafc;display:grid;gap:4px}
.hw-province-summary small{color:#6b7785}.hw-province-summary strong{font-size:20px}
.hw-card h2,.hw-provinces h2,.hw-city-group h2,.hw-seo h2{font-size:20px;margin:0 0 14px}
.hw-seo p{line-height:2;color:#526170;margin:8px 0}
.hw-alert{margin:18px 0;padding:15px;border-radius:14px;background:#fff4e5;border:1px solid #f5d19a}

@media(max-width:980px){
 .hw-province-grid{grid-template-columns:repeat(3,1fr)}
 .hw-city-grid{grid-template-columns:repeat(3,1fr)}
 .hw-current{grid-template-columns:1fr}
 .hw-current-grid,.hw-tomorrow-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
 .hw-page{padding:14px 10px 40px}
 .hw-hero,.hw-city-head{padding:20px}
 .hw-hero-icon{display:none}
 .hw-search-row{grid-template-columns:1fr}
 .hw-search button{min-height:46px}
 .hw-search-results{top:140px}
 .hw-province-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hw-city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hw-current{padding:18px}
 .hw-current-main{justify-content:center}
 .hw-current-main>div:last-child{text-align:center}
 .hw-weather-icon{font-size:58px}
 .hw-current-main strong{font-size:54px}
 .hw-current-grid,.hw-tomorrow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hw-day{grid-template-columns:1fr 38px 1fr 72px}
 .hw-day>small:last-child{grid-column:1/-1}
 .hw-tomorrow-title{align-items:flex-start}
 .hw-tomorrow-icon{font-size:48px}
 .hw-province-summary{grid-template-columns:1fr}
}
@media(max-width:430px){
 .hw-city-grid{grid-template-columns:1fr}
 .hw-province-grid{grid-template-columns:1fr 1fr}
 .hw-search,.hw-provinces,.hw-city-group,.hw-card,.hw-related,.hw-seo,.hw-tomorrow{padding:15px}
}


/* v1.2.0 — expandable daily forecast */
.hw-section-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}
.hw-section-head h2{margin:0!important}.hw-section-head p{margin:4px 0 0;color:#687583;font-size:13px}
.hw-day-item{border:1px solid #e6ebf0;border-radius:16px;overflow:hidden;background:#fff;margin-bottom:9px;transition:.18s}
.hw-day-item:last-child{margin-bottom:0}.hw-day-item.is-open{border-color:#bdd4e9;box-shadow:0 8px 24px #17324d12}
.hw-day-toggle{width:100%;display:grid;grid-template-columns:minmax(210px,1.45fr) 50px 1fr 100px 120px 24px;align-items:center;gap:10px;padding:14px 13px;border:0;background:#fff;color:#182230;text-align:right;font:inherit;cursor:pointer}
.hw-day-toggle:hover{background:#f8fbfd}.hw-day-item.is-open .hw-day-toggle{background:#eef8ff}
.hw-day-toggle .i{font-size:30px;text-align:center}.hw-day-toggle .temps{display:flex;gap:9px;align-items:center}.hw-day-toggle .temps b{font-size:23px}.hw-day-toggle .temps em{font-style:normal;color:#74818d}
.hw-day-state{font-weight:700}.hw-day-rain{color:#697786}.hw-chevron{font-size:23px;transition:transform .18s;color:#5b7390}
.hw-day-toggle[aria-expanded="true"] .hw-chevron{transform:rotate(180deg)}
.hw-day-detail{padding:18px;background:#fbfdff;border-top:1px solid #dfe8ef}.hw-day-detail[hidden]{display:none}
.hw-day-night-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hw-period{border:1px solid #e2e7ec;border-radius:16px;background:#fff;padding:16px}.hw-period-day{background:linear-gradient(180deg,#fffdf7,#fff)}.hw-period-night{background:linear-gradient(180deg,#f8fbff,#fff)}
.hw-period-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hw-period-head span{display:inline-block;padding:4px 9px;border-radius:999px;background:#edf5ff;color:#1769d2;font-weight:800;font-size:12px}
.hw-period-night .hw-period-head span{background:#edf0f7;color:#3f5270}.hw-period-head h3{font-size:16px;margin:7px 0 0}
.hw-period-temp{display:flex;align-items:center;gap:6px;font-size:40px;line-height:1}.hw-period-temp strong{font-size:48px}
.hw-period>p{line-height:1.9;color:#4d5c6b;margin:13px 0}
.hw-detail-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #edf0f3;border-radius:13px;overflow:hidden}
.hw-detail-metric{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #edf0f3}
.hw-detail-metric:nth-child(odd){border-left:1px solid #edf0f3}.hw-detail-metric:nth-last-child(-n+2){border-bottom:0}
.hw-detail-metric>span{font-size:22px}.hw-detail-metric>div{display:grid;gap:3px}.hw-detail-metric small{color:#6d7883}.hw-detail-metric strong{font-size:14px}

@media(max-width:900px){
 .hw-day-toggle{grid-template-columns:minmax(190px,1.4fr) 44px 1fr 88px 110px 22px}
}
@media(max-width:700px){
 .hw-day-toggle{grid-template-columns:1fr 40px 78px 22px;grid-template-areas:"date icon temps chev" "state state rain rain";gap:8px 10px}
 .hw-day-date{grid-area:date}.hw-day-toggle .i{grid-area:icon}.hw-day-toggle .temps{grid-area:temps}.hw-chevron{grid-area:chev}
 .hw-day-state{grid-area:state}.hw-day-rain{grid-area:rain;text-align:left}
 .hw-day-night-grid{grid-template-columns:1fr}
 .hw-day-detail{padding:12px}.hw-period{padding:14px}
 .hw-period-temp{font-size:32px}.hw-period-temp strong{font-size:40px}
}
@media(max-width:430px){
 .hw-day-toggle{grid-template-columns:1fr 34px 74px 18px;padding:12px 10px}
 .hw-day-date strong{font-size:13px}.hw-day-state,.hw-day-rain{font-size:12px}
 .hw-detail-metrics{grid-template-columns:1fr}
 .hw-detail-metric:nth-child(odd){border-left:0}.hw-detail-metric:nth-last-child(-n+2){border-bottom:1px solid #edf0f3}.hw-detail-metric:last-child{border-bottom:0}
}


/* v1.5.0 — local SVG weather icons, charts, location */
.hw-svg-icon{width:1em;height:1em;display:inline-block;overflow:visible;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:middle}
.hw-weather-icon .hw-svg-icon{width:78px;height:78px}
.hw-hourly .i .hw-svg-icon,.hw-day-toggle .i .hw-svg-icon,.hw-day .i .hw-svg-icon{width:34px;height:34px}
.hw-period-temp .hw-svg-icon{width:44px;height:44px}
.hw-tomorrow-icon .hw-svg-icon{width:62px;height:62px}

.hw-search-row{grid-template-columns:1fr auto auto}
.hw-locate{background:#eef6ff!important;color:#1769d2!important;border:1px solid #cfe0ef!important;min-width:110px}
.hw-locate:disabled{opacity:.65;cursor:wait}
.hw-locate-status{margin-top:9px;padding:9px 11px;border-radius:10px;background:#f6f9fc;color:#526272;font-size:13px}
.hw-empty-result{padding:12px}

.hw-chart-wrap{position:relative}
.hw-line-chart{width:100%;height:auto;display:block;min-height:230px}
.hw-gridline{stroke:#e8eef3;stroke-width:1}
.hw-axis-text{fill:#73808d;font-size:11px;font-family:inherit}
.hw-temp-line{stroke:#e46b2c;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.hw-temp-dot{fill:#fff;stroke:#e46b2c;stroke-width:3}
.hw-rain-bar{fill:#4b9eea;opacity:.65}
.hw-chart-legend{display:flex;justify-content:center;gap:22px;margin-top:3px;color:#62707e;font-size:13px}
.hw-chart-legend span{display:flex;gap:6px;align-items:center}
.hw-chart-legend i{display:inline-block;width:20px;height:4px;border-radius:999px}
.hw-legend-temp{background:#e46b2c}.hw-legend-rain{background:#4b9eea}

@media(max-width:700px){
 .hw-search-row{grid-template-columns:1fr 1fr}
 .hw-search-row input{grid-column:1/-1}
 .hw-search-row button{min-height:46px}
 .hw-line-chart{min-height:190px}
}


/* v1.6.0 — smart weather, personalization, PWA, dark mode, CWV */
.hw-install-app{margin-top:14px;border:1px solid #b8d3ee;background:#fff;color:#1769d2;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.hw-fav-btn{border:1px solid #d5e1eb;background:#fff;color:#35516d;border-radius:12px;padding:10px 13px;font-weight:800;cursor:pointer;white-space:nowrap}
.hw-fav-btn.is-favorite{background:#fff7d7;border-color:#f1d46f;color:#8a6500}
.hw-smart-alerts{display:grid;gap:8px;margin-top:18px}
.hw-weather-alert{padding:13px 15px;border-radius:14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;border:1px solid transparent}
.hw-weather-alert strong{font-size:14px}.hw-weather-alert span{font-size:13px}
.hw-alert-medium{background:#fff9ea;border-color:#f3df9d;color:#765a08}
.hw-alert-high{background:#fff0ed;border-color:#efc0b8;color:#8d2d1f}
.hw-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hw-insight-grid>div{padding:14px;border:1px solid #e6ecf1;background:#fafcfd;border-radius:15px;display:grid;gap:5px}
.hw-insight-grid>div>span{font-size:22px}
.hw-insight-grid small{color:#687684}.hw-insight-grid strong{font-size:16px}.hw-insight-grid p{margin:0;color:#617080;line-height:1.8;font-size:13px}
.hw-quick-cities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.hw-quick-cities a{padding:12px;border:1px solid #e5ebf0;border-radius:14px;text-decoration:none;color:#263747;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center}
.hw-quick-cities a span{grid-row:1/3}.hw-quick-cities .hw-svg-icon{width:34px;height:34px}.hw-quick-cities small{color:#71808f}
.hw-personal-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hw-personal-cols h2{font-size:18px;margin:0 0 10px}
.hw-personal-link{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f4;text-decoration:none;color:#263747}
.hw-personal-link:last-child{border-bottom:0}.hw-personal-link small,.hw-personal-empty{color:#74808c;font-size:13px}
.hw-personal-empty{margin:0}
.hw-popular,.hw-personal-cities,.hw-insights,.hw-chart-card,.hw-forecast-card,.hw-related,.hw-seo{content-visibility:auto;contain-intrinsic-size:500px}
.hw-chart-wrap:not([data-rendered="1"]) .hw-line-chart{background:linear-gradient(90deg,#f5f7f9 25%,#eef2f5 50%,#f5f7f9 75%);background-size:200% 100%;animation:hwShimmer 1.4s infinite}
@keyframes hwShimmer{to{background-position:-200% 0}}

.hw-night-auto body{background:#0f1720}
.hw-night-auto .hw-page{color:#e8eef5}
.hw-night-auto .hw-search,.hw-night-auto .hw-provinces,.hw-night-auto .hw-city-group,.hw-night-auto .hw-card,.hw-night-auto .hw-related,.hw-night-auto .hw-seo,.hw-night-auto .hw-tomorrow,.hw-night-auto .hw-period,.hw-night-auto .hw-day-item,.hw-night-auto .hw-day-toggle{background:#17212b;color:#e8eef5;border-color:#2a3947}
.hw-night-auto .hw-hero,.hw-night-auto .hw-city-head{background:linear-gradient(135deg,#152331,#1a2a39);border-color:#2a3947}
.hw-night-auto .hw-hero p,.hw-night-auto .hw-city-head p,.hw-night-auto .hw-section-head p,.hw-night-auto .hw-seo p,.hw-night-auto .hw-period>p,.hw-night-auto .hw-insight-grid p,.hw-night-auto .hw-insight-grid small,.hw-night-auto .hw-day-rain,.hw-night-auto .hw-hourly small{color:#aebccc}
.hw-night-auto .hw-search input{background:#101923;color:#edf4fa;border-color:#344555}
.hw-night-auto .hw-search-results{background:#17212b;border-color:#334454}
.hw-night-auto .hw-search-results a{color:#e8eef5;border-color:#273746}
.hw-night-auto .hw-insight-grid>div,.hw-night-auto .hw-province-summary>div,.hw-night-auto .hw-hourly>div,.hw-night-auto .hw-tomorrow .hw-metric{background:#111b24;border-color:#2a3947}
.hw-night-auto .hw-day-item.is-open .hw-day-toggle{background:#1b2d3c}
.hw-night-auto .hw-day-detail{background:#121d27;border-color:#2a3947}
.hw-night-auto .hw-gridline{stroke:#2b3946}.hw-night-auto .hw-axis-text{fill:#a9b7c5}
.hw-night-auto .hw-personal-link,.hw-night-auto .hw-quick-cities a{color:#e8eef5;border-color:#2a3947;background:#131e27}
.hw-night-auto .hw-city-links a{background:#1c2a36;color:#b9c7d4}

@media(max-width:980px){
 .hw-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hw-quick-cities{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .hw-city-head{align-items:flex-start;flex-direction:column}
 .hw-fav-btn{width:100%}
 .hw-insight-grid{grid-template-columns:1fr}
 .hw-personal-cols{grid-template-columns:1fr}
 .hw-quick-cities{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
 .hw-quick-cities{grid-template-columns:1fr}
}