*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif;background:#f4f7f5;color:#18312b}.page{max-width:1100px;margin:auto;padding:20px}.topbar{margin-bottom:16px}.topbar h1{margin:7px 0 2px;font-size:clamp(1.55rem,4vw,2.25rem)}.topbar p{margin:0;color:#61706b}.back{color:#176c59;text-decoration:none}.controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:#fff;padding:14px;border-radius:16px;margin-bottom:12px;box-shadow:0 2px 12px #0000000b}.controls label{display:grid;gap:6px;font-weight:650}.controls select,.controls button{font:inherit;border:1px solid #ccd8d3;border-radius:11px;padding:10px 14px;background:#fff}.controls button{background:#176c59;color:white;border-color:#176c59;cursor:pointer}.status{margin:10px 2px;color:#5f6e69}.status.error{color:#b42318}.card{background:#fff;border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 2px 14px #0000000b}.map-card{padding:0;overflow:hidden;position:relative}#map{height:620px}.legend{position:absolute;z-index:500;left:14px;bottom:14px;background:#fffffff2;border-radius:12px;padding:10px 12px;box-shadow:0 2px 12px #0002;display:grid;gap:4px;font-size:.86rem}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:14px;height:14px;border-radius:50%;display:inline-block}.l0{background:#cfd8d3}.l1{background:#70b36b}.l2{background:#e5a93b}.l3{background:#cb3d32}.l4{background:#843b93}.district-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.district{border:1px solid #e0e8e4;border-radius:13px;padding:12px}.district strong{display:block}.rain{font-size:1.45rem;font-weight:750;margin-top:4px}.note{color:#68766f;font-size:.9rem}footer{text-align:center;color:#718079;font-size:.85rem;padding:18px 0 30px}@media(max-width:640px){.page{padding:12px}#map{height:65vh;min-height:470px}.legend{font-size:.76rem}.card{border-radius:14px}.controls>*{flex:1}.controls select,.controls button{width:100%}}

.controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.controls label{display:flex;flex-direction:column;gap:7px}
.district-label{background:rgba(255,255,255,.86);border:0;box-shadow:0 1px 4px rgba(0,0,0,.12);border-radius:5px;color:#173a30;font-size:11px;line-height:1.25;text-align:center;padding:3px 5px;white-space:nowrap;pointer-events:none}
.district-label::before{display:none}
.district-label strong{font-size:12px;font-weight:700}
.tmd-popup{line-height:1.6;min-width:190px}
[hidden]{display:none!important}
@media(max-width:640px){.district-label{font-size:9px;padding:2px 3px}.district-label strong{font-size:10px}}


/* v7: legend above map + fullscreen map */
.legend-top{
  position:static !important;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 10px;
  padding:10px 14px;
  background:#fff;
  border:1px solid #dfe7e3;
  border-radius:12px;
  box-shadow:none;
}
.legend-top strong{margin-right:4px}
.legend-top span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.legend-top i{width:14px;height:14px;display:inline-block;border-radius:3px}

.map-card{position:relative;overflow:hidden}
.map-fullscreen-btn{
  position:absolute;
  z-index:1001;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.95);
  box-shadow:0 1px 5px rgba(0,0,0,.28);
  color:#173a30;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.map-fullscreen-btn:hover{background:#fff}

.map-card:fullscreen,
.map-card.pseudo-fullscreen{
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
}
.map-card:fullscreen #map,
.map-card.pseudo-fullscreen #map{
  width:100%;
  height:100vh !important;
  min-height:100vh;
}
.map-card.pseudo-fullscreen{
  position:fixed;
  inset:0;
  z-index:99999;
}
body.map-open{overflow:hidden}

@media(max-width:640px){
  .legend-top{
    gap:7px 10px;
    padding:8px 10px;
    font-size:12px;
    border-radius:9px;
  }
  .legend-top strong{
    flex:0 0 100%;
    font-size:12px;
  }
  .legend-top i{width:11px;height:11px}
  .map-fullscreen-btn{
    width:38px;height:38px;top:8px;right:8px;font-size:21px;
  }
}

/* v8: desktop sidebar + mobile drawer */
.map-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}
.side-panel{position:sticky;top:12px;background:#fff;border:1px solid #dfe7e3;border-radius:16px;padding:14px;box-shadow:0 2px 12px #0000000b;z-index:900}
.side-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:1rem}.side-panel-head button{display:none}
.side-panel .controls{display:grid;gap:14px;padding:0;margin:0;box-shadow:none;border-radius:0}.side-panel .controls label{width:100%}.side-panel .controls select,.side-panel .controls button{width:100%}
.map-main{min-width:0}.map-main .status{margin-top:0}.menu-toggle,.panel-backdrop{display:none}
@media(max-width:760px){
  .page{padding:10px}.topbar{padding-right:52px}.topbar h1{font-size:1.65rem}
  .map-layout{display:block}.side-panel{position:fixed;top:0;left:0;bottom:0;width:min(84vw,320px);border-radius:0;z-index:10020;padding:18px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:4px 0 24px #0004}
  body.tmd-menu-open .side-panel{transform:translateX(0)}.side-panel-head button{display:block;border:0;background:transparent;font-size:20px;padding:5px;cursor:pointer}
  .menu-toggle{display:block;position:fixed;top:12px;left:12px;z-index:10010;width:42px;height:42px;border:0;border-radius:10px;background:#176c59;color:#fff;font-size:23px;line-height:1;box-shadow:0 2px 10px #0003;cursor:pointer}
  .panel-backdrop{position:fixed;inset:0;z-index:10015;border:0;background:#0006;padding:0}body.tmd-menu-open .panel-backdrop{display:block}
  body.tmd-menu-open{overflow:hidden}.topbar{margin-left:46px}.status{font-size:.9rem}
  #map{height:72vh;min-height:520px}.legend-top{margin-top:8px}
}

/* v9: forecast verification */
.verify-controls{display:grid;gap:12px;border-top:1px solid #e5ece8;padding-top:14px;margin-top:2px}
.section-label{font-weight:800;color:#176c59}.secondary-btn{background:#eef7f4!important;color:#176c59!important;border-color:#b9d9d0!important}
.verification-card{position:relative}.verification-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.verification-head h2{margin:0 0 5px;font-size:1.2rem}.verification-head p{margin:0}
.verify-badge{font-size:.78rem;background:#eef7f4;color:#176c59;border-radius:999px;padding:6px 10px;white-space:nowrap}.chart-wrap{height:320px;margin-top:16px}.verification-empty{height:220px;display:flex;align-items:center;justify-content:center;color:#73817b;border:1px dashed #ccd8d3;border-radius:12px;margin-top:14px}.verification-card.has-chart .verification-empty{display:none}.verification-card:not(.has-chart) .chart-wrap{display:none}
@media(max-width:760px){.verification-head{display:block}.verify-badge{display:inline-block;margin-top:8px}.chart-wrap{height:280px}.verification-card{padding:12px}}