/* ========================================
   头像卡片组件样式（含抖动+放大+主题色跟随）
   ======================================== */

/* ---------- 抖动关键帧 ---------- */


/* ---------- 卡片容器 ---------- */

.avatar-card {
  padding: 15px 0;
  border-radius: 12px;
  transition: all 0.2s ease;
  background: transparent;

}
.av-flex-column{
      display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* 卡片悬停：上浮 + 阴影 */
.avatar-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}


/* 卡片悬停时：头像触发抖动+放大（播放一次，停在放大状态） */
.avatar-card:hover .avatarimg {
  animation:  0.6s ease-in-out 1 forwards;
}

/* ---------- 用户昵称 ---------- */
.user-name {
  /* 默认颜色（固定，回退值） */
  color: rgba(229, 231, 235, 0.95);
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* 添加过渡，让颜色切换平滑 */
  transition: color 0.2s ease;
}

/* 卡片悬停时：文字颜色跟随系统主题 */
.avatar-card:hover .user-name {
  color: #ffc107;  /* 系统默认文本色（浅色模式黑，深色模式白） */
}

/* ---------- Flex 网格项 ---------- */
.avatar-item {
  flex: 0 0 14.2857%; /* 默认回退值 */
  max-width: 14.2857%;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/* ---------- 辅助工具类 ---------- */
.mt-10 {
  margin-top: 10px;
}
.avatarimg{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-title{
   width: 100%;
display: flex;
  align-items: center;
  justify-content: center;
}
/* ========================================
   响应式调整
   ======================================== */

/* ---------- 手机（< 576px） ---------- */
@media (max-width: 575.98px) {

  .avatar-item {
    flex: 0 0 25%;   /* 一行 4 个 */
    max-width: 25%;
  }
}

/* ---------- 小屏平板（576 ~ 767px） ---------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .avatar-item {
    flex: 0 0 33.3333%; /* 一行 3 个 */
    max-width: 33.3333%;
  }
}

/* ---------- 平板（768 ~ 991px） ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .avatar-item {
    flex: 0 0 25%;   /* 一行 4 个 */
    max-width: 25%;
  }
}

/* ---------- 中等桌面（992 ~ 1199px） ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .avatar-item {
    flex: 0 0 20%;   /* 一行 5 个 */
    max-width: 20%;
  }
}

/* ---------- 大桌面（≥ 1200px） ---------- */
@media (min-width: 1200px) {
  .avatar-item {
    flex: 0 0 16.6667%; /* 一行 6 个 = 100% / 6 */
    max-width: 16.6667%;
  }
}