.affinity-badge{
  --ab-bg:linear-gradient(145deg,#6f7278,#262a31 54%,#878b91);
  --ab-edge:#a8abb0;--ab-ink:#f5f5f3;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:5px;min-width:68px;height:27px;padding:0 10px;border:1px solid var(--ab-edge);
  border-radius:8px 8px 11px 11px;background:var(--ab-bg);color:var(--ab-ink);
  font-family:'Noto Serif SC',serif;font-size:12px;font-weight:800;letter-spacing:.08em;
  line-height:1;white-space:nowrap;overflow:hidden;
  box-shadow:inset 0 1px rgba(255,255,255,.46),inset 0 -2px rgba(0,0,0,.25),0 4px 10px rgba(29,20,47,.22);
}
.affinity-badge::before{content:'◆';font-size:8px;opacity:.88;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.affinity-badge[data-metal="copper"]{--ab-bg:linear-gradient(145deg,#f2b884,#8e4c28 52%,#d7854d);--ab-edge:#f2c19b;--ab-ink:#fff8eb}
.affinity-badge[data-metal="silver"]{--ab-bg:linear-gradient(145deg,#f7f9fd,#7e899a 48%,#dbe1e9 74%,#667181);--ab-edge:#fff;--ab-ink:#303846;text-shadow:0 1px rgba(255,255,255,.6)}
.affinity-badge[data-metal="gold"]{--ab-bg:linear-gradient(145deg,#fff0a5,#b87808 47%,#f5c84a 70%,#8d5900);--ab-edge:#fff1a1;--ab-ink:#5a3500;text-shadow:0 1px rgba(255,255,255,.45);box-shadow:inset 0 1px rgba(255,255,255,.72),inset 0 -2px rgba(105,58,0,.32),0 4px 13px rgba(190,125,10,.32)}
.affinity-badge.is-shiny::after{
  content:'';position:absolute;z-index:-1;top:-45%;bottom:-45%;left:-45%;width:22%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
  transform:skewX(-18deg);animation:affinityBadgeShine 4.8s cubic-bezier(.2,.65,.2,1) infinite;
}
@keyframes affinityBadgeShine{0%,62%{left:-45%;opacity:0}66%{opacity:.9}82%{left:125%;opacity:.55}83%,100%{left:125%;opacity:0}}
#top-affinity-badge{position:absolute;z-index:8;right:-34px;bottom:-7px;transform:scale(.72);transform-origin:left center;pointer-events:none}
.pc-affinity-row{margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-affinity-row .affinity-badge{height:30px;min-width:78px;font-size:13px;padding:0 12px}
.pc-affinity-caption{font-size:11px;color:var(--t3)}
/* 侧边栏等级牌：与“个人中心”保持相同宽高，金属外观由真实卦缘等级驱动。 */
.drw-affinity-level{
  --dal-bg:linear-gradient(145deg,#6f7278,#262a31 54%,#878b91);--dal-edge:#a8abb0;--dal-ink:#f5f5f3;
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  width:90%;height:40px;margin:1px auto 0;padding:0 13px;border:1.5px solid var(--dal-edge);border-radius:50px;
  display:flex;align-items:center;justify-content:center;gap:6px;background:var(--dal-bg);color:var(--dal-ink);
  font-family:'Noto Serif SC',serif;font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1;
  box-shadow:inset 0 1px rgba(255,255,255,.48),inset 0 -3px rgba(0,0,0,.25),0 4px 12px rgba(16,7,39,.30);
}
.drw-affinity-level::after{content:'';position:absolute;z-index:-1;top:-60%;bottom:-60%;left:-42%;width:18%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);animation:drawerAffinityShine 5.2s cubic-bezier(.2,.65,.2,1) infinite}
.drw-affinity-level[data-metal="iron"]{--dal-bg:linear-gradient(145deg,#767b82,#252a31 54%,#959aa1);--dal-edge:#c0c3c8;--dal-ink:#fff}
.drw-affinity-level[data-metal="copper"]{--dal-bg:linear-gradient(145deg,#f6c18d,#8e4926 54%,#d48149);--dal-edge:#ffd0a6;--dal-ink:#fff9ed}
.drw-affinity-level[data-metal="silver"]{--dal-bg:linear-gradient(145deg,#fff,#909bab 47%,#e4e9f1 72%,#6f7887);--dal-edge:#fff;--dal-ink:#2b3340;text-shadow:0 1px rgba(255,255,255,.7)}
.drw-affinity-level[data-metal="gold"]{--dal-bg:linear-gradient(145deg,#fff4af,#b67508 47%,#f6cc52 72%,#895400);--dal-edge:#fff0a0;--dal-ink:#553000;text-shadow:0 1px rgba(255,255,255,.65);box-shadow:inset 0 1px rgba(255,255,255,.75),inset 0 -3px rgba(105,58,0,.3),0 4px 15px rgba(201,135,14,.44)}
.drw-affinity-level .dal-title{font-size:10px;opacity:.88;white-space:nowrap}.drw-affinity-level .dal-name{font-size:15px;letter-spacing:.12em;white-space:nowrap}.drw-affinity-level .dal-metal{font-size:10px;opacity:.9;white-space:nowrap}
@keyframes drawerAffinityShine{0%,62%{left:-42%;opacity:0}66%{opacity:.92}82%{left:125%;opacity:.52}83%,100%{left:125%;opacity:0}}
@media(prefers-reduced-motion:reduce){.affinity-badge.is-shiny::after{animation:none;display:none}}
@media(prefers-reduced-motion:reduce){.drw-affinity-level::after{animation:none;display:none}}