:root{color-scheme:dark;--bg:#07101d;--panel:#0b1726;--panel2:#101f31;--line:#203349;--muted:#7f91a8;--text:#eef6ff;--cyan:#4de3ff;--blue:#47a9ff;--red:#ff4d68;--amber:#ffae42;--yellow:#ffd34f;--green:#42d49c;--shadow:0 16px 50px rgba(0,0,0,.34)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans Thai","Segoe UI",system-ui,sans-serif;overflow:hidden}button,input{font:inherit}.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(7,16,29,.94);backdrop-filter:blur(14px);position:relative;z-index:1000}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#0f89ff,#39e4ff);color:#001321;font-weight:900;letter-spacing:-1px;box-shadow:0 0 30px rgba(77,227,255,.18)}.brand strong{display:block;font-size:15px;letter-spacing:.2px}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:1px;text-transform:uppercase;letter-spacing:.9px}.top-status{display:flex;align-items:center;gap:9px}.clock{font-variant-numeric:tabular-nums;font-size:13px;color:#cbd7e6}.source-pill{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:#9fb0c3;font-size:11px;background:#0b1522}.source-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.icon-btn{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#0d1b2a;color:#eaf6ff;cursor:pointer;font-size:18px}.icon-btn:hover{border-color:#376486}.shell{height:calc(100vh - 88px);display:grid;grid-template-columns:292px minmax(420px,1fr) 300px;gap:0}.rail{overflow:auto;padding:11px;background:#081321;scrollbar-width:thin;scrollbar-color:#263f58 transparent}.left-rail{border-right:1px solid var(--line)}.right-rail{border-left:1px solid var(--line)}.panel{background:linear-gradient(180deg,rgba(15,31,49,.94),rgba(10,23,38,.94));border:1px solid #1d334a;border-radius:14px;padding:12px;margin-bottom:10px;box-shadow:0 8px 30px rgba(0,0,0,.14)}.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.45px;margin-bottom:10px}.mini{color:var(--muted);font-size:10px;font-weight:500;text-transform:none;letter-spacing:0}.weather-main{display:flex;align-items:center;justify-content:space-between}.weather-main>div:first-child{display:flex;align-items:center;gap:8px}.weather-main strong{font-size:34px;line-height:1;font-weight:700}.weather-icon{font-size:29px}.weather-copy{display:flex;flex-direction:column;text-align:right}.weather-copy b{font-size:12px}.weather-copy span{color:var(--muted);font-size:10px;margin-top:3px}.forecast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px}.forecast-item{padding:7px 5px;background:#0a1522;border:1px solid #1b2b3c;border-radius:9px;text-align:center}.forecast-item b{display:block;font-size:11px}.forecast-item span{display:block;color:#78cdf9;font-size:10px;margin-top:3px}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.kpi{border:1px solid var(--line);background:#0b1725;border-radius:11px;padding:10px;text-align:left;color:var(--text);cursor:pointer}.kpi:hover{transform:translateY(-1px);border-color:#395a78}.kpi span{display:block;font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}.kpi small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.kpi.danger span{color:var(--red)}.kpi.warning span{color:var(--amber)}.kpi.wet span{color:var(--blue)}.search{display:flex;align-items:center;width:105px;border:1px solid #27405a;border-radius:8px;overflow:hidden;background:#07121e}.search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#dbe9f7;padding:5px 6px;font-size:10px}.search span{padding-right:6px;color:#617890}.critical-list,.flow-list{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow:auto}.critical-item,.flow-item{display:grid;align-items:center;gap:8px;background:#091522;border:1px solid #1c3044;border-radius:10px;padding:8px;cursor:pointer}.critical-item{grid-template-columns:44px 1fr auto}.critical-depth{height:42px;border-radius:9px;display:grid;place-items:center;align-content:center;background:#172235;font-weight:900;font-size:16px}.critical-depth small{font-size:8px;font-weight:600;color:#c1cad4}.critical-item.severity-critical .critical-depth{background:rgba(255,77,104,.16);color:#ff6d81;border:1px solid rgba(255,77,104,.32)}.critical-item.severity-severe .critical-depth{background:rgba(255,174,66,.14);color:#ffbd66;border:1px solid rgba(255,174,66,.3)}.critical-item.severity-high .critical-depth{background:rgba(255,211,79,.12);color:#ffe078}.critical-item.severity-flooded .critical-depth{background:rgba(71,169,255,.13);color:#66b8ff}.critical-name{min-width:0}.critical-name b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.critical-name span{display:block;color:var(--muted);font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fresh{font-size:8px;color:#78dcae}.stale{font-size:8px;color:#ff9f64}.go{color:#698197;font-size:13px}.hint,.flow-note{font-size:9px;line-height:1.45;color:#73869b;margin:9px 0 0}.flow-note{padding:7px 8px;background:#07131f;border-radius:8px;margin:0 0 8px}.flow-item{grid-template-columns:34px 1fr auto;cursor:pointer}.flow-dir{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(77,227,255,.11);border:1px solid rgba(77,227,255,.24);color:var(--cyan);font-weight:900}.flow-dir.negative{color:#b893ff;border-color:rgba(184,147,255,.25);background:rgba(184,147,255,.1)}.flow-copy b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-copy span{display:block;color:var(--muted);font-size:8.5px;margin-top:2px}.flow-value{text-align:right}.flow-value strong{display:block;font-size:11px;font-variant-numeric:tabular-nums}.flow-value small{color:#7991a8;font-size:8px}.source-health{display:flex;flex-direction:column;gap:7px}.health-row{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;font-size:10px}.health-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(66,212,156,.45)}.health-dot.warn{background:var(--amber);box-shadow:none}.health-dot.bad{background:var(--red);box-shadow:none}.health-row span{color:#c8d4e0}.health-row small{color:var(--muted)}.action-link{text-decoration:none;color:var(--text);display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:8px;border:1px solid #1c3044;border-radius:10px;margin-top:6px;background:#091522}.action-link:hover{border-color:#345f7f}.action-link>span{color:var(--cyan);font-size:15px;text-align:center}.action-link b{display:block;font-size:10px}.action-link small{display:block;color:var(--muted);font-size:8.5px;margin-top:2px}.action-link em{font-style:normal;color:#647f98}.map-stage{position:relative;min-width:0;background:#09131f}.map-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,10,20,.22);z-index:400}#map{position:absolute;inset:0;background:#07121b}.leaflet-container{font-family:inherit;background:#07121b}.leaflet-control-zoom a{background:#0c1b2b!important;color:#d8e8f8!important;border-color:#284059!important}.leaflet-control-attribution{background:rgba(8,18,29,.76)!important;color:#7890a6!important;font-size:8px!important}.leaflet-control-attribution a{color:#74b8da!important}.glass{background:rgba(8,20,33,.86);border:1px solid rgba(72,106,136,.36);backdrop-filter:blur(12px);box-shadow:var(--shadow)}.map-head{position:absolute;z-index:500;top:12px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(125px,1fr));border-radius:12px;overflow:hidden}.map-head>div{padding:9px 14px;min-width:135px}.map-head>div+div{border-left:1px solid rgba(76,110,139,.32)}.map-head small{display:block;color:#8ea0b3;font-size:8.5px}.map-head strong{display:inline-block;font-size:17px;margin-top:2px;margin-right:5px}.map-head span{font-size:8px;color:#96abc0}.layer-box{position:absolute;z-index:500;left:12px;top:76px;border-radius:12px;padding:10px 11px;display:flex;flex-direction:column;gap:7px;font-size:9.5px;min-width:142px}.layer-box strong{font-size:10px;margin-bottom:2px}.layer-box label{display:flex;align-items:center;gap:6px;cursor:pointer}.layer-box input[type=checkbox]{accent-color:#38bdf8}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.dot.red{background:var(--red)}.dot.blue{background:var(--cyan)}.dot.radar{background:#8c5bff}.dot.amber{background:var(--amber)}.line{display:inline-block;width:12px;height:2px}.line.cyan{background:#31d2e9}.opacity-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px;color:#71869a;border-top:1px solid #1d3145;padding-top:6px;margin-top:2px}.opacity-row input{width:75px;accent-color:#8c5bff}.legend{position:absolute;z-index:500;bottom:12px;left:50%;transform:translateX(-50%);border-radius:999px;padding:7px 10px;display:flex;gap:10px;white-space:nowrap;font-size:8px;color:#a9b8c7}.legend span{display:flex;align-items:center;gap:4px}.legend-dot{width:7px;height:7px;border-radius:50%}.legend-dot.critical{background:#ff405e}.legend-dot.severe{background:#ff9e3d}.legend-dot.high{background:#ffd448}.legend-dot.flood{background:#359fff}.legend-dot.normal{background:#3dd29b}.locate-btn{position:absolute;z-index:500;right:12px;bottom:12px;width:38px;height:38px;border-radius:12px;color:#dff8ff;display:grid;place-items:center;font-size:22px;cursor:pointer}.flood-marker{border:2px solid rgba(255,255,255,.75);box-shadow:0 2px 12px rgba(0,0,0,.55)}.flow-marker{display:grid;place-items:center;border-radius:50%;background:#07131e;border:2px solid #4de3ff;color:#4de3ff;box-shadow:0 2px 14px rgba(0,0,0,.55);font-size:10px;font-weight:900}.flow-marker.neg{border-color:#aa81ff;color:#aa81ff}.flow-marker.bad{border-color:#6d7783;color:#6d7783}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0a1725;color:#eaf4ff;box-shadow:0 12px 30px rgba(0,0,0,.45)}.leaflet-popup-content{margin:10px 12px;min-width:190px}.popup-title{font-weight:800;font-size:11px;margin-bottom:6px}.popup-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;font-size:9px}.popup-grid span{color:#7e92a7}.popup-grid b{font-weight:600}.popup-actions{display:flex;gap:6px;margin-top:9px}.popup-actions a{font-size:9px;text-decoration:none;color:#cdeeff;background:#102942;border:1px solid #2c506e;border-radius:7px;padding:5px 7px}.canal-path{stroke:#30d8ea;stroke-width:1.5;stroke-opacity:.52;fill:none}.footer{height:28px;border-top:1px solid var(--line);background:#07101d;color:#6f8295;font-size:8.5px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:10px}.footer a{color:#83b8d8}.toast{position:fixed;z-index:2000;left:50%;bottom:40px;transform:translate(-50%,18px);padding:8px 12px;border:1px solid #34536d;border-radius:10px;background:#0b1d2d;color:#e8f5ff;font-size:10px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.skeleton{padding:14px;color:#71869b;text-align:center;font-size:10px}@media(max-width:1100px){.shell{grid-template-columns:270px 1fr}.right-rail{display:none}.map-head{left:auto;right:12px;transform:none}.map-head>div:nth-child(3){display:none}.map-head{grid-template-columns:repeat(2,minmax(130px,1fr))}}@media(max-width:760px){html,body{overflow:auto}.topbar{position:sticky;top:0}.shell{height:auto;min-height:calc(100vh - 60px);display:flex;flex-direction:column}.map-stage{height:62vh;min-height:470px;order:1}.left-rail{order:2;border-right:0;overflow:visible}.right-rail{display:block;order:3;border-left:0;overflow:visible}.rail{padding:9px}.weather-panel,.kpi-panel{display:inline-block;vertical-align:top;width:calc(50% - 5px)}.weather-panel{margin-right:6px}.critical-list,.flow-list{max-height:none}.map-head{top:9px;right:9px;left:9px;grid-template-columns:1fr 1fr}.map-head>div{min-width:0;padding:8px 9px}.map-head strong{font-size:14px}.layer-box{top:82px;left:9px}.legend{display:none}.locate-btn{bottom:10px;right:10px}.footer{height:auto;min-height:34px;flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 10px}.top-status .source-pill{display:none}}@media(max-width:480px){.weather-panel,.kpi-panel{display:block;width:100%;margin-right:0}.layer-box{font-size:9px;min-width:136px}.map-head>div:nth-child(2){display:block}.brand small{display:none}}

/* Wave 2: water forecast + safer routing */
.water-forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.forecast-risk{border:1px solid #27405a;border-radius:10px;padding:8px;background:#091522;min-width:0}.forecast-risk>div{display:flex;justify-content:space-between;gap:4px;align-items:center}.forecast-risk b{font-size:10px}.forecast-risk span{font-size:8px;color:#8fa3b8}.forecast-risk strong{display:block;font-size:20px;margin:4px 0 2px}.forecast-risk small,.forecast-risk em{display:block;font-size:7.8px;color:#7f91a8;font-style:normal;line-height:1.35}.forecast-risk.low strong{color:#42d49c}.forecast-risk.watch strong{color:#ffd34f}.forecast-risk.high strong{color:#ffae42}.forecast-risk.critical strong{color:#ff4d68}.hotspot-title{margin:9px 0 5px;color:#8ea0b3;font-size:8px;text-transform:uppercase;letter-spacing:.5px}.forecast-hotspots{display:flex;flex-direction:column;gap:4px}.forecast-hotspot{display:grid;grid-template-columns:38px 1fr;gap:6px;text-align:left;align-items:center;border:1px solid #203349;border-radius:8px;background:#091522;color:#dce9f6;padding:5px 7px;cursor:pointer}.forecast-hotspot b{font-size:9px;color:#ffbd66}.forecast-hotspot span{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-form{display:flex;flex-direction:column;gap:6px}.route-row{display:flex;gap:5px}.route-input{width:100%;min-width:0;border:1px solid #27405a;background:#07131f;color:#eaf6ff;border-radius:8px;padding:8px;font-size:9.5px;outline:none}.route-input:focus{border-color:#4aaad0}.route-mini-btn{width:34px;flex:0 0 34px;border:1px solid #31516d;background:#0d2032;color:#dff8ff;border-radius:8px;cursor:pointer}.route-plan-btn{border:1px solid #2e7690;background:linear-gradient(135deg,#103a53,#0d2638);color:#dff9ff;border-radius:9px;padding:8px 9px;font-size:9.5px;font-weight:800;cursor:pointer}.route-plan-btn:disabled{opacity:.55;cursor:wait}.route-result{margin-top:8px;border-top:1px solid #1c3044;padding-top:8px;color:#8498ad;font-size:9px}.route-summary{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid #24445d;border-radius:9px;background:#091522;padding:8px}.route-summary b,.route-summary span{display:block}.route-summary b{font-size:10px;color:#e7f5ff}.route-summary span{font-size:8.5px;color:#8fa3b8;margin-top:2px}.route-summary strong{font-size:11px;color:#42d49c;white-space:nowrap}.route-summary.warn strong{color:#ffae42}.route-summary.danger strong{color:#ff4d68}.route-meta{margin:6px 1px;color:#8196aa}.route-hazards{display:flex;flex-direction:column;gap:4px}.route-hazards button{display:grid;grid-template-columns:38px 1fr;gap:6px;border:1px solid #263a4d;border-radius:8px;background:#081522;color:#dce8f5;padding:6px;text-align:left;cursor:pointer}.route-hazards b{color:#ffbd66;font-size:9px}.route-hazards span{font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.route-clear{padding:7px;border-radius:8px;background:rgba(66,212,156,.08);color:#73dcae}.route-error{padding:7px;border-radius:8px;background:rgba(255,77,104,.08);color:#ff8999;line-height:1.45}@media(max-width:480px){.water-forecast{grid-template-columns:1fr 1fr 1fr}}

.osm-dark-fallback{filter:grayscale(.18) invert(.91) hue-rotate(178deg) brightness(.72) contrast(1.12) saturate(.75)}


.about-btn{border:1px solid #27455f;border-radius:9px;background:#0b1c2b;color:#bfeeff;padding:7px 10px;font-size:10px;font-weight:800;cursor:pointer;letter-spacing:.2px}.about-btn:hover{border-color:#4de3ff;color:#fff}.footer-about{border:0;background:transparent;color:#66d7ff;padding:0;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.about-dialog{width:min(980px,calc(100vw - 28px));max-height:min(860px,calc(100vh - 28px));padding:0;border:1px solid #31506d;border-radius:18px;background:#08131f;color:var(--text);box-shadow:0 28px 100px rgba(0,0,0,.7);overflow:hidden}.about-dialog::backdrop{background:rgba(1,7,14,.78);backdrop-filter:blur(7px)}.about-shell{display:flex;flex-direction:column;max-height:min(860px,calc(100vh - 28px))}.about-head{display:flex;justify-content:space-between;gap:20px;padding:19px 21px 15px;border-bottom:1px solid #1f354a;background:linear-gradient(135deg,#0c2132,#091522)}.about-head h2{font-size:20px;margin:3px 0 3px;letter-spacing:-.2px}.about-head p{margin:0;color:#8fa5ba;font-size:10.5px}.about-kicker{color:#53dfff;font-size:9px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}.about-close{width:34px;height:34px;border-radius:10px;border:1px solid #2d465d;background:#0a1723;color:#d7e8f6;font-size:22px;cursor:pointer}.about-close:hover{border-color:#ff6d81;color:#fff}.about-alert{margin:14px 18px 0;padding:11px 13px;border:1px solid rgba(255,174,66,.32);border-radius:11px;background:rgba(255,174,66,.075);display:flex;flex-direction:column;gap:4px}.about-alert strong{color:#ffc16e;font-size:11px}.about-alert span{color:#b9c6d3;font-size:9.5px;line-height:1.5}.about-nav{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid #182c3f;overflow:auto}.about-nav a{white-space:nowrap;text-decoration:none;color:#91a8bc;border:1px solid #233c52;border-radius:999px;padding:5px 9px;font-size:9px;background:#091723}.about-nav a:hover{color:#fff;border-color:#42bddf}.about-scroll{padding:0 18px 22px;overflow:auto;scroll-behavior:smooth}.about-section{padding:20px 0;border-bottom:1px solid #182c3f;scroll-margin-top:8px}.about-section:last-child{border-bottom:0}.about-section-title{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;margin-bottom:13px}.about-section-title>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #28516d;border-radius:8px;background:#0c2131;color:#50ddff;font-weight:900;font-size:9px}.about-section-title h3{margin:0;font-size:13px}.about-section-title p{margin:3px 0 0;color:#7f95aa;font-size:9.5px}.about-copy{color:#a9bac9;font-size:10px;line-height:1.65;margin:12px 0 0}.about-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.about-facts>div{padding:9px;border:1px solid #1e354a;background:#091722;border-radius:10px}.about-facts b,.about-facts span{display:block}.about-facts b{font-size:9px;color:#62dcff;text-transform:uppercase;letter-spacing:.4px}.about-facts span{margin-top:4px;color:#bdcad6;font-size:9px;line-height:1.4}.source-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.source-card{border:1px solid #1f384d;background:#091722;border-radius:11px;padding:11px;display:flex;flex-direction:column;min-height:164px}.source-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.source-card-head b{font-size:11px}.source-card-head span{font-size:8px;color:#54cdec;border:1px solid #23516a;border-radius:999px;padding:3px 6px}.source-card p{font-size:9.5px;color:#c0ccd7;line-height:1.5;margin:8px 0}.source-card small{font-size:8.5px;color:#8198ab;line-height:1.55;flex:1}.source-card small b{color:#9bc5d8}.source-card>a,.source-links a{margin-top:9px;text-decoration:none;color:#5cddff;font-size:9px;font-weight:800}.source-links{display:flex;gap:12px}.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.method-grid article{border:1px solid #1f384d;background:#091722;border-radius:11px;padding:11px}.method-grid b{font-size:10px;color:#dff6ff}.method-grid p{font-size:9px;color:#8fa3b5;line-height:1.6;margin:7px 0 0}.method-grid code{color:#69dffc;background:#07111a;padding:1px 4px;border-radius:4px}.disclaimer-box{border-left:3px solid #ffae42;background:#101a22;border-radius:0 10px 10px 0;padding:11px 13px}.disclaimer-box p{font-size:9.5px;color:#acbbc8;line-height:1.65;margin:0 0 8px}.disclaimer-box p:last-child{margin-bottom:0}.disclaimer-box strong{color:#ffd18e}.about-limitations{margin:10px 0 0;padding-left:20px;color:#91a5b6;font-size:9.5px;line-height:1.7}.license-list{display:grid;gap:6px}.license-list>div{display:grid;grid-template-columns:125px 1fr;gap:10px;padding:8px 10px;border:1px solid #1c3347;border-radius:9px;background:#091722}.license-list b{font-size:9.5px;color:#dceeff}.license-list span{font-size:9px;color:#8fa4b6;line-height:1.45}.about-final-note{margin-top:12px;padding:9px 11px;border-radius:9px;background:rgba(77,227,255,.06);border:1px solid rgba(77,227,255,.16);color:#9fc5d3;font-size:9px;line-height:1.55}@media(max-width:720px){.about-btn{padding:7px 8px;font-size:0}.about-btn:after{content:'About';font-size:9px}.about-facts,.source-cards,.method-grid{grid-template-columns:1fr}.license-list>div{grid-template-columns:1fr;gap:3px}.about-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}.about-shell{max-height:calc(100vh - 12px)}.about-head{padding:15px}.about-alert,.about-nav,.about-scroll{margin-left:0;margin-right:0}.about-alert{margin:10px 12px 0}.about-nav{padding:8px 12px}.about-scroll{padding:0 12px 16px}}


/* community-v8 */
.dot.community{background:#c56bff!important;box-shadow:0 0 8px rgba(197,107,255,.5)}.dot.known-risk{background:#ffb248!important;border:1px dashed #fff}.community-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:7px;margin-bottom:9px}.community-actions button{border-radius:9px;padding:9px 8px;font-size:10px;font-weight:800;cursor:pointer}.community-primary{border:1px solid #8e55c8;background:rgba(197,107,255,.15);color:#f1dfff}.community-secondary{border:1px solid #29445d;background:#0a1725;color:#c9d9e8}.community-list{display:flex;flex-direction:column;gap:5px;max-height:230px;overflow:auto}.community-item{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;border:1px solid #1b3045;background:#091522;border-radius:9px;padding:7px;color:#eaf5ff;text-align:left;cursor:pointer}.community-item i{width:7px;height:32px;border-radius:6px}.community-item div{min-width:0}.community-item b,.community-item span{display:block}.community-item b{font-size:10px}.community-item span{font-size:9px;color:#8298af;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-item em{font-style:normal;color:#6f879d}.community-empty{padding:13px 8px;text-align:center;color:#70879d;font-size:10px;border:1px dashed #233c54;border-radius:9px}.popup-community-note{margin-top:8px;padding-top:7px;border-top:1px solid #26384b;color:#a68cba;font-size:10px}.report-picking{cursor:crosshair!important}.report-dialog{width:min(520px,calc(100vw - 24px));border:1px solid #2a4661;border-radius:18px;padding:0;background:#091522;color:#edf7ff;box-shadow:0 28px 90px rgba(0,0,0,.65)}.report-dialog::backdrop{background:rgba(1,7,14,.76);backdrop-filter:blur(5px)}.report-form{padding:18px}.report-head{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #20354a;padding-bottom:13px}.report-head h2{font-size:20px;margin:4px 0}.report-head p{font-size:10px;color:#82a0ba;margin:0}.report-honeypot{position:absolute!important;left:-10000px!important}.report-field{display:block;border:0;padding:0;margin:15px 0}.report-field>span,.report-field legend{display:flex;justify-content:space-between;width:100%;font-size:11px;font-weight:800;margin-bottom:8px;color:#cce3f6}.report-field em{font-style:normal;font-weight:500;color:#637f98}.depth-options{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.depth-options input{position:absolute;opacity:0;pointer-events:none}.depth-options span{display:grid;place-items:center;border:1px solid #294158;background:#0b1b2a;border-radius:10px;height:54px;font-weight:900;font-size:13px;cursor:pointer}.depth-options small{font-size:8px;color:#7890a8}.depth-options input:checked+span{border-color:#c56bff;background:rgba(197,107,255,.16);box-shadow:inset 0 0 0 1px rgba(197,107,255,.3)}.report-field select,.report-field textarea{width:100%;border:1px solid #294158;background:#07131f;color:#eaf5ff;border-radius:10px;padding:10px;outline:none}.report-field textarea{min-height:70px;resize:vertical}.report-warning{font-size:9px;line-height:1.5;color:#879db2;background:#0b1b29;border:1px solid #1f3449;border-radius:10px;padding:9px}.report-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.report-buttons button{border-radius:9px;padding:9px 15px;font-size:11px;font-weight:800;cursor:pointer}.report-buttons button:first-child{background:#0b1826;color:#a9bed1;border:1px solid #294158}.report-buttons button:last-child{background:#1f9bc9;color:white;border:1px solid #45c9ef}.route-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0}.route-breakdown span{display:flex;flex-direction:column;gap:2px;padding:6px 4px;border:1px solid #20364b;border-radius:7px;background:#091522;color:#718aa1;font-size:8px;text-align:center}.route-breakdown b{color:#e8f5ff;font-size:12px}.known-risk-marker{filter:drop-shadow(0 0 4px rgba(255,178,72,.25))}@media(max-width:700px){.depth-options{grid-template-columns:repeat(3,1fr)}.route-breakdown{grid-template-columns:repeat(2,1fr)}.community-actions{grid-template-columns:1fr 1fr}}

.route-mode-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #213a50;background:#081522;border-radius:8px;padding:6px 7px;color:#8098ae;font-size:8.5px}.route-mode-row select{min-width:128px;border:1px solid #31516d;background:#0b1c2b;color:#e5f5ff;border-radius:7px;padding:6px;font-size:9px;outline:none}.route-options{display:flex;flex-direction:column;gap:5px;margin:7px 0}.route-option{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid #263d53;background:#081522;color:#dfeefa;border-radius:9px;padding:7px 8px;text-align:left;cursor:pointer}.route-option:hover,.route-option.active{border-color:#41bfe3;background:#0b2030}.route-option b,.route-option span,.route-option small{display:block}.route-option b{font-size:9.5px}.route-option span{font-size:8px;color:#7f95aa;margin-top:2px}.route-option small{font-size:8px;color:#9ab0c4;text-align:right}.route-option strong{font-size:11px;color:#53dca5}.route-option.warn strong{color:#ffae42}.route-option.danger strong{color:#ff4d68}.route-compare-link{display:inline-flex;margin-top:6px;border:1px solid #31516d;border-radius:8px;padding:6px 8px;color:#9fddff!important;text-decoration:none!important;font-size:8.5px}.route-choice-note{font-size:8px;color:#7990a6;margin-top:4px;line-height:1.4}

/* CCTV evidence */
.dot.camera{background:#63ddff;box-shadow:0 0 9px rgba(99,221,255,.7)}.camera-panel{display:grid;gap:9px}.camera-rule{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}.camera-rule b{font-size:11px}.camera-rule span{font-size:10px;color:var(--muted);text-align:right}.camera-overview{display:grid;gap:8px}.camera-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#02070d}.camera-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.camera-overview-meta{display:grid;gap:4px}.camera-overview-meta b{font-size:12px}.camera-overview-meta span{font-size:10px;color:var(--muted);line-height:1.45}.camera-overview-meta a{font-size:10px;color:var(--cyan);text-decoration:none}.camera-empty{padding:12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:11px}.camera-badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 9px}.camera-badges span{font-size:9px;padding:3px 6px;border:1px solid #35516d;border-radius:999px;background:#0d1c2c;color:#bfefff}.camera-policy-note{margin-top:8px;padding:7px 8px;border-left:2px solid #63ddff;background:rgba(99,221,255,.06);font-size:10px;line-height:1.45;color:#aabbd0}.camera-marker{cursor:pointer}

/* CCTV side viewer v2 */
.camera-viewer{display:grid;gap:9px}.camera-viewer-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.camera-viewer-head>div{display:grid;gap:2px}.camera-viewer-head span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}.camera-viewer-head b{font-size:13px;line-height:1.35}.camera-viewer-head strong{white-space:nowrap;font-size:10px;padding:4px 7px;border-radius:999px;border:1px solid #315571;background:#0a1a29;color:#bdf2ff}.camera-live-frame{position:relative;border-radius:11px;overflow:hidden;border:1px solid #29445c;background:#02070d;min-height:170px}.camera-live-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#02070d}.camera-live-stamp{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:rgba(2,7,13,.82);font-size:9px;color:#e9faff}.camera-live-stamp i{width:6px;height:6px;border-radius:50%;background:#3de3a2;box-shadow:0 0 8px #3de3a2}.camera-unavailable{display:grid;gap:5px;padding:14px;border:1px dashed #47556a;border-radius:11px;background:rgba(255,255,255,.025)}.camera-unavailable b{font-size:11px}.camera-unavailable span{font-size:10px;line-height:1.5;color:var(--muted)}.camera-viewer-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px}.camera-viewer-meta>div{display:grid;gap:2px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02)}.camera-viewer-meta span{font-size:8px;color:var(--muted);text-transform:uppercase}.camera-viewer-meta b{font-size:9px;overflow-wrap:anywhere}.camera-viewer-actions{display:flex;flex-wrap:wrap;gap:6px}.camera-viewer-actions button,.camera-viewer-actions a,.camera-popup-open{appearance:none;border:1px solid #315571;background:#0b2234;color:#c7f6ff;border-radius:8px;padding:7px 9px;font:inherit;font-size:9px;text-decoration:none;cursor:pointer}.camera-viewer-actions button:hover,.camera-viewer-actions a:hover,.camera-popup-open:hover{border-color:#63ddff}.camera-subtitle{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}.camera-subtitle b{font-size:10px}.camera-subtitle span{font-size:9px;color:var(--muted)}.camera-point-list{display:grid;gap:5px;max-height:210px;overflow:auto}.camera-pick{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;width:100%;text-align:left;padding:8px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02);color:var(--text);cursor:pointer}.camera-pick:hover,.camera-pick.active{border-color:#4ccfec;background:rgba(76,207,236,.08)}.camera-pick>span{font-size:14px}.camera-pick>div{display:grid;gap:2px;min-width:0}.camera-pick b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-pick small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-pick em{font-style:normal;color:var(--cyan)}