.ds-card {
    background: var(--surface-card);
    border: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.ds-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* THIS is missing */
}

/* Stat / metric card */
.ds-stat-card {
    background: var(--surface-card);
    border: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 20px 18px 18px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ds-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--ds-indigo-border);
}
.ds-stat-card__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
    color: var(--color-heading);
}
.ds-stat-card__label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stat card color modifiers */
.ds-stat-card--green { border-top: 3px solid var(--color-green); }
.ds-stat-card--green .ds-stat-card__value { color: var(--color-green); }
.ds-stat-card--green::before { background: var(--color-green-light); }

.ds-stat-card--red { border-top: 3px solid var(--color-red); }
.ds-stat-card--red .ds-stat-card__value { color: var(--color-red); }
.ds-stat-card--red::before { background: var(--color-red-light); }

.ds-stat-card--blue { border-top: 3px solid var(--ds-indigo); }
.ds-stat-card--blue .ds-stat-card__value { color: var(--ds-indigo); }
.ds-stat-card--blue::before { background: var(--ds-indigo-light); }

.ds-stat-card--amber { border-top: 3px solid var(--color-amber); }
.ds-stat-card--amber .ds-stat-card__value { color: var(--color-amber); }
.ds-stat-card--amber::before { background: var(--color-amber-light); }

/* Corner tint blob shared by colored stat cards */
.ds-stat-card--green::before,
.ds-stat-card--red::before,
.ds-stat-card--blue::before,
.ds-stat-card--amber::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    border-radius: 0 0 0 80px;
    pointer-events: none;
}


/* ╔══════════════════════════════════════════════════════════
   ║  ICON CHIP
   ╚══════════════════════════════════════════════════════════ */

.ds-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    border: var(--border);
    flex-shrink: 0;
    font-size: 16px;
}
.ds-icon-chip--lg {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
}
.ds-icon-chip--accent {
    background: var(--ds-indigo-light);
    border-color: var(--ds-indigo-border);
}


/* ╔══════════════════════════════════════════════════════════
   ║  STAT CARDS GRID
   ╚══════════════════════════════════════════════════════════ */

.ds-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.ds-stat-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}