<template>
  <div class="player-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <div v-else class="detail-content">
      <!-- 顶部导航栏 -->
      <div class="detail-header">
        <div class="header-left">
          <el-button type="primary" :icon="ArrowLeft" @click="goBack">返回</el-button>
          <span class="page-title">打手详情</span>
        </div>
        <div class="header-right">
          <el-button
            v-if="!isEditMode"
            type="warning"
            :icon="Edit"
            @click="toggleEditMode"
            :disabled="!playerInfo.yonghuid"
          >编辑</el-button>
          <template v-else>
            <el-button type="success" :icon="Check" @click="saveChanges" :loading="saving">保存</el-button>
            <el-button :icon="Close" @click="cancelEdit">取消</el-button>
          </template>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <el-row :gutter="24">
        <!-- 左侧：基础信息卡片 + 统计卡片 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <!-- 基础信息卡片 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>👤 基础信息</span>
              </div>
            </template>
            <div class="base-info">
              <div class="avatar-wrapper">
                <el-avatar :size="100" :src="getFullImageUrl(playerInfo.avatar)" fit="cover">
                  <el-icon><Avatar /></el-icon>
                </el-avatar>
                <div class="status-badges">
                  <el-tag
                    :type="playerInfo.zaixianzhuangtai === 1 ? 'success' : 'info'"
                    size="small"
                    effect="dark"
                  >
                    {{ playerInfo.zaixianzhuangtai === 1 ? '在线' : '离线' }}
                  </el-tag>
                  <el-tag
                    :type="playerInfo.zhanghaozhuangtai === 1 ? 'success' : 'danger'"
                    size="small"
                    effect="dark"
                  >
                    {{ playerInfo.zhanghaozhuangtai === 1 ? '正常' : '封禁' }}
                  </el-tag>
                  <el-tag
                    :type="playerInfo.zhuangtai === 1 ? 'success' : 'warning'"
                    size="small"
                    effect="dark"
                  >
                    {{ playerInfo.zhuangtai === 1 ? '空闲' : '接单中' }}
                  </el-tag>
                </div>
              </div>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="UID">
                  <span class="copyable" @click="copyText(playerInfo.yonghuid)">
                    {{ playerInfo.yonghuid || '--' }} <el-icon><CopyDocument /></el-icon>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="昵称">{{ playerInfo.nicheng || '--' }}</el-descriptions-item>
                <el-descriptions-item label="称号">
                  <div class="chenghao-wrapper">
                    <span>{{ playerInfo.chenghao || '无' }}</span>
                    <!-- 金牌打手按钮：非编辑模式下显示 -->
                    <el-button
                      v-if="!isEditMode"
                      size="small"
                      :type="isGoldTitle ? 'danger' : 'primary'"
                      @click="handleChenghaoChange"
                      :disabled="!hasChenghaoPermission"
                    >
                      {{ isGoldTitle ? '降级为普通打手' : '升级为金牌选手' }}
                    </el-button>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="电话">{{ playerInfo.dianhua || '--' }}</el-descriptions-item>
                <el-descriptions-item label="微信号">{{ playerInfo.wechat || '--' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ playerInfo.phone || '--' }}</el-descriptions-item>
                <el-descriptions-item label="注册时间">{{ formatTime(playerInfo.create_time) }}</el-descriptions-item>
                <el-descriptions-item label="IP地址">
                  <span class="copyable" @click="copyText(playerInfo.ip)">
                    {{ playerInfo.ip || '--' }} <el-icon><CopyDocument /></el-icon>
                  </span>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>

          <!-- 统计卡片（保持不变） -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>📊 数据统计</span>
              </div>
            </template>
            <el-row :gutter="16">
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">接单总量</div>
                  <div class="stat-value">{{ playerInfo.jiedanzongliang || 0 }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">成交总量</div>
                  <div class="stat-value success">{{ playerInfo.chengjiaozongliang || 0 }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">退款总量</div>
                  <div class="stat-value danger">{{ playerInfo.tuikuanliang || 0 }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">今日接单</div>
                  <div class="stat-value">{{ playerInfo.jinrijiedan || 0 }}</div>
                </div>
              </el-col>
            </el-row>
            <el-divider />
            <el-row :gutter="16" align="middle">
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">成交率</div>
                  <el-progress
                    type="circle"
                    :percentage="completionRate"
                    :width="80"
                    :stroke-width="6"
                    status="success"
                  />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-percent">{{ completionRate }}%</div>
              </el-col>
            </el-row>
            <el-row :gutter="16" align="middle">
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">退款率</div>
                  <el-progress
                    type="circle"
                    :percentage="refundRate"
                    :width="80"
                    :stroke-width="6"
                    status="warning"
                  />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-percent">{{ refundRate }}%</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <!-- 右侧：详细信息和可编辑字段 -->
        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <!-- 财务信息卡片 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>💰 财务信息</span>
              </div>
            </template>
            <el-form :model="editData" label-width="120px" :disabled="!isEditMode">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="可提现余额">
                    <el-input-number
                      v-if="isEditMode"
                      v-model="editData.yue"
                      :precision="2"
                      :min="0"
                      :step="10"
                      style="width: 100%"
                    />
                    <span v-else>¥{{ formatPrice(playerInfo.yue) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="赚取总额">
                    <span>¥{{ formatPrice(playerInfo.zonge) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="积分">
                    <el-input-number
                      v-if="isEditMode"
                      v-model="editData.jifen"
                      :min="0"
                      :step="10"
                      style="width: 100%"
                    />
                    <span v-else>{{ playerInfo.jifen || 0 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="押金">
                    <el-input-number
                      v-if="isEditMode"
                      v-model="editData.yajin"
                      :precision="2"
                      :min="0"
                      :step="10"
                      style="width: 100%"
                    />
                    <span v-else>¥{{ formatPrice(playerInfo.yajin) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="今日收益">
                    <span>¥{{ formatPrice(playerInfo.jinrishouyi) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="今月收益">
                    <span>¥{{ formatPrice(playerInfo.jinyueshouyi) }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <!-- 状态信息卡片 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>⚙️ 状态管理</span>
              </div>
            </template>
            <el-form :model="isEditMode ? editData : playerInfo" label-width="120px">
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="在线状态">
                    <el-select
                      v-if="isEditMode"
                      v-model="editData.zaixianzhuangtai"
                      style="width: 100%"
                    >
                      <el-option :value="1" label="在线" />
                      <el-option :value="0" label="离线" />
                    </el-select>
                    <span v-else>{{ playerInfo.zaixianzhuangtai === 1 ? '在线' : '离线' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="账号状态">
                    <el-select
                      v-if="isEditMode"
                      v-model="editData.zhanghaozhuangtai"
                      style="width: 100%"
                    >
                      <el-option :value="1" label="正常" />
                      <el-option :value="0" label="封禁" />
                    </el-select>
                    <span v-else>{{ playerInfo.zhanghaozhuangtai === 1 ? '正常' : '封禁' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="工作状态">
                    <el-select
                      v-if="isEditMode"
                      v-model="editData.zhuangtai"
                      style="width: 100%"
                    >
                      <el-option :value="1" label="空闲" />
                      <el-option :value="0" label="接单中" />
                    </el-select>
                    <span v-else>{{ playerInfo.zhuangtai === 1 ? '空闲' : '接单中' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <!-- 会员信息卡片（只读+操作按钮） -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>🎫 会员信息</span>
                <el-button
                  type="primary"
                  size="small"
                  @click="openMemberDialog"
                  :disabled="!hasMemberPermission"
                >添加会员</el-button>
              </div>
            </template>
            <div class="member-list">
              <div v-for="member in memberList" :key="member.id" class="member-item">
                <el-tag :type="member.is_active ? 'success' : 'info'" effect="plain">
                  {{ member.huiyuan_name }} 到期: {{ formatTime(member.daoqi_time) }}
                </el-tag>
                <el-button
                  type="danger"
                  size="small"
                  link
                  @click="removeMember(member)"
                  :disabled="!hasMemberPermission"
                >移除</el-button>
              </div>
              <div v-if="memberList.length === 0" class="empty-message">暂无会员，点击上方按钮添加</div>
            </div>
          </el-card>

          <!-- 其他信息卡片 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>📝 其他信息</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="邀请人ID">
                <span class="copyable" @click="copyText(playerInfo.yaoqingren)">
                  {{ playerInfo.yaoqingren || '--' }} <el-icon><CopyDocument /></el-icon>
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="介绍">
                <el-tooltip v-if="playerInfo.jieshao" :content="playerInfo.jieshao" placement="top">
                  <span class="truncate">{{ playerInfo.jieshao }}</span>
                </el-tooltip>
                <span v-else>--</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>

      <el-row v-if="playerInfo.yonghuid" :gutter="20" class="freeze-section">
        <el-col :span="12">
          <FreezeConfigPanel
            :yonghuid="playerInfo.yonghuid"
            :leixing="1"
            title="打手佣金"
            :is-edit-mode="true"
            @unfrozen="onFreezeUnfrozen"
          />
        </el-col>
        <el-col :span="12">
          <FreezeConfigPanel
            :yonghuid="playerInfo.yonghuid"
            :leixing="5"
            title="打手押金"
            :is-edit-mode="true"
            @unfrozen="onFreezeUnfrozen"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 添加会员弹窗 -->
    <el-dialog v-model="memberDialogVisible" title="添加会员" width="400px">
      <el-form :model="memberForm" label-width="80px">
        <el-form-item label="会员类型" required>
          <el-select v-model="memberForm.huiyuan_id" placeholder="请选择会员" style="width: 100%">
            <el-option
              v-for="item in allMembers"
              :key="item.huiyuan_id"
              :label="item.jieshao"
              :value="item.huiyuan_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="天数" required>
          <el-input-number v-model="memberForm.days" :min="1" :step="1" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="memberDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addMember" :loading="memberAdding">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Edit, Check, Close, CopyDocument, Avatar } from '@element-plus/icons-vue'
import request from '@/utils/request'
import FreezeConfigPanel from '@/components/FreezeConfigPanel.vue'

const route = useRoute()
const router = useRouter()

// 基础数据
const loading = ref(false)
const saving = ref(false)
const playerId = ref('')
const username = ref(localStorage.getItem('username') || '')
const playerInfo = ref({})
const originalInfo = ref({})
const memberList = ref([])
const allMembers = ref([])
const isEditMode = ref(false)
const editData = ref({})

// 会员弹窗
const memberDialogVisible = ref(false)
const memberForm = reactive({ huiyuan_id: '', days: 30 })
const memberAdding = ref(false)

// 权限控制
const userPermissions = ref([])

const isGoldTitle = computed(() => playerInfo.value.chenghao === '金牌选手')
const hasMemberPermission = computed(() => userPermissions.value.includes('001ff') || userPermissions.value.includes('001gg'))
const hasChenghaoPermission = computed(() => userPermissions.value.includes('001hh'))

// 辅助函数
const getFullImageUrl = (url) => {
  if (!url) return ''
  const ossUrl = window.$ossURL || ''
  return url.startsWith('http') ? url : ossUrl + url
}
const formatPrice = (val) => parseFloat(val || 0).toFixed(2)
const formatTime = (time) => {
  if (!time) return '--'
  const date = new Date(time)
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')} ${date.getHours().toString().padStart(2,'0')}:${date.getMinutes().toString().padStart(2,'0')}`
}
const copyText = (text) => {
  if (!text || text === '--') return
  navigator.clipboard.writeText(text).then(() => ElMessage.success('复制成功')).catch(() => ElMessage.error('复制失败'))
}
const goBack = () => router.back()

// 统计
const completionRate = computed(() => {
  const total = playerInfo.value.jiedanzongliang || 0
  const completed = playerInfo.value.chengjiaozongliang || 0
  return total === 0 ? 0 : Math.round((completed / total) * 100)
})
const refundRate = computed(() => {
  const completed = playerInfo.value.chengjiaozongliang || 0
  const refund = playerInfo.value.tuikuanliang || 0
  return completed === 0 ? 0 : Math.round((refund / completed) * 100)
})

// 获取详情
const fetchDetail = async () => {
  if (!playerId.value) return
  loading.value = true
  try {
    const res = await request.post('/houtai/kefuhqdsxq', {
      phone: username.value,
      uid: playerId.value
    })
    if (res.code === 0) {
      const data = res.data
      playerInfo.value = data.user_info || {}
      originalInfo.value = JSON.parse(JSON.stringify(playerInfo.value))
      memberList.value = data.member_list || []
      allMembers.value = data.all_members || []
      userPermissions.value = data.permissions || []
    } else if (res.code === 403) {
      ElMessage.error('无权限访问')
      router.back()
    } else {
      ElMessage.error(res.msg || '获取打手详情失败')
    }
  } catch (error) {
    console.error('获取打手详情失败', error)
    ElMessage.error('获取打手详情失败')
  } finally {
    loading.value = false
  }
}

// 解冻后同步上方「可提现余额/押金」展示（冻结面板与详情卡片区联动）
const onFreezeUnfrozen = async (payload) => {
  const ur = payload?.unfreeze_result
  if (ur) {
    const after = parseFloat(ur.balance_after)
    if (!Number.isNaN(after)) {
      if (payload.leixing === 5) {
        playerInfo.value.yajin = after
        if (isEditMode.value) editData.value.yajin = after
      } else if (payload.leixing === 1) {
        playerInfo.value.yue = after
        if (isEditMode.value) editData.value.yue = after
      }
    }
  }
  await fetchDetail()
}

// 编辑模式
const toggleEditMode = () => {
  editData.value = JSON.parse(JSON.stringify(playerInfo.value))
  isEditMode.value = true
}
const cancelEdit = () => {
  isEditMode.value = false
  editData.value = {}
}
const saveChanges = async () => {
  const changes = {}
  for (const key in editData.value) {
    if (editData.value[key] !== playerInfo.value[key]) {
      changes[key] = editData.value[key]
    }
  }
  if (Object.keys(changes).length === 0) {
    ElMessage.warning('未做任何修改')
    cancelEdit()
    return
  }
  saving.value = true
  try {
    let success = true
    for (const [key, val] of Object.entries(changes)) {
      let caozuo = ''
      let value = val
      switch (key) {
        case 'yue':
          caozuo = val > playerInfo.value.yue ? 'jia_yue' : 'jian_yue'
          value = Math.abs(val - playerInfo.value.yue)
          break
        case 'jifen':
          caozuo = val > playerInfo.value.jifen ? 'jia_jifen' : 'jian_jifen'
          value = Math.abs(val - playerInfo.value.jifen)
          break
        case 'yajin':
          caozuo = val > playerInfo.value.yajin ? 'jia_yajin' : 'jian_yajin'
          value = Math.abs(val - playerInfo.value.yajin)
          break
        case 'zhanghaozhuangtai':
          caozuo = 'gai_zhanghaozhuangtai'
          value = val
          break
        case 'zaixianzhuangtai':
          caozuo = 'gai_zaixianzhuangtai'
          value = val
          break
        case 'zhuangtai':
          caozuo = 'gai_zhuangtai'
          value = val
          break
        default:
          continue
      }
      const res = await request.post('/houtai/kefuxgds', {
        username: username.value,
        dashou_id: playerId.value,
        caozuo: caozuo,
        value: value
      })
      if (res.code !== 0) {
        success = false
        ElMessage.error(`修改 ${key} 失败：${res.msg}`)
        break
      }
    }
    if (success) {
      ElMessage.success('修改成功')
      await fetchDetail()
      cancelEdit()
    }
  } catch (error) {
    ElMessage.error('修改失败')
  } finally {
    saving.value = false
  }
}

// 称号修改
const handleChenghaoChange = async () => {
  const newTitle = isGoldTitle.value ? '普通打手' : '金牌选手'
  try {
    const res = await request.post('/houtai/kefuxgds', {
      username: username.value,
      dashou_id: playerId.value,
      caozuo: 'gai_chenghao',
      value: newTitle
    })
    if (res.code === 0) {
      ElMessage.success(`称号已修改为“${newTitle}”`)
      await fetchDetail()
    } else {
      ElMessage.error(res.msg || '修改称号失败')
    }
  } catch (error) {
    ElMessage.error('修改称号失败')
  }
}

// 添加会员
const openMemberDialog = () => {
  memberForm.huiyuan_id = ''
  memberForm.days = 30
  memberDialogVisible.value = true
}
const addMember = async () => {
  if (!memberForm.huiyuan_id) {
    ElMessage.warning('请选择会员类型')
    return
  }
  memberAdding.value = true
  try {
    const res = await request.post('/houtai/kefuxgds', {
      username: username.value,
      dashou_id: playerId.value,
      caozuo: 'jia_huiyuan',
      huiyuan_id: memberForm.huiyuan_id,
      value: memberForm.days
    })
    if (res.code === 0) {
      ElMessage.success('添加会员成功')
      memberDialogVisible.value = false
      await fetchDetail()
    } else {
      ElMessage.error(res.msg || '添加失败')
    }
  } catch (error) {
    ElMessage.error('添加失败')
  } finally {
    memberAdding.value = false
  }
}
const removeMember = async (member) => {
  ElMessageBox.confirm(`确定移除会员“${member.huiyuan_name}”吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await request.post('/houtai/kefuxgds', {
      username: username.value,
      dashou_id: playerId.value,
      caozuo: 'jian_huiyuan',
      huiyuan_id: member.huiyuan_id
    })
    if (res.code === 0) {
      ElMessage.success('移除成功')
      await fetchDetail()
    } else {
      ElMessage.error(res.msg || '移除失败')
    }
  }).catch(() => {})
}

// 关键：从路由参数中获取 playerId（参数名必须为 playerId）
onMounted(() => {
  playerId.value = route.params.playerId
  if (!playerId.value) {
    ElMessage.error('打手ID不存在')
    router.back()
    return
  }
  fetchDetail()
})
</script>
<style scoped>
/* 保持原有样式，新增以下 */
.chenghao-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.empty-message {
  color: #999;
  text-align: center;
  padding: 20px;
}
/* 其余样式保持不变（从原代码复制） */







.player-detail {
  padding: 20px;
  background-color: #f5f9fc;
  min-height: 100%;
}

.loading-container {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a2634;
}

.header-right {
  display: flex;
  gap: 12px;
}

.info-card {
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
}

.card-header {
  font-weight: 600;
  color: #1a2634;
}

.base-info {
  padding: 8px;
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.status-badges {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.copyable {
  cursor: pointer;
  color: #409eff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.copyable:hover {
  text-decoration: underline;
}

.stat-item {
  text-align: center;
  padding: 12px 0;
}
.stat-label {
  font-size: 13px;
  color: #6b7a88;
  margin-bottom: 4px;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #1a2634;
}
.stat-value.success {
  color: #67c23a;
}
.stat-value.danger {
  color: #f56c6c;
}
.stat-percent {
  font-size: 24px;
  font-weight: 600;
  color: #1a2634;
  text-align: center;
}

.el-divider {
  margin: 16px 0;
}

.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.member-tag {
  font-size: 13px;
}

.truncate {
  max-width: 200px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 手机适配 */
@media screen and (max-width: 768px) {
  .player-detail {
    padding: 12px;
  }
  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .header-right {
    width: 100%;
    justify-content: flex-end;
  }
  .stat-value {
    font-size: 20px;
  }
}
</style>