/* ============ OSM 真实底图（本地化样式，无外部依赖） ============ */
.osm-map{position:relative;overflow:hidden;background:#0d1c30;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.osm-map.osm-dragging{cursor:grabbing}
.osm-map.osm-dragging *{cursor:inherit}
.osm-map.placing{cursor:crosshair}
/* 瓦片层：整层 transform 单样式渲染（先 scale 后 translate，配合 0 0 原点），
   GPU 合成，拖拽/缩放动画期间零重排 */
.osm-tiles{position:absolute;left:0;top:0;z-index:1;transform-origin:0 0;will-change:transform}
/* 上一层级整层垫底：换级瞬间旧画面持续显示，新级淡入盖住，无白底闪现 */
.osm-old{position:absolute;left:0;top:0;z-index:0;transform-origin:0 0;opacity:0;transition:opacity .22s}
.osm-old .osm-tile{opacity:1;transition:none}
.osm-tile{position:absolute;width:256px;height:256px;pointer-events:none;opacity:0;transition:opacity .28s ease-out}
.osm-tile.ld{opacity:1}
.osm-tile.err{opacity:0}
/* 叠加层：SVG 管网与 DOM 标记。
   v3.5 关键修复：.ovl 整层 pointer-events:none（保证空白处穿透给底图拖拽/缩放）时，
   浏览器不会向其子树派发任何鼠标事件 —— 这就是 v3.4 管线点击委托收不到事件、
   「管道无法选中」的根因。此处仅对管线自身的 path 恢复 pointer-events:auto，
   父层保持 none：空白处照常拖图/缩放，管线可点选，两不冲突。 */
.ovl{position:absolute;left:0;top:0;z-index:2;pointer-events:none}
.ovl path[data-pipe]{pointer-events:auto}
.ovl path.pipe-hit{cursor:pointer}
.ovl-markers{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.ovl-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}
.ovl-marker.sel{filter:drop-shadow(0 0 6px #4fd1ff);z-index:9}
.osm-map.osm-dragging .ovl-marker{pointer-events:none}
.ovl-marker.mk-plant{width:38px;height:38px;border-radius:50%;background:#0b2b4d;border:2px solid #38bdf8;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ovl-marker.mk-plant.st-heavy{border-color:#fbbf24}
.ovl-marker.mk-plant.st-over{border-color:#f87171}
.ovl-marker.mk-district{min-width:44px;padding:2px 8px;border-radius:7px;background:rgba(11,43,77,.92);border:1.6px solid #34d399;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ovl-marker.mk-district.industrial{border-color:#f59e0b}
.ovl-marker.mk-district.commercial{border-color:#a78bfa}
.ovl-marker.mk-district.st-lowhead{border-color:#f472b6}
.ovl-marker.mk-district.st-nowater{border-color:#ef4444}
.ovl-marker.mk-pump{width:34px;height:34px;border-radius:9px;background:#1d1636;border:2px solid #c084fc;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.5);transform:translate(-50%,-50%) rotate(45deg)}
.ovl-marker.mk-pump .mk-ico{transform:rotate(-45deg)}
.ovl-marker.mk-pump .mk-name{position:absolute;top:105%;left:50%;transform:translateX(-50%) rotate(-45deg);transform-origin:center top;font-size:10px;line-height:1.25;color:#e9d5ff;white-space:nowrap;background:rgba(4,16,31,.78);padding:0 6px;border-radius:4px}
.ovl-marker.mk-pump .mk-boost{position:absolute;bottom:105%;left:50%;transform:translateX(-50%) rotate(-45deg);transform-origin:center bottom;margin-bottom:3px;font-size:10px;font-weight:700;color:#1d1636;background:#e9d5ff;border-radius:4px;padding:0 5px;white-space:nowrap}
.ovl-marker .mk-name{font-size:10px;line-height:1.25;color:#e0f2fe;white-space:nowrap;display:block}
.ovl-marker.mk-plant .mk-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;background:rgba(4,16,31,.78);padding:0 6px;border-radius:4px}
.ovl-marker .mk-ico{font-size:15px}
.ovl-marker .mk-load{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;font-size:10px;font-weight:700;color:#0b1c33;background:#e0f2fe;border-radius:4px;padding:0 5px;white-space:nowrap}
.ovl-marker.st-over .mk-load{background:#fecaca}
.ovl-marker.st-nowater .mk-load{background:#fca5a5}
/* 控件与署名 */
.osm-ctrl{position:absolute;right:10px;top:10px;z-index:5;display:flex;flex-direction:column;gap:6px}
.osm-ctrl button{width:30px;height:30px;border:1px solid #22406b;border-radius:6px;background:rgba(11,28,51,.9);color:#dbeafe;font-size:15px;cursor:pointer;line-height:1;padding:0;transition:border-color .15s,color .15s}
.osm-ctrl button:hover{border-color:#4fd1ff;color:#4fd1ff}
.osm-attr{position:absolute;right:6px;bottom:4px;z-index:5;font-size:10.5px;color:#3a5578;background:rgba(10,21,38,.65);padding:1px 7px;border-radius:6px}
.osm-attr a{color:#7d9cc0;text-decoration:none}
.osm-attr a:hover{color:#4fd1ff}