:root{--bg:#fff;--fg:#1d2330;--mut:#6b7280;--line:#eceef2;--soft:#f6f7f9;--red:#e5383b;--yellow:#f4b400;--green:#2eb872;--blue:#2f6fed;--w:380px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai","Helvetica Neue",Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
#app{display:flex;height:100%;width:100%}
#panel{width:var(--w);flex:0 0 var(--w);height:100%;overflow-y:auto;border-right:1px solid var(--line);padding:18px 18px 28px;background:#fff;z-index:1000}
#mapwrap{flex:1;position:relative}
#map{position:absolute;inset:0;background:#eef1f4}
.grab{display:none}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
h1{font-size:19px;margin:0;letter-spacing:-.2px}
.sub{color:var(--mut);font-size:12.5px}
.live{font-size:11px;font-weight:700;color:var(--red);display:flex;align-items:center;gap:6px;border:1px solid #f6d0d1;border-radius:99px;padding:3px 9px;white-space:nowrap}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:p 1.6s infinite}
@keyframes p{0%{box-shadow:0 0 0 0 rgba(229,56,59,.5)}70%{box-shadow:0 0 0 7px rgba(229,56,59,0)}100%{box-shadow:0 0 0 0 rgba(229,56,59,0)}}
.updated{color:var(--mut);font-size:12.5px;margin:6px 0 12px}
section{margin:0 0 18px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 0 8px;font-weight:600}
.alert{background:#fff7e6;border:1px solid #fde3a7;border-radius:10px;padding:10px 12px;font-size:12.5px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{border-radius:10px;padding:9px 10px;background:var(--soft);border-left:4px solid}
.kpi .v{font-size:22px;font-weight:700;line-height:1.1}.kpi .l{font-size:11px;color:var(--mut)}
.kpi.red{border-color:var(--red)}.kpi.yellow{border-color:var(--yellow)}.kpi.green{border-color:var(--green)}
.note{font-size:12px;color:var(--mut);margin:7px 0}
.list{display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:9px;padding:6px 6px;border-radius:8px;cursor:pointer}
.row:hover{background:var(--soft)}
.row .b{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.row .t{flex:1;min-width:0}.row .t div:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:11.5px;color:var(--mut)}
.row .n{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.muted{color:var(--mut)}.small{font-size:11.5px}
.tabs{display:flex;gap:4px;margin-bottom:6px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--fg)}
.tabs button.on{background:var(--fg);color:#fff;border-color:var(--fg)}
.legend div{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:3px 0}
.legend .lg-title{font-weight:600;margin-top:9px;font-size:12px}
.pill{display:inline-block;width:22px;height:8px;border-radius:5px;flex:0 0 22px}
.sw{display:inline-block;width:16px;height:12px;border-radius:3px}
.sw.radar{background:linear-gradient(90deg,#8fd3ff,#2f6fed,#ffd000,#ff4d4d)}
.cam{display:inline-flex;width:18px;height:18px;border-radius:5px;background:#1d2330;color:#fff;font-size:9px;align-items:center;justify-content:center;font-style:normal}
.scale{display:flex;flex-wrap:wrap;gap:4px}
.scale span{font-size:11px;padding:2px 6px;border-radius:5px;color:#fff}
.feeds{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.feed{display:flex;gap:8px;align-items:flex-start;font-size:12.5px}
.feed .st{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 8px;background:#c9ced6}
.feed.ok .st{background:var(--green)}.feed.fail .st{background:var(--red)}.feed.loading .st{background:var(--yellow)}
.feed .fs{color:var(--mut);font-size:11.5px}
.foot{line-height:1.6}
/* map controls */
.leaflet-control-layers{border:none!important;border-radius:10px!important;box-shadow:0 2px 12px rgba(0,0,0,.12)!important;font-size:13px}
.leaflet-control-layers-expanded{padding:8px 12px!important}
.leaflet-popup-content-wrapper{border-radius:12px}
.leaflet-popup-content{margin:12px 14px;font-size:13px;line-height:1.45}
.pp h3{margin:0 0 3px;font-size:14px}.pp .m{color:var(--mut);font-size:12px}
.pp .big{font-size:20px;font-weight:700}
.pp .tag{display:inline-block;padding:1px 8px;border-radius:99px;color:#fff;font-size:11.5px;font-weight:600}
.pp img.ph{width:100%;max-height:170px;object-fit:cover;border-radius:8px;margin-top:6px}
.pp video{width:100%;border-radius:8px;background:#000;margin-top:6px;aspect-ratio:16/9}
.camicon{background:#1d2330;color:#fff;border-radius:6px;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.roadicon{border-radius:6px;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.radar-ctl{position:absolute;left:12px;bottom:22px;z-index:900;background:#fff;border-radius:99px;box-shadow:0 2px 12px rgba(0,0,0,.14);padding:5px 12px 5px 5px;display:flex;align-items:center;gap:8px;font-size:12.5px}
.radar-ctl button{width:28px;height:28px;border-radius:50%;border:none;background:var(--fg);color:#fff;cursor:pointer;font-size:11px}
.hidden{display:none!important}
.feedfail{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:900;background:#fff;border-radius:99px;padding:5px 12px;box-shadow:0 2px 12px rgba(0,0,0,.14);font-size:12px}
@media (max-width:820px){
  #app{flex-direction:column-reverse}
  #mapwrap{flex:1;min-height:0}
  #panel{width:100%;flex:0 0 auto;height:auto;max-height:62vh;border-right:none;border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.08);padding:4px 16px 20px;transition:max-height .25s}
  #panel.collapsed-mobile{max-height:38vh}
  .grab{display:flex;justify-content:center;padding:6px 0 8px;cursor:pointer}
  .grab span{width:44px;height:5px;border-radius:9px;background:#d5d9e0}
  h1{font-size:17px}
  .leaflet-control-layers{font-size:12px}
  .radar-ctl{bottom:12px}
}