.avatar-frame-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.avatar-frame-wrapper .frame-ring {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    pointer-events: none;
    box-sizing: border-box;
}
.avatar-frame-wrapper img {
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px; cursor: pointer;
    border: 2px solid #667eea; object-fit: cover;
    transition: transform 0.2s;
}
.user-avatar:hover { transform: scale(1.1); }
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.nav-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s;
}
.nav-avatar:hover { border-color: #fe2c55; }