<div class="stat-card">
  <div class="stat-header">
    <span class="stat-label">Total Revenue</span>
    <span class="stat-icon">💰</span>
  </div>
  <div class="stat-value">$48,295</div>
  <div class="stat-trend positive">
    <span>↑ 12.5%</span>
    <span class="stat-trend-label">vs last month</span>
  </div>
  <div class="stat-bar">
    <div class="stat-bar-fill" style="width: 72%"></div>
  </div>
</div>

<style>
.stat-card {
  border: 1px solid var(--border); border-radius: 1rem;
  padding: 1.5rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.stat-header { display: flex; justify-content: space-between; align-items: center; }
.stat-label { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.stat-icon { font-size: 1.25rem; }
.stat-value { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; }
.stat-trend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; }
.stat-trend.positive { color: #16A34A; }
.stat-trend.negative { color: #DC2626; }
.stat-trend-label { color: var(--muted); font-weight: 400; }
.stat-bar { height: 4px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--accent); border-radius: 9999px; }
</style>