.jl-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.jl-stat--plain { background: transparent; border: none; padding: 0; }
.jl-stat__top { display: flex; align-items: center; gap: var(--space-3); }
.jl-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}
.jl-stat__icon {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
  color: var(--text-brand);
}
.jl-stat__icon svg { width: 17px; height: 17px; }
.jl-stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--heading-tracking);
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.jl-stat--sm .jl-stat__value { font-size: var(--text-2xl); }
.jl-stat__foot { display: flex; align-items: center; gap: var(--space-2); }
.jl-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.jl-stat__delta svg { width: 14px; height: 14px; }
.jl-stat__delta--positive { color: var(--success-text); }
.jl-stat__delta--negative { color: var(--danger-text); }
.jl-stat__delta--neutral  { color: var(--text-tertiary); }
.jl-stat__caption { font-size: var(--text-sm); color: var(--text-tertiary); }

.jl-stat-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}