:root{
  --bg:#f3f6f7;--card:#fff;--ink:#17242b;--muted:#64747c;
  --line:#dce5e8;--accent:#176b55;--accent-dark:#0e4c3c;
  --shadow:0 4px 16px rgba(20,50,45,.10)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Noto Sans Thai",Tahoma,sans-serif}
.topbar{
  padding:18px 24px;background:var(--accent-dark);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px
}
.header-main{max-width:1000px}
.title-row{display:flex;align-items:flex-start;gap:14px}
h1{font-size:25px;line-height:1.25;margin:0 0 3px;font-weight:700}
.title-en{font-size:14px;font-style:italic;opacity:.86}
.badge-prelim{
  display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.08em;background:#ffe6a7;color:#664d03;
  white-space:nowrap;margin-top:3px
}
.dataset-description{
  margin-top:10px;max-width:940px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.88)
}
.dataset-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.dataset-tags span{
  padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);font-size:10.5px;color:rgba(255,255,255,.92)
}
.meta{
  min-width:250px;text-align:right;font-size:12px;line-height:1.75;
  padding-left:20px;border-left:1px solid rgba(255,255,255,.18)
}
main{max-width:1500px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.controls{padding:12px 14px;margin-bottom:14px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.control-group{display:flex;align-items:center;gap:10px}.control-title{font-size:13px;font-weight:700}
.button-row{display:flex;gap:6px;flex-wrap:wrap}
button{
  border:1px solid #c8d3d7;background:#fff;color:#24353d;padding:8px 13px;
  border-radius:8px;cursor:pointer;font-weight:600
}
button:hover{background:#eef5f3}button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.period-info{
  margin-left:auto;font-size:12px;color:var(--muted);background:#f5f8f8;
  border:1px solid #e2e9eb;border-radius:8px;padding:7px 10px
}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px}
.map-card{position:relative;overflow:hidden}
#map{height:700px;width:100%;background:#dde7e9}
.side-card{padding:18px}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--muted);font-weight:700}
.side-card h2{font-size:23px;margin:6px 0 2px}.area-sub{font-size:12px;color:var(--muted);min-height:34px;margin-bottom:10px;line-height:1.45}
.condition{display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:9px;margin:5px 0 12px;font-size:13px}
.condition-dot{width:9px;height:9px;border-radius:50%;background:#8a969c}.condition.neutral{background:#f2f5f6;color:#64747c}
.condition.low{background:#fff0ec;color:#9c372b}.condition.slight-low{background:#fff7e8;color:#875d17}.condition.normal{background:#edf7ef;color:#2e6b3d}
.condition.slight-high{background:#eaf4fb;color:#2f6080}.condition.high{background:#e8eefb;color:#294c8b}
.condition.low .condition-dot{background:#c44736}.condition.slight-low .condition-dot{background:#d79a32}.condition.normal .condition-dot{background:#4b9a5c}
.condition.slight-high .condition-dot{background:#4a8fbd}.condition.high .condition-dot{background:#3d62ad}
.area-method{
  padding:9px 10px;border:1px solid #dcebe5;background:#f5faf8;border-radius:9px;
  margin-bottom:12px;font-size:11px;color:#5b6e67
}
.area-method span{display:block;margin-bottom:2px}.area-method strong{color:#235b4d}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{padding:13px;border:1px solid var(--line);border-radius:10px;background:#fafcfc}
.metric span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.metric strong{font-size:24px}.metric small{font-size:11px;margin-left:3px;color:var(--muted)}
.note,.source-box{margin-top:16px;padding:12px;border-radius:9px;font-size:12px;line-height:1.6;color:#52656d}
.note{background:#f2f6f5}.source-box{background:#f8fafb;border:1px solid #e5ecee}
.legend{
  position:absolute;right:12px;bottom:18px;z-index:800;background:rgba(255,255,255,.95);
  border:1px solid #d5dfe2;border-radius:9px;padding:10px 11px;min-width:128px;
  font-size:11px;box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.legend-title{font-weight:700;margin-bottom:7px}.legend-row{display:flex;align-items:center;gap:7px;margin:3px 0}
.swatch{width:18px;height:10px;border:1px solid rgba(0,0,0,.15)}
.home-btn{
  position:absolute;left:12px;bottom:18px;z-index:850;background:#fff;border:1px solid #cbd6da;
  color:#24353d;box-shadow:0 2px 7px rgba(0,0,0,.12)
}
.tambon-control{
  position:absolute;top:12px;right:12px;z-index:1100;width:370px;max-width:calc(100% - 24px);
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;box-shadow:var(--shadow)
}
.tambon-control label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#2c4941}
.tambon-search-row{display:flex;gap:6px}
.tambon-search-row input{
  min-width:0;flex:1;width:100%;padding:9px 11px;border:1px solid #cfdcdf;border-radius:9px;
  font-size:13px;outline:none;background:#fff;color:var(--ink)
}
.tambon-search-row input:focus{border-color:#5d9888;box-shadow:0 0 0 2px rgba(23,107,85,.10)}
.clear-search-btn{
  flex:0 0 38px;padding:0;border-radius:9px;background:#f7faf9;color:#6a7a75;font-size:20px;
  border:1px solid #d9e4e1
}
.search-help{margin-top:6px;color:#73847e;font-size:10.5px;line-height:1.4}
.suggestion-box{
  display:none;position:absolute;top:calc(100% - 5px);left:12px;right:12px;z-index:1200;
  max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.17)
}
.suggestion-item{padding:9px 10px;border-bottom:1px solid #eef3f1;cursor:pointer;font-size:13px;line-height:1.35}
.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.active{background:#edf7f3}
.suggestion-main{font-weight:700;color:#145a45}.suggestion-sub{margin-top:2px;color:var(--muted);font-size:11px}
.footer-note{margin-top:14px;padding:11px 14px;font-size:12px;line-height:1.55;color:#52656d}
.about-data{margin-top:10px;overflow:hidden}.about-data summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;color:#31474f;background:#f8fafb}
.about-data summary:hover{background:#f1f6f5}.about-content{padding:2px 16px 12px;font-size:12px;line-height:1.65;color:#52656d}.about-content p{margin:10px 0}
.leaflet-container{font-family:Arial,"Noto Sans Thai",Tahoma,sans-serif}.province-tooltip{font-weight:700}
@media(max-width:900px){
  .topbar{grid-template-columns:1fr;gap:14px}.meta{text-align:left;padding-left:0;padding-top:10px;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .title-row{flex-wrap:wrap}h1{font-size:21px}.dataset-description{font-size:12px}
  .dashboard-grid{grid-template-columns:1fr}.map-card{overflow:visible}
  #map{height:590px}.period-info{width:100%;margin-left:0}
  .tambon-control{position:relative;top:auto;right:auto;width:auto;max-width:none;margin:10px;z-index:1100}
  .suggestion-box{top:calc(100% - 4px)}
}

.suggestion-line{display:flex;align-items:center;justify-content:space-between;gap:8px}
.level-badge{flex:0 0 auto;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:700;border:1px solid #d9e4e1}
.level-badge.province{background:#eef6ff;color:#315d8a;border-color:#d5e5f5}
.level-badge.amphoe{background:#f3eefb;color:#69458a;border-color:#e2d6f1}
.level-badge.tambon{background:#edf7f3;color:#25634f;border-color:#d4e9e1}
.suggestion-empty{padding:11px;color:#75837e;font-size:12px}


/* ===== V1.4.1 Mobile Map Fix ===== */
#map{
  min-height:520px;
  touch-action:pan-x pan-y;
}
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  main{width:100%;max-width:none;padding:10px}
  .topbar{padding:14px 14px 12px}
  .header-main{max-width:100%;min-width:0}
  .title-row{width:100%;align-items:flex-start}
  h1{font-size:19px;line-height:1.32;overflow-wrap:anywhere}
  .title-en{font-size:11.5px;line-height:1.4}
  .dataset-description{font-size:11px;line-height:1.5}
  .dataset-tags{gap:5px}
  .dataset-tags span{font-size:9.5px;padding:3px 6px}
  .controls{gap:12px;padding:10px;align-items:flex-start}
  .control-group{width:100%;align-items:flex-start;flex-wrap:wrap}
  .button-row{width:100%}
  .button-row button{flex:1 1 auto;min-width:86px}
  .period-info{width:100%;margin:0}
  .dashboard-grid{display:block}
  .map-card{width:100%;min-width:0;overflow:hidden;margin-bottom:12px}
  #map{width:100%!important;height:65vh!important;min-height:440px;max-height:720px;display:block}
  .tambon-control{left:10px;right:10px;top:auto;bottom:12px;width:auto;max-width:none;z-index:1000}
  .tambon-search-row{width:100%}
  .tambon-search-row input{min-width:0;width:100%;font-size:16px}
  .suggestion-box{max-height:240px}
  .legend{top:10px;right:10px;bottom:auto;max-height:42vh;overflow:auto;font-size:10px}
  .home-btn{left:10px;bottom:116px}
  .side-card{width:100%;margin-top:0}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric strong{font-size:21px}
  .leaflet-control-zoom{margin-top:10px!important;margin-left:10px!important}
}
@media (max-width:430px){
  #map{height:62vh!important;min-height:420px}
  .legend{transform:scale(.92);transform-origin:top right}
}


/* ===== V1.4.2 Local Leaflet / resilient basemap ===== */
#map{
  background:#dfe8ea;
}
.basemap-status{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  z-index:1200;
  max-width:min(520px,calc(100% - 24px));
  padding:7px 10px;
  border-radius:8px;
  background:rgba(255,248,225,.96);
  border:1px solid #e7ce8a;
  color:#6b571d;
  font-size:11px;
  line-height:1.4;
  box-shadow:0 1px 5px rgba(0,0,0,.12);
  pointer-events:none;
}
@media(max-width:900px){
  .basemap-status{
    top:8px;
    font-size:10px;
  }
}