*{box-sizing:border-box}body{margin:0;font:14px/1.4 system-ui,sans-serif;color:#1d2733}
header{position:absolute;top:0;left:0;right:420px;z-index:2;padding:10px 16px;background:linear-gradient(#fffffff2,#fff0)}header h1{margin:0;font-size:22px}header span{color:#556}
#map{position:absolute;inset:0 420px 0 0}#panel{position:absolute;right:0;top:0;bottom:0;width:420px;overflow:auto;background:#f7f9fb;border-left:1px solid #dde}
section{padding:12px 16px;border-bottom:1px solid #e3e7ec}h2{font-size:16px;margin:0 0 6px}h3{font-size:13px;margin:10px 0 4px}small{color:#778;font-weight:normal}
.explain{background:#fff8e6}.kpis{display:flex;gap:10px}.kpis div{flex:1;background:#fff;border:1px solid #e3e7ec;border-radius:8px;padding:8px}.kpis b{font-size:24px;display:block;color:#b30000}.kpis span{color:#556;font-size:12px}
.note{font-size:11px;color:#667}table{width:100%;border-collapse:collapse;font-size:12px}td,th{padding:3px 4px;border-bottom:1px solid #eef}td:nth-child(n+2),th:nth-child(n+2){text-align:right}
tr.low td:first-child::after{content:" ≈";color:#c60}
.g{margin:6px 0}.g .bar{height:12px;background:#e7ebf0;border-radius:6px;position:relative;overflow:hidden}.g .fill{height:100%;border-radius:6px}.g .lbl{display:flex;justify-content:space-between;font-size:12px}
.grp{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted #ccd}
#legend{position:absolute;left:10px;bottom:24px;background:#fffe;padding:8px 10px;border-radius:8px;font-size:12px;box-shadow:0 1px 4px #0003}#legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}#legend i.ln{height:3px;width:16px;border-radius:0;vertical-align:middle}#legend i.dash{border-top:2px dashed #c0392b;background:none}#legend i.ring{border:2px solid #b30000;background:#b3000033}
.about li{font-size:11px;margin-bottom:4px}
@media(max-width:800px){#map{inset:0 0 50% 0}#panel{top:50%;width:100%}header{right:0}}
#spark{width:100%;display:block}
#layersBtn{position:absolute;top:70px;left:12px;z-index:3;padding:7px 12px;border:0;border-radius:8px;background:#fff;box-shadow:0 1px 4px #0003;font-weight:600;cursor:pointer}
#layers{position:absolute;top:108px;left:12px;z-index:3;width:300px;max-height:calc(100% - 140px);overflow:auto;background:#fff;border-radius:10px;padding:8px 12px;box-shadow:0 2px 10px #0003;font-size:13px}
#layers h3{margin:10px 0 4px;font-size:12px;text-transform:uppercase;color:#667;letter-spacing:.04em}#layers label{display:block;margin:5px 0;cursor:pointer}#layers small{display:block;color:#667;margin-left:22px;font-size:11px}
#layers .dis{opacity:.5}#layers input[type=range]{width:100%}#techs label{display:inline-block;margin:2px 8px 2px 0}
details summary{cursor:pointer;list-style:none}details summary::before{content:"▸ ";color:#889}details[open] summary::before{content:"▾ "}
#pipeF{margin:2px 0 6px 22px;font-size:12px}#pipeF b{display:block;margin-top:4px;color:#556}#pipeF label{display:inline-block;margin:1px 6px 1px 0}
#anm table td{padding:2px 4px}

#flowTag{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;background:#fffd;padding:3px 10px;border-radius:12px;font-size:11px;color:#445;box-shadow:0 1px 3px #0002;margin-left:-210px}
.maplibregl-popup.card .maplibregl-popup-content{padding:0;width:300px;border-radius:10px;overflow:hidden;font-size:12px}
.card .ph{position:relative;height:150px;background:#dde3ea}.card .ph img{width:100%;height:150px;object-fit:cover;display:block}
.card .cr{position:absolute;bottom:0;left:0;right:0;background:#0009;color:#fff;font-size:9px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card .cr a{color:#fff}
.card .bd{padding:8px 10px}.card h4{margin:0 0 2px;font-size:14px}.card .tg{color:#667;font-size:11px;margin-bottom:6px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:0}.card dt{color:#667}.card dd{margin:0}
.card .cu{margin-top:8px;padding:6px;background:#fff3f3;border-radius:6px}.card .cu b{color:#b30000}.card details{margin-top:6px;font-size:10px}.card details a{word-break:break-all}

#legend .li{cursor:pointer;padding:1px 4px;border-radius:4px;display:flex;align-items:center;user-select:none}#legend .li:hover,#legend .li:focus{background:#eef3f8;outline:none}
#legend .li.off{opacity:.4}#legend .li.off i{filter:grayscale(1)}#legend .tk{display:inline-block;width:12px;font-size:10px;color:#2a7}#legend b{display:block;margin-top:4px}
#legend{bottom:44px;max-height:calc(100% - 200px);overflow:auto}
#flowTag{bottom:auto;top:68px;margin-left:-210px}

/* v0.6 gridwatch-style layout */
header{right:38%}#map{inset:0 38% 0 0}#panel{width:38%;min-width:360px;background:#fbfcfd}
@media(max-width:1100px){header{right:360px}#map{inset:0 360px 0 0}}
.hd{display:flex;justify-content:space-between;align-items:center}.badge{font-size:11px;background:#eef2f6;border-radius:10px;padding:2px 8px;color:#445}.badge.ok{background:#e3f5ea;color:#1d6b3a}.badge.err{background:#fde8e8;color:#a11}
.big{display:flex;gap:8px;margin:8px 0}.big div{flex:1;background:#fff;border:1px solid #e3e7ec;border-radius:8px;padding:6px 8px}.big b{font-size:22px;display:block}.big span{font-size:11px;color:#667}
.fb{display:grid;grid-template-columns:110px 1fr 70px;align-items:center;gap:6px;font-size:12px;margin:3px 0}.fb .bar{height:14px;background:#eef1f4;border-radius:4px;overflow:hidden}.fb .bar i{display:block;height:100%}.fb .v{text-align:right;font-variant-numeric:tabular-nums}
.clickable{cursor:pointer;transition:background .15s}.clickable:hover{background:#fff6f6}.clickable[aria-pressed=true]{background:#fff0f0;box-shadow:inset 4px 0 0 #b30000}.cta{font-size:12px;color:#b30000;font-weight:600}
.small{font-size:12px;color:#334}h3{font-size:15px;margin:0 0 6px}h4{font-size:13px;margin:10px 0 4px}
.road .rw{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px dotted #d5dbe2}.road p{font-size:12px;margin:6px 0}
#curBanner{position:absolute;top:66px;left:50%;transform:translateX(-50%);margin-left:-19%;z-index:4;background:#b30000;color:#fff;padding:6px 10px 6px 14px;border-radius:18px;font-size:13px;box-shadow:0 2px 8px #0004}#curBanner button{margin-left:10px;background:#fff3;border:0;color:#fff;border-radius:50%;width:24px;height:24px;cursor:pointer}
#flowTag{margin-left:-19%}