<!--燃气监测报警一张图-->
<template>
  <div class="gas-alert-gis">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-icon><MapLocation /></el-icon>
        <span class="title">燃气安全监测报警图</span>
        <div class="stats-badge">
          <span class="stat-item critical"><i class="dot"></i>严重报警 {{ criticalCount }}</span>
          <span class="stat-item warning"><i class="dot"></i>预警 {{ warningCount }}</span>
          <span class="stat-item"><i class="dot"></i>监测点位 {{ totalPoints }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-input v-model="searchKeyword" placeholder="搜索设施/地址" clearable :prefix-icon="Search" style="width:200px" @input="onSearch" />
        <el-button type="primary" :icon="Refresh" @click="refreshData">刷新</el-button>
        <el-button :icon="FullScreen" @click="fitBounds">全图</el-button>
      </div>
    </div>

    <!-- 主内容区：左侧图层控制 + 右侧GIS地图 -->
    <div class="main-layout">
      <!-- 左侧图层控制面板 -->
      <div class="layer-panel">
        <div class="layer-header">报警态势图层</div>
        <div class="layer-tree">
          <el-checkbox-group v-model="visibleLayers" @change="onLayerChange">
            <div class="layer-group">
              <div class="group-title">燃气管网</div>
              <el-checkbox value="highPressure">高压管线</el-checkbox>
              <el-checkbox value="mediumPressure">中压管线</el-checkbox>
              <el-checkbox value="lowPressure">低压管线</el-checkbox>
            </div>
            <div class="layer-group">
              <div class="group-title">地下空间气体报警</div>
              <el-checkbox value="gasCritical">严重报警(&gt;10%LEL)</el-checkbox>
              <el-checkbox value="gasWarning">预警(5-10%LEL)</el-checkbox>
              <el-checkbox value="gasNormal">正常(&lt;5%LEL)</el-checkbox>
            </div>
            <div class="layer-group">
              <div class="group-title">管线压力/流量报警</div>
              <el-checkbox value="pressureAlert">压力报警</el-checkbox>
              <el-checkbox value="flowAlert">流量报警</el-checkbox>
            </div>
            <div class="layer-group">
              <div class="group-title">场站燃气报警</div>
              <el-checkbox value="stationCritical">场站严重报警</el-checkbox>
              <el-checkbox value="stationWarning">场站预警</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>

        <div class="legend-panel">
          <div class="legend-title">报警图例</div>
          <div><span class="legend-dot gas-critical"></span> 气体严重报警</div>
          <div><span class="legend-dot gas-warning"></span> 气体预警</div>
          <div><span class="legend-dot pressure"></span> 压力报警</div>
          <div><span class="legend-dot flow"></span> 流量报警</div>
          <div><span class="legend-dot station-critical"></span> 场站严重报警</div>
          <div><span class="legend-dot station-warning"></span> 场站预警</div>
          <div><span class="legend-line high"></span> 高压管线</div>
          <div><span class="legend-line medium"></span> 中压管线</div>
        </div>

        <!-- 实时统计 -->
        <div class="stats-panel">
          <div class="stats-title">实时报警统计</div>
          <div class="stats-row"><span>地下空间气体报警:</span><span class="value critical">{{ gasAlertCount }}</span></div>
          <div class="stats-row"><span>管线压力报警:</span><span class="value warning">{{ pressureAlertCount }}</span></div>
          <div class="stats-row"><span>管线流量报警:</span><span class="value warning">{{ flowAlertCount }}</span></div>
          <div class="stats-row"><span>场站燃气报警:</span><span class="value critical">{{ stationAlertCount }}</span></div>
        </div>
      </div>

      <!-- 右侧GIS地图 -->
      <div class="gis-container">
        <div class="map-toolbar">
          <el-button-group>
            <el-button size="small" :icon="ZoomIn" @click="zoomIn">放大</el-button>
            <el-button size="small" :icon="ZoomOut" @click="zoomOut">缩小</el-button>
            <el-button size="small" :icon="Location" @click="fitBounds">重置</el-button>
          </el-button-group>
          <div class="coordinate-info">坐标: {{ currentLng.toFixed(4) }}, {{ currentLat.toFixed(4) }}</div>
        </div>
        <div class="map-wrapper">
          <div id="gasAlertBaiduMap" class="map-div"></div>
          <div v-if="mapError" class="map-error">{{ mapError }}</div>
        </div>

        <!-- 详情抽屉 -->
        <el-drawer v-model="detailDrawerVisible" :title="`报警详情 - ${currentFeature?.name}`" size="450px" direction="rtl">
          <div v-if="currentFeature" class="feature-detail">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="设施名称">{{ currentFeature.name }}</el-descriptions-item>
              <el-descriptions-item label="设施编号">{{ currentFeature.code || '—' }}</el-descriptions-item>
              <el-descriptions-item label="设施类型">{{ currentFeature.typeName }}</el-descriptions-item>
              <el-descriptions-item label="详细地址">{{ currentFeature.address }}</el-descriptions-item>
              <el-descriptions-item label="报警级别">
                <el-tag :type="currentFeature.level === 'critical' ? 'danger' : currentFeature.level === 'warning' ? 'warning' : 'success'">
                  {{ currentFeature.level === 'critical' ? '严重报警' : currentFeature.level === 'warning' ? '预警' : '正常' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="currentFeature.concentration !== undefined" label="甲烷浓度">
                <span :class="{ 'critical-value': currentFeature.concentration > 10 }">{{ currentFeature.concentration }} %LEL</span>
              </el-descriptions-item>
              <el-descriptions-item v-if="currentFeature.pressure !== undefined" label="管线压力">{{ currentFeature.pressure }} kPa</el-descriptions-item>
              <el-descriptions-item v-if="currentFeature.flow !== undefined" label="瞬时流量">{{ currentFeature.flow }} Nm³/h</el-descriptions-item>
              <el-descriptions-item v-if="currentFeature.threshold !== undefined" label="报警阈值">{{ currentFeature.threshold }} {{ currentFeature.thresholdUnit }}</el-descriptions-item>
              <el-descriptions-item label="报警时间">{{ currentFeature.alertTime }}</el-descriptions-item>
            </el-descriptions>
            <div class="action-section" v-if="currentFeature.level !== 'normal'">
              <el-button type="primary" size="small" @click="handleAlert">处理报警</el-button>
              <el-button type="warning" size="small" @click="dispatchOrder">派发工单</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue'
import { MapLocation, Search, Refresh, FullScreen, ZoomIn, ZoomOut, Location } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { convertPipeline, convertPoints, convertCoord } from '@/utils/coordTransform'

// ==================== 图层状态 ====================
const visibleLayers = ref(['highPressure', 'mediumPressure', 'gasCritical', 'gasWarning', 'pressureAlert', 'stationCritical'])

const overlayStore = {
  highPressure: [], mediumPressure: [], lowPressure: [],
  gasCritical: [], gasWarning: [], gasNormal: [],
  pressureAlert: [], flowAlert: [],
  stationCritical: [], stationWarning: []
}

// ==================== 百度地图相关 ====================
let mapInstance = null
let activeInfoWindow = null
const mapError = ref('')
const currentLng = ref(110.395)
const currentLat = ref(28.470)
const MAP_CENTER = { lng: 110.386, lat: 28.445 }
const MAP_DEFAULT_ZOOM = 14

function waitForBMapGL() {
  return new Promise((resolve, reject) => {
    if (window.BMapGL) { resolve(window.BMapGL); return }
    let attempts = 0
    const timer = setInterval(() => {
      attempts++
      if (window.BMapGL) { clearInterval(timer); resolve(window.BMapGL) }
      if (attempts > 150) { clearInterval(timer); reject(new Error('百度地图API加载超时')) }
    }, 200)
  })
}

function initMap() {
  const BMapGL = window.BMapGL
  const el = document.getElementById('gasAlertBaiduMap')
  if (!el) return
  mapInstance = new BMapGL.Map(el, { enableMapClick: true })
  const [mcLng, mcLat] = convertCoord(MAP_CENTER.lng, MAP_CENTER.lat)
  const point = new BMapGL.Point(mcLng, mcLat)
  mapInstance.centerAndZoom(point, MAP_DEFAULT_ZOOM)
  mapInstance.enableScrollWheelZoom(true)
  mapInstance.setMapStyleV2({ styleId: 'a0f4e6e6f9e7a6c5d8e7f7e7f7e7f7e5' })
  mapInstance.addEventListener('mousemove', (e) => {
    currentLng.value = e.latlng.lng
    currentLat.value = e.latlng.lat
  })
  renderAllOverlays()
}

// ==================== 沅陵县静态数据 ====================

// --- 管线数据 ---
const pipelines = [
  { id: 'P1', name: '燃气1', type: 'highPressure', color: '#f56c6c', width: 5,
    path: [[110.404947, 28.433419], [110.404836, 28.433429], [110.403275, 28.433571], [110.401084, 28.433876], [110.399601, 28.433876], [110.398112, 28.433979], [110.396717, 28.434314], [110.394299, 28.434538], [110.394352, 28.434887], [110.391969, 28.434985], [110.384374, 28.435695], [110.381418, 28.43559], [110.377993, 28.436193], [110.376062, 28.436385], [110.374231, 28.43655], [110.372584, 28.437107], [110.371292, 28.4377], [110.370581, 28.438198], [110.369831, 28.438821]] },
  { id: 'P2', name: '燃气2', type: 'mediumPressure', color: '#e6a23c', width: 4,
    path: [[110.361433, 28.454979], [110.362363, 28.453169], [110.362851, 28.452213], [110.364377, 28.452443], [110.365138, 28.45246], [110.366462, 28.452157], [110.369549, 28.451441], [110.37219, 28.450897], [110.372753, 28.450901], [110.373875, 28.451194], [110.373913, 28.451107], [110.374597, 28.451476]] },
]

// --- 地下空间气体报警点 ---
const gasPoints = ref([
  { id: 'G1', name: '酉水大桥气体监测', type: 'gasMonitor', category: 'gasCritical', level: 'critical', concentration: 15.8, threshold: 10, thresholdUnit: '%LEL', lng: 110.369549, lat: 28.451441, address: '酉水大桥北段地下空间', alertTime: '2026-06-13 15:23:45', code: 'CH4-YL-001', typeName: '地下空间气体监测点' },
  { id: 'G2', name: '酉水大桥2气体监测', type: 'gasMonitor', category: 'gasCritical', level: 'critical', concentration: 12.3, threshold: 10, thresholdUnit: '%LEL', lng: 110.373913, lat: 28.451107, address: '酉水大桥管沟监测点', alertTime: '2026-06-13 14:58:12', code: 'CH4-YL-002', typeName: '地下空间气体监测点' },
])

const pressurePoints = ref([
  { id: 'PR1', name: '龙兴路压力报警', type: 'pressureMonitor', category: 'pressureAlert', level: 'critical', pressure: 432, threshold: 420, thresholdUnit: 'kPa', lng: 110.399601, lat: 28.433876, address: '学府路与太常路交叉口', alertTime: '2026-06-13 15:31:45', code: 'PR-YL-002', typeName: '压力监测点' },
])

const flowPoints = ref([
  { id: 'FL1', name: '城东流量报警', type: 'flowMonitor', category: 'flowAlert', level: 'critical', flow: 2620, threshold: 2500, thresholdUnit: 'Nm³/h', lng: 110.407, lat: 28.454, address: '城东大道计量站', alertTime: '2026-06-13 15:31:45', code: 'FL-YL-002', typeName: '流量监测点' },
  { id: 'FL2', name: '滨江路流量报警', type: 'flowMonitor', category: 'flowAlert', level: 'warning', flow: 820, threshold: 800, thresholdUnit: 'Nm³/h', lng: 110.375, lat: 28.432, address: '滨江路流量计井', alertTime: '2026-06-13 15:29:58', code: 'FL-YL-003', typeName: '流量监测点' },
])

const stationPoints = ref([
  { id: 'S1', name: '龙兴路北场站', type: 'stationMonitor', category: 'stationCritical', level: 'critical', concentration: 48, threshold: 20, thresholdUnit: 'ppm', lng: 110.401084, lat: 28.433876, address: '古城路与建设路交叉口', alertTime: '2026-06-13 15:23:45', code: 'YL-LNG-01', typeName: '燃气场站' },
  { id: 'S2', name: '太常路场站', type: 'stationMonitor', category: 'stationWarning', level: 'warning', concentration: 35, threshold: 20, thresholdUnit: 'ppm', lng: 110.370, lat: 28.456, address: '太常路南段', alertTime: '2026-06-13 14:32:05', code: 'YL-GY-01', typeName: '燃气场站' },
])

// ==================== 统计数据 ====================
const allAlertFeatures = computed(() => [...gasPoints.value, ...pressurePoints.value, ...flowPoints.value, ...stationPoints.value])
const totalPoints = computed(() => allAlertFeatures.value.length)
const criticalCount = computed(() => allAlertFeatures.value.filter(f => f.level === 'critical').length)
const warningCount = computed(() => allAlertFeatures.value.filter(f => f.level === 'warning').length)
const gasAlertCount = computed(() => gasPoints.value.filter(f => f.level !== 'normal').length)
const pressureAlertCount = computed(() => pressurePoints.value.length)
const flowAlertCount = computed(() => flowPoints.value.length)
const stationAlertCount = computed(() => stationPoints.value.length)

// ==================== 地图覆盖物渲染 ====================
function clearOverlays() {
  Object.values(overlayStore).forEach(arr => {
    arr.forEach(o => { try { mapInstance.removeOverlay(o) } catch {} })
    arr.length = 0
  })
}

function addToOverlayStore(layer, overlay) {
  if (overlayStore[layer]) overlayStore[layer].push(overlay)
}

function renderPipelines() {
  const BMapGL = window.BMapGL
  pipelines.forEach(p => {
    const points = p.path.map(c => {
      const [bdLng, bdLat] = convertCoord(c[0], c[1])
      return new BMapGL.Point(bdLng, bdLat)
    })
    const polyline = new BMapGL.Polyline(points, {
      strokeColor: p.color, strokeWeight: p.width, strokeOpacity: 0.75
    })
    mapInstance.addOverlay(polyline)
    addToOverlayStore(p.type, polyline)
    polyline.addEventListener('click', () => {
      currentFeature.value = { name: p.name, code: p.id, typeName: '燃气管线', address: '沅陵县太常片区', level: 'normal' }
      detailDrawerVisible.value = true
    })
  })
}

function renderPointMarkers(features, layer, shape, size, bgColor) {
  const BMapGL = window.BMapGL
  features.forEach(f => {
    if (f.category !== layer) return
    const [bdLng, bdLat] = convertCoord(f.lng, f.lat)
    const pt = new BMapGL.Point(bdLng, bdLat)
    const label = new BMapGL.Label(f.name, {
      position: pt,
      offset: new BMapGL.Size(0, -18)
    })
    label.setStyle({
      color: '#fff', fontSize: '10px', padding: '3px 8px',
      backgroundColor: bgColor || (f.level === 'critical' ? '#f56c6c' : f.level === 'warning' ? '#e6a23c' : '#67c23a'),
      borderRadius: '3px', border: 'none', whiteSpace: 'nowrap'
    })
    mapInstance.addOverlay(label)
    addToOverlayStore(layer, label)

    // 点标记（圆点）
    const marker = new BMapGL.Marker(pt)
    mapInstance.addOverlay(marker)
    addToOverlayStore(layer, marker)

    marker.addEventListener('click', () => {
      currentFeature.value = f
      detailDrawerVisible.value = true
    })
  })
}

function renderAllMarkers() {
  const BMapGL = window.BMapGL

  // 地下空间气体
  gasPoints.value.forEach(f => {
    renderPointMarkers([f], f.category, 'circle', 10,
      f.level === 'critical' ? '#f56c6c' : f.level === 'warning' ? '#e6a23c' : '#67c23a')
  })

  // 管线压力报警 - 菱形
  pressurePoints.value.forEach(f => {
    const [bdLng, bdLat] = convertCoord(f.lng, f.lat)
    const pt = new BMapGL.Point(bdLng, bdLat)
    const label = new BMapGL.Label(f.name, { position: pt, offset: new BMapGL.Size(0, -18) })
    label.setStyle({
      color: '#fff', fontSize: '10px', padding: '3px 8px',
      backgroundColor: f.level === 'critical' ? '#f56c6c' : '#e6a23c',
      borderRadius: '2px', border: 'none', whiteSpace: 'nowrap'
    })
    mapInstance.addOverlay(label)
    addToOverlayStore(f.category, label)

    const marker = new BMapGL.Marker(pt)
    mapInstance.addOverlay(marker)
    addToOverlayStore(f.category, marker)
    marker.addEventListener('click', () => {
      currentFeature.value = f
      detailDrawerVisible.value = true
    })
  })

  // 管线流量报警 - 三角
  flowPoints.value.forEach(f => {
    const [bdLng, bdLat] = convertCoord(f.lng, f.lat)
    const pt = new BMapGL.Point(bdLng, bdLat)
    const label = new BMapGL.Label(f.name, { position: pt, offset: new BMapGL.Size(0, -18) })
    label.setStyle({
      color: '#fff', fontSize: '10px', padding: '3px 8px',
      backgroundColor: f.level === 'critical' ? '#f56c6c' : '#e6a23c',
      borderRadius: '2px', border: 'none', whiteSpace: 'nowrap'
    })
    mapInstance.addOverlay(label)
    addToOverlayStore(f.category, label)

    const marker = new BMapGL.Marker(pt)
    mapInstance.addOverlay(marker)
    addToOverlayStore(f.category, marker)
    marker.addEventListener('click', () => {
      currentFeature.value = f
      detailDrawerVisible.value = true
    })
  })

  // 场站燃气报警
  stationPoints.value.forEach(f => {
    const [bdLng, bdLat] = convertCoord(f.lng, f.lat)
    const pt = new BMapGL.Point(bdLng, bdLat)
    const label = new BMapGL.Label(f.name, { position: pt, offset: new BMapGL.Size(0, -18) })
    label.setStyle({
      color: '#fff', fontSize: '10px', padding: '3px 8px',
      backgroundColor: f.level === 'critical' ? '#f56c6c' : '#e6a23c',
      borderRadius: '10px', border: '2px solid #fff', whiteSpace: 'nowrap'
    })
    mapInstance.addOverlay(label)
    addToOverlayStore(f.category, label)

    const marker = new BMapGL.Marker(pt)
    mapInstance.addOverlay(marker)
    addToOverlayStore(f.category, marker)
    marker.addEventListener('click', () => {
      currentFeature.value = f
      detailDrawerVisible.value = true
    })
  })
}

function renderAllOverlays() {
  clearOverlays()
  renderPipelines()
  renderAllMarkers()
  onLayerChange()
}

// ==================== 图层显隐 ====================
function onLayerChange() {
  const set = new Set(visibleLayers.value)
  Object.entries(overlayStore).forEach(([layer, overlays]) => {
    overlays.forEach(o => {
      try {
        if (set.has(layer)) o.show()
        else o.hide()
      } catch {}
    })
  })
}

// ==================== 地图操作 ====================
function zoomIn() { mapInstance?.zoomIn() }
function zoomOut() { mapInstance?.zoomOut() }
function fitBounds() {
  if (!mapInstance) return
  const BMapGL = window.BMapGL
  const [fLng, fLat] = convertCoord(MAP_CENTER.lng, MAP_CENTER.lat)
  mapInstance.centerAndZoom(new BMapGL.Point(fLng, fLat), MAP_DEFAULT_ZOOM)
}
function refreshData() { ElMessage.success('数据已刷新') }

// ==================== 搜索 ====================
function onSearch() {
  if (!mapInstance || !searchKeyword.value) return
  const kw = searchKeyword.value.toLowerCase()
  const hit = allAlertFeatures.value.find(f =>
    f.name.toLowerCase().includes(kw) || f.address.toLowerCase().includes(kw))
  if (hit) {
    const BMapGL = window.BMapGL
    const [sLng, sLat] = convertCoord(hit.lng, hit.lat)
    mapInstance.centerAndZoom(new BMapGL.Point(sLng, sLat), 16)
    currentFeature.value = hit
  }
}

// ==================== 详情抽屉 ====================
const currentFeature = ref(null)
const detailDrawerVisible = ref(false)

const handleAlert = () => { ElMessage.info('开始处理报警') }
const dispatchOrder = () => { ElMessage.success('已派发处置工单') }

// ==================== 生命周期 ====================
onMounted(async () => {
  try {
    await waitForBMapGL()
    initMap()
  } catch (e) {
    mapError.value = '百度地图加载失败，请刷新页面重试'
  }
})

onBeforeUnmount(() => {
  try {
    clearOverlays()
    if (activeInfoWindow) { activeInfoWindow.close(); activeInfoWindow = null }
    mapInstance?.destroy()
    mapInstance = null
  } catch {}
})
</script>

<style scoped>
.gas-alert-gis {
  background: #f0f2f6;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-header {
  background: white;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-left .title { font-size: 1.3rem; font-weight: 600; }
.stats-badge { display: flex; gap: 20px; }
.stat-item { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat-item.critical { color: #f56c6c; }
.stat-item.warning { color: #e6a23c; }
.stat-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; }
.stat-item.critical .dot { background: #f56c6c; }
.stat-item.warning .dot { background: #e6a23c; }
.header-right { display: flex; gap: 12px; }

.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 12px;
  gap: 12px;
}
.layer-panel {
  width: 260px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex-shrink: 0;
}
.layer-header { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.layer-group { margin-bottom: 12px; }
.group-title { font-weight: 500; margin-bottom: 8px; font-size: 13px; color: #606266; }
.layer-group .el-checkbox { display: block; margin-left: 8px; margin-bottom: 6px; }
.legend-panel { border-top: 1px solid #e9ecef; padding-top: 12px; }
.legend-title { font-weight: 500; margin-bottom: 8px; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
.legend-dot.gas-critical { background: #f56c6c; }
.legend-dot.gas-warning { background: #e6a23c; }
.legend-dot.pressure { background: #409eff; border-radius: 2px; }
.legend-dot.flow { background: #67c23a; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.legend-dot.station-critical { background: #f56c6c; border-radius: 10px; }
.legend-dot.station-warning { background: #e6a23c; border-radius: 10px; }
.legend-line { display: inline-block; width: 30px; height: 3px; margin-right: 8px; }
.legend-line.high { background: #f56c6c; }
.legend-line.medium { background: #e6a23c; }
.stats-panel { background: #f5f7fa; border-radius: 8px; padding: 12px; }
.stats-title { font-weight: 600; margin-bottom: 8px; }
.stats-row { display: flex; justify-content: space-between; font-size: 13px; margin: 6px 0; }
.stats-row .value.critical { color: #f56c6c; font-weight: bold; }
.stats-row .value.warning { color: #e6a23c; font-weight: bold; }

.gis-container {
  flex: 1;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.coordinate-info { font-size: 12px; color: #909399; }
.map-wrapper { flex: 1; position: relative; overflow: hidden; }
.map-div { width: 100%; height: 100%; }
.map-error { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #f56c6c; font-size: 16px; }
.feature-detail { padding: 8px; }
.critical-value { color: #f56c6c; font-weight: bold; }
.action-section { margin-top: 16px; display: flex; gap: 12px; justify-content: flex-end; }
</style>
