/* 头像尺寸是组件内部的比例关系，用局部变量集中声明（不往全局令牌里塞） */
.root {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 裁切层：图片 / 字符块都在这里被圆角裁掉，角标画在它外面 */
.media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--su-bg-light);
  color: var(--su-text-sub);
}

.circle {
  border-radius: var(--su-radius-pill);
}

.square {
  border-radius: var(--su-radius-sm);
}

.sm {
  --avatar-size: 24px;
  --avatar-badge: 12px;

  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: var(--su-font-size-sm);
}

.md {
  --avatar-size: 36px;
  --avatar-badge: 16px;

  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: var(--su-font-size-md);
}

.lg {
  --avatar-size: 48px;
  --avatar-badge: 20px;

  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: var(--su-font-size-lg);
}

/* 资料卡 / 详情页的大头像 */
.xl {
  --avatar-size: 64px;
  --avatar-badge: 20px;

  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: 24px;
}

/* 无图时的品牌底色：浅色渐变 + 主色字，比纯灰更有识别度 */
.primary .media {
  background: var(--su-avatar-gradient);
  color: var(--su-color-primary);
}

/* 图标占位：尺寸跟随字体，颜色跟随 tone */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  line-height: 1;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fallback {
  font-weight: var(--su-font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

/* 认证角标：橙底白勾，盖在头像右下角，带一圈与卡片同色的描边 */
.verified {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: var(--avatar-badge);
  height: var(--avatar-badge);
  border: 2px solid var(--su-bg-card);
  border-radius: var(--su-radius-pill);
  background: var(--su-color-warning);
  color: var(--su-white);
  font-size: calc(var(--avatar-badge) * 0.55);
  font-weight: var(--su-font-weight-strong);
  line-height: 1;
}