*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ecf5fb;color:#0b2d4a;font:14px 'Noto Sans Thai',sans-serif}aside{width:246px;position:fixed;inset:0 auto 0 0;background:linear-gradient(#062c4d,#0b4c7d);color:white;padding:22px 15px;z-index:8}aside h2{font-size:19px;margin:8px 0 0}aside small{color:#b6d5ed}nav:not(.mobile){display:grid;gap:8px;margin-top:32px}nav:not(.mobile) a{padding:12px;text-decoration:none;color:white;border-radius:9px}nav:not(.mobile) a:hover,nav:not(.mobile) a:first-child{background:#106bd1}.asidefoot{position:absolute;bottom:22px;font-size:12px;color:#bbd9ee}main{margin-left:246px;padding:18px;max-width:1900px}header,.panel,.stats section{background:white;border:1px solid #d6e6f3;border-radius:13px;box-shadow:0 2px 10px #0d426c0d}header{padding:18px;position:relative}h1{margin:0;font-size:23px}header p{margin:3px 0;color:#70869d;font-size:12px}#reload{position:absolute;right:17px;top:20px;background:#0871da;color:white;border:0;border-radius:9px;padding:9px 16px;cursor:pointer}.notice{background:#fff4d6;border:1px solid #f6d478;border-radius:9px;padding:11px 15px;margin:12px 0;color:#8d5a00}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}.stats section{padding:20px}.stats label{display:block;color:#526e89;font-size:12px}.stats strong{font-size:24px;display:block;margin:10px 0 0}.columns{display:grid;grid-template-columns:1.65fr 1fr;gap:12px}.panel{padding:17px;min-width:0}h3{margin:0 0 10px;font-size:17px}.muted{color:#71869b;font-size:12px;margin:5px 0 12px}#map{height:490px;border-radius:9px}.key{font-size:12px;color:#62798c;padding:8px 0}.entries{max-height:170px;overflow:auto}.entry{border-bottom:1px solid #e7f1f7;padding:8px 0}canvas{max-height:255px}.bottom{grid-template-columns:1fr 1fr;margin-top:12px}.scroll{overflow:auto;max-height:420px}table{width:100%;border-collapse:collapse;font-size:12px}th,td{padding:10px 9px;text-align:left;border-bottom:1px solid #e9f0f7}th{background:#f5faff;position:sticky;top:0}.buttons{display:flex;flex-wrap:wrap;gap:8px}.buttons a{background:#0b71d8;color:#fff;text-decoration:none;padding:11px 14px;border-radius:8px}#reportSection{margin-top:12px}footer{font-size:11px;text-align:center;color:#8297aa;margin:24px 0}.mobile{display:none}
@media(max-width:1000px){aside{width:76px;padding:15px 8px}aside h2{font-size:0}aside h2:before{content:'💧';font-size:26px}aside small,.asidefoot{display:none}aside nav a{font-size:0;text-align:center}aside nav a:first-letter{font-size:24px}main{margin-left:76px}.stats{grid-template-columns:repeat(2,1fr)}.columns{grid-template-columns:1fr}}
@media(max-width:650px){aside{display:none}main{margin:0;padding:9px 9px 84px}h1{font-size:18px;max-width:80%}header{padding:15px}header p{max-width:80%}.stats{gap:8px}.stats section{padding:13px 10px;min-height:105px}.stats strong{font-size:19px}.panel{margin-bottom:10px;padding:12px}.columns,.bottom{display:block}#map{height:380px}.mobile{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);bottom:0;left:0;right:0;z-index:1000;background:white;box-shadow:0 -1px 12px #164e7d21;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}.mobile a{display:grid;text-align:center;color:#0f5caa;text-decoration:none;font-size:18px}.mobile span{font-size:10px}}