:root{--navy:#061a2e;--blue:#0b77e3;--cyan:#16c7dc;--bg:#f2f7fb;--text:#17324d;--muted:#70859a;--normal:#15b87a;--watch:#f2b622;--danger:#f4772e;--critical:#e3384f;--shadow:0 12px 30px rgba(29,71,106,.10)}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Tahoma,"Noto Sans Thai",sans-serif;color:var(--text)}header{height:78px;padding:0 max(4vw,24px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dfebf4}header>div{display:flex;align-items:center;gap:12px}.logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--blue),var(--cyan));color:#fff;font-size:26px;font-weight:900}h1{font-size:20px;margin:0;color:var(--navy)}header p{font-size:12px;margin:3px 0 0;color:var(--muted)}.api-state{padding:9px 14px;border-radius:12px;background:#f5f9fc}.api-state>span{width:10px;height:10px;background:#aaa;border-radius:50%;box-shadow:0 0 0 4px #ddd6}.api-state>span.online{background:var(--normal);box-shadow:0 0 0 4px #15b87a22}.api-state>span.offline{background:var(--danger);box-shadow:0 0 0 4px #f4772e22}.api-state b,.api-state small{display:block;font-size:11px}.api-state small{color:var(--muted);margin-top:2px}main{max-width:1500px;margin:auto;padding:26px max(3vw,20px) 45px}.hero{min-height:180px;border-radius:24px;padding:30px 38px;background:radial-gradient(circle at 80% 30%,#087bd466,transparent 25%),linear-gradient(120deg,#061a2e,#0c4f83);color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.eyebrow{font-size:11px;letter-spacing:2px;color:#73e6f3;margin:0 0 8px}.hero h2{font-size:31px;line-height:1.25;margin:0}.hero h2 span{color:#56def0}.hero>div>p:last-child{font-size:13px;color:#c6dceb}.clock{text-align:right;padding:18px 22px;border:1px solid #ffffff30;border-radius:16px;background:#ffffff12;min-width:190px}.clock span,.clock small{display:block;font-size:11px;color:#b8d5e9}.clock strong{display:block;font-size:30px;margin:5px 0}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:18px 0}.cards article{background:#fff;border-radius:17px;padding:18px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow)}.cards i{width:12px;font-style:normal;font-size:26px}.cards span{font-size:12px;color:var(--muted)}.cards b{display:block;font-size:25px;color:var(--navy);margin-top:3px}.all{color:var(--blue)}.normal{color:var(--normal);background:var(--normal)}.watch{color:var(--watch);background:var(--watch)}.danger{color:var(--danger);background:var(--danger)}.critical{color:var(--critical);background:var(--critical)}.cards i{background:none}.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.panel{background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.panel-title{min-height:72px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7eff5}.panel-title h3{font-size:16px;margin:0;color:var(--navy)}.panel-title p{font-size:11px;margin:5px 0 0;color:var(--muted)}.legend{display:flex;gap:12px;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:50%}#map{height:430px}.priority{height:430px;overflow:auto;padding:10px 16px}.priority-item{padding:15px 4px;border-bottom:1px solid #edf2f6;display:grid;grid-template-columns:10px 1fr auto;gap:11px;align-items:center}.priority-item>i{width:9px;height:42px;border-radius:8px}.priority-item h4{font-size:12px;margin:0 0 5px}.priority-item p{font-size:10px;color:var(--muted);margin:0}.priority-item strong{font-size:16px}.priority-item small{display:block;text-align:right;font-size:9px;color:var(--muted)}.table-panel{margin-top:18px}.filters{display:flex;gap:8px}.filters input,.filters select{border:1px solid #d8e5ef;border-radius:10px;padding:9px 12px;color:var(--text);background:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);background:#f8fbfd;font-size:10px;padding:13px 18px}td{padding:14px 18px;border-top:1px solid #edf2f6;white-space:nowrap}td b{color:var(--navy)}.badge{display:inline-block;padding:5px 10px;border-radius:20px;color:#fff;font-size:10px}.progress{width:90px;height:6px;border-radius:5px;background:#e7edf2;overflow:hidden}.progress i{display:block;height:100%;border-radius:5px}footer{text-align:center;padding:22px;color:var(--muted);font-size:10px}.leaflet-popup-content b{font-size:14px}.leaflet-popup-content p{margin:5px 0}@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.legend{display:none}.hero{padding:24px}.hero h2{font-size:25px}.clock{display:none}.panel-title{align-items:flex-start;gap:12px;flex-direction:column}.filters{width:100%}.filters input{min-width:0;flex:1}}@media(max-width:520px){header p{display:none}.api-state{padding:7px}.hero{min-height:150px}.cards{grid-template-columns:1fr 1fr}.cards article:first-child{grid-column:1/-1}#map,.priority{height:360px}}