*{box-sizing:border-box}html,body{margin:0;background:#06111f;color:#eaf4ff;font-family:system-ui,"Noto Sans Thai",sans-serif}body{min-height:100vh;background:radial-gradient(circle at 20% 0,#12345a 0,#071525 36%,#030a12 100%)}header{height:72px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16;background:#071524cc;backdrop-filter:blur(18px);position:sticky;top:0;z-index:1000}header b{font-size:19px;letter-spacing:.7px}header small{display:block;color:#91a9c3;margin-top:3px}.live{font-weight:800;color:#5ee6a8}.glass,.card{background:#0d2136b8;border:1px solid #ffffff16;box-shadow:0 16px 40px #0005;backdrop-filter:blur(18px);border-radius:18px}main{padding:18px;max-width:1800px;margin:auto}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{padding:16px 18px}.card span{color:#9db1c7}.card strong{display:block;font-size:30px;margin-top:4px}.card.watch strong{color:#ffd166}.card.high strong{color:#ff9f43}.card.critical strong{color:#ff5d73}.toolbar{margin:12px 0;padding:10px;display:flex;gap:12px;align-items:center;justify-content:space-between}.toolbar input{width:min(520px,70%);background:#071728;border:1px solid #ffffff18;color:white;padding:12px 15px;border-radius:12px;outline:none}.toolbar span{font-size:12px;color:#8da5be}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px}.mapwrap{padding:8px;position:relative}#map{height:calc(100vh - 250px);min-height:520px;border-radius:13px;background:#071728}.legend{position:absolute;z-index:500;left:20px;bottom:20px;background:#06111fe8;padding:9px 12px;border-radius:12px;font-size:12px;box-shadow:0 8px 25px #0007}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 9px}.legend i:first-child{margin-left:0}.normal{background:#46d39a}.watch{background:#ffd166}.high{background:#ff9f43}.critical{background:#ff5d73}.unknown{background:#8292a6}aside{padding:14px;max-height:calc(100vh - 250px);overflow:auto}aside h3{margin:3px 3px 12px}.station{padding:11px;border-bottom:1px solid #ffffff10;cursor:pointer}.station:hover{background:#ffffff08}.station b{display:block;font-size:14px}.station small{color:#91a7be}.pill{display:inline-block;font-size:10px;padding:3px 7px;border-radius:20px;margin-top:5px;background:#25364a}.empty{padding:25px 8px;color:#91a7be;text-align:center}footer{text-align:center;color:#70879e;font-size:11px;padding:14px}@media(max-width:800px){header{height:64px;padding:0 14px}header b{font-size:15px}header small{font-size:10px}.cards{grid-template-columns:1fr 1fr}.card{padding:12px}.card strong{font-size:24px}.layout{grid-template-columns:1fr}#map{height:55vh;min-height:400px}aside{max-height:330px}.toolbar{align-items:stretch;flex-direction:column}.toolbar input{width:100%}}