<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

// 风险等级转换为文字描述
const riskLevelText = (level, type) => {
  if (type === 'black_gray_level') {
    const levels = {
      '': '无风险',
      1: '低风险',
      2: '中等风险',
      3: '高风险',
      4: '极高风险',
    }
    return levels[level] || '未知风险'
  } else if (type === 'telefraud_level') {
    const levels = {
      0: '无风险',
      1: '极低风险',
      2: '低风险',
      3: '中低风险',
      4: '中等风险',
      5: '高风险',
      6: '极高风险',
    }
    return levels[level] || '未知风险'
  } else if (type === 'frg_list_level') {
    if (level >= '3' && level <= '5') return '低风险团伙'
    if (level >= '6' && level <= '7') return '中风险团伙'
    if (level >= '8' && level <= '10') return '高风险团伙'
    return '无风险'
  } else if (type === 'risk_level') {
    const levels = {
      A: '无风险',
      F: '低风险',
      C: '中风险',
      D: '中风险',
      B: '高风险',
      E: '高风险',
    }
    return levels[level] || '未知风险'
  } else if (type === 'gaming') {
    const levelNum = parseInt(level)
    if (levelNum === 0) return '无风险'
    if (levelNum > 0 && levelNum <= 20) return '极低风险'
    if (levelNum > 20 && levelNum <= 40) return '低风险'
    if (levelNum > 40 && levelNum <= 60) return '中等风险'
    if (levelNum > 60 && levelNum <= 80) return '高风险'
    if (levelNum > 80) return '极高风险'
    return '未知风险'
  }
  return '未知风险'
}

// 风险等级转换为颜色
const riskLevelColor = (level, type) => {
  if (type === 'black_gray_level') {
    if (level === '' || level === '1') return 'bg-gradient-to-r from-emerald-400 to-teal-500'
    if (level === '2') return 'bg-gradient-to-r from-amber-400 to-yellow-500'
    if (level === '3') return 'bg-gradient-to-r from-orange-400 to-amber-600'
    if (level === '4') return 'bg-gradient-to-r from-rose-400 to-red-500'
    return 'bg-gradient-to-r from-gray-400 to-gray-500'
  } else if (type === 'telefraud_level') {
    if (level === '0') return 'bg-gradient-to-r from-emerald-400 to-teal-500'
    if (level === '1' || level === '2') return 'bg-gradient-to-r from-teal-300 to-green-400'
    if (level === '3' || level === '4') return 'bg-gradient-to-r from-amber-400 to-yellow-500'
    if (level === '5') return 'bg-gradient-to-r from-orange-400 to-amber-600'
    if (level === '6') return 'bg-gradient-to-r from-rose-400 to-red-500'
    return 'bg-gradient-to-r from-gray-400 to-gray-500'
  } else if (type === 'frg_list_level') {
    if (level >= '3' && level <= '5') return 'bg-gradient-to-r from-emerald-400 to-teal-500'
    if (level >= '6' && level <= '7') return 'bg-gradient-to-r from-amber-400 to-yellow-500'
    if (level >= '8' && level <= '10') return 'bg-gradient-to-r from-rose-400 to-red-500'
    return 'bg-gradient-to-r from-gray-400 to-gray-500'
  } else if (type === 'risk_level') {
    if (level === 'A') return 'bg-gradient-to-r from-emerald-400 to-teal-500'
    if (level === 'F') return 'bg-gradient-to-r from-amber-400 to-yellow-500'
    if (level === 'C' || level === 'D') return 'bg-gradient-to-r from-orange-400 to-amber-600'
    if (level === 'B' || level === 'E') return 'bg-gradient-to-r from-rose-400 to-red-500'
    return 'bg-gradient-to-r from-gray-400 to-gray-500'
  } else if (type === 'gaming') {
    const levelNum = parseInt(level)
    if (levelNum === 0) return 'bg-gradient-to-r from-emerald-400 to-teal-500'
    if (levelNum > 0 && levelNum <= 20) return 'bg-gradient-to-r from-teal-300 to-green-400'
    if (levelNum > 20 && levelNum <= 40) return 'bg-gradient-to-r from-green-400 to-green-500'
    if (levelNum > 40 && levelNum <= 60) return 'bg-gradient-to-r from-amber-400 to-yellow-500'
    if (levelNum > 60 && levelNum <= 80) return 'bg-gradient-to-r from-orange-400 to-amber-600'
    if (levelNum > 80) return 'bg-gradient-to-r from-rose-400 to-red-500'
    return 'bg-gradient-to-r from-gray-400 to-gray-500'
  }
  return 'bg-gradient-to-r from-gray-400 to-gray-500'
}

// 根据风险类型获取名称
const getRiskTypeName = type => {
  const types = {
    110: '疑似欺诈',
    130: '疑似赌博庄家',
    150: '疑似赌博玩家',
    170: '疑似涉赌跑分',
  }
  return types[type] || '未知类型'
}

// 获取团伙规模描述
const getGroupSizeDesc = code => {
  const sizes = {
    a: '小规模(少于50人)',
    b: '中等规模(50-100人)',
    c: '大规模(100-500人)',
    d: '超大规模(500人以上)',
  }
  return sizes[code] || '未知规模'
}

// 获取风险图标
const getRiskIcon = type => {
  switch (type) {
    case '110':
      return 'fa-exclamation-triangle'
    case '130':
      return 'fa-dice'
    case '150':
      return 'fa-gamepad'
    case '170':
      return 'fa-money-bill-wave'
    default:
      return 'fa-question-circle'
  }
}

// 获取不良记录详情
const getRiskLevelDetail = level => {
  switch (level) {
    case 'A':
      return '无任何不良记录'
    case 'F':
      return '涉稳、寻衅滋事'
    case 'C':
    case 'D':
      return '吸毒、涉毒、犯罪前科'
    case 'B':
    case 'E':
      return '涉案人员、在逃、犯罪嫌疑人'
    default:
      return '未知记录'
  }
}

// 风险评估总结
const getRiskSummary = () => {
  if (!props.data) return { text: '无法评估风险', level: 'low', color: 'text-gray-500' }

  let highRiskCount = 0
  let mediumRiskCount = 0

  // 检查黑灰产等级
  if (props.data.black_gray_level && parseInt(props.data.black_gray_level) > 2) {
    highRiskCount++
  } else if (props.data.black_gray_level && parseInt(props.data.black_gray_level) === 2) {
    mediumRiskCount++
  }

  // 检查电诈风险
  if (props.data.telefraud_level && parseInt(props.data.telefraud_level) > 4) {
    highRiskCount++
  } else if (props.data.telefraud_level && parseInt(props.data.telefraud_level) > 2) {
    mediumRiskCount++
  }

  // 检查团伙欺诈
  if (
    props.data.fraud_group &&
    props.data.fraud_group.frg_list_level &&
    parseInt(props.data.fraud_group.frg_list_level) > 7
  ) {
    highRiskCount++
  } else if (
    props.data.fraud_group &&
    props.data.fraud_group.frg_list_level &&
    parseInt(props.data.fraud_group.frg_list_level) > 5
  ) {
    mediumRiskCount++
  }

  // 检查风险等级
  if (props.data.risk_level && props.data.risk_level.risk_level) {
    if (['B', 'E'].includes(props.data.risk_level.risk_level)) {
      highRiskCount++
    } else if (['C', 'D'].includes(props.data.risk_level.risk_level)) {
      mediumRiskCount++
    } else if (props.data.risk_level.risk_level === 'F') {
      // 低风险，不增加计数
    }
  }

  // 检查反诈反赌核验
  if (props.data.anti_fraud_gaming) {
    props.data.anti_fraud_gaming.forEach(item => {
      const levelNum = parseInt(item.riskLevel)
      if (levelNum > 60) {
        highRiskCount++
      } else if (levelNum > 40) {
        mediumRiskCount++
      }
    })
  }

  if (highRiskCount > 0) {
    return {
      text: '该用户存在较高风险行为，建议进行进一步核实和监控',
      level: 'high',
      color: 'text-red-500',
    }
  } else if (mediumRiskCount > 0) {
    return {
      text: '该用户存在一定风险行为，建议提高警惕',
      level: 'medium',
      color: 'text-yellow-500',
    }
  } else {
    return {
      text: '该用户行为正常，风险较低',
      level: 'low',
      color: 'text-green-500',
    }
  }
}

const summary = getRiskSummary()
</script>

<template>
  <div class="card main-card">
    <div v-if="!data || Object.keys(data).length === 0" class="py-4 text-center text-gray-500">
      暂无风险行为扫描数据
    </div>
    <div v-else class="risk-content">
      <!-- 风险总结 -->
      <div
        class="summary-card"
        :class="{
          'border-red-500 glow-red': summary.level === 'high',
          'border-yellow-500 glow-yellow': summary.level === 'medium',
          'border-green-500 glow-green': summary.level === 'low',
        }"
      >
        <div class="flex items-center">
          <div class="summary-icon" :class="summary.color">
            <i
              class="fas"
              :class="
                summary.level === 'high'
                  ? 'fa-exclamation-triangle'
                  : summary.level === 'medium'
                    ? 'fa-exclamation-circle'
                    : 'fa-check-circle'
              "
            ></i>
          </div>
          <div class="font-bold text-lg" :class="summary.color">风险评估总结</div>
        </div>
        <div class="mt-1 text-gray-700">{{ summary.text }}</div>
      </div>

      <div class="grid-container">
        <!-- 左侧列 -->
        <div class="grid-left">
          <!-- 黑灰产等级 -->
          <div class="risk-section hover-lift">
            <div class="section-title flex items-center">
              <div class="title-icon bg-indigo-100 text-indigo-600">
                <i class="fas fa-user-secret"></i>
              </div>
              <span>黑灰产等级</span>
            </div>
            <div class="section-content">
              <div class="risk-level-indicator">
                <div class="indicator-label">风险等级</div>
                <div class="indicator-bar">
                  <div
                    class="indicator-value"
                    :class="riskLevelColor(data.black_gray_level || '', 'black_gray_level')"
                    :style="{
                      width: data.black_gray_level ? `${Math.min(parseInt(data.black_gray_level) * 25, 100)}%` : '0%',
                    }"
                  ></div>
                </div>
                <div
                  class="indicator-text"
                  :class="{
                    'text-green-500': (data.black_gray_level || '') === '' || (data.black_gray_level || '') === '1',
                    'text-yellow-500': (data.black_gray_level || '') === '2',
                    'text-orange-500': (data.black_gray_level || '') === '3',
                    'text-red-500': (data.black_gray_level || '') === '4',
                  }"
                >
                  {{ riskLevelText(data.black_gray_level || '', 'black_gray_level') }}
                </div>
              </div>
              <div class="description">黑灰产等级评估用户是否参与非法活动，等级越高风险越大</div>
            </div>
          </div>

          <!-- 电诈风险预警 -->
          <div class="risk-section hover-lift">
            <div class="section-title flex items-center">
              <div class="title-icon bg-red-100 text-red-600">
                <i class="fas fa-phone-slash"></i>
              </div>
              <span>电诈风险预警</span>
            </div>
            <div class="section-content">
              <div class="risk-level-indicator">
                <div class="indicator-label">风险等级</div>
                <div class="indicator-bar">
                  <div
                    class="indicator-value"
                    :class="riskLevelColor(data.telefraud_level || '0', 'telefraud_level')"
                    :style="{ width: `${Math.min(parseInt(data.telefraud_level || '0') * 16.6, 100)}%` }"
                  ></div>
                </div>
                <div
                  class="indicator-text"
                  :class="{
                    'text-green-500':
                      (data.telefraud_level || '0') === '0' ||
                      (data.telefraud_level || '0') === '1' ||
                      (data.telefraud_level || '0') === '2',
                    'text-yellow-500': (data.telefraud_level || '0') === '3' || (data.telefraud_level || '0') === '4',
                    'text-orange-500': (data.telefraud_level || '0') === '5',
                    'text-red-500': (data.telefraud_level || '0') === '6',
                  }"
                >
                  {{ riskLevelText(data.telefraud_level || '0', 'telefraud_level') }}
                </div>
              </div>
              <div class="description">电诈风险预警评估用户是否涉及电信诈骗活动，值越大风险越高</div>
            </div>
          </div>

          <!-- 综合风险等级 -->
          <div class="risk-section hover-lift">
            <div class="section-title flex items-center">
              <div class="title-icon bg-emerald-100 text-emerald-600">
                <i class="fas fa-shield-alt"></i>
              </div>
              <span>不良个人核查</span>
            </div>
            <div class="section-content">
              <div v-if="data.risk_level" class="flex items-center justify-center py-3">
                <div
                  class="risk-level-badge"
                  :class="{
                    'bg-green-100 text-green-700 badge-pulse-green': data.risk_level.risk_level === 'A',
                    'bg-yellow-100 text-yellow-700 badge-pulse-yellow': data.risk_level.risk_level === 'F',
                    'bg-orange-100 text-orange-700 badge-pulse-orange': ['C', 'D'].includes(data.risk_level.risk_level),
                    'bg-red-100 text-red-700 badge-pulse-red': ['B', 'E'].includes(data.risk_level.risk_level),
                  }"
                >
                  <span class="text-xl font-bold">{{
                    riskLevelText(data.risk_level.risk_level || 'A', 'risk_level')
                  }}</span>
                </div>
                <div class="ml-4 text-sm">
                  <div class="font-medium">详情:</div>
                  <div
                    class="mt-1"
                    :class="{
                      'text-green-600': data.risk_level.risk_level === 'A',
                      'text-yellow-600': data.risk_level.risk_level === 'F',
                      'text-orange-600': ['C', 'D'].includes(data.risk_level.risk_level),
                      'text-red-600': ['B', 'E'].includes(data.risk_level.risk_level),
                    }"
                  >
                    {{ getRiskLevelDetail(data.risk_level.risk_level || 'A') }}
                  </div>
                </div>
              </div>
              <div v-else class="text-center py-2 text-gray-500">暂无不良个人核查数据</div>
              <div class="description">不良个人核查评估用户的风险状况，从无风险到高风险分级</div>
            </div>
          </div>
        </div>

        <!-- 右侧列 -->
        <div class="grid-right">
          <!-- 团伙欺诈排查 -->
          <div class="risk-section hover-lift">
            <div class="section-title flex items-center">
              <div class="title-icon bg-amber-100 text-amber-600">
                <i class="fas fa-users-slash"></i>
              </div>
              <span>团伙欺诈排查</span>
            </div>
            <div class="section-content">
              <div v-if="data.fraud_group" class="flex flex-col md:flex-row gap-3">
                <div class="risk-level-indicator flex-1">
                  <div class="indicator-label">团伙风险等级</div>
                  <div class="indicator-bar">
                    <div
                      class="indicator-value"
                      :class="riskLevelColor(data.fraud_group.frg_list_level || '3', 'frg_list_level')"
                      :style="{
                        width: `${Math.min((parseInt(data.fraud_group.frg_list_level || '3') - 2) * 12.5, 100)}%`,
                      }"
                    ></div>
                  </div>
                  <div
                    class="indicator-text"
                    :class="{
                      'text-green-500': parseInt(data.fraud_group.frg_list_level || '3') <= 5,
                      'text-yellow-500':
                        parseInt(data.fraud_group.frg_list_level || '3') >= 6 &&
                        parseInt(data.fraud_group.frg_list_level || '3') <= 7,
                      'text-red-500': parseInt(data.fraud_group.frg_list_level || '3') >= 8,
                    }"
                  >
                    {{ riskLevelText(data.fraud_group.frg_list_level || '3', 'frg_list_level') }}
                  </div>
                </div>

                <div class="group-size flex-1">
                  <div class="font-medium text-gray-700">团伙规模</div>
                  <div class="mt-2 flex items-center">
                    <i class="fas fa-users text-blue-500 mr-2 text-xl"></i>
                    <span>{{ getGroupSizeDesc(data.fraud_group.frg_group_num || 'a') }}</span>
                  </div>
                </div>
              </div>
              <div v-else class="text-center py-2 text-gray-500">暂无团伙欺诈数据</div>
              <div class="description mt-1">团伙欺诈排查评估用户是否属于欺诈团伙及团伙规模大小</div>
            </div>
          </div>

          <!-- 反诈反赌核验 -->
          <div class="risk-section hover-lift">
            <div class="section-title flex items-center">
              <div class="title-icon bg-purple-100 text-purple-600">
                <i class="fas fa-dice-slash"></i>
              </div>
              <span>反诈反赌核验</span>
            </div>
            <div class="section-content">
              <div v-if="data.anti_fraud_gaming && data.anti_fraud_gaming.length > 0" class="grid grid-cols-1 gap-3">
                <div
                  v-for="(item, index) in data.anti_fraud_gaming"
                  :key="index"
                  class="gaming-item"
                  :class="
                    parseInt(item.riskLevel) === 0
                      ? 'border-green-500'
                      : parseInt(item.riskLevel) < 4
                        ? 'border-green-400'
                        : parseInt(item.riskLevel) < 7
                          ? 'border-yellow-500'
                          : 'border-red-500'
                  "
                >
                  <div
                    class="gaming-icon"
                    :class="
                      parseInt(item.riskLevel) === 0
                        ? 'bg-green-100 text-green-500'
                        : parseInt(item.riskLevel) < 4
                          ? 'bg-green-100 text-green-500'
                          : parseInt(item.riskLevel) < 7
                            ? 'bg-yellow-100 text-yellow-600'
                            : 'bg-red-100 text-red-500'
                    "
                  >
                    <i class="fas" :class="getRiskIcon(item.riskType)"></i>
                  </div>
                  <div class="flex-1">
                    <div class="font-medium text-sm">{{ getRiskTypeName(item.riskType) }}</div>
                    <div class="flex items-center mt-2">
                      <div class="progress-container">
                        <div
                          class="progress-bar"
                          :class="riskLevelColor(item.riskLevel, 'gaming')"
                          :style="{ width: `${Math.min(parseInt(item.riskLevel), 100)}%` }"
                        ></div>
                      </div>
                      <span
                        class="risk-level-text"
                        :class="{
                          'text-green-500': parseInt(item.riskLevel) <= 20,
                          'text-green-600': parseInt(item.riskLevel) > 20 && parseInt(item.riskLevel) <= 40,
                          'text-yellow-500': parseInt(item.riskLevel) > 40 && parseInt(item.riskLevel) <= 60,
                          'text-orange-500': parseInt(item.riskLevel) > 60 && parseInt(item.riskLevel) <= 80,
                          'text-red-500': parseInt(item.riskLevel) > 80,
                        }"
                      >
                        {{ riskLevelText(item.riskLevel, 'gaming') }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="text-center py-2 text-gray-500">暂无反诈反赌核验数据</div>
              <div class="description mt-1">反诈反赌核验评估用户是否有涉及诈骗或赌博活动的风险</div>
            </div>
          </div>

          <!-- 安全建议 -->
          <div class="security-tips hover-lift">
            <div class="flex items-center">
              <div class="title-icon bg-blue-100 text-blue-600 mr-2">
                <i class="fas fa-lightbulb"></i>
              </div>
              <div class="font-bold text-blue-700">安全建议</div>
            </div>
            <div class="tip-list">
              <div class="tip-item">
                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                <span>定期更新密码，使用复杂且不易猜测的密码</span>
              </div>
              <div class="tip-item">
                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                <span>开启双因素认证，提高账户安全性</span>
              </div>
              <div class="tip-item">
                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                <span>不点击来源不明的链接或下载不明文件</span>
              </div>
              <div class="tip-item">
                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                <span>不向陌生人透露个人敏感信息</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-card {
  @apply bg-white shadow-md rounded-xl p-4 mb-3 border border-gray-100;
}

.risk-content {
  @apply space-y-4;
}

.grid-container {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.grid-left,
.grid-right {
  @apply flex flex-col gap-4;
}

.summary-card {
  @apply p-4 rounded-xl shadow-sm bg-gradient-to-br from-sky-50 to-indigo-100 border-l-4 transition-all duration-300;
}

.glow-red {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.6);
}

.glow-yellow {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.6);
}

.glow-green {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.6);
}

.summary-icon {
  @apply mr-2 text-xl;
}

.risk-section {
  @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 16px -2px rgba(0, 0, 0, 0.1),
    0 4px 8px -2px rgba(0, 0, 0, 0.05);
}

.section-title {
  @apply bg-gradient-to-r from-gray-50 to-gray-100 px-4 py-3 font-bold text-gray-700 border-b border-gray-200 flex items-center;
}

.title-icon {
  @apply w-7 h-7 rounded-full flex items-center justify-center mr-3 shadow-sm;
}

.section-content {
  @apply p-4;
}

.risk-level-indicator {
  @apply mb-2;
}

.indicator-label {
  @apply text-gray-700 font-medium mb-1 text-sm;
}

.indicator-bar {
  @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden shadow-inner;
}

.indicator-value {
  @apply h-3 rounded-full transition-all duration-500;
}

.indicator-text {
  @apply mt-1 font-medium text-sm;
}

.description {
  @apply text-xs text-gray-500 mt-2 italic;
}

.risk-level-badge {
  @apply flex flex-col items-center justify-center w-20 h-20 rounded-full shadow-md border transition-transform duration-300 backdrop-blur-sm;
}

.badge-pulse-green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.3));
  border-color: rgba(5, 150, 105, 0.4);
  animation: pulse-green 3s infinite;
}

.badge-pulse-yellow {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.3));
  border-color: rgba(217, 119, 6, 0.4);
  animation: pulse-yellow 3s infinite;
}

.badge-pulse-orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.3));
  border-color: rgba(234, 88, 12, 0.4);
  animation: pulse-orange 3s infinite;
}

.badge-pulse-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.3));
  border-color: rgba(220, 38, 38, 0.4);
  animation: pulse-red 3s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-yellow {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.3);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.group-size {
  @apply bg-gradient-to-br from-gray-50 to-gray-100 p-3 rounded-lg shadow-sm;
}

.gaming-item {
  @apply flex items-center bg-white shadow-sm rounded-lg p-3 border-l-2 transition-all duration-300;
}

.gaming-item:hover {
  @apply shadow-md;
  transform: scale(1.01);
}

.gaming-icon {
  @apply w-9 h-9 flex items-center justify-center rounded-full mr-3 shadow-sm;
}

.progress-container {
  @apply w-full bg-gray-200 rounded-full h-3 mr-3 flex-1 shadow-inner;
}

.progress-bar {
  @apply h-3 rounded-full transition-all duration-500;
}

.risk-level-text {
  @apply text-xs whitespace-nowrap min-w-[3.5rem] text-right font-semibold;
}

.security-tips {
  @apply bg-gradient-to-br from-sky-50 to-indigo-100 rounded-xl p-4 shadow-sm border border-blue-200;
}

.tip-list {
  @apply mt-3 space-y-2;
}

.tip-item {
  @apply flex items-start text-sm text-gray-700 bg-white p-2 rounded-lg shadow-sm border border-gray-100;
}
</style>
