:root{--bg:#0a1526;--bg2:#0e1e36;--panel:#12233f;--panel2:#16294a;--line:#22406b;--cyan:#4fd1ff;--blue:#3b82f6;--green:#34d399;--red:#f87171;--amber:#fbbf24;--text:#dbeafe;--dim:#7d9cc0}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* v3.9：整页高度=一屏 —— body 锁 100vh 且不滚动（overflow:hidden），顶栏固定高度，
   #layout 以 flex:1 占满「视口高 − 顶栏高」；左/右栏与中间地图列(#center)天然同高，
   超出内容由各栏 overflow-y:auto 内滚，页面不再出现纵向滚动条（窄屏 ≤1100px 除外） */
body{background:var(--bg);color:var(--text);font:14px/1.6 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;height:100vh;overflow:hidden;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;gap:18px;padding:10px 22px;background:linear-gradient(90deg,#0d1f3c,#123058);border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0}
#topbar .logo{font-size:20px;font-weight:700;letter-spacing:2px;color:#fff}
#topbar .logo span{color:var(--cyan)}
#topbar .sub{font-size:12px;color:var(--dim)}
#topbar .spacer{flex:1}
#scoreBox{display:flex;align-items:center;gap:10px;background:#0b1c33;border:1px solid var(--line);border-radius:8px;padding:6px 14px}
#scoreBox .num{font-size:26px;font-weight:800;color:var(--cyan);min-width:52px;text-align:right}
#scoreBox .num.g-good{color:var(--green)}#scoreBox .num.g-mid{color:var(--amber)}#scoreBox .num.g-bad{color:var(--red)}
#scoreBox .grade{font-size:13px;color:var(--dim)}
#layout{display:flex;gap:14px;padding:14px;flex:1;min-height:0}
/* v3.9：三栏高度 = #layout 内容高（顶栏以下全部空间），超出部分各栏内滚；
   窄屏 ≤1100px 竖排布局时恢复文档流（解除 100vh 锁定与内滚） */
@media(max-width:1100px){
  html,body{height:auto}
  body{overflow:auto;display:block;height:auto;min-height:100vh}
  #layout{flex-direction:column;height:auto}
  #left,#right{max-height:none !important;overflow:visible;min-height:0}
  #gridWrap{flex:none;display:block}
  #map{flex:none;height:55vh;min-height:240px}}
/* 宽屏但视口过矮时压缩地图最小高，避免统计条被裁切 */
@media(min-width:1101px) and (max-height:640px){#map{min-height:180px}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px}
.panel h3{font-size:14px;color:var(--cyan);margin-bottom:10px;padding-bottom:6px;border-bottom:1px dashed var(--line);font-weight:600}
#left{width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;overflow-x:hidden}
#center{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
#right{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;overflow-x:hidden}
.mode-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 12px;cursor:pointer;font-size:14px;margin-bottom:8px;transition:all .15s;text-align:left}
.mode-btn:hover{border-color:var(--cyan)}
.mode-btn.active{background:#153e63;border-color:var(--cyan);box-shadow:0 0 8px rgba(79,209,255,.35)}
.mode-btn .ico{font-size:18px}
.mode-btn small{display:block;color:var(--dim);font-size:11px;line-height:1.3}
.btn{display:inline-block;background:#1d4ed8;border:none;color:#fff;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:13px;margin:2px}
.btn:hover{background:#2563eb}
.btn.green{background:#0f766e}.btn.green:hover{background:#0d9488}
.btn.gray{background:#334155}.btn.gray:hover{background:#475569}
.btn.red{background:#7f1d1d}.btn.red:hover{background:#991b1b}
.btn:disabled{opacity:.4;cursor:not-allowed}
.field{margin-bottom:10px}
.field label{display:block;font-size:12px;color:var(--dim);margin-bottom:3px}
.field input,.field select{width:100%;background:#0b1c33;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:7px 9px;font-size:13px;outline:none}
.field input:focus,.field select:focus{border-color:var(--cyan)}
#gridWrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
#map{position:relative;width:100%;flex:1;min-height:260px;background:#0d1c30;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#hint{font-size:12px;color:var(--dim);padding:4px 2px;min-height:20px}
#hint b{color:var(--cyan)}
#statRow{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.stat{flex:1;min-width:110px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;text-align:center}
.stat .v{font-size:20px;font-weight:700;color:var(--cyan)}
.stat .k{font-size:11px;color:var(--dim)}
#gauge{display:flex;gap:4px;height:10px;border-radius:5px;overflow:hidden;margin:6px 0 2px;background:#0b1c33}
#gauge div{height:100%}
#gaugeLegend{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--dim);margin-bottom:8px}
#gaugeLegend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px}
.issues{max-height:220px;overflow-y:auto}
.issue{display:flex;gap:8px;padding:7px 8px;border-bottom:1px solid #1a3255;font-size:12.5px;line-height:1.5}
.issue .tag{flex-shrink:0;font-size:11px;border-radius:4px;padding:1px 7px;height:fit-content;margin-top:2px}
.issue.danger .tag{background:#7f1d1d;color:#fecaca}
.issue.warn .tag{background:#78350f;color:#fde68a}
.issue.info .tag{background:#164e63;color:#a5f3fc}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{color:var(--dim);font-weight:500;text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:5px 6px;border-bottom:1px solid #16304f;white-space:nowrap}
.dtable tr:hover td{background:#173257}
.badge{display:inline-block;border-radius:4px;padding:0 8px;font-size:11px;line-height:20px}
.b-ok{background:#064e3b;color:#6ee7b7}.b-over{background:#7f1d1d;color:#fecaca}.b-heavy{background:#78350f;color:#fde68a}.b-idle{background:#1e3a8a;color:#93c5fd}.b-low{background:#701a40;color:#f9a8d4}.b-nowater{background:#450a0a;color:#fca5a5}
#plans{max-height:150px;overflow-y:auto}
.plan-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden}
.plan-item:hover{background:#173257}
.plan-item span{flex-shrink:0}
.plan-item span:first-child,.plan-item .dim{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.plan-item .dim{color:var(--dim);font-size:11px}
.plan-item .sc{margin-left:auto;color:var(--cyan);font-weight:600}
.plan-item .del{color:var(--red);cursor:pointer;font-size:11px;border:1px solid #7f1d1d;border-radius:4px;padding:0 6px}
#mapBar{position:absolute;left:10px;bottom:6px;z-index:5;display:flex;gap:12px;font-size:11px;color:#7d9cc0;background:rgba(10,21,38,.7);border-radius:6px;padding:2px 10px;pointer-events:none}
#barScale{font-weight:600;color:#4fd1ff}
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#153e63;border:1px solid var(--cyan);color:#fff;border-radius:8px;padding:9px 20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:99}
#toast.show{opacity:1}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#22406b;border-radius:4px}
/* ---------- 标记拖拽：水厂 / 城区 / 加压站 ---------- */
.ovl-marker.draggable{cursor:move}
.ovl-marker.draggable.dragging{z-index:20}
.ovl-marker.draggable.dragging .mk-name,.ovl-marker.draggable.dragging .mk-load,.ovl-marker.draggable.dragging .mk-boost{opacity:0}
.ovl-marker.draggable.dragging::after{content:'＋';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#4fd1ff;font-size:22px;font-weight:700;text-shadow:0 0 10px rgba(79,209,255,.9);pointer-events:none}
body.objdragging,body.objdragging *{cursor:grabbing !important;user-select:none !important;-webkit-user-select:none !important}
/* 属性面板：经纬度实时行 */
.coordline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:#0b1c33;border:1px solid var(--line);border-radius:6px;padding:6px 9px;margin:2px 0 10px}
.coordline .clabel{font-size:11px;color:var(--dim);flex-shrink:0}
.coordline .latval{font-size:13px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.coordline .latval b{color:#a5f3fc}
.coordline .dimtxt{font-size:10.5px;color:var(--dim);opacity:.75}