/* 我的游戏中心 / 会员中心 样式（对照原站登录后布局还原） */
.vip-body { max-width: 540px; margin: 0 auto; background: #f2f4f8; min-height: 100vh; padding-bottom: 70px; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
.vip-topbar { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:12px 14px; font-size:16px; font-weight:600; color:#222; position:sticky; top:0; z-index:20; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.vip-topbar .tb-left { display:flex; align-items:center; gap:6px; }
.vip-topbar .tb-right { display:flex; align-items:center; gap:14px; }
.vip-topbar .tb-right a { position:relative; color:#666; }
.vip-topbar .dot { position:absolute; top:-2px; right:-3px; width:8px; height:8px; background:#ff3b30; border-radius:50%; }

.vip-banner { margin:12px; border-radius:14px; padding:16px; color:#fff; position:relative; overflow:hidden; background:linear-gradient(120deg,#6366f1 0%,#8b5cf6 55%,#a855f7 100%); box-shadow:0 6px 18px rgba(99,102,241,.3); display:flex; align-items:center; justify-content:space-between; }
.vip-banner .bn-txt .bn-hi { font-size:16px; font-weight:700; }
.vip-banner .bn-sub { font-size:12px; opacity:.9; margin-top:4px; }
.vip-banner .bn-avatar { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:30px; border:2px solid rgba(255,255,255,.5); }

.vip-card { margin:12px; background:#fff; border-radius:14px; padding:14px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.vip-card .vc-tit { font-size:15px; font-weight:700; color:#222; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.vip-cardrow { display:flex; gap:12px; }
.tcard { flex:1; border-radius:12px; padding:14px; background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%); position:relative; }
.tcard .tc-label { font-size:12px; color:#92400e; }
.tcard .tc-num { font-size:26px; font-weight:800; color:#b45309; margin-top:2px; }
.tcard .tc-num small { font-size:13px; font-weight:600; }
.tcard .tc-refresh { position:absolute; top:12px; right:12px; font-size:16px; color:#b45309; }
.tcard .tc-link { font-size:12px; color:#a16207; margin-top:8px; text-decoration:underline; }
.acct { flex:1; }
.acct .ac-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; color:#555; }
.acct .ac-row b { color:#222; }
.btn-avatar { background:#22c55e; color:#fff; border:none; border-radius:16px; padding:4px 12px; font-size:12px; cursor:pointer; }
.vip-note { font-size:12px; color:#888; margin-top:10px; }

.vip-serv { display:flex; gap:10px; margin:12px; }
.vip-serv .sv { flex:1; background:#fff; border-radius:14px; padding:16px 8px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.05); text-decoration:none; }
.vip-serv .sv .sv-ic { width:44px; height:44px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
.vip-serv .sv.sv1 .sv-ic { background:linear-gradient(135deg,#f87171,#ef4444); }
.vip-serv .sv.sv2 .sv-ic { background:linear-gradient(135deg,#fb923c,#f97316); }
.vip-serv .sv.sv3 .sv-ic { background:linear-gradient(135deg,#a78bfa,#8b5cf6); }
.vip-serv .sv .sv-t { font-size:13px; color:#333; font-weight:600; }

.vip-quick { display:flex; background:#fff; border-radius:14px; margin:12px; padding:14px 8px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.vip-quick a { flex:1; text-align:center; text-decoration:none; color:#555; font-size:12px; }
.vip-quick a .q-ic { width:36px; height:36px; border-radius:10px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; }
.vip-quick a:nth-child(1) .q-ic { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.vip-quick a:nth-child(2) .q-ic { background:linear-gradient(135deg,#60a5fa,#3b82f6); }
.vip-quick a:nth-child(3) .q-ic { background:linear-gradient(135deg,#f472b6,#ec4899); }
.vip-quick a:nth-child(4) .q-ic { background:linear-gradient(135deg,#34d399,#10b981); }

.vip-hot { margin:12px; background:#fff; border-radius:14px; padding:14px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.vip-hot .vh-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.vip-hot .vh-tit { font-size:15px; font-weight:700; color:#222; }
.vip-hot .vh-more { font-size:12px; color:#3b82f6; text-decoration:none; }
.vip-hot-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.vip-hot-row::-webkit-scrollbar { display:none; }
.vip-hot-row .hg { flex:0 0 84px; text-align:center; text-decoration:none; }
.vip-hot-row .hg img { width:72px; height:72px; border-radius:10px; object-fit:cover; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.vip-hot-row .hg .hg-t { font-size:11px; color:#666; margin-top:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }