.mf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mf-radius-full);
    background: var(--mf-primary-subtle);
    color: var(--mf-primary);
    font-weight: 600;
    flex: 0 0 auto;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
}

.mf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mf-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.mf-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.mf-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.mf-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.mf-avatar--xl { width: 64px; height: 64px; font-size: 20px; }

/* Deterministic palette — assigned via JS by hashing email -> index 0..5 */
.mf-avatar--c0 { background: #EEF2FF; color: #4F46E5; }
.mf-avatar--c1 { background: #ECFDF5; color: #10B981; }
.mf-avatar--c2 { background: #FEF3C7; color: #B45309; }
.mf-avatar--c3 { background: #FEE2E2; color: #B91C1C; }
.mf-avatar--c4 { background: #DBEAFE; color: #1D4ED8; }
.mf-avatar--c5 { background: #F3E8FF; color: #7E22CE; }

[data-bs-theme="dark"] .mf-avatar--c0 { background: #1E1B4B; color: #A5B4FC; }
[data-bs-theme="dark"] .mf-avatar--c1 { background: #064E3B; color: #6EE7B7; }
[data-bs-theme="dark"] .mf-avatar--c2 { background: #78350F; color: #FCD34D; }
[data-bs-theme="dark"] .mf-avatar--c3 { background: #7F1D1D; color: #FCA5A5; }
[data-bs-theme="dark"] .mf-avatar--c4 { background: #1E3A8A; color: #93C5FD; }
[data-bs-theme="dark"] .mf-avatar--c5 { background: #581C87; color: #D8B4FE; }

.mf-avatar-group {
    display: inline-flex;
}
.mf-avatar-group .mf-avatar {
    margin-left: -8px;
    border: 2px solid var(--mf-bg);
}
.mf-avatar-group .mf-avatar:first-child { margin-left: 0; }