<!--相邻地下空间可燃气体浓度报警-->
<template>
  <div class="gas-alert-dashboard">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-icon><Warning /></el-icon>
        <span class="title">相邻地下空间可燃气体报警中心</span>
        <div class="stats-badge">
          <span class="stat-item critical"><i class="dot"></i>实时报警 {{ realtimeAlerts.length }}</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"
            size="default"
        />
        <el-button type="primary" :icon="Refresh" @click="refreshData">刷新</el-button>
        <el-button :icon="Download" @click="exportReport">导出报表</el-button>
      </div>
    </div>

    <!-- KPI指标卡片 -->
    <div class="kpi-cards">
      <div class="kpi-card critical">
        <div class="kpi-value">{{ realtimeAlerts.length }}</div>
        <div class="kpi-label">实时报警</div>
        <div class="kpi-trend">较昨日 ↑{{ todayNewCount }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ maxConcentration }}<span class="unit">%LEL</span></div>
        <div class="kpi-label">最高浓度</div>
        <div class="kpi-trend">点位: {{ maxConcentrationPoint }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ avgConcentration }}<span class="unit">%LEL</span></div>
        <div class="kpi-label">平均浓度</div>
        <div class="kpi-trend">较昨日 ↑{{ avgTrend }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ falseAlarmRate }}<span class="unit">%</span></div>
        <div class="kpi-label">误报率</div>
        <div class="kpi-trend trend-down">较昨日 ↓1.5%</div>
      </div>
    </div>

    <!-- 主内容区：左侧报警列表 + 右侧研判面板 -->
    <div class="main-layout">
      <!-- 左侧报警列表 -->
      <div class="alert-list-panel">
        <div class="panel-header">
          <span><el-icon><BellFilled /></el-icon> 实时报警列表</span>
          <el-radio-group v-model="alertFilter" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="critical">严重</el-radio-button>
            <el-radio-button label="warning">预警</el-radio-button>
          </el-radio-group>
        </div>
        <div class="alert-list">
          <div
              v-for="alert in paginatedAlerts"
              :key="alert.id"
              class="alert-item"
              :class="{ critical: alert.level === 'critical', warning: alert.level === 'warning', selected: selectedAlert?.id === alert.id }"
              @click="selectAlert(alert)"
          >
            <div class="alert-level-icon">
              <el-icon v-if="alert.level === 'critical'"><WarningFilled /></el-icon>
              <el-icon v-else><InfoFilled /></el-icon>
            </div>
            <div class="alert-content">
              <div class="alert-title">{{ alert.pointName }}</div>
              <div class="alert-location">
                <el-icon><Location /></el-icon> {{ alert.address }}
              </div>
              <div class="alert-data">
                <span class="data-item">浓度: <strong :class="{ 'critical-value': alert.concentration > 10 }">{{ alert.concentration }}%LEL</strong></span>
                <span class="data-item">阈值: {{ alert.threshold }}%LEL</span>
                <span class="data-item">级别: {{ alert.level === 'critical' ? '严重' : '预警' }}</span>
              </div>
              <div class="alert-time">{{ alert.alertTime }}</div>
            </div>
            <div class="alert-badge" v-if="alert.level === 'critical'">
              <el-tag type="danger" effect="dark">紧急</el-tag>
            </div>
          </div>
          <div v-if="filteredAlerts.length === 0" class="empty-state">
            <el-empty description="暂无实时报警" :image-size="80" />
          </div>
        </div>
        <div class="pagination-area" v-if="filteredAlerts.length > pageSize">
          <el-pagination small layout="prev, pager, next" :total="filteredAlerts.length" :page-size="pageSize" v-model:current-page="currentPage" />
        </div>
      </div>

      <!-- 右侧研判面板 -->
      <div class="analysis-panel" v-if="selectedAlert">
        <div class="panel-header">
          <span><el-icon><DataAnalysis /></el-icon> 综合研判</span>
          <el-tag :type="selectedAlert.level === 'critical' ? 'danger' : 'warning'" size="large">
            {{ selectedAlert.level === 'critical' ? '严重报警' : '预警' }}
          </el-tag>
        </div>

        <!-- 报警基本信息 -->
        <div class="alert-info">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="监测点位">{{ selectedAlert.pointName }}</el-descriptions-item>
            <el-descriptions-item label="点位编号">{{ selectedAlert.pointCode }}</el-descriptions-item>
            <el-descriptions-item label="报警位置">{{ selectedAlert.address }}</el-descriptions-item>
            <el-descriptions-item label="报警级别">
              <el-tag :type="selectedAlert.level === 'critical' ? 'danger' : 'warning'">
                {{ selectedAlert.level === 'critical' ? '严重报警' : '预警' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="实时浓度">
              <span :class="{ 'critical-value': selectedAlert.concentration > 10 }">{{ selectedAlert.concentration }} %LEL</span>
            </el-descriptions-item>
            <el-descriptions-item label="报警阈值">{{ selectedAlert.threshold }} %LEL</el-descriptions-item>
            <el-descriptions-item label="报警时间">{{ selectedAlert.alertTime }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 浓度趋势图 -->
        <div class="trend-section">
          <div class="section-title">浓度变化趋势（最近30分钟）</div>
          <div ref="chartRef" class="trend-chart"></div>
        </div>

        <!-- 辅助研判分析 -->
        <div class="analysis-section">
          <div class="section-title">辅助研判分析</div>
          <div class="analysis-cards">
            <div class="analysis-card">
              <div class="card-icon"><el-icon><Clock /></el-icon></div>
              <div class="card-content">
                <div class="card-label">历史对比</div>
                <div class="card-value">较昨日同时段 {{ selectedAlert.concentration > 5 ? '上升' : '持平' }} {{ Math.abs(selectedAlert.concentration - 3).toFixed(1) }}%LEL</div>
              </div>
            </div>
            <div class="analysis-card">
              <div class="card-icon"><el-icon><WindPower /></el-icon></div>
              <div class="card-content">
                <div class="card-label">周边环境</div>
                <div class="card-value">{{ nearbyInfo }}</div>
              </div>
            </div>
            <div class="analysis-card">
              <div class="card-icon"><el-icon><Document /></el-icon></div>
              <div class="card-content">
                <div class="card-label">近期报警</div>
                <div class="card-value">{{ recentAlertCount }} 次 (近7天)</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 研判操作 -->
        <div class="action-section">
          <div class="section-title">研判处置</div>
          <div class="action-buttons">
            <el-button type="primary" @click="confirmTrueAlarm">确认为真报警</el-button>
            <el-button type="info" @click="confirmFalseAlarm">排除误报警</el-button>
            <el-button type="warning" @click="dispatchWorkOrder">派发工单</el-button>
          </div>
          <el-input
              v-model="judgmentRemark"
              type="textarea"
              placeholder="请输入研判说明（可选）"
              rows="2"
              style="margin-top: 12px"
          />
        </div>

        <!-- 处置记录 -->
        <div class="history-section" v-if="selectedAlert.historyRecords?.length">
          <div class="section-title">处置记录</div>
          <el-timeline>
            <el-timeline-item v-for="record in selectedAlert.historyRecords" :key="record.id" :timestamp="record.time" :type="record.type">
              {{ record.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!-- 未选中状态 -->
      <div v-else class="empty-panel">
        <el-empty description="请从左侧选择报警事件进行研判" :image-size="120" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
import { Warning, Refresh, Download, BellFilled, Search, Location, WarningFilled, InfoFilled, DataAnalysis, Clock, WindPower, Document } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElMessage, ElNotification } from 'element-plus'

// 沅陵县相邻地下空间可燃气体实时报警数据
const realtimeAlerts = ref([
  { id: 1, pointCode: 'CH4-YL-001', pointName: '辰州北路综合管廊监测点', level: 'critical',
    address: '沅陵县太常片区辰州北路综合管廊B2层', concentration: 15.8, threshold: 10,
    alertTime: '2026-06-13 15:23:45', status: 'pending',
    trendData: [2.1, 2.5, 3.2, 4.0, 5.1, 6.5, 8.0, 9.8, 11.2, 12.5, 13.8, 14.5, 15.2, 15.8, 15.8, 15.5, 15.0, 14.2, 13.5, 12.8, 12.0, 11.2, 10.5, 9.8],
    historyRecords: [] },
  { id: 2, pointCode: 'CH4-YL-002', pointName: '古城中路地下管沟监测点', level: 'critical',
    address: '沅陵县太常片区古城中路电力管沟检查井', concentration: 12.3, threshold: 10,
    alertTime: '2026-06-13 14:58:12', status: 'pending',
    trendData: [1.5, 2.2, 3.0, 4.1, 5.5, 7.0, 8.5, 9.2, 10.0, 10.8, 11.5, 12.0, 12.3, 12.3, 12.0, 11.5, 11.0, 10.2, 9.5, 8.8, 8.0, 7.2, 6.5, 5.8],
    historyRecords: [] },
  { id: 3, pointCode: 'CH4-YL-003', pointName: '建设路雨水管廊监测点', level: 'warning',
    address: '沅陵县太常片区建设路雨水管廊检查井', concentration: 6.8, threshold: 10,
    alertTime: '2026-06-13 14:32:05', status: 'pending',
    trendData: [2.0, 2.5, 3.2, 4.0, 4.8, 5.5, 6.2, 6.8, 6.8, 6.5, 6.2, 5.8, 5.5, 5.2, 5.0, 4.8, 4.5, 4.2, 4.0, 3.8, 3.5, 3.2, 3.0, 2.8],
    historyRecords: [] },
  { id: 4, pointCode: 'CH4-YL-004', pointName: '天宁西路地下车库监测点', level: 'warning',
    address: '沅陵县太常片区天宁西路商业地下停车场', concentration: 7.5, threshold: 10,
    alertTime: '2026-06-13 14:15:30', status: 'pending',
    trendData: [3.0, 3.5, 4.2, 5.0, 5.8, 6.5, 7.0, 7.5, 7.5, 7.2, 6.8, 6.5, 6.2, 6.0, 5.8, 5.5, 5.2, 5.0, 4.8, 4.5, 4.2, 4.0, 3.8, 3.5],
    historyRecords: [] },
  { id: 5, pointCode: 'CH4-YL-005', pointName: '滨江东路河堤管廊监测点', level: 'critical',
    address: '沅陵县太常片区滨江东路河堤综合管廊', concentration: 11.5, threshold: 10,
    alertTime: '2026-06-13 13:50:00', status: 'pending',
    trendData: [4.0, 4.5, 5.2, 6.0, 7.0, 8.0, 9.0, 9.8, 10.5, 11.0, 11.5, 11.5, 11.2, 10.8, 10.5, 10.0, 9.5, 9.0, 8.5, 8.0, 7.5, 7.0, 6.5, 6.0],
    historyRecords: [] },
  { id: 6, pointCode: 'CH4-YL-006', pointName: '迎宾东路地下通道监测点', level: 'warning',
    address: '沅陵县太常片区迎宾东路地下人行通道', concentration: 5.2, threshold: 10,
    alertTime: '2026-06-13 13:30:00', status: 'pending',
    trendData: [1.2, 1.8, 2.5, 3.2, 4.0, 4.5, 5.0, 5.2, 5.2, 5.0, 4.8, 4.5, 4.2, 4.0, 3.8, 3.5, 3.2, 3.0, 2.8, 2.5, 2.2, 2.0, 1.8, 1.5],
    historyRecords: [] },
  { id: 7, pointCode: 'CH4-YL-007', pointName: '古城北路综合管沟监测点', level: 'warning',
    address: '沅陵县太常片区古城北路综合管沟入口', concentration: 8.2, threshold: 10,
    alertTime: '2026-06-13 12:10:00', status: 'pending',
    trendData: [3.5, 4.0, 4.8, 5.5, 6.2, 7.0, 7.5, 8.0, 8.2, 8.2, 8.0, 7.5, 7.0, 6.5, 6.0, 5.5, 5.0, 4.8, 4.5, 4.2, 4.0, 3.8, 3.5, 3.2],
    historyRecords: [] },
  { id: 8, pointCode: 'CH4-YL-008', pointName: '建设东路工业园管廊监测点', level: 'critical',
    address: '沅陵县太常片区建设东路工业园综合管廊', concentration: 14.2, threshold: 10,
    alertTime: '2026-06-13 11:55:00', status: 'pending',
    trendData: [5.0, 5.8, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.2, 13.8, 14.2, 14.2, 13.8, 13.2, 12.5, 11.8, 11.0, 10.2, 9.5, 8.8, 8.0, 7.2, 6.5],
    historyRecords: [] }
])

// 统计数据
const totalPoints = computed(() => 12)
const warningCount = computed(() => realtimeAlerts.value.filter(a => a.level === 'warning').length)
const todayNewCount = 2
const maxConcentration = computed(() => Math.max(...realtimeAlerts.value.map(a => a.concentration)).toFixed(1))
const maxConcentrationPoint = computed(() => realtimeAlerts.value.find(a => a.concentration === parseFloat(maxConcentration.value))?.pointName || '—')
const avgConcentration = computed(() => (realtimeAlerts.value.reduce((sum, a) => sum + a.concentration, 0) / realtimeAlerts.value.length).toFixed(1))
const avgTrend = 0.6
const falseAlarmRate = computed(() => 3.8)

// 筛选
const searchKeyword = ref('')
const alertFilter = ref('all')
const currentPage = ref(1)
const pageSize = 3
const selectedAlert = ref(realtimeAlerts.value[0])
const judgmentRemark = ref('')

const filteredAlerts = computed(() => {
  let list = realtimeAlerts.value
  if (alertFilter.value !== 'all') {
    list = list.filter(a => a.level === alertFilter.value)
  }
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase()
    list = list.filter(a => a.pointName.toLowerCase().includes(kw) || a.address.toLowerCase().includes(kw))
  }
  return list
})

const paginatedAlerts = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return filteredAlerts.value.slice(start, start + pageSize)
})

// 周边环境信息
const nearbyInfo = computed(() => {
  if (!selectedAlert.value) return ''
  const info = {
    '辰州北路综合管廊监测点': '周边为太常片区主干管廊，地下燃气管线交叉密集',
    '古城中路地下管沟监测点': '邻近太常安置区，地下电力/通信管线并行铺设',
    '建设路雨水管廊监测点': '附近县政府及商业区，排水管网收集面积大',
    '天宁西路地下车库监测点': '商业地下停车场，通风井口邻近调压站出口',
    '滨江东路河堤管廊监测点': '沅江沿岸河堤管廊，地下水位较高易致气体积聚',
    '迎宾东路地下通道监测点': '城郊公交站地下人行通道，通风条件良好',
    '古城北路综合管沟监测点': '古城北路住宅区管网交汇处，老旧管网翻新中',
    '建设东路工业园管廊监测点': '工业园区蒸汽/燃气管网交错，存在热力管道干扰'
  }
  return info[selectedAlert.value.pointName] || '周边无异常施工活动'
})

const recentAlertCount = computed(() => {
  if (!selectedAlert.value) return 0
  const counts = { 'CH4-YL-001': 5, 'CH4-YL-002': 3, 'CH4-YL-003': 2, 'CH4-YL-004': 4, 'CH4-YL-005': 6, 'CH4-YL-006': 1, 'CH4-YL-007': 3, 'CH4-YL-008': 4 }
  return counts[selectedAlert.value.pointCode] || 2
})

// 趋势图
const chartRef = ref(null)
let chartInstance = null

function renderChart() {
  if (!chartRef.value || !selectedAlert.value?.trendData) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }
  const times = Array.from({ length: 24 }, (_, i) => {
    const minutes = i * 5
    return `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}`
  })
  const threshold = selectedAlert.value.threshold
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: times, axisLabel: { rotate: 45, interval: 4 } },
    yAxis: { type: 'value', name: '可燃气体浓度 (%LEL)' },
    series: [
      { name: '气体浓度', type: 'line', data: selectedAlert.value.trendData, smooth: true, lineStyle: { color: '#f56c6c', width: 2 }, areaStyle: { opacity: 0.1 } },
      { name: '报警阈值', type: 'line', data: Array(24).fill(threshold), lineStyle: { color: '#e6a23c', width: 2, type: 'dashed' }, symbol: 'none' }
    ]
  })
}

watch(selectedAlert, () => { nextTick(() => renderChart()) }, { immediate: false })

// 方法
const selectAlert = (alert) => {
  selectedAlert.value = alert
}

const confirmTrueAlarm = () => {
  if (selectedAlert.value.status === 'resolved') return
  const index = realtimeAlerts.value.findIndex(a => a.id === selectedAlert.value.id)
  if (index !== -1) {
    const resolvedAlert = { ...selectedAlert.value, status: 'resolved' }
    realtimeAlerts.value.splice(index, 1)
    resolvedAlert.historyRecords = resolvedAlert.historyRecords || []
    resolvedAlert.historyRecords.unshift({
      id: Date.now(),
      time: new Date().toLocaleString(),
      type: 'danger',
      content: `综合研判：确认为真报警，处置说明：${judgmentRemark.value || '已安排人员现场排查'}`
    })
    ElNotification({
      title: '报警确认',
      message: `已确认真报警，工单已派发至${selectedAlert.value.pointName}所属维护单位`,
      type: 'warning'
    })
    ElMessage.success('已确认真报警，处置流程已启动')
  }
  judgmentRemark.value = ''
  if (realtimeAlerts.value.length > 0) {
    selectedAlert.value = realtimeAlerts.value[0]
  } else {
    selectedAlert.value = null
  }
}

const confirmFalseAlarm = () => {
  if (selectedAlert.value.status === 'resolved') return
  const index = realtimeAlerts.value.findIndex(a => a.id === selectedAlert.value.id)
  if (index !== -1) {
    realtimeAlerts.value.splice(index, 1)
    ElNotification({
      title: '误报警排除',
      message: `已标记为误报警，排除说明：${judgmentRemark.value || '经核实为传感器干扰导致'}`,
      type: 'info'
    })
    ElMessage.info('已排除误报警')
  }
  judgmentRemark.value = ''
  if (realtimeAlerts.value.length > 0) {
    selectedAlert.value = realtimeAlerts.value[0]
  } else {
    selectedAlert.value = null
  }
}

const dispatchWorkOrder = () => {
  ElMessage.success(`已向${selectedAlert.value.pointName}所属单位派发处置工单`)
}

const refreshData = () => {
  ElMessage.success('数据已刷新')
}

const exportReport = () => {
  ElMessage.success('导出报警报表（演示）')
}

onMounted(() => {
  nextTick(() => renderChart())
})

onBeforeUnmount(() => {
  try { chartInstance?.dispose() } catch {}
  chartInstance = null
})
</script>

<style scoped>
.gas-alert-dashboard {
  background: #f0f2f6;
  min-height: 100vh;
  padding: 20px;
}
.page-header {
  background: white;
  border-radius: 16px;
  padding: 16px 24px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.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; }

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.kpi-card.critical .kpi-value { color: #f56c6c; }
.kpi-value { font-size: 32px; font-weight: bold; }
.kpi-value .unit { font-size: 14px; font-weight: normal; }
.kpi-label { font-size: 13px; color: #909399; margin-top: 4px; }
.kpi-trend { font-size: 11px; color: #67c23a; margin-top: 4px; }
.kpi-trend.trend-down { color: #f56c6c; }

.main-layout {
  display: flex;
  gap: 20px;
}
.alert-list-panel {
  width: 420px;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.alert-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.alert-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.alert-item.critical { background: #fff8f8; border: 1px solid #ffd4d4; }
.alert-item.warning { background: #fffef5; border: 1px solid #ffe4b5; }
.alert-item.selected { background: #ecf5ff; border-color: #409eff; }
.alert-item:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.alert-level-icon { font-size: 24px; }
.alert-item.critical .alert-level-icon { color: #f56c6c; }
.alert-item.warning .alert-level-icon { color: #e6a23c; }
.alert-content { flex: 1; }
.alert-title { font-weight: 600; margin-bottom: 6px; }
.alert-location { font-size: 12px; color: #6c757d; display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.alert-data { display: flex; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.alert-data .data-item { background: #f5f5f5; padding: 2px 8px; border-radius: 12px; }
.critical-value { color: #f56c6c; font-weight: bold; }
.alert-time { font-size: 11px; color: #aaa; }
.alert-badge { display: flex; align-items: center; }
.empty-state { padding: 40px 0; text-align: center; }
.pagination-area { padding: 12px; text-align: center; border-top: 1px solid #eee; }

.analysis-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
}
.empty-panel {
  flex: 1;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-info { margin-bottom: 20px; }
.section-title { font-weight: 600; margin: 16px 0 12px 0; font-size: 14px; }
.trend-chart { height: 200px; }

.analysis-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.analysis-card {
  background: #f8f9fc;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-icon .el-icon { font-size: 24px; color: #409eff; }
.card-content { flex: 1; }
.card-label { font-size: 12px; color: #909399; }
.card-value { font-size: 13px; font-weight: 500; margin-top: 4px; }

.action-buttons { display: flex; gap: 12px; margin-top: 8px; }
.history-section { margin-top: 20px; }
</style>