अवतार

.dc-avatar-row {
  display: flex; align-items: center; gap: var(--dc-3);
  font-family: var(--dc-font);
}
.dc-avatar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
  font-family: var(--dc-font); font-size: 15px; font-weight: 700; line-height: 1;
  overflow: hidden; user-select: none;
}
.dc-avatar--muted { background: var(--dc-sunken); color: var(--dc-text-sub); }
.dc-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.dc-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.dc-avatar__name {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--dc-text-mute);
}
.dc-avatar__name strong { font-size: 14px; color: var(--dc-text); }
.dc-avatar-group { display: flex; align-items: center; padding-left: 10px; }
.dc-avatar-group .dc-avatar {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar-wrap { position: relative; display: inline-block; }
.dc-avatar__status {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: var(--dc-r-full);
  background: var(--dc-ok);
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar__status--off { background: var(--dc-text-mute); }