:root {
  --bg: #f4f6f8;
  --surface: #fcfcfb;
  --ink: #1b2430;
  --ink2: #4a5566;
  --muted: #6b7686;
  --line: #dfe4ea;
  --accent: #0f5ea8;
  /* สีสถานะ (ใช้คู่กับข้อความเสมอ) */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --stale: #9aa4b1;
  /* ฝน: โทนสีเดียว อ่อน → เข้ม */
  --rain0: #c9d9ec;
  --rain1: #8fb5e0;
  --rain2: #4f8fd6;
  --rain3: #1f63b8;
  --rain4: #0c3d80;
  --news: #7b4fc9;
  --yt: #c4302b;
  --shadow: 0 2px 10px rgba(20, 30, 45, .12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111416; --surface: #1a1a19; --ink: #eceff3; --ink2: #c3cad4; --muted: #939cab; --line: #2d3238;
    --accent: #5aa6f0; --stale: #6d7682;
    --rain0: #27364a; --rain1: #2f5689; --rain2: #3f7dcc; --rain3: #74a9ea; --rain4: #b5d3f7;
    --news: #a98be6; --yt: #f0706a; --shadow: 0 2px 12px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111416; --surface: #1a1a19; --ink: #eceff3; --ink2: #c3cad4; --muted: #939cab; --line: #2d3238;
  --accent: #5aa6f0; --stale: #6d7682;
  --rain0: #27364a; --rain1: #2f5689; --rain2: #3f7dcc; --rain3: #74a9ea; --rain4: #b5d3f7;
  --news: #a98be6; --yt: #f0706a; --shadow: 0 2px 12px rgba(0, 0, 0, .5); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  background: var(--bg); color: var(--ink); display: flex; flex-direction: column; overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); }
h2 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; color: var(--ink2); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand svg { width: 30px; height: 30px; fill: var(--accent); flex: none; }
.brand h1 { font-size: 18px; margin: 0; line-height: 1.25; }
.sub { margin: 0; font-size: 12.5px; color: var(--muted); }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.warn { background: #fff4d6; color: #5a4100; padding: 8px 16px; font-size: 13.5px; border-bottom: 1px solid #f1d99a; }
.warn.soft { background: var(--bg); color: var(--ink2); border-bottom-color: var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warn { background: #3a2f12; color: #f6dd9b; border-color: #5a4a1c; } }

/* ---------- KPI row ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px 16px; background: var(--bg); }
.kpi { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.kpi:hover { border-color: var(--accent); }
.kv { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kl { font-size: 13px; line-height: 1.3; color: var(--ink2); min-width: 0; }
.kl small { color: var(--muted); font-size: 11.5px; }

/* ---------- layout ---------- */
.layout { flex: 1; display: flex; min-height: 0; position: relative; }
#map { flex: 1; min-width: 0; background: var(--bg); }
.panel { width: 380px; flex: none; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.grab { display: none; }
.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; background: none; border: 0; padding: 10px 8px; font-size: 14px; border-bottom: 2px solid transparent; color: var(--ink2); white-space: nowrap; }
.tabs button.on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.tab { display: none; overflow-y: auto; padding: 4px 16px 24px; flex: 1; }
.tab.on { display: block; }

/* ---------- lists ---------- */
.list .row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.list .row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row .t { flex: 1; min-width: 0; }
.list .row.static { cursor: default; }
.list .row.static:hover { background: none; }
.row .t div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s { font-size: 12px; color: var(--muted); }
.row .n { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--c); white-space: nowrap; }
.badge.dark { color: #1b2430; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2px var(--surface); }

.tmd { border: 1px solid var(--line); border-left: 4px solid var(--serious); border-radius: 8px; padding: 8px 12px; margin-top: 12px; }
.tmd h3 { margin: 0 0 4px; font-size: 14px; }
.tmd p { margin: 0; font-size: 13px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tmd.open p { display: block; }

.news article { border-bottom: 1px solid var(--line); padding: 10px 0; }
.news h3 { font-size: 14.5px; margin: 4px 0; line-height: 1.4; }
.news p { margin: 4px 0; font-size: 13.5px; color: var(--ink2); }
.news .meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.news .pins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.news .pins button { font-size: 12px; border: 1px solid var(--line); background: none; border-radius: 999px; padding: 1px 9px; }
.news .pins button:hover { border-color: var(--news); }

.feeds .feed { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.feeds .st { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--stale); }
.feed.ok .st { background: var(--good); }
.feed.fail .st { background: var(--critical); }
.feed.off .st { background: var(--stale); }
.feed .fs { font-size: 12px; color: var(--muted); }

.chips { display: flex; gap: 6px; margin: 4px 0 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 2px 12px; font-size: 13px; }
.chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.yt-tag { font-size: 11.5px; font-weight: 600; color: var(--yt); }
.yt-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: 8px; overflow: hidden; margin: 6px 0; aspect-ratio: 16 / 9; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.yt-thumb span { position: absolute; inset: 0; margin: auto; width: 54px; height: 38px; border-radius: 10px; background: var(--yt); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.yt-thumb:hover img { opacity: 1; }
.yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; margin: 6px 0; }


/* ---------- legend ---------- */
.legend > div { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 3px 0; }
.sym { display: inline-block; width: 16px; height: 16px; flex: none; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.sym.sensor { border-radius: 50%; }
.sym.event { border-radius: 3px; }
.sym.traffy { border-radius: 50%; background: var(--surface); border: 3px solid var(--c); box-shadow: none; }
.sym.wl { transform: rotate(45deg) scale(.85); border-radius: 2px; }
.sym.rain { border-radius: 50%; width: 12px; height: 12px; margin: 0 2px; }
.sym.rain.heavy { width: 16px; height: 16px; margin: 0; }
.sym.news { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.sym.yt { border-radius: 4px; }
.sym.cam { background: #1d2330; border-radius: 4px; }
.legend .scale { gap: 4px !important; margin-top: 6px; }
.scale span { flex: 1; text-align: center; font-size: 12px; padding: 2px 0; border-top: 5px solid var(--c); }

/* ---------- map markers & popups ---------- */
.mkhit { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mk { display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--c); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); font-family: "IBM Plex Sans Thai", sans-serif; }
.mk.sensor { border-radius: 50%; font-size: 9.5px; border-width: 1.5px; }
.mk.dark { color: #1b2430; }
.mk.event { border-radius: 2px; border-width: 1.5px; }
.mk.traffy { border-radius: 50%; background: #fff; border: 2px solid var(--c); }
.mk.wl { transform: rotate(45deg); border-radius: 3px; }
.mk.news { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.mk.news.yt { transform: none; border-radius: 1.5px; border-width: 1px; }
.mk.cam { border-radius: 3px; background: #1d2330; font-size: 6.5px; border-width: 1px; opacity: .85; }
.mk.stale { background: var(--stale); }
.basemap { filter: saturate(.55) contrast(.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .basemap { filter: invert(1) hue-rotate(180deg) brightness(.85) saturate(.4); } }
:root[data-theme="dark"] .basemap { filter: invert(1) hue-rotate(180deg) brightness(.85) saturate(.4); }
.leaflet-container { font-family: "IBM Plex Sans Thai", system-ui, sans-serif; }
.leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.pp h3 { margin: 4px 0; font-size: 15px; }
.pp .m { color: #5b6574; font-size: 12.5px; }
.pp .big { font-size: 22px; font-weight: 700; }
.pp img, .pp video { width: 100%; border-radius: 6px; margin-top: 6px; background: #000; }
.district-label { background: none; border: 0; box-shadow: none; color: var(--muted); font-size: 11px; font-weight: 500; text-shadow: 0 0 3px var(--surface); }
.district-label::before { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(5, minmax(118px, 1fr)); overflow-x: auto; padding: 6px 16px; gap: 6px; scrollbar-width: none; }
  .kpi { padding: 5px 9px; gap: 8px; }
  .kv { font-size: 20px; }
  .kl { font-size: 12px; }
  .kl small { display: none; }
  .top { padding: 8px 16px; }
  .sub { font-size: 11.5px; }
  .brand h1 { font-size: 16px; }
  .layout { flex-direction: column; }
  .panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 42%; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: var(--shadow); z-index: 1000; transition: height .2s; }
  .panel.min { height: 92px; }
  .panel.full { height: calc(100% - 6px); border-radius: 12px 12px 0 0; }
  .panel.full .grab span::after { content: ''; }
  .grab { position: relative; }
  .grab::after { content: '▲'; position: absolute; right: 14px; top: 4px; font-size: 11px; color: var(--muted); }
  .panel.full .grab::after { content: '▼'; }
  /* ปุ่มแจ้ง/แถบปักหมุดบนแผนที่ละเอียด: ยกให้อยู่เหนือแผงด้านล่าง ไม่ให้ถูกบัง */
  /* มือถือ: หน้าแผนที่ละเอียดไม่แสดงปุ่มแจ้ง (แจ้งที่หน้าสรุป) ไม่ให้บังแผนที่ */
  .layout .report-fab { display: none; }
  .grab { display: flex; justify-content: center; background: none; border: 0; padding: 8px 0 2px; flex: none; }
  .grab span { width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
}

/* ---------- เมนูระหว่างหน้า ---------- */
.pages { display: flex; gap: 4px; margin-left: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.pages a { text-decoration: none; color: var(--ink2); padding: 4px 10px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
.pages a[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }
@media (max-width: 860px) {
  .top { flex-wrap: wrap; row-gap: 6px; }
  .pages { order: 3; width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
  .pages a { text-align: center; padding: 5px 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- หน้าสรุป ---------- */
:root { --flood3: #b3261e; --flood2: #e5484d; --flood1: #f3b7b4; --flood-bg: #fdeceb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --flood3: #ff5a52; --flood2: #ff8a84; --flood1: #6b2d2a; --flood-bg: #2a1716; } }
:root[data-theme="dark"] { --flood3: #ff5a52; --flood2: #ff8a84; --flood1: #6b2d2a; --flood-bg: #2a1716; }

body.summary, body.home2 { overflow: auto; display: block; height: auto; }
.sum { max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card h2, .how h2 { margin: 0; font-size: 18px; color: var(--ink); }
.more { font-size: 14px; }
.subh { font-size: 15px; margin: 22px 0 8px; color: var(--ink2); }

.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--good); border-radius: 14px; padding: 18px 20px; }
.hero[data-level="3"], .hero[data-level="2"] { border-left-color: var(--flood3); background: linear-gradient(90deg, var(--flood-bg), var(--surface) 60%); }
.hero[data-level="1"] { border-left-color: var(--flood1); }
.eyebrow { margin: 0; font-size: 13px; color: var(--muted); }
.hero h2 { margin: 4px 0; font-size: 26px; line-height: 1.3; }
.hero h2 em { font-style: normal; color: var(--flood3); font-size: 32px; }
.hero p { margin: 4px 0; }
.tmdline { font-size: 14px; background: var(--bg); border-radius: 8px; padding: 6px 10px; margin-top: 8px !important; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.tile .tv { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.tile .tl { font-size: 13px; line-height: 1.35; color: var(--ink2); }
.tile.t3 { border-color: var(--flood3); } .tile.t3 .tv { color: var(--flood3); }
.tile.t2 .tv { color: var(--flood2); }
.tile.t1 { border-style: dashed; border-color: var(--flood2); }

.grid2 { display: grid; grid-template-columns: 2.3fr 1fr; gap: 16px; }
#smap { height: max(600px, 74vh); border-radius: 10px; background: var(--bg); position: relative; }
.mapwide > .card { width: 100%; }
#topMore { margin-top: 10px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink2); margin-top: 8px; align-items: center; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.lg-line { display: inline-block; width: 26px; height: 0; border-top: 6px solid var(--flood3); border-radius: 3px; }
.lg-line.t2 { border-top: 4px dashed var(--flood2); }
.lg-area { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--flood3); background: color-mix(in srgb, var(--flood3) 12%, transparent); }
.lg-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--flood3); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--flood3); }
.lg-line { box-shadow: 0 0 0 2px #fff; }
.lg-dist { display: inline-block; width: 14px; height: 12px; border: 1px solid #7d8896; background: color-mix(in srgb, var(--flood3) 38%, transparent); }
.lg-dist.d2 { background: color-mix(in srgb, var(--flood3) 20%, transparent); }
.lg-dist.d1 { background: color-mix(in srgb, var(--flood3) 8%, transparent); margin-right: 2px; }

.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; color: #fff; background: var(--flood3); }
.tag.t2 { background: var(--flood2); }
.tag.t1 { background: var(--flood-bg); color: var(--flood3); border: 1px dashed var(--flood3); }
.top10 { margin: 0; padding: 0; list-style: none; counter-reset: top; }
.top10 li { counter-increment: top; border-bottom: 1px solid var(--line); }
.top10 li a { display: block; padding: 8px 4px 8px 34px; position: relative; text-decoration: none; color: var(--ink); }
.top10 li a::before { content: counter(top); position: absolute; left: 4px; top: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--ink2); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.top10 li:nth-child(-n+3) a::before { background: var(--flood3); color: #fff; }
.top10 li a:hover { background: var(--bg); }
.top10 .empty { padding: 10px 4px; color: var(--muted); }
.t-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; align-items: start; }
.dist { border: 1px solid var(--line); border-left: 5px solid var(--flood1); border-radius: 10px; padding: 8px 12px; }
.dist.l3 { border-left-color: var(--flood3); } .dist.l2 { border-left-color: var(--flood2); }
.dist summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; list-style: none; }
.dist summary::-webkit-details-marker { display: none; }
.dname { font-weight: 600; }
.dcount { display: flex; gap: 4px; flex-wrap: wrap; }
.dist ul { margin: 8px 0 2px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.spot { border: 1px solid var(--line); border-top: 4px solid var(--flood2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.spot.t3 { border-top-color: var(--flood3); } .spot.t1 { border-top: 4px dashed var(--flood1); }
.spot h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.spot p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink2); }
.chip.soft { border-style: dashed; }
.go { margin-top: auto; padding-top: 4px; font-size: 13.5px; }
.how ul { padding-left: 18px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.plist { margin: 6px 0; padding-left: 16px; font-size: 12.5px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 14px; }
  .hero h2 { font-size: 21px; } .hero h2 em { font-size: 26px; }
  .tile .tv { font-size: 26px; }
  .grid2 { grid-template-columns: 1fr; }
  #smap { height: 62vh; min-height: 420px; }
  .sum { padding: 12px 16px; gap: 12px; }
}

/* ---------- ระบบปักหมุดแจ้งน้ำท่วม ---------- */
.btn.primary { background: var(--critical); border-color: var(--critical); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.primary:disabled { opacity: .6; cursor: progress; }
.btn.sm { padding: 3px 10px; font-size: 13.5px; text-decoration: none; display: inline-block; }
.report-fab { position: absolute; left: 12px; bottom: 34px; z-index: 900; display: flex; gap: 8px; flex-wrap: wrap; }
.report-fab .btn { box-shadow: var(--shadow); }
.btn.big { font-size: 17px; font-weight: 700; padding: 12px 20px; border-radius: 12px; min-height: 48px; }
.btn.ok { background: var(--good); border-color: var(--good); color: #fff; font-weight: 600; }
.btn.ok:hover { filter: brightness(1.08); }
.btn.off { background: var(--stale) !important; border-color: var(--stale) !important; }
.actions-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.actions-big .btn { width: 100%; font-size: 19px; padding: 14px 12px; }
.closing .leaflet-marker-icon .mk.web { animation: pulse 1s ease-in-out infinite; cursor: pointer; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.pick-bar .ring { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--critical); color: #fff; align-items: center; justify-content: center; font-size: 12px; }
.lg-radar { display: inline-block; width: 16px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #6fd0ff, #3a7bd5, #f4d03f, #e74c3c); opacity: .8; }
.lg-cam { display: inline-flex; width: 12px; height: 12px; border-radius: 3px; background: #1d2330; color: #fff; font-size: 6.5px; align-items: center; justify-content: center; font-style: normal; }
.lg-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lg-web { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: var(--critical); color: #fff; font-size: 10px; font-weight: 800; align-items: center; justify-content: center; font-style: normal; box-shadow: 0 0 0 2px var(--critical); border: 1.5px solid #fff; }
.risk-box { margin-top: 18px; }
.risk-box summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.risk-box summary .subh { margin: 0; }
.risk-box[open] summary { margin-bottom: 10px; }
.risk-box[open] summary .muted { display: none; }
.pick-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 950; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--surface); border: 2px solid var(--critical); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); max-width: calc(100% - 32px); font-size: 14px; }
.pick-bar[hidden], .report-fab[hidden] { display: none; }
.picking { cursor: crosshair !important; }
.mk.web { border-radius: 50%; font-size: 13px; font-weight: 800; border-width: 2px; box-shadow: 0 0 0 2px var(--c), 0 2px 6px rgba(0,0,0,.4); }
.sym.web { border-radius: 50%; box-shadow: 0 0 0 2px var(--c); }
.close-btn { margin-top: 10px; width: 100%; }
.ph3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.ph3 img { width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0; }
.pp iframe.drv { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; margin-top: 6px; }
.rp-dialog { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); background: var(--surface); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.rp-dialog::backdrop { background: rgba(10, 20, 30, .45); }
.rp-form { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.rp-form h2 { margin: 0; font-size: 19px; }
.rp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink2); }
.rp-form input:not([type=radio]):not([type=checkbox]), .rp-form textarea { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.rp-form fieldset { border: 0; padding: 0; margin: 0; }
.rp-form legend { font-size: 14px; color: var(--ink2); margin-bottom: 4px; }
.rp-form .lv { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-form .lv label { flex-direction: row; }
.rp-form .lv input { position: absolute; opacity: 0; }
.rp-form .lv span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.rp-form .lv input:checked + span { background: var(--critical); border-color: var(--critical); color: #fff; }
.rp-form .lv input:focus-visible + span { outline: 2px solid var(--accent); }
.rp-form .consent { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; }
.rp-form .req { color: var(--critical); }
.rp-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.rp-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--critical); }
.rp-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- หน้า log ---------- */
.log-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 12px; font-size: 14px; }
.log-filter input, .log-filter select { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.table-wrap { overflow-x: auto; }
table.log { width: 100%; border-collapse: collapse; font-size: 14px; }
table.log th, table.log td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.log th { font-size: 12.5px; color: var(--muted); font-weight: 600; }
table.log code { font-size: 11.5px; color: var(--muted); }
table.log .thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; margin: 0 4px 4px 0; }
.tag.ok { background: var(--good); }
@media (max-width: 700px) {
  table.log thead { display: none; }
  table.log tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.log td { display: flex; gap: 8px; border: 0; padding: 3px 0; }
  table.log td::before { content: attr(data-l); min-width: 72px; color: var(--muted); font-size: 12.5px; }
}

/* ปุ่มตำแหน่งปัจจุบัน */
.locate-ctl a { display: flex !important; align-items: center; justify-content: center; color: #1a73e8; }
.locate-ctl.busy a { animation: pulse 1s ease-in-out infinite; }

/* ---------- หน้าเกี่ยวกับ ---------- */
.about h2 { margin: 0 0 8px; font-size: 18px; }
.about p { margin: 0 0 8px; line-height: 1.65; }
.about .who { font-size: 20px; font-weight: 600; line-height: 1.4; }
.about .who .muted { font-size: 14px; font-weight: 400; }
.fb-form { padding: 0; max-width: 640px; }
.fb-form select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.fb-form .rp-actions { justify-content: flex-start; }

/* ---------- ThaiWater พยากรณ์ฝน ---------- */
.tw-alert { border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.tw-alert.on { border-left-color: var(--critical); }
.tw-imgs { margin-bottom: 8px; }
.tw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.tw-row a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--ink2); text-decoration: none; }
.tw-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }

/* ---------- แนวโน้มน้ำ (หน้าสรุป) ---------- */
.ol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.ol-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ol-box h3 { margin: 0 0 6px; font-size: 15px; }
.ol-box.wide { grid-column: 1 / -1; }
.ol-box.wide .ol-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.ol-box p { margin: 4px 0; }
.ol-main { font-size: 14px; }
.ol-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ol-row:last-of-type { border-bottom: 0; }
.ol-row span:not(.dot) { flex: 1; min-width: 0; }
.ol-row small { display: block; color: var(--muted); font-size: 12px; }
.ol-row b { white-space: nowrap; }
.ol-row b small { display: inline; }
.ol-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.ol-imgs a { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--ink2); text-decoration: none; }
.ol-imgs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
@media (max-width: 860px) { .ol-grid { grid-template-columns: 1fr; } }
.tw-row.storm img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }

/* ---------- จุดน้ำท่วมทั้งหมด (แบ่งตามสภาพถนน) ---------- */
.sfilter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sfilter input[type=search] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.sfilter .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sgroup { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.sgroup > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; background: var(--bg); list-style: none; }
.sgroup > summary::-webkit-details-marker { display: none; }
.sgroup > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.sgroup:not([open]) > summary::after { content: '▸'; }
.sgroup.g-block > summary { background: color-mix(in srgb, var(--critical) 14%, var(--surface)); }
.sgroup.g-high > summary { background: color-mix(in srgb, var(--serious) 14%, var(--surface)); }
.gcount { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; font-size: 13px; }
.slist { display: flex; flex-direction: column; }
.srow { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.srow:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.srow.old { opacity: .55; }
.depth { flex: none; width: 56px; height: 46px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; line-height: 1; color: #fff; background: var(--muted); }
.depth small { font-size: 11px; font-weight: 500; margin-top: 2px; }
.depth.g-block { background: var(--critical); }
.depth.g-high { background: var(--serious); }
.depth.g-flood { background: var(--warning); color: #3a2a00; }
.depth.g-unknown { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.sbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sbody b { font-size: 15px; }
.sdetail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .chips { flex: none; }
.smore { margin: 6px 12px 10px; }
.rline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.rhead { font-weight: 600; margin-right: 4px; }
.rchip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--ink); text-decoration: none; background: var(--bg); }
.rchip:hover { border-color: var(--accent); }
@media (max-width: 600px) { .srow .chips { display: none; } .depth { width: 50px; height: 42px; font-size: 17px; } }

/* ---------- เมนู: คอม = แถบบน + เพิ่มเติม ▾ · มือถือ = แถบล่างแบบแอป ---------- */
.pmore { position: relative; }
.pmore > button { border: 0; background: none; color: var(--ink2); padding: 4px 10px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
.pmore > button.on { background: var(--accent); color: #fff; font-weight: 600; }
.pmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3000; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 190px; overflow: hidden; display: flex; flex-direction: column; }
.pmenu[hidden] { display: none; }
.pages .pmenu a { padding: 11px 14px; border-radius: 0; font-size: 14.5px; color: var(--ink); background: none; font-weight: 400; }
.pages .pmenu a + a { border-top: 1px solid var(--line); }
.pages .pmenu a:hover { background: var(--bg); }
.pages .pmenu a[aria-current="page"] { color: var(--accent); font-weight: 700; background: none; }
.tabbar, .tsheet { display: none; }
@media (max-width: 860px) {
  .pages { display: none !important; }
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar { padding-bottom: var(--tabbar-h); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5000; height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(20, 30, 45, .08); }
  .tabbar > a, .tabbar > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; color: var(--muted);
    font-size: 12px; font-weight: 500; border: 0; background: none; font-family: inherit; min-width: 0; -webkit-tap-highlight-color: transparent; }
  .tabbar .ti { font-size: 21px; line-height: 1.1; filter: grayscale(.6); opacity: .8; }
  .tabbar > [aria-current="page"], .tabbar > button.on { color: var(--accent); font-weight: 700; }
  .tabbar > [aria-current="page"] .ti, .tabbar > button.on .ti { filter: none; opacity: 1; }
  .tsheet { display: block; position: fixed; inset: 0; z-index: 4900; background: rgba(0, 0, 0, .35); }
  .tsheet[hidden] { display: none; }
  .tsheet-in { position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); background: var(--surface); border-radius: 16px 16px 0 0; padding: 8px 8px 12px; box-shadow: var(--shadow); display: grid; }
  .tsheet-in a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; text-decoration: none; color: var(--ink); font-size: 16px; border-radius: 10px; min-height: 48px; }
  .tsheet-in a span { font-size: 20px; width: 28px; text-align: center; }
  .tsheet-in a[aria-current="page"] { background: var(--bg); color: var(--accent); font-weight: 700; }
  /* ปุ่มรีเฟรชบนหัวหน้า: ไม่จำเป็นบนมือถือ (รีเฟรชอัตโนมัติทุก 15 นาที) */
  .top #refresh { display: none; }
}
.tf-count.sm { transform: scale(.65); }

/* แถบฝนรายชั่วโมงจากกรมอุตุฯ */
.tmd-bars { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin: 6px 0 16px; border-bottom: 1px solid var(--line); }
.tmd-bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; }
.tmd-bars i { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 2px 2px 0 0; }
.tmd-bars em { position: absolute; top: 100%; left: 0; font-style: normal; font-size: 10px; color: var(--muted); padding-top: 2px; }

/* ---------- หน้าเขต ---------- */
#dmap { height: min(72vh, 640px); border-radius: 10px; background: var(--bg); }
.dlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; font-size: 13px; }
.dlegend span { display: inline-flex; align-items: center; gap: 6px; }
.dlegend i { width: 16px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
.dlegend i.none { background: color-mix(in srgb, #9aa4b1 20%, transparent); }
.drank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.drank button { width: 100%; display: grid; grid-template-columns: minmax(96px, 150px) 1fr minmax(110px, auto); gap: 10px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 7px 2px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.drank button:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.drank .dn { font-weight: 600; }
.drank .dbar { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.drank .dbar i { display: block; height: 100%; border-radius: 6px; }
.drank .dv { font-size: 13.5px; font-weight: 600; text-align: right; }
.drank .dv small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { .drank button { grid-template-columns: 1fr auto; } .drank .dbar { grid-column: 1 / -1; grid-row: 2; } #dmap { height: 50vh; } }

/* ภาพคาดการณ์ฝน 3 ชม. (สนน. กทม.) */
.nowcast { margin: 0 0 10px; }
.nowcast[hidden] { display: none; }
.nowcast img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); display: block; }
.nowcast figcaption { margin-top: 4px; }
.tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tr-col h3 { font-size: 15px; margin: 4px 0 6px; }
.tr-col .ol-row b small { color: var(--muted); }
.tag.t0 { background: var(--good, #1a9850); color: #fff; }
@media (max-width: 860px) { .tr-grid { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- อ่านง่าย กดง่าย (ทับค่าด้านบน) ----------
   ตัวอักษรเล็กสุด ~13 px, ปุ่ม/ชิปสูงอย่างน้อย 40 px (มือถือ 44 px) */
.small, .sub, .row .s, .news .meta, .feed .fs, .legend-row, .plist, .ol-row small, .pp .m, table.log th, .drank .dv small { font-size: 13px; }
.tag, .badge, .chip { font-size: 12.5px; padding: 2px 9px; }
.kl small { font-size: 12.5px; }
h2 { font-size: 15.5px; color: var(--ink); }
.btn { min-height: 40px; padding: 8px 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.sm { min-height: 36px; padding: 6px 12px; }
.chips button, .news .pins button { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.rchip { min-height: 34px; display: inline-flex; align-items: center; padding: 4px 12px; }
.sfilter input[type="search"], .sfilter input:not([type]) { min-height: 42px; font-size: 15px; }
.card { border-radius: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .btn { min-height: 44px; }
  .chips button { min-height: 40px; }
  .kl { font-size: 13px; }
  .sub { font-size: 12.5px; }
}

/* ---------- หน้าแรก: ทางลัด + ส่วนพับได้ ---------- */
.quick { display: grid; gap: 8px; margin-top: 12px; }
.quick input { width: 100%; min-height: 48px; font: inherit; font-size: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04); }
.quick input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.quick-btns { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.btn.primary-blue { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.btn.primary-blue:hover { filter: brightness(1.08); }
details.mapopts { margin-top: 6px; }
details.mapopts > summary, details.how > summary { cursor: pointer; list-style: none; color: var(--ink2); font-size: 14px; min-height: 40px; display: flex; align-items: center; gap: 6px; }
details.mapopts > summary::-webkit-details-marker, details.how > summary::-webkit-details-marker { display: none; }
details.mapopts > summary::after, details.how > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
details[open].mapopts > summary::after, details[open].how > summary::after { transform: rotate(180deg); }
details.how > summary h2 { margin: 0; }

/* ---------- เป้าแตะเล็ก: checkbox, ลิงก์ในบรรทัด, ลิงก์ "ดูเพิ่ม" ---------- */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); vertical-align: middle; margin: 0 6px 0 0; flex: none; }
label.lg-toggle, .rk-filter label, .rt-opts label { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; }
.card-h a.more { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
.small a:not(.btn) { display: inline-block; padding: 8px 2px; }
.depth small { font-size: 12px; }
@media (pointer: coarse) { .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 20px !important; } }

/* ---------- ที่ของฉัน ---------- */
.places .card-h { align-items: center; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pl-row:last-child { border-bottom: 0; }
.pl-row.lv3 { background: color-mix(in srgb, var(--critical) 8%, transparent); border-radius: 10px; padding: 10px 8px; }
.pl-ic { font-size: 24px; flex: none; }
.pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-t span { font-size: 14px; color: var(--ink2); display: flex; gap: 6px; align-items: baseline; }
.pl-act { display: flex; gap: 4px; flex: none; }
.pl-act .btn { min-width: 40px; padding: 6px 8px; text-decoration: none; }
.pl-form { display: grid; gap: 8px; margin: 8px 0; }
.pl-form input[type="text"], .pl-form input[type="search"] { min-height: 44px; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.pl-kind { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pl-kind label { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; }
.rt-sug { border: 1px solid var(--line); border-radius: 8px; max-height: 220px; overflow: auto; }
.rt-sug button { display: block; width: 100%; text-align: left; padding: 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }

/* แนวโน้มน้ำ: ป้ายลูกศร (สีพื้น = ระดับน้ำตอนนี้) */
.trz { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: var(--c); color: #fff; font: 700 13px/20px system-ui, sans-serif; text-align: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box; white-space: nowrap; letter-spacing: -2px; display: inline-block; }
.trz.dark { color: #1d2330; }
.trz.neutral { background: #fff; color: #1d2330; border-color: #1d2330; }
.mkhit { position: relative; }
.mk-tr { position: absolute; top: -13px; left: 52%; width: 20px; height: 20px; border-radius: 10px; background: #1d2330; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); pointer-events: none; box-sizing: border-box; }
.mk-tr.two { height: 24px; top: -17px; }
.mk-tr.fast { background: #c62828; } .mk-tr.up { background: #ef6c00; }
.mk-tr.down { background: #2e7d32; } .mk-tr.dfast { background: #1b5e20; } .mk-tr.peak { background: #6a4fc9; }
.mk-tr svg { display: block; }
/* ⭐ ที่ของฉัน บนแผนที่ละเอียด */
.plm { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--c); box-shadow: 0 1px 5px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; font-size: 15px; box-sizing: border-box; }
.tab.places .pl-t .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); vertical-align: 0; }
/* ป้ายฝนแรงขึ้น/เบาลงข้างสถานีฝน */
.rtr { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px 0 3px; height: 20px; border-radius: 10px; font: 12px/1 system-ui, sans-serif; white-space: nowrap;
  background: #5f6b7a; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); box-sizing: border-box; }
.rtr.fast, .rtr.up { background: #1565c0; }
.rtr svg { display: block; }
/* ซูมไกล: เหลือเฉพาะลูกศรสองอัน (เปลี่ยนเร็ว) */
/* ซูมไกล: ซ่อนเฉพาะลูกศรเดียวบนจุดที่ระดับน้ำปกติ (ลูกศรบนจุดเตือนภัย/วิกฤต และลูกศรสองชั้นยังแสดง) · ป้ายเล็กลงเล็กน้อย */
.zlow .mkhit.gn .mk-tr:not(.two), .zlow .rtr.up, .zlow .rtr.down { display: none; }
.zlow .mk-tr { transform: scale(.85); }
/* ความสูงพื้นดิน: คำอธิบายสี */
.elev-lg { background: var(--surface); color: var(--ink); padding: 8px 10px; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.25); font-size: 13px; max-width: 240px; }
.elev-lg .elev-bar { height: 10px; border-radius: 5px; margin: 6px 0 2px; background: linear-gradient(90deg, rgb(8,48,107), rgb(33,113,181) 20%, rgb(107,174,214) 36%, rgb(198,219,239) 50%, rgb(254,227,145) 64%, rgb(254,153,41) 80%, rgb(153,52,4)); }
.elev-lg .elev-ticks { display: flex; justify-content: space-between; font-size: 12px; }
.elev-lg .m { color: var(--ink2); font-size: 12px; margin-top: 4px; }
/* ---------- หน้าแรกแบบง่าย ---------- */
.h2wrap { width: 100%; box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 12px 12px 90px; display: grid; gap: 12px; }
.h2wrap h2 { font-size: 20px; margin: 0 0 10px; }
.h2wrap h2 em { font-style: normal; color: var(--critical); }
.h2btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.h2btns .btn { justify-content: center; text-align: center; text-decoration: none; display: flex; align-items: center; white-space: normal; padding: 10px 12px; font-size: 16px; line-height: 1.3; }
.h2report { display: flex; justify-content: center; margin-top: 8px; text-decoration: none; }
.h2v { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; margin-bottom: 8px; background: color-mix(in srgb, var(--c, var(--good)) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c, var(--good)) 35%, transparent); }
.h2v.lv3 { --c: var(--critical); } .h2v.lv2 { --c: var(--serious); } .h2v.lv0 { --c: var(--good); } .h2v.lv1 { --c: var(--warning); }
.h2v .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-top: 5px; }
.h2v b { display: block; font-size: 17px; }
.h2v .h2vt { font-size: 14px; color: var(--ink2); font-weight: 600; }
.h2v small { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; }
.h2chips { margin: 10px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#hmap { height: 300px; border-radius: 12px; border: 1px solid var(--line); }
.h2legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink2); margin-top: 6px; }
.h2legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--line); margin-right: 4px; vertical-align: -1px; }
.h2latest input[type="search"] { width: 100%; min-height: 44px; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-sizing: border-box; margin-bottom: 6px; }
.h2list { display: grid; }
.h2row { display: flex; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 48px; }
.h2row:last-child { border-bottom: 0; }
.h2row.old { opacity: .6; }
.h2d { flex: none; width: 46px; height: 40px; border-radius: 10px; background: var(--c); color: #fff; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-size: 16px; }
.h2d small { font-size: 11px; font-weight: 500; }
.h2t { min-width: 0; }
.h2t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2t small { color: var(--ink2); font-size: 13px; }
.more-link { display: block; margin-top: 10px; padding: 10px 0; font-weight: 600; }
.h2foot { text-align: center; }
.lg-dotr { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); margin-right: 4px; vertical-align: -2px; }
.ringlb { display: inline-block; padding: 0 6px; border-radius: 9px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); font: 600 12px/16px system-ui, sans-serif; white-space: nowrap; }
/* สถานีฝน (หยดน้ำ) และสถานีระดับน้ำ (หลอดวัดระดับ) */
.mkhit .drop, .mkhit .gauge { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); overflow: visible; }
.mkhit.dry { opacity: .55; }
.lgsym { display: inline-flex; align-items: flex-end; gap: 3px; margin-right: 6px; vertical-align: -3px; }
.h2src { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; padding: 4px 0; }
/* หน้าแรก: แผนที่สูงตามจอมือถือ · คอมจอกว้างแบ่ง 2 คอลัมน์ (ซ้าย = แถวคุณ + ล่าสุด, ขวา = แผนที่ใหญ่ติดจอ) */
#hmap { height: clamp(300px, 52vh, 560px); }
@media (min-width: 1000px) {
  .h2wrap { max-width: 1320px; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); align-items: start; padding: 16px 20px 40px; gap: 16px; }
  .h2me { grid-column: 1; grid-row: 1; }
  .h2latest { grid-column: 1; grid-row: 2; }
  .h2city { grid-column: 2; grid-row: 1 / span 2; }
  /* ให้ทั้งการ์ด (หัวข้อ + แผนที่ + ปุ่ม) พอดีจอ ไม่ตรึงไว้ เลื่อนหน้าได้ปกติ */
  .h2city #hmap { height: calc(100vh - 420px); min-height: 380px; }
  .h2foot { grid-column: 1 / -1; }
  .h2wrap h2 { font-size: 22px; }
}
/* มือถือ: แผนที่สูงขึ้น และลดช่องว่างบนจอเล็ก ให้แผนที่ขึ้นมาเร็วขึ้น */
@media (max-width: 999px) { #hmap { height: clamp(320px, 60vh, 620px); } .h2city h2 { margin-bottom: 8px; } }
@media (max-width: 480px) {
  .h2wrap { padding: 8px 8px 90px; gap: 8px; }
  .h2wrap .card { padding: 12px; }
  .h2wrap h2 { font-size: 18px; margin-bottom: 8px; }
  .h2v { padding: 10px; margin-bottom: 6px; }
  .h2v b { font-size: 16px; }
  .h2v small { font-size: 13px; }
  .h2btns { margin-top: 8px; }
  .h2btns .btn { font-size: 15px; min-height: 46px; }
  .h2city .muted.small { margin: 0 0 2px; }
}
/* จอใหญ่ (≥1500 px): กว้างขึ้นและตัวอักษรใหญ่ขึ้นเล็กน้อย */
@media (min-width: 1500px) {
  .h2wrap { max-width: 1560px; grid-template-columns: minmax(420px, 520px) minmax(0, 1fr); font-size: 17px; }
  .h2wrap h2 { font-size: 24px; }
  .h2v b { font-size: 19px; } .h2v small, .h2t small { font-size: 15px; }
  .h2t b { font-size: 17px; }
}
/* หน้าเขต: ป้ายแนวโน้ม */
.dtr { display: inline-block; padding: 1px 8px; border-radius: 11px; font-size: 12.5px; font-weight: 700; line-height: 18px; white-space: nowrap; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.dtr.worse { background: #c62828; color: #fff; }
.dtr.better { background: #2e7d32; color: #fff; }
.dtr.steady { background: #e4e7ec; color: #1d2330; }
.dlegend .dtr { margin-left: 4px; }
.dtr.sm { padding: 1px 5px; font-size: 12px; }
/* แผนที่ละเอียด: เลือกช่วงเวลา Traffy */
.trh { display: flex; align-items: center; gap: 4px; background: var(--surface); color: var(--ink); padding: 4px 6px; border-radius: 10px; box-shadow: 0 1px 5px rgba(0,0,0,.3); font-size: 13px; }
.trh[hidden] { display: none; }
.trh button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 4px 8px; min-height: 32px; font: inherit; cursor: pointer; }
.trh button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* หลอดระดับน้ำที่ปกติ (น้ำเงิน) ซูมไกลให้จางและเล็กลง เด่นเฉพาะที่เตือนภัย/วิกฤต */
.zlow .mkhit.gn .gauge { opacity: .6; transform: scale(.8); }
/* แผนที่ละเอียด: โหมดแสดงเฉพาะ */
.kpi.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.fchip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 120px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 4px 4px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: 13px; }
.fchip[hidden] { display: none; }
.fchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fchip button { flex: none; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; padding: 5px 10px; min-height: 30px; cursor: pointer; }
.lgtr { display: inline-flex; align-items: center; gap: 4px; margin: 0 10px 4px 0; white-space: nowrap; }
.lgtr .mk-tr { position: static; }