/* ============================================================
   STATUS BADGE (in the app header)
   ============================================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-weight: 500;
}
.status-badge.valid {
    background: var(--color-success-hi);
    color: var(--color-success);
}
.status-badge.invalid {
    background: oklch(from var(--color-danger) l c h / 0.15);
    color: var(--color-danger);
}
.status-badge.empty {
    color: var(--color-text-faint);
    background: transparent;
}
.status-badge.optimizing {
    color: var(--color-primary);
    background: --tint(var(--color-primary), 0.12);
}