/* ============================================================
   深煤层气田配套水系统智能管控平台 — 全站共享样式
   风格基准：html.html 深色工业 SCADA
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#050d1d; --panel:#0a1f3d; --panel-border:#14365e; --title-bg:#0b2a52;
  --deep:#081a35; --deep2:#0a2342; --line:#11294a;
  --text:#d0e6ff; --sub:#8ab4d6; --dim:#5f7fa0;
  --accent:#00ccff; --ok:#00ff88; --warn:#ffcc00; --orange:#ff9900;
  --alarm:#ff4d4f; --purple:#b37feb; --offline:#7a8aa0;
}
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:"Microsoft YaHei", Arial, sans-serif; font-size:14px;
}
a{ color:inherit; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#1b4f72; border-radius:4px; }
::-webkit-scrollbar-track{ background:#071730; }

/* ---------------- 布局 ---------------- */
.layout{ display:flex; flex-direction:column; min-height:100vh; }
.body-wrap{ flex:1; display:flex; align-items:flex-start; }
.sidebar{
  width:244px; flex-shrink:0; background:#071730; border-right:1px solid var(--line);
  position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto;
}
.main{ flex:1; min-width:0; padding:12px; }

/* ---------------- 顶栏 ---------------- */
.topbar{
  height:56px; flex-shrink:0;
  background:linear-gradient(90deg,#0a3a6e 0%,#082a55 55%,#05254a 100%);
  border-bottom:1px solid #1b4f72;
  display:flex; align-items:center; padding:0 18px;
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; font-size:19px; font-weight:bold; letter-spacing:2px; }
.brand .logo{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#4fd6ff,#0a4f8e 70%);
  box-shadow:0 0 10px rgba(0,204,255,.6); position:relative;
}
.brand .logo::after{ content:"水"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:#e8f7ff; }
.brand small{ font-size:11px; color:#7fb3e0; font-weight:normal; letter-spacing:1px; margin-left:4px; }
.top-actions{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.top-clock{ text-align:right; line-height:1.3; }
.top-clock .t{ font-size:16px; color:#fff; font-variant-numeric:tabular-nums; }
.top-clock .d{ font-size:11px; color:var(--sub); }
.top-icon{
  width:34px; height:34px; border-radius:4px; border:1px solid #1b4f72; background:#0a2342;
  color:#9fd0ff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
  position:relative; text-decoration:none;
}
.top-icon:hover{ border-color:var(--accent); color:var(--accent); }
.top-icon svg{ width:17px; height:17px; display:block; }
.top-icon svg path,.top-icon svg circle,.top-icon svg rect{
  stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.top-icon:hover svg path,.top-icon:hover svg circle{ stroke:var(--accent); }
.top-icon .badge-dot{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  background:var(--alarm); color:#fff; font-size:10px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.top-user{ display:flex; align-items:center; gap:8px; font-size:13px; color:#cfe5ff; }
.top-user .ava{
  width:32px; height:32px; border-radius:50%; background:#0b3a6e; border:1px solid #2a6cae;
  display:flex; align-items:center; justify-content:center; color:#9fd0ff;
}
.top-user .u-name{ line-height:1.3; }
.top-user .u-role{ font-size:11px; color:var(--sub); }
.hamburger{ display:none; }

/* ---------------- 左侧菜单 ---------------- */
.menu-home{
  display:flex; align-items:center; gap:10px; padding:15px 18px; color:#fff;
  text-decoration:none; border-bottom:1px solid var(--line); font-size:16px; font-weight:bold;
}
.menu-home .mi{ width:19px; display:flex; }
.menu-home.active{ color:var(--accent); }
.mg-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px; color:#cfe5ff;
  text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; user-select:none;
}
.mg-head .mi{ width:19px; display:flex; flex-shrink:0; }
.mg-head .mi svg{ width:18px; height:18px; }
.mg-head .mi svg path,.mg-head .mi svg circle{
  stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.menu-home .mi svg path,.menu-home .mi svg circle{
  stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.mg-head:hover{ background:#0b2a52; }
.mg.open > .mg-head, .mg.current > .mg-head{ color:#fff; background:#0b2a52; }
.mg-head .chev{
  margin-left:auto; width:0; height:0; flex-shrink:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:7px solid var(--dim); transition:transform .2s;
}
.mg.open > .mg-head .chev{ transform:rotate(90deg); }
.mg-sub{ display:none; }
.mg.open .mg-sub{ display:block; }
.mg-sub a{
  display:block; padding:11px 14px 11px 46px; color:#b9d4ee; font-size:14.5px;
  text-decoration:none; border-left:2px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mg-sub a:hover{ color:#cfe5ff; background:#0a2342; }
.mg-sub a.active{ color:var(--accent); background:#0a2342; border-left-color:var(--accent); }

/* ---------------- 面包屑 / 模块选项卡 ---------------- */
.crumb{ font-size:12px; color:var(--dim); padding:2px 2px 10px; }
.crumb a{ color:var(--sub); text-decoration:none; }
.crumb a:hover{ color:var(--accent); }
.subtabs{
  display:flex; gap:2px; border-bottom:1px solid var(--panel-border);
  padding:0 8px; margin-bottom:12px; flex-wrap:wrap;
}
.subtabs a{
  padding:9px 15px; color:var(--sub); text-decoration:none; font-size:13px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.subtabs a:hover{ color:#cfe5ff; }
.subtabs a.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------------- 面板 ---------------- */
.panel{ background:var(--panel); border:1px solid var(--panel-border); margin-bottom:12px; }
.panel-title{
  background:var(--title-bg); padding:8px 12px; font-weight:bold; color:#9fd0ff;
  border-bottom:1px solid var(--panel-border);
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
}
.panel-title .tools{ font-weight:normal; font-size:12px; display:flex; align-items:center; gap:8px; }
.panel-body{ padding:12px; }
.panel-body.flush{ padding:0; }
.grid{ display:grid; gap:12px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:12px; }
.entries{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
@media (max-width:1400px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1100px){ .g2,.g3,.g4{grid-template-columns:1fr} }

/* ---------------- KPI / 数据卡 ---------------- */
.kpi{
  background:linear-gradient(135deg,#0c274c,#081a35); border:1px solid var(--panel-border);
  padding:13px 14px; position:relative; overflow:hidden;
}
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.kpi.k-ok::before{ background:var(--ok); } .kpi.k-warn::before{ background:var(--warn); }
.kpi.k-alarm::before{ background:var(--alarm); } .kpi.k-purple::before{ background:var(--purple); }
.kpi .l{ font-size:12px; color:var(--sub); margin-bottom:6px; }
.kpi .v{ font-size:25px; font-weight:bold; color:#fff; line-height:1.1; }
.kpi .v small{ font-size:12px; color:var(--sub); font-weight:normal; margin-left:3px; }
.kpi .s{ font-size:11px; color:var(--dim); margin-top:5px; }
.kpi .v.c-ok{color:var(--ok)} .kpi .v.c-warn{color:var(--warn)} .kpi .v.c-alarm{color:var(--alarm)} .kpi .v.c-accent{color:var(--accent)}

.data-card{ background:var(--deep); border:1px solid var(--line); padding:9px; text-align:center; }
.data-card .label{ font-size:12px; color:var(--sub); margin-bottom:4px; }
.data-card .val{ font-size:18px; font-weight:bold; color:#fff; }
.val.green{color:var(--ok)} .val.yellow{color:var(--warn)} .val.blue{color:var(--accent)} .val.red{color:var(--alarm)}

/* ---------------- 筛选条 / 表单 / 按钮 ---------------- */
.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; background:var(--deep); border:1px solid var(--line); margin-bottom:12px;
}
.filter-bar select,.filter-bar input,select,input[type=text],input[type=date],input[type=number],textarea{
  background:var(--deep2); color:#cfe5ff; border:1px solid #1b4f72; padding:5px 8px; font-size:13px; outline:none;
}
.filter-bar select:focus,input:focus,textarea:focus{ border-color:var(--accent); }
.btn{
  background:#0a3a6e; border:1px solid #1b4f72; color:#9fd0ff;
  padding:5px 12px; cursor:pointer; font-size:13px; border-radius:2px;
}
.btn:hover{ border-color:var(--accent); color:#fff; }
.btn.primary{ background:#0a5c9e; border-color:#1e80c8; color:#fff; }
.btn.danger{ background:#7a1f1f; border-color:#c0392b; color:#ffd9d9; }
.btn.ok{ background:#0a5c43; border-color:#138d68; color:#d8fff0; }
.btn.sm{ padding:2px 8px; font-size:12px; }
.form-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.form-row label{ width:110px; color:var(--sub); font-size:13px; text-align:right; flex-shrink:0; }
.form-row .ctl{ flex:1; min-width:160px; }
.status-tip{ margin-left:auto; display:flex; gap:16px; font-size:12px; color:var(--sub); }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; }
.online{background:var(--ok)} .warn-dot{background:var(--orange)} .alarm-dot{background:var(--alarm)} .off-dot{background:var(--offline)}

/* ---------------- 表格 / 标签 ---------------- */
.tbl,.alarm-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th,.tbl td,.alarm-table th,.alarm-table td{ border:1px solid var(--panel-border); padding:7px 9px; text-align:left; }
.tbl th,.alarm-table th{ background:var(--title-bg); color:#9fd0ff; font-weight:bold; white-space:nowrap; }
.tbl tr:nth-child(even),.alarm-table tr:nth-child(even){ background:var(--deep); }
.tbl tr:hover,.alarm-table tr:hover{ background:#0d2c52; }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tag{ display:inline-block; padding:2px 8px; font-size:12px; border-radius:2px; white-space:nowrap; }
.tag-ok,.tag-done{ background:#004433; color:var(--ok); }
.tag-warn,.tag-un{ background:#553300; color:var(--warn); }
.tag-orange{ background:#6b3a00; color:var(--orange); }
.tag-alarm,.tag-important{ background:#662200; color:#ff7a5c; }
.tag-info{ background:#0a3a5e; color:var(--accent); }
.tag-off{ background:#2a3548; color:var(--offline); }
.tag-purple{ background:#3a2360; color:var(--purple); }
.blink{ animation:blink 1s steps(2,start) infinite; }
@keyframes blink{ to{ opacity:.25; } }

/* ---------------- 模块入口卡 ---------------- */
.entry-card{
  display:block; padding:14px; text-decoration:none; color:var(--text);
  border:1px solid var(--panel-border); background:linear-gradient(135deg,#0b2a52,#081a35);
  transition:.15s; position:relative;
}
.entry-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,60,120,.35); }
.entry-card .e-no{ font-size:11px; color:var(--dim); }
.entry-card h4{ color:var(--accent); font-size:15px; margin:4px 0 7px; }
.entry-card p{ color:var(--sub); font-size:12px; line-height:1.6; }
.entry-card .go{ position:absolute; right:12px; bottom:10px; color:var(--dim); font-size:12px; }

/* ---------------- 图表 ---------------- */
.chart{ width:100%; height:260px; }
.chart.sm{ height:200px; } .chart.lg{ height:360px; }

/* ---------------- 视频 / GIS / 组态 / 拓扑 舞台 ---------------- */
.stage{
  position:relative; background:radial-gradient(circle at 50% 40%,#0a1e3a,#040a16 80%);
  border:1px solid var(--panel-border); overflow:hidden; min-height:420px;
}
.stage svg{ width:100%; height:100%; display:block; }
.stage .stage-tag{
  position:absolute; left:8px; top:8px; font-size:11px; color:var(--orange);
  border:1px solid #6b3a00; background:rgba(60,30,0,.5); padding:2px 7px; border-radius:2px; z-index:5;
}
.flow{ stroke-dasharray:7 7; animation:dash 1.1s linear infinite; }
.flow.rev{ animation-direction:reverse; }
@keyframes dash{ to{ stroke-dashoffset:-28; } }
.node-label{ fill:#9fd0ff; font-size:11px; }
.node-sub{ fill:var(--sub); font-size:10px; }
.map-node{ cursor:pointer; }
.map-node circle.pt{ transition:r .2s; }
.map-node:hover circle.pt{ r:11; }
.pulse{ animation:pulse 1.6s ease-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes pulse{ 0%{opacity:.9;r:7} 100%{opacity:0;r:18} }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--sub); }
.legend .lg-item{ display:flex; align-items:center; gap:5px; }
.legend .lg-sq{ width:12px; height:12px; border:1px solid #3a5a82; }

.video{
  position:relative; background:#000; min-height:210px; height:100%;
  display:flex; align-items:center; justify-content:center; color:#3d5a7a; overflow:hidden;
}
.video::before{
  content:attr(data-rec); position:absolute; bottom:8px; left:8px;
  color:#ff4444; font-size:12px;
}
.video .scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
}
.ai-box{
  position:absolute; border:1.5px solid var(--alarm); border-radius:2px;
  box-shadow:0 0 8px rgba(255,77,79,.5);
}
.ai-box .ai-tag{
  position:absolute; top:-20px; left:-1px; background:var(--alarm); color:#fff;
  font-size:10px; padding:1px 6px; white-space:nowrap;
}
.ai-box.ok{ border-color:var(--warn); box-shadow:0 0 8px rgba(255,204,0,.5); }
.ai-box.ok .ai-tag{ background:var(--warn); color:#332500; }

/* ---------------- 步骤条 / 时间线 ---------------- */
.steps{ display:flex; gap:8px; flex-wrap:wrap; }
.step{
  flex:1; min-width:120px; text-align:center; padding:12px 8px 10px;
  border:1px solid var(--panel-border); background:var(--deep); position:relative;
}
.step .sn{
  width:24px; height:24px; border-radius:50%; margin:0 auto 7px; display:flex;
  align-items:center; justify-content:center; background:#16365e; color:var(--sub); font-size:12px;
}
.step.done{ border-color:#0c6e4e; } .step.done .sn{ background:#0c6e4e; color:#d8fff0; }
.step.active{ border-color:var(--accent); box-shadow:0 0 10px rgba(0,204,255,.25); }
.step.active .sn{ background:#0a5c9e; color:#fff; }
.step .st{ font-size:13px; } .step .sd{ font-size:11px; color:var(--dim); margin-top:3px; }
.timeline{ padding-left:16px; border-left:2px solid var(--panel-border); margin-left:6px; }
.tl-item{ position:relative; padding:0 0 14px 16px; }
.tl-item::before{
  content:""; position:absolute; left:-22px; top:4px; width:8px; height:8px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(0,204,255,.6);
}
.tl-item.alarm::before{ background:var(--alarm); box-shadow:0 0 6px rgba(255,77,79,.7); }
.tl-item.ok::before{ background:var(--ok); }
.tl-time{ font-size:11px; color:var(--dim); }
.tl-text{ font-size:13px; color:var(--text); margin-top:2px; }

/* ---------------- 进度条 / 开关 / 仪表 ---------------- */
.pbar{ height:8px; background:var(--deep); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.pbar > i{ display:block; height:100%; background:linear-gradient(90deg,#0a6ea8,#00ff88); border-radius:3px; }
.pbar.warn > i{ background:linear-gradient(90deg,#b5790a,#ffcc00); }
.pbar.alarm > i{ background:linear-gradient(90deg,#a02525,#ff7a5c); }
.switch{ width:38px; height:20px; border-radius:10px; background:#24405e; position:relative; display:inline-block; cursor:pointer; vertical-align:middle; }
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#aac6e6; transition:.15s;
}
.switch.on{ background:#0a6e4e; } .switch.on::after{ left:20px; background:#d8fff0; }
.gauge-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.gauge-row .gl{ width:130px; font-size:12px; color:var(--sub); flex-shrink:0; }

/* ---------------- 弹窗 ---------------- */
.mask{
  position:fixed; inset:0; background:rgba(2,8,20,.65); display:none;
  align-items:center; justify-content:center; z-index:100;
}
.mask.show{ display:flex; }
.modal{ width:430px; max-width:92vw; background:var(--panel); border:1px solid #1b4f72; box-shadow:0 10px 50px rgba(0,0,0,.6); }
.modal-head{ background:var(--title-bg); padding:10px 14px; font-weight:bold; color:#9fd0ff; display:flex; justify-content:space-between; }
.modal-body{ padding:16px; font-size:13px; line-height:1.8; }
.modal-foot{ padding:10px 14px; text-align:right; border-top:1px solid var(--panel-border); display:flex; gap:8px; justify-content:flex-end; }
.modal .x{ cursor:pointer; color:var(--sub); }
.toast{
  position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200;
  background:#0a3a2a; border:1px solid #138d68; color:#d8fff0; padding:9px 18px; font-size:13px;
  display:none; box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.toast.show{ display:block; animation:tin .2s; }
@keyframes tin{ from{opacity:0; transform:translate(-50%,-8px)} }

/* ---------------- 信息列表 / 描述 ---------------- */
.desc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 16px; }
.desc .di{ display:flex; font-size:13px; border-bottom:1px dashed #16335a; padding:5px 0; }
.desc .di .k{ color:var(--dim); width:96px; flex-shrink:0; }
.desc .di .vv{ color:var(--text); }
.feed{ max-height:300px; overflow:auto; }
.feed-row{ display:flex; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line); font-size:12.5px; align-items:center; }
.feed-row:hover{ background:var(--deep); }
.feed-row .ft{ color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.muted{ color:var(--dim); font-size:12px; }
.section-tip{
  border-left:3px solid var(--accent); background:var(--deep); padding:8px 12px;
  font-size:12.5px; color:var(--sub); line-height:1.7; margin-bottom:12px;
}
.qr{
  width:120px; height:120px; border:8px solid #fff; background:
   repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0/20px 20px, #fff;
}
.mtx td:first-child{ background:#0b2a52; color:#9fd0ff; font-weight:bold; }
.mtx .y{ text-align:center; color:var(--ok); } .mtx .n{ text-align:center; color:var(--offline); }
.mtx .ro{ text-align:center; color:var(--warn); }
@media (max-width:900px){
  .sidebar{ position:fixed; left:-252px; top:56px; z-index:60; height:calc(100vh - 56px); transition:left .2s; }
  body.nav-open .sidebar{ left:0; }
  .hamburger{ display:flex; }
  .brand{ font-size:15px; letter-spacing:0; }
  .top-user .u-name,.top-user .u-role{ display:none; }
}

/* ---------------- Leaflet 真实地图（深色适配） ---------------- */
.leaflet-container{ background:#0a1e3a; font-family:inherit; outline:none; }
.leaflet-bar{ box-shadow:0 2px 10px rgba(0,0,0,.5); border:none; }
.leaflet-bar a{
  background:#0a2342; color:#9fd0ff; border-bottom:1px solid #1b4f72; width:30px; height:30px;
  line-height:30px; font-size:18px;
}
.leaflet-bar a:hover{ background:#0b3a6e; color:#fff; }
.leaflet-control-attribution{ background:rgba(5,13,29,.72)!important; color:#5f7fa0!important; font-size:10px; }
.leaflet-control-attribution a{ color:#7fb3e0!important; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:#081a35; color:#d0e6ff; border:1px solid #1b4f72;
  box-shadow:0 8px 28px rgba(0,0,0,.65);
}
.leaflet-popup-content{ margin:11px 13px; font-size:12px; line-height:1.65; }
.leaflet-popup-close-button{ color:#8ab4d6!important; font-size:18px!important; }
.leaflet-popup-close-button:hover{ color:#fff!important; }
.mpp-t{ color:#00ccff; font-weight:bold; font-size:13px; margin-bottom:5px; }
.mpp table{ border-collapse:collapse; }
.mpp td{ padding:1px 8px 1px 0; color:#8ab4d6; }
.mpp td b{ color:#d0e6ff; font-weight:normal; }
.mpp .mpp-btns{ margin-top:7px; display:flex; gap:6px; }
/* 地图设施点 */
.mp{ display:flex; flex-direction:column; align-items:center; width:90px; }
.mp i{
  width:15px; height:15px; border-radius:50%; border:2px solid #04101f;
  box-shadow:0 0 7px rgba(0,0,0,.6);
}
.mp b{
  font-size:10px; font-weight:normal; color:#cfe5ff; background:rgba(5,13,29,.78);
  padding:0 4px; border-radius:2px; margin-top:2px; white-space:nowrap;
}
.mp.ok i{ background:#00ff88; }
.mp.warn i{ background:#ffcc00; }
.mp.alarm i{ background:#ff4d4f; animation:mpulse 1.4s infinite; }
.mp.off i{ background:#7a8aa0; }
.mp.station i{ border-radius:2px; width:16px; height:16px; }
.mp.pump i{ border-radius:2px; transform:rotate(45deg); }
.mp.video i{ background:#b37feb; width:10px; height:10px; }
@keyframes mpulse{
  0%{ box-shadow:0 0 0 0 rgba(255,77,79,.7); }
  70%{ box-shadow:0 0 0 13px rgba(255,77,79,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,79,0); }
}
/* Leaflet 管网上的流动动画（SVG path） */
.ll-flow{ stroke-dasharray:6 8; animation:dash 1.1s linear infinite; }
.ll-flow.rev{ animation-direction:reverse; }
.leaflet-container.paused .ll-flow{ animation:none; }
.map-tag{
  position:absolute; right:10px; top:10px; z-index:1000;
  background:rgba(5,13,29,.82); border:1px solid #1b4f72; color:#8ab4d6;
  font-size:11px; padding:3px 9px; border-radius:2px; pointer-events:none;
}
.map-fallback{
  position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:1000;
  max-width:80%; padding:10px 16px; color:#ffcc00; font-size:12.5px; line-height:1.7;
  background:rgba(40,28,4,.92); border:1px solid #8a6a1b; border-radius:3px;
}
#gisMap .mpp .btn, .leaflet-popup .btn{ text-decoration:none; }

/* ---------------- 列表页：工具行 / 行内操作 / 分页 ---------------- */
.tbl-tools{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--panel-border); background:var(--deep);
}
.tbl-tools .push{ margin-left:auto; display:flex; gap:8px; }
.btn.ghost{ background:transparent; border-color:#1b4f72; }
.btn.green{ background:#0a5c43; border-color:#138d68; color:#d8fff0; }
.btn.purple{ background:#3a2360; border-color:#6a4bb0; color:#e2d6ff; }
.ops{ white-space:nowrap; font-size:12.5px; }
.ops a{ cursor:pointer; text-decoration:none; margin-right:9px; color:var(--accent); }
.ops a:last-child{ margin-right:0; }
.ops a:hover{ text-decoration:underline; }
.ops a.ok{ color:var(--ok); }
.ops a.warn{ color:var(--warn); }
.ops a.danger{ color:#ff7a5c; }
.ops a.purple{ color:var(--purple); }
.pager{
  display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  padding:11px 12px; font-size:12.5px; color:var(--sub);
}
.pager select,.pager input{
  background:var(--deep2); color:#cfe5ff; border:1px solid #1b4f72; padding:3px 6px; font-size:12.5px; outline:none;
}
.pager input{ width:46px; text-align:center; }
.pager .pg{
  min-width:26px; height:26px; padding:0 6px; border:1px solid #1b4f72; background:var(--deep2);
  color:#cfe5ff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12.5px; text-decoration:none; user-select:none;
}
.pager .pg:hover{ border-color:var(--accent); color:var(--accent); }
.pager .pg.cur{ background:#0a5c9e; border-color:#1e80c8; color:#fff; cursor:default; }
.pager .pg.dis{ color:var(--dim); cursor:default; border-color:var(--line); }
.tbl td .ck{ accent-color:#0a5c9e; cursor:pointer; }