.user-avatar {
    --frame: linear-gradient(135deg, #e7b788, #9a5836, #f4d3ae);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 3px;
    border-radius: 50%;
    background: var(--frame);
    vertical-align: middle;
}
.user-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #292524;
    color: #fafaf9;
    font-size: .875rem;
    font-weight: 700;
}
.user-avatar-large { width: 4rem; height: 4rem; padding: 4px; }
.user-avatar-large .user-avatar-initial { font-size: 1.5rem; }
.avatar-frame-silver { --frame: linear-gradient(135deg, #f8fafc, #64748b, #e2e8f0); box-shadow: 0 0 0 2px #e2e8f0; }
.avatar-frame-gold { --frame: linear-gradient(135deg, #fef08a, #ca8a04, #fde68a); box-shadow: 0 0 0 2px #fef3c7, 0 0 8px #fbbf2466; }
.avatar-frame-emerald { --frame: conic-gradient(#a7f3d0, #047857, #34d399, #064e3b, #a7f3d0); box-shadow: 0 0 0 2px #d1fae5, 0 0 0 4px #059669, 0 0 12px #34d39955; }
.avatar-frame-diamond { --frame: conic-gradient(#e0f2fe, #0284c7, #a5f3fc, #7c3aed, #e0f2fe); box-shadow: 0 0 0 2px #e0f2fe, 0 0 0 4px #38bdf8, 0 0 14px #38bdf877; }
.avatar-frame-legend { --frame: conic-gradient(#fde68a, #d97706, #c084fc, #7c3aed, #fde68a); box-shadow: 0 0 0 2px #fef3c7, 0 0 0 4px #a855f7, 0 0 18px #a855f799; }