/* =========================================================
   VIP 方案2 · V4 ）
   作用域 .vip2-page；默认浅色，深色由 data-bs-theme / body.dark-open 覆写
   容器宽度遵守父主题 .container（site_container_width），仅还原内边距
   ========================================================= */
.vip2-page{
  --surface:#fff;--surface2:#f2f4f9;--text:#192239;--muted:#68758d;--line:#e3e7f0;
  --primary:#6953e6;--primaryGlow:rgba(105,83,230,.075);--featured:#f5f2ff;
  --button:#202741;--buttonText:#fff;--success:#128c69;--shadow:0 15px 45px rgba(32,49,101,.055);
  --edge:inset 0 1px 0 rgba(255,255,255,.75);--save:#0f8a63;--saveGlow:rgba(18,140,105,.1);
  --primary2:#8f7bff;--promo:#f2683c;--promo2:#ff9166;--promoGlow:rgba(242,104,60,.14);
  --planGlow:rgba(105,83,230,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:Inter,'Noto Sans SC',sans-serif;color:var(--text);
}
html[data-bs-theme=dark] .vip2-page,
body.dark-open .vip2-page{
  --surface:#171d2b;--surface2:#1d2535;--text:#f6f7fc;--muted:#99a4b7;--line:#2b3446;
  --primary:#8976ff;--primaryGlow:rgba(137,118,255,.15);--featured:#24213c;
  --button:#f7f7ff;--buttonText:#121724;--success:#75d8b3;--shadow:0 14px 48px rgba(0,0,0,.16);
  --edge:inset 0 1px 0 rgba(255,255,255,.05);--save:#75d8b3;--saveGlow:rgba(117,216,179,.12);
  --primary2:#a394ff;--promo:#ff8f63;--promo2:#ffb08a;--promoGlow:rgba(255,143,99,.16);
  --planGlow:rgba(137,118,255,.3);
}
html.vip2-anim .vip2-io:not(.vip2-plan){opacity:0;transform:translateY(16px)}
html.vip2-anim .vip2-io:not(.vip2-plan).vip2-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.vip2-anim .vip2-plan.vip2-io{--rv-y:26px;--rv-rx:7deg;--rv-s:.965;opacity:0}
html.vip2-anim .vip2-plan.vip2-io.vip2-in{--rv-y:0px;--rv-rx:0deg;--rv-s:1;opacity:1}
.vip2-page *{box-sizing:border-box}
.vip2-page a:not(.vip2-action){color:inherit;text-decoration:none}
.vip2-page h1,.vip2-page h2,.vip2-page p,.vip2-page ul{margin-top:0}
.vip2-page h1,.vip2-page h2{color:var(--text);font-weight:800}
.vip2-page .vip2-main{position:relative;z-index:0;padding-left:24px;padding-right:24px}
.vip2-main::before{content:'';position:absolute;left:50%;top:110px;width:min(920px,92%);height:560px;transform:translateX(-50%);pointer-events:none;z-index:-1;background:radial-gradient(closest-side,var(--planGlow),transparent 72%);opacity:.75}

.vip2-hero{position:relative;z-index:0;text-align:center;padding:48px 0 29px}
.vip2-hero::before,.vip2-hero::after{content:'';position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:-1}
.vip2-hero::before{width:240px;height:240px;left:-18px;top:-36px;background:var(--planGlow);animation:vip2-drift 17s var(--ease) infinite alternate}
.vip2-hero::after{width:200px;height:200px;right:-14px;top:8px;background:var(--primaryGlow);animation:vip2-drift 21s var(--ease) infinite alternate-reverse}
@keyframes vip2-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(34px,24px,0) scale(1.14)}
  100%{transform:translate3d(-22px,40px,0) scale(.92)}
}
.vip2-hero h1{font-size:clamp(30px,4vw,47px);line-height:1.25;letter-spacing:-1.8px;margin:0 0 14px;font-weight:800}
.vip2-hero h1 span{color:var(--primary)}
.vip2-hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}

.vip2-plans{display:grid;grid-template-columns:repeat(var(--vip2-cols,3),minmax(0,1fr));gap:17px;align-items:stretch}
.vip2-plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:25px 25px 23px;display:flex;flex-direction:column;box-shadow:var(--shadow),var(--edge);overflow:hidden;transform:perspective(1000px) translateY(calc(var(--rv-y,0px) - var(--lift,0px))) rotateX(calc(var(--rv-rx,0deg) + var(--rx,0deg))) rotateY(var(--ry,0deg)) scale(var(--rv-s,1));transition:transform .5s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.vip2-plan::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary) 50%,transparent);opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:2}
.vip2-plan::after{content:'';position:absolute;inset:-1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-12%),var(--planGlow),transparent 72%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.vip2-plan:hover,html.vip2-anim .vip2-plan.vip2-io.vip2-in:hover{--lift:6px;border-color:var(--primary);box-shadow:0 24px 58px var(--planGlow),var(--edge)}
.vip2-plan:hover::before,html.vip2-anim .vip2-plan.vip2-io.vip2-in:hover::before,
.vip2-plan:hover::after,html.vip2-anim .vip2-plan.vip2-io.vip2-in:hover::after{opacity:1}
.vip2-plan.vip2-featured{background:var(--featured);border:1.5px solid var(--primary);box-shadow:0 15px 50px var(--primaryGlow),var(--edge)}
.vip2-plan.vip2-featured::before{opacity:1}
.vip2-plan.vip2-featured::after{opacity:1;animation:vip2-breathe 4.6s var(--ease) infinite}
@keyframes vip2-breathe{0%,100%{opacity:.5}50%{opacity:1}}
.vip2-plan.vip2-lifetime{
  border:1.5px solid transparent;
  background:linear-gradient(var(--featured),var(--featured)) padding-box,linear-gradient(100deg,var(--primary),var(--primary2) 25%,var(--primary) 50%,var(--primary2) 75%,var(--primary)) border-box;
  background-size:auto,220% 100%;
  box-shadow:0 20px 58px var(--planGlow),var(--edge);
  animation:vip2-borderflow 6.5s linear infinite;
}
@keyframes vip2-borderflow{0%{background-position:0 0,0% 50%}100%{background-position:0 0,200% 50%}}
.vip2-lifetime .vip2-cur,.vip2-lifetime .vip2-period{color:var(--primary)}
.vip2-lifetime .vip2-price{color:var(--primary)}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .vip2-lifetime .vip2-price{
    background-image:linear-gradient(100deg,var(--primary),var(--primary2) 30%,var(--primary) 65%,var(--primary2));
    background-size:240% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:vip2-flow 5.5s linear infinite;
  }
}
@keyframes vip2-flow{0%{background-position:0% 50%}100%{background-position:240% 50%}}
.vip2-plantop{display:flex;align-items:center;justify-content:space-between;min-height:24px}
.vip2-plantitle{font-size:17px;font-weight:750}
.vip2-recommend{color:#fff;font-weight:700;font-size:11px;background:linear-gradient(135deg,var(--primary2),var(--primary));padding:6px 11px;border-radius:20px;letter-spacing:.2px;box-shadow:0 6px 16px var(--primaryGlow)}
.vip2-plandesc{font-size:12px;color:var(--muted);margin:8px 0 21px}
.vip2-prow{display:flex;align-items:baseline;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.vip2-cur{font-size:14px;font-weight:750;color:var(--muted);margin-right:2px}
.vip2-price{font-size:45px;line-height:1;font-weight:800;letter-spacing:-2.7px;font-variant-numeric:tabular-nums}
.vip2-price-txt{font-size:26px;letter-spacing:-1px}
.vip2-period{font-size:12px;color:var(--muted);margin-left:2px}
.vip2-origin{font-size:13px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--promo);text-decoration-thickness:1px;margin-left:3px;font-variant-numeric:tabular-nums}
.vip2-pnote{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:12px;min-height:18px}
.vip2-pnote strong{color:var(--primary)}
.vip2-flash{color:#fff;font-size:10px;font-weight:750;padding:3px 8px;border-radius:20px;background:linear-gradient(135deg,var(--promo2),var(--promo));box-shadow:0 5px 14px var(--promoGlow)}
.vip2-save{color:var(--save);font-size:10px;font-weight:750;padding:3px 8px;border-radius:20px;background:var(--saveGlow)}
.vip2-pnote-boss{color:var(--primary);font-weight:750;padding:3px 11px;border-radius:20px;background:var(--primaryGlow);box-shadow:inset 0 0 0 1px var(--planGlow)}
.vip2-pdiv{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:24px 0 19px}
.vip2-feats{display:flex;flex-direction:column;gap:15px;list-style:none;margin:0 0 25px;padding:0;flex:1}
.vip2-feats li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.5}
.vip2-check{width:18px;height:18px;border-radius:50%;background:var(--saveGlow);color:var(--success);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vip2-feats strong{font-weight:750}
.vip2-action{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:46px;border:0;border-radius:12px;background-color:var(--button);background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12));color:var(--buttonText);text-decoration:none;font-size:13.5px;font-weight:750;letter-spacing:.2px;-webkit-appearance:none;appearance:none;transform:translate(var(--mag-x,0px),calc(var(--mag-y,0px) + var(--lift,0px)));transition:filter .2s var(--ease),transform .18s var(--ease),box-shadow .25s var(--ease)}
.vip2-action::after{content:'';position:absolute;top:-12%;bottom:-12%;left:-60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.vip2-action:hover{--lift:-2px;filter:brightness(1.06);box-shadow:0 2px 4px rgba(16,24,40,.12),0 10px 24px -4px var(--planGlow),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.2)}
.vip2-action:hover::after{opacity:1;animation:vip2-sweep .9s var(--ease)}
.vip2-action:active{--lift:1px;box-shadow:0 1px 2px rgba(16,24,40,.14),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.18)}
.vip2-action:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.vip2-action.disabled,.vip2-action[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.vip2-action.disabled:hover,.vip2-action[disabled]:hover{filter:none;transform:none;box-shadow:none}
.vip2-action.disabled::after,.vip2-action[disabled]::after{animation:none;opacity:0}
.vip2-featured .vip2-action{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2))}
@keyframes vip2-sweep{from{left:-60%}to{left:135%}}
.vip2-under{font-size:12px;color:var(--muted);text-align:center;margin:21px 0 0}

.vip2-below{margin-top:82px}
.vip2-sectitle{font-size:25px;letter-spacing:-.7px;margin:0 0 10px;font-weight:800}
.vip2-sectitle::before,.vip2-faq h2::before{content:'';display:block;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--primary),var(--primary2));margin-bottom:14px}
.vip2-secsub{color:var(--muted);font-size:13px;margin:0 0 27px;line-height:1.8}
.vip2-compare{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow),var(--edge)}
.vip2-crow{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;align-items:center;min-height:60px;border-top:1px solid var(--line)}
.vip2-crow:first-child{border-top:none}
.vip2-crow>div{padding:17px 25px;font-size:13px;transition:background .22s var(--ease)}
.vip2-crow:not(.vip2-chead):hover>div{background:var(--primaryGlow)}
.vip2-chead{background:var(--surface2);font-weight:750}
.vip2-crow>div:not(:first-child){text-align:center}
.vip2-compare .vip2-pos{color:var(--success);font-weight:750}
.vip2-compare .vip2-vip{color:var(--success);font-weight:600}
.vip2-compare .vip2-hl{color:var(--primary);font-weight:750}
.vip2-compare .vip2-dim{color:var(--muted)}

.vip2-info{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:79px 0 90px}
.vip2-faq h2,.vip2-closing h2{font-size:23px;letter-spacing:-.6px;margin:0 0 21px}
.vip2-faq details{border-bottom:1px solid var(--line);padding:16px 0;transition:border-color .22s var(--ease)}
.vip2-faq summary{cursor:pointer;list-style:none;font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:15px;transition:color .2s var(--ease)}
.vip2-faq summary::-webkit-details-marker{display:none}
.vip2-faq summary::after{content:'+';font-size:18px;font-weight:400;color:var(--muted);line-height:1;transition:color .2s var(--ease)}
.vip2-faq details:hover{border-color:var(--primary)}
.vip2-faq details:hover summary,.vip2-faq details[open] summary{color:var(--primary)}
.vip2-faq details:hover summary::after{color:var(--primary)}
.vip2-faq details[open] summary::after{content:'−'}
.vip2-faq p{font-size:12px;line-height:1.85;color:var(--muted);margin:12px 0 0}
.vip2-closing{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow),var(--edge);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.vip2-closing:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 18px 46px var(--planGlow),var(--edge)}
.vip2-closing h2{margin-bottom:11px}
.vip2-closing p{font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 24px}
.vip2-closing .vip2-action{align-self:flex-start;padding:0 26px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}

.vip2-cd{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:8px 18px 8px 8px;border:1px solid var(--line);background:var(--surface);border-radius:40px;box-shadow:var(--shadow)}
.vip2-cd-tag{background:var(--primary);color:#fff;font-size:11px;font-weight:750;padding:6px 11px;border-radius:30px;letter-spacing:.3px;flex:none}
.vip2-cd-units{display:flex;align-items:baseline;gap:4px}
.vip2-cd-u{display:flex;align-items:baseline;gap:3px}
.vip2-cd-u b{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;min-width:24px;text-align:center}
.vip2-cd-u i{font-style:normal;font-size:10px;color:var(--muted)}
.vip2-cd-sep{color:var(--muted);font-size:13px;font-weight:700}
.vip2-cd-expired{font-size:13px;font-weight:700;color:var(--muted);padding:5px 10px}

@media(prefers-reduced-motion:reduce){
  html.vip2-anim .vip2-io{opacity:1;transform:none}
  html.vip2-anim .vip2-plan.vip2-io{--rv-y:0px;--rv-rx:0deg;--rv-s:1;opacity:1}
  .vip2-plan,.vip2-plan:hover,.vip2-closing,.vip2-closing:hover,.vip2-action,.vip2-action:active,
  html.vip2-anim .vip2-plan.vip2-io.vip2-in:hover{transition:none;transform:none}
  .vip2-plan::before,.vip2-plan::after{transition:none}
  .vip2-plan.vip2-featured::after,.vip2-plan.vip2-lifetime,.vip2-lifetime .vip2-price,
  .vip2-hero::before,.vip2-hero::after{animation:none}
  .vip2-action::after{animation:none;opacity:0}
}

@media(max-width:800px){
  .vip2-hero{padding:37px 0 26px}
  .vip2-hero::before,.vip2-hero::after{filter:blur(34px)}
  .vip2-main::before{top:80px;height:440px;opacity:.55}
  .vip2-plans{gap:11px}
  .vip2-plan{padding:20px 16px}
  .vip2-price{font-size:39px}
  .vip2-origin{font-size:12px}
  .vip2-feats li{font-size:12px}
  .vip2-below{margin-top:62px}
}
@media(max-width:650px){
  .vip2-page .vip2-main{padding-left:17px;padding-right:17px}
  .vip2-hero::before,.vip2-hero::after{display:none}
  .vip2-main::before{top:60px;height:360px;opacity:.45}
  .vip2-cd{margin-top:20px;gap:9px;padding:6px 13px 6px 6px}
  .vip2-cd-tag{padding:5px 9px;font-size:10px}
  .vip2-cd-u b{font-size:15px;min-width:21px}
  .vip2-hero{padding:38px 0 27px}
  .vip2-hero h1{font-size:31px;letter-spacing:-1.3px}
  .vip2-hero p{font-size:12px}
  .vip2-hero p br{display:none}
  .vip2-plans{grid-template-columns:1fr;gap:13px}
  .vip2-plan{padding:21px}
  .vip2-plandesc{margin-bottom:14px}
  .vip2-pdiv{margin:17px 0}
  .vip2-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
  .vip2-feats li{font-size:12px}
  .vip2-check{width:17px;height:17px;font-size:9px}
  .vip2-closing:hover{transform:none}
  .vip2-price{font-size:43px}
  .vip2-below{margin-top:65px}
  .vip2-sectitle{font-size:22px}
  .vip2-crow{grid-template-columns:1.05fr 1fr 1fr 1fr}
  .vip2-crow>div{padding:14px 8px;font-size:11px}
  .vip2-crow>div:first-child{padding-left:14px}
  .vip2-info{grid-template-columns:1fr;gap:32px;margin:62px 0}
  .vip2-closing{padding:27px}
}