/* CFW v2.2.0 — immersive radar app UI */
body.weather-radar-focus-mode{background:#06182a;overflow-x:hidden}
body.weather-radar-focus-mode .page-shell{width:100%;max-width:none;margin:0;padding:0;min-height:0}
body.weather-radar-focus-mode .site-footer{display:none!important}
body.weather-radar-focus-mode .flash{position:fixed;z-index:3000;top:82px;left:50%;transform:translateX(-50%);max-width:min(92vw,760px)}
.weather-radar-page{position:relative;width:100%;min-height:calc(100vh - 74px);margin:0;color:#fff;background:#06182a}
.radar-map-stage{position:relative;isolation:isolate;width:100%;height:calc(100vh - 74px);min-height:680px;overflow:hidden;background:#0b263d}
.weather-radar-map{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#0b263d}
.weather-radar-map:after{content:"";position:absolute;inset:0;z-index:400;pointer-events:none;background:linear-gradient(180deg,rgba(4,19,35,.18),transparent 22%,transparent 64%,rgba(4,19,35,.34));mix-blend-mode:multiply}
.weather-radar-map .leaflet-control-attribution{font-size:8px;background:rgba(7,24,40,.72)!important;color:#d9e8f5!important;border-radius:8px 0 0 0}.weather-radar-map .leaflet-control-attribution a{color:#9bd0ff!important}
.weather-radar-map .leaflet-tooltip{border:0;border-radius:10px;background:#126fcd;color:#fff;box-shadow:0 4px 12px #0005;font-weight:850}
.weather-radar-map .leaflet-tooltip:before{border-right-color:#126fcd!important}
.cfw-basemap-tiles{filter:saturate(1.08) contrast(1.02)}
body.radar-dark-basemap .cfw-basemap-tiles{filter:brightness(.58) saturate(.9) contrast(1.12)}
.cfw-radar-tiles{filter:saturate(1.16) contrast(1.08)}
body:not(.radar-dark-basemap) .weather-radar-map:after{background:linear-gradient(180deg,rgba(4,19,35,.06),transparent 22%,transparent 64%,rgba(4,19,35,.12))}

.radar-map-loading{position:absolute;z-index:1500;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(5,20,35,.78);backdrop-filter:blur(5px);color:#fff;transition:.2s}
.radar-map-loading[hidden]{display:none}.radar-map-loading strong{font-size:18px}.radar-map-loading small{font-size:12px;color:#b8d1e5}.radar-spinner{width:34px;height:34px;border:4px solid #ffffff44;border-top-color:#1fa0ff;border-radius:50%;animation:radar-spin .8s linear infinite}@keyframes radar-spin{to{transform:rotate(360deg)}}

.radar-top-tools{position:absolute;z-index:900;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.radar-top-tools-right{display:flex;gap:9px}.radar-round-button{pointer-events:auto;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(5,22,38,.8);color:#fff;text-decoration:none;font-size:24px;font-weight:850;box-shadow:0 8px 22px #0005;backdrop-filter:blur(12px);cursor:pointer;transition:.16s}.radar-round-button:hover{background:#0c6fc9;border-color:#78bdff;text-decoration:none}.radar-round-button.is-off{opacity:.48}.radar-round-button.is-loading{animation:radar-pulse .8s ease-in-out infinite alternate}@keyframes radar-pulse{to{transform:scale(.9);opacity:.65}}

.radar-question-panel{position:absolute;z-index:800;top:78px;left:50%;transform:translateX(-50%);width:min(880px,calc(100% - 150px));display:grid;gap:10px;pointer-events:none}
.radar-question-copy,.radar-intensity-scale,.radar-control-dock,.radar-map-caption,.radar-time-badge,.radar-opacity-card,.radar-source-mini{background:rgba(4,20,34,.84);border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 30px #0006;backdrop-filter:blur(14px)}
.radar-question-copy{display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:22px;text-align:center}.radar-live-dot{width:9px;height:9px;border-radius:50%;background:#16d784;box-shadow:0 0 0 6px #16d78422}.radar-question-copy h1{margin:0;color:#fff;font-size:clamp(23px,3vw,34px);line-height:1.1;font-weight:950;letter-spacing:-.4px;text-shadow:0 2px 8px #0008}.radar-question-copy p{margin:5px 0 0;color:#c9dded;font-size:11px;font-weight:700}.radar-question-copy #radarStatus[data-state="success"]{color:#90ffd0}.radar-question-copy #radarStatus[data-state="warning"]{color:#ffe08f}.radar-question-copy #radarStatus[data-state="error"]{color:#ff9da3}
.radar-intensity-scale{padding:12px 18px 10px;border-radius:18px}.radar-gradient{height:12px;border-radius:999px;background:linear-gradient(90deg,#1dcc72 0%,#51e53c 20%,#e6ec21 42%,#ffad26 62%,#ff4d3f 78%,#de2ed6 100%);box-shadow:inset 0 0 0 1px #ffffff2b}.radar-gradient-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:7px;color:#fff;font-size:11px;font-weight:850;text-align:center}

.radar-time-badge{position:absolute;z-index:850;top:210px;right:24px;display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:18px;color:#fff}.radar-time-badge span{font-size:20px;color:#ffdf44}.radar-time-badge strong{font-size:24px;line-height:1;font-weight:950}.radar-time-badge small{font-size:11px;color:#d8e5ef}

.radar-alert-card{position:absolute;z-index:820;top:265px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 180px));display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:15px 18px;border:1px solid #ff777d;border-radius:20px;background:linear-gradient(135deg,rgba(183,22,32,.95),rgba(125,12,20,.93));color:#fff;text-decoration:none;box-shadow:0 14px 36px rgba(120,0,10,.4);backdrop-filter:blur(14px)}.radar-alert-card[hidden]{display:none}.radar-alert-card:hover{transform:translateX(-50%) translateY(-1px);text-decoration:none;background:linear-gradient(135deg,#d52631,#8e131b)}.radar-alert-icon{display:grid;place-items:center;width:48px;height:48px;border:3px solid #fff;border-radius:14px;font-size:28px;font-weight:950}.radar-alert-card div{min-width:0;text-align:center}.radar-alert-card small{display:block;color:#ffd5d7;font-size:10px;font-weight:800}.radar-alert-card strong{display:block;margin:2px 0 3px;font-size:18px;font-weight:950;line-height:1.25}.radar-alert-card p{overflow:hidden;margin:0;color:#fff;font-size:11px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.radar-alert-arrow{font-size:34px;line-height:1}.radar-alert-card[data-severity="info"],.radar-alert-card[data-severity="watch"]{background:linear-gradient(135deg,rgba(22,100,170,.95),rgba(15,55,98,.94));border-color:#79bbf0;box-shadow:0 14px 36px rgba(0,40,80,.38)}

.radar-chumphon-chip{position:absolute;z-index:700;left:calc(50% - 110px);top:52%;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(18,116,214,.9);color:#fff;font-size:11px;font-weight:900;box-shadow:0 5px 14px #0005;pointer-events:none}.radar-chumphon-chip span{width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#1b9bff}

.radar-map-caption{position:absolute;z-index:810;left:50%;bottom:176px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:min(680px,calc(100% - 160px));padding:10px 16px;border-radius:999px;color:#fff;text-align:center}.radar-map-caption span{font-size:22px}.radar-map-caption strong{font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.radar-control-dock{position:absolute;z-index:850;left:50%;bottom:76px;transform:translateX(-50%);width:min(930px,calc(100% - 110px));padding:11px 13px 9px;border-radius:22px}.radar-timeline-row{display:flex;align-items:center;gap:10px}.radar-play-button{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:0;border-radius:50%;background:linear-gradient(135deg,#1f9cff,#0872dc);color:#fff;font-size:19px;box-shadow:0 6px 18px #0066c955;cursor:pointer}.radar-play-button:disabled{opacity:.45;cursor:not-allowed}.radar-timeline-main{flex:1;min-width:0}.radar-timeline-times{display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:4px;color:#d7e6f2;font-size:9px;font-weight:850}.radar-timeline-times span:nth-child(2){text-align:center}.radar-timeline-times span:last-child{text-align:right}.radar-timeline-main input[type=range]{--radar-progress:100%;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,#26a4ff 0 var(--radar-progress),#ffffff55 var(--radar-progress) 100%);outline:none;cursor:pointer}.radar-timeline-main input[type=range]::-webkit-slider-thumb{appearance:none;width:19px;height:19px;border:4px solid #fff;border-radius:50%;background:#188cee;box-shadow:0 2px 8px #0008}.radar-timeline-main input[type=range]::-moz-range-thumb{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#188cee}.radar-latest-button{flex:0 0 auto;min-height:34px;padding:6px 11px;border:1px solid #ffffff40;border-radius:10px;background:#ffffff10;color:#fff;font-size:10px;font-weight:850;cursor:pointer}.radar-latest-button:disabled{opacity:.45}.radar-dock-meta{display:flex;align-items:center;gap:8px;margin-top:6px;padding-left:59px;color:#afc5d8;font-size:8px}.radar-dock-meta span+span:before{content:"•";margin-right:8px}.radar-dock-meta button{margin-left:auto;border:0;background:transparent;color:#9fd0ff;font-size:9px;font-weight:850;cursor:pointer}

.radar-shortcuts{position:absolute;z-index:840;left:18px;bottom:18px;display:flex;gap:7px}.radar-shortcuts a{display:flex;align-items:center;gap:7px;min-height:43px;padding:8px 12px;border:1px solid rgba(255,255,255,.27);border-radius:14px;background:rgba(4,20,34,.78);color:#fff;text-decoration:none;box-shadow:0 8px 20px #0005;backdrop-filter:blur(12px)}.radar-shortcuts a:hover{background:#0b6fc8;text-decoration:none}.radar-shortcuts span{font-size:17px}.radar-shortcuts strong{font-size:10px;font-weight:850}
.radar-opacity-card{position:absolute;z-index:830;right:18px;bottom:18px;width:175px;padding:9px 11px;border-radius:13px}.radar-opacity-card label{display:flex;justify-content:space-between;color:#d5e5f2;font-size:9px;font-weight:800}.radar-opacity-card output{color:#fff;font-weight:950}.radar-opacity-card input{width:100%;margin-top:5px;accent-color:#1e9cff}
.radar-source-mini{position:absolute;z-index:830;right:18px;top:70px;display:flex;align-items:center;gap:7px;padding:6px 8px 6px 11px;border-radius:999px;color:#cde0ee;font-size:8px}.radar-source-mini button{display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffffff40;border-radius:50%;background:#ffffff10;color:#fff;font-weight:900;cursor:pointer}

.radar-info-sheet{position:absolute;z-index:1800;right:20px;top:118px;width:min(390px,calc(100% - 40px));padding:14px;border:1px solid #ffffff33;border-radius:17px;background:rgba(4,20,34,.94);color:#fff;box-shadow:0 16px 40px #0008;backdrop-filter:blur(16px)}.radar-info-sheet[hidden]{display:none}.radar-info-sheet>div{display:flex;gap:10px;padding:8px 0}.radar-info-sheet>div+div{border-top:1px solid #ffffff1c}.radar-info-sheet .info-symbol{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:#1475c8;font-weight:900}.radar-info-sheet .info-symbol.warning{background:#c97c18}.radar-info-sheet strong{display:block;font-size:11px}.radar-info-sheet p{margin:3px 0 0;color:#bcd0df;font-size:9px;line-height:1.65}.radar-info-sheet footer{margin-top:7px;padding-top:8px;border-top:1px solid #ffffff1c;color:#91aabd;font-size:8px}.radar-info-sheet a{color:#86c8ff}
.radar-hidden-metadata{display:none}

@media(max-width:900px){
  body.weather-radar-focus-mode .site-header{display:flex!important;position:relative!important;z-index:2100!important}
  body.weather-radar-focus-mode .page-shell{padding:0!important}
  .weather-radar-page,.radar-map-stage{height:calc(100dvh - 78px);min-height:calc(100dvh - 78px)}
  .radar-question-panel{top:60px;width:calc(100% - 78px)}
  .radar-question-copy{padding:12px 14px;border-radius:19px}.radar-question-copy h1{font-size:25px}.radar-question-copy p{font-size:9px}
  .radar-intensity-scale{padding:10px 12px 8px;border-radius:16px}.radar-gradient{height:10px}.radar-gradient-labels{font-size:9px}
  .radar-top-tools{top:12px;left:12px;right:12px}.radar-round-button{width:42px;height:42px;font-size:21px}
  .radar-source-mini{top:13px;right:62px;max-width:calc(100% - 150px)}.radar-source-mini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .radar-time-badge{top:192px;right:12px;padding:8px 11px;border-radius:15px}.radar-time-badge strong{font-size:21px}
  .radar-alert-card{top:243px;width:calc(100% - 60px);padding:13px 14px;border-radius:18px}.radar-alert-icon{width:39px;height:39px;border-radius:12px;font-size:23px}.radar-alert-card strong{font-size:15px}.radar-alert-card p{font-size:9px}
  .radar-chumphon-chip{left:47%;top:49%;font-size:10px}
  .radar-map-caption{bottom:181px;max-width:calc(100% - 65px);padding:8px 12px}.radar-map-caption strong{font-size:10px}
  .radar-control-dock{bottom:81px;width:calc(100% - 24px);padding:9px 10px 7px;border-radius:19px}.radar-play-button{flex-basis:43px;width:43px;height:43px}.radar-latest-button{padding-inline:8px}.radar-dock-meta{padding-left:52px;font-size:7px}
  .radar-shortcuts{left:12px;right:12px;bottom:13px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.radar-shortcuts a{justify-content:center;min-height:44px;padding:7px 5px;border-radius:13px}.radar-shortcuts span{font-size:16px}.radar-shortcuts strong{font-size:9px}
  .radar-opacity-card{display:none}
  .radar-info-sheet{position:fixed;top:auto;right:12px;bottom:76px;left:12px;width:auto;max-height:42vh;overflow:auto}
}

@media(max-width:560px){
  .weather-radar-map .leaflet-control-attribution{display:none}
  .radar-question-panel{top:58px;width:calc(100% - 24px)}
  .radar-question-copy{gap:8px;padding:10px 12px}.radar-live-dot{width:7px;height:7px}.radar-question-copy h1{font-size:21px}.radar-question-copy p{font-size:8px}
  .radar-intensity-scale{padding:8px 10px 7px}.radar-gradient{height:8px}.radar-gradient-labels{font-size:8px;margin-top:5px}
  .radar-top-tools-right{gap:6px}.radar-round-button{width:39px;height:39px;font-size:19px}.radar-source-mini{display:none}
  .radar-time-badge{top:172px}.radar-time-badge strong{font-size:19px}
  .radar-alert-card{top:216px;width:calc(100% - 22px);grid-template-columns:auto 1fr;padding:11px 12px;gap:10px}.radar-alert-arrow{display:none}.radar-alert-card div{text-align:left}.radar-alert-card strong{font-size:13px}.radar-alert-card p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.radar-alert-icon{width:36px;height:36px;font-size:21px}
  .radar-chumphon-chip{top:48%;left:44%;font-size:9px;padding:5px 8px}
  .radar-map-caption{bottom:177px;max-width:calc(100% - 20px);padding:7px 11px}.radar-map-caption span{font-size:18px}.radar-map-caption strong{font-size:9px}
  .radar-control-dock{bottom:69px}.radar-timeline-row{gap:6px}.radar-play-button{flex-basis:40px;width:40px;height:40px}.radar-timeline-times{font-size:7px}.radar-latest-button{font-size:8px;min-height:30px}.radar-dock-meta{padding-left:46px;font-size:6.5px}.radar-dock-meta button{font-size:7px}
  .radar-shortcuts{bottom:8px}.radar-shortcuts a{min-height:38px}.radar-shortcuts span{font-size:14px}.radar-shortcuts strong{font-size:8px}
}

@media(max-height:720px) and (max-width:900px){
  .radar-question-panel{top:52px}.radar-intensity-scale{display:none}.radar-time-badge{top:129px}.radar-alert-card{top:173px}.radar-map-caption{display:none}.radar-control-dock{bottom:61px}.radar-shortcuts{bottom:5px}
}


/* CFW v2.3.0 — RainViewer observed + HII WRF-ROMS forecast mode */
.radar-mode-switch{display:flex;justify-content:center;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,17,29,.78);pointer-events:auto;box-shadow:0 8px 20px #0004;backdrop-filter:blur(12px)}
.radar-mode-switch button{flex:1;min-height:34px;padding:7px 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:#d7e8f6;font-size:11px;font-weight:900;cursor:pointer;transition:.16s}
.radar-mode-switch button:hover{background:#ffffff12}
.radar-mode-switch button.is-active{background:linear-gradient(135deg,#1689e8,#075eb8);border-color:#73c1ff;color:#fff;box-shadow:0 4px 14px #0074d944}
.radar-forecast-view{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;padding:220px 14px 158px;background:#071a2a}
.radar-forecast-view[hidden]{display:none!important}
.radar-forecast-image-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(720px,100%);height:100%;min-height:0;padding:8px;border:1px solid #ffffff40;border-radius:20px;background:#f7f9fc;box-shadow:0 18px 48px #0007;overflow:hidden}
.radar-forecast-image-frame{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%;overflow:hidden;border-radius:13px;background:#fff}
.radar-forecast-image-frame img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center}
.radar-forecast-image-loading,.radar-forecast-image-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:#f7f9fc;color:#17324b;text-align:center}
.radar-forecast-image-loading[hidden],.radar-forecast-image-error[hidden]{display:none!important}
.radar-forecast-image-loading small,.radar-forecast-image-error span{color:#657b8d;font-size:11px}
.radar-forecast-image-error a{margin-top:6px;padding:9px 14px;border-radius:10px;background:#0b78d0;color:#fff;font-size:11px;font-weight:850;text-decoration:none}
.radar-forecast-image-foot{display:flex;justify-content:space-between;gap:12px;width:100%;padding:7px 5px 1px;color:#526b80;font-size:9px;font-weight:850}
.radar-forecast-dock{position:absolute;z-index:850;left:50%;bottom:76px;transform:translateX(-50%);width:min(760px,calc(100% - 110px));padding:10px 13px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:rgba(4,20,34,.9);box-shadow:0 12px 30px #0007;backdrop-filter:blur(14px)}
.radar-forecast-dock[hidden]{display:none!important}
.radar-forecast-days{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:9px}
.radar-forecast-days button{min-height:34px;border:1px solid #ffffff26;border-radius:10px;background:#ffffff0d;color:#d9e9f5;font-size:10px;font-weight:900;cursor:pointer}
.radar-forecast-days button.is-active{border-color:#61b8ff;background:#087bd0;color:#fff;box-shadow:0 4px 12px #0074d944}
.radar-forecast-controls{display:flex;align-items:center;gap:10px}
.radar-forecast-controls .radar-play-button{flex-basis:42px;width:42px;height:42px}
.radar-forecast-day-meta{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.radar-forecast-day-meta strong{color:#fff;font-size:11px;font-weight:900}
.radar-forecast-day-meta small{color:#adc4d7;font-size:8px}
.radar-forecast-dock-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding-left:52px;color:#a9c0d3;font-size:8px}
.radar-forecast-dock-footer a{color:#8bcaff;font-weight:850;text-decoration:none}
.radar-forecast-dock-footer a:hover{text-decoration:underline}
.radar-forecast-mode .radar-time-badge,.radar-forecast-mode .radar-chumphon-chip,.radar-forecast-mode .radar-opacity-card{display:none!important}
.radar-forecast-mode .radar-top-tools-right{display:none}
.radar-forecast-mode .radar-intensity-scale .radar-gradient{background:linear-gradient(90deg,#dceeff 0%,#a9d4f5 14%,#9de0b4 30%,#55c94b 45%,#f2df32 60%,#ff9a16 74%,#ed3b21 87%,#7c1725 100%)}
.radar-forecast-mode .radar-map-caption{bottom:190px}
.radar-forecast-mode .radar-map-caption strong{white-space:normal}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels{grid-template-columns:repeat(4,1fr)}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels span:nth-child(1)::after{content:" 1–10 มม."}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels span:nth-child(2)::after{content:" 10–35 มม."}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels span:nth-child(3)::after{content:" 35–90 มม."}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels span:nth-child(4)::after{content:" 90+ มม."}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels span{font-size:0}
.radar-forecast-mode .radar-intensity-scale .radar-gradient-labels span::after{font-size:9px}

@media(max-width:900px){
  .radar-mode-switch button{min-height:32px;padding:6px 10px;font-size:10px}
  .radar-forecast-view{padding:226px 8px 160px}
  .radar-forecast-image-card{width:min(620px,100%);padding:5px;border-radius:15px}
  .radar-forecast-image-foot{font-size:8px}
  .radar-forecast-dock{bottom:72px;width:calc(100% - 24px);padding:9px 10px;border-radius:17px}
  .radar-forecast-days button{min-height:32px;font-size:9px}
  .radar-forecast-controls .radar-play-button{flex-basis:39px;width:39px;height:39px}
  .radar-forecast-dock-footer{padding-left:48px;font-size:7px}
  .radar-forecast-mode .radar-alert-card{top:270px}
}
@media(max-width:560px){
  .radar-question-panel{gap:7px}
  .radar-mode-switch{gap:3px;padding:3px}
  .radar-mode-switch button{min-height:30px;padding:5px 7px;font-size:9px}
  .radar-forecast-view{padding:220px 5px 154px}
  .radar-forecast-image-card{padding:3px;border-radius:11px}
  .radar-forecast-image-frame{border-radius:8px}
  .radar-forecast-image-foot{flex-direction:column;gap:2px;padding:5px 3px 1px;font-size:7px}
  .radar-forecast-dock{bottom:68px;width:calc(100% - 18px);padding:8px}
  .radar-forecast-days{gap:4px;margin-bottom:7px}
  .radar-forecast-days button{min-height:29px;font-size:8px}
  .radar-forecast-controls{gap:7px}
  .radar-forecast-controls .radar-play-button{flex-basis:36px;width:36px;height:36px}
  .radar-forecast-day-meta strong{font-size:9px}
  .radar-forecast-day-meta small{font-size:7px}
  .radar-forecast-controls .radar-latest-button{min-height:28px;padding:5px 7px;font-size:7px}
  .radar-forecast-dock-footer{padding-left:43px;font-size:6px}
  .radar-forecast-mode .radar-alert-card{top:252px}
  .radar-forecast-mode .radar-map-caption{bottom:180px}
}


/* ==========================================================
   CFW v2.4.0 — Unified Weather Center
   Combines RainViewer radar, HII forecast and TMD rainfall data.
   ========================================================== */
body.weather-center-mode{background:linear-gradient(180deg,#f4f8fc 0%,#edf3f9 100%);color:#17324f}
body.weather-center-mode .page-shell{width:100%;max-width:none;margin:0;padding:0;min-height:0}
body.weather-center-mode .site-footer{display:block!important}
.weather-center-shell{width:min(1480px,calc(100% - 40px));margin:0 auto;padding:24px 0 52px}
.weather-center-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:25px 30px;border:1px solid #1d5d91;border-radius:23px;background:radial-gradient(circle at 90% 0%,rgba(75,164,239,.26),transparent 36%),linear-gradient(118deg,#09243b 0%,#0e4775 62%,#176bc4 100%);color:#fff;box-shadow:0 14px 34px rgba(16,61,101,.17)}
.weather-center-hero-copy{min-width:0}
.weather-center-kicker{display:inline-flex;align-items:center;gap:8px;color:#a9d8ff;font-size:10px;font-weight:950;letter-spacing:1.5px}
.weather-center-hero h1{margin:7px 0 5px;color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.2;font-weight:950;letter-spacing:-.5px}
.weather-center-hero p{margin:0;color:#d0e5f7;font-size:13px;line-height:1.65}
.weather-center-live-badge{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 14px;border:1px solid #ffffff35;border-radius:999px;background:#ffffff12;color:#e7f5ff;font-size:9px;font-weight:950;letter-spacing:.8px;white-space:nowrap}
.weather-center-live-badge span{width:8px;height:8px;border-radius:50%;background:#22d68a;box-shadow:0 0 0 5px #22d68a25}
.weather-center-nav{position:sticky;top:78px;z-index:1000;display:flex;gap:7px;overflow-x:auto;margin:14px 0 16px;padding:7px;border:1px solid #dbe6f0;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 7px 20px rgba(26,60,92,.07);backdrop-filter:blur(14px);scrollbar-width:none}
.weather-center-nav::-webkit-scrollbar{display:none}
.weather-center-nav a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:37px;padding:8px 15px;border:1px solid transparent;border-radius:11px;color:#46627d;font-size:11px;font-weight:900;text-decoration:none;transition:.16s}
.weather-center-nav a:hover{background:#eef6fd;color:#0d66b7;text-decoration:none}
.weather-center-nav a.is-active{background:linear-gradient(135deg,#1a83db,#1166b8);color:#fff;box-shadow:0 5px 14px #126fc533}
.weather-center-overview{margin-bottom:22px}
.weather-center-overview .cfw-rainfall-stats-v2{margin:0}
.weather-center-overview .cfw-rainfall-source-note-v2{margin:12px 0 0}
.weather-center-section{margin-top:28px;scroll-margin-top:138px}
.weather-center-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 2px 13px}
.weather-center-section-head>div{min-width:0}
.weather-center-section-kicker{display:block;margin-bottom:4px;color:#2878bd;font-size:9px;font-weight:950;letter-spacing:1.2px}
.weather-center-section-head h2{margin:0;color:#173a5b;font-size:clamp(19px,2vw,25px);font-weight:950;line-height:1.25}
.weather-center-section-head p{margin:5px 0 0;color:#71869a;font-size:11px;line-height:1.6}
.weather-center-source-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.weather-center-source-pills span{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid #d8e7f5;border-radius:999px;background:#fff;color:#416987;font-size:9px;font-weight:900;white-space:nowrap}
.weather-center-text-link{flex:0 0 auto;color:#176bc4;font-size:10px;font-weight:900;text-decoration:none}
.weather-center-text-link:hover{text-decoration:underline}
.weather-center-map-section .weather-radar-page{position:relative;width:100%;min-height:0;margin:0;color:#fff;background:transparent}
.weather-center-map-section .radar-map-stage{height:min(79vh,900px);min-height:690px;border:1px solid rgba(21,63,98,.18);border-radius:23px;background:#0b263d;box-shadow:0 16px 38px rgba(16,48,78,.16)}
.weather-center-map-section .radar-question-panel{top:20px;width:min(900px,calc(100% - 190px));gap:8px}
.weather-center-map-section .radar-question-copy{padding:13px 20px;border-radius:18px}
.weather-center-map-section .radar-question-copy h1{font-size:clamp(22px,2.7vw,31px)}
.weather-center-map-section .radar-intensity-scale{padding:9px 15px 8px}
.weather-center-map-section .radar-time-badge{top:195px}
.weather-center-map-section .radar-alert-card{top:250px}
.weather-center-map-section .radar-control-dock{bottom:17px;width:min(760px,calc(100% - 420px));}
.weather-center-map-section .radar-forecast-dock{bottom:17px;width:min(650px,calc(100% - 420px));}
.weather-center-map-section .radar-map-caption{bottom:112px}
.weather-center-map-section .radar-shortcuts{bottom:17px}
.weather-center-map-section .radar-opacity-card{bottom:17px}
.weather-center-map-section .radar-forecast-view{padding:174px 24px 108px;background:linear-gradient(145deg,#eaf2f9 0%,#dce8f3 55%,#eef4fa 100%)}
.weather-center-map-section .radar-forecast-image-card{width:min(1260px,100%);height:100%;padding:10px 12px 8px;border:1px solid #d7e1eb;border-radius:19px;background:#fff;box-shadow:0 12px 34px rgba(24,57,87,.16)}
.weather-center-map-section .radar-forecast-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:4px 8px 10px}
.weather-center-map-section .radar-forecast-card-head>div{display:grid;gap:2px}
.weather-center-map-section .radar-forecast-card-head>div span{color:#3981b9;font-size:8px;font-weight:950;letter-spacing:1px}
.weather-center-map-section .radar-forecast-card-head>div strong{color:#173b5b;font-size:13px;font-weight:950}
.weather-center-map-section .radar-forecast-model-pill{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid #d7e8f7;border-radius:999px;background:#f2f8fd;color:#1767aa;font-size:9px;font-weight:950;white-space:nowrap}
.weather-center-map-section .radar-forecast-image-frame{border:1px solid #e5edf4;border-radius:12px;background:#fbfdff}
.weather-center-map-section .radar-forecast-image-frame img{width:100%;height:100%;object-fit:contain;object-position:center}
.weather-center-map-section .radar-forecast-image-foot{padding:8px 7px 2px;color:#5d7388;font-size:9px}
.weather-center-map-section .radar-forecast-dock{background:rgba(5,27,45,.94);border-color:#ffffff40;box-shadow:0 12px 32px #0005}
.weather-center-map-section .radar-forecast-days button{min-height:37px;font-size:10px}
.weather-center-map-section .radar-forecast-day-meta strong{font-size:12px}
.weather-center-map-section .radar-forecast-day-meta small{font-size:9px}
.weather-center-map-section .radar-forecast-dock-footer{font-size:8px}
body.radar-forecast-mode .weather-center-map-section .radar-intensity-scale{display:none!important}
body.radar-forecast-mode .weather-center-map-section .radar-map-caption{display:none!important}
body.radar-forecast-mode .weather-center-map-section .radar-forecast-view{padding-top:150px;padding-bottom:145px}
.weather-center-observed-section .cfw-rainfall-content-grid{margin-top:0}
.weather-center-observed-section .cfw-rainfall-chart-panel,
.weather-center-observed-section .cfw-rainfall-station-panel,
.weather-center-outlook-section .cfw-rainfall-forecast-panel{box-shadow:0 8px 26px rgba(21,55,91,.07)}
.weather-center-outlook-section .cfw-rainfall-forecast-panel{margin-top:0}
.weather-center-outlook-section .cfw-rainfall-forecast-note{margin-top:12px}
.weather-center-data-footer{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:17px 19px;border:1px solid #dce7f1;border-radius:17px;background:#fff;color:#536b80;box-shadow:0 7px 22px rgba(21,55,91,.05)}
.weather-center-data-footer-icon{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:9px;background:#e8f3fc;color:#176bc4;font-size:15px;font-weight:950}
.weather-center-data-footer strong{display:block;color:#244765;font-size:12px;font-weight:950}
.weather-center-data-footer p{margin:5px 0 0;font-size:10px;line-height:1.7}
.weather-center-data-links{display:flex;gap:13px;flex-wrap:wrap;margin-top:8px}
.weather-center-data-links a{color:#176bc4;font-size:9px;font-weight:900;text-decoration:none}
.weather-center-data-links a:hover{text-decoration:underline}
.weather-center-mode .cfw-rainfall-page-actions{margin-top:14px}
.weather-center-mode .cfw-rainfall-diagnostics,
.weather-center-mode .cfw-rainfall-disclaimer-v2{margin-top:10px}

@media(max-width:1100px){
  .weather-center-shell{width:calc(100% - 28px)}
  .weather-center-map-section .radar-map-stage{height:760px;min-height:650px}
  .weather-center-map-section .radar-control-dock{width:min(700px,calc(100% - 360px))}
  .weather-center-map-section .radar-forecast-dock{width:min(620px,calc(100% - 360px))}
  .weather-center-map-section .radar-question-panel{width:calc(100% - 150px)}
  .weather-center-map-section .radar-forecast-view{padding:170px 16px 110px}
  .weather-center-map-section .radar-forecast-image-card{width:min(1080px,100%)}
}
@media(max-width:760px){
  .weather-center-shell{width:calc(100% - 20px);padding:13px 0 34px}
  .weather-center-hero{align-items:flex-start;padding:17px 17px;border-radius:18px}
  .weather-center-hero h1{font-size:23px}
  .weather-center-hero p{font-size:11px}
  .weather-center-live-badge{padding:7px 9px;font-size:7px}
  .weather-center-nav{top:70px;margin:10px 0 12px;padding:5px;border-radius:13px}
  .weather-center-nav a{min-height:34px;padding:7px 11px;font-size:9px}
  .weather-center-section{margin-top:22px;scroll-margin-top:118px}
  .weather-center-section-head{align-items:flex-start;gap:9px}
  .weather-center-section-head h2{font-size:19px}
  .weather-center-section-head p{font-size:9px}
  .weather-center-source-pills{display:none}
  .weather-center-map-section .weather-radar-page{margin:0}
  .weather-center-map-section .radar-map-stage{height:700px;min-height:620px;border-radius:17px}
  .weather-center-map-section .radar-top-tools{top:10px;left:10px;right:10px}
  .weather-center-map-section .radar-question-panel{top:60px;width:calc(100% - 24px);gap:6px}
  .weather-center-map-section .radar-question-copy{padding:10px 11px}
  .weather-center-map-section .radar-question-copy h1{font-size:20px}
  .weather-center-map-section .radar-question-copy p{font-size:8px}
  .weather-center-map-section .radar-time-badge{top:171px}
  .weather-center-map-section .radar-alert-card{top:214px}
  .weather-center-map-section .radar-control-dock{left:12px;right:12px;bottom:67px;transform:none;width:auto;padding:8px 9px}
  .weather-center-map-section .radar-forecast-dock{left:12px;right:12px;bottom:12px;transform:none;width:auto;padding:8px}
  .weather-center-map-section .radar-shortcuts{left:10px;right:10px;bottom:9px;display:grid;grid-template-columns:repeat(4,1fr)}
  .weather-center-map-section .radar-opacity-card{display:none}
  .weather-center-map-section .radar-map-caption{bottom:164px}
  .weather-center-map-section .radar-forecast-view{padding:158px 8px 112px}
  .weather-center-map-section .radar-forecast-image-card{width:100%;padding:6px;border-radius:13px}
  .weather-center-map-section .radar-forecast-card-head{padding:3px 4px 7px}
  .weather-center-map-section .radar-forecast-card-head>div strong{font-size:10px}
  .weather-center-map-section .radar-forecast-model-pill{padding:5px 7px;font-size:7px}
  .weather-center-map-section .radar-forecast-image-foot{flex-direction:column;gap:2px;padding:6px 4px 1px;font-size:7px}
  .weather-center-map-section .radar-forecast-dock .radar-forecast-days button{min-height:30px;font-size:8px}
  .weather-center-map-section .radar-forecast-controls .radar-play-button{width:36px;height:36px;flex-basis:36px}
  .weather-center-map-section .radar-forecast-day-meta strong{font-size:9px}
  .weather-center-map-section .radar-forecast-day-meta small{font-size:7px}
  .weather-center-map-section .radar-forecast-dock-footer{padding-left:43px;font-size:6px}
  .weather-center-map-section .radar-forecast-mode .radar-map-caption{display:none}
  .weather-center-mode .cfw-rainfall-content-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .weather-center-hero{display:block}
  .weather-center-live-badge{margin-top:10px}
  .weather-center-map-section .radar-map-stage{height:660px;min-height:600px}
  .weather-center-map-section .radar-forecast-view{padding:150px 5px 116px}
  .weather-center-map-section .radar-forecast-image-frame{border-radius:8px}
  .weather-center-map-section .radar-forecast-dock-footer{gap:4px}
}

/* Forecast mode uses the official image legend; keep the lower control dock clear. */
body.radar-forecast-mode .weather-center-map-section .radar-shortcuts{display:none!important}
@media(max-width:1100px){
  .weather-center-map-section .radar-control-dock{width:min(700px,calc(100% - 36px))}
  .weather-center-map-section .radar-forecast-dock{width:min(650px,calc(100% - 36px))}
  .weather-center-map-section .radar-shortcuts{display:none}
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* CFW v2.5.0 — HII WRF-ROMS forecast-run archive timeline */
.radar-forecast-history{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.14)}
.radar-forecast-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.radar-forecast-history-head>div{display:grid;gap:2px;min-width:0}
.radar-forecast-history-head strong{color:#f4f9ff;font-size:10px;font-weight:950}
.radar-forecast-history-head small{color:#a8c1d5;font-size:8px;line-height:1.45}
.radar-forecast-history-head button{flex:0 0 auto;min-height:28px;padding:5px 10px;border:1px solid #5ba9e7;border-radius:9px;background:#0d4775;color:#fff;font-size:8px;font-weight:900;cursor:pointer}
.radar-forecast-history-head button:disabled{opacity:.45;cursor:not-allowed}
.radar-forecast-history-slider-row{display:flex;align-items:center;gap:9px;margin-top:5px;color:#a9c3d8;font-size:7px;font-weight:850}
.radar-forecast-history-slider-row input{flex:1;min-width:0;width:100%;height:16px;margin:0;accent-color:#31a7ff;cursor:pointer}
.radar-forecast-history-slider-row input:disabled{opacity:.35;cursor:not-allowed}
.radar-forecast-history-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.radar-forecast-history-meta span{min-width:0;color:#b9d0e2;font-size:7px;line-height:1.45}
.radar-forecast-history-meta button{flex:0 0 auto;min-height:25px;padding:4px 8px;border:1px solid #7bb8e8;border-radius:8px;background:#e9f5ff;color:#075c9e;font-size:7px;font-weight:950;cursor:pointer}
.weather-center-map-section .radar-forecast-dock{width:min(780px,calc(100% - 320px))}
.weather-center-map-section .radar-forecast-history{margin-top:8px;padding-top:7px}
.weather-center-map-section .radar-forecast-history-head strong{font-size:9px}
.weather-center-map-section .radar-forecast-history-head small{font-size:7px}
.weather-center-map-section .radar-forecast-history-head button{min-height:25px;font-size:7px}
.weather-center-map-section .radar-forecast-history-slider-row{margin-top:3px}
.weather-center-map-section .radar-forecast-history-meta{margin-top:2px}
.weather-center-map-section .radar-forecast-history-meta span{font-size:6.5px}
.weather-center-map-section .radar-forecast-history-meta button{min-height:22px;font-size:6.5px}
body.radar-forecast-mode .weather-center-map-section .radar-forecast-view{padding-bottom:225px}
@media(max-width:900px){
  .weather-center-map-section .radar-forecast-dock{width:calc(100% - 24px)}
  .weather-center-map-section .radar-forecast-view{padding-bottom:245px}
  .weather-center-map-section .radar-forecast-history-head strong{font-size:8px}
  .weather-center-map-section .radar-forecast-history-head small{font-size:6.5px}
  .weather-center-map-section .radar-forecast-history-slider-row{font-size:6px}
  .weather-center-map-section .radar-forecast-history-meta span{font-size:6px}
}
@media(max-width:560px){
  .weather-center-map-section .radar-forecast-dock{bottom:8px;width:calc(100% - 14px);padding:7px 8px;border-radius:15px}
  .weather-center-map-section .radar-forecast-view{padding:218px 5px 250px}
  .weather-center-map-section .radar-forecast-history{margin-top:7px;padding-top:6px}
  .weather-center-map-section .radar-forecast-history-head strong{font-size:7.5px}
  .weather-center-map-section .radar-forecast-history-head small{font-size:6px}
  .weather-center-map-section .radar-forecast-history-head button{min-height:23px;padding:4px 7px;font-size:6.5px}
  .weather-center-map-section .radar-forecast-history-slider-row{gap:5px;margin-top:2px;font-size:5.5px}
  .weather-center-map-section .radar-forecast-history-meta{gap:5px}
  .weather-center-map-section .radar-forecast-history-meta span{font-size:5.5px}
  .weather-center-map-section .radar-forecast-history-meta button{min-height:20px;padding:3px 6px;font-size:6px}
  .weather-center-map-section .radar-forecast-dock-footer{margin-top:5px;font-size:6px}
}


/* CFW v2.5.1 — Forecast visual correction: larger HII map + readable archive controls */
.weather-center-map-section .radar-forecast-card-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.weather-center-map-section .radar-forecast-zoom{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid #d8e5f0;border-radius:999px;background:#f5f9fd;color:#48647d}
.weather-center-map-section .radar-forecast-zoom>span{padding:0 5px;font-size:10px;font-weight:850}
.weather-center-map-section .radar-forecast-zoom button{display:grid;place-items:center;min-width:29px;height:27px;padding:0 7px;border:1px solid #d2e0ec;border-radius:8px;background:#fff;color:#174a70;font-size:13px;font-weight:950;cursor:pointer}
.weather-center-map-section .radar-forecast-zoom button:hover{border-color:#1684d8;background:#eaf5ff}
.weather-center-map-section .radar-forecast-zoom output{min-width:38px;color:#174a70;text-align:center;font-size:10px;font-weight:950}
.weather-center-map-section .radar-forecast-image-frame img{width:auto!important;max-width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(var(--cfw-forecast-image-zoom,1.1));transform-origin:center;transition:transform .18s ease}
.weather-center-map-section .radar-forecast-image-card{width:min(1420px,100%);height:100%;padding:12px 14px 9px}
.weather-center-map-section .radar-forecast-image-frame{min-height:0;overflow:hidden;background:linear-gradient(145deg,#f6faff,#eaf2f9)}
.weather-center-map-section .radar-forecast-card-head{padding:5px 8px 12px}
.weather-center-map-section .radar-forecast-card-head>div strong{font-size:15px}
.weather-center-map-section .radar-forecast-card-head>div span{font-size:9px}
.weather-center-map-section .radar-forecast-image-foot{font-size:10px;padding:9px 8px 2px}
.weather-center-map-section .radar-forecast-dock{left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:min(1040px,calc(100% - 72px));padding:14px 17px 12px;border:1px solid rgba(255,255,255,.2);border-radius:21px;background:rgba(5,25,42,.97);box-shadow:0 18px 42px rgba(0,0,0,.32);backdrop-filter:blur(16px)}
.weather-center-map-section .radar-forecast-days{gap:8px;margin-bottom:12px}
.weather-center-map-section .radar-forecast-days button{min-height:42px;border-radius:11px;font-size:12px}
.weather-center-map-section .radar-forecast-controls{gap:13px}
.weather-center-map-section .radar-forecast-controls .radar-play-button{width:48px;height:48px;flex-basis:48px;font-size:19px}
.weather-center-map-section .radar-forecast-day-meta{gap:5px}
.weather-center-map-section .radar-forecast-day-meta strong{font-size:13px}
.weather-center-map-section .radar-forecast-day-meta small{font-size:10px}
.weather-center-map-section .radar-forecast-controls .radar-latest-button{min-height:36px;padding:8px 12px;font-size:10px}
.weather-center-map-section .radar-forecast-history{margin-top:13px;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.17)}
.weather-center-map-section .radar-forecast-history-head strong{font-size:13px}
.weather-center-map-section .radar-forecast-history-head small{font-size:10px}
.weather-center-map-section .radar-forecast-history-head button{min-height:34px;padding:7px 12px;border-radius:10px;font-size:10px}
.weather-center-map-section .radar-forecast-history-slider-row{gap:11px;margin-top:9px;font-size:9px}
.weather-center-map-section .radar-forecast-history-slider-row input{height:22px}
.weather-center-map-section .radar-forecast-history-meta{margin-top:7px}
.weather-center-map-section .radar-forecast-history-meta span{font-size:9px;line-height:1.5}
.weather-center-map-section .radar-forecast-history-empty{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid rgba(255,196,93,.32);border-radius:12px;background:rgba(255,174,54,.09)}
.weather-center-map-section .radar-forecast-history-empty[hidden]{display:none!important}
.weather-center-map-section .radar-forecast-history-empty-icon{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:50%;background:#f4b84b;color:#3a2a08;font-size:14px;font-weight:950}
.weather-center-map-section .radar-forecast-history-empty>div{display:grid;flex:1;min-width:0;gap:3px}
.weather-center-map-section .radar-forecast-history-empty strong{color:#ffe4b4;font-size:10px;font-weight:950}
.weather-center-map-section .radar-forecast-history-empty span{color:#c9d8e5;font-size:9px;line-height:1.45}
.weather-center-map-section .radar-forecast-history-empty code{color:#c7e5ff;font-size:9px;overflow-wrap:anywhere}
.weather-center-map-section .radar-forecast-history-empty button{flex:0 0 auto;min-height:30px;padding:6px 9px;border:1px solid #6cb9f2;border-radius:9px;background:#0c5488;color:#fff;font-size:9px;font-weight:900;cursor:pointer}
.weather-center-map-section .radar-forecast-dock-footer{margin-top:9px;padding-left:61px;font-size:9px}
body.radar-forecast-mode .weather-center-map-section .radar-map-stage{height:min(96vh,1040px);min-height:900px}
body.radar-forecast-mode .weather-center-map-section .radar-forecast-view{padding:166px 22px 305px}
@media(max-width:1100px){
  body.radar-forecast-mode .weather-center-map-section .radar-map-stage{height:920px;min-height:920px}
  body.radar-forecast-mode .weather-center-map-section .radar-forecast-view{padding:164px 14px 315px}
  .weather-center-map-section .radar-forecast-dock{width:calc(100% - 40px)}
}
@media(max-width:760px){
  .weather-center-map-section .radar-forecast-card-head{align-items:flex-start;gap:7px}
  .weather-center-map-section .radar-forecast-card-tools{gap:6px}
  .weather-center-map-section .radar-forecast-zoom>span{display:none}
  .weather-center-map-section .radar-forecast-zoom button{min-width:25px;height:24px;font-size:12px}
  .weather-center-map-section .radar-forecast-zoom output{min-width:32px;font-size:9px}
  .weather-center-map-section .radar-forecast-model-pill{font-size:7px}
  .weather-center-map-section .radar-forecast-image-card{padding:7px}
  .weather-center-map-section .radar-forecast-dock{left:9px;right:9px;bottom:9px;transform:none;width:auto;padding:10px 11px;border-radius:16px}
  .weather-center-map-section .radar-forecast-days{gap:5px;margin-bottom:8px}
  .weather-center-map-section .radar-forecast-days button{min-height:34px;font-size:10px}
  .weather-center-map-section .radar-forecast-controls{gap:8px}
  .weather-center-map-section .radar-forecast-controls .radar-play-button{width:39px;height:39px;flex-basis:39px;font-size:15px}
  .weather-center-map-section .radar-forecast-day-meta strong{font-size:10px}
  .weather-center-map-section .radar-forecast-day-meta small{font-size:8px}
  .weather-center-map-section .radar-forecast-controls .radar-latest-button{min-height:30px;padding:6px 8px;font-size:8px}
  .weather-center-map-section .radar-forecast-history{margin-top:9px;padding-top:9px}
  .weather-center-map-section .radar-forecast-history-head strong{font-size:11px}
  .weather-center-map-section .radar-forecast-history-head small{font-size:8px}
  .weather-center-map-section .radar-forecast-history-head button{min-height:29px;font-size:8px}
  .weather-center-map-section .radar-forecast-history-slider-row{gap:6px;margin-top:6px;font-size:7px}
  .weather-center-map-section .radar-forecast-history-slider-row input{height:19px}
  .weather-center-map-section .radar-forecast-history-meta span{font-size:7px}
  .weather-center-map-section .radar-forecast-history-empty{gap:7px;padding:8px}
  .weather-center-map-section .radar-forecast-history-empty strong{font-size:8px}
  .weather-center-map-section .radar-forecast-history-empty span,.weather-center-map-section .radar-forecast-history-empty code{font-size:7px}
  .weather-center-map-section .radar-forecast-history-empty button{min-height:26px;padding:5px 7px;font-size:7px}
  .weather-center-map-section .radar-forecast-dock-footer{padding-left:47px;font-size:7px}
  body.radar-forecast-mode .weather-center-map-section .radar-map-stage{height:960px;min-height:960px}
  body.radar-forecast-mode .weather-center-map-section .radar-forecast-view{padding:190px 8px 390px}
}
@media(max-width:420px){
  .weather-center-map-section .radar-forecast-card-head>div strong{font-size:10px}
  .weather-center-map-section .radar-forecast-card-tools{flex-direction:column;align-items:flex-end}
  .weather-center-map-section .radar-forecast-history-empty{align-items:flex-start}
  .weather-center-map-section .radar-forecast-history-empty button{align-self:center}
  body.radar-forecast-mode .weather-center-map-section .radar-map-stage{height:980px;min-height:980px}
  body.radar-forecast-mode .weather-center-map-section .radar-forecast-view{padding:195px 5px 405px}
}


/* CFW v2.5.2 — HII WRF-ROMS georeferenced rainfall overlay on the same live map */
.radar-forecast-mode .weather-radar-map{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.radar-forecast-mode .radar-top-tools-right{display:flex!important}
.radar-forecast-mode .radar-time-badge,.radar-forecast-mode .radar-chumphon-chip,.radar-forecast-mode .radar-opacity-card{display:flex!important}
.radar-forecast-mode .radar-map-caption{bottom:210px}
.radar-forecast-mode .radar-forecast-view{position:absolute;z-index:500;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:88px 18px 300px;background:transparent;pointer-events:none}
.radar-forecast-mode .radar-forecast-view[hidden]{display:none!important}
.radar-forecast-mode .radar-forecast-image-card{display:flex;width:min(350px,calc(100% - 24px));height:min(300px,42vh);min-height:210px;margin:0;padding:9px;border:1px solid #d7e5ef;border-radius:16px;background:rgba(248,251,255,.97);box-shadow:0 12px 32px rgba(0,0,0,.25);pointer-events:auto}
.radar-forecast-mode .radar-forecast-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;padding:2px 3px 7px}
.radar-forecast-mode .radar-forecast-card-head>div strong{font-size:12px}
.radar-forecast-mode .radar-forecast-card-head>div span{font-size:8px}
.radar-forecast-mode .radar-forecast-card-tools{gap:5px}
.radar-forecast-mode .radar-forecast-zoom{display:none}
.radar-forecast-mode .radar-forecast-model-pill{font-size:8px}
.radar-forecast-mode .radar-forecast-image-frame{min-height:0;flex:1;width:100%;background:#f4f8fc}
.radar-forecast-mode .radar-forecast-image-frame img{width:100%;height:100%;object-fit:contain;transform:none!important}
.radar-forecast-mode .radar-forecast-image-loading,.radar-forecast-mode .radar-forecast-image-error{font-size:10px}
.radar-forecast-mode .radar-forecast-image-foot{padding:6px 3px 0;font-size:8px}
.radar-forecast-mode .radar-forecast-dock{left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:min(900px,calc(100% - 100px));padding:13px 16px 11px}
.radar-forecast-mode .radar-forecast-days button{min-height:39px;font-size:11px}
.radar-forecast-mode .radar-forecast-controls .radar-play-button{width:46px;height:46px;flex-basis:46px}
.radar-forecast-mode .radar-forecast-day-meta strong{font-size:12px}
.radar-forecast-mode .radar-forecast-day-meta small{font-size:9px}
.radar-forecast-mode .radar-forecast-history{margin-top:11px;padding-top:10px}
.radar-forecast-mode .radar-forecast-history-head strong{font-size:12px}
.radar-forecast-mode .radar-forecast-history-head small{font-size:9px}
.radar-forecast-mode .radar-forecast-history-slider-row{font-size:9px}
.radar-forecast-mode .radar-forecast-history-meta span{font-size:9px}
.radar-forecast-mode .radar-forecast-history-empty strong{font-size:10px}
.radar-forecast-mode .radar-forecast-history-empty span,.radar-forecast-mode .radar-forecast-history-empty code{font-size:9px}
.cfw-hii-forecast-overlay{image-rendering:auto}
.radar-forecast-mode .radar-opacity-card label{font-size:10px}
.radar-forecast-mode .radar-opacity-card input{accent-color:#1689e8}
@media(max-width:760px){
  .radar-forecast-mode .radar-map-caption{bottom:330px}
  .radar-forecast-mode .radar-forecast-view{padding:78px 9px 390px}
  .radar-forecast-mode .radar-forecast-image-card{width:min(270px,calc(100% - 18px));height:min(230px,30vh);min-height:170px}
  .radar-forecast-mode .radar-forecast-card-head>div strong{font-size:10px}
  .radar-forecast-mode .radar-forecast-dock{left:8px;right:8px;bottom:8px;transform:none;width:auto;padding:9px 10px;border-radius:16px}
  .radar-forecast-mode .radar-forecast-days{gap:5px;margin-bottom:8px}
  .radar-forecast-mode .radar-forecast-days button{min-height:33px;font-size:9px}
  .radar-forecast-mode .radar-forecast-controls{gap:8px}
  .radar-forecast-mode .radar-forecast-controls .radar-play-button{width:38px;height:38px;flex-basis:38px}
  .radar-forecast-mode .radar-forecast-day-meta strong{font-size:10px}
  .radar-forecast-mode .radar-forecast-day-meta small{font-size:8px}
  .radar-forecast-mode .radar-forecast-history{margin-top:8px;padding-top:8px}
  .radar-forecast-mode .radar-forecast-history-head strong{font-size:10px}
  .radar-forecast-mode .radar-forecast-history-head small{font-size:8px}
  .radar-forecast-mode .radar-forecast-history-head button{min-height:28px;font-size:8px}
  .radar-forecast-mode .radar-forecast-history-slider-row{font-size:7px}
  .radar-forecast-mode .radar-forecast-history-meta span{font-size:7px}
  .radar-forecast-mode .radar-forecast-history-empty strong{font-size:8px}
  .radar-forecast-mode .radar-forecast-history-empty span,.radar-forecast-mode .radar-forecast-history-empty code{font-size:7px}
  .radar-forecast-mode .radar-time-badge{top:135px;right:12px}
  .radar-forecast-mode .radar-chumphon-chip{left:12px;bottom:345px}
}