:root{--ink:#152f3e;--muted:#667c89;--teal:#087d80;--border:#dce6ea;--bg:#f2f6f7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font:14px/1.6 'Leelawadee UI','Tahoma',sans-serif;color:var(--ink)}button,select,input{font:inherit}button,select{border:1px solid var(--border);border-radius:8px;background:white;color:var(--ink);padding:8px 12px}button{cursor:pointer}button:hover{background:#e8f3f3;border-color:#93c8c7}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #32c9cc;outline-offset:3px}a{color:var(--teal)}.rail{position:fixed;inset:0 auto 0 0;width:82px;background:#112c3b;color:#c9d8e0;display:flex;align-items:center;flex-direction:column;z-index:10;padding:25px 0;gap:20px}.rail strong{font-size:10px;line-height:1.5;letter-spacing:1.7px;text-align:center}.logo{font-size:30px}.rail-line{height:1px;background:#365161;width:35px}.rail a{color:#a8c3cf;text-decoration:none;font-size:24px;padding:4px 12px;border-radius:9px}.rail a:hover{background:#234959;color:#fff}.rail-foot{margin-top:auto;text-align:center;font-size:12px}main{margin-left:82px;padding:32px 38px;max-width:1900px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.8px;color:var(--teal)}h1{font-size:32px;letter-spacing:-.8px;margin:3px 0}h2{font-size:17px;margin:0}p{margin:6px 0;color:var(--muted)}.header-right{text-align:right;font-size:12px;display:grid;gap:7px;justify-items:end}.live{color:#14795e;background:#e0f2e9;padding:4px 11px;border-radius:30px}.live i{display:inline-block;width:7px;height:7px;background:#20a476;border-radius:50%;margin-right:5px}.notice{padding:11px 16px;background:#e5f0f1;border:1px solid #d0e5e5;border-radius:10px;font-size:12px;margin-bottom:18px}.notice.error{background:#fff1db;border-color:#ebce93;color:#835718}.toolbar{display:flex;gap:12px;align-items:end;margin-bottom:20px;flex-wrap:wrap}.toolbar label{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.toolbar select{min-width:170px}.toolbar #scope{margin-left:auto;align-self:center;font-size:12px;color:var(--muted)}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.kpi{background:white;padding:18px 20px;border:1px solid var(--border);border-radius:13px;border-top:3px solid var(--teal)}.kpi:nth-child(2){border-top-color:#ed765d}.kpi:nth-child(3){border-top-color:#359bcc}.kpi:nth-child(4){border-top-color:#97a6ba}.kpi-label{font-size:12px;color:var(--muted)}.kpi-value{font-size:31px;font-weight:700;letter-spacing:-1px;line-height:1.4;margin:5px 0}.kpi small{color:var(--muted);font-size:11px}.main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:21px;overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.section-head p{font-size:12px}.pill{border:1px solid var(--border);font-size:10px;padding:3px 8px;border-radius:5px;white-space:nowrap;color:var(--muted)}.layers{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.layers button{font-size:12px;padding:6px 11px}.layers button.active{background:var(--teal);color:white;border-color:var(--teal)}.map-wrap{position:relative;border-radius:10px;overflow:hidden;background:#102a3c}.map-wrap svg{width:100%;display:block;max-height:650px;touch-action:manipulation}.sea{fill:#7e9eaf;font-size:10px;letter-spacing:3px}.map-controls{position:absolute;right:12px;top:12px;display:grid;gap:4px}.map-controls button{background:#163849;color:#d8e6ed;border-color:#335566;width:32px;height:32px;padding:0;font-size:19px}.map-attribution{position:absolute;bottom:7px;left:10px;font-size:8px;color:#94adba;pointer-events:none}.marker{cursor:pointer;outline:none}.marker:hover circle,.marker:focus circle{stroke:#fff;stroke-width:3}.marker.selected circle{stroke:#fff;stroke-width:3}.marker text{fill:#fff;font-size:11px;paint-order:stroke;stroke:#102a3c;stroke-width:4px;pointer-events:none}.wind-line{stroke-dasharray:4 3;animation:flow 1.2s linear infinite}@keyframes flow{to{stroke-dashoffset:-14}}.legend{display:flex;gap:12px;flex-wrap:wrap;margin:13px 0;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.dot{width:8px;height:8px;display:inline-block;border-radius:50%}#timeline{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}#timeline input{flex:1;min-width:60px;accent-color:var(--teal)}#timeLabel{font-size:11px;max-width:145px}#play{font-size:11px;white-space:nowrap}.map-note{font-size:11px}.side-stack{display:grid;gap:18px}.detail-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}.detail-metrics div{background:#f3f7f8;border-radius:8px;padding:10px}.detail-metrics strong{display:block;font-size:21px}.detail-metrics small{font-size:10px;color:var(--muted)}.reason{padding:10px 12px;background:#fff8e9;border-left:3px solid #e7b556;border-radius:5px;font-size:12px;margin:8px 0}.reason.neutral{background:#edf5f6;border-color:#92b3bd}.mini-chart{width:100%;height:95px;display:block}.chart-label{font-size:10px;color:var(--muted);display:flex;justify-content:space-between}.ai-panel{background:#f0f8f7;border-color:#c5e0dc}.ai-panel h2{color:#126d65}#aiText{font-size:12px;white-space:pre-wrap;line-height:1.9}#aiMeta{font-size:10px}details{font-size:11px;margin-top:12px}summary{cursor:pointer;color:var(--teal)}.footnote{font-size:10px;margin-top:12px;line-height:1.7}.storm a{display:block;font-size:12px;margin-top:10px}.storm p{font-size:12px}.province-panel{margin-top:22px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{text-align:left;background:#f6f9fa;color:var(--muted);font-weight:500;font-size:11px;padding:12px 14px;border-bottom:1px solid var(--border)}td{padding:12px 14px;border-bottom:1px solid #edf1f3}td small{display:block;font-size:10px;color:var(--muted)}.province-link{background:none;border:0;padding:0;font-weight:600;color:var(--teal);text-align:left}.badge{font-size:10px;border-radius:5px;padding:4px 7px;display:inline-block}.risk-3{background:#fde8e4;color:#af382b}.risk-2{background:#fff0d8;color:#a16a18}.risk-1{background:#fff8d9;color:#8f7d2d}.risk-0{background:#e9f5ef;color:#347f62}.risk--1{background:#edf0f2;color:#697b85}#stations{margin-top:22px}.station-table{max-height:320px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.source-row{border-bottom:1px solid var(--border);padding:10px 0;display:flex;justify-content:space-between;gap:12px;font-size:12px}.source-row small{display:block;font-size:10px;color:var(--muted)}.method{font-size:12px;color:var(--muted);padding-left:18px;line-height:1.9}footer{font-size:10px;color:var(--muted);margin-top:25px;padding-bottom:10px}.muted{color:var(--muted)}@media(min-width:1500px){main{padding:36px 48px}.main-grid{grid-template-columns:1.8fr 1fr}}@media(max-width:1100px){main{padding:25px 22px}.main-grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr)}.kpi-value{font-size:26px}.panel{padding:16px}}@media(max-width:850px){.rail{display:none}main{margin:0;padding:20px 15px}.main-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.focus{grid-column:1/-1}.bottom-grid{grid-template-columns:1fr}h1{font-size:27px}.kpis{grid-template-columns:1fr 1fr}.map-wrap svg{max-height:560px}.toolbar #scope{margin-left:0}.toolbar select{min-width:145px}}@media(max-width:520px){header{align-items:start;gap:10px}header p{font-size:11px;max-width:210px}.eyebrow{font-size:9px;letter-spacing:1.2px}h1{font-size:24px}.header-right{font-size:9px}.header-right button{font-size:10px;padding:6px}.kpi{padding:13px}.kpi-label{font-size:10px}.kpi small{font-size:9px}.side-stack{grid-template-columns:1fr}.section-head{align-items:start}.toolbar{gap:8px}.toolbar select{min-width:135px;max-width:165px;font-size:12px}.toolbar button{font-size:11px}.panel{padding:14px}#timeline{gap:7px}#timeLabel{max-width:100px}.layers button{font-size:11px;padding:6px 9px}}@media(prefers-reduced-motion:reduce){.wind-line{animation:none}html{scroll-behavior:auto}}@media print{.rail,.toolbar,button,#timeline{display:none!important}main{margin:0;padding:0}.main-grid,.bottom-grid,.side-stack{display:block}.panel{margin:15px 0;break-inside:avoid}.map-wrap{max-height:500px}.table-wrap{overflow:visible}table{white-space:normal;font-size:9px}th,td{padding:6px}.station-table{max-height:none}.kpis{gap:8px}body{background:white}.map-wrap svg{max-height:480px}*{print-color-adjust:exact}}

.map-focus{padding:8px 12px;background:#e5f3ef;border-radius:8px;margin-bottom:10px;font-weight:600;color:#14695d}.local-water{display:grid;grid-template-columns:1fr auto;gap:3px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px}.local-water small{grid-column:1/-1;color:var(--muted)}.focus h3{font-size:13px;margin:12px 0 4px}.province-panel .table-wrap{max-height:520px}thead{position:sticky;top:0;z-index:1}.marker circle{transition:r .5s,fill .5s}.focus{scroll-margin-top:15px}@media print{.province-panel .table-wrap{max-height:none}}
.watch-panel,.imagery-panel,.alerts-panel{margin:22px 0}.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:9px;max-height:370px;overflow:auto}.watch-card{text-align:left;display:grid;gap:6px;padding:13px;border-color:#d4e4df}.watch-card b{font-size:15px}.watch-card span,.watch-card small{font-size:11px}.watch-card .badge{justify-self:start}.trend{font-weight:700;display:block}.trend.up{color:#b33c27}.trend.down{color:#13705c}.trend.steady{color:#35668c}.trend.unknown{color:#6c7684}.imagery-stage{background:#102a3c;border-radius:10px;text-align:center;min-height:80px;position:relative}.imagery-stage img{max-width:100%;max-height:650px;object-fit:contain;display:block;margin:auto}.imagery-stage p{color:#fff;padding:10px}.image-controls{display:flex;gap:12px;align-items:center;margin-top:12px}.image-controls input{flex:1;min-width:60px}.image-controls span{font-size:11px}.storm-track svg{width:100%;border-radius:8px}.storm-track small{font-size:10px}.alert-row{padding:12px;border-radius:8px;margin:8px 0}.alert-row small{display:block}.alert-row p{font-size:12px;color:inherit}#alertList{max-height:350px;overflow:auto}@media(max-width:520px){.watch-grid{grid-template-columns:1fr 1fr}.watch-card{padding:9px}.watch-card b{font-size:12px}.watch-card .badge{font-size:9px}.imagery-panel .section-head{flex-wrap:wrap}.image-controls{flex-wrap:wrap}.image-controls span{width:100%}}@media(prefers-reduced-motion:reduce){.marker circle{transition:none}}
.date-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:15px 0 5px}.date-controls label{font-size:11px;color:var(--muted)}.date-controls input{display:block;border:1px solid var(--border);border-radius:7px;padding:7px;max-width:155px}.coverage-text{font-size:11px;line-height:1.8}.coverage-table{max-height:360px}.detail-metrics strong{font-size:18px}.watch-card.risk-0{border-left:4px solid #329974}.watch-card.risk-1,.watch-card.risk-2{border-left:4px solid #e0a02c}.watch-card.risk-3{border-left:4px solid #d64935}

#radarCanvas{max-height:650px;max-width:100%;margin:auto;width:auto;display:none}#weatherImage[hidden]{display:none}

.autoplay-label{font-size:11px;white-space:nowrap;color:#087d80;font-weight:600}

.bkk-summary{background:#fff;border:1px solid #bcded7;border-left:4px solid #087d80;border-radius:9px;padding:14px;margin-bottom:17px}.bkk-summary p{font-size:12px;line-height:1.8;overflow-wrap:anywhere}.bkk-summary .section-head{flex-wrap:wrap;margin-bottom:5px}.bkk-summary .bkk-danger{color:#a23828}.ai-other-title{font-size:14px;margin:0 0 8px}.bkk-summary button{font-size:12px}

/* Animation runs automatically; playback controls are intentionally hidden. */
#timeline,.image-controls{display:none!important}


.district-label{fill:#fff;stroke:#102a3c;paint-order:stroke;pointer-events:none;font-weight:600}.district-shape{cursor:pointer}.district-shape:hover,.district-shape:focus{fill-opacity:.65;stroke:white;outline:none}#districtPanel{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}#districtPicker{max-width:100%;font-size:12px}#districtInfo{font-size:12px;color:var(--ink)}

#weatherAtmosphere,#weatherVectors,#weatherCities{display:none}.weather-mode #weatherAtmosphere,.weather-mode #weatherVectors,.weather-mode #weatherCities{display:block}
#weatherAtmosphere,#weatherVectors{pointer-events:none}.weather-city{cursor:pointer}.weather-city:focus{outline:none}.weather-city:focus text{fill:#ffed90}
.weather-mode .province-shape{fill:transparent!important;stroke:#173849;stroke-width:1.1}.weather-mode .district-shape{fill-opacity:0!important;stroke:#b5d8de;stroke-width:.65}.weather-mode .district-shape:hover,.weather-mode .district-shape:focus{fill-opacity:.25!important}
.weather-mode .district-legend{display:none}.weather-mode #districtPanel::before{content:'มุมมองนี้แสดงสีฝนเรดาร์ • เลือกชั้น เฝ้าระวัง เพื่อดูสีระดับความเสี่ยง';display:block;font-size:12px;margin-bottom:10px;color:#547480}
#weatherStatus{background:#e6f2f7;border:1px solid #c0dce8;border-radius:8px;padding:9px 12px;font-size:11px;margin-bottom:10px;color:#244d63}#weatherStatus span{display:block}
.weather-flow{animation:weather-flow 1.6s linear infinite;opacity:.65}@keyframes weather-flow{to{stroke-dashoffset:var(--flow-distance)}}
@media(prefers-reduced-motion:reduce){.weather-flow{animation:none}}

#weatherRadar,#radarOverlay,#weatherImage{image-rendering:auto}

.weather-rain-drop{animation:rain-falling 1.1s linear infinite;pointer-events:none}.weather-wind-arrow{opacity:.65}@keyframes rain-falling{0%{transform:translateY(0);opacity:0}20%{opacity:.8}85%{opacity:.8}100%{transform:translateY(var(--rain-fall));opacity:0}}@media(prefers-reduced-motion:reduce){.weather-rain-drop{animation:none;opacity:.65}}