/* 头像框：试戴舞台商城 + 衣柜（与勋章墙差异化）
 * --af-face = 头像在框图中的占比（默认 0.70，方形厚边框更稳；可由插件配置覆盖）
 */
:root{ --af-face: 0.85 !important; }

/* ---- 共用预览叠层 ---- */
.af-preview-stack{
  --af-inset: calc((1 - var(--af-face)) / 2 * 100%);
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  overflow: visible;
}
.af-preview-stack .base,
.af-preview-stack .af-base{
  position: absolute;
  left: var(--af-inset);
  top: var(--af-inset);
  width: calc(var(--af-face) * 100%);
  height: calc(var(--af-face) * 100%);
  border-radius: 50%;
  object-fit: cover;
  border: 0;
  background: var(--chip, #ececec);
}
.af-preview-stack .frame,
.af-preview-stack .af-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* ---- 商城布局（对齐任务中心 / 勋章墙） ---- */
.plaza-main.af-layout{
  --plaza-aside-w: 20%;
  grid-template-columns: minmax(0, 1fr) var(--plaza-aside-w);
  gap:20px;
  align-items:start;
}
html.layout-triple .plaza-main.af-layout:has(> .plaza-left),
html.layout-triple .plaza-main.af-layout > .plaza-left{
  display:none!important;
}
.plaza-main.af-layout > .af-feed,
.plaza-main.af-layout > .plaza-feed{
  min-width:0;
  gap:16px;
}
.plaza-main.af-layout > .plaza-aside{
  min-width:0;
}
.af-layout--wardrobe{
  grid-template-columns:minmax(0,1fr);
}

/* 页头 */
.af-head{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(
    165deg,
    color-mix(in srgb,var(--accent) 14%,var(--card)) 0%,
    color-mix(in srgb,var(--accent) 5%,var(--card)) 42%,
    color-mix(in srgb,var(--accent-soft,var(--accent)) 45%,var(--card)) 100%
  );
  border:0;
  border-radius:var(--radius,20px);
  padding:24px 24px 20px;
  box-shadow:var(--card-shadow);
}
.af-head::before,
.af-head::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
}
.af-head::before{
  width:min(320px,70%);
  height:min(320px,140%);
  top:-55%;
  right:-8%;
  background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 24%,transparent) 0%,transparent 72%);
  opacity:.85;
}
.af-head::after{
  width:min(220px,44%);
  height:min(220px,110%);
  left:-6%;
  bottom:-60%;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 14%,transparent) 0%,transparent 74%);
  opacity:.75;
}
.af-head--compact{padding-bottom:22px}
.af-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}
.af-head-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.af-head-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#764ba2));
  border:0;
  color:var(--accent-ink,#fff);
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 28%,transparent);
}
.af-head-text{min-width:0}
.af-head-title{
  margin:0;
  font-size:22px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
  letter-spacing:-.02em;
}
.af-head-sub{
  margin:5px 0 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  max-width:760px;
}
.af-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.af-head-actions .btn-primary{
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 24%,transparent);
}
.af-head-tabs{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:16px;
  border-top:1px dashed color-mix(in srgb,var(--accent) 18%,transparent);
  position:relative;
  z-index:1;
}
.af-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  color:var(--accent);
  background:color-mix(in srgb,var(--card) 76%,transparent);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.af-tab:hover{
  background:color-mix(in srgb,var(--accent) 12%,var(--card));
}
.af-tab.on{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink,#fff);
  font-weight:600;
  box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 28%,transparent);
}

/* 工具栏（列表容器外） */
.af-toolbar{
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.af-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:180px;
  max-width:280px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 1px 2px var(--shadow);
  color:var(--muted);
}
.af-search input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  font:inherit;
  font-size:13px;
  color:var(--text);
  outline:none;
}
/* 排序下拉：使用社区 uc-select，仅样式化触发器避免双层边框 */
.af-toolbar .uc-select.af-sort{
  width:auto;
  min-width:112px;
  flex:0 0 auto;
}
.af-toolbar .uc-select.af-sort .uc-select-trigger{
  height:36px;
  padding:0 34px 0 14px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  box-shadow:0 1px 2px var(--shadow);
  font-weight:400;
}
.af-toolbar .uc-select.af-sort .uc-select-trigger:hover{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
}
.af-toolbar .uc-select.af-sort.is-open .uc-select-trigger,
.af-toolbar .uc-select.af-sort .uc-select-trigger:focus{
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
.af-toolbar .uc-select.af-sort .uc-select-menu{
  border-radius:14px;
}

/* 商品面板 */
.uc-panel.af-panel,
.af-panel{
  position:relative;
  overflow:visible;
  padding:18px 24px 24px;
  box-sizing:border-box;
  background:var(--card,#fff)!important;
}
.uc-panel.af-panel::before,
.af-panel::before,
.uc-panel.af-panel::after,
.af-panel::after{
  content:none!important;
  display:none!important;
}
.af-panel > *{position:relative;z-index:1}
.af-panel .af-grid{
  margin:0;
}
.af-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.af-grid-empty{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:220px;
  padding:40px 24px;
  border-radius:16px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%),
    color-mix(in srgb,var(--accent) 4%,var(--chip,rgba(15,23,42,.03)));
  border:1px dashed color-mix(in srgb,var(--accent) 18%,var(--line,rgba(15,23,42,.1)));
}
.af-grid-empty[hidden]{display:none!important}
.af-grid-empty > i{
  font-size:40px;
  line-height:1;
  color:color-mix(in srgb,var(--accent) 55%,var(--muted,#64748b));
}
.af-grid-empty > p{
  margin:0;
  font-size:15px;
  font-weight:650;
  color:var(--text,#0f172a);
}
.af-grid-empty > span{
  font-size:13px;
  color:var(--muted,#64748b);
}
.af-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line,rgba(15,23,42,.08)));
  border-radius:14px;
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--accent) 6%,var(--card,#fff)),
    var(--card,#fff) 48%,
    color-mix(in srgb,var(--accent) 3%,var(--card,#fff))
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(15,23,42,.03);
  text-decoration:none;
  color:inherit;
  text-align:center;
  cursor:pointer;
  font:inherit;
  min-height:168px;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  overflow:visible;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,background .15s ease;
}
/* 列表卡片装饰：对角细线角标，默认很淡 */
.af-card::before,
.af-card::after{
  content:"";
  position:absolute;
  z-index:0;
  width:14px;
  height:14px;
  pointer-events:none;
  opacity:.35;
  transition:opacity .2s ease,width .2s ease,height .2s ease;
}
.af-card::before{
  top:10px;
  left:10px;
  border-top:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-left:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:3px 0 0 0;
}
.af-card::after{
  right:10px;
  bottom:10px;
  border-right:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:0 0 3px 0;
}
.af-card > *{position:relative;z-index:1}
.af-card:hover{
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line,rgba(15,23,42,.08)));
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 22px color-mix(in srgb,var(--accent) 12%,rgba(15,23,42,.08));
}
.af-card:hover::before,
.af-card:hover::after{
  opacity:.7;
  width:18px;
  height:18px;
}
.af-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.af-card-media{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:88px;
  padding:10px 0;
  box-sizing:border-box;
  overflow:visible;
}
.af-card-media.af-preview-stack{
  width:92px;
  height:92px;
  margin:0;
  overflow:visible;
}
.af-card-body{
  min-width:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.af-card-name{
  font-size:1rem;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}
.af-card-desc{
  font-size:.84rem;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}
.af-card-meta{
  font-size:.78rem;
  color:var(--muted);
  margin-top:2px;
}
.af-card-tags{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;
}
.af-card-tag{
  display:inline-block;margin:0;padding:1px 6px;
  border-radius:4px;font-size:.68rem;font-style:normal;font-weight:600;
  color:var(--accent, #0f766e);
  background:color-mix(in srgb, var(--accent, #0f766e) 12%, transparent);
}
.af-meta-vip{
  display:inline-block;
  margin-right:4px;
  padding:1px 6px;
  border-radius:4px;
  font-size:.7rem;
  font-style:normal;
  font-weight:600;
  color:#92400e;
  background:#fef3c7;
  vertical-align:1px;
}
.af-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin-top:auto;
  padding-top:2px;
}
.af-card-stat,
.af-card-price,
.af-card-free{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.78rem;
  white-space:nowrap;
}
.af-card-stat{color:var(--muted)}
.af-card-price{color:var(--accent);font-weight:700}
.af-card-free{color:#166534;font-weight:700}
.af-pill{
  position:absolute;
  top:12px;
  right:12px;
  font-size:.72rem;
  font-style:normal;
  padding:3px 8px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
}
.af-pill.on{background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent)}
.af-pill.wait{background:#fef3c7;color:#92400e}

/* 侧栏用户卡 */
.af-member-card{padding:14px}
.af-member-head{margin-bottom:10px}
.af-member-wear{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.af-member-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:0 0 10px;
}
.af-member-stats .aside-author-stat{
  text-align:center;
  padding:10px 4px;
  border-radius:12px;
  background:var(--chip);
}
.af-member-stats .aside-author-stat b{
  display:block;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  line-height:1.2;
}
.af-member-stats .aside-author-stat span{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}
.af-member-assets{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:12px;
  background:var(--chip);
  font-size:13px;
  font-weight:500;
  color:var(--text-soft);
}
.af-member-assets span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.af-member-assets i{
  font-size:16px;
  color:var(--accent);
}
.af-member-assets b{
  color:var(--text);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.af-member-card .aside-author-actions,
.af-member-guest .af-member-actions{
  display:flex;
  gap:8px;
  margin-top:0;
}
.af-member-card .aside-author-actions .btn,
.af-member-guest .af-member-actions .btn{
  flex:1;
  justify-content:center;
}
.af-member-card .aside-author-actions .btn.is-active,
.af-member-guest .af-member-actions .btn.is-active{
  border-color:color-mix(in srgb,var(--accent,#4f46e5) 35%,var(--line,#dbe3ea));
}
.af-member-card .aside-author-actions .btn.btn-line.is-active,
.af-member-guest .af-member-actions .btn.btn-line.is-active{
  color:var(--accent,#4f46e5);
  background:color-mix(in srgb,var(--accent,#4f46e5) 8%,var(--card,#fff));
}
.af-member-guest .af-member-actions{
  margin-top:4px;
}
.af-member-guest .rl-avatar-big{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#764ba2));
  color:var(--accent-ink,#fff);
}
.af-member-guest h1{
  margin:0 0 6px;
  font-size:18px;
}
.af-member-guest p{
  margin:0 0 14px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* 侧栏动态（对齐勋章最近颁发滚动） */
.af-activity-card{
  padding:14px;
  overflow:visible;
}
.af-activity-card .sec-head,
.af-top-card .sec-head{margin-bottom:10px}
/* 跑马灯纵向裁切；左右加留白，避免动态头像框被挡 */
.af-grant-marquee{
  height:300px;
  overflow:hidden;
  position:relative;
  padding:12px 14px;
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}
.af-grant-track{
  display:flex;
  flex-direction:column;
  width:100%;
  animation:af-grant-up 22s linear infinite;
  will-change:transform;
}
.af-grant-marquee:hover .af-grant-track{animation-play-state:paused}
.af-grant-list{
  list-style:none;
  margin:0;
  padding:0;
  flex:0 0 auto;
}
.af-grant-list li{
  display:block;
  padding:0;
  margin:0 0 15px;
  box-sizing:border-box;
  min-height:0;
  background:transparent;
}
.af-grant-list li:last-child{margin-bottom:15px}
.af-grant-line{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:1px;
  align-items:center;
  width:100%;
  padding:0;
  background:transparent;
  box-sizing:border-box;

  overflow:visible;
}
.af-grant-avatar-wrap{
  grid-row:1 / span 2;
  grid-column:1;
  align-self:center;
  width:42px;
  height:42px;
  border-radius:0;
  overflow:visible !important;
  background:transparent;
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.af-grant-avatar-wrap:has(.has-af-frame),
.af-grant-avatar-wrap:has(.uc-avatar-frame){
  overflow:visible !important;
  border-radius:0 !important;
}
.af-grant-avatar-wrap:has(.has-af-frame),
.af-grant-avatar-wrap:has(.uc-avatar-frame),
.af-grant-avatar-wrap:has(.uc-avatar){
  overflow:visible !important;
  border-radius:0 !important;
}
.af-grant-avatar-wrap .uc-avatar,
.af-grant-avatar-wrap .uc-avatar-link,
.af-grant-avatar-wrap a{
  overflow:visible !important;
  border-radius:0 !important;
  clip-path:none !important;
}
.af-grant-avatar-wrap .uc-avatar-frame{
  z-index:4;
}
.af-grant-avatar,
.af-grant-avatar-wrap .uc-avatar-img{
  display:block;
  width:32px;
  height:32px;
  object-fit:cover;
  border-radius:50%;
}
.af-grant-line{
  overflow:visible;
}
.af-grant-list li{
  overflow:visible;
}
.af-grant-body{display:contents}
.af-grant-top{
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.af-grant-who{
  flex:1;
  min-width:0;
  font-size:.8rem;
  font-weight:650;
  line-height:1.2;
  color:var(--text-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.af-grant-time{
  flex:0 0 auto;
  margin:0;
  font-size:.62rem;
  font-weight:400;
  line-height:1.2;
  color:var(--muted);
  white-space:nowrap;
}
.af-grant-act{
  grid-column:2;
  grid-row:2;
  display:block;
  min-width:0;
  font-size:.72rem;
  font-weight:400;
  line-height:1.2;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@keyframes af-grant-up{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}

/* 收藏达人排行 */
.af-top-card{padding:14px}
.af-top-card .sec-head{margin-bottom:10px}
.af-top-stars{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:520px;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.af-top-stars::-webkit-scrollbar{display:none}
.af-top-star{
  display:grid;
  grid-template-columns:22px 44px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(15,23,42,.04),rgba(15,23,42,.01) 55%,transparent);
}
.af-top-star.is-top{
  background:linear-gradient(90deg,rgba(245,158,11,.14),rgba(245,158,11,.03) 55%,transparent);
}
.af-top-no{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  font-size:12px;
  font-style:normal;
  font-weight:700;
  color:var(--muted);
  background:rgba(15,23,42,.06);
}
.af-top-no--1{
  color:#92400e;
  background:linear-gradient(145deg,#fde68a,#f59e0b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.af-top-no--2{
  color:#334155;
  background:linear-gradient(145deg,#e2e8f0,#94a3b8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.af-top-no--3{
  color:#7c2d12;
  background:linear-gradient(145deg,#fdba74,#c2410c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.af-top-avatar{
  display:grid;
  place-items:center;
  line-height:0;
  text-decoration:none;
  overflow:visible;
}
.af-top-stack{
  width:40px;
  height:40px;

  overflow:visible;
}
.af-top-avatar .uc-avatar--md .uc-avatar-img{
  width:36px;
  height:36px;
}
.af-top-meta{min-width:0}
.af-top-name{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  flex-wrap:nowrap;
}
.af-top-name a{
  flex:0 1 auto;
  min-width:0;
  color:inherit;
  text-decoration:none;
  font-size:12px;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.af-top-tags{
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  min-width:0;
}
.af-top-tags .work-level{
  font-size:10px;
  padding:1px 5px;
  line-height:1.3;
  flex:0 0 auto;
}
.af-top-tags .af-top-badges{
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:3px;
  margin:0!important;
  flex:0 0 auto;
}
.af-top-tags .af-top-badges .badge-icon{
  display:inline-flex;
  width:16px;
  height:16px;
  line-height:0;
  flex:0 0 auto;
}
.af-top-tags .af-top-badges .badge-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.af-top-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:2px;
  min-width:0;
}
.af-top-group{
  flex:1 1 auto;
  min-width:0;
  font-size:11px;
  color:var(--muted);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.af-top-count{
  flex:0 0 auto;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

/* 详情弹窗 */
.af-info-modal[hidden]{display:none!important}
.af-info-modal.open{display:flex}
.uc-modal-panel.af-info-panel,
.af-info-panel{
  position:relative;
  width:min(440px,100%);
  text-align:left;
  padding:0 0 20px!important;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-sizing:border-box;
  overflow:hidden;
}
.af-info-panel > .af-buy-panel,
.af-info-panel > .af-info-actions{
  margin-left:20px;
  margin-right:20px;
  width:calc(100% - 40px);
  max-width:calc(100% - 40px);
  box-sizing:border-box;
  flex:0 0 auto;
  align-self:center;
}
.af-buy-panel[hidden]{
  display:none!important;
}
.af-info-close,
.af-info-panel .uc-modal-x.af-info-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb,var(--card) 72%,transparent);
  color:var(--text-soft,var(--muted));
  box-shadow:0 1px 4px rgba(15,23,42,.08);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.af-info-close:hover,
.af-info-panel .uc-modal-x.af-info-close:hover{
  background:var(--card);
  color:var(--accent);
  box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 22%,rgba(15,23,42,.12));
  transform:scale(1.06);
}
.af-info-close:active,
.af-info-panel .uc-modal-x.af-info-close:active{
  transform:scale(.96);
}
.af-info-close i{
  font-size:18px;
  line-height:1;
}
.af-buy-hero{
  position:relative;
  isolation:isolate;
  text-align:center;
  margin:0;
  padding:28px 20px 18px;
  border-radius:0;
  overflow:visible;
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--accent) 18%,transparent) 0%, transparent 46%),
    linear-gradient(215deg, color-mix(in srgb,var(--accent) 10%,transparent) 0%, transparent 42%),
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--accent) 14%,var(--card)),
      color-mix(in srgb,var(--accent) 5%,var(--card)) 58%,
      var(--card)
    );
}
.af-buy-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 42% at 0% 0%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 70%),
    radial-gradient(ellipse 48% 38% at 100% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 42%);
}
.af-buy-hero::after{
  content:none!important;
  display:none!important;
}
.af-buy-hero > *{position:relative;z-index:1}
.af-buy-preview{
  width:120px;
  height:120px;
  margin:0 auto 12px;

  overflow:visible;
  position:relative;
  z-index:2;
}
.af-buy-title{
  margin:0 0 6px;
  font-size:1.12rem;
  font-weight:750;
  line-height:1.35;
  color:var(--text);
}
.af-buy-sub{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.af-buy-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
}
.af-buy-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.af-buy-label{
  font-size:13px;
  font-weight:650;
  color:var(--text);
}
.af-buy-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.af-buy-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
  line-height:1.3;
  white-space:nowrap;
}
.af-buy-tag.is-month{
  color:#166534;
  background:#dcfce7;
}
.af-buy-tag.is-perm{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--card));
}
.af-buy-tag.is-free{
  color:#166534;
  background:#dcfce7;
}
.af-buy-options{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.af-buy-opt{
  flex:1 1 0;
  min-width:58px;
  padding:8px 4px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--card);
  font:inherit;
  font-size:12px;
  font-weight:650;
  color:var(--text-soft);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.af-buy-opt.on{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
}
.af-buy-opt:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.af-buy-calc{
  padding:10px 12px;
  border-radius:10px;
  background:color-mix(in srgb,#f97316 10%,var(--card));
  font-size:12px;
  font-weight:650;
  line-height:1.45;
  text-align:center;
  color:#ea580c;
}
.af-info-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:2px;
}
.af-info-actions .af-info-btn,
.af-info-actions .btn{
  width:100%;
  min-width:0;
  margin:0;
  justify-content:center;
  box-sizing:border-box;
  border-radius:12px;
}

/* 衣柜 */
.af-wardrobe-panel{padding-top:4px}
.af-wardrobe-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
  padding:8px 24px 24px;
}
.af-wardrobe-grid.is-dim{opacity:.78}
.af-wardrobe-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:18px 14px 14px;
  border-radius:14px;
  background:rgba(15,23,42,.03);
  border:1px solid transparent;
  text-align:center;
}
.af-wardrobe-cell.is-on{
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
.af-wardrobe-preview{width:110px;height:110px}
.af-wardrobe-cell strong{font-size:14px}
.af-wardrobe-cell > span{font-size:12px;color:var(--muted)}
.af-wardrobe-ops{margin-top:4px}
.af-wardrobe-empty{
  margin:24px 24px 32px;
  padding:36px 20px;
  border-radius:14px;
  text-align:center;
  background:var(--chip);
}
.af-wardrobe-empty p{margin:0 0 14px;color:var(--muted)}
.af-wardrobe-expired{
  padding:0 0 8px;
  border-top:1px solid var(--line);
}
.af-wardrobe-expired h3{
  margin:0;
  padding:16px 24px 4px;
  font-size:14px;
  font-weight:700;
}
.empty-inline{font-size:13px;color:var(--muted);padding:6px 0}

@media (max-width:1200px){
  .af-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .plaza-main.af-layout{grid-template-columns:minmax(0,1fr)}
  .af-aside{order:3}
}
@media (max-width:720px){
  .af-head{padding:18px 16px 16px}
  .af-head-icon{width:48px;height:48px;font-size:22px}
  .af-head-title{font-size:20px}
  .af-panel{padding:14px}
  .af-wardrobe-grid{padding-left:14px;padding-right:14px}
  .af-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .feed-toolbar-right{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:100%;
  }
  .af-search{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
    width:auto;
  }
  .af-sort,
  .af-toolbar .uc-select.af-sort{
    flex:0 0 auto;
    width:auto;
    min-width:108px;
  }
  .af-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .af-card-media.af-preview-stack{width:80px;height:80px}
}

/* ========== 全局头像叠加 ========== */
.uc-avatar{ position: relative; }
.uc-avatar.has-af-frame{
  overflow: visible !important;
  z-index: 2;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
/* 去掉圆形裁切，否则方形框四角/厚边会被父级切掉，看起来像盖不住头像 */
.uc-avatar-link:has(.uc-avatar.has-af-frame),
.work-avatar-wrap:has(.uc-avatar.has-af-frame),
.work-avatar-link:has(.uc-avatar.has-af-frame),
.reply-avatar-wrap:has(.uc-avatar.has-af-frame),
.user-home-hero-avatar-wrap:has(.uc-avatar.has-af-frame),
.uc-profile-avatar-visual:has(.uc-avatar.has-af-frame),
.uc-profile-avatar:has(.uc-avatar.has-af-frame),
.user-dd-trigger-avatar:has(.uc-avatar.has-af-frame),
.user-dd-head-avatar-wrap:has(.uc-avatar.has-af-frame),
.mnav-user-avatar-wrap:has(.uc-avatar.has-af-frame),
.sidebar-user-avatar:has(.uc-avatar.has-af-frame),
.gpc-avatar-wrap:has(.uc-avatar.has-af-frame),
.gm-avatar:has(.uc-avatar.has-af-frame),
a:has(> .uc-avatar.has-af-frame),
span:has(> .uc-avatar.has-af-frame){
  overflow: visible !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.uc-side-profile:has(.has-af-frame),
.rl-member:has(.has-af-frame),
.aside-card:has(.has-af-frame),
.af-mirror:has(.has-af-frame),
.badge-member-card:has(.has-af-frame),
.user-home-hero:has(.has-af-frame),
.user-dd-head:has(.has-af-frame),
.uc-profile-avatar-visual:has(.has-af-frame),
.sidebar-user:has(.has-af-frame),
.sidebar-foot:has(.has-af-frame),
.rl-podium-item:has(.has-af-frame),
.rl-item:has(.has-af-frame),
.mr-item:has(.has-af-frame),
.gm-overlay:has(.has-af-frame),
.msg-conv:has(.has-af-frame),
.follow-user-item:has(.has-af-frame),
.invite-list-item:has(.has-af-frame),
.board-mod-user:has(.has-af-frame),
.market-author-item:has(.has-af-frame),
.work-head:has(.has-af-frame),
.work-card:has(.has-af-frame),
.reply:has(.has-af-frame){ overflow: visible !important; }
.af-activity-card:has(.has-af-frame),
.af-grant-marquee:has(.has-af-frame),
.af-grant-track:has(.has-af-frame),
.af-grant-list:has(.has-af-frame),
.af-grant-line:has(.has-af-frame),
.af-grant-avatar-wrap:has(.has-af-frame),
.af-top-card:has(.has-af-frame),
.af-top-star:has(.has-af-frame){ overflow: visible !important; }
.af-grant-marquee:has(.has-af-frame){
  overflow-x: clip;
  overflow-y: hidden;
  padding-left: 0;
  padding-right: 0;
}


.uc-avatar.af-upgraded{ display: inline-block; line-height: 0; vertical-align: middle; }
.uc-avatar.af-upgraded .uc-avatar-img{ display: block; border-radius: 50%; object-fit: cover; }
a.sidebar-user .uc-avatar .uc-avatar-img{ width: 36px; height: 36px; border-width: 2px; }
.invite-list-item .uc-avatar .uc-avatar-img{ width: 40px; height: 40px; }
.invite-rank-item .uc-avatar .uc-avatar-img{ width: 36px; height: 36px; }
.follow-user-item .uc-avatar.follow-user-avatar-wrap .uc-avatar-img{ width: 42px; height: 42px; }
.badge-grant-avatar-wrap .uc-avatar .uc-avatar-img{ width: 36px; height: 36px; }
.badge-grant-avatar-wrap:has(.has-af-frame){ overflow: visible !important; }
.board-mod-user .uc-avatar .uc-avatar-img{ width: 20px; height: 20px; border-width: 0; }
.user-home-avatar .uc-avatar.af-upgraded .uc-avatar-img,
.user-home-reward-user .uc-avatar.af-upgraded .uc-avatar-img{ width: 40px; height: 40px; border-width: 0; }
.user-home-avatar .uc-avatar.has-af-frame{ --af-face: .78; }

/*
 * 叠层模型（与商城预览一致）：容器尺寸 = 头像脸宽；
 * 框图放大到 100%/face，居中盖住脸。face 越小框越大、越容易盖住。
 */
.uc-avatar-frame{
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% / var(--af-face, .85));
  height: calc(100% / var(--af-face, .85));
  max-width: none !important;
  max-height: none;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  -webkit-user-drag: none;
}
.uc-avatar.has-af-frame{
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.uc-avatar.has-af-frame .uc-avatar-img{
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}
.uc-avatar.has-af-frame .uc-avatar-badge{ display: none !important; }
.feed-style-stream .work-avatar-wrap:has(.has-af-frame) .uc-avatar-img,
.feed-style-row .work-avatar-wrap:has(.has-af-frame) .uc-avatar-img,
.feed-style-magazine .work-avatar-wrap:has(.has-af-frame) .uc-avatar-img,
.feed-style-thumb .work-avatar-wrap:has(.has-af-frame) .uc-avatar-img{
  box-shadow: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
}