.member-pro { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 60px; height: 20px; padding: 2px 6px; box-sizing: border-box; border-radius: 999px; background: var(--ludio-surface-raised); font-size: 11px; line-height: 16px; font-weight: 750; direction: ltr; }
.member-pro > .ui-icon { flex: none; width: 14px; height: 14px; }
.member-avatar {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
/* Keep intrinsic portrait dimensions out of the outer avatar's grid sizing;
   crop only the photo so the sibling PRO badge can extend beyond the circle. */
.member-avatar__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}
.member-avatar__image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.member-avatar > .member-pro {
  position: absolute;
  width: 60px;
  max-width: 100%;
  inset-inline: 0;
  bottom: -1px;
  margin-inline: auto;
}
.member-avatar--compact > .member-pro {
  width: clamp(30px, 100%, 44px);
  max-width: none;
  height: 14px;
  padding: 1px 3px;
  gap: 1px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: -4px;
  font-size: 8px;
  line-height: 12px;
}
.member-avatar--compact > .member-pro > .ui-icon { width: 9px; height: 9px; }
@media (forced-colors: active) {
  .member-pro { background: Canvas; }
  .member-pro > .ui-icon { stroke: CanvasText; }
}