/* ============================================================
 * Candy Theme — VIP会员中心
 * 覆盖 default VIP 页样式，使用 candy 墨黑金 token
 * 守禁六：零裸 hex
 * ============================================================ */

/* ---------- Hero ---------- */
.vip-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);text-align:center;padding:60px 36px 48px;position:relative;overflow:hidden;}
.vip-hero-inner{max-width:100%;margin:0 auto;position:relative;z-index:1;}
.vip-hero-badge{display:inline-block;font-size:var(--font-size-xs);letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:14px;font-weight:var(--fw-medium);}
.vip-hero-title{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:var(--fw-semibold);color:var(--ink);line-height:1.25;margin-bottom:16px;}
.vip-hero-subtitle{font-size:var(--font-size-md);color:var(--muted);line-height:1.8;max-width:520px;margin:0 auto 24px;}
.vip-hero-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:28px;}
.vip-stat{text-align:center;}
.vip-stat-num{display:block;font-family:var(--serif);font-size: var(--fs-3xl);font-weight:var(--fw-semibold);color:var(--ink);}
.vip-stat-label{font-size: var(--fs-sm);color:var(--muted);margin-top:4px;display:block;}

/* ---------- 会员等级卡片 ---------- */
.vip-section{padding:56px 0;}
.vip-section-alt{background:var(--bg-soft);}
.vip-section-header{text-align:center;margin-bottom:40px;}
.vip-section-title{font-family:var(--serif);font-size: var(--fs-3xl);font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:8px;}
.vip-section-desc{font-size:var(--font-size-sm);color:var(--muted);}
.vip-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:1440px;margin:0 auto;}
.vip-plan-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:32px 24px 28px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);position:relative;}
.vip-plan-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);}
.vip-plan-card-hot{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow);}
.vip-plan-card-current{border-color:var(--gold);background:rgba(var(--gold-rgb),.02);}
.vip-plan-hot-tag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--bg);font-size: var(--fs-xs2);padding:4px 16px;border-radius:0 0 999px 999px;font-weight:var(--fw-medium);}
.vip-plan-current-tag{position:absolute;top:12px;right:12px;font-size: var(--fs-xs);padding:2px 8px;border-radius:var(--radius-pill);background:var(--gold-soft);color:var(--gold);}
.vip-plan-icon{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size: var(--fs-2xl2);line-height:1;background:var(--gold-soft);color:var(--gold);}
.vip-plan-icon svg,.vip-plan-icon .vip-badge-ic{width:28px;height:28px;color:var(--gold);}
.vip-plan-name{font-family:var(--serif);font-size: var(--fs-lg);font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:12px;}
.vip-plan-price{margin-bottom:12px;}
.vip-plan-price-symbol{font-size:var(--font-size-sm);color:var(--muted);vertical-align:super;}
.vip-plan-price-num{font-family:var(--serif);font-size:36px;font-weight:var(--fw-semibold);color:var(--ink);}
.vip-plan-price-period{font-size:var(--font-size-sm);color:var(--muted);}
.vip-plan-price-free{font-size: var(--fs-xl);font-weight:var(--fw-medium);color:var(--muted);}
.vip-plan-desc{font-size: var(--fs-sm);color:var(--muted);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.vip-plan-features{list-style:none;padding:0;margin:0 0 24px;text-align:left;}
.vip-plan-features li{padding:6px 0;font-size: var(--fs-sm);position:relative;display:flex;align-items:center;gap:8px;}
.vip-feat-ic{flex:0 0 auto;display:inline-flex;line-height:1;}
.vip-feat-ic svg{width:15px;height:15px;}
.vip-feat-yes{color:var(--ink);}
.vip-feat-yes .vip-feat-ic{color:var(--gold);}
.vip-feat-no{color:var(--faint);text-decoration:line-through;}
.vip-feat-no .vip-feat-ic{color:var(--faint);}
/* 核心权益（实时）：严格按该套餐 perms 渲染，后台关闭项显示叉号标记，与 features 文案互补不矛盾 */
.vip-plan-perms{margin:0 0 22px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);text-align:left;}
.vip-pp-title{font-size: var(--fs-xs2);font-weight:var(--fw-semibold);letter-spacing:.05em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;}
.vip-pp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
.vip-pp-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0;}
.vip-pp-ic{width:18px;text-align:center;flex:0 0 auto;}
.vip-pp-name{flex:1 1 auto;color:var(--ink);}
.vip-pp-mark{margin-left:auto;font-size: var(--fs-sm);flex:0 0 auto;}
.vip-pp-yes .vip-pp-name{color:var(--ink);}
.vip-pp-yes .vip-pp-mark{color:var(--gold);}
.vip-pp-no .vip-pp-name{color:var(--faint);text-decoration:line-through;}
.vip-pp-no .vip-pp-mark{color:var(--faint);}

/* vip_icon 内联 SVG 尺寸（守禁六·无 emoji，全部 SVG，颜色走 currentColor） */
.vip-pp-ic svg,.vip-pp-mark svg{width:16px;height:16px;flex:0 0 auto;}
.vip-perk-icon svg{width:26px;height:26px;color:var(--gold);}
.vip-compare-icon svg{width:18px;height:18px;vertical-align:-4px;color:var(--gold);}
.vip-cmp-ic svg{width:16px;height:16px;vertical-align:-3px;}
.vip-pay-method-icon{display:inline-flex;align-items:center;}
.vip-pay-method-icon svg{width:22px;height:22px;}
.vip-pay-success-icon svg{width:26px;height:26px;}
.vip-pp-quota{font-style:normal;font-size: var(--fs-xs2);color:var(--gold-deep);background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--radius,8px);padding:1px 6px;margin-left:6px;white-space:nowrap;}
.vip-plan-btn{display:inline-block;padding:10px 28px;border-radius:var(--radius-pill);border:none;font-size:var(--font-size-sm);font-family:var(--sans);cursor:pointer;transition:.2s;width:100%;color:var(--bg);background:var(--gold);}
.vip-plan-btn:hover{background:var(--gold-hover);}
.vip-plan-btn-free{background:var(--bg-soft);color:var(--muted);cursor:default;border:1px solid var(--line);}
.vip-plan-btn-current{background:var(--gold-soft);color:var(--gold);cursor:default;border:1px solid var(--gold);}

/* ---------- 权益对比 ---------- */
.vip-compare-table{width:100%;border-collapse:collapse;max-width:720px;margin:0 auto;font-size:var(--font-size-sm);}
.vip-compare-table th,.vip-compare-table td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--line);}
.vip-compare-table th:first-child,.vip-compare-table td:first-child{text-align:left;font-weight:var(--fw-medium);color:var(--ink);}
.vip-compare-table th{background:var(--bg-soft);font-size: var(--fs-sm);color:var(--muted);font-weight:var(--fw-medium);}
.vip-compare-table .yes{color:var(--gold);}
.vip-compare-table .no{color:var(--faint);}
.vip-content-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:var(--transition);display:block;color:inherit;text-decoration:none;}
.vip-content-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.vip-content-cover{aspect-ratio:16/10;overflow:hidden;background:var(--bg-deeper);position:relative;}
.vip-content-cover img{width:100%;height:100%;object-fit:cover;}
.vip-content-body{padding:12px 14px 14px;}
.vip-content-body h4{font-size:var(--font-size-sm);font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:4px;}
.vip-content-body p{font-size:var(--font-size-xs);color:var(--muted);line-height:1.5;}

/* ---------- 响应式 ---------- */
@media(max-width:720px){
  .vip-hero{padding:40px 20px 32px;}
  .vip-hero-stats{gap:24px;}
  .vip-section{padding:36px 0;}
  .vip-plans{grid-template-columns:1fr;}
}

/* ---------- 当前等级状态（hero 内） ---------- */
.vip-hero-status{margin-top:24px;}
.vip-badge-active{display:inline-flex;align-items:center;gap:6px;font-size: var(--fs-sm);color:var(--gold);background:var(--gold-soft);padding:6px 16px;border-radius:var(--radius-pill);}

/* ---------- 权益对比容器 ---------- */
.vip-compare-table-wrap{max-width:720px;margin:0 auto;overflow-x:auto;}

/* ---------- VIP 专属内容（tabs / panels） ---------- */
.vip-content-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;}
.vip-ctab{font-size: var(--fs-sm);padding:8px 20px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;transition:.2s;font-family:var(--sans);}
.vip-ctab:hover{border-color:var(--gold);color:var(--gold);}
.vip-ctab.active{background:var(--gold);color:var(--bg);border-color:var(--gold);}
.vip-content-panel{display:none;}
.vip-content-panel.active{display:block;}
.vip-content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:980px;margin:0 auto;}
.vip-cover-badge{position:absolute;top:8px;left:8px;font-size: var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.05em;color:var(--bg);background:var(--gold);padding:2px 8px;border-radius:var(--radius-pill);z-index:1;}
.vip-content-more{text-align:center;margin-top:28px;}
.vip-more-btn{display:inline-block;font-size:var(--font-size-sm);color:var(--gold);border:1px solid var(--line);padding:9px 26px;border-radius:var(--radius-pill);transition:.2s;}
.vip-more-btn:hover{border-color:var(--gold);background:var(--gold-soft);}

/* ---------- 特权亮点 ---------- */
.vip-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.vip-perk{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);}
.vip-perk-icon{font-size:26px;margin-bottom:10px;line-height:1;}
.vip-perk-title{font-family:var(--serif);font-size:var(--font-size-lg);font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:6px;}
.vip-perk-desc{font-size: var(--fs-sm);color:var(--muted);line-height:1.8;}
@media(max-width:980px){.vip-perks{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.vip-perks{grid-template-columns:1fr;}}

/* ---------- FAQ 手风琴 ---------- */
.vip-faq-list{max-width:720px;margin:0 auto;border-top:1px solid var(--line);}
.vip-faq-item{border-bottom:1px solid var(--line);}
.vip-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4px;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:var(--font-size-md);color:var(--ink);text-align:left;}
.vip-faq-q:hover{color:var(--gold);}
.vip-faq-arrow{color:var(--faint);transition:transform .2s;flex-shrink:0;}
.vip-faq-item.open .vip-faq-arrow{transform:rotate(180deg);}
.vip-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.vip-faq-item.open .vip-faq-a{max-height:260px;}
.vip-faq-a p{padding:0 4px 18px;font-size:var(--font-size-sm);color:var(--muted);line-height:1.9;}

/* ---------- 升级 CTA ---------- */
.vip-cta{background:var(--bg-soft);border-top:1px solid var(--line);}
.vip-cta-inner{max-width:680px;margin:0 auto;text-align:center;padding:56px 28px;}
.vip-cta-title{font-family:var(--serif);font-size:26px;font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:10px;}
.vip-cta-desc{font-size:var(--font-size-sm);color:var(--muted);margin-bottom:24px;}
.vip-cta-btns{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;}
.vip-cta-btn{display:inline-block;padding:12px 32px;border-radius:var(--radius-pill);background:var(--gold);color:var(--bg);font-size:var(--font-size-sm);font-family:var(--sans);cursor:pointer;border:none;transition:.2s;text-decoration:none;}
.vip-cta-btn:hover{background:var(--gold-hover);}
.vip-cta-link{font-size: var(--fs-sm);color:var(--muted);}
.vip-cta-link:hover{color:var(--gold);}

/* ---------- 支付弹窗 ---------- */
.vip-pay-modal{display:none;position:fixed;inset:0;z-index:120;align-items:flex-start;justify-content:center;padding-top:100px;background:rgba(var(--ink-rgb),.5);}
.vip-pay-modal.show{display:flex;}
.vip-pay-modal-mask{position:absolute;inset:0;cursor:pointer;}
.vip-pay-modal-box{position:relative;width:420px;max-width:92vw;background:var(--bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:28px 26px;animation:vipSlideDown .25s ease;}
.vip-pay-modal-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border:none;border-radius:50%;background:var(--bg-soft);color:var(--muted);font-size: var(--fs-lg);cursor:pointer;line-height:1;}
.vip-pay-modal-close:hover{color:var(--ink);}
.vip-pay-title{font-family:var(--serif);font-size: var(--fs-xl);font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:14px;}
.vip-pay-plan-info{font-size:var(--font-size-sm);color:var(--muted);margin-bottom:18px;}
.vip-pay-methods-title{font-size: var(--fs-sm);color:var(--faint);margin-bottom:10px;}
.vip-pay-methods{display:flex;gap:12px;margin-bottom:18px;}
.vip-pay-method{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--muted);font-size:var(--font-size-sm);cursor:pointer;transition:.2s;font-family:var(--sans);}
.vip-pay-method:hover{border-color:var(--gold);color:var(--ink);}
.vip-pay-method.active{border-color:var(--gold);background:var(--gold-soft);color:var(--gold);}
.vip-pay-qr{margin-bottom:18px;}
.vip-pay-qr-placeholder{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:24px;text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.vip-pay-qr-spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:vipSpin .8s linear infinite;}
.vip-pay-qr-spinner[hidden]{display:none;}
.vip-pay-qr-amount{font-family:var(--serif);font-size: var(--fs-xl);font-weight:var(--fw-semibold);color:var(--ink);}
.vip-pay-submit{width:100%;padding:12px;border:none;border-radius:var(--radius-pill);background:var(--gold);color:var(--bg);font-size:var(--font-size-md);font-family:var(--sans);cursor:pointer;transition:.2s;}
.vip-pay-submit:hover{background:var(--gold-hover);}
.vip-pay-submit:disabled{opacity:.6;cursor:default;}
.vip-pay-tip{font-size:var(--font-size-xs);color:var(--faint);text-align:center;margin-top:12px;}
.vip-pay-qr-show{display:flex;flex-direction:column;align-items:center;gap:10px;}
.vip-pay-qr-img{width:160px;height:160px;border-radius:var(--radius-2);}
.vip-pay-qr-tip{font-size: var(--fs-sm);color:var(--muted);}
.vip-pay-success{text-align:center;padding:10px 0;}
.vip-pay-success-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--success);color:var(--bg);font-size: var(--fs-2xl2);display:grid;place-items:center;}
.vip-pay-success p{font-size:var(--font-size-sm);color:var(--ink);margin-bottom:14px;}
.vip-pay-success-link{display:inline-block;padding:9px 24px;border-radius:var(--radius-pill);background:var(--gold);color:var(--bg);font-size:var(--font-size-sm);}
@keyframes vipSpin{to{transform:rotate(360deg);}}
@keyframes vipSlideDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}