:root{--flood-bg:#0b0d10;--flood-surface:#141619;--flood-surface-2:#1b1e23;--flood-border:#06b6d42e;--flood-accent:#06b6d4;--flood-accent-soft:#06b6d424;--flood-text:#c8ccd4;--flood-text-muted:#6b7280;--cat-overflow:#ef4444;--cat-near:#f97316;--cat-high:#eab308;--cat-normal:#22c55e;--cat-low:#3b82f6;--cat-low_critical:#64748b;--cat-unknown:#6b7280;--flood-font:"Barlow Condensed", "IBM Plex Sans Thai Looped", system-ui, sans-serif;--flood-radius:10px}[x-cloak]{display:none!important}html,body{height:100%}.flood-body{background:var(--flood-bg);color:var(--flood-text);font-family:var(--flood-font);margin:0;font-size:16px;overflow:hidden}#flood-root{flex-direction:column;display:flex;position:fixed;inset:0}.flood-base-pane{filter:invert()hue-rotate(180deg)brightness(85%)contrast(110%)saturate(60%)}.flood-topbar{border-bottom:1px solid var(--flood-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1200;background:#0b0d10eb;flex-direction:column;gap:4px;padding:6px 14px 5px;display:flex}.flood-topbar-row{align-items:center;gap:14px;display:flex}.flood-brand{align-items:center;gap:10px;min-width:0;display:flex}.flood-logo{flex:none;width:26px;height:26px}.flood-brand-title{letter-spacing:.06em;font-size:20px;font-weight:700;line-height:1}.flood-brand-sub{color:var(--flood-text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:34vw;font-size:12px;overflow:hidden}.flood-topbar-right{align-items:center;gap:10px;min-width:0;margin-left:auto;display:flex}.flood-updated-line{color:var(--flood-text-muted);white-space:nowrap;font-size:12.5px}.flood-langs{gap:2px;display:flex}.flood-langs a{opacity:.65;border:1px solid #0000;border-radius:8px;padding:4px 5px;font-size:17px;text-decoration:none;transition:all .15s}.flood-langs a:hover{opacity:1;background:var(--flood-accent-soft)}.flood-langs a.active{opacity:1;border-color:var(--flood-accent);background:var(--flood-accent-soft)}.flood-langs-select{display:none}.flood-geo-btn,.flood-backmap{background:var(--flood-surface);color:var(--flood-accent);border:1px solid var(--flood-border);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-family:inherit;font-size:14px;text-decoration:none;display:inline-flex}.flood-geo-btn:hover{background:var(--flood-surface-2)}.flood-warn-banner{color:#fde047;white-space:nowrap;scrollbar-width:none;background:#eab30824;border:1px solid #eab30873;border-radius:8px;padding:3px 10px;font-size:12px;overflow-x:auto}.flood-chipbar{align-items:center;gap:12px;display:flex}.flood-chips{scrollbar-width:none;flex-wrap:nowrap;gap:6px;display:flex;overflow-x:auto}.flood-rainline{color:var(--flood-text);white-space:nowrap;font-size:12.5px}.flood-map{z-index:1;background:#0b0d10;flex:1;min-height:240px}.flood-map-station{border-radius:var(--flood-radius);border:1px solid var(--flood-border);height:46vh}.leaflet-container{font-family:var(--flood-font);background:#0b0d10}.leaflet-control-attribution{color:var(--flood-text-muted)!important;background:#0b0d10bf!important}.leaflet-control-attribution a{color:var(--flood-text-muted)!important}.leaflet-bar a{background:var(--flood-surface)!important;color:var(--flood-text)!important;border-color:#23262c!important}.flood-mk{border:1.5px solid #0b0d10;border-radius:50%;width:12px;height:12px;display:block;box-shadow:0 0 4px #000c}.flood-mk-pulse{animation:1.6s ease-in-out infinite flood-pulse}@keyframes flood-pulse{0%,to{opacity:.85}50%{opacity:.35}}.flood-cluster{color:#0b0d10;border:2px solid #0b0d10d9;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:13px;font-weight:700;display:flex;box-shadow:0 2px 10px #000000a6}.flood-cluster-rain{color:var(--flood-text);background:#141619eb;width:32px;height:32px;font-size:11.5px}.flood-popup{background:var(--flood-surface);color:var(--flood-text);border-radius:var(--flood-radius);border:1px solid #06b6d44d;min-width:230px;max-width:285px;box-shadow:0 10px 30px #0000008c}.leaflet-popup-content-wrapper{box-shadow:none;border-radius:var(--flood-radius);background:0 0}.leaflet-popup-content{line-height:1.45;width:auto!important;margin:0!important}.leaflet-popup-tip{background:var(--flood-surface);border:1px solid #06b6d44d}.flood-popup-head{align-items:center;gap:8px;padding:10px 12px 4px;display:flex}.flood-popup-name{flex:1;font-size:16px;font-weight:700}.flood-popup-code{color:var(--flood-text-muted);padding:0 12px;font-size:11.5px}.flood-popup-body{gap:3px;padding:0 12px 4px;font-size:13.5px;display:grid}.flood-popup-row{justify-content:space-between;gap:12px;display:flex}.flood-popup-row .k{color:var(--flood-text-muted)}.flood-popup-row .v{font-weight:600}.flood-popup-row-strong .v{font-size:14.5px}.flood-popup-spark{padding:4px 12px}.flood-popup-spark svg{width:100%;height:54px;display:block}.flood-popup-foot{gap:8px;padding:8px 12px 10px;display:flex}.flood-popup-btn{background:var(--flood-accent);color:#0b0d10;cursor:pointer;border:0;border-radius:8px;flex:1;padding:6px 8px;font-family:inherit;font-size:13px;font-weight:600}.flood-popup-btn.ghost{background:var(--flood-surface-2);color:var(--flood-accent);border:1px solid var(--flood-border)}.flood-popup-btn.on{background:var(--cat-normal);color:#062010}.flood-popup-meta{color:var(--flood-text-muted);padding:0 12px 8px;font-size:11.5px}.flood-trend-up{color:var(--cat-overflow);font-weight:700}.flood-trend-down{color:var(--cat-normal);font-weight:700}.flood-trend-flat{color:var(--flood-text-muted);font-weight:700}.flood-badge{color:#0b0d10;background:var(--cat-normal);white-space:nowrap;border-radius:999px;align-items:center;padding:2px 9px;font-size:12px;font-weight:700;display:inline-flex}.flood-badge[data-cat=overflow],.flood-badge[data-cat=near]{background:var(--cat-overflow);color:#fff}.flood-badge[data-cat=near]{background:var(--cat-near)}.flood-badge[data-cat=high]{background:var(--cat-high)}.flood-badge[data-cat=low]{background:var(--cat-low);color:#fff}.flood-badge[data-cat=low_critical]{background:var(--cat-low_critical);color:#fff}.flood-badge[data-cat=unknown]{background:var(--cat-unknown);color:#fff}.flood-badge.stale{color:var(--flood-text);background:#4b5563}.flood-badge-old{color:var(--flood-text);background:#4b5563;margin-left:auto}.flood-bma-icon{background:var(--cat-near);border:2px solid #0b0d10;border-radius:50% 50% 50% 4px;justify-content:center;align-items:center;width:26px;height:26px;display:flex;transform:rotate(-45deg);box-shadow:0 2px 8px #0009}.flood-bma-icon svg{width:14px;height:14px;transform:rotate(45deg)}.flood-dam-label{text-align:center;color:var(--flood-text);text-shadow:0 1px 3px #000}.flood-layers{z-index:1100;position:absolute;top:124px;right:12px}.flood-layers-toggle{color:var(--flood-text);border:1px solid var(--flood-border);border-radius:var(--flood-radius);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#141619eb;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:14px;font-weight:600;display:flex}.flood-layers-body{border:1px solid var(--flood-border);border-radius:var(--flood-radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#141619f0;min-width:218px;margin-top:6px;padding:10px;display:none}.flood-layers.open .flood-layers-body{display:block}.flood-layer-item{cursor:pointer;align-items:center;gap:9px;padding:5px 2px;font-size:14px;display:flex}.flood-layer-item input{accent-color:var(--flood-accent)}.flood-dot{border-radius:50%;flex:none;width:10px;height:10px;display:inline-block}.flood-radar-ctl{border-top:1px solid var(--flood-border);align-items:center;gap:8px;margin-top:8px;padding-top:8px;display:flex}.flood-radar-ctl input[type=range]{accent-color:var(--flood-accent);flex:1}.flood-radar-time{color:var(--flood-text-muted);text-align:right;min-width:40px;font-size:11.5px}.flood-mini-btn{background:var(--flood-surface-2);color:var(--flood-accent);border:1px solid var(--flood-border);cursor:pointer;border-radius:6px;width:28px;height:24px;font-size:12px}.flood-sidebar{z-index:1150;border:1px solid var(--flood-border);border-radius:var(--flood-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b0d10f2;flex-direction:column;width:330px;display:flex;position:absolute;top:120px;bottom:40px;left:12px;overflow:hidden}.flood-sidebar-grip{cursor:pointer;color:var(--flood-accent);border-bottom:1px solid var(--flood-border);-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;gap:8px;padding:4px;font-size:12px;display:flex}.flood-sidebar-fixed{flex:none;gap:6px;padding:8px 10px 2px;display:grid}.flood-search{box-sizing:border-box;background:var(--flood-surface);border:1px solid var(--flood-border);width:100%;color:var(--flood-text);border-radius:8px;padding:5px 10px;font-family:inherit;font-size:13px}.flood-search:focus{outline:1px solid var(--flood-accent)}.flood-search-results{gap:4px;max-height:160px;display:grid;overflow-y:auto}.flood-result{text-align:left;background:var(--flood-surface);border:1px solid var(--flood-border);color:var(--flood-text);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:7px 10px;font-family:inherit;font-size:13.5px;display:flex}.flood-result small{color:var(--flood-text-muted);margin-left:auto}.flood-chip .flood-chips{flex-wrap:wrap}.flood-chip{border:1px solid var(--flood-border);background:var(--flood-surface);color:var(--flood-text-muted);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:3px 10px;font-family:inherit;font-size:12.5px;display:inline-flex}.flood-chip em{font-style:normal;font-weight:700}.flood-chip.on{color:#0b0d10;font-weight:700}.flood-chip.on.c-overflow{background:var(--cat-overflow);color:#fff}.flood-chip.on.c-near{background:var(--cat-near)}.flood-chip.on.c-high{background:var(--cat-high)}.flood-chip.on.c-normal{background:var(--cat-normal)}.flood-chip.on.c-low{background:var(--cat-low);color:#fff}.flood-chip.on.c-low_critical{background:var(--cat-low_critical);color:#fff}.flood-chip.on.c-unknown{background:var(--cat-unknown);color:#fff}.flood-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.flood-field{color:var(--flood-text-muted);gap:4px;font-size:12.5px;display:grid}.flood-field select{background:var(--flood-surface);color:var(--flood-text);border:1px solid var(--flood-border);border-radius:8px;padding:5px 6px;font-family:inherit;font-size:12.5px}.flood-tabs{background:var(--flood-surface);border-radius:8px;gap:4px;padding:3px;display:flex}.flood-tabs button{color:var(--flood-text-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;padding:5px 4px;font-family:inherit;font-size:12.5px}.flood-tabs button.on{background:var(--flood-accent);color:#0b0d10;font-weight:700}.flood-list{scrollbar-width:thin;flex:auto;align-content:start;gap:3px;min-height:0;padding:5px 10px;display:grid;overflow:hidden auto}.flood-station-card{text-align:left;background:var(--flood-surface);border:1px solid var(--flood-border);width:100%;color:var(--flood-text);cursor:pointer;border-radius:8px;gap:0;min-width:0;padding:3px 8px;font-family:inherit;font-size:12.5px;line-height:1.22;display:grid}.flood-station-card:hover{border-color:var(--flood-accent)}.flood-sc-head{align-items:center;gap:6px;min-width:0;display:flex}.flood-sc-name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden}.flood-sc-meta{color:var(--flood-text-muted);justify-content:space-between;align-items:baseline;gap:8px;min-width:0;font-size:11px;display:flex}.flood-sc-basin{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.flood-sc-bank{color:var(--flood-text);white-space:nowrap;font-weight:600}.flood-sc-foot{color:var(--flood-text-muted);align-items:center;gap:8px;font-size:10.5px;display:flex}.flood-sc-ago.old{color:#9aa3ad}.flood-badge-old{color:var(--flood-text);background:#4b5563;margin-left:auto;padding:1px 7px;font-size:10.5px}.flood-cp-row{background:var(--flood-surface);color:var(--flood-text);border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;width:100%;padding:7px 10px;font-family:inherit;font-size:13.5px;display:flex}.flood-station-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.flood-station-meta{color:var(--flood-text-muted);white-space:nowrap;font-size:12px}.flood-bar{background:var(--flood-surface-2);border-radius:4px;flex:none;width:74px;height:8px;overflow:hidden}.flood-bar i{border-radius:4px;height:100%;display:block}.flood-sidebar-foot{border-top:1px solid var(--flood-border);flex:none;align-items:center;gap:14px;padding:4px 10px 6px;display:flex}.flood-legend{font-size:13px}.flood-legend summary{cursor:pointer;color:var(--flood-text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}.flood-legend-body{gap:4px;padding-top:8px;display:grid}.flood-legend-title{color:var(--flood-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;font-size:12px}.flood-legend-row{align-items:center;gap:8px;display:flex}.flood-about summary{cursor:pointer;color:var(--flood-accent);white-space:nowrap;font-size:11.5px}.flood-about p{color:var(--flood-text-muted);margin:6px 0 0;font-size:12.5px}.flood-stats{border-top:1px solid var(--flood-border);z-index:1200;color:#9aa3ad;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);scrollbar-width:none;background:#0b0d10f0;flex-wrap:nowrap;align-items:center;gap:10px;padding:3px 12px;font-size:13.5px;display:flex;overflow-x:auto}.flood-stat{white-space:nowrap;color:#9aa3ad;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:5px;padding:2px 6px;font-family:inherit;font-size:13.5px;display:inline-flex}.flood-stat b{font-size:15px}.flood-stat.s-overflow b{color:var(--cat-overflow)}.flood-stat.s-near b{color:var(--cat-near)}.flood-stat.s-high b{color:var(--cat-high)}.flood-stat.s-normal b{color:var(--cat-normal)}.flood-stat.s-low b{color:var(--cat-low)}.flood-stat.s-unknown b{color:var(--cat-unknown)}.flood-stat.on{background:var(--flood-surface-2);border-color:var(--flood-border);color:var(--flood-text)}.flood-stats .s-rain b{color:var(--flood-accent)}.flood-updated{white-space:nowrap;margin-left:auto;font-size:12px}.flood-loader{z-index:1300;color:var(--flood-text);background:#0b0d10b8;flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:15px;display:flex;position:absolute;inset:0}.flood-spinner{border:3px solid var(--flood-accent-soft);border-top-color:var(--flood-accent);border-radius:50%;width:38px;height:38px;animation:.9s linear infinite flood-spin}@keyframes flood-spin{to{transform:rotate(360deg)}}.flood-banner{z-index:1400;color:#fca5a5;background:#3b1d1d;border:1px solid #7f1d1d;border-radius:8px;padding:8px 16px;font-size:13.5px;position:absolute;top:140px;left:50%;transform:translate(-50%)}.flood-banner-stale{color:#fde047;background:#332b12;border-color:#713f12}.flood-station-page{flex:1;align-content:start;gap:14px;padding:18px 20px 26px;display:grid;overflow-y:auto}.flood-station-h1{letter-spacing:.02em;margin:0;font-size:26px}.flood-station-meta{color:var(--flood-text-muted);flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:14.5px;display:flex}.flood-station-meta b{color:var(--flood-text)}.flood-spark-wrap h2{color:var(--flood-text-muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px;font-size:15px}.flood-spark{background:var(--flood-surface);border:1px solid var(--flood-border);border-radius:var(--flood-radius);width:100%;height:120px}@media (width<=768px){.flood-brand-sub{display:none}.flood-sidebar{border-radius:var(--flood-radius) var(--flood-radius) 0 0;width:auto;max-height:76vh;transition:transform .28s;inset:auto 0 46px;transform:translateY(calc(100% - 52px))}.flood-sidebar.open{transform:translateY(0)}.flood-sidebar-grip{padding:14px}.flood-sidebar:not(.open) .flood-sidebar-fixed,.flood-sidebar:not(.open) .flood-list,.flood-sidebar:not(.open) .flood-sidebar-foot{display:none}.flood-layers{top:auto;bottom:58px;right:8px}.flood-updated{display:none}.leaflet-popup{min-width:200px;max-width:240px}}@media (width<=640px){.flood-langs{display:none}.flood-langs-select{background:var(--flood-surface);color:var(--flood-text);border:1px solid var(--flood-border);border-radius:8px;padding:5px 6px;font-family:inherit;font-size:13px;display:block}.flood-updated-line{display:none}.flood-chipbar{flex-direction:column;align-items:stretch;gap:4px}.flood-chips{overflow-x:auto}.flood-rainline{white-space:nowrap;overflow-x:auto}.flood-stats{gap:10px;padding:6px 10px;font-size:12.5px}.flood-stat b{font-size:14px}}