:root{
  /* 主题色变量: 由「主题皮肤」在 documentElement 上内联覆盖, --grad/--grad2 随之联动 */
  --blue:#FF5C8A; --blue2:#A855F7; --blue3:#FF8FAB;
  --pink:var(--blue); --pink2:var(--blue3); --purple:var(--blue2);
  --grad:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);
  --grad2:linear-gradient(135deg,var(--blue3) 0%,var(--blue2) 100%);
  --bg:#FFF3F7; --card:#fff; --txt:#14151A; --sub:#8A8F9C; --line:#FDE3EE;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;font-size:14px;outline:none;border:1px solid var(--line);background:#F8F9FC;border-radius:12px;padding:11px 13px;width:100%;color:var(--txt)}
input:focus,textarea:focus{border-color:#FFB1CC;background:#fff;box-shadow:0 0 0 3px rgba(255,92,138,.12)}
/* 会员昵称金色高亮 */
.vip-nm{background:linear-gradient(135deg,#FFD700,#FFA500,#FF6347);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900;text-shadow:0 0 12px rgba(255,165,0,.35);animation:vipShine 2.5s ease-in-out infinite}
.vip-nm:before{content:"👑 ";font-size:.85em;-webkit-text-fill-color:initial}
@keyframes vipShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
/* 喜欢按钮(喜欢=关注) */
.like-btn{width:100%;margin-top:10px;padding:13px;border-radius:999px;font-weight:800;font-size:15px;background:linear-gradient(135deg,#FF7BA9,#FF3B5C);color:#fff;box-shadow:0 8px 20px rgba(255,59,92,.32);transition:.2s}
.like-btn:active{transform:scale(.96)}
.like-btn.on{background:#fff;color:#FF3B5C;border:1.5px solid #FFD0DF;box-shadow:none}
.like-btn .hrt{display:inline-block;animation:beat 1.2s ease infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.28)}}
.hidden{display:none!important}
.ttl{font-weight:800;font-size:17px}
.sub{color:var(--sub);font-size:12px}
.btn{background:var(--grad);color:#fff;font-weight:700;border-radius:999px;padding:12px 18px;font-size:15px;box-shadow:0 8px 20px rgba(255,92,138,.28);transition:.15s;width:100%}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--pink);box-shadow:none;border:1.5px solid #FFD0DF}
.btn.gray{background:#F1F3F8;color:#6B7280;box-shadow:none}
.btn.sm{padding:7px 14px;font-size:13px;width:auto}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{display:flex;align-items:center;justify-content:center}

/* ========== 头像框特效 (免费 10 / 会员专属 9) ========== */
.frm{position:relative;display:inline-block;border-radius:50%;padding:3px;flex:0 0 auto}
.frm::before{content:'';position:absolute;inset:0;border-radius:50%}
.frm.blue{background:conic-gradient(#5c9bff,#8fd0ff,#5c9bff)}
.frm.pink{background:conic-gradient(#ff7ab0,#ffc3de,#ff7ab0)}
.frm.gold{background:conic-gradient(#ffd700,#ff9a00,#ffd700)}
.frm.vip{background:conic-gradient(#b06bff,#7b5cff,#ff5fc0,#b06bff)}
.frm.rainbow{background:conic-gradient(#ff5f6d,#ffc371,#5cff9d,#5c9bff,#b06bff,#ff5f6d)}
.frm.sakura{background:conic-gradient(#ffb7c5,#ff7ab0,#ffe3ec,#ffb7c5)}
.frm.star{background:conic-gradient(#ffe259,#ffa751,#fff3b0,#ffe259)}
.frm.diamond{background:conic-gradient(#a8fffb,#5cc8ff,#b06bff,#a8fffb)}
.frm.dragon{background:conic-gradient(#38ef7d,#11998e,#ffd76e,#38ef7d)}
.frm.ocean{background:conic-gradient(#00c6ff,#0072ff,#7ee8fa,#00c6ff)}
.frm.forest{background:conic-gradient(#56ab2f,#a8e063,#2f7336,#56ab2f)}
.frm.sunset{background:conic-gradient(#ff7e5f,#feb47b,#ff5f9e,#ff7e5f)}
.frm.candy{background:conic-gradient(#ff9ff3,#feca57,#48dbfb,#ff9ff3)}
.frm.neon{background:conic-gradient(#08f7fe,#09fbd3,#fe53bb,#f5d300,#08f7fe);animation:frmGlow 2.2s linear infinite}
.frm.fire{background:conic-gradient(#f83600,#f9d423,#ff4e50,#f83600);animation:frmGlow 1.8s linear infinite}
.frm.moon{background:conic-gradient(#e0eafc,#cfdef3,#93a5cf,#e0eafc);animation:frmGlow 3.2s linear infinite}
.frm.king{background:conic-gradient(#f7971e,#ffd200,#ff0844,#ffd200,#f7971e);animation:frmGlow 2.6s linear infinite}
.frm.love{background:conic-gradient(#ff0844,#ffb199,#ff5f9e,#ffd1dc,#ff0844);animation:frmGlow 2.4s linear infinite}
@keyframes frmGlow{0%{filter:hue-rotate(0deg) drop-shadow(0 0 2px rgba(255,255,255,.35))}50%{filter:hue-rotate(40deg) drop-shadow(0 0 6px rgba(255,220,120,.55))}100%{filter:hue-rotate(0deg) drop-shadow(0 0 2px rgba(255,255,255,.35))}}
.frm .av{border:3px solid #fff}
/* 头像小表情挂件 (右下角) */
.avbadge{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;font-style:normal;z-index:2}
.frm .avbadge{right:1px;bottom:1px}
/* 主页装扮横幅 */
.decor-bar{padding:9px 16px;font-size:12px;text-align:right;font-weight:700;letter-spacing:.5px}
/* 漂浮粒子特效层 (主题皮肤) */
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
#fxLayer i{position:absolute;bottom:-40px;opacity:0;animation:fxRise linear infinite}
@keyframes fxRise{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.6}100%{transform:translateY(-110vh) rotate(360deg);opacity:0}}
/* 选择网格 (主题/装扮/头像框 共用) */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.gcell{background:#fafafa;border-radius:12px;padding:10px 6px;text-align:center;border:1px solid #f0f0f0;cursor:pointer}
.gcell:active{transform:scale(.96)}
/* 座驾 / 神宠 商城网格 */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.scell{background:#fafafa;border-radius:12px;padding:10px 6px;text-align:center;border:1px solid #f0f0f0;cursor:pointer}
.scell:active{transform:scale(.96)}
.scell.on{border-color:var(--pink);background:#FFF5F8}
.sic{font-size:32px;line-height:1.2}
.snm{font-size:12px;font-weight:700;color:#333;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spr{font-size:12px;font-weight:700;color:#ff6a00;margin-top:2px}
.sst{font-size:10px;color:#aaa;margin-top:2px}
/* 充值收款码: 微信长按「识别二维码」要求真实 http 图片 + 放开 iOS 长按菜单 */
.payqr-img{-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto;-webkit-user-drag:auto;pointer-events:auto}

/* ========== 财富等级徽章 (抖音式, 按段位配色) ========== */
.wlv{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;color:#fff;line-height:1.5;white-space:nowrap;letter-spacing:.3px;vertical-align:middle}
.wlv.t1{background:linear-gradient(135deg,#9CA3AF,#6B7280)}
.wlv.t2{background:linear-gradient(135deg,#34D399,#059669)}
.wlv.t3{background:linear-gradient(135deg,#60A5FA,#2563EB)}
.wlv.t4{background:linear-gradient(135deg,#A78BFA,#7C3AED)}
.wlv.t5{background:linear-gradient(135deg,#FBBF24,#D97706);box-shadow:0 0 8px rgba(251,191,36,.4)}
.wlv.t6{background:linear-gradient(135deg,#F87171,#DC2626);box-shadow:0 0 10px rgba(248,113,113,.5);animation:wlvPulse 2s ease-in-out infinite}
@keyframes wlvPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.wlv-lg{font-size:12px;padding:2px 10px}

/* ============ 贵族等级徽章(0-60级, 6段位) ============ */
.nlv{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 4px;border-radius:999px;font-size:10px;font-weight:800;color:#fff;line-height:1.5;white-space:nowrap;letter-spacing:.3px;vertical-align:middle;height:16px;box-sizing:border-box}
.nlv svg{width:12px;height:12px;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.nlv .nl-n{font-size:9px;font-weight:800;opacity:.95;text-shadow:0 1px 1px rgba(0,0,0,.3)}
/* 段位配色(由低到高) */
.nlv.t0{background:linear-gradient(135deg,#E5E7EB,#9CA3AF);color:#4B5563}
.nlv.t1{background:linear-gradient(135deg,#D1D5DB,#6B7280)}
.nlv.t2{background:linear-gradient(135deg,#6EE7B7,#059669)}
.nlv.t3{background:linear-gradient(135deg,#93C5FD,#2563EB)}
.nlv.t4{background:linear-gradient(135deg,#C4B5FD,#7C3AED)}
.nlv.t5{background:linear-gradient(135deg,#FCD34D,#D97706);box-shadow:0 0 8px rgba(251,191,36,.5);animation:nlvGlow 2.4s ease-in-out infinite}
.nlv.t6{background:linear-gradient(135deg,#FCA5A5 0%,#F59E0B 50%,#EF4444 100%);box-shadow:0 0 12px rgba(239,68,68,.6),0 0 4px rgba(251,191,36,.5);animation:nlvEpic 1.8s ease-in-out infinite;position:relative;overflow:visible}
.nlv.t6:before{content:"";position:absolute;inset:-2px;border-radius:999px;background:linear-gradient(90deg,#EF4444,#F59E0B,#8B5CF6,#3B82F6,#10B981,#EF4444);background-size:300% 100%;animation:nlvRainbow 3s linear infinite;z-index:-1;filter:blur(2px);opacity:.7}
.nlv.t6 svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}
@keyframes nlvGlow{0%,100%{box-shadow:0 0 6px rgba(251,191,36,.4)}50%{box-shadow:0 0 14px rgba(251,191,36,.75)}}
@keyframes nlvEpic{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.3) saturate(1.2)}}
@keyframes nlvRainbow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.nlv-lg{height:20px;font-size:12px;padding:2px 9px 2px 5px}
.nlv-lg svg{width:15px;height:15px}
.nlv-lg .nl-n{font-size:11px}
/* 头像旁悬浮徽章 */
.avwrap .nlv{position:absolute;left:-4px;bottom:-4px;z-index:3;padding:0 4px 0 2px;height:14px;border:1.5px solid #fff;border-radius:999px}
.avwrap .nlv svg{width:10px;height:10px}
.avwrap .nlv .nl-n{font-size:8px}