/* HWS V60 — reference-style visual system applied consistently across every existing section.
   Presentation-only: no forecast values, routes, API calls, icon definitions or chart data are changed. */
:root{
  color-scheme:dark;
  --hws-canvas:#031b31; --hws-canvas-2:#052944; --hws-surface:#062b49;
  --hws-surface-2:#073b60; --hws-ink:#f4f9ff; --hws-ink-soft:#d0e3ef;
  --hws-ink-muted:#a9c5d6; --hws-accent:#35d6f5; --hws-stroke:rgba(53,214,245,.27);
}
html,body{min-height:100%;background:var(--hws-canvas)!important;color:var(--hws-ink)!important}
body{background:linear-gradient(180deg,#062b49 0%,#041f38 42%,#031b31 100%) fixed!important;color:var(--hws-ink)!important}
body,body *{scrollbar-color:#176b91 #041a2d}
/* One common site frame and compact navy navigation, inspired by the supplied reference. */
.site-header,header,.hws-header,#header{background:linear-gradient(105deg,#052642 0%,#073b60 58%,#07506c 100%)!important;color:var(--hws-ink)!important;border-color:var(--hws-stroke)!important;box-shadow:0 3px 18px rgba(0,0,0,.17)!important}
.header-row{min-height:72px;gap:14px}
.brand,.brand:hover,.brand-name,.brand-tag{color:var(--hws-ink)!important}
.brand-name{font-size:clamp(1.12rem,2.7vw,1.55rem)!important;letter-spacing:.01em}
.brand-tag{color:#c4deec!important}
.nav,#nav,.site-nav{background:rgba(2,20,37,.97)!important;border-bottom:1px solid var(--hws-stroke)!important}
.nav ul{gap:5px 7px!important;padding-top:7px!important;padding-bottom:7px!important}
.nav a{color:#d9eff9!important;border:1px solid transparent!important;border-radius:11px!important;padding:9px 11px!important;border-bottom-width:1px!important;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{background:linear-gradient(115deg,#087ab6,#075b8b)!important;color:#fff!important;border-color:rgba(53,214,245,.55)!important}
.menu-btn{border:1px solid var(--hws-stroke)!important;border-radius:12px!important;color:#f4fbff!important;background:#073654!important}
/* All routes use the same uninterrupted canvas; keep the site’s actual data cards distinct. */
main,#view,main#view,.wrap,.page-content,.content,.site-content{color:var(--hws-ink)!important}
main#view{width:100%!important;max-width:1120px!important;margin-inline:auto!important;padding:clamp(12px,2.6vw,28px)!important}
main#view>section,main>section{background:transparent!important;color:var(--hws-ink)!important;border:0!important;border-radius:0!important;box-shadow:none!important}
main#view>section.active,main>section.active{display:block}
.pageHead,.hero,.homeHero,.sectionHead,.section-header,.page-header{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--hws-ink)!important;padding:5px 2px 14px!important;margin:0 0 10px!important}
main :is(h1,h2,h3,h4,h5,h6,.page-title,.section-title,.title,.heading){color:#f5fbff!important;text-shadow:0 1px 7px rgba(0,0,0,.15)!important}
main :is(h1,.page-title){font-size:clamp(1.45rem,4.2vw,2.15rem)!important;line-height:1.16!important;letter-spacing:.005em}
main :is(.pageHead p,.hero p,.homeHero p,.subtitle,.description,.help-text,.note){color:var(--hws-ink-soft)!important;line-height:1.55}
main :is(p,li,label,small,.muted,.subtitle,.description,.note,.help-text,.meta,.timestamp,.caption,.sourceLine,.modelStatus){color:var(--hws-ink-soft)}
main a{color:#68def7!important}main a:hover{color:#d1f8ff!important}
main hr,main .divider,main .section-divider{border-color:var(--hws-stroke)!important}
/* Screenshot-like pills, tabs and filters across every tool. */
main :is(button,.button,.btn,input[type=button],input[type=submit],.simpleTabs button,.forecastFilter,.filter-btn,.tab){border-color:var(--hws-stroke)!important}
main :is(.simpleTabs,.forecastFilters,.filter-row,.tabs){gap:8px!important}
main :is(.simpleTabs button,.forecastFilter,.tab,.filter-btn){background:#062f50!important;color:#e8f7ff!important;border-radius:12px!important}
main :is(.simpleTabs button.active,.forecastFilter.active,.tab.active,.filter-btn.active,[aria-pressed=true]){background:linear-gradient(115deg,#0782bd,#08608f)!important;color:#fff!important;box-shadow:0 0 0 1px rgba(53,214,245,.22)!important}
main :is(input,select,textarea){background:#eef8fc!important;color:#18384b!important;border:1px solid #8db9cc!important;border-radius:11px!important}
main :is(input,select,textarea)::placeholder{color:#58788b!important}
main :focus-visible{outline:2px solid var(--hws-accent)!important;outline-offset:3px!important}
/* Outer wrappers are flat; meaningful forecast tiles and individual data units remain readable. */
main :is(.panel,.section,.widget-wrap,.tool-section,.section-wrapper,.content-section,.dashboard-section,.homeGuide,.hwsMenuFill,.hwsForecastKey,.coverageStrip,.homeMore,.homeMoreGrid){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
main :is(.card,.tile,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card,.hwsHomeCity,.homePrimaryCard,.hwsExtraCard,.hwsModelTableWrap){color:#f4faff!important;background:rgba(4,39,65,.42)!important;border:1px solid rgba(53,214,245,.22)!important;box-shadow:none!important}
main :is(.forecastPane,.dayCard,.climateCard,.areaCard,.trend15Card,.article-card,.news-card){border-radius:15px!important}
main :is(.card,.tile,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card) :is(h1,h2,h3,h4,b,strong){color:#f5fbff!important}
main :is(.card,.tile,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card) :is(p,small,.muted,.meta,.description){color:#c7deeb!important}
/* Confidence labels and badges must not fade into either dark backgrounds or pale tiles. */
main .hwsConfidence{color:#f4fbff!important;opacity:1!important;font-weight:700}
main .hwsConfidence span,main .hwsConfidence b{color:#f4fbff!important;opacity:1!important}
main .hwsConfidenceDot{box-shadow:0 0 0 3px rgba(53,214,245,.16)}
main :is(.badge,.pill,.chip,.tag,.status,.category){color:#f1faff!important;border-color:var(--hws-stroke)!important}
/* Preserve all native HWS maps, SVG weather symbols, arrow layers and chart series. */
#fivedaytv,#trend15,#forecast,#meteograms,#marine,#alarm,#overview,#tempRank,#climate,#archive,#bulletins,#news,#about{background:transparent!important;color:var(--hws-ink)!important}
#fivedaytv .hwsFiveTVMapWrap,#fivedaytv .hwsFiveTVMap,#fivedaytv .hwsFiveTVMapCanvas{background:#06436a!important}
#fivedaytv .hwsFiveTVPoint .tvIcon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.78))}
#fivedaytv .hwsFiveTVArrowLabel{color:#fff!important}
#trend15 .trend15Card,#trend15 .trendCityCard,#trend15 .trendChartScroll{background:transparent!important;box-shadow:none!important}
#trend15 svg text{fill:#eef9ff!important}
#trend15 svg .grid{stroke:rgba(220,242,252,.24)!important}
#trend15 svg .zero{stroke:rgba(245,251,255,.78)!important}
#news .article-content,#news article p,#bulletins article p,#archive p{color:#d5e8f2!important}
#news .article-card,#bulletins .article-card,#archive .article-card{background:rgba(4,39,65,.42)!important}
/* The home page uses the same compact dashboard tiles as the reference. */
.homePrimaryGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.homePrimaryCard{display:flex!important;align-items:center!important;gap:12px!important;text-align:left!important;padding:14px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(7,61,96,.8),rgba(3,32,54,.86))!important;color:#f4faff!important}
.homePrimaryCard b,.homePrimaryCard small{color:#f4faff!important}.homePrimaryCard small{opacity:.86}
.homePrimaryIcon{color:#55ddfa!important;background:rgba(23,133,178,.17)!important;border:1px solid rgba(53,214,245,.24)!important;border-radius:12px!important}
.homeSecondaryLinks,.hwsDashboardQuickLinks{display:flex!important;gap:8px!important;flex-wrap:wrap!important;border-color:var(--hws-stroke)!important}
.homeSecondaryLinks button,.hwsDashboardQuickLinks button{background:#062f50!important;color:#eafaff!important;border:1px solid var(--hws-stroke)!important;border-radius:999px!important}
.hwsHomeToday{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 0!important}
.hwsHomeTodayHead b,.hwsHomeCityName,.hwsHomeCityTemp{color:#f4faff!important}
.hwsHomeTodayHead small,.hwsHomeCityMeta,.hwsHomeTodayLoading{color:#c2dbe9!important}
.hwsHomeCity{background:rgba(4,39,65,.42)!important;border-color:rgba(53,214,245,.22)!important}
/* Sources, footer and tables share the same accessible dark palette. */
main table{border-color:var(--hws-stroke)!important;color:#eaf6fc!important}
main th{background:rgba(7,67,103,.72)!important;color:#f5fbff!important}
main td{color:#d9edf7!important;border-color:rgba(80,190,226,.2)!important}
.site-footer,footer,#footer{background:#02172a!important;color:#d0e3ee!important;border-top:1px solid var(--hws-stroke)!important}
.site-footer p,footer p{color:#c7dce8!important}.site-footer a,footer a{color:#72def7!important}
@media(max-width:700px){
 main#view{padding:12px!important}
 .header-row{min-height:62px;padding-top:10px;padding-bottom:10px}
 .brand-tag{font-size:.72rem!important}
 .homePrimaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .homePrimaryCard{padding:10px!important;gap:8px!important}
 .homePrimaryIcon{flex:0 0 36px!important;width:36px!important;height:36px!important}
 .hwsDashboardQuickLinks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .hwsDashboardQuickLinks button{font-size:.74rem!important;padding:8px 5px!important}
}
@media(max-width:420px){.homePrimaryGrid{grid-template-columns:minmax(0,1fr)!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* HWS V65 — structural rebuild from the supplied mobile reference. Keep application logic/data untouched. */
:root{--hws-bg:#03233d;--hws-ink:#f7fbff;--hws-ink-soft:#d6e9f4;--hws-accent:#28d5f4;--hws-stroke:rgba(40,213,244,.36)}
html{background:#03233d!important;scroll-behavior:auto!important}
body{background:linear-gradient(180deg,#052b49 0%,#03223b 42%,#062b45 100%)!important;color:#f7fbff!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important}
/* Remove motion-heavy presentation effects that can make older phones feel slow. */
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;filter:none}
main#view{max-width:100%!important;padding:0 clamp(12px,3vw,28px)!important}
main#view>section{padding:14px 0 20px!important;margin:0!important;border-bottom:1px solid rgba(40,213,244,.32)!important}
main :is(h1,h2,h3,h4,h5,h6,b,strong,th,.title,.page-title,.section-title){color:#fff!important;opacity:1!important;text-shadow:none!important}
main :is(p,li,label,small,.muted,.subtitle,.description,.note,.help-text,.meta,.timestamp,.caption,.sourceLine,.modelStatus,figcaption){color:#d8eaf4!important;opacity:1!important}
main :is(.status,.badge,.pill,.chip,.tag){color:#fff!important;opacity:1!important}
main a{color:#73e5ff!important}
/* Stronger text contrast even when older component styles set opacity or grey colors. */
main :is(.dayName,.desc,.metric,.cityName,.cityRegion,.forecastFilter,.trend15Status,.trend15Summary,.trendCityStatus,.trendCitySummary,.hwsFiveTVLegend,.hwsFiveTVTitle){color:#f7fbff!important;opacity:1!important}
/* Five-day forecast: flat page, full-width map stage, compact horizontal date strip. */
#fivedaytv .hero{padding:5px 0 10px!important;margin:0!important}
#fivedaytv .hero h1{font-size:clamp(1.45rem,4.8vw,2.25rem)!important;line-height:1.12!important;letter-spacing:.005em!important}
#fivedaytv .hero p{font-size:clamp(.86rem,2.4vw,1rem)!important;line-height:1.45!important}
#hwsFiveTVTabs{display:flex!important;gap:8px!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;padding:8px 0 13px!important;scrollbar-width:thin!important}
#hwsFiveTVTabs button{flex:0 0 auto!important;min-height:42px!important;padding:9px 15px!important;border:1px solid rgba(40,213,244,.4)!important;border-radius:13px!important;background:#063450!important;color:#e9f9ff!important;font-weight:750!important}
#hwsFiveTVTabs button.active,[aria-pressed="true"]{background:linear-gradient(110deg,#087bb7,#0b9bc2)!important;color:#fff!important}
#fivedaytv .hwsFiveTVTitle{font-size:clamp(1.25rem,4.1vw,2rem)!important;line-height:1.2!important;margin:8px 0 4px!important;color:#f8fcff!important}
#fivedaytv .hwsFiveTVMapWrap{position:relative!important;width:100%!important;max-width:none!important;margin:0!important;overflow:hidden!important;background:#052c49!important;border:1px solid rgba(40,213,244,.2)!important;border-radius:0!important;box-shadow:none!important;isolation:isolate}
#fivedaytv .hwsFiveTVMapImg{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important}
#fivedaytv .hwsFiveTVOverlay,#fivedaytv .hwsFiveTVWinds{position:absolute!important;inset:0!important;pointer-events:none!important}
#fivedaytv .hwsFiveTVPoint{position:absolute!important;z-index:3!important;max-width:17%!important;overflow:visible!important;transform:translate(-50%,-50%)!important;translate:0 0!important}
#fivedaytv .hwsFiveTVPoint .tvIcon{max-width:clamp(17px,3.4vw,31px)!important;max-height:clamp(17px,3.4vw,31px)!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.95))!important}
#fivedaytv .hwsFiveTVTemps,#fivedaytv .hwsFiveTVPointName,#fivedaytv .hwsFiveTVArrowLabel{color:#fff!important;background:rgba(0,16,29,.88)!important;border:1px solid rgba(220,246,255,.32)!important;border-radius:7px!important;padding:2px 5px!important;font-size:clamp(10px,2.1vw,14px)!important;font-weight:800!important;line-height:1.15!important;text-shadow:0 1px 2px #00101d!important;white-space:nowrap!important;box-shadow:0 1px 4px rgba(0,0,0,.35)!important}
#fivedaytv .hwsFiveTVArrowLabel{font-size:clamp(10px,1.9vw,13px)!important}
#fivedaytv .hwsFiveTVLegend{display:flex!important;flex-wrap:wrap!important;gap:8px 14px!important;padding:10px 2px!important;font-size:clamp(11px,2.4vw,14px)!important;color:#d9edf7!important}
/* 15-day trend: same canvas as the five-day forecast, no white panels, visible charts. */
#trend15 .pageHead{padding:10px 0 12px!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#trend15 .pageHead h1{font-size:clamp(1.4rem,4.6vw,2rem)!important;color:#fff!important}
#trend15 .pageHead p{font-size:clamp(.84rem,2.3vw,.98rem)!important;color:#d8eaf4!important}
#trend15 .trend15Top{margin:0 0 12px!important}
#trend15 .trend15Status{background:#073b5b!important;border:1px solid rgba(40,213,244,.35)!important;color:#eafaff!important;box-shadow:none!important;border-radius:11px!important}
#trend15 .trend15Grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
#trend15 .trend15Card,#trend15 .trendCityCard{min-width:0!important;padding:14px!important;border:1px solid rgba(40,213,244,.22)!important;border-radius:15px!important;background:rgba(3,36,61,.38)!important;box-shadow:none!important}
#trend15 .trend15Card h2,#trend15 .trendCityCard h3{font-size:clamp(1.05rem,3.2vw,1.3rem)!important;line-height:1.25!important;color:#f6fcff!important}
#trend15 .trend15Card p,#trend15 .trendCityCard p{font-size:clamp(.78rem,2.2vw,.9rem)!important;line-height:1.5!important;color:#d1e5ef!important}
#trend15 .trendChartScroll{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;border:1px solid rgba(40,213,244,.22)!important;border-radius:10px!important;background:#052944!important;box-shadow:none!important}
#trend15 .trendChartScroll svg{display:block!important;width:100%!important;min-width:620px!important;height:auto!important;background:transparent!important}
#trend15 .trendChartScroll svg>rect:first-child{fill:#052944!important}
#trend15 .trendChartScroll svg text{fill:#f4fbff!important;stroke:none!important;font-weight:650!important}
#trend15 .trendChartScroll svg .grid,#trend15 .trendChartScroll svg .tick line{stroke:rgba(220,244,255,.25)!important}
#trend15 .trend15Summary,#trend15 .trendCitySummary{background:rgba(5,53,81,.72)!important;border:1px solid rgba(40,213,244,.2)!important;color:#e6f5fc!important;border-radius:10px!important;font-size:clamp(.78rem,2.2vw,.9rem)!important;line-height:1.5!important}
#trend15 .trend15Source{background:transparent!important;border:1px solid rgba(40,213,244,.2)!important;color:#cfe4ef!important;border-radius:12px!important}
/* Consistent, legible weather cards and controls across the rest of the site. */
main :is(.day,.hwsHomeCity,.homePrimaryCard,.trendCityCard,.marineCard,.publishedItem,.article-card,.news-card,.climateCard,.areaCard,.forecastPane,.meteogram-card){background:rgba(4,42,68,.72)!important;border:1px solid rgba(40,213,244,.25)!important;box-shadow:none!important;color:#f6fbff!important}
main :is(.homePrimaryCard,.homeSecondaryLinks button,.hwsDashboardQuickLinks button,.refreshForecast,.trend15Refresh){min-height:42px!important;background:#063653!important;color:#f5fbff!important;border:1px solid rgba(40,213,244,.36)!important;box-shadow:none!important}
main :is(.homePrimaryCard b,.homePrimaryCard small,.hwsHomeCityName,.hwsHomeCityTemp,.hwsHomeCityMeta){color:#f5fbff!important;opacity:1!important}
main :is(.day,.forecastPane,.trend15Card,.trendCityCard) :is(.metric,.value,.temp,.temperature){color:#fff!important;font-weight:750!important}
main table,main th,main td{background:transparent!important;color:#edf8ff!important;border-color:rgba(190,229,244,.24)!important}
@media(max-width:600px){main#view{padding:0 12px!important}#fivedaytv .hwsFiveTVMapWrap{margin-inline:-2px!important;width:calc(100% + 4px)!important}#fivedaytv .hwsFiveTVPoint{max-width:20%!important}#trend15 .trend15Card,#trend15 .trendCityCard{padding:11px!important}#trend15 .trendChartScroll svg{min-width:620px!important}.homePrimaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.homePrimaryCard{min-width:0!important}.homePrimaryCard small{line-height:1.35!important}}
@media(max-width:370px){.homePrimaryGrid{grid-template-columns:minmax(0,1fr)!important}#fivedaytv .hwsFiveTVTemps{font-size:10px!important}}