/* ============================================================
 * 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:680px;margin:0 auto;position:relative;z-index:1;}
.vip-hero-badge{display:inline-block;font-size:12px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:14px;font-weight:500;}
.vip-hero-title{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:600;color:var(--ink);line-height:1.25;margin-bottom:16px;}
.vip-hero-subtitle{font-size:15px;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:28px;font-weight:600;color:var(--ink);}
.vip-stat-label{font-size:13px;color:var(--muted);margin-top:4px;display:block;}

/* ---------- 会员等级卡片 ---------- */
.vip-section{padding:56px 0;}
.vip-section-alt{background:var(--bg-soft);}
.container{max-width:var(--maxw,1240px);margin:0 auto;padding:0 28px;}
.vip-section-header{text-align:center;margin-bottom:40px;}
.vip-section-title{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.vip-section-desc{font-size:14px;color:var(--muted);}
.vip-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:1100px;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:11px;padding:4px 16px;border-radius:0 0 999px 999px;font-weight:500;}
.vip-plan-current-tag{position:absolute;top:12px;right:12px;font-size:10px;padding:2px 8px;border-radius:999px;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:24px;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:18px;font-weight:600;color:var(--ink);margin-bottom:12px;}
.vip-plan-price{margin-bottom:12px;}
.vip-plan-price-symbol{font-size:14px;color:var(--muted);vertical-align:super;}
.vip-plan-price-num{font-family:var(--serif);font-size:36px;font-weight:600;color:var(--ink);}
.vip-plan-price-period{font-size:14px;color:var(--muted);}
.vip-plan-price-free{font-size:20px;font-weight:500;color:var(--muted);}
.vip-plan-desc{font-size:13px;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:13px;padding-left:20px;position:relative;}
.vip-feat-yes{color:var(--ink);}
.vip-feat-yes::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:600;}
.vip-feat-no{color:var(--faint);text-decoration:line-through;}
.vip-feat-no::before{content:"✗";position:absolute;left:0;color:var(--faint);}
.vip-plan-btn{display:inline-block;padding:10px 28px;border-radius:999px;border:none;font-size:14px;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:700px;margin:0 auto;font-size:14px;}
.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:500;color:var(--ink);}
.vip-compare-table th{background:var(--bg-soft);font-size:13px;color:var(--muted);font-weight:500;}
.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);}
.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);}
.vip-content-cover img{width:100%;height:100%;object-fit:cover;}
.vip-content-body{padding:12px 14px 14px;}
.vip-content-body h4{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.vip-content-body p{font-size:12px;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:13px;color:var(--gold);background:var(--gold-soft);padding:6px 16px;border-radius:999px;}

/* ---------- 权益对比容器 ---------- */
.vip-compare-table-wrap{max-width:700px;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:13px;padding:8px 20px;border-radius:999px;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:900px;margin:0 auto;}
.vip-content-card{display:block;color:inherit;text-decoration:none;}
.vip-content-cover{position:relative;}
.vip-cover-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--bg);background:var(--gold);padding:2px 8px;border-radius:999px;z-index:1;}
.vip-content-more{text-align:center;margin-top:28px;}
.vip-more-btn{display:inline-block;font-size:14px;color:var(--gold);border:1px solid var(--line);padding:9px 26px;border-radius:999px;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:17px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.vip-perk-desc{font-size:13px;color:var(--muted);line-height:1.8;}
@media(max-width:960px){.vip-perks{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.vip-perks{grid-template-columns:1fr;}}

/* ---------- FAQ 手风琴 ---------- */
.vip-faq-list{max-width:760px;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:15px;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:14px;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:600;color:var(--ink);margin-bottom:10px;}
.vip-cta-desc{font-size:14px;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:999px;background:var(--gold);color:var(--bg);font-size:14px;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:13px;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:18px;cursor:pointer;line-height:1;}
.vip-pay-modal-close:hover{color:var(--ink);}
.vip-pay-title{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:14px;}
.vip-pay-plan-info{font-size:14px;color:var(--muted);margin-bottom:18px;}
.vip-pay-methods-title{font-size:13px;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:14px;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:20px;font-weight:600;color:var(--ink);}
.vip-pay-submit{width:100%;padding:12px;border:none;border-radius:999px;background:var(--gold);color:var(--bg);font-size:15px;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:12px;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:8px;}
.vip-pay-qr-tip{font-size:13px;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:24px;display:grid;place-items:center;}
.vip-pay-success p{font-size:14px;color:var(--ink);margin-bottom:14px;}
.vip-pay-success-link{display:inline-block;padding:9px 24px;border-radius:999px;background:var(--gold);color:var(--bg);font-size:14px;}
@keyframes vipSpin{to{transform:rotate(360deg);}}
@keyframes vipSlideDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}