body.membership-reference #content{--bg:#080808;--panel:#191919;--text:#f2f2f2;--muted:#a1a1a1;--line:#303030;--accent:#56d5ef;--soft:#262626;background:#080808;color:#f2f2f2}
body.membership-reference .main,body.membership-reference #content{background:#080808}
.membership-reference .pricing-page{color:#f2f2f2;--panel:#191919;--line:#303030;--muted:#a1a1a1;--text:#f2f2f2}
.membership-reference .pricing-banner{position:relative;min-height:150px;padding:6px 340px 6px 28px;background:radial-gradient(ellipse at 85% 10%,#5960c677,transparent 60%),linear-gradient(115deg,#073d46,#101d37);border:1px solid #303342;border-radius:20px}
.membership-reference .pricing-banner h1{font-size:25px}.membership-reference .pricing-banner p{color:#c7e0df}
.poster-clock{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:270px;text-align:center}.poster-clock-label{display:block;font-size:11px;color:#93c6ca;margin-bottom:12px}.poster-clock-units{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.poster-clock-units b{display:block;font-size:30px;line-height:1.15;font-weight:650;font-variant-numeric:tabular-nums;color:#fff}.poster-clock-units small{display:block;font-size:10px;color:#c1d6d8;margin-top:7px}
.membership-reference .pricing-tabs button[aria-selected=true]{border-color:#fff;color:#fff}.membership-reference .pricing-school{background:#222;border-color:#3b3b3b;box-shadow:none}.membership-reference .pricing-school button[aria-pressed=true]{background:#444;color:#fff}
.membership-reference .pricing-page .offer-card{background:#111;border-color:#343434;border-radius:20px}.membership-reference .offer-main{background:linear-gradient(130deg,#303030,#262626);border-radius:18px}.membership-reference .offer-ribbon{background:#222;color:#c5c5c5}.membership-reference .offer-saving{color:#c6c6c6}.membership-reference .offer-card h3,.membership-reference .plan-price,.membership-reference .offer-quota{color:#f4f4f4}
.membership-reference .pricing-page .offer-3{border-color:#4ed4ee}.membership-reference .offer-3 .offer-ribbon{background:#4ed4ee;color:#08252c}.membership-reference .pricing-page .offer-3 .offer-main{background:linear-gradient(130deg,#1d3540,#21303b)}
.membership-reference .pricing-page .offer-4{border-color:#ff741b}.membership-reference .offer-4 .offer-ribbon{background:#ff741b;color:white}.membership-reference .pricing-page .offer-4 .offer-main{background:linear-gradient(130deg,#392017,#291a17)}
.membership-reference .pricing-page .member-buy{background:#eee;color:#161616}.membership-reference .pricing-page .offer-3 .member-buy{background:#52d4ee;color:#08252c}.membership-reference .pricing-page .offer-4 .member-buy{background:#ff741b;color:#fff}
.membership-reference .offer-benefits li span{color:#54d4ed}.membership-reference .offer-4 .offer-benefits li span{color:#ff8b44}.membership-reference .credit-pack{background:#242424;border-color:#3b3b3b}.membership-reference .credit-pack .plan-price{color:#59d7ef}.membership-reference .credit-purpose,.membership-reference .team-discounts{background:#183039;border-color:#31535c;color:#c8e8ef}
.membership-reference .button.secondary{background:#191919;color:#d8d8d8;border-color:#3c3c3c}.membership-reference .team-offer{background:#171717}.membership-reference .pricing-tabs{border-color:#292929}
@media(max-width:760px){.membership-reference .pricing-banner{padding:24px;min-height:0}.poster-clock{position:static;transform:none;width:100%;margin-top:22px;max-width:280px;text-align:left}.poster-clock-units{text-align:center}.poster-clock-units b{font-size:26px}}

/* Follow the site's existing body.dark toggle, including saved theme choice. */
body.membership-reference:not(.dark) #content{--bg:#f7f7f7;--panel:#fff;--text:#202020;--muted:#777;--line:#e6e6e6;--accent:#079dbb;--soft:#eceff1;background:#f7f7f7;color:#202020}
body.membership-reference:not(.dark) .main,body.membership-reference:not(.dark) #content{background:#f7f7f7}
body.membership-reference:not(.dark) .pricing-page{--panel:#fff;--text:#202020;--muted:#777;--line:#e6e6e6;color:#202020}
body.membership-reference:not(.dark) .pricing-tabs{border-color:#e5e5e5}body.membership-reference:not(.dark) .pricing-tabs button[aria-selected=true]{color:#202020;border-color:#202020}
body.membership-reference:not(.dark) .pricing-school{background:#eee;border-color:#e4e4e4}body.membership-reference:not(.dark) .pricing-school button[aria-pressed=true]{background:#fff;color:#202020;box-shadow:0 2px 6px #0000000a}
body.membership-reference:not(.dark) .pricing-page .offer-card{background:#fff;border-color:#eaeaea}
body.membership-reference:not(.dark) .offer-main{background:#fff}body.membership-reference:not(.dark) .offer-ribbon{background:#f0f0f0;color:#666}
body.membership-reference:not(.dark) .offer-card h3,body.membership-reference:not(.dark) .plan-price,body.membership-reference:not(.dark) .offer-quota{color:#202020}
body.membership-reference:not(.dark) .offer-saving{color:#777}body.membership-reference:not(.dark) .offer-quota{padding:0;background:transparent;border-radius:0}
body.membership-reference:not(.dark) .pricing-page .offer-3{border-color:#27c8e7}body.membership-reference:not(.dark) .offer-3 .offer-ribbon{background:#27c8e7;color:#073642}body.membership-reference:not(.dark) .pricing-page .offer-3 .offer-main{background:linear-gradient(#f0fbfe,#fff)}
body.membership-reference:not(.dark) .pricing-page .offer-4{border-color:#ff6b0b}body.membership-reference:not(.dark) .offer-4 .offer-ribbon{background:#ff6b0b;color:#fff}body.membership-reference:not(.dark) .pricing-page .offer-4 .offer-main{background:linear-gradient(#fff4ee,#fff)}
body.membership-reference:not(.dark) .pricing-page .member-buy{background:#eeeeef;color:#202020}body.membership-reference:not(.dark) .pricing-page .offer-3 .member-buy{background:#29c8e6;color:#06323b}body.membership-reference:not(.dark) .pricing-page .offer-4 .member-buy{background:#ff6b0b;color:#fff}
body.membership-reference:not(.dark) .offer-benefits li span{color:#049ebc}body.membership-reference:not(.dark) .offer-4 .offer-benefits li span{color:#e95b00}
body.membership-reference:not(.dark) .team-offer,body.membership-reference:not(.dark) .credit-pack{background:#fff;border-color:#e5e5e5}body.membership-reference:not(.dark) .credit-pack .plan-price{color:#079dbb}
body.membership-reference:not(.dark) .credit-purpose,body.membership-reference:not(.dark) .team-discounts{background:#eefaff;border-color:#cbeaf1;color:#28616c}
body.membership-reference:not(.dark) .button.secondary{background:#fff;color:#333;border-color:#ddd}
body.membership-reference:not(.dark) .pricing-banner h1{color:#fff}

/* Restore the site's own dark palette on the membership route. */
body.membership-reference.dark #content{--bg:#13151d;--panel:#1d202b;--text:#eff0f8;--muted:#9da1b3;--line:#303342;--accent:#7263eb;--soft:#2c2947;background:var(--bg);color:var(--text)}
body.membership-reference.dark .main,body.membership-reference.dark #content{background:var(--bg)}
body.membership-reference.dark .pricing-page{--panel:#1d202b;--text:#eff0f8;--muted:#9da1b3;--line:#303342;color:var(--text)}
body.membership-reference.dark .pricing-tabs{border-color:var(--line)}
body.membership-reference.dark .pricing-tabs button[aria-selected=true]{color:var(--text);border-color:#7864ea}
body.membership-reference.dark .pricing-school{background:#1d202b;border-color:var(--line)}
body.membership-reference.dark .pricing-school button[aria-pressed=true]{background:#7864ea;color:#fff}
body.membership-reference.dark .pricing-page .offer-card{background:#1d202b;border-color:#393d50}
body.membership-reference.dark .offer-main{background:linear-gradient(140deg,#252939,#20232f)}
body.membership-reference.dark .offer-ribbon{background:#2a2b42;color:#6095f6}
body.membership-reference.dark .offer-card h3,body.membership-reference.dark .plan-price,body.membership-reference.dark .offer-quota{color:var(--text)}
body.membership-reference.dark .offer-saving{color:#6095f6}
body.membership-reference.dark .pricing-page .offer-3{border-color:#8b78ef}
body.membership-reference.dark .offer-3 .offer-ribbon{background:#7864ea;color:#fff}
body.membership-reference.dark .pricing-page .offer-3 .offer-main{background:linear-gradient(140deg,#302c4d,#25283a)}
body.membership-reference.dark .pricing-page .offer-4{border-color:#56d0d1}
body.membership-reference.dark .offer-4 .offer-ribbon{background:#50c9ce;color:#082f38}
body.membership-reference.dark .pricing-page .offer-4 .offer-main{background:linear-gradient(140deg,#214047,#203139)}
body.membership-reference.dark .pricing-page .member-buy{background:#3a3858;color:#6095f6}
body.membership-reference.dark .pricing-page .offer-3 .member-buy{background:#7864ea;color:#fff}
body.membership-reference.dark .pricing-page .offer-4 .member-buy{background:#50c9ce;color:#082f38}
body.membership-reference.dark .offer-benefits li span{color:#6095f6}
body.membership-reference.dark .offer-4 .offer-benefits li span{color:#66d7d8}
body.membership-reference.dark .credit-pack,body.membership-reference.dark .team-offer{background:#1d202b;border-color:var(--line)}
body.membership-reference.dark .credit-purpose,body.membership-reference.dark .team-discounts{background:#252b3f;border-color:#343d58;color:#c9d6ef}
body.membership-reference.dark .button.secondary{background:#252938;color:#d5d7ee;border-color:#3a4055}

/* Sixth Dimension mark before the membership eyebrow. */
.membership-reference .pricing-banner .member-eyebrow{display:inline-flex;align-items:center;gap:8px}
.membership-reference .pricing-banner .member-eyebrow::before{content:"";width:18px;height:18px;flex:0 0 18px;background:url('/assets/logo-symbol.svg') center/contain no-repeat}

/* Highlight the limited-time permanent membership discount in the main heading. */
.membership-reference .pricing-banner .membership-sale-number{color:#56d5ef;font-size:1.28em;font-weight:850;letter-spacing:-.04em;white-space:nowrap}

/* Larger membership countdown figures with subtle centered separators. */
.membership-reference .poster-clock-units>div{position:relative}
.membership-reference .poster-clock-units>div:not(:last-child)::after{content:":";position:absolute;right:-11px;top:17px;transform:translateY(-50%);color:rgba(255,255,255,.25);font-size:27px;font-weight:500;line-height:1}
.membership-reference .poster-clock-units b{font-size:36px;font-weight:750;line-height:1.1}

/* Raise the membership tab divider by 10px without adding a second selected-tab marker. */
.membership-reference .pricing-tabs{position:relative;border-bottom-color:transparent!important}
.membership-reference .pricing-tabs::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--line)}

/* Put each limited-time discount beside its plan name, not in the card header. */
.membership-reference .offer-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:4px 0 12px;min-height:23px}
.membership-reference .offer-title-row h3{margin:0;min-height:0;flex:1}
.membership-reference .offer-discount{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap;border-radius:7px;padding:4px 7px;background:#2aaee81c;color:#38bff2;font-size:11px;font-weight:750;line-height:1.15}
.membership-reference .offer-discount--permanent{background:#ff741b22;color:#ff8a43}
body.membership-reference:not(.dark) .offer-discount{background:#dff7ff;color:#099dcc}
body.membership-reference:not(.dark) .offer-discount--permanent{background:#fff0e7;color:#f06b20}

/* Merge the selected-tab indicator with the raised divider. */
.membership-reference .pricing-tabs button[aria-selected=true]{position:relative;border-bottom:2px solid transparent!important}
.membership-reference .pricing-tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:2px;background:#7864ea}

/* In dark mode, keep the final permanent card's frame and action aligned with the daytime orange accent. */
body.membership-reference.dark .pricing-page .offer-4{border-color:#ff6b0b}
body.membership-reference.dark .offer-4 .member-buy{background:#ff6b0b;color:#fff}

/* Increase every character in the membership main heading by 3px. */
.membership-reference .pricing-banner h1{font-size:28px}
.membership-reference .pricing-banner .membership-sale-number{font-size:35px}
/* Keep the final card's frame and action button on the orange daytime accent in dark mode. */
body.membership-reference.dark .pricing-page .offer-4{border-color:#ff6b0b!important}
body.membership-reference.dark .pricing-page .offer-4 .member-buy{background:#ff6b0b!important;color:#fff!important}

/* Use the daytime orange accent for the final permanent card's header ribbon in dark mode. */
body.membership-reference.dark .offer-4 .offer-ribbon{background:#ff6b0b!important;color:#fff!important}

/* Tighten both vertical gaps around the membership main heading. */
.membership-reference .pricing-banner .member-eyebrow{display:flex;width:fit-content;margin-bottom:2px}
.membership-reference .pricing-banner h1{margin:-3px 0 3px}
.membership-reference .pricing-banner p{margin:0}

/* Give light-mode membership cards the same rounded, layered content structure as dark mode. */
body.membership-reference:not(.dark) .offer-main{border-radius:18px;background:linear-gradient(140deg,#f6f8fc,#fff)}
body.membership-reference:not(.dark) .pricing-page .offer-3 .offer-main{background:linear-gradient(140deg,#e8faff,#fff)}
body.membership-reference:not(.dark) .pricing-page .offer-4 .offer-main{background:linear-gradient(140deg,#fff4ee,#fff)}

/* Extend the ribbon color behind the rounded top corners of permanent cards. */
.membership-reference .offer-card .offer-ribbon{position:relative}
.membership-reference .offer-card .offer-ribbon::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:inherit;pointer-events:none}
.membership-reference .offer-card .offer-main{position:relative;z-index:1}

/* Preserve a visible rounded upper panel against the white benefits section. */
body.membership-reference:not(.dark) .pricing-page .offer-main{background:linear-gradient(140deg,#f1f3f8,#eceff5);border-radius:18px}
body.membership-reference:not(.dark) .pricing-page .offer-3 .offer-main{background:linear-gradient(140deg,#e7f9fd,#dcf3f9)}
body.membership-reference:not(.dark) .pricing-page .offer-4 .offer-main{background:linear-gradient(140deg,#fff2e9,#ffeadc)}

/* Fine position adjustments for the membership banner copy. */
.membership-reference .pricing-banner .member-eyebrow{position:relative;top:10px}
.membership-reference .pricing-banner p{position:relative;top:-5px}

/* Remove the visual separators between membership countdown values. */
.membership-reference .poster-clock-units>div:not(:last-child)::after{display:none}

/* Give every standard light-mode membership action the cyan reference color. */
body.membership-reference:not(.dark) .pricing-page .member-buy{background:#29c8e6;color:#06323b}
body.membership-reference:not(.dark) .pricing-page .offer-4 .member-buy{background:#ff6b0b;color:#fff}

/* Light-mode permanent cards use the reference physics-blue for the ribbon, frame and action. */
body.membership-reference:not(.dark) .pricing-page .offer-3{border-color:#2d73ee}
body.membership-reference:not(.dark) .pricing-page .offer-3 .offer-ribbon{background:linear-gradient(135deg,#5097fa 0%,#276dea 100%);color:#fff}
body.membership-reference:not(.dark) .pricing-page .offer-3 .member-buy{background:linear-gradient(135deg,#5097fa 0%,#276dea 100%);color:#fff}

/* Keep light-mode membership action labels legible over the cyan and blue fills. */
body.membership-reference:not(.dark) .pricing-page .member-buy{color:#fff}

/* Center credit-purchase labels and keep their actions on the standard blue in dark mode. */
body.membership-reference.dark .pricing-page .credit-pack .member-buy{justify-content:center;background:#7864ea;color:#fff}


/* Give every annual plan a calm blue upper panel, matching the cyan action family. */
body.membership-reference:not(.dark) .pricing-page .offer-card:not(.offer-permanent) .offer-ribbon{background:#e3f7fc;color:#247f9d}
body.membership-reference:not(.dark) .pricing-page .offer-card:not(.offer-permanent) .offer-main{background:linear-gradient(145deg,#effcff 0%,#def4fa 100%)}
body.membership-reference.dark .pricing-page .offer-card:not(.offer-permanent) .offer-ribbon{background:#263b45;color:#9ddff0}
body.membership-reference.dark .pricing-page .offer-card:not(.offer-permanent) .offer-main{background:linear-gradient(145deg,#233d48 0%,#20333d 100%)}

/* The compact treatment is mobile-only, so desktop card spacing stays unchanged. */
@media(max-width:760px){
  .pricing-page .pricing-grid{margin-top:18px;padding-top:8px;gap:10px;row-gap:10px}
  .pricing-page .offer-card:not(.offer-permanent) .offer-ribbon{min-height:28px;padding:7px 12px}
  .pricing-page .offer-card:not(.offer-permanent) .offer-main{padding:12px 14px 10px}
  .pricing-page .offer-card h3{font-size:15px;margin:2px 0 8px}
  .pricing-page .plan-price{font-size:34px;line-height:1.25}
  .pricing-page .offer-saving{margin:3px 0 8px}
  .pricing-page .offer-quota strong{font-size:20px}
  .pricing-page .price-caption{margin:4px 0;line-height:1.35}
  .pricing-page .member-buy{height:34px;margin-top:8px}
  .pricing-page .offer-benefits{padding:8px 14px 12px}
  .pricing-page .offer-benefits h4{margin:3px 0 6px}
  .pricing-page .offer-benefits ul{gap:5px}
  .pricing-page .offer-benefits li{font-size:10.5px;line-height:1.35}
}


/* Benefits stay compact on phones until the reader asks to view them. */
.mobile-benefits-head,.mobile-benefits-toggle,.mobile-benefits-summary{display:none}
@media(max-width:760px){
  .offer-benefits .mobile-benefits-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
  .offer-benefits .mobile-benefits-head h4{display:none}
  .offer-benefits .mobile-benefits-summary{display:block;color:var(--text);font-size:11px;font-weight:700}
  .offer-benefits .mobile-benefits-toggle{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;border:0;padding:3px 0;background:transparent;color:#6095f6;font:inherit;font-size:10px;cursor:pointer}
  .offer-benefits .mobile-benefits-toggle span{font-size:13px;line-height:1;transition:transform .18s ease}
  .offer-benefits:not(.benefits-collapsed) .mobile-benefits-toggle span{transform:rotate(180deg)}
  .offer-benefits.benefits-collapsed ul{display:none}
}


/* Membership banner uses the homepage type hierarchy while preserving its existing background. */
.membership-reference .pricing-banner{padding:28px 32px;min-height:150px}
.membership-reference .pricing-banner .member-eyebrow{position:static;top:auto;margin:0 0 12px;letter-spacing:.5px;font-size:10px;font-weight:800;color:#8fe4e0}
.membership-reference .pricing-banner .member-eyebrow::before{width:18px;height:18px;flex-basis:18px}
.membership-reference .pricing-banner h1{margin:0 0 9px;font-size:30px;line-height:1.25;letter-spacing:-.7px;font-weight:750}
.membership-reference .pricing-banner .membership-sale-number{font-size:1.16em;line-height:1;color:#56d5ef}
.membership-reference .pricing-banner p{margin:0;max-width:580px;color:#c5c8dc;font-size:12px;line-height:1.65}
.membership-reference .pricing-banner .poster-clock{display:none!important}
@media(max-width:760px){
  .membership-reference .pricing-banner .member-eyebrow{margin-bottom:10px;font-size:10px}
  .membership-reference .pricing-banner h1{font-size:clamp(22px,6vw,27px);line-height:1.3;margin-bottom:8px}
  .membership-reference .pricing-banner p{font-size:12px;line-height:1.65}
}


/* Restore the sale countdown while giving the offer headline more presence. */
@media(min-width:761px){.membership-reference .pricing-banner{padding-right:340px}}
.membership-reference .pricing-banner .poster-clock{display:block!important}
.membership-reference .pricing-banner h1{font-size:34px}
.membership-reference .pricing-banner .membership-sale-number{font-size:1.28em}
@media(max-width:760px){
  .membership-reference .pricing-banner h1{font-size:clamp(25px,6.6vw,30px)}
  .membership-reference .pricing-banner .membership-sale-number{font-size:1.25em}
}


/* Use the normal blue system action for the selected school in every layout. */
body.membership-reference:not(.dark) .pricing-school button[aria-pressed=true]{background:linear-gradient(135deg,#5097fa 0%,#276dea 100%);color:#fff;box-shadow:0 3px 10px #2d73ee2e}

@media(max-width:760px){.membership-reference .offer-quota--unlimited strong{transform:translateX(-2px)}}

body.membership-reference:not(.dark) .offer-discount{background:linear-gradient(135deg,#168fd0,#0b75bb);color:#fff;box-shadow:0 2px 6px #168fd036}
body.membership-reference:not(.dark) .offer-discount--permanent{background:linear-gradient(135deg,#ef782f,#da5619);color:#fff;box-shadow:0 2px 6px #df641d30}

.membership-reference .offer-card{position:relative}
/* Corner ribbons: cool blue/purple and warm amber, tuned for both themes. */
.membership-reference .offer-permanent .offer-ribbon{padding-right:78px}
.membership-reference .offer-recommended{position:absolute;z-index:2;top:0;right:0;display:flex;align-items:center;justify-content:center;gap:4px;width:70px;height:30px;padding:0 0 2px 8px;box-sizing:border-box;border-radius:0 18px 0 0;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);background:linear-gradient(115deg,#e4efff,#fff);color:#2159b5;font-size:12px;font-weight:800;letter-spacing:2px;line-height:1;box-shadow:inset 0 -1px 0 #ffffff70;pointer-events:none}
.membership-reference .offer-recommended::before{content:'✦';font-size:10px;letter-spacing:0}
.membership-reference .offer-4 .offer-recommended{background:linear-gradient(115deg,#ffe1a0,#fff3d7);color:#99450c}
body.membership-reference.dark .offer-recommended{background:linear-gradient(115deg,#ded5ff,#f7f3ff);color:#6095f6}
body.membership-reference.dark .offer-4 .offer-recommended{background:linear-gradient(115deg,#ffd38a,#ffedc5);color:#84400d}
@media(max-width:760px){.membership-reference .offer-recommended{width:68px;height:28px;font-size:11px}.membership-reference .offer-permanent .offer-ribbon{padding-right:76px}}

/* Gently differentiate the plan term while keeping each card title readable as one unit. */
.membership-reference .plan-keyword{font-weight:850;letter-spacing:.015em}
body.membership-reference:not(.dark) .plan-keyword--count{color:#277ea6}
body.membership-reference:not(.dark) .plan-keyword--year{color:#277ea6}
body.membership-reference:not(.dark) .plan-keyword--forever{color:#c85f20}
body.membership-reference.dark .plan-keyword--count{color:#7ed7ef}
body.membership-reference.dark .plan-keyword--year{color:#7ed7ef}
body.membership-reference.dark .plan-keyword--forever{color:#ffb26f}
/* Sale-poster title increased by 10px on both layouts. */
.membership-reference .pricing-banner h1{font-size:44px;line-height:1.18}
@media(max-width:760px){.membership-reference .pricing-banner h1{font-size:clamp(35px,8.8vw,40px);line-height:1.2}}

/* Dark annual cards: soften the ribbon by 20% and retain a fine separation line. */
body.membership-reference.dark .offer-card:not(.offer-permanent) .offer-ribbon{background:rgb(42 43 66 / 80%);border-bottom:1px solid rgb(168 158 255 / 14%)}

/* Match the light-card action blue for 次数 and 1 年; keep the single-grade lifetime term in the system blue. */
body.membership-reference:not(.dark) .plan-keyword--count,body.membership-reference:not(.dark) .plan-keyword--year{color:#29c8e6}
body.membership-reference:not(.dark) .offer-3 .plan-keyword--forever{color:#276dea}
body.membership-reference.dark .offer-3 .plan-keyword--forever{color:#8ab9ff}

/* Restore the desktop membership banner heading to its previous scale. */
@media(min-width:761px){.membership-reference .pricing-banner h1{font-size:34px;line-height:1.18}}

/* Annual-card summary uses the same surface as its benefits area. */
.membership-reference .pricing-page .offer-card:not(.offer-permanent) .offer-main{background:var(--panel)!important}

/* Keep the original annual-card body tint; only its top membership strip matches the benefits surface. */
body.membership-reference.dark .pricing-page .offer-card:not(.offer-permanent) .offer-main{background:linear-gradient(145deg,#233d48 0%,#20333d 100%)!important}
body.membership-reference:not(.dark) .pricing-page .offer-card:not(.offer-permanent) .offer-main{background:linear-gradient(145deg,#effcff 0%,#def4fa 100%)!important}
.membership-reference .pricing-page .offer-card:not(.offer-permanent) .offer-ribbon{background:var(--panel)!important}

/* Replace corner recommendations with compact plan signals beneath the sale badge. */
.membership-reference .offer-recommended{display:none!important}
.membership-reference .offer-permanent .offer-title-row{margin-bottom:40px}
.membership-reference .offer-permanent .offer-discount--permanent{position:relative}
.membership-reference .offer-permanent .offer-discount--permanent::after{position:absolute;top:calc(100% + 6px);right:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:21px;padding:0 7px;border-radius:7px;color:#fff;font-size:10px;font-weight:800;line-height:1;letter-spacing:.1px;box-shadow:0 2px 7px #0002}
.membership-reference .offer-permanent .offer-discount--permanent::before{position:absolute;z-index:1;top:calc(100% + 6px);right:44px;color:#fff;font-size:10px;line-height:21px}
.membership-reference .offer-3 .offer-discount--permanent::after{content:'★ 更多人买';background:linear-gradient(135deg,#4f77c3,#375b9e)}
.membership-reference .offer-4 .offer-discount--permanent::after{content:'★ 最大优惠';background:linear-gradient(135deg,#bd7448,#914c2d)}
body.membership-reference:not(.dark) .offer-3 .offer-discount--permanent::after{background:linear-gradient(135deg,#3387ef,#2369ce)}
body.membership-reference:not(.dark) .offer-4 .offer-discount--permanent::after{background:linear-gradient(135deg,#ef782f,#da5619)}
@media(max-width:760px){.membership-reference .offer-permanent .offer-title-row{margin-bottom:38px}.membership-reference .offer-permanent .offer-discount--permanent::after{min-height:20px;font-size:9px;padding:0 6px}}

/* Plan signals deliberately mirror the sale-badge type, radius, and theme colors. */
.membership-reference .offer-permanent .offer-discount--permanent::before{content:none}
.membership-reference .offer-permanent .offer-discount--permanent::after{min-height:0;padding:4px 7px;border-radius:7px;background:inherit!important;color:inherit;font-size:11px;font-weight:750;line-height:1.15;letter-spacing:normal;box-shadow:none}
.membership-reference .offer-3 .offer-discount--permanent::after{content:'更多人买'}
.membership-reference .offer-4 .offer-discount--permanent::after{content:'最大优惠'}
@media(max-width:760px){.membership-reference .offer-permanent .offer-discount--permanent::after{padding:4px 7px;font-size:11px;line-height:1.15}}

/* Daytime annual-sale badges use the same cyan blue as their action button. */
body.membership-reference:not(.dark) .pricing-page .offer-discount:not(.offer-discount--permanent){background:#29c8e6;color:#fff;box-shadow:0 2px 6px #29c8e640}

/* Daytime blue permanent-plan labels match the blue action button. */
body.membership-reference:not(.dark) .pricing-page .offer-3 .offer-discount--permanent{background:linear-gradient(135deg,#5097fa 0%,#276dea 100%);color:#fff;box-shadow:0 2px 6px #2d73ee36}

/* Night mode: blue permanent-plan labels share the highlighted “永久” text color. */
body.membership-reference.dark .pricing-page .offer-3 .offer-discount--permanent{color:#8ab9ff}

/* Keep permanent-plan price baselines aligned with the annual cards. */
.membership-reference .offer-permanent .offer-title-row{margin-bottom:12px}
@media(max-width:760px){.membership-reference .offer-permanent .offer-title-row{margin-bottom:12px}}

/* Align all card-ribbon labels three pixels farther from the left edge. */
.membership-reference .pricing-page .offer-ribbon{padding-left:17px!important}

/* Lower ribbon text by 2px while preserving each ribbon's overall height. */
.membership-reference .pricing-page .offer-ribbon{padding-top:10px!important;padding-bottom:6px!important}
.membership-reference .pricing-page .offer-permanent .offer-ribbon{padding-top:12px!important;padding-bottom:8px!important}

/* Match all single-grade actions to the permanent single-grade card. */
body.membership-reference:not(.dark) .pricing-page .offer-card:is(.offer-0,.offer-1,.offer-3):not(.offer-owned) .member-buy{background:linear-gradient(135deg,#5097fa 0%,#276dea 100%);color:#fff}
body.membership-reference.dark .pricing-page .offer-card:is(.offer-0,.offer-1,.offer-3):not(.offer-owned) .member-buy{background:#7864ea;color:#fff}
/* Add three pixels to the card spacing in both directions. */
.membership-reference .pricing-page .pricing-grid{gap:15px}
@media(max-width:760px){.membership-reference .pricing-page .pricing-grid{gap:13px}}