/* Extracted from index.css L1090-L1144: Stat cards */

/* ===== STAT CARDS ===== */
.stats-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 0.85rem; 
  margin-bottom: 1.25rem; 
}
.stat-card { 
  background: rgba(10, 14, 28, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius); 
  padding: 1.25rem 1.35rem; 
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 3px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmer 4s ease-in-out infinite;
}
.stat-card:hover { 
  background: rgba(14, 20, 38, 0.62);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
}
.stat-card.income { border-left-color: var(--accent-green); }
.stat-card.expense { border-left-color: var(--accent-orange); }
.stat-card.balance { border-left-color: var(--accent-green); }
.stat-label { 
  font-size: 0.65rem; 
  color: var(--text-muted);
  text-transform: uppercase; 
  letter-spacing: 0.1em; 
  margin-bottom: 0.4rem; 
  font-weight: 700; 
}
.stat-value { 
  font-size: 1.5rem; 
  font-weight: 800; 
  color: var(--text-primary);
  letter-spacing: -0.03em;
}
.stat-change { font-size: 0.75rem; margin-top: 0.35rem; }
.stat-change.positive { color: var(--accent-green); }
.stat-change.negative { color: var(--accent-red); }