/* =====================
   Avatar System (SINGLE)
   - 统一全站头像：圆角方形
   - 只保留一套规则，避免互相覆盖
   ===================== */
:root{
  --av-ring: rgba(59,130,246,.45);
  --av-bg: rgba(255,255,255,.06);
  --av-bd: rgba(255,255,255,.12);

  --av-xs: 22px;   /* 顶部导航 */
  --av-side: 34px; /* 侧边栏 */
  --av-sm: 40px;   /* 楼层/私信 */
  --av-lg: 96px;   /* 个人资料 */
  --av-xl: 110px;  /* 设置页预览 */

  --av-radius-xs: 8px;
  --av-radius-sm: 12px;
  --av-radius-lg: 18px;

  --preset-scale: 1.22; /* 预置头像素材自带内圈时，用放大裁切去掉内圈 */
}

/* Base container */
.avatar{
  --av: var(--av-sm);
  --av-radius: var(--av-radius-sm);
  --av-ring-w: 3px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--av);
  height:var(--av);
  border-radius:var(--av-radius);
  overflow:hidden;

  background:var(--av-bg);
  border:1px solid var(--av-bd);
  box-shadow:0 0 0 var(--av-ring-w) var(--av-ring);
}

.avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Sizes */
.avatar-nav{ --av: var(--av-xs); --av-radius: var(--av-radius-xs); --av-ring-w: 2px; }
.avatar-side{ --av: var(--av-side); --av-radius: 10px; }
.avatar-sm{ --av: var(--av-sm); --av-radius: var(--av-radius-sm); }
.avatar-lg{ --av: var(--av-lg); --av-radius: var(--av-radius-lg); }
.avatar-xl{ --av: var(--av-xl); --av-radius: var(--av-radius-lg); }

/* Text fallback */
.avatar-fallback{
  font-weight:800;
  color:rgba(255,255,255,.86);
  line-height:1;
  font-size:14px;
}
.avatar-nav.avatar-fallback{ font-size:10px; }
.avatar-side.avatar-fallback{ font-size:12px; }
.avatar-lg.avatar-fallback{ font-size:20px; }

/* ===== TL Avatar Ring Colors ===== */
.tl-ring-0 { --av-ring: rgba(148,163,184,.3); }
.tl-ring-1 { --av-ring: rgba(148,163,184,.4); }
.tl-ring-2 { --av-ring: rgba(96,165,250,.5); }
.tl-ring-3 { --av-ring: rgba(59,130,246,.6); }
.tl-ring-4 { --av-ring: rgba(99,102,241,.6); }
.tl-ring-5 { --av-ring: rgba(168,85,247,.6); }
.tl-ring-6 { --av-ring: rgba(236,72,153,.6); }
.tl-ring-7 { --av-ring: rgba(245,158,11,.65); }
.tl-ring-8 { --av-ring: rgba(245,158,11,.8); --av-ring-w:3px; }
.tl-ring-9 { --av-ring: rgba(234,179,8,.85); --av-ring-w:3px; }
.tl-ring-10{ --av-ring: rgba(234,179,8,1); --av-ring-w:4px; box-shadow:0 0 0 4px rgba(234,179,8,1), 0 0 12px rgba(234,179,8,.3); }