/* ===================== 基础变量 ===================== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#0A1628;
  --panel:rgba(10,30,56,.80);
  --panel-line:rgba(35,120,200,.42);
  --cyan:#00D4FF;
  --blue:#1e9fff;
  --txt:#cfe6ff;
  --txt-dim:#7aa2cc;
  --red:#FF2D2D;
  --orange:#FF7A00;
  --yellow:#FFD700;
  --green:#00E676;
  --purple:#a855f7;
}
html,body{
  width:100%; height:100%; overflow:hidden;
  background:#0A1628; color:var(--txt);
  font-family:"PingFang SC","Microsoft YaHei","HarmonyOS Sans SC",sans-serif;
  font-size:13px;
}
body{
  background:
    radial-gradient(circle at 50% 50%, rgba(14,50,96,.55), transparent 55%),
    linear-gradient(180deg, #0A1628 0%, #06152b 100%);
}
svg{ display:block; }

/* ===================== 缩放容器 ===================== */
#screen-wrap{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(10,52,100,.45), transparent 58%),
    repeating-linear-gradient(0deg, rgba(0,80,160,.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(0,80,160,.04) 0 1px, transparent 1px 80px),
    #0A1628;
}
#screen{
  width:1920px; height:1080px; transform-origin:center center;
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% -20%, rgba(14,60,110,.45), transparent 55%);
}

/* ===================== 全屏地图 + 边缘内模糊 ===================== */
.map-fullscreen{ position:absolute; inset:0; z-index:0; }
.map-box{ width:100%; height:100%; }
.amap-container{ background:#04122a !important; }

.edge{ position:absolute; pointer-events:none; z-index:1; }
.edge-top{
  top:0; left:0; right:0; height:200px;
  background:linear-gradient(180deg, rgba(2,9,19,.95) 0%, rgba(2,9,19,.65) 40%, transparent 100%);
}
.edge-bottom{
  bottom:0; left:0; right:0; height:210px;
  background:linear-gradient(0deg, rgba(2,9,19,.95) 0%, rgba(2,9,19,.7) 35%, transparent 100%);
}
.edge-left{
  top:0; bottom:0; left:0; width:388px;
  background:linear-gradient(90deg, rgba(2,9,19,.92) 0%, rgba(2,9,19,.55) 50%, transparent 100%);
}
.edge-right{
  top:0; bottom:0; right:0; width:388px;
  background:linear-gradient(270deg, rgba(2,9,19,.92) 0%, rgba(2,9,19,.55) 50%, transparent 100%);
}

/* ===================== 顶部标题栏 ===================== */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:20; height:72px;
  display:flex; align-items:center; justify-content:center;
  padding:0 22px;
  background:linear-gradient(180deg, rgba(2,9,19,.95) 0%, rgba(4,16,32,.78) 70%, transparent 100%);
}
.topbar::after{
  content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:55%; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 14px var(--cyan);
}
.topbar-left{ position:absolute; left:22px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; min-width:220px; }
#topbar-date{ font-size:15px; color:#eaf5ff; letter-spacing:1px; font-weight:600; }
#topbar-weather{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--txt-dim); }
.w-icon{ width:16px; height:16px; color:#9ecfff; }
.topbar-title{ text-align:center; }
.topbar-title h1{
  font-size:30px; letter-spacing:5px; font-weight:700;
  background:linear-gradient(180deg, #fff, #7fd2ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 20px rgba(0,180,255,.5);
}
.topbar-title p{
  font-size:12px; color:var(--cyan); letter-spacing:6px; margin-top:2px;
  text-shadow:0 0 10px rgba(0,234,255,.4);
}
.topbar-nav{ position:absolute; right:22px; top:50%; transform:translateY(-50%); display:flex; gap:18px; min-width:420px; justify-content:flex-end; }
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--txt-dim); cursor:pointer; transition:.2s;
}
.nav-item svg{ width:18px; height:18px; }
.nav-item span{ font-size:12px; }
.nav-item:hover, .nav-item.active{ color:var(--cyan); text-shadow:0 0 10px rgba(0,234,255,.5); }
.nav-user{
  display:flex; align-items:center; padding:0 10px;
  color:var(--cyan); font-size:12px; white-space:nowrap;
  border:1px solid rgba(0,212,255,.35); border-radius:14px;
  background:rgba(0,212,255,.08); box-shadow:0 0 8px rgba(0,212,255,.15) inset;
}

/* ===================== 场景切换 Tab 栏 ===================== */
.scene-tabs{
  position:absolute; top:72px; left:0; right:0; height:40px; z-index:21;
  display:flex; align-items:center; gap:8px; padding:0 18px;
  background:linear-gradient(180deg, rgba(2,9,19,.82), rgba(2,9,19,.35));
  border-bottom:1px solid rgba(35,120,200,.25);
}
.scene-tabs::before{ content:"场景切换"; font-size:12px; color:var(--txt-dim); margin-right:6px; }
.stab{
  display:flex; align-items:center; gap:6px; padding:5px 14px; border-radius:18px;
  font-size:13px; color:var(--txt-dim); cursor:pointer; transition:.2s;
  border:1px solid transparent; white-space:nowrap;
}
.stab svg{ width:16px; height:16px; }
.stab:hover{ color:var(--txt); background:rgba(0,140,255,.12); }
.stab.active{
  color:#fff; background:rgba(0,180,255,.22); border-color:rgba(0,234,255,.5);
  box-shadow:0 0 12px rgba(0,234,255,.3);
}
.stab.active .stab-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }

/* ===================== 主体悬浮面板布局 ===================== */
.layout{
  position:absolute; inset:112px 0 0 0; z-index:10;
  padding:8px 12px 10px;
  display:grid;
  grid-template-columns:366px 1fr 366px;
  grid-template-rows:1fr auto;
  gap:8px;
  pointer-events:none;
}
.col{ display:flex; flex-direction:column; gap:8px; min-height:0; }
.col-left{ grid-column:1; grid-row:1; pointer-events:auto; }
.col-right{ grid-column:3; grid-row:1; pointer-events:auto; }
/* 注：地图底部控制条与图层面板已改为直接挂于 #screen，不再使用 .col-center 包裹层 */
.bottom-row{
  grid-column:1 / -1; grid-row:2;
  display:grid; grid-template-columns:1fr 1.25fr 1fr 1.15fr; gap:10px;
  height:162px; pointer-events:auto;
}

/* ===================== 面板通用 ===================== */
.panel{
  position:relative; background:var(--panel);
  border:1px solid var(--panel-line); border-radius:6px;
  display:flex; flex-direction:column; min-height:0; flex:1 1 0;
  box-shadow:0 0 18px rgba(0,40,90,.35), inset 0 0 22px rgba(0,100,200,.10);
  overflow:hidden;
  backdrop-filter:blur(4px);
}
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,234,255,.7), transparent);
  opacity:.8;
}
.panel-head{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:6px 12px 5px; font-size:14px; font-weight:600; color:#dff5ff;
  border-bottom:1px solid rgba(40,120,200,.2);
}
.panel-head svg.ph{ width:18px; height:18px; color:var(--cyan); }
.panel-head .sub{ margin-left:auto; font-size:12px; color:var(--txt-dim); font-weight:400; }
.panel-head .link{ margin-left:auto; font-size:12px; color:var(--blue); cursor:pointer; }

/* ===================== 监测范围条（数据维度标注①） ===================== */
.scope-bar{
  flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px;
  padding:6px 12px; font-size:11px; color:var(--txt-dim);
  background:rgba(0,120,200,.10); border-bottom:1px solid rgba(40,120,200,.18);
}
.scope-bar b{ color:var(--cyan); font-weight:600; }
.scope-bar .sb-dot{ width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 5px var(--cyan); }

/* ===================== 总览：六场景安全指数 ===================== */
.overview-body{ flex:1; display:flex; min-height:0; }
.overview-radar{ width:200px; height:100%; }
.overview-cards{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:6px; padding:8px 10px; }
.ov-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); border-radius:5px;
}
.ov-card svg{ width:18px; height:18px; margin-bottom:1px; }
.ov-card .v{ font-size:17px; font-weight:700; color:#fff; line-height:1; }
.ov-card .n{ font-size:11px; color:var(--txt-dim); }
.ov-card .bar{ width:80%; height:3px; border-radius:2px; margin-top:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.ov-card .bar i{ display:block; height:100%; border-radius:2px; }

/* ===================== 专项监测面板（范围条 + 指标 + 图表） ===================== */
.spec-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.spec-grid{
  flex:1; display:grid; grid-template-columns:1fr 130px; gap:8px; padding:8px 10px; min-height:0;
}
.spec-metrics{ display:flex; flex-direction:column; gap:6px; justify-content:center; }
.spec-metric{
  display:flex; align-items:center; gap:8px; padding:5px 8px;
  background:rgba(0,120,200,.07); border:1px solid rgba(40,120,200,.15); border-radius:5px;
}
.spec-metric svg{ width:16px; height:16px; flex:0 0 auto; }
.spec-metric .t{ font-size:11px; color:var(--txt-dim); }
.spec-metric .v{ margin-left:auto; font-size:14px; color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.spec-metric .v small{ font-size:10px; color:var(--txt-dim); font-weight:400; margin-left:2px; }
.spec-metric .src{ display:block; font-size:10px; color:var(--txt-dim); margin-left:auto; text-align:right; }
/* 指标口径/对象标注（数据维度标注①） */
.metric-src{
  font-size:10px; color:var(--txt-dim); line-height:1.3; padding:2px 8px 0;
}
.metric-src b{ color:var(--orange); font-weight:600; }
.metric-src .mk{ color:#8fb6e0; }
.spec-chart{ width:100%; height:100%; min-height:0; }

/* ===================== 异常预警 TOP5 ===================== */
.abnormal-table{ flex:1; overflow:hidden; display:flex; flex-direction:column; font-size:12px; }
.abnormal-table .th, .abnormal-table .tr{
  display:grid; grid-template-columns:1.5fr .8fr .9fr .8fr; gap:5px;
  padding:4px 8px; align-items:center;
}
.abnormal-table .th{ color:var(--txt-dim); border-bottom:1px solid rgba(40,120,200,.2); font-weight:600; }
.abnormal-table .tr{ border-bottom:1px solid rgba(40,120,200,.08); color:#cfe6ff; }
.abnormal-table .tr span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scene-tag{ display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px; font-weight:600; }
.st-gas{ background:rgba(255,107,107,.18); color:#ff6b6b; }
.st-water{ background:rgba(54,162,255,.18); color:#36a2ff; }
.st-drain{ background:rgba(46,230,166,.18); color:#2ee6a6; }
.st-bridge{ background:rgba(255,214,10,.16); color:#ffd60a; }
.st-tunnel{ background:rgba(177,140,255,.18); color:#b18cff; }
.st-corridor{ background:rgba(0,234,255,.16); color:#00eaff; }
.abnormal-table .type{ color:var(--orange); }
.abnormal-table .obj{ color:var(--cyan); }

/* ===================== 隐患统计 ===================== */
.hidden-body{ flex:1; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:8px 10px; }
.hi{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.2); border-radius:5px; }
.hi svg{ width:20px; height:20px; color:var(--cyan); }
.hi span{ font-size:10px; color:var(--txt-dim); text-align:center; }
.hi b{ font-size:14px; color:#fff; }

/* ===================== 设备/测点状态 ===================== */
.dev-body{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:8px 10px; }
.dev{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.2); border-radius:5px; }
.dev svg{ width:22px; height:22px; color:var(--cyan); }
.dev span{ font-size:11px; color:var(--txt-dim); }
.dev b{ font-size:14px; color:#fff; }
.dev small{ font-size:10px; color:var(--txt-dim); }

/* ===================== 底部四栏 ===================== */
.panel-resource, .panel-warn-list, .panel-event-bar, .panel-flow{ height:100%; }
.resource-body{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px 12px; }
.res{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.2); border-radius:5px; }
.res svg{ width:22px; height:22px; color:var(--cyan); }
.res span{ font-size:11px; color:var(--txt-dim); }
.res b{ font-size:14px; color:#fff; }
.res small{ font-size:10px; color:var(--txt-dim); }

.warn-list{ flex:1; overflow:hidden; display:flex; flex-direction:column; font-size:12px; padding:0 12px; }
.warn-item{ display:grid; grid-template-columns:48px 1fr 56px; gap:8px;
  align-items:center; padding:5px 0; border-bottom:1px solid rgba(40,120,200,.08); }
.lv-badge{ padding:1px 6px; border-radius:3px; font-size:10px; font-weight:600; text-align:center; }
/* 预警四级色值对齐《设计文档》：红#FF2D2D 橙#FF7A00 黄#FFD700 蓝#4A90FF */
.lv-red{ background:rgba(255,45,45,.22); color:#ff5b5b; border:1px solid rgba(255,45,45,.5); }
.lv-orange{ background:rgba(255,122,0,.2); color:#ff9d2e; border:1px solid rgba(255,122,0,.5); }
.lv-yellow{ background:rgba(255,215,0,.18); color:#ffd60a; border:1px solid rgba(255,215,0,.45); }
.lv-blue{ background:rgba(74,144,255,.18); color:#74b0ff; border:1px solid rgba(74,144,255,.5); }
.warn-item .time{ color:var(--txt-dim); font-variant-numeric:tabular-nums; }
.warn-item .name{ color:#cfe6ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.event-bar-chart{ flex:1; width:100%; min-height:0; }

.flow-body{ flex:1; display:flex; align-items:center; justify-content:space-between; padding:0 10px; }
.flow-step{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.flow-step svg{ width:16px; height:16px; color:var(--cyan); }
.flow-step span{ font-size:10px; color:var(--txt-dim); }
.flow-step b{ font-size:12px; color:#fff; }
.flow-arrow{ color:var(--txt-dim); }
.flow-arrow svg{ width:13px; height:13px; }

/* ===================== 中央地图导航 ===================== */
.map-nav{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:4px; padding:6px 10px;
  background:rgba(4,16,34,.82); border:1px solid rgba(0,200,255,.3); border-radius:30px;
  backdrop-filter:blur(4px); z-index:30;
}

/* ===================== 地图底部控制条（默认只居中导航；非综合态势时着色维度/仿真推演回归左右） ===================== */
.map-bottom-bar{
  position:absolute; left:0; right:0; bottom:14px; z-index:25;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:0 16px; pointer-events:none;
}
.map-bottom-bar.with-sides{ justify-content:space-between; }
.map-bottom-bar > *{ pointer-events:auto; }
.map-bottom-bar .map-nav{
  position:static; transform:none; left:auto; bottom:auto; margin:0 auto;
}
.map-bottom-bar .color-switch{ position:static; }
.map-bottom-bar .sim-trigger{ position:static; top:auto; right:auto;
  box-shadow:0 0 14px rgba(0,200,255,.22); padding:7px 15px; }

/* ===================== 综合态势：着色维度 / 仿真推演 外挂于左右下角面板 ===================== */
.ov-l3 .color-switch{
  position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:20px; z-index:25;
  right:auto; bottom:auto;
}
.ov-r3 .sim-trigger{
  position:absolute; right:100%; top:50%; transform:translateY(-50%);
  margin-right:20px; z-index:25;
  left:auto; bottom:auto;
  white-space:nowrap; width:auto;
}
.mnav-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px; padding:5px 8px; border-radius:20px;
  color:var(--txt-dim); cursor:pointer; transition:.2s; font-size:11px;
  pointer-events:auto; white-space:nowrap;
}
.mnav-item svg{ width:16px; height:16px; }
.mnav-item:hover, .mnav-item.active{ background:rgba(0,200,255,.18); color:var(--cyan); }

/* ===================== 仿真推演触发按钮 ===================== */
.sim-trigger{
  position:absolute; top:120px; right:16px; z-index:30;
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  background:rgba(6,22,44,.9); border:1px solid rgba(0,234,255,.5); border-radius:30px;
  color:var(--cyan); font-size:13px; font-weight:600; cursor:pointer; transition:.2s;
  box-shadow:0 0 16px rgba(0,200,255,.3); backdrop-filter:blur(4px);
}
.sim-trigger:hover{ background:rgba(0,180,255,.25); box-shadow:0 0 22px rgba(0,234,255,.5); }
.sim-trigger svg{ width:18px; height:18px; }

/* ===================== 仿真推演模态（右侧抽屉） ===================== */
.sim-modal{
  position:absolute; top:112px; right:0; bottom:0; width:400px; z-index:40;
  transform:translateX(100%); transition:.28s ease;
  padding:14px 16px; display:flex; flex-direction:column; gap:12px;
  background:rgba(6,22,44,.96); border-left:1px solid rgba(0,234,255,.4);
  box-shadow:-8px 0 30px rgba(0,20,50,.7); backdrop-filter:blur(8px);
}
.sim-modal.show{ transform:translateX(0); }
.sim-modal-head{ display:flex; align-items:center; justify-content:space-between;
  padding-bottom:8px; border-bottom:1px solid rgba(40,120,200,.3); }
.sm-title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--cyan); }
.sm-title svg{ width:18px; height:18px; }
.sim-close{ background:none; border:none; color:#fff; font-size:24px; cursor:pointer; line-height:1; }
.sm-row{ display:flex; flex-direction:column; gap:8px; }
.sm-label{ font-size:12px; color:var(--txt-dim); }
.sm-scenes{ display:flex; flex-wrap:wrap; gap:8px; }
.sm-scene{
  font-size:12px; color:var(--txt); background:rgba(0,120,200,.12);
  border:1px solid rgba(40,120,200,.3); border-radius:6px; padding:7px 12px; cursor:pointer; transition:.2s;
}
.sm-scene:hover{ color:var(--cyan); border-color:rgba(0,200,255,.5); }
.sm-scene.active{ background:rgba(0,234,255,.22); color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(0,234,255,.3); }
.sm-params{ gap:10px; }
.sm-param{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--txt-dim); }
.sm-param label{ min-width:96px; }
.sm-param input[type=range]{ flex:1; accent-color:var(--cyan); }
.sm-param select{ background:rgba(0,40,80,.6); color:var(--txt); border:1px solid rgba(40,120,200,.4); border-radius:5px; padding:4px 6px; }
.sm-param b{ color:var(--cyan); min-width:24px; }
.sm-timeline{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.sm-ctrl{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(0,160,255,.15); border:1px solid rgba(0,200,255,.35); border-radius:7px; color:var(--cyan); transition:.2s;
}
.sm-ctrl svg{ width:18px; height:18px; }
.sm-ctrl:hover{ background:rgba(0,200,255,.3); }
.sc-progress{ flex:1; height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.sc-progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--blue)); border-radius:3px; transition:width .1s linear; }
.sc-time{ font-size:12px; color:#cfe6ff; font-variant-numeric:tabular-nums; min-width:62px; text-align:right; }
.sm-readout{ display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--txt-dim);
  padding:10px 12px; background:rgba(0,120,200,.08); border-radius:6px; border:1px solid rgba(40,120,200,.2); }
.sm-readout .sr-hint{ color:var(--txt-dim); }
.sm-readout .sr-item{ display:flex; justify-content:space-between; }
.sm-readout .sr-item b{ color:#fff; font-size:13px; }
.sm-readout .sr-item.warn b{ color:var(--orange); }

/* ===================== 着色维度切换 ===================== */
.color-switch{
  position:absolute; left:14px; top:120px; z-index:14;
  display:flex; align-items:center; gap:6px; padding:6px 10px;
  background:rgba(4,16,34,.82); border:1px solid rgba(0,200,255,.28); border-radius:8px;
  backdrop-filter:blur(4px);
}
.cs-title{ font-size:12px; color:var(--cyan); font-weight:600; white-space:nowrap; }
.cs-btn{
  font-size:11px; color:var(--txt-dim); background:rgba(0,120,200,.1);
  border:1px solid rgba(40,120,200,.25); border-radius:5px; padding:4px 8px; cursor:pointer; transition:.2s; white-space:nowrap;
}
.cs-btn:hover{ color:var(--cyan); border-color:rgba(0,200,255,.4); }
.cs-btn.active{ background:rgba(0,200,255,.2); color:var(--cyan); border-color:rgba(0,200,255,.5); }

/* ===================== 图层上拉面板 ===================== */
.layer-drawer{
  position:absolute; left:50%; bottom:76px; transform:translateX(-50%) translateY(20px);
  width:720px; padding:12px 16px 16px;
  background:rgba(6,22,44,.92); border:1px solid rgba(0,200,255,.35); border-radius:12px;
  box-shadow:0 -4px 24px rgba(0,30,70,.6); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:.25s; z-index:30;
}
.layer-drawer.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.layer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:8px; margin-bottom:10px;
  border-bottom:1px solid rgba(40,120,200,.25); color:var(--cyan); font-size:14px; font-weight:600;
}
.layer-close{ background:none; border:none; color:#fff; font-size:22px; cursor:pointer; line-height:1; }
.layer-body{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px 14px; }
.layer-group{ grid-column:1 / -1; font-size:12px; color:var(--cyan); margin-top:4px; padding-bottom:2px; border-bottom:1px dashed rgba(40,120,200,.25); }
.layer-item{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--txt); cursor:pointer;
  padding:6px 8px; border-radius:5px; background:rgba(0,120,200,.08);
  border:1px solid rgba(40,120,200,.15); transition:.2s;
}
.layer-item:hover{ background:rgba(0,160,255,.15); border-color:rgba(0,200,255,.3); }
.layer-item input{ accent-color:var(--cyan); width:14px; height:14px; }
.layer-item i{ flex:0 0 auto; }
.ly-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
.ly-square{ width:11px; height:11px; border-radius:2px; }

/* ===================== 地图标签 ===================== */
.map-label-wrap{ position:relative; display:inline-flex; flex-direction:column; align-items:center; white-space:nowrap; }
.map-label{
  padding:5px 12px; border-radius:6px; font-size:12px; color:#fff; line-height:1.4;
  box-shadow:0 2px 10px rgba(0,0,0,.45); display:flex; align-items:center; gap:6px;
}
.map-label svg{ width:14px; height:14px; }
.map-label-wrap .arrow{ width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid transparent; margin-top:-1px; }
.map-label.warn{ background:rgba(255,157,46,.42); border:1px solid rgba(255,157,46,.85); }
.map-label-wrap.warn .arrow{ border-top-color:rgba(255,157,46,.42); }
.map-label.danger{ background:rgba(255,77,79,.42); border:1px solid rgba(255,77,79,.85); }
.map-label-wrap.danger .arrow{ border-top-color:rgba(255,77,79,.42); }
.map-label.info{ background:rgba(30,159,255,.42); border:1px solid rgba(30,159,255,.85); }
.map-label-wrap.info .arrow{ border-top-color:rgba(30,159,255,.42); }
.map-label.pump{ background:rgba(46,230,166,.42); border:1px solid rgba(46,230,166,.85); }
.map-label-wrap.pump .arrow{ border-top-color:rgba(46,230,166,.42); }

.map-sensor{
  width:15px; height:15px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 9px currentColor; background:currentColor;
  display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#021; line-height:1;
}
.map-sensor.alarm{ animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 currentColor; } 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
.map-equip{
  width:26px; height:26px; border-radius:4px;
  background:linear-gradient(135deg, #1e9fff, #0d6efd);
  border:1px solid rgba(255,255,255,.6); box-shadow:0 0 12px rgba(30,159,255,.6);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.map-equip svg{ width:16px; height:16px; }
.map-feature{
  width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  border:1.5px solid rgba(255,255,255,.7); box-shadow:0 0 12px currentColor;
}
.map-feature svg{ width:15px; height:15px; }
.mf-bridge{ background:rgba(255,214,10,.55); color:#ffe14d; }
.mf-tunnel{ background:rgba(177,140,255,.55); color:#cbb0ff; }
.mf-corridor{ background:rgba(0,234,255,.5); color:#aef3ff; }

/* ===================== 弹窗 ===================== */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center;
}
.modal-overlay.show{ display:flex; }
.modal{
  width:920px; height:540px; background:rgba(6,24,48,.96);
  border:1px solid var(--cyan); border-radius:8px;
  box-shadow:0 0 40px rgba(0,200,255,.35);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:rgba(0,160,255,.12);
  border-bottom:1px solid rgba(0,200,255,.25); color:var(--cyan); font-size:16px; font-weight:600;
}
.modal-close{ background:none; border:none; color:#fff; font-size:26px; cursor:pointer; line-height:1; }
.modal-body{ flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:0; }
.modal-video{ padding:14px; display:flex; flex-direction:column; gap:10px; border-right:1px solid rgba(0,200,255,.15); }
.video-screen{
  flex:1; position:relative; border-radius:6px; overflow:hidden;
  background:repeating-linear-gradient(45deg, #0a1f3a 0 14px, #0d2647 14px 28px);
  display:flex; align-items:center; justify-content:center; color:#5b86b5;
}
.video-screen::after{ content:"实时监控画面"; opacity:.7; }
.rec{ position:absolute; top:10px; left:12px; color:var(--red); font-size:12px; font-weight:700; animation:blink 1s steps(2) infinite; }
.video-timer{ position:absolute; bottom:10px; right:12px; color:#cfe6ff; font-size:12px; font-variant-numeric:tabular-nums; }
.video-info{ font-size:12px; color:var(--txt-dim); line-height:1.8; }
.modal-detail{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.detail-head{ font-size:16px; color:#fff; font-weight:600; }
.detail-head small{ color:var(--cyan); font-size:13px; margin-left:10px; }
.detail-metrics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  padding:10px; background:rgba(0,120,200,.08); border-radius:5px; border:1px solid rgba(40,120,200,.2);
}
.detail-metrics .di{ font-size:12px; color:var(--txt-dim); }
.detail-metrics .di b{ color:#fff; font-size:14px; margin-left:5px; }
.detail-chart-title{ font-size:13px; color:var(--cyan); margin-top:4px; }
.detail-chart{ flex:1; width:100%; min-height:0; }

@keyframes blink{ 50%{ opacity:.2; } }
::-webkit-scrollbar{ width:0; height:0; }

/* ===================== 多设施群管理：状态看板 + 健康排行 + 筛选排序 ===================== */
.fac-panel{ flex:1; min-height:0; display:flex; flex-direction:column; }
.fac-board{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:6px 10px;
  border-bottom:1px solid rgba(40,120,200,.18); background:rgba(0,120,200,.06);
}
.fac-board .fb{ display:flex; flex-direction:column; align-items:center; gap:1px;
  background:rgba(0,120,200,.07); border:1px solid rgba(40,120,200,.15); border-radius:5px; padding:4px 2px; }
.fac-board .fb b{ font-size:15px; color:#fff; font-variant-numeric:tabular-nums; }
.fac-board .fb span{ font-size:10px; color:var(--txt-dim); }
.fac-board .fb.red b{ color:#ff5b5b; } .fac-board .fb.orange b{ color:#ff9d2e; } .fac-board .fb.cyan b{ color:var(--cyan); }

.fac-toolbar{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:6px 10px;
  border-bottom:1px solid rgba(40,120,200,.15); flex-wrap:wrap;
}
.fac-toolbar .ft-label{ font-size:11px; color:var(--txt-dim); }
.fac-toolbar select{
  background:rgba(0,40,80,.6); color:var(--txt); border:1px solid rgba(40,120,200,.4);
  border-radius:5px; padding:3px 6px; font-size:11px; cursor:pointer;
}
.fac-toolbar .ft-count{ margin-left:auto; font-size:11px; color:var(--cyan); }

.fac-list{ flex:1; min-height:0; overflow-y:auto; padding:4px 8px 8px; }
.fac-row{
  display:grid; grid-template-columns:14px 1fr auto; gap:8px; align-items:center;
  padding:7px 8px; margin-bottom:5px; cursor:pointer;
  background:rgba(0,120,200,.06); border:1px solid rgba(40,120,200,.14); border-radius:5px; transition:.18s;
}
.fac-row:hover{ background:rgba(0,180,255,.16); border-color:rgba(0,200,255,.4); transform:translateX(2px); }
.fac-row.active{ background:rgba(0,234,255,.16); border-color:var(--cyan); }
.fac-row .dot{ width:9px; height:9px; border-radius:50%; }
.fac-row .fr-main{ min-width:0; }
.fac-row .fr-name{ font-size:12px; color:#eaf5ff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fac-row .fr-sub{ font-size:10px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fac-row .fr-right{ text-align:right; }
.fac-row .fr-hi{ font-size:13px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.fac-row .fr-hi small{ font-size:9px; color:var(--txt-dim); font-weight:400; }
.fac-row .fr-tag{ display:inline-block; margin-top:2px; font-size:9px; padding:0 5px; border-radius:3px; }

/* ===================== 专项监测对象与指标明细表 ===================== */
.spectable{ flex:1; min-height:0; overflow-y:auto; padding:6px 10px; }
.spectable .st-group{ font-size:11px; color:var(--cyan); margin:6px 0 4px; font-weight:600; }
.spectable .st-line{ display:grid; grid-template-columns:96px 1fr; gap:8px; padding:3px 6px; font-size:11px; border-bottom:1px solid rgba(40,120,200,.07); }
.spectable .st-line .obj{ color:#cfe6ff; }
.spectable .st-line .m{ color:var(--txt-dim); }

/* ===================== 单设施详情页（三级钻取） ===================== */
.facility-overlay{
  position:absolute; inset:112px 12px 12px; z-index:60; display:none;
  flex-direction:column; border-radius:10px; overflow:hidden;
  background:rgba(6,20,40,.93); border:1px solid rgba(0,234,255,.45);
  box-shadow:0 0 40px rgba(0,30,70,.7); backdrop-filter:blur(6px);
}
.facility-overlay.show{ display:flex; }
.facility-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid rgba(0,234,255,.25);
  background:linear-gradient(180deg, rgba(0,160,255,.14), transparent);
}
.fh-name{ font-size:20px; font-weight:700; color:#fff; }
.fh-meta{ margin-left:14px; font-size:12px; color:var(--txt-dim); }
.fh-right{ display:flex; align-items:center; gap:14px; }
.fh-risk{ font-size:14px; font-weight:700; padding:4px 12px; border-radius:6px; }
.fh-back{
  display:flex; align-items:center; gap:5px; font-size:13px; color:var(--cyan); cursor:pointer;
  background:rgba(0,160,255,.14); border:1px solid rgba(0,200,255,.4); border-radius:20px; padding:6px 14px; transition:.2s;
}
.fh-back svg{ width:15px; height:15px; transform:rotate(180deg); }
.fh-back:hover{ background:rgba(0,200,255,.3); }
.facility-body{ flex:1; min-height:0; display:grid; grid-template-columns:380px 1fr; gap:12px; padding:12px 16px; }
.fac-left{ display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; padding-right:4px; }
.fac-monitor-tabs{
  flex:0 0 auto; display:flex; gap:8px; flex-shrink:0;
}
.fac-monitor-tabs button{
  flex:1; font-size:12px; color:#9fc5e6; background:rgba(0,120,200,.1);
  border:1px solid rgba(40,120,200,.25); border-radius:4px; padding:6px 4px;
  cursor:pointer; transition:.2s; white-space:nowrap;
}
.fac-monitor-tabs button:hover{ background:rgba(0,160,255,.2); color:#fff; }
.fac-monitor-tabs button.active{ color:#fff; background:rgba(0,180,255,.25); border-color:var(--cyan); box-shadow:0 0 8px rgba(0,212,255,.25); }
.fac-video{
  position:relative; height:210px; min-height:210px; border-radius:6px; overflow:hidden;
  background:repeating-linear-gradient(45deg, #0a1f3a 0 14px, #0d2647 14px 28px);
  display:flex; align-items:center; justify-content:center; color:#5b86b5; border:1px solid rgba(0,200,255,.2);
  flex-shrink:0;
}
.fac-video::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at center, rgba(0,140,255,.08), transparent 60%);
  pointer-events:none;
}
.fac-video::after{ content:"实时视频 / 数字孪生画面"; opacity:.9; font-size:13px; z-index:0; }
.fac-video img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
  transition:transform .4s, filter .4s;
}
.fac-video img[src=""]{ display:none; }
.fac-video-fallback{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#5b86b5; font-size:13px; pointer-events:none;
}
.fac-video img:not([src=""]) + .fac-video-fallback{ display:none; }
.fac-video-fallback svg{ width:36px; height:36px; fill:#3a6a99; }
.fac-video.no-signal .fac-video-fallback{ color:var(--red); }
.fac-video.no-signal .fac-video-fallback svg{ fill:var(--red); }
/* 数字孪生视角：网格扫描 */
.fac-video[data-view="twin"]::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(rgba(0,212,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.08) 1px, transparent 1px);
  background-size:26px 26px;
  animation:twin-scan 2.5s linear infinite;
  pointer-events:none;
}
@keyframes twin-scan{
  0%{ background-position:0 0, 0 0; }
  100%{ background-position:0 26px, 26px 0; }
}
.fac-video[data-view="twin"] img{ filter:saturate(1.15) contrast(1.1) brightness(1.05); }
/* 无人机视角 */
.fac-video[data-view="drone"] img{ transform:scale(1.06); filter:saturate(1.1); }
.fac-video .rec{ position:absolute; top:10px; left:12px; z-index:3; color:var(--red); font-size:12px; font-weight:700; animation:blink 1s steps(2) infinite; }
.fac-vtimer{ position:absolute; bottom:8px; right:12px; z-index:3; font-size:12px; color:#cfe6ff; font-variant-numeric:tabular-nums; }
.fac-cam{ position:absolute; top:10px; right:12px; z-index:3; font-size:11px; color:var(--cyan); }
.fac-view-label{
  position:absolute; bottom:8px; left:12px; z-index:3; font-size:11px; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(0,212,255,.4); border-radius:3px;
  padding:3px 7px; letter-spacing:.5px;
}
.fac-metalist{ flex:0 0 auto; max-height:210px; overflow-y:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; align-content:start; }
.fac-metalist .ml{ padding:6px 10px; background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); border-radius:5px; }
.fac-metalist .ml .k{ font-size:10px; color:var(--txt-dim); }
.fac-metalist .ml .v{ font-size:14px; color:#fff; font-weight:600; }
.fac-extra{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px; padding-bottom:4px; }
.fac-section{ background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); border-radius:6px; overflow:hidden; }
.fs-head{ display:flex; align-items:center; gap:6px; padding:8px 10px; font-size:12px; color:var(--cyan); font-weight:600; background:rgba(0,140,255,.1); border-bottom:1px solid rgba(40,120,200,.18); }
.fs-head svg{ width:14px; height:14px; fill:currentColor; }
.fs-body{ padding:6px 10px; display:flex; flex-direction:column; gap:2px; }
.fs-row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid rgba(40,120,200,.1); font-size:12px; }
.fs-row:last-child{ border-bottom:none; }
.fs-row .title{ color:#d8ecff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-row .meta{ color:var(--txt-dim); font-size:10px; }
.fs-row .badge{ font-size:10px; padding:2px 6px; border-radius:3px; font-weight:600; }
.fs-row .badge.lv-red{ background:rgba(255,45,45,.18); color:#ff6b6b; }
.fs-row .badge.lv-orange{ background:rgba(255,122,0,.18); color:#ff9f43; }
.fs-row .badge.lv-yellow{ background:rgba(255,215,0,.18); color:#ffe066; }
.fs-row .badge.lv-blue{ background:rgba(74,144,255,.18); color:#6aa8ff; }
.fs-row .badge.status{ background:rgba(0,230,118,.12); color:var(--green); }
.fs-row .badge.status-doing{ background:rgba(0,212,255,.18); color:var(--cyan); }
.fs-row .badge.status-pending{ background:rgba(255,122,0,.18); color:#ff9f43; }
.fs-row.alarm{ border-left:3px solid transparent; padding-left:6px; margin-left:-6px; }
.fac-right{ display:flex; flex-direction:column; min-height:0; }
.fac-metrics{ flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.fac-metrics .fm{ padding:8px 10px; background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); border-radius:5px; }
.fac-metrics .fm .k{ font-size:11px; color:var(--txt-dim); }
.fac-metrics .fm .v{ font-size:16px; color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.fac-metrics .fm .v small{ font-size:10px; color:var(--txt-dim); font-weight:400; }
.fac-chart-title{ font-size:13px; color:var(--cyan); margin-bottom:4px; }
.fac-chart{ flex:1; min-height:140px; width:100%; }

/* ===================== 技术支撑体系页 ===================== */
.tech-stack{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:8px 10px; overflow-y:auto; }
.tech-layer{
  display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center;
  padding:8px 10px; border-radius:6px; background:linear-gradient(90deg, rgba(0,140,255,.12), rgba(0,120,200,.05));
  border:1px solid rgba(40,120,200,.2);
}
.tech-layer .tl-name{ font-size:13px; font-weight:700; color:var(--cyan); }
.tech-layer .tl-name small{ display:block; font-size:10px; color:var(--txt-dim); font-weight:400; }
.tech-layer .tl-tech{ display:flex; flex-wrap:wrap; gap:6px; }
.tech-layer .tl-chip{ font-size:11px; color:#cfe6ff; background:rgba(0,120,200,.1); border:1px solid rgba(40,120,200,.25); border-radius:4px; padding:3px 8px; }
.tech-platform{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:8px 10px; }
.tp-card{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px;
  background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); }
.tp-card svg{ width:22px; height:22px; color:var(--cyan); flex:0 0 auto; }
.tp-card .tp-main{ min-width:0; }
.tp-card .tp-name{ font-size:13px; color:#eaf5ff; font-weight:600; }
.tp-card .tp-desc{ font-size:10px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tech-ops{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:8px 10px; }
.op-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.op-card{ display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:6px;
  background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); }
.op-card svg{ width:18px; height:18px; color:var(--cyan); }
.op-card .op-k{ font-size:11px; color:var(--txt-dim); }
.op-card .op-v{ font-size:15px; color:#fff; font-weight:700; }
.op-card .op-v small{ font-size:10px; color:var(--txt-dim); font-weight:400; margin-left:4px; }
.ops-note{ font-size:11px; color:var(--txt-dim); line-height:1.7; padding:6px 10px; }

/* ===================================================================
   综合态势四区布局（顶部KPI + 中部GIS + 左专项概览 + 右预警处置）
=================================================================== */
/* 模式切换：综合态势显示 KPI 带、隐藏全局底栏、列顶下移让出 KPI 高度 */
.kpi-band{ display:none; }
.mode-overview .kpi-band{ display:flex; }
.mode-overview .bottom-row{ display:none; }
.mode-overview .layout{ top:204px; }

/* ---------- 顶部核心 KPI 指标卡 ---------- */
.kpi-band{
  position:absolute; top:112px; left:0; right:0; height:92px; z-index:19;
  align-items:center; gap:10px; padding:0 16px;
}
.kpi-card{
  flex:1; height:78px; position:relative; cursor:pointer; overflow:hidden;
  background:linear-gradient(180deg, rgba(12,40,76,.82), rgba(8,24,48,.68));
  border:1px solid rgba(35,120,200,.4); border-radius:7px;
  box-shadow:0 0 16px rgba(0,40,90,.35), inset 0 0 18px rgba(0,100,200,.08);
  padding:8px 14px; transition:.2s;
  display:flex; flex-direction:column; justify-content:center;
}
.kpi-card:hover{ border-color:var(--cyan); box-shadow:0 0 18px rgba(0,212,255,.35); }
.kpi-card .kc-label{ font-size:12px; color:var(--txt-dim); letter-spacing:1px; }
.kpi-card .kc-val{ font-size:31px; font-weight:800; line-height:1.05; color:#fff; }
.kpi-card .kc-val small{ font-size:12px; color:var(--txt-dim); font-weight:400; margin-left:3px; }
.kpi-card .kc-sub{ font-size:11px; color:var(--txt-dim); margin-top:2px; }
.kpi-card .kc-pbar{ height:5px; border-radius:3px; background:rgba(255,255,255,.1); margin-top:5px; overflow:hidden; }
.kpi-card .kc-pbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--blue)); border-radius:3px; }
.kpi-card.kc-gold .kc-val{ color:#ffd76a; text-shadow:0 0 14px rgba(255,200,80,.5); }
.kpi-card .kc-badge{ position:absolute; top:8px; right:10px; font-size:11px; color:var(--red); font-weight:700; }
.kpi-card .kc-badge.on{ animation:kf-breath 1.1s infinite; }
@keyframes kf-breath{ 0%,100%{opacity:1} 50%{opacity:.2} }
.kpi-card .kc-levels{ display:flex; gap:4px; margin-top:5px; flex-wrap:nowrap; }
.kpi-card .kc-levels b{ flex:1 1 auto; min-width:0; text-align:center; font-size:10px; padding:2px 0; border-radius:3px; font-weight:700; white-space:nowrap; overflow:hidden; }

/* ---------- 左列：六大专项安全态势速览卡 ---------- */
.ov-l1{ flex:1.5; } .ov-l2{ flex:1; } .ov-l3{ flex:.85; }
.ov-spec{ display:flex; flex-direction:column; min-height:0; overflow:auto; }
.ov-spec-head, .ov-spec-row{ display:flex; align-items:center; font-size:12px; padding:0 10px; }
.ov-spec-head{ height:28px; color:var(--txt-dim); border-bottom:1px solid rgba(40,120,200,.25); font-size:11px; background:rgba(0,80,160,.08); }
.ov-spec-row{ height:46px; border-bottom:1px solid rgba(40,120,200,.1); cursor:pointer; transition:.15s; }
.ov-spec-row:nth-child(even){ background:rgba(0,120,200,.04); }
.ov-spec-row:hover{ background:rgba(0,212,255,.12); }
.ov-spec-row .rs-riskbar{ width:4px; align-self:stretch; border-radius:2px; margin-right:8px; margin-left:-10px; }
.ov-spec-row .rs-icon{ width:20px; height:20px; margin-right:7px; color:var(--cyan); }
.ov-spec-row .rs-icon svg{ width:100%; height:100%; fill:currentColor; }
.ov-spec-row .rs-name{ width:72px; color:#dff5ff; white-space:nowrap; font-weight:600; }
.ov-spec-row .rs-lv{ width:58px; display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#fff; }
.ov-spec-row .rs-lv .lv-dot{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 5px currentColor; }
.ov-spec-row .rs-warn-group{ width:72px; display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.ov-spec-row .rs-num{ font-size:15px; font-weight:800; color:#fff; }
.ov-spec-row .rs-num.up{ color:var(--red); }
.ov-spec-row .rs-chg{ font-size:10px; color:var(--txt-dim); }
.ov-spec-row .rs-chg.up{ color:var(--red); }
.ov-spec-row .rs-chg.down{ color:var(--green); }
.ov-spec-row .rs-online{ width:90px; display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1; }
.ov-spec-row .rs-barwrap{ width:56px; height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.ov-spec-row .rs-barwrap i{ display:block; height:100%; border-radius:2px; transition:width .3s; }
.ov-spec-row .rs-online small{ font-size:10px; color:var(--green); }
.ov-spec-row .rs-online small.low{ color:var(--red); }
.ov-spec-row .rs-time{ margin-left:auto; color:var(--txt-dim); font-size:11px; font-variant-numeric:tabular-nums; }

/* ---------- 左列：物联感知设备运行状态（环形+柱状） ---------- */
.ov-dev{ display:flex; gap:6px; padding:6px; flex:1; min-height:0; }
.ov-dev .dv-chart{ flex:1; min-height:0; height:100%; }

/* ---------- 左列：应急资源部署概览 ---------- */
.ov-emg{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; padding:8px; flex:1; min-height:0; }
.ov-emg .emg{ background:rgba(0,120,200,.08); border:1px solid rgba(40,120,200,.18); border-radius:6px; padding:6px 9px; display:flex; flex-direction:column; gap:2px; }
.ov-emg .emg svg{ width:17px; height:17px; color:var(--cyan); }
.ov-emg .emg .em-k{ font-size:11px; color:var(--txt-dim); }
.ov-emg .emg .em-v{ font-size:18px; font-weight:700; color:#fff; }
.ov-emg .emg .em-v small{ font-size:11px; color:var(--txt-dim); font-weight:400; margin-left:3px; }
.ov-emg .emg .em-s{ font-size:11px; color:var(--green); }
.ov-emg .emg .em-s.warn{ color:var(--orange); }

/* ---------- 右列：预警趋势图 ---------- */
.ov-r1{ flex:1.1; } .ov-r2{ flex:1.2; } .ov-r3{ flex:1.4; }
.ov-trend{ flex:1; min-height:0; padding:4px 6px; }
.ov-trend-head{ display:flex; align-items:center; gap:8px; padding:2px 8px; }
.ov-trend-head .th-tip{ font-size:11px; color:var(--txt-dim); }
.ov-trend-head .th-switch{ margin-left:auto; display:flex; gap:4px; }
.ov-trend-head .th-switch button{ font-size:11px; padding:2px 8px; border-radius:4px; background:rgba(0,120,200,.12); border:1px solid rgba(40,120,200,.3); color:var(--txt-dim); cursor:pointer; }
.ov-trend-head .th-switch button.active{ color:#fff; background:rgba(0,212,255,.22); border-color:var(--cyan); }

/* ---------- 右列：实时预警事件列表 ---------- */
.ov-warnlist{ display:flex; flex-direction:column; min-height:0; flex:1; }
.ov-warnlist .wl-head{ display:flex; align-items:center; font-size:11px; color:var(--txt-dim); padding:4px 10px; border-bottom:1px solid rgba(40,120,200,.18); }
.ov-warnlist .wl-head .c-dot{ width:8px; }
.ov-warnlist .wl-head .c-time{ width:66px; }
.ov-warnlist .wl-head .c-scene{ width:50px; }
.ov-warnlist .wl-head .c-pos{ flex:1; }
.ov-warnlist .wl-head .c-status{ width:58px; text-align:center; }
.ov-warnlist .wl-head .c-resp{ width:66px; text-align:right; }
.wl-scroll{ flex:1; min-height:0; overflow-y:auto; }
.wl-row{ display:flex; align-items:center; padding:5px 10px; border-bottom:1px solid rgba(40,120,200,.1); cursor:pointer; font-size:12px; transition:.15s; }
.wl-row:hover{ background:rgba(0,212,255,.1); }
.wl-row .c-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-right:8px; }
.wl-row .c-time{ width:66px; color:var(--txt-dim); font-variant-numeric:tabular-nums; }
.wl-row .c-scene{ width:50px; }
.wl-row .c-scene i{ font-style:normal; padding:1px 5px; border-radius:3px; font-size:10px; }
.wl-row .c-pos{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dff5ff; }
.wl-row .c-status{ width:58px; text-align:center; font-size:11px; }
.wl-row .c-resp{ width:66px; text-align:right; color:var(--txt-dim); font-variant-numeric:tabular-nums; }
.wl-row .c-resp.over{ color:var(--red); }
.st-pending{ color:var(--orange); } .st-doing{ color:var(--blue); } .st-done{ color:var(--green); }

/* ---------- 右列：预警等级分布 + 处置时效 + 响应时长 + 处置率排行 ---------- */
.ov-dist{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; padding:6px; flex:1; min-height:0; }
.ov-dist .dt{ display:flex; flex-direction:column; background:rgba(0,120,200,.06); border:1px solid rgba(40,120,200,.16); border-radius:6px; min-height:0; overflow:hidden; }
.ov-dist .dt .dt-title{ font-size:11px; color:var(--txt-dim); padding:4px 8px 0; flex:0 0 auto; }
.ov-dist .dt .chart{ flex:1; min-height:0; width:100%; }

/* ---------- 预警主动推送弹窗 ---------- */
.warn-popup{ position:absolute; top:210px; left:50%; transform:translateX(-50%); z-index:60; width:580px; display:none; }
.warn-popup.show{ display:block; animation:wp-in .3s ease; }
@keyframes wp-in{ from{opacity:0; transform:translateX(-50%) translateY(-12px);} to{opacity:1; transform:translateX(-50%) translateY(0);} }
.wp-box{ background:linear-gradient(180deg, rgba(46,14,14,.96), rgba(22,8,8,.96)); border:1px solid var(--red); border-radius:9px; box-shadow:0 0 30px rgba(255,45,45,.45); overflow:hidden; }
.wp-box.lv-orange{ border-color:var(--orange); box-shadow:0 0 30px rgba(255,122,0,.42); background:linear-gradient(180deg, rgba(46,28,8,.96), rgba(22,12,4,.96)); }
.wp-head{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.12); }
.wp-badge{ font-size:14px; font-weight:800; padding:4px 12px; border-radius:5px; color:#fff; }
.wp-badge.red{ background:var(--red); } .wp-badge.orange{ background:var(--orange); }
.wp-title{ font-size:15px; font-weight:700; color:#fff; }
.wp-close{ margin-left:auto; cursor:pointer; color:#fff; opacity:.7; font-size:18px; line-height:1; }
.wp-close:hover{ opacity:1; }
.wp-body{ padding:10px 14px; font-size:12px; line-height:1.85; color:var(--txt); }
.wp-row{ display:flex; gap:8px; }
.wp-row .k{ color:var(--txt-dim); min-width:80px; flex:0 0 auto; }
.wp-row .v{ color:#fff; }
.wp-actions{ display:flex; gap:10px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.12); }
.wp-btn{ flex:1; text-align:center; padding:7px 0; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s; }
.wp-btn.primary{ background:var(--red); color:#fff; }
.wp-btn.primary:hover{ filter:brightness(1.12); }
.wp-btn.ghost{ background:rgba(255,255,255,.12); color:#fff; }
.wp-btn.ghost:hover{ background:rgba(255,255,255,.22); }

/* ---------- 地图侧边悬浮信息窗 ---------- */
.map-info{ position:absolute; left:392px; top:216px; z-index:18; width:200px; background:rgba(8,24,48,.84); border:1px solid rgba(35,120,200,.45); border-radius:7px; padding:8px 10px; font-size:11px; color:var(--txt); box-shadow:0 0 16px rgba(0,40,90,.4); backdrop-filter:blur(4px); }
.map-info .mi-title{ font-size:12px; color:var(--cyan); font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.map-info .mi-row{ display:flex; justify-content:space-between; padding:2px 0; }
.map-info .mi-row b{ color:#fff; font-weight:600; }
.map-info .mi-row .mi-k{ color:var(--txt-dim); }

/* KPI 处置率环形进度 */
.kpi-card.kc-ringwrap{ padding-right:62px; }
.kpi-card .kc-ring{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; }
.kpi-card .kc-ring::after{ content:''; position:absolute; inset:5px; border-radius:50%; background:linear-gradient(180deg, rgba(12,40,76,.92), rgba(8,24,48,.92)); }