.user-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 2px solid rgba(109, 40, 217, .18);
    border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe, #dbeafe);
    color: #6d28d9;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    vertical-align: middle;
}

img.user-avatar { object-position: center; }
.user-avatar--sm { width: 38px; height: 38px; font-size: .85rem; }
.user-avatar--md { width: 52px; height: 52px; font-size: 1rem; }
.user-avatar--lg { width: 76px; height: 76px; font-size: 1.5rem; border-width: 3px; }
.user-avatar--xl { width: 112px; height: 112px; font-size: 2.25rem; border-width: 4px; }

body.dark-mode .user-avatar {
    border-color: rgba(167, 139, 250, .5);
    background: linear-gradient(135deg, #4c1d95, #1e3a8a);
    color: #ede9fe;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}