/* ==========================================================================
   หน้าแผนที่ (ปั๊มน้ำมัน / เรดาร์ฝน) — เลย์เอาต์แบบแอป
   ========================================================================== */
body.app-map { height: 100vh; height: 100dvh; overflow: hidden; }
body.app-map main { position: relative; flex: 1 1 auto; min-height: 0; }
.mapapp { position: absolute; inset: 0; display: grid; grid-template-columns: 410px 1fr; }
.map-wrap { position: relative; min-width: 0; min-height: 0; }
.map { position: absolute; inset: 0; background: var(--map-bg); z-index: 1; }
@media (max-width: 899px) {
  .mapapp { display: block; bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .map-wrap { position: absolute; inset: 0; }
}

/* ---------- Leaflet theme ---------- */
.leaflet-container { font-family: var(--font); background: var(--map-bg); outline: none; }
/* กัน reset ทั่วไป (svg/img max-width:100%) ทำให้เลเยอร์ใน pane ที่สร้างเองมีขนาด 0 */
.leaflet-pane svg, .leaflet-pane img, .leaflet-pane canvas { max-width: none !important; max-height: none !important; }
.leaflet-control-attribution { background: var(--glass) !important; color: var(--text-3) !important; font-size: 10px; border-radius: 8px 0 0 0; backdrop-filter: blur(8px); }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-bar { border: 1px solid var(--border) !important; box-shadow: var(--shadow-2), var(--hi) !important; border-radius: 14px !important; overflow: hidden; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; background: var(--glass-strong) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(12px); }
.leaflet-bar a:hover { background: var(--surface) !important; color: var(--primary) !important; }
.leaflet-popup-content-wrapper { background: var(--glass-strong); color: var(--text); border-radius: 16px; box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.leaflet-popup-content { margin: 12px 14px; font-size: .9rem; line-height: 1.5; }
.leaflet-popup-tip { background: var(--glass-strong); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-3); }
.leaflet-tooltip { background: var(--glass-strong); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); font-family: var(--font); backdrop-filter: blur(10px); }
.leaflet-tooltip-top::before { border-top-color: var(--glass-strong); }
/* โทนแผนที่: มืด = น้ำเงินเข้มแบบ blueprint, สว่าง = ลดความจัดของสีให้ดูสะอาด */
[data-theme="dark"] .base-tiles { filter: brightness(1.2) contrast(1.06) sepia(.7) hue-rotate(178deg) saturate(2.8); }
[data-theme="dark"] .label-tiles { filter: sepia(.25) hue-rotate(170deg) saturate(1.5) brightness(1.12); }
[data-theme="light"] .base-tiles { filter: saturate(.78) contrast(1.03) brightness(1.02); }
.leaflet-fade-anim .leaflet-tile { transition: opacity .35s linear; }
@media (max-width: 899px) { .leaflet-control-zoom { display: none; } }

/* หน้ากากนอกจังหวัด */
.province-mask { fill: #0A1630; fill-opacity: .3; stroke: none; pointer-events: none; }
[data-theme="dark"] .province-mask { fill: #01040C; fill-opacity: .6; }
.province-edge { fill: none; stroke: var(--holo); stroke-width: 2; stroke-opacity: .85; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--holo) 70%, transparent)); pointer-events: none; }

/* ---------- ปุ่มลอยบนแผนที่ ---------- */
.map-fabs { position: absolute; z-index: 500; right: 14px; top: 14px; display: grid; gap: 10px; }
.fab {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--glass-strong); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow-2), var(--hi); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.fab:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); }
.fab:active { transform: scale(.92); }
.fab.is-on { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .3); }
.fab .icon { width: 22px; height: 22px; }
.fab.is-busy .icon { animation: spin 1s linear infinite; }

.map-legend {
  position: absolute; z-index: 500; left: 14px; bottom: 26px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  padding: 8px 12px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); font-size: .76rem; color: var(--text-2); max-width: calc(100% - 90px);
}
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
@media (max-width: 899px) { .map-legend { display: none; } }

/* ---------- แผงรายการ (เดสก์ท็อป = คอลัมน์ซ้าย, มือถือ = bottom sheet) ---------- */
.panel {
  position: relative; z-index: 600; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.panel::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 55%, transparent), transparent); opacity: .5; pointer-events: none; }
.panel-head { padding: 14px 14px 10px; display: grid; gap: 10px; border-bottom: 1px solid var(--border); background: transparent; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title h1 { font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.panel-title h1 .icon-tile { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-oil); color: #fff; }
.panel-title h1 .icon-tile .icon { width: 19px; height: 19px; }
.search-row { display: flex; gap: 8px; }
.search { position: relative; flex: 1; }
.search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input { width: 100%; height: 46px; padding: 0 40px 0 42px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--well); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; }
.search input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring), 0 0 22px -8px var(--glow); background: var(--surface); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); display: none; place-items: center; }
.search.has-value .clear { display: grid; }
.filter-btn { position: relative; }
.filter-btn .count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--orange); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; font-family: var(--font-display); }
.panel-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; font-size: .82rem; color: var(--text-3); border-bottom: 1px solid var(--border); background: var(--well); }
.panel-summary b { color: var(--text); font-family: var(--font-display); }
.panel-summary select { border: 0; background: transparent; color: var(--text-2); font-weight: 600; font-size: .82rem; padding: 2px 0; }
.list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 90px; -webkit-overflow-scrolling: touch; }
.list-empty { text-align: center; padding: 40px 18px; color: var(--text-3); }
.list-group { font-family: var(--font-display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 12px 6px 6px; }

@media (max-width: 899px) {
  .panel {
    position: absolute; left: 0; right: 0; bottom: 0; top: 8px;
    border-radius: 24px 24px 0 0; border: 1px solid var(--border); border-bottom: 0;
    box-shadow: 0 -18px 48px -18px rgba(2, 6, 23, .45);
    transform: translateY(var(--panel-y, 60%)); transition: transform .45s var(--ease-out);
    will-change: transform;
  }
  .panel.is-dragging { transition: none; }
  .panel .sheet-handle { display: grid; padding: 9px 0 2px; }
  .panel-head { border-radius: 24px 24px 0 0; padding-top: 4px; }
  .panel-title { display: none; }
  .list { padding-bottom: 24px; }
}
@media (min-width: 900px) { .panel .sheet-handle { display: none; } }

/* ---------- การ์ดปั๊ม ---------- */
.st-card {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 16px;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .12s;
  content-visibility: auto; contain-intrinsic-size: 0 96px; position: relative;
}
.st-card:hover { background: var(--hover); border-color: var(--border); }
.st-card:active { transform: scale(.985); }
.st-card.is-active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent), 0 10px 26px -18px var(--glow); }
.st-card + .st-card { margin-top: 2px; }
.brand-badge {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--b, #64748B); color: var(--bt, #fff); font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 6px 14px -8px var(--b, #64748B); text-align: center; line-height: 1.05;
}
.brand-badge.lg { width: 56px; height: 56px; border-radius: 17px; font-size: .8rem; }
.st-name { font-weight: 600; font-size: .97rem; line-height: 1.35; color: var(--text); }
.st-meta { font-size: .78rem; color: var(--text-3); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 8px; }
.st-meta .stale { color: var(--amber); }
.st-fuels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fpill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 8px; font-size: .72rem; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.fpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lv, #CBD5E1); }
.fpill.out { background: rgba(239, 68, 68, .12); color: #DC2626; text-decoration: line-through; text-decoration-thickness: 1.5px; }
[data-theme="dark"] .fpill.out { color: #FCA5A5; }
.fpill.low { background: rgba(245, 158, 11, .14); color: #B45309; }
[data-theme="dark"] .fpill.low { color: #FCD34D; }
.fpill.ok { background: rgba(16, 185, 129, .12); color: #047857; }
[data-theme="dark"] .fpill.ok { color: #6EE7B7; }
.st-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.st-dist { font-family: var(--font-display); font-size: .8rem; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.st-cr { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 6px 10px; border-radius: 10px; background: rgba(239, 68, 68, .1); color: #B91C1C; }
[data-theme="dark"] .st-cr { color: #FCA5A5; }
.st-cr.ok { background: rgba(16, 185, 129, .1); color: #047857; }
[data-theme="dark"] .st-cr.ok { color: #6EE7B7; }
.st-cr .icon { width: 15px; height: 15px; }

/* ---------- หมุดบนแผนที่ ---------- */
.pin-wrap { background: none !important; border: 0 !important; }
.pin {
  --ring: #94A3B8;
  position: relative; width: 34px; height: 34px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  background: var(--b, #64748B); box-shadow: 0 0 0 3px var(--ring), 0 6px 14px -4px rgba(2, 6, 23, .55);
  transition: transform .25s var(--spring);
}
.pin span { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); color: var(--bt, #fff); font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .02em; }
.pin.st-open { --ring: #10B981; }
.pin.st-limited { --ring: #F59E0B; }
.pin.st-closed { --ring: #EF4444; }
.pin.st-unknown { --ring: rgba(148, 163, 184, .9); opacity: .82; }
.pin.has-cr::after { content: "!"; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #EF4444; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; transform: rotate(45deg); box-shadow: 0 0 0 2px var(--surface); }
.pin.is-active { transform: rotate(-45deg) scale(1.3); z-index: 1000; }
.pin.is-active::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 2px solid var(--ring); animation: ping 1.6s var(--ease-out) infinite; }
.pin-me { width: 20px; height: 20px; border-radius: 50%; background: #3B82F6; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(59, 130, 246, .25), 0 4px 10px rgba(2, 6, 23, .4); }
.pin-me::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(59, 130, 246, .6); animation: ping 2s var(--ease-out) infinite; }

/* cluster */
.cluster-wrap { background: none !important; }
.cluster {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(#10B981 0 var(--open), #F59E0B 0 var(--lim), #EF4444 0 var(--closed), #94A3B8 0);
  box-shadow: 0 8px 20px -6px rgba(2, 6, 23, .5);
}
.cluster b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: .9rem; box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- รายละเอียดปั๊ม ---------- */
.st-detail-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 4px 18px 14px; }
.st-detail-head h2 { font-size: 1.22rem; margin: 0 0 4px; }
.fresh { display: flex; align-items: center; gap: 10px; margin: 0 18px 14px; padding: 10px 12px; border-radius: 14px; background: var(--well); border: 1px solid var(--border); font-size: .84rem; }
.fresh .icon { color: var(--green); }
.fresh.old .icon { color: var(--amber); }
.fuel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 380px) { .fuel-grid { grid-template-columns: repeat(2, 1fr); } }
.fuel-tile { position: relative; padding: 12px 10px 10px; border-radius: 14px; background: var(--well); border: 1px solid var(--border); overflow: hidden; }
.fuel-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.fuel-tile .fn { font-size: .76rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fuel-tile .fl { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-top: 2px; color: var(--lv); display: flex; align-items: center; gap: 5px; }
.fuel-tile .fl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 25%, transparent); }
.fuel-tile .fp { font-size: .74rem; color: var(--text-3); margin-top: 2px; font-family: var(--font-display); }
.fuel-tile.is-out { background: rgba(239, 68, 68, .07); }
.info-list { display: grid; gap: 2px; margin-top: 14px; }
.info-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.info-row:last-child { border-bottom: 0; }
.info-row .icon { color: var(--text-3); }
.info-row .k { color: var(--text-2); }
.info-row .v { font-weight: 600; text-align: right; }
.pct-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.pct-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #EF4444, #F59E0B 35%, #10B981 70%); background-size: 300% 100%; transition: width 1s var(--ease-out); }
.action-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: sticky; bottom: 0; padding: 12px 18px calc(12px + var(--safe-b)); background: linear-gradient(to top, var(--surface) 72%, transparent); }
.action-bar .btn { flex-direction: column; gap: 4px; min-height: 62px; padding: 8px 4px; font-size: .78rem; border-radius: 14px; }
.action-bar .btn .icon { width: 22px; height: 22px; }
.cr-box { margin: 0 18px 14px; padding: 12px 14px; border-radius: 14px; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25); }
.cr-box.ok { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .25); }
.cr-box b { display: block; }

/* report sheet */
.report-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 420px) { .report-types { grid-template-columns: repeat(2, 1fr); } }
.rtype {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 84px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--well);
  font-size: .82rem; font-weight: 600; transition: border-color .15s, background .15s, transform .12s; color: var(--text);
}
.rtype .icon { width: 24px; height: 24px; color: var(--text-3); }
.rtype:active { transform: scale(.96); }
.rtype.is-on { border-color: var(--orange); background: rgba(249, 115, 22, .09); }
.rtype.is-on .icon { color: var(--orange); }

/* ==========================================================================
   เรดาร์ฝน
   ========================================================================== */
.rain-app { position: absolute; inset: 0; }
.rain-app .map { inset: 0; }
.rain-canvas { position: absolute; inset: 0; z-index: 420; pointer-events: none; }
.district-label { background: none !important; border: 0 !important; }
.dlabel {
  transform: translate(-50%, -50%); display: inline-flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .45); color: #fff;
}
.dlabel .dn { font-size: .72rem; font-weight: 600; opacity: .95; }
.dlabel .dv { font-size: .95rem; font-weight: 700; line-height: 1; }
.dlabel .dv small { font-size: .62rem; opacity: .8; margin-left: 1px; }
[data-theme="light"] .dlabel { color: #0B1324; text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 12px rgba(255, 255, 255, .9); }
.leaflet-interactive.district { transition: fill-opacity .3s, stroke-width .2s; }
.district-alert { animation: dash-move 1.2s linear infinite; }
@keyframes dash-move { to { stroke-dashoffset: -24; } }
.district-flash { animation: lightning 7s ease-in-out infinite; }
@keyframes lightning { 0%, 89%, 93%, 100% { fill-opacity: var(--fo, .5); } 90%, 92% { fill-opacity: .95; } 91% { fill-opacity: .55; } }

/* แผงฝน (ลอยบนแผนที่) */
.rain-top { position: absolute; z-index: 600; top: 12px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: flex-start; pointer-events: none; }
.rain-top > * { pointer-events: auto; }
.glass-panel { background: var(--glass-strong); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-2), var(--hi); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.glass-panel::before { content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; background: var(--line); opacity: .8; pointer-events: none; z-index: 1; }
.rain-side { position: absolute; z-index: 600; top: 12px; left: 12px; bottom: 12px; width: 380px; display: flex; flex-direction: column; overflow: hidden; }
.rain-side-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.rain-side-head h1 { font-size: 1.18rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.rain-side-head h1 .icon-tile { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-rain); color: #fff; }
.rain-side-head h1 .icon-tile .icon { width: 19px; height: 19px; }
.rain-side-body { flex: 1; overflow-y: auto; padding: 12px 12px 16px; overscroll-behavior: contain; }
.metric-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.metric-seg button { border: 1px solid var(--border-strong); background: var(--well); color: var(--text-2); border-radius: 10px; padding: 6px 12px; font-size: .8rem; font-weight: 400; transition: all .15s; }
.metric-seg button:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); color: var(--text); }
.metric-seg button.is-on { background: var(--grad-rain); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(43, 140, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.rank { display: grid; gap: 4px; }
.rank-row { display: grid; grid-template-columns: 22px 1fr 92px 54px; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 12px; cursor: pointer; transition: background .15s; font-size: .88rem; }
.rank-row:hover, .rank-row.is-active { background: var(--primary-soft); }
.rank-row .rn { font-family: var(--font-display); color: var(--text-3); font-size: .78rem; text-align: center; }
.rank-row .rname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-row .rname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rbar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rank-row .rbar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .8s var(--ease-out); }
.rank-row .rv { text-align: right; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.lvl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.alert-flag { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: var(--c); color: #fff; font-size: .62rem; font-weight: 800; font-family: var(--font-display); flex: none; }

.rain-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .74rem; color: var(--text-2); }
.rain-legend i { display: inline-block; width: 22px; height: 8px; border-radius: 3px; background: var(--c); margin-right: 4px; vertical-align: 0; }
.radar-player { position: absolute; z-index: 600; left: 50%; transform: translateX(-50%); bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; min-width: 320px; }
.radar-player .play { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--grad-rain); color: #fff; flex: none; box-shadow: 0 6px 16px -6px rgba(59, 130, 246, .7); }
.radar-player input[type=range] { flex: 1; accent-color: var(--sky); }
.radar-player .rtime { font-family: var(--font-display); font-weight: 700; font-size: .9rem; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.radar-player .rsrc { font-size: .66rem; color: var(--text-3); }
.alert-strip { position: absolute; z-index: 610; top: 12px; left: 404px; right: 70px; }
.rain-fabs { top: 12px; }
@media (min-width: 900px) { .rain-app .map-fabs { top: 12px; } }

/* รายละเอียดอำเภอ */
.dist-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 18px 12px; }
.dist-head h2 { margin: 0; font-size: 1.35rem; }
.gauge-wrap { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 0 18px 14px; }
.rain-gauge { width: 112px; height: 160px; }
.rain-gauge .tube { fill: color-mix(in srgb, var(--surface-3) 60%, transparent); stroke: var(--border-strong); stroke-width: 2; }
.rain-gauge .water { transition: transform 1.4s var(--ease-out); }
.rain-gauge .wave { animation: wave-x 3.2s linear infinite; }
@keyframes wave-x { to { transform: translateX(-40px); } }
.rain-gauge text { font-family: var(--font-display); fill: var(--text-3); font-size: 9px; }
.big-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.big-stat .v small { font-size: 1rem; color: var(--text-3); margin-left: 4px; }
.big-stat .k { color: var(--text-3); font-size: .84rem; margin-top: 4px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 18px 14px; }
.mini-stats .stat { padding: 10px; }
.mini-stats .stat .v { font-size: 1.15rem; }
.chart { padding: 4px 18px 14px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .bar-obs { fill: var(--c, #3B82F6); }
.chart .bar-fc { fill: var(--c, #3B82F6); fill-opacity: .38; stroke: var(--c, #3B82F6); stroke-dasharray: 3 2; stroke-width: 1; }
.chart .axis { fill: var(--text-3); font-size: 10px; font-family: var(--font-display); }
.chart .today-line { stroke: var(--text-3); stroke-dasharray: 3 3; }
.chart .bar-anim { transform-origin: bottom; transform-box: fill-box; animation: grow .9s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes grow { from { transform: scaleY(0); } }
.hourly { display: flex; gap: 6px; overflow-x: auto; padding: 4px 18px 16px; scrollbar-width: none; }
.hourly::-webkit-scrollbar { display: none; }
.hr { flex: none; width: 46px; text-align: center; font-size: .7rem; color: var(--text-3); }
.hr .hb { height: 54px; display: flex; align-items: flex-end; justify-content: center; margin: 4px 0; }
.hr .hb i { width: 14px; border-radius: 5px 5px 2px 2px; background: var(--c, #3B82F6); min-height: 2px; }
.hr .hp { font-family: var(--font-display); color: var(--sky); font-weight: 600; }
.gauge-list { display: grid; gap: 6px; padding: 0 18px 14px; }
.gauge-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--well); border: 1px solid var(--border); font-size: .84rem; }
.gauge-item .gv { font-family: var(--font-display); font-weight: 700; color: var(--c); text-align: right; }
.sec-title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; padding: 6px 18px 8px; display: flex; align-items: center; gap: 8px; }
.sec-title .icon { color: var(--sky); }

@media (max-width: 899px) {
  .rain-side { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 24px 24px 0 0; border-bottom: 0; transform: translateY(var(--panel-y, 62%)); transition: transform .45s var(--ease-out); height: calc(100% - 8px); }
  .rain-side.is-dragging { transition: none; }
  .rain-side .sheet-handle { display: grid; padding: 9px 0 2px; }
  .rain-side-head { padding-top: 4px; }
  .rain-side-head h1 { font-size: 1.05rem; }
  .alert-strip { left: 12px; right: 70px; }
  .radar-player { bottom: auto; top: 64px; left: 12px; right: 70px; transform: none; min-width: 0; }
}
@media (min-width: 900px) { .rain-side .sheet-handle { display: none; } }

/* จุดน้ำท่วม + กล้อง บนแผนที่ */
.spot-pin { position: relative; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; border: 2px solid #fff; box-shadow: 0 6px 16px -4px rgba(2, 6, 23, .6), 0 0 18px -2px var(--c); }
.spot-pin .icon { width: 18px; height: 18px; }
.spot-pin b { position: absolute; bottom: -9px; right: -12px; background: #0B1324; color: #fff; font: 700 10px var(--font-display); padding: 1px 5px; border-radius: 6px; border: 1px solid var(--c); white-space: nowrap; }
.spot-pin.wet::after { content: ""; position: absolute; inset: -8px; border-radius: 16px; border: 2px solid var(--c); animation: ping 1.8s var(--ease-out) infinite; }
.cam-pin { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #0F172A; color: #67E8F9; border: 1.5px solid #67E8F9; box-shadow: 0 0 12px rgba(103, 232, 249, .55); }
.cam-pin .icon { width: 15px; height: 15px; }
.cam-pin.stale { color: #94A3B8; border-color: #94A3B8; box-shadow: none; }
.spot-flow { animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }

/* ==========================================================================
   หน้าจุดน้ำท่วม 3D
   ========================================================================== */
.flood-app { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 430px; }
.flood-stage { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #12284A, #050A16 70%); }
[data-theme="light"] .flood-stage { background: radial-gradient(ellipse at 50% 30%, #E3F2FF, #B9D3EE 75%); }
#scene3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.flood-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: #CFE6FF; font-size: .9rem; z-index: 5; background: inherit; transition: opacity .6s; }
[data-theme="light"] .flood-loading { color: #1E3A8A; }
.flood-loading.is-done { opacity: 0; pointer-events: none; }
.flood-hud { position: absolute; z-index: 6; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.flood-hud > * { pointer-events: auto; }
.hud-back { --btn-bg: var(--glass-strong); }
.hud-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: var(--glass-strong); border: 1px solid var(--border); font-weight: 700; font-size: .86rem; backdrop-filter: blur(12px); }
.hud-chip .live-dot { color: var(--c); }
.flood-depth { position: absolute; z-index: 6; top: 64px; left: 12px; padding: 12px 16px; border-radius: 18px; background: rgba(5, 12, 28, .62); border: 1px solid rgba(125, 211, 252, .35); color: #E0F2FE; backdrop-filter: blur(12px); box-shadow: 0 0 28px -8px rgba(56, 189, 248, .6), inset 0 0 0 1px rgba(255, 255, 255, .04); min-width: 150px; }
.flood-depth .fd-k { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7DD3FC; }
.flood-depth .fd-v { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; margin-top: 2px; text-shadow: 0 0 18px rgba(56, 189, 248, .6); }
.flood-depth .fd-v small { font-size: .9rem; margin-left: 4px; color: #BAE6FD; }
.flood-depth .fd-s { font-size: .76rem; color: #BAE6FD; margin-top: 4px; }
.flood-ctrl { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
.flood-ctrl .sim { display: grid; gap: 2px; min-width: 190px; }
.flood-ctrl .sim input { accent-color: var(--sky); width: 100%; }
.flood-time { position: absolute; z-index: 6; right: 12px; top: 64px; padding: 10px 14px; font-family: var(--font-display); font-size: .9rem; }
.flood-panel { position: relative; z-index: 7; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.flood-panel .sheet-handle { display: none; }
.flood-panel-body { flex: 1; overflow-y: auto; padding: 18px 18px 40px; overscroll-behavior: contain; }
.verdicts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.verdict { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 9px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); text-align: center; }
.verdict svg { width: 34px; height: 26px; color: var(--c); }
.verdict b { font-size: .7rem; line-height: 1.2; }
.verdict span { font-size: .66rem; font-weight: 700; color: var(--c); font-family: var(--font-display); }
.fc-card { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(14, 165, 233, .1), rgba(99, 102, 241, .08)); border: 1px solid rgba(56, 189, 248, .3); }
.fc-card .fc-line { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; padding: 4px 0; }
.fc-card .fc-line .icon { color: var(--sky); margin-top: 3px; flex: none; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 12px; background: var(--well); border: 1px solid var(--border); font-size: .7rem; text-align: center; }
.day.is-today { border-color: var(--primary); background: var(--primary-soft); }
.day .wx { width: 26px; height: 26px; color: var(--sky); }
.day .t { font-family: var(--font-display); font-weight: 700; font-size: .78rem; }
.day .p { color: var(--sky); font-weight: 600; }
.depth-chart svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 899px) {
  .flood-app { display: block; bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .flood-stage { position: absolute; inset: 0; }
  .flood-panel { position: absolute; left: 0; right: 0; bottom: 0; top: 8px; border-radius: 24px 24px 0 0; border: 1px solid var(--border); transform: translateY(var(--panel-y, 64%)); transition: transform .45s var(--ease-out); box-shadow: 0 -18px 48px -18px rgba(2, 6, 23, .5); }
  .flood-panel.is-dragging { transition: none; }
  .flood-panel .sheet-handle { display: grid; padding: 9px 0 2px; }
  .flood-panel-body { padding-top: 4px; }
  .flood-ctrl { bottom: auto; top: 128px; left: 12px; right: 12px; transform: none; }
  .flood-depth { top: 56px; padding: 8px 12px; min-width: 0; }
  .flood-depth .fd-v { font-size: 1.7rem; }
  .verdicts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ภาพเรดาร์สทิงพระ */
.radar-img { width: 100%; border-radius: 14px; border: 1px solid var(--border); }

/* ================= แผนที่ระบบระบายน้ำ ================= */
.flow-canvas { pointer-events: none; transition: opacity .2s; }
.drain-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.drain-levels button { position: relative; display: grid; gap: 2px; justify-items: center; padding: 8px 4px 7px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border)); background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: var(--text); cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .2s, background .2s; }
.drain-levels button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.drain-levels button b { font: 700 1.25rem/1.1 var(--font-display); color: var(--c); font-variant-numeric: tabular-nums; }
.drain-levels button span { font-size: .7rem; color: var(--text-2); white-space: nowrap; }
.drain-levels button:hover { transform: translateY(-1px); }
.drain-levels button.is-on { background: color-mix(in srgb, var(--c) 22%, var(--surface)); box-shadow: 0 0 0 2px var(--c), 0 6px 18px -6px var(--c); }
.drain-levels button[data-lv="purple"] b { text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.legend-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; padding: 0 !important; }
.drain-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.drain-legend .icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--sky); }

/* หมุดจุดวัดระดับน้ำ */
.dp-pin { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(2, 6, 23, .25), 0 0 16px var(--c); }
.dp-pin i { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.dp-pin.lv-red i, .dp-pin.lv-purple i, .dp-pin.evac i { animation: ping 1.6s var(--ease-out) infinite; }
.dp-pin.lv-purple { animation: purple-pulse 1.2s ease-in-out infinite; }
.dp-pin b { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); background: #0B1324; color: #fff; font: 700 10px/1 var(--font-display); padding: 3px 5px; border-radius: 6px; border: 1px solid var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes purple-pulse { 50% { box-shadow: 0 0 0 1px rgba(2, 6, 23, .25), 0 0 30px 6px var(--c); transform: scale(1.12); } }

/* เครื่องสูบน้ำ */
.pump-pin { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0B1324; color: var(--c); border: 2px solid var(--c); box-shadow: 0 0 14px -2px var(--c), 0 6px 14px -6px rgba(2, 6, 23, .6); }
.pump-pin .fan { display: grid; place-items: center; }
.pump-pin .fan .icon { width: 19px; height: 19px; }
.pump-pin.running .fan { animation: spin 1.1s linear infinite; }
.pump-pin.partial .fan { animation: spin 2.4s linear infinite; }
.pump-pin b { position: absolute; bottom: -10px; right: -12px; background: var(--c); color: #fff; font: 700 10px/1 var(--font-display); padding: 3px 5px; border-radius: 6px; white-space: nowrap; border: 1.5px solid #fff; }
.pump-pin.broken { border-style: dashed; }
.pump-pin.broken::after { content: "!"; position: absolute; top: -8px; left: -6px; width: 16px; height: 16px; border-radius: 50%; background: #EF4444; color: #fff; font: 800 11px/16px var(--font-display); text-align: center; border: 1.5px solid #fff; }
.pump-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin: 10px 0 8px; gap: 2px; }
.pump-bar span { min-width: 0; }

/* ป้ายชื่อคลอง & ป้ายทิศทางน้ำ */
.canal-label { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font: 600 11px/1 var(--font-display); color: #0369A1; padding: 3px 7px; border-radius: 99px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(14, 165, 233, .45); pointer-events: none; }
[data-theme="dark"] .canal-label { color: #A5F3FC; background: rgba(5, 10, 22, .78); border-color: rgba(34, 211, 238, .45); }
.flow-label { display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); white-space: nowrap; padding: 5px 10px 5px 6px; border-radius: 12px; background: color-mix(in srgb, var(--c, #0EA5E9) 92%, #000); color: #fff; box-shadow: 0 6px 16px -6px rgba(2, 6, 23, .6), 0 0 0 1.5px rgba(255, 255, 255, .7); font-size: 11.5px; line-height: 1.2; pointer-events: none; }
.flow-label b { font-family: var(--font-display); font-weight: 700; }
.flow-label small { display: block; font-size: 10px; opacity: .85; }
.flow-label .fl-arrow { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); flex: none; }
.flow-label .fl-arrow .icon { width: 13px; height: 13px; }

/* อพยพ */
.evac-zone { animation: evac-pulse 1.6s ease-in-out infinite; }
@keyframes evac-pulse { 50% { fill-opacity: .26; stroke-width: 4; } }
.evac-tag { display: inline-flex; align-items: center; gap: 5px; transform: translate(-50%, 18px); padding: 4px 9px; border-radius: 99px; background: var(--c); color: #fff; font: 700 11px/1 var(--font-display); white-space: nowrap; box-shadow: 0 0 18px var(--c); animation: blink-soft 1.2s ease-in-out infinite; }
.evac-tag .icon { width: 13px; height: 13px; }
@keyframes blink-soft { 50% { opacity: .65; } }
.evac-ticker { animation: lvl5-flash 1.6s ease-in-out infinite; }
.evac-notice { border-color: #D946EF; background: color-mix(in srgb, #D946EF 10%, var(--surface)); }

/* แผงรายการ */
.dp-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--well); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, background .2s; }
.dp-row b { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row:hover { border-color: var(--c); transform: translateX(2px); }
.dp-row.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface-2)); }
.dp-val { display: grid; justify-items: end; line-height: 1.15; }
.dp-val b { font: 700 1.05rem var(--font-display); color: var(--c); font-variant-numeric: tabular-nums; }
.dp-val small { font-size: .66rem; color: var(--text-3); white-space: nowrap; }
.drain-status { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.drain-status b { color: var(--c); font-family: var(--font-display); font-size: 1.05rem; }
.drain-status .ds-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent), 0 0 18px var(--c); animation: blink-soft 1.6s ease-in-out infinite; }
.drain-app .mini-stats { padding: 10px 0 4px; }
@media (max-width: 899px) {
  .drain-levels button { padding: 6px 2px 5px; }
  .drain-levels button b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-pin i, .dp-pin.lv-purple, .pump-pin .fan, .evac-zone, .evac-tag, .evac-ticker, .drain-status .ds-dot { animation: none !important; }
}

/* ================= v3 HOLO-BLUE: พื้นผิวแผงบนแผนที่ ================= */
.panel { background: var(--panel); }
@media (max-width: 899px) { .panel { background: var(--glass-strong); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); } }
.panel-title h1 .icon-tile, .rain-side-head h1 .icon-tile { box-shadow: 0 0 22px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .3); }
.big-stat .v, .rank-row .rv, .st-dist, .drain-levels button b, .dp-val b, .radar-player .rtime { font-family: var(--font-num); letter-spacing: .02em; }
.big-stat .v { background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent; }
.list-group { font-family: var(--font-num); font-size: .6rem; letter-spacing: .2em; }
.leaflet-container { font-family: var(--font); }
.leaflet-tooltip { font-family: var(--font); }
/* ================= ฝนเรดาร์ + พื้นที่เสี่ยงน้ำขัง (nowcast) ================= */
.radar-overlay { image-rendering: pixelated; mix-blend-mode: normal; }
[data-theme="dark"] .radar-overlay { filter: saturate(1.15) brightness(1.1); }
.risk-cell { transition: fill-opacity .4s; }
.risk-cell.up { animation: risk-pulse 1.8s ease-in-out infinite; }
@keyframes risk-pulse { 50% { fill-opacity: .45; stroke-width: 2.5; } }
.map-legend i.sq { border-radius: 3px; }
.rain-card { padding: 12px !important; margin-bottom: 10px; }
.rain-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, var(--well)); border: 1px solid color-mix(in srgb, var(--c) 32%, var(--border)); font-size: .86rem; line-height: 1.35; }
.rain-row .lvl-dot { margin-top: 4px; }
.rain-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-family: var(--font-num, var(--font)); font-size: .62rem; font-weight: 700; vertical-align: 2px; color: #fff; background: #3B82F6; box-shadow: 0 0 10px -2px #3B82F6; }
.rain-chip .icon { width: 11px; height: 11px; }
.rain-chip.off { background: var(--well); color: var(--text-3); box-shadow: none; border: 1px solid var(--border); font-family: var(--font); font-weight: 500; }
.rain-detail { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--well); border: 1px solid var(--border); }
.rain-nums { gap: 6px !important; }
.rain-nums span { display: grid; min-width: 62px; padding: 6px 8px; border-radius: 10px; background: var(--hover); border: 1px solid var(--border); line-height: 1.15; }
.rain-nums b { font-family: var(--font-num, var(--font)); font-size: .95rem; color: var(--text); }
.rain-nums small { font-size: .62rem; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .risk-cell.up { animation: none; } }
.rain-row { width: 100%; text-align: left; color: var(--text); cursor: pointer; transition: border-color .2s, transform .2s; }
.rain-row:hover { border-color: var(--c); transform: translateX(2px); }
.rain-row > .icon { margin-left: auto; align-self: center; color: var(--text-3); flex: none; }