<script lang="ts" setup>
import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
import { PieChart as EPieChart } from 'echarts/charts';
import {
  GraphicComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { getPremiumPackageTokenUsage } from '@/api';
import { showProductPackage } from '@/utils/product-package.ts';

const props = withDefaults(defineProps<Props>(), {
  loading: false,
});

// Emits
const emit = defineEmits<{
  refresh: [];
}>();

// 注册必要的组件
echarts.use([
  EPieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GraphicComponent,
  CanvasRenderer,
]);

// Props
interface Props {
  packageData: {
    totalQuota: number;
    usedQuota: number;
    remainingQuota: number;
    usagePercentage: number;
    packageName: string;
    expireDate: string;
  };
  loading?: boolean;
}

// 饼图相关
const tokenPieChart = ref(null);
let tokenPieChartInstance: any = null;
const tokenUsageData = ref<any[]>([]);
const tokenUsageLoading = ref(false);

// 计算属性
const usagePercent = computed(() => {
  if (props.packageData.totalQuota === 0)
    return 0;
  return Number(((props.packageData.usedQuota / props.packageData.totalQuota) * 100).toFixed(2));
});

const remainingPercent = computed(() => {
  if (props.packageData.totalQuota === 0)
    return 0;
  return Number(((props.packageData.remainingQuota / props.packageData.totalQuota) * 100).toFixed(2));
});

// 获取进度条颜色（基于剩余百分比）
const progressColor = computed(() => {
  const percent = remainingPercent.value;
  if (percent <= 10)
    return '#f56c6c'; // 红色 - 剩余很少
  if (percent <= 30)
    return '#e6a23c'; // 橙色 - 剩余较少
  return '#67c23a'; // 绿色 - 剩余充足
});

// 格式化数字 - 转换为万为单位
function formatNumber(num: number): string {
  if (num === 0)
    return '0';
  const wan = num / 10000;
  // 保留2位小数，去掉末尾的0
  return wan.toFixed(2).replace(/\.?0+$/, '');
}

// 格式化原始数字（带千分位）
function formatRawNumber(num: number): string {
  return num.toLocaleString();
}

function onProductPackage() {
  showProductPackage();
}

// 获取Token用量数据
async function fetchTokenUsageData() {
  try {
    tokenUsageLoading.value = true;
    const res = await getPremiumPackageTokenUsage();
    if (res.data) {
      tokenUsageData.value = res.data;
      updateTokenPieChart();
    }
  }
  catch (error) {
    console.error('获取Token用量数据失败:', error);
  }
  finally {
    tokenUsageLoading.value = false;
  }
}

// 初始化Token饼图
function initTokenPieChart() {
  if (tokenPieChart.value) {
    tokenPieChartInstance = echarts.init(tokenPieChart.value);
  }
  window.addEventListener('resize', resizeTokenPieChart);
}

// 更新Token饼图
function updateTokenPieChart() {
  if (!tokenPieChartInstance)
    return;

  // 空数据状态
  if (tokenUsageData.value.length === 0) {
    const emptyOption = {
      graphic: [
        {
          type: 'group',
          left: 'center',
          top: 'center',
          children: [
            {
              type: 'circle',
              shape: {
                r: 80,
              },
              style: {
                fill: '#f5f7fa',
                stroke: '#e9ecef',
                lineWidth: 2,
              },
            },
            {
              type: 'text',
              style: {
                text: '📊',
                fontSize: 48,
                x: -24,
                y: -40,
              },
            },
            {
              type: 'text',
              style: {
                text: '暂无数据',
                fontSize: 18,
                fontWeight: 'bold',
                fill: '#909399',
                x: -36,
                y: 20,
              },
            },
            {
              type: 'text',
              style: {
                text: '还没有Token使用记录',
                fontSize: 14,
                fill: '#c0c4cc',
                x: -70,
                y: 50,
              },
            },
          ],
        },
      ],
    };
    tokenPieChartInstance.setOption(emptyOption, true);
    return;
  }

  const data = tokenUsageData.value.map(item => ({
    name: item.tokenName,
    value: item.tokens,
  }));

  const option = {
    graphic: [],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} tokens ({d}%)',
    },
    legend: {
      show: false, // 隐藏图例，使用标签线代替
    },
    series: [
      {
        name: 'Token用量',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: true,
          position: 'outside',
          formatter: (params: any) => {
            const item = tokenUsageData.value.find(d => d.tokenName === params.name);
            const percentage = item?.percentage || 0;
            return `${params.name}: ${percentage.toFixed(1)}%`;
          },
          fontSize: 13,
          fontWeight: 600,
          color: '#333',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
          },
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 10,
          lineStyle: {
            width: 1.5,
          },
        },
        data,
      },
    ],
  };

  tokenPieChartInstance.setOption(option, true);
}

// 调整饼图大小
function resizeTokenPieChart() {
  tokenPieChartInstance?.resize();
}

// 根据索引获取Token颜色
function getTokenColor(index: number) {
  const colors = [
    '#667eea',
    '#764ba2',
    '#f093fb',
    '#f5576c',
    '#4facfe',
    '#00f2fe',
    '#43e97b',
    '#38f9d7',
    '#fa709a',
    '#fee140',
  ];
  return colors[index % colors.length];
}

onMounted(() => {
  initTokenPieChart();
  fetchTokenUsageData();
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeTokenPieChart);
  tokenPieChartInstance?.dispose();
});
</script>

<template>
  <div v-loading="loading" class="premium-package-info">
    <div class="header">
      <div class="header-left">
        <el-icon class="header-main-icon">
          <TrophyBase />
        </el-icon>
        <div class="header-titles">
          <h2 class="main-title">
            尊享服务
          </h2>
          <p class="sub-title">
            Premium Service
          </p>
        </div>
      </div>
      <el-button
        type="primary"
        size="default"
        @click="emit('refresh')"
      >
        <el-icon><i-ep-refresh /></el-icon>
        刷新数据
      </el-button>
    </div>

    <!-- 套餐信息卡片 -->
    <el-card class="package-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="card-header-left">
            <el-icon class="header-icon">
              <Coin />
            </el-icon>
            <div class="header-text">
              <span class="header-title">尊享TOKEN包总览</span>
              <span class="header-subtitle">{{ packageData.packageName }}</span>
            </div>
          </div>
        </div>
      </template>

      <div class="package-content">
        <!-- 统计数据 -->
        <div class="stats-grid">
          <div class="stat-item total">
            <div class="stat-label">
              购买总额度
            </div>
            <div class="stat-value">
              {{ formatNumber(packageData.totalQuota) }}
            </div>
            <div class="stat-unit">
              万 Tokens
            </div>
            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
              ({{ formatRawNumber(packageData.totalQuota) }})
            </div>
          </div>

          <div class="stat-item used">
            <div class="stat-label">
              已用额度
            </div>
            <div class="stat-value">
              {{ formatNumber(packageData.usedQuota) }}
            </div>
            <div class="stat-unit">
              万 Tokens
            </div>
            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
              ({{ formatRawNumber(packageData.usedQuota) }})
            </div>
          </div>

          <div class="stat-item remaining">
            <div class="stat-label">
              剩余额度
            </div>
            <div class="stat-value">
              {{ formatNumber(packageData.remainingQuota) }}
            </div>
            <div class="stat-unit">
              万 Tokens
            </div>
            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
              ({{ formatRawNumber(packageData.remainingQuota) }})
            </div>
          </div>
        </div>

        <!-- 进度条 -->
        <div class="progress-section">
          <div class="progress-header">
            <span class="progress-label">剩余进度</span>
            <span class="progress-percent" :style="{ color: progressColor }">
              {{ remainingPercent }}%
            </span>
          </div>

          <el-progress
            :percentage="remainingPercent"
            :color="progressColor"
            :stroke-width="20"
            :show-text="false"
          />

          <div class="progress-legend">
            <div class="legend-item">
              <span class="legend-dot " :style="{ background: progressColor }" />
              <span class="legend-text">剩余: {{ remainingPercent }}%</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot used-dot" />
              <span class="legend-text">已使用: {{ usagePercent }}%</span>
            </div>
          </div>
        </div>

        <!-- 购买提示卡片（额度不足时显示） -->
        <el-card
          v-if="remainingPercent < 20"
          class="warning-card"
          shadow="hover"
        >
          <div class="warning-content">
            <el-icon class="warning-icon" color="#e6a23c">
              <WarningFilled />
            </el-icon>
            <div class="warning-text">
              <h3>额度即将用完</h3>
              <p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
            </div>
            <el-button type="warning" @click="onProductPackage()">
              立即充值
            </el-button>
          </div>
        </el-card>

        <!-- 过期时间 -->
        <div v-if="packageData.expireDate" class="expire-info">
          <el-icon><Clock /></el-icon>
          <span>有效期至: {{ packageData.expireDate }}</span>
        </div>

        <!-- 温馨提示 -->
        <el-alert
          class="tips-alert"
          type="info"
          :closable="false"
          show-icon
        >
          <template #title>
            <div class="tips-content">
              <p>温馨提示：</p>
              <ul>
                <li>Token额度根据不同模型消耗速率不同</li>
                <li>建议合理使用，避免额度过快消耗</li>
                <li>额度不足时请及时充值，避免影响使用</li>
              </ul>
            </div>
          </template>
        </el-alert>
      </div>
    </el-card>

    <!-- Token用量占比卡片 -->
    <el-card v-loading="tokenUsageLoading" class="package-card token-usage-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="card-header-left">
            <el-icon class="header-icon token-icon">
              <i-ep-pie-chart />
            </el-icon>
            <div class="header-text">
              <span class="header-title">各API密钥用量占比</span>
              <span class="header-subtitle">Premium APIKEY Usage Distribution</span>
            </div>
          </div>
        </div>
      </template>

      <div class="token-usage-content">
        <div class="chart-container-wrapper">
          <div ref="tokenPieChart" class="token-pie-chart" />
        </div>

        <!-- Token统计列表 -->
        <div v-if="tokenUsageData.length > 0" class="token-stats-list">
          <div
            v-for="(item, index) in tokenUsageData"
            :key="item.tokenId"
            class="token-stat-item"
          >
            <div class="token-stat-header">
              <div class="token-rank">
                <span class="rank-badge" :class="`rank-${index + 1}`">#{{ index + 1 }}</span>
              </div>
              <div class="token-name">
                <el-icon><i-ep-key /></el-icon>
                <span>{{ item.tokenName }}</span>
              </div>
            </div>
            <div class="token-stat-data">
              <div class="stat-tokens">
                <span class="label">用量:</span>
                <span class="value">{{ item.tokens.toLocaleString() }}</span>
                <span class="unit">tokens</span>
              </div>
              <div class="stat-percentage">
                <el-progress
                  :percentage="item.percentage"
                  :color="getTokenColor(index)"
                  :stroke-width="8"
                  :show-text="true"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <el-empty
          v-else
          description="暂无Token使用数据"
          class="token-empty-state"
          :image-size="120"
        >
          <template #image>
            <div class="custom-empty-image">
              <el-icon class="empty-main-icon">
                <i-ep-pie-chart />
              </el-icon>
              <div class="empty-decoration">
                <div class="decoration-circle" />
                <div class="decoration-circle" />
                <div class="decoration-circle" />
              </div>
            </div>
          </template>
          <template #description>
            <div class="empty-description">
              <h3 class="empty-title">
                暂无Token使用数据
              </h3>
              <p class="empty-text">
                当您开始使用Token后，这里将展示各Token的用量占比统计
              </p>
              <div class="empty-tips">
                <el-icon><i-ep-info-filled /></el-icon>
                <span>创建并使用Token后即可查看详细的用量分析</span>
              </div>
            </div>
          </template>
        </el-empty>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.premium-package-info {
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;
}

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

.header-main-icon {
  font-size: 36px;
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sub-title {
  margin: 0;
  font-size: 13px;
  color: #909399;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 套餐卡片 */
.package-card {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f2f5;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
    border-color: #667eea;
  }

  :deep(.el-card__header) {
    background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
    border-bottom: 2px solid #f0f2f5;
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.header-icon {
  font-size: 24px;
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 8px;
  border-radius: 8px;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.header-subtitle {
  font-size: 13px;
  color: #909399;
}

.package-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 统计数据网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.stat-item:hover {
  transform: translateY(-4px);
}

.stat-item.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-item.used {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-item.remaining {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-unit {
  font-size: 12px;
  opacity: 0.8;
}

.stat-raw {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
  cursor: help;
  transition: opacity 0.2s;
}

.stat-raw:hover {
  opacity: 1;
}

/* 进度条部分 */
.progress-section {
  padding: 20px;
  background: #f7f8fa;
  border-radius: 8px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.progress-percent {
  font-size: 20px;
  font-weight: 700;
}

.progress-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.used-dot {
  background: #409eff;
}

.legend-text {
  font-size: 14px;
  color: #606266;
}

/* 过期信息 */
.expire-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f0f9ff;
  border-radius: 6px;
  color: #0369a1;
  font-size: 14px;
}

/* 温馨提示 */
.tips-alert {
  border-radius: 8px;
}

.tips-content p {
  margin: 0 0 8px 0;
  font-weight: 600;
}

.tips-content ul {
  margin: 0;
  padding-left: 20px;
}

.tips-content li {
  margin: 4px 0;
  font-size: 13px;
}

/* Token用量占比卡片 */
.token-usage-card {
  margin-top: 24px;
}

.token-icon {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0284c7;
}

.token-usage-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chart-container-wrapper {
  width: 100%;
  background: linear-gradient(135deg, #fafbfc 0%, #f5f6f8 100%);
  border-radius: 12px;
  padding: 20px;
}

.token-pie-chart {
  width: 100%;
  height: 400px;
}

/* Token统计列表 */
.token-stats-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.token-stat-item {
  padding: 16px;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #f0f2f5;
  transition: all 0.3s;

  &:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
  }
}

.token-stat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.token-rank {
  flex-shrink: 0;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  &.rank-1 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }

  &.rank-2 {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  }

  &.rank-3 {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  }
}

.token-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;

  .el-icon {
    color: #667eea;
    font-size: 18px;
  }
}

.token-stat-data {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-tokens {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;

  .label {
    color: #909399;
  }

  .value {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
  }

  .unit {
    color: #909399;
    font-size: 12px;
  }
}

.stat-percentage {
  :deep(.el-progress__text) {
    font-size: 14px !important;
    font-weight: 700;
  }
}

/* 空状态 */
.token-empty-state {
  padding: 60px 20px;

  :deep(.el-empty__image) {
    width: auto;
  }
}

.custom-empty-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.empty-main-icon {
  font-size: 80px;
  color: #667eea;
  position: relative;
  z-index: 2;
  animation: float 3s ease-in-out infinite;
}

.empty-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);

  &:nth-child(1) {
    width: 60px;
    height: 60px;
    top: 10%;
    left: 10%;
    animation: pulse 2s ease-in-out infinite;
  }

  &:nth-child(2) {
    width: 40px;
    height: 40px;
    bottom: 20%;
    right: 15%;
    animation: pulse 2s ease-in-out infinite 0.5s;
  }

  &:nth-child(3) {
    width: 30px;
    height: 30px;
    top: 60%;
    right: 5%;
    animation: pulse 2s ease-in-out infinite 1s;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.empty-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.empty-text {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  max-width: 360px;
}

.empty-tips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border-radius: 8px;
  font-size: 13px;
  color: #667eea;
  margin-top: 8px;

  .el-icon {
    font-size: 16px;
    flex-shrink: 0;
  }
}

/* 警告卡片 */
.warning-card {
  border-radius: 12px;
  border: 2px solid #e6a23c;
  background: #fef3e9;
}

.warning-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.warning-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.warning-text {
  flex: 1;
}

.warning-text h3 {
  margin: 0 0 8px 0;
  color: #e6a23c;
  font-size: 18px;
}

.warning-text p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .premium-package-info {
    padding: 0;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }

  .header-left {
    gap: 12px;
  }

  .header-main-icon {
    font-size: 28px;
    padding: 10px;
  }

  .main-title {
    font-size: 20px;
  }

  .sub-title {
    font-size: 12px;
  }

  .header .el-button {
    width: 100%;
  }

  .package-card {
    border-radius: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-item {
    padding: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 13px;
  }

  .progress-section {
    padding: 16px;
  }

  .progress-label {
    font-size: 14px;
  }

  .progress-percent {
    font-size: 18px;
  }

  .progress-legend {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .warning-content {
    flex-direction: column;
    text-align: center;
  }

  .warning-icon {
    font-size: 32px;
  }

  .warning-text h3 {
    font-size: 16px;
  }

  .warning-text p {
    font-size: 13px;
  }

  .card-header-left {
    gap: 10px;
  }

  .header-icon {
    font-size: 20px;
    padding: 6px;
  }

  .header-title {
    font-size: 16px;
  }

  .header-subtitle {
    font-size: 12px;
  }

  .token-pie-chart {
    height: 300px;
  }

  .chart-container-wrapper {
    padding: 12px;
  }

  .token-stat-item {
    padding: 12px;
  }

  .token-name {
    font-size: 14px;
  }

  .stat-tokens .value {
    font-size: 18px;
  }

  .tips-content li {
    font-size: 12px;
  }

  .token-usage-card {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .header-main-icon {
    font-size: 24px;
    padding: 8px;
  }

  .main-title {
    font-size: 18px;
  }

  .stat-item {
    padding: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .header-title {
    font-size: 15px;
  }

  .token-pie-chart {
    height: 280px;
  }

  .rank-badge {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}
</style>
