/* 福利（装扮）：头像框与主页背景。全部为站内原创的 CSS 样式，不使用外部素材。
   头像框叠在头像边缘（::after 圆环），不改变头像尺寸；系统或站内开启「减少动画」时静止显示。 */
@property --perk-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes perk-spin{to{--perk-angle:360deg}}

/* ===== 头像框 ===== */
.avatar.perk-frame{isolation:isolate}
.avatar.perk-frame::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:clamp(2px,7.5%,6px);background:var(--perk-paint);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.perk-frame-dawn{--perk-paint:linear-gradient(135deg,#ffb36b,#ff7aa2 55%,#ffd6a5);box-shadow:0 0 0 1px rgba(255,170,140,.45),0 0 10px rgba(255,140,120,.28)}
.perk-frame-sakura{--perk-paint:radial-gradient(circle at 18% 16%,#fff 0 7%,transparent 8%),radial-gradient(circle at 84% 28%,#ffe6f0 0 6%,transparent 7%),radial-gradient(circle at 72% 88%,#fff 0 6%,transparent 7%),radial-gradient(circle at 12% 74%,#ffd3e3 0 7%,transparent 8%),linear-gradient(160deg,#ff8db8,#f9c2d6 60%,#ff9fc3);box-shadow:0 0 0 1px rgba(255,150,190,.4)}
.perk-frame-ink{--perk-paint:conic-gradient(from 210deg,#111,#5a5a5a 25%,#e4e4e4 45%,#4b4b4b 65%,#111);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.perk-frame-pixel{--perk-paint:repeating-conic-gradient(#43d6a5 0 11.25deg,#1d7c62 11.25deg 22.5deg);box-shadow:0 0 0 1px #1d7c62}
.perk-frame-aurora{--perk-paint:conic-gradient(from var(--perk-angle),#2ee6a6,#2bb3ff,#9b6bff,#ff7ad9,#2ee6a6);box-shadow:0 0 12px rgba(80,200,255,.35)}
.perk-frame-aurora::after{animation:perk-spin 6s linear infinite}
.perk-frame-orbit{--perk-paint:conic-gradient(from var(--perk-angle),#fff 0 5deg,#9ec0ff 12deg,#2a3b78 45deg,#1d2752 320deg,#9ec0ff 352deg,#fff 360deg);box-shadow:0 0 0 1px rgba(60,80,160,.35)}
.perk-frame-orbit::after{animation:perk-spin 3.2s linear infinite}
.perk-frame-gold{--perk-paint:conic-gradient(from var(--perk-angle),#b8860b,#ffe9a6 8%,#c9971c 18%,#8a6408 35%,#e8c15a 55%,#b8860b 75%,#fff3c4 88%,#b8860b);box-shadow:0 0 0 1px #e8c15a,0 0 10px rgba(232,193,90,.35)}
.perk-frame-gold::after{animation:perk-spin 9s linear infinite}

/* ===== 主页背景（作用在主页封面上；佩戴时隐藏上传的封面图）。用两个类提高优先级，盖过封面自带的背景。 ===== */
.perk-bg{position:relative;overflow:hidden;isolation:isolate}
.perk-bg>img{display:none}
.perk-bg>*{position:relative;z-index:1}
.perk-bg::before,.perk-bg::after{content:'';position:absolute;pointer-events:none;z-index:0}
.perk-bg.perk-bg-paper{background-color:#f4ecdc;background-image:repeating-linear-gradient(0deg,rgba(120,90,40,.05) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(120,90,40,.035) 0 1px,transparent 1px 6px),radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.6),transparent 60%)}
.perk-bg.perk-bg-sunset{background:linear-gradient(180deg,#2b2350,#6b3b78 25%,#c9566b 50%,#f08a5d 72%,#ffd37a);background-size:100% 260%;animation:perk-sunset 20s ease-in-out infinite alternate}
@keyframes perk-sunset{to{background-position:0 100%}}
.perk-bg.perk-bg-aurora{background:linear-gradient(180deg,#050a1f,#0b1638 60%,#122450)}
.perk-bg-aurora::before{inset:-25%;background:radial-gradient(40% 28% at 28% 42%,rgba(46,230,166,.55),transparent 70%),radial-gradient(34% 24% at 68% 30%,rgba(43,179,255,.45),transparent 70%),radial-gradient(30% 22% at 50% 62%,rgba(155,107,255,.42),transparent 70%);filter:blur(16px);animation:perk-aurora 14s ease-in-out infinite alternate}
@keyframes perk-aurora{50%{transform:translate(6%,-4%) rotate(4deg) scale(1.08)}to{transform:translate(-5%,3%) rotate(-3deg) scale(.96)}}
.perk-bg.perk-bg-stars{background:radial-gradient(ellipse at 50% 120%,#24314a,#0b0f1d 70%)}
.perk-bg-stars::before,.perk-bg-stars::after{inset:0;background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 70px,#cfe0ff,transparent),radial-gradient(1.5px 1.5px at 150px 20px,#fff,transparent),radial-gradient(1px 1px at 60px 110px,#fff,transparent),radial-gradient(2px 2px at 180px 90px,#fff6d5,transparent);background-size:200px 130px;animation:perk-twinkle 3.6s ease-in-out infinite alternate}
.perk-bg-stars::after{background-position:100px 60px;animation-delay:-1.8s;opacity:.7}
@keyframes perk-twinkle{from{opacity:.35}to{opacity:1}}
.perk-bg.perk-bg-waves{background:linear-gradient(180deg,#9fd8ef,#4a90c2 70%,#2f6f9f)}
.perk-bg-waves::before,.perk-bg-waves::after{left:-50%;right:-50%;bottom:0;height:55%;background:radial-gradient(64px 24px at 60px 24px,rgba(255,255,255,.34) 98%,transparent 100%) 0 0/120px 24px repeat-x,linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.1)) 0 24px/100% 100% no-repeat;animation:perk-wave 9s linear infinite}
.perk-bg-waves::after{height:38%;opacity:.8;animation-duration:6s;animation-direction:reverse}
@keyframes perk-wave{to{transform:translateX(120px)}}
.perk-bg.perk-bg-grid{background:linear-gradient(180deg,#14072b 0,#2b0d47 52%,#3a0f4d 52%,#14072b)}
.perk-bg-grid::before{left:-50%;right:-50%;bottom:-10%;height:62%;background-image:linear-gradient(rgba(255,72,200,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(255,72,200,.65) 1px,transparent 1px);background-size:40px 40px;transform:perspective(260px) rotateX(62deg);transform-origin:50% 100%;animation:perk-grid 2.4s linear infinite}
.perk-bg-grid::after{left:50%;top:14%;width:26%;aspect-ratio:1;max-width:120px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#ffd36e,#ff5fa2);box-shadow:0 0 30px rgba(255,120,170,.5)}
@keyframes perk-grid{to{background-position:0 40px,0 0}}

/* 预览（设置、后台） */
.perk-preview-avatar{width:48px;height:48px;border-radius:50%;font-size:18px}
.perk-preview-cover{display:block;width:100%;height:64px;border-radius:10px;border:1px solid var(--line)}
.perk-preview-gif{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--surface-2,var(--surface));border:1px dashed var(--line-strong,var(--line));font-weight:700;font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.perk-frame::after,.perk-bg,.perk-bg::before,.perk-bg::after{animation:none!important}}
:root[data-motion="reduce"] .perk-frame::after,:root[data-motion="reduce"] .perk-bg,:root[data-motion="reduce"] .perk-bg::before,:root[data-motion="reduce"] .perk-bg::after{animation:none!important}

/* 设置页「我的装扮」 */
.perks-body{display:grid;gap:18px}
.perk-group h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.perk-group{display:grid;gap:8px}
.perk-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.perk-card.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.perk-card .perk-preview-cover{width:96px;height:48px}
.perk-info{display:grid;gap:2px;min-width:0}
.perk-info strong{font-size:15px}
.perk-desc,.perk-until,.perk-note{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.perk-actions{display:flex;gap:8px}
.perks-empty{color:var(--muted);margin:0}
@media(max-width:520px){.perk-card{grid-template-columns:auto minmax(0,1fr)}.perk-actions{grid-column:1/-1}.perk-actions .button{width:100%}}

/* 后台「发福利」 */
.adm-perks{margin-top:18px}
.adm-perk-group h3{margin:14px 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.adm-perk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.adm-perk-option{display:grid;justify-items:center;gap:6px;padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.adm-perk-option[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.adm-perk-option .perk-preview-cover{height:44px}
.adm-perk-form{display:grid;gap:4px;margin-top:14px;max-width:560px}
.adm-perk-form .adm-button{justify-self:start;margin-top:6px}
.adm-perk-results{list-style:none;margin:8px 0 0;padding:0;font-size:13px;display:grid;gap:2px}
.adm-perk-results .is-ok{color:var(--success)}
.adm-perk-results .is-error{color:var(--danger,#c0392b)}
.adm-perks>h3{margin:22px 0 8px;font-size:15px}
.adm-perk-grants{overflow-x:auto}