:root{--bg:#f7f4ee;--soft:#efeae1;--line:#e0d9cc;--txt:#1a1f2b;--mut:#5d6270;--acc:#1f5f8b;--navy:#0b1f3a;--f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:var(--f);color:var(--txt);background:var(--bg)}
.top{position:fixed;top:0;left:0;right:0;height:60px;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line);z-index:1000}
.brand img{height:38px;display:block}.ttl{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}.ttl b{color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttl span{font-size:12px;color:var(--mut)}
.cta{background:var(--navy);color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap}.cta:hover{background:#13305a}.cta.wide{display:block;text-align:center;margin-top:12px}
#map{position:fixed;top:60px;left:0;right:0;bottom:0;background:#e9e4da}
.panel{position:fixed;top:72px;right:12px;width:280px;max-height:calc(100% - 84px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px rgba(11,31,58,.18);z-index:900;padding:14px 16px;font-size:14px}
.panel h3{margin:12px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}.panel h3:first-child{margin-top:0}
.panel label{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer}.panel label.op{flex-wrap:wrap}.panel input[type=range]{width:100%;accent-color:var(--navy)}
.tools{display:flex;gap:6px}.tools button{flex:1;padding:9px 4px;border:1px solid var(--line);background:#fff;border-radius:10px;font:inherit;font-size:13px;cursor:pointer;color:var(--navy)}
.tools button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.out{margin-top:8px;background:var(--soft);border-radius:10px;padding:8px 10px;font-size:13px;min-height:38px}
.info{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:13px}.info dt{color:var(--mut)}.info dd{margin:0}.info small{color:var(--mut)}
.ptog{display:none}
.legend .ramp{height:10px;border-radius:5px;background:linear-gradient(90deg,#2b1f7a,#3058be,#3caabe,#78c86e,#e6dc5a,#f0963c,#d24632,#fff)}.lr{display:flex;justify-content:space-between;font-size:11px;color:var(--mut)}
.north{background:var(--bg);border:1px solid var(--line);border-radius:12px;width:44px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;color:var(--navy);font-size:12px}
.leaflet-bar a{width:36px!important;height:36px!important;line-height:36px!important}
#swipe{position:fixed;top:60px;bottom:0;left:0;right:0;pointer-events:none;z-index:800}#swipe .bar{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.5);left:50%}
#swipe input{position:absolute;bottom:40px;left:5%;width:90%;pointer-events:auto;accent-color:var(--navy);height:28px}
.mlabel{background:var(--navy);color:#fff;border:0;border-radius:8px;font-weight:600}.mlabel:before{display:none}
.leaflet-container{font-family:var(--f)}
@media(max-width:700px){.ttl span{display:none}.brand img{height:30px}.cta{padding:8px 12px;font-size:13px}
 .panel{top:auto;bottom:0;right:0;left:0;width:auto;max-height:55%;border-radius:18px 18px 0 0;padding:10px 14px}
 .panel.min .pbody{display:none}.ptog{display:block;margin:0 auto 4px;border:0;background:var(--soft);border-radius:999px;padding:2px 30px;font-size:16px;color:var(--navy)}
 .leaflet-bottom.leaflet-left{bottom:56px}}