@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');
/* Public landing banner supplied by the municipality */
.hero-header{width:100%;background:#d9efff;overflow:hidden}.hero-header img{display:block;width:100%;height:auto}
:root{font-family:'IBM Plex Sans Thai',system-ui,sans-serif;color:#172b35;background:#f6f8f9;font-synthesis:none;font-optical-sizing:auto}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f6f8f9}.topbar{height:78px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebee;background:#fff}.brand{display:flex;align-items:center;gap:13px}.brand-emblem{width:48px;height:48px;border-radius:50%;border:1px solid #e0e7ea;display:grid;place-items:center;background:#fff;overflow:hidden;flex:none}.brand-logo{width:100%;height:100%;object-fit:contain}.brand-fallback{font-size:13px;font-weight:700;color:#35716c}.brand-copy strong{display:block;font-size:15px;font-weight:600;color:#163947;line-height:1.35}.brand-copy small{display:block;font-size:11px;color:#71828a;margin-top:2px}.public-pill{font-size:11px;color:#47717b;background:#f2f7f8;border:1px solid #e3edef;border-radius:99px;padding:6px 11px}.intro{max-width:1440px;margin:auto;padding:38px clamp(20px,5vw,76px) 23px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.eyebrow{color:#4c7c87;font-size:12px;font-weight:500;margin:0 0 5px}h1{font-size:clamp(23px,2.7vw,32px);letter-spacing:-.3px;font-weight:600;color:#173744;margin:0 0 4px}.lead{color:#697e86;margin:0;font-size:13px}.live-status{border:1px solid #e3e9ec;background:#fff;border-radius:9px;padding:9px 13px;min-width:205px;font-size:12px;color:#344c55}.pulse{display:inline-block;width:7px;height:7px;background:#24a477;border-radius:50%;margin-right:7px}.live-status small{display:block;color:#87969b;margin:3px 0 0 14px;font-size:10px}.camera-grid{max-width:1440px;margin:auto;padding:0 clamp(20px,5vw,76px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.camera{overflow:hidden;border:1px solid #e0e7ea;border-radius:10px;background:#fff;box-shadow:0 2px 8px #193c4a08}.screen{position:relative;aspect-ratio:16/9;background:#e9eef0;display:grid;place-items:center;cursor:pointer}.screen video{width:100%;height:100%;object-fit:contain;background:#111}.placeholder{text-align:center;color:#829198;font-size:12px}.placeholder .icon{display:block;font-size:25px;color:#9aa9ae;margin-bottom:4px}.tag{position:absolute;left:10px;top:10px;background:#ffffffed;border:1px solid #e0e7ea;border-radius:5px;padding:3px 7px;font-size:10px;color:#586a71}.tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#dc9a4b;margin-right:5px}.tag.online{color:#267658}.tag.online i{background:#24a477}.expand{position:absolute;right:9px;top:9px;border:1px solid #ffffff44;border-radius:5px;background:#13242ac9;color:white;font-size:15px;width:28px;height:28px;cursor:pointer}.cam-info{padding:10px 12px 11px;display:flex;justify-content:space-between;gap:8px;align-items:center}.cam-info strong{font-size:12px;font-weight:600;color:#243e48}.cam-info small{display:block;color:#849399;font-size:10px;margin-top:2px}.state{white-space:nowrap;color:#71848a;font-size:10px}.note{max-width:1288px;margin:17px auto 30px;padding:0 clamp(20px,5vw,76px);color:#829198;font-size:11px}footer{border-top:1px solid #e5ebee;background:#fff;padding:15px clamp(20px,5vw,76px);display:flex;justify-content:space-between;color:#829198;font-size:10px}dialog{padding:0;border:1px solid #dbe4e7;border-radius:10px;background:#fff;color:#172b35;width:min(92vw,1200px);max-width:none}dialog::backdrop{background:#0e2025c9}.close{position:absolute;z-index:2;right:10px;top:10px;border:0;background:#13242acc;color:white;width:34px;height:34px;border-radius:50%;font-size:23px;cursor:pointer}dialog .screen{aspect-ratio:16/9}.modal-label{padding:9px 14px;color:#344c55;font-size:13px}@media(max-width:900px){.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{align-items:flex-start;flex-direction:column;padding-top:30px}.live-status{width:100%}}@media(max-width:560px){.topbar{height:68px}.brand{gap:9px}.brand-emblem{width:40px;height:40px}.brand-copy strong{font-size:12px}.brand-copy small{font-size:10px}.public-pill{font-size:9px;padding:5px 8px}.camera-grid{grid-template-columns:1fr;gap:12px}.intro{padding-top:25px}.cam-info strong{font-size:13px}footer{gap:5px;flex-direction:column}}