style(usage): simplify overview statistic cards

- remove decorative icons from the overview cards
- remove unused card tone styles
- simplify statistic card header layout

src/pages/UsageRecordsPage.tsx

@@ -23,7 +23,6 @@ import {
   Trash2,
   TriangleAlert,
   X,
-  Zap,
 } from 'lucide-react';
 import { getCurrentLocale, useI18n } from '../i18n';
 import type { MessageKey } from '../i18n/resources';
@@ -686,8 +685,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) {
   const { t } = useI18n();
   const cards = [
     {
-      icon: Activity,
-      tone: 'tone-blue',
       label: t('usage.stat.requests'),
       value: compactNumber(overview.totalRequests),
       meta: t('usage.stat.requestMeta', {
@@ -697,8 +694,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) {
       }),
     },
     {
-      icon: Sparkles,
-      tone: 'tone-purple',
       label: t('usage.stat.tokens'),
       value: compactNumber(overview.totalTokens),
       meta: t('usage.stat.tokenMeta', {
@@ -707,15 +702,11 @@ function OverviewView({ overview }: { overview: UsageOverview }) {
       }),
     },
     {
-      icon: ShieldCheck,
-      tone: 'tone-green',
       label: t('usage.stat.successRate'),
       value: `${overview.successRate.toFixed(1)}%`,
       meta: t('usage.stat.reasoningMeta', { tokens: compactNumber(overview.reasoningTokens) }),
     },
     {
-      icon: Zap,
-      tone: 'tone-orange',
       label: t('usage.stat.tps'),
       value: `${overview.tps.toFixed(1)} TPS`,
       meta: t('usage.stat.performanceMeta', {
@@ -724,8 +715,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) {
       }),
     },
     {
-      icon: Database,
-      tone: 'tone-teal',
       label: t('usage.stat.cacheHitRate'),
       value: `${(overview.cacheHitRate * 100).toFixed(1)}%`,
       meta: t('usage.stat.cacheHitMeta', {
@@ -734,8 +723,6 @@ function OverviewView({ overview }: { overview: UsageOverview }) {
       }),
     },
     {
-      icon: CircleDollarSign,
-      tone: 'tone-amber',
       label: t('usage.stat.estimatedCost'),
       value: formatUsd(overview.estimatedCost),
       meta: t('usage.stat.costMeta', {
@@ -748,14 +735,9 @@ function OverviewView({ overview }: { overview: UsageOverview }) {
   return (
     <div className="usage-overview-layout">
       <div className="usage-stat-grid">
-        {cards.map(({ icon: Icon, tone, label, value, meta }) => (
-          <article className={`panel usage-stat-card ${tone}`} key={label}>
-            <div className="usage-stat-card-top">
-              <span className="usage-stat-card-label">{label}</span>
-              <div className="usage-stat-card-icon">
-                <Icon size={16} />
-              </div>
-            </div>
+        {cards.map(({ label, value, meta }) => (
+          <article className="panel usage-stat-card" key={label}>
+            <span className="usage-stat-card-label">{label}</span>
             <strong className="usage-stat-card-value">{value}</strong>
             <small className="usage-stat-card-meta" title={meta}>
               {meta}

src/styles.css

@@ -6907,58 +6907,12 @@ textarea:focus-visible {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-.usage-stat-card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
 .usage-stat-card-label {
   color: var(--theme-7a746c);
   font-size: var(--font-size-caption);
   font-weight: 600;
 }
 
-.usage-stat-card-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-}
-
-.usage-stat-card.tone-blue .usage-stat-card-icon {
-  background: rgba(59, 130, 246, 0.12);
-  color: #2563eb;
-}
-
-.usage-stat-card.tone-purple .usage-stat-card-icon {
-  background: rgba(139, 92, 246, 0.12);
-  color: #7c3aed;
-}
-
-.usage-stat-card.tone-green .usage-stat-card-icon {
-  background: rgba(16, 185, 129, 0.12);
-  color: #059669;
-}
-
-.usage-stat-card.tone-orange .usage-stat-card-icon {
-  background: rgba(249, 115, 22, 0.12);
-  color: #ea580c;
-}
-
-.usage-stat-card.tone-teal .usage-stat-card-icon {
-  background: rgba(20, 184, 166, 0.12);
-  color: #0d9488;
-}
-
-.usage-stat-card.tone-amber .usage-stat-card-icon {
-  background: rgba(245, 158, 11, 0.12);
-  color: #d97706;
-}
-
 .usage-stat-card-value {
   color: var(--theme-2d2a26);
   font-size: 22px;