/* Brand-blue membership panel. All styling is scoped to this dialog. */
body:has(#rechargeModal:not(.hidden)) #mobileDock { visibility:hidden; }
body #rechargeModal { padding:24px; background:rgba(17,39,70,.42)!important; backdrop-filter:blur(7px)!important; }
body #rechargeModal .recharge-card { width:min(1000px,100%); max-height:calc(100dvh - 48px); overflow:auto; padding:0; background:#fff!important; border:1px solid #d8e5f4!important; border-radius:24px; box-shadow:0 28px 100px #102f5a35!important; backdrop-filter:none!important; color:#17365d; text-align:left; }
body #rechargeModal .recharge-account-bar { position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:28px; padding:22px 32px 18px; background:linear-gradient(105deg,#fff 45%,#f3f8ff); border-bottom:1px solid #e1ebf7; }
body #rechargeModal .recharge-heading { flex:1; }
body #rechargeModal .recharge-brand-label { display:flex; align-items:center; gap:7px; color:#527296; font-size:12px; font-weight:600; }
body #rechargeModal .recharge-brand-label img { width:23px; height:23px; }
body #rechargeModal .recharge-heading h2 { margin:6px 0 4px; color:#12345b!important; font-size:27px; line-height:1.3; letter-spacing:0; }
body #rechargeModal .recharge-heading p { margin:0; color:#7487a0!important; font-size:12px; line-height:1.6; }
body #rechargeModal .recharge-account-copy { margin-right:24px; min-width:156px; padding:13px 17px; display:grid; gap:7px; border-radius:12px; background:#f2f7fd; font-size:11px; color:#7186a0; }
body #rechargeModal .recharge-account-copy>b { max-width:220px; color:#3d5d83!important; font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body #rechargeModal .recharge-account-copy strong { margin-left:7px; color:#0876d8!important; font-size:20px; font-weight:700; }
body #rechargeModal .modal-close { top:17px; right:18px; width:30px; height:30px; border-radius:50%; color:#607895; background:#f1f6fc; font-size:24px; line-height:1; }
body #rechargeModal .modal-close:hover { background:#e4eef9; }
body #rechargeModal .recharge-body { padding:22px 32px 22px; }
body #rechargeModal .membership-showcase { display:grid; grid-template-columns:230px minmax(0,1fr); gap:14px; align-items:stretch; }
body #rechargeModal .membership-benefit-rail { position:relative; overflow:hidden; min-height:350px; padding:23px 22px; border-radius:18px; background:linear-gradient(155deg,#063b82 0%,#075fbf 54%,#1597df 100%); box-shadow:0 14px 32px rgba(6,76,157,.18); color:#fff; }
body #rechargeModal .membership-benefit-rail:before { content:""; position:absolute; width:210px; height:210px; right:-110px; top:-88px; border:1px solid rgba(255,255,255,.2); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.04),0 0 0 58px rgba(255,255,255,.03); }
body #rechargeModal .membership-benefit-rail:after { content:""; position:absolute; width:120px; height:120px; left:-62px; bottom:-54px; border-radius:32px; background:rgba(255,255,255,.07); transform:rotate(25deg); }
body #rechargeModal .membership-pass-mark { position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:15px; background:rgba(255,255,255,.15); box-shadow:inset 0 1px rgba(255,255,255,.24); color:#fff; font-size:16px; font-weight:750; letter-spacing:-.03em; }
body #rechargeModal .membership-rail-kicker { position:relative; z-index:1; display:block; margin-top:17px; color:#bfe3ff; font-size:10px; font-weight:600; letter-spacing:.12em; }
body #rechargeModal .membership-benefit-rail h3 { position:relative; z-index:1; margin:8px 0 7px; color:#fff!important; font-size:23px; line-height:1.34; letter-spacing:-.03em; }
body #rechargeModal .membership-benefit-rail h3 em { color:#8fe8ff; font-style:normal; }
body #rechargeModal .membership-benefit-rail>p { position:relative; z-index:1; margin:0; color:#c9e5ff!important; font-size:10px; line-height:1.7; }
body #rechargeModal .membership-benefit-rail ul { position:relative; z-index:1; display:grid; gap:11px; margin:21px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.19); list-style:none; }
body #rechargeModal .membership-benefit-rail li { display:grid; grid-template-columns:25px minmax(0,1fr); gap:9px; align-items:center; }
body #rechargeModal .membership-benefit-rail li>i { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:rgba(255,255,255,.15); color:#aee9ff; font-size:8px; font-style:normal; font-weight:700; }
body #rechargeModal .membership-benefit-rail li>span { display:grid; gap:2px; }
body #rechargeModal .membership-benefit-rail li b { color:#fff!important; font-size:10px; font-weight:600; }
body #rechargeModal .membership-benefit-rail li small { color:#bcdcf8; font-size:8px; line-height:1.45; }
body #rechargeModal .membership-offer { min-width:0; padding:13px; border:1px solid #e1ebf7; border-radius:18px; background:linear-gradient(145deg,#f9fbff,#f3f8fe); }
body #rechargeModal .package-recharge-options { display:block; }
body #rechargeModal .plan-card { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:22px; width:100%; min-height:154px!important; padding:22px 24px!important; border:1px solid #2a7dde!important; border-radius:14px; background:linear-gradient(115deg,#0755b9 0%,#0d7ed8 58%,#22a2e8 100%)!important; box-shadow:0 12px 28px rgba(18,103,200,.18)!important; color:#fff; }
body #rechargeModal .plan-card:after { content:""; position:absolute; right:-52px; bottom:-86px; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,255,255,0) 68%); pointer-events:none; }
body #rechargeModal .annual-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
body #rechargeModal .annual-eyebrow { display:inline-flex; align-items:center; min-height:22px; padding:3px 9px; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(255,255,255,.13); color:#f4faff!important; font-size:10px; font-weight:600; letter-spacing:.04em; }
body #rechargeModal .plan-name { margin:0; color:#fff!important; font-size:17px!important; font-weight:600; }
body #rechargeModal .plan-term { color:#d6eaff!important; font-size:10px; font-weight:400; line-height:1.7; }
body #rechargeModal .annual-inclusions { display:flex; flex-wrap:wrap; gap:6px; }
body #rechargeModal .annual-inclusions>i { padding:4px 7px; border-radius:6px; background:rgba(255,255,255,.13); color:#e4f3ff; font-size:8px; font-style:normal; font-weight:500; }
body #rechargeModal .annual-select-label { color:#edf7ff!important; font-size:11px; margin-top:4px; }
body #rechargeModal .annual-select-label>span { margin-left:9px; color:#dbeeff; }
body #rechargeModal .annual-price { position:relative; z-index:1; justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:7px; white-space:nowrap; }
body #rechargeModal .annual-price>small { padding:4px 8px; border-radius:999px; background:rgba(5,53,117,.24); color:#e8f5ff; font-size:10px; font-weight:500; }
body #rechargeModal .annual-price-line { display:flex; align-items:baseline; gap:4px; }
body #rechargeModal .annual-price strong { color:#fff!important; font-size:33px; font-weight:600; letter-spacing:-1px; }
body #rechargeModal .annual-price i { font-size:15px; font-style:normal; vertical-align:0; margin-right:3px; }
body #rechargeModal .annual-price-line>span { color:#d6eaff; font-size:11px; }
body #rechargeModal .annual-price>em { color:#cde8ff; font-size:9px; font-style:normal; }
body #rechargeModal .membership-benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
body #rechargeModal .membership-benefit-grid article { --benefit:#147ed4; --benefit-soft:#e5f3ff; min-width:0; display:grid; grid-template-columns:43px minmax(0,1fr); gap:10px; align-items:center; padding:12px; border:1px solid #dfeaf5; border-radius:12px; background:#fff; box-shadow:0 5px 14px rgba(31,76,125,.045); }
body #rechargeModal .membership-benefit-grid article>i { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; background:var(--benefit-soft); color:var(--benefit); font-size:12px; font-style:normal; font-weight:750; letter-spacing:-.03em; }
body #rechargeModal .membership-benefit-grid article>span { min-width:0; display:grid; gap:2px; }
body #rechargeModal .membership-benefit-grid article small { color:#8b9caf; font-size:8px; }
body #rechargeModal .membership-benefit-grid article b { color:#1c4b7e!important; font-size:13px; font-weight:650; }
body #rechargeModal .membership-benefit-grid article em { overflow:hidden; color:#7489a1; font-size:8px; font-style:normal; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
body #rechargeModal .membership-benefit-grid .benefit-monthly { --benefit:#725bd6; --benefit-soft:#eeeafe; }
body #rechargeModal .membership-benefit-grid .benefit-annual { --benefit:#d77a17; --benefit-soft:#fff1dd; }
body #rechargeModal .membership-benefit-grid .benefit-protection { --benefit:#168f78; --benefit-soft:#e0f6f0; }
body #rechargeModal .membership-terms-note { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:9px; padding:10px 12px; border:1px solid #e2eaf3; border-radius:10px; background:#fff; }
body #rechargeModal .membership-terms-note>b { color:#315b88!important; font-size:10px; font-weight:600; white-space:nowrap; }
body #rechargeModal .membership-terms-note>p { margin:0; color:#8192a7!important; font-size:9px; line-height:1.7; }
body #rechargeModal .membership-terms-note>span { padding:4px 7px; border-radius:999px; background:#eaf4ff; color:#2572bb; font-size:8px; white-space:nowrap; }
body #rechargeModal .recharge-main { min-width:0; padding:0; }
body #rechargeModal .recharge-section-heading { margin:24px 0 14px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
body #rechargeModal .recharge-section-heading h3 { margin:0; color:#193b64!important; font-size:16px; font-weight:600; }
body #rechargeModal .recharge-section-heading>span { color:#7f91a8; font-size:10px; }
body #rechargeModal .credit-recharge-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
body #rechargeModal .credit-recharge-options button { --tier:#147ed4; --tier-soft:#e8f4ff; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:172px; padding:19px 19px 15px; gap:10px; border:1px solid #dce7f3; border-radius:13px; background:linear-gradient(160deg,#fff 62%,var(--tier-soft)); box-shadow:none; text-align:left; }
body #rechargeModal .credit-recharge-options button:before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--tier); }
body #rechargeModal .credit-recharge-options button:nth-child(2) { --tier:#725bd6; --tier-soft:#f0edff; }
body #rechargeModal .credit-recharge-options button:nth-child(3) { --tier:#d77a17; --tier-soft:#fff3e3; }
body #rechargeModal .credit-recharge-options button:nth-child(4) { --tier:#168f78; --tier-soft:#e7f7f2; }
body #rechargeModal .credit-tier-name { padding:4px 7px; border-radius:6px; background:var(--tier-soft); color:var(--tier); font-size:10px; font-weight:600; }
body #rechargeModal .credit-recharge-options button>strong { color:#183b65!important; display:flex; align-items:baseline; gap:5px; font-size:27px; letter-spacing:-.8px; line-height:1.2; }
body #rechargeModal .credit-recharge-options button>strong small { color:#7e91a9; font-size:10px; font-weight:400; letter-spacing:0; }
body #rechargeModal .credit-price-row { display:block; margin:2px 0 0; }
body #rechargeModal .credit-price-row em { color:var(--tier)!important; font-size:20px!important; font-weight:600; letter-spacing:-.5px; line-height:1.4; }
body #rechargeModal .credit-tier-footer { width:100%; margin-top:auto; padding-top:11px; border-top:1px solid #e9f0f8; color:#899bb1; font-size:10px; }
body #rechargeModal .credit-selection-mark { position:absolute; top:18px; right:16px; width:16px; height:16px; border:1px solid #d5e2f0; border-radius:50%; }
body #rechargeModal .recharge-options button:hover:not(:disabled) { transform:none; border-color:#70a9e8; box-shadow:0 6px 18px rgba(20,105,201,.10); }
body #rechargeModal .credit-recharge-options button.is-selected { border-color:#1684e8; background:#eff7ff; box-shadow:0 0 0 1px #1684e8 inset; }
body #rechargeModal .is-selected .credit-selection-mark { border-color:#1278d8; background:#1278d8; }
body #rechargeModal .is-selected .credit-selection-mark:after { content:""; display:block; position:absolute; left:4px; top:2px; width:5px; height:8px; border:solid white; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
body #rechargeModal .plan-card.is-selected { border-color:#8bc5ff!important; box-shadow:0 0 0 2px #8bc5ff inset,0 12px 28px rgba(18,103,200,.18)!important; }
body #rechargeModal .recharge-options button:disabled { opacity:1; cursor:wait; }
body #rechargeModal button:focus-visible { outline:3px solid #65a8ef; outline-offset:3px; }
body #rechargeModal .recharge-checkout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:26px; align-items:center; margin-top:22px; padding:20px 22px; border:1px solid #e0e9f4; border-radius:13px; background:#f5f8fc; }
body #rechargeModal .recharge-order-label { color:#7f92aa; font-size:10px; }
body #rechargeModal .recharge-order-summary h3 { margin:6px 0 10px; font-size:17px; color:#21466f!important; }
body #rechargeModal .recharge-order-summary dl { display:grid; gap:4px; margin:0; font-size:10px; line-height:1.7; }
body #rechargeModal .recharge-order-summary dl>div { display:flex; gap:10px; }
body #rechargeModal .recharge-order-summary dt { flex:none; color:#91a2b7; }
body #rechargeModal .recharge-order-summary dd { margin:0; color:#6f849d; }
body #rechargeModal .recharge-order-action { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; column-gap:14px; }
body #rechargeModal .recharge-order-action>.recharge-order-label { grid-column:1; }
body #rechargeModal #rechargeSelectionPrice { grid-column:1; margin-top:4px; color:#0873d1!important; font-size:28px; line-height:1.2; }
body #rechargeModal #rechargeConfirm { grid-column:2; grid-row:1/3; min-height:43px; width:100%; padding:10px; border:0; border-radius:9px; background:#0b75dc; color:white; font-size:12px; font-weight:600; }
body #rechargeModal #rechargeConfirm:disabled { background:#e4ebf4; color:#71849c; cursor:not-allowed; }
body #rechargeModal #rechargeNotice { grid-column:1/-1; margin-top:9px; color:#8b9cb1; font-size:9px; line-height:1.7; }
body #rechargeModal .recharge-status { margin-top:12px; padding:11px 14px; border-radius:10px; background:#eef6ff; color:#376994; font-size:12px; }
body #rechargeModal .recharge-footnote { margin-top:15px; padding:0; background:none; color:#93a2b5; font-size:9px; line-height:1.8; text-align:left; font-weight:400; }
body #rechargeModal .recharge-legal { margin-top:4px; color:#93a2b5; font-size:9px; }
body #rechargeModal .recharge-legal a { color:#3c75ad; text-decoration:none; }
@media(max-width:800px) {
 body #rechargeModal .recharge-body { padding:22px; }
 body #rechargeModal .recharge-account-bar { padding:24px 22px 20px; }
 body #rechargeModal .membership-showcase { grid-template-columns:1fr; }
 body #rechargeModal .membership-benefit-rail { min-height:0; }
 body #rechargeModal .membership-benefit-rail ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
 body #rechargeModal .plan-card { grid-template-columns:1fr 1fr; gap:22px; }
 body #rechargeModal .annual-copy { grid-column:1; grid-row:1; }
 body #rechargeModal .annual-price { grid-column:2; grid-row:1; }
 body #rechargeModal .membership-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body #rechargeModal .credit-recharge-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body #rechargeModal .recharge-checkout { grid-template-columns:1fr; gap:18px; }
 body #rechargeModal .recharge-order-action { grid-template-columns:1fr 190px; padding-top:15px; border-top:1px solid #dfe9f4; }
}
@media(max-width:500px) {
 body #rechargeModal { padding:8px; }
 body #rechargeModal .recharge-card { max-height:calc(100dvh - 16px); border-radius:20px; }
 body #rechargeModal .recharge-account-bar { padding:19px 18px 16px; flex-wrap:wrap; gap:14px; }
 body #rechargeModal .recharge-heading { flex-basis:100%; }
 body #rechargeModal .recharge-heading h2 { font-size:25px; }
 body #rechargeModal .recharge-heading p { font-size:11px; }
 body #rechargeModal .recharge-account-copy { width:100%; margin:0; padding:8px 12px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
 body #rechargeModal .recharge-account-copy>b { max-width:155px; font-size:11px; }
 body #rechargeModal .recharge-account-copy strong { font-size:16px; }
 body #rechargeModal .recharge-body { padding:18px; }
 body #rechargeModal .membership-benefit-rail ul { grid-template-columns:1fr; }
 body #rechargeModal .plan-card { padding:18px!important; gap:14px 12px; }
 body #rechargeModal .annual-price strong { font-size:30px; }
 body #rechargeModal .annual-price>small { font-size:9px; }
 body #rechargeModal .membership-benefit-grid { gap:8px; }
 body #rechargeModal .membership-benefit-grid article { padding:12px; }
 body #rechargeModal .membership-terms-note { grid-template-columns:1fr; gap:5px; }
 body #rechargeModal .membership-terms-note>span { justify-self:start; }
 body #rechargeModal .recharge-section-heading { flex-direction:column; align-items:flex-start; gap:5px; margin-top:20px; }
 body #rechargeModal .credit-recharge-options { gap:10px; }
 body #rechargeModal .credit-recharge-options button { padding:16px 14px 13px; min-height:161px; }
 body #rechargeModal .credit-recharge-options button>strong { font-size:25px; }
 body #rechargeModal .credit-selection-mark { top:16px; right:12px; width:14px; height:14px; }
 body #rechargeModal .is-selected .credit-selection-mark:after { left:3px; top:1px; }
 body #rechargeModal .recharge-checkout { padding:17px; }
 body #rechargeModal .recharge-order-action { grid-template-columns:75px minmax(0,1fr); column-gap:10px; }
 body #rechargeModal #rechargeConfirm { font-size:11px; }
}

/* v592 membership rules */
body #rechargeModal .membership-plan-row{grid-template-columns:320px minmax(0,1fr)}
body #rechargeModal .package-recharge-options{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
body #rechargeModal .package-recharge-options .plan-card{min-height:188px!important;padding:18px 14px!important}
body #rechargeModal .trial-plan-card{border-color:#f0a144!important;background:linear-gradient(180deg,#fff9ef,#fff)!important}
body #rechargeModal .trial-plan-card .annual-eyebrow{background:#fff0d9;color:#c66410!important}
body #rechargeModal .credit-recharge-options{grid-template-columns:repeat(5,minmax(0,1fr))}
body #rechargeModal .credit-recharge-options .is-featured{border-color:#f29a33!important;box-shadow:0 0 0 1px #f29a33 inset,0 8px 20px rgba(232,123,20,.12)!important}
body #rechargeModal .credit-recharge-options .is-featured .credit-campaign-tag{background:#ff8a1f;color:#fff}
@media(max-width:1100px){body #rechargeModal .credit-recharge-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){body #rechargeModal .membership-plan-row{grid-template-columns:1fr}body #rechargeModal .credit-recharge-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){body #rechargeModal .package-recharge-options{grid-template-columns:1fr}}

/* v600: temporarily expose only the two membership products. */
body #rechargeModal.membership-plan-only .recharge-body{display:grid;padding:0;background:#fff}
body #rechargeModal.membership-plan-only .recharge-main>.recharge-section-heading,
body #rechargeModal.membership-plan-only .credit-recharge-options{display:none!important}
body #rechargeModal.membership-plan-only .recharge-content{width:auto;margin:0;padding:22px 26px 18px}
body #rechargeModal.membership-plan-only .membership-heading{margin-bottom:14px}
body #rechargeModal.membership-plan-only .membership-plan-row{display:block}
body #rechargeModal.membership-plan-only .package-recharge-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card{min-height:230px!important;padding:32px 24px 24px!important}
body #rechargeModal.membership-plan-only .recharge-main{padding:0}
body #rechargeModal.membership-plan-only .recharge-checkout{margin-top:18px}
body #rechargeModal.membership-plan-only .recharge-legal{margin-top:10px}
@media(max-width:700px){
 body #rechargeModal.membership-plan-only .recharge-body{grid-template-columns:1fr}
 body #rechargeModal.membership-plan-only .recharge-content{padding:22px 16px 18px}
 body #rechargeModal.membership-plan-only .package-recharge-options{grid-template-columns:1fr}
 body #rechargeModal.membership-plan-only .package-recharge-options .plan-card{min-height:190px!important;padding:28px 20px 22px!important}
}

/* v306: restrained, product-grade membership layout. */
body #rechargeModal .recharge-card { width:min(1040px,100%); border-radius:18px; box-shadow:0 24px 80px rgba(17,42,75,.28)!important; }
body #rechargeModal .recharge-account-bar { min-height:88px; padding:16px 28px; gap:22px; background:#fff; }
body #rechargeModal .recharge-heading { display:flex; align-items:center; gap:18px; min-width:0; }
body #rechargeModal .recharge-brand-label .crealink-wordmark { width:142px!important; height:44px!important; padding:0!important; background:transparent!important; border-radius:0!important; }
body #rechargeModal .recharge-brand-label img { width:100%!important; height:100%!important; object-fit:contain; }
body #rechargeModal .recharge-title-copy { display:grid; gap:3px; min-width:0; padding-left:18px; border-left:1px solid #dfe7f1; }
body #rechargeModal .recharge-heading h2 { margin:0; color:#15375e!important; font-size:18px; font-weight:650; line-height:1.25; }
body #rechargeModal .recharge-heading p { margin:0; color:#8796aa!important; font-size:10px; }
body #rechargeModal .recharge-account-copy { min-width:176px; margin-right:54px; padding:10px 14px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 13px; border:1px solid #e2eaf4; border-radius:10px; background:#f8fafc; }
body #rechargeModal .recharge-account-copy>b { grid-column:1/-1; color:#4e6682!important; font-size:10px; }
body #rechargeModal .recharge-account-copy>span { color:#8a9aae; font-size:9px; }
body #rechargeModal .recharge-account-copy strong { margin-left:5px; color:#126fc8!important; font-size:17px; }
body #rechargeModal .modal-close { top:25px; right:22px; width:52px; height:36px; border:1px solid #cfdae7; border-radius:9px; background:#fff; color:#48627f; font-size:11px; }
body #rechargeModal .recharge-body { display:grid; grid-template-columns:212px minmax(0,1fr); padding:0; background:#fff; }
body #rechargeModal .recharge-benefit-sidebar { min-width:0; border-right:1px solid #e4eaf2; background:#fafbfd; }
body #rechargeModal .benefit-sidebar-brand { display:grid; gap:6px; padding:24px 22px; background:linear-gradient(145deg,#0c64c4,#167ed8); color:#fff; }
body #rechargeModal .benefit-sidebar-brand small { color:#cde7ff; font-size:8px; font-weight:650; letter-spacing:.12em; }
body #rechargeModal .benefit-sidebar-brand b { color:#fff!important; font-size:25px; font-weight:700; letter-spacing:-.04em; }
body #rechargeModal .benefit-sidebar-brand span { color:#d9edff; font-size:9px; line-height:1.55; }
body #rechargeModal .benefit-sidebar-content { padding:22px 20px; }
body #rechargeModal .benefit-sidebar-content h3 { margin:0 0 16px; color:#24466d!important; font-size:13px; font-weight:650; }
body #rechargeModal .benefit-sidebar-content ul { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
body #rechargeModal .benefit-sidebar-content li { display:grid; grid-template-columns:18px minmax(0,1fr); gap:9px; align-items:start; }
body #rechargeModal .benefit-sidebar-content li>i { display:grid; place-items:center; width:18px; height:18px; margin-top:1px; border-radius:50%; background:#e8f3ff; color:#1675cc; font-size:9px; font-style:normal; font-weight:700; }
body #rechargeModal .benefit-sidebar-content li>span { display:grid; gap:3px; }
body #rechargeModal .benefit-sidebar-content li b { color:#304f72!important; font-size:10px; font-weight:600; }
body #rechargeModal .benefit-sidebar-content li small { color:#8a9aac; font-size:8px; line-height:1.5; }
body #rechargeModal .benefit-sidebar-note { margin-top:22px; padding-top:17px; border-top:1px solid #e1e8f0; }
body #rechargeModal .benefit-sidebar-note b { color:#56718e!important; font-size:9px; }
body #rechargeModal .benefit-sidebar-note p { margin:6px 0 0; color:#91a0b1!important; font-size:8px; line-height:1.65; }
body #rechargeModal .recharge-content { min-width:0; padding:22px 26px 18px; }
body #rechargeModal .membership-heading { margin:0 0 12px; }
body #rechargeModal .membership-heading h3 { font-size:15px; }
body #rechargeModal .plan-card { min-height:138px!important; padding:19px 22px!important; border:1px solid #cfdceb!important; border-radius:12px; background:#fff!important; box-shadow:0 7px 20px rgba(38,73,113,.07)!important; color:#17375e; }
body #rechargeModal .plan-card:before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#1678d2; }
body #rechargeModal .plan-card:after { display:none; }
body #rechargeModal .annual-copy { gap:7px; padding-left:3px; }
body #rechargeModal .annual-eyebrow { min-height:20px; padding:3px 8px; border:0; border-radius:5px; background:#fff0df; color:#d96c08!important; font-size:9px; letter-spacing:0; }
body #rechargeModal .plan-name { color:#183b64!important; font-size:19px!important; font-weight:650; }
body #rechargeModal .plan-term { color:#7c8ea3!important; font-size:9px; }
body #rechargeModal .annual-inclusions { gap:12px; margin-top:3px; }
body #rechargeModal .annual-inclusions>i { padding:0; border-radius:0; background:transparent; color:#55718e; font-size:8px; }
body #rechargeModal .annual-inclusions>i:before { content:"✓"; margin-right:4px; color:#1476ce; font-weight:700; }
body #rechargeModal .annual-price { min-width:156px; gap:4px; padding-left:22px; border-left:1px solid #e1e8f0; }
body #rechargeModal .annual-price>small { padding:0; border-radius:0; background:transparent; color:#8898aa; font-size:9px; }
body #rechargeModal .annual-price strong { color:#126fc8!important; font-size:34px; font-weight:700; }
body #rechargeModal .annual-price i { color:#126fc8!important; }
body #rechargeModal .annual-price-line>span { color:#71849a; font-size:10px; }
body #rechargeModal .annual-price>em { color:#9aa7b6; font-size:8px; }
body #rechargeModal .annual-select-label { min-width:118px; margin-top:7px; padding:7px 14px; border-radius:7px; background:#1476ce; color:#fff!important; font-size:9px; font-weight:600; text-align:center; }
body #rechargeModal .membership-benefit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:10px; border:1px solid #e0e7ef; border-radius:10px; background:#f8fafc; }
body #rechargeModal .membership-benefit-grid article { display:grid; grid-template-columns:1fr; gap:3px; min-height:67px; padding:12px 14px; border:0; border-right:1px solid #e0e7ef; border-radius:0; background:transparent; box-shadow:none; }
body #rechargeModal .membership-benefit-grid article:last-child { border-right:0; }
body #rechargeModal .membership-benefit-grid article>small { color:#8798aa; font-size:8px; }
body #rechargeModal .membership-benefit-grid article>b { color:#284b72!important; font-size:13px; font-weight:650; }
body #rechargeModal .membership-benefit-grid article>em { color:#94a2b2; font-size:8px; font-style:normal; line-height:1.45; white-space:normal; }
body #rechargeModal .membership-terms-note { grid-template-columns:auto minmax(0,1fr) auto; margin-top:9px; padding:9px 11px; border:0; border-radius:7px; background:#f2f5f9; }
body #rechargeModal .membership-terms-note>b { color:#506b87!important; font-size:9px; }
body #rechargeModal .membership-terms-note>p { color:#8796a7!important; font-size:8px; }
body #rechargeModal .membership-terms-note>span { padding:0; border-radius:0; background:transparent; color:#4c739b; font-size:8px; }
body #rechargeModal .recharge-section-heading { margin:21px 0 11px; }
body #rechargeModal .recharge-section-heading h3 { font-size:15px; }
body #rechargeModal .credit-recharge-options { gap:9px; }
body #rechargeModal .credit-recharge-options button,
body #rechargeModal .credit-recharge-options button:nth-child(n) { --tier:#1476ce; --tier-soft:#eef5fc; min-height:144px; padding:17px 15px 13px; gap:8px; overflow:hidden; border-color:#d8e2ed; border-radius:10px; background:#fff; }
body #rechargeModal .credit-recharge-options button:before { height:2px; background:#dce6f0; }
body #rechargeModal .credit-tier-name { padding:3px 6px; border-radius:4px; background:#eef5fc; color:#47729e; font-size:8px; }
body #rechargeModal .credit-recharge-options button>strong { color:#183b64!important; font-size:24px; }
body #rechargeModal .credit-price-row em { color:#126fc8!important; font-size:18px!important; }
body #rechargeModal .credit-tier-footer { color:#8b9aac; font-size:8px; }
body #rechargeModal .credit-recharge-options button.is-selected { border-color:#1678d2; background:#f6fbff; box-shadow:0 0 0 1px #1678d2 inset; }
body #rechargeModal .credit-recharge-options button.is-selected:before { background:#1678d2; }
body #rechargeModal .plan-card.is-selected { border-color:#1678d2!important; background:#fff!important; box-shadow:0 0 0 1px #1678d2 inset,0 7px 20px rgba(38,73,113,.07)!important; }
body #rechargeModal .recharge-checkout { grid-template-columns:minmax(0,1fr) 250px; gap:20px; margin-top:17px; padding:16px 18px; border-color:#dde5ee; border-radius:10px; background:#f8fafc; }
body #rechargeModal .recharge-order-summary h3 { margin:4px 0 7px; font-size:15px; }
body #rechargeModal .recharge-order-summary dl { font-size:8px; }
body #rechargeModal #rechargeSelectionPrice { font-size:25px; }
body #rechargeModal #rechargeConfirm { min-height:39px; border-radius:7px; font-size:10px; }
body #rechargeModal #rechargeNotice { margin-top:6px; font-size:8px; }
body #rechargeModal .recharge-footnote { margin-top:10px; }

@media(max-width:800px) {
 body #rechargeModal .recharge-body { grid-template-columns:1fr; }
 body #rechargeModal .recharge-benefit-sidebar { border-right:0; border-bottom:1px solid #e4eaf2; }
 body #rechargeModal .benefit-sidebar-content ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body #rechargeModal .benefit-sidebar-note { margin-top:16px; }
 body #rechargeModal .recharge-content { padding:20px 22px; }
}
@media(max-width:500px) {
 body #rechargeModal .recharge-account-bar { min-height:0; padding:15px 18px; }
 body #rechargeModal .recharge-heading { flex-basis:100%; gap:10px; }
 body #rechargeModal .recharge-brand-label .crealink-wordmark { width:112px!important; height:36px!important; }
 body #rechargeModal .recharge-title-copy { padding-left:10px; }
 body #rechargeModal .recharge-account-copy { width:100%; margin:0; }
 body #rechargeModal .benefit-sidebar-content ul { grid-template-columns:1fr; }
 body #rechargeModal .recharge-content { padding:17px; }
 body #rechargeModal .plan-card { grid-template-columns:1fr; }
 body #rechargeModal .annual-price { grid-column:1; grid-row:2; align-items:flex-start; width:100%; padding:14px 0 0; border-left:0; border-top:1px solid #e1e8f0; }
 body #rechargeModal .membership-benefit-grid { grid-template-columns:1fr; }
 body #rechargeModal .membership-benefit-grid article { border-right:0; border-bottom:1px solid #e0e7ef; }
 body #rechargeModal .membership-benefit-grid article:last-child { border-bottom:0; }
 body #rechargeModal .credit-recharge-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* v307: offer-led hierarchy inspired by mature membership checkout layouts. */
body #rechargeModal .recharge-card { width:min(1040px,100%); }
body #rechargeModal .recharge-account-bar {
 min-height:82px;
 padding:14px 26px;
 background:
  radial-gradient(circle at 62% 30%,rgba(255,255,255,.92) 0 2px,transparent 3px),
  radial-gradient(circle at 73% 64%,rgba(255,255,255,.72) 0 1px,transparent 2px),
  linear-gradient(110deg,#f8fcff 0%,#eaf5ff 48%,#d9ecff 100%);
 border-bottom-color:#d8e7f7;
}
body #rechargeModal .recharge-heading h2 { font-size:19px; font-weight:700; }
body #rechargeModal .recharge-account-copy { background:rgba(255,255,255,.72); border-color:#d3e2f1; box-shadow:0 5px 16px rgba(40,91,145,.06); }
body #rechargeModal .recharge-body { grid-template-columns:212px minmax(0,1fr); }
body #rechargeModal .benefit-sidebar-brand { min-height:116px; align-content:center; padding:22px; background:linear-gradient(145deg,#1468cf 0%,#278be4 100%); }
body #rechargeModal .benefit-sidebar-brand:after { content:""; width:54px; height:2px; margin-top:4px; border-radius:99px; background:rgba(255,255,255,.5); }
body #rechargeModal .recharge-content { padding:20px 26px 18px; }
body #rechargeModal .membership-plan-row { display:grid; grid-template-columns:190px minmax(0,1fr); gap:10px; align-items:stretch; }
body #rechargeModal .package-recharge-options { min-width:0; }
body #rechargeModal .plan-card {
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-start;
 gap:7px;
 min-height:176px!important;
 height:100%;
 padding:28px 13px 42px!important;
 border:1px solid #1678d2!important;
 border-radius:11px;
 background:#fff!important;
 box-shadow:0 7px 18px rgba(42,91,145,.06)!important;
 text-align:center;
}
body #rechargeModal .plan-card:before { display:none; }
body #rechargeModal .annual-eyebrow {
 position:absolute;
 top:-1px;
 left:50%;
 z-index:2;
 min-height:18px;
 padding:3px 10px;
 transform:translateX(-50%);
 border-radius:0 0 7px 7px;
 background:linear-gradient(90deg,#ff9a21,#ff6d20);
 color:#fff!important;
 font-size:8px;
 font-weight:700;
 white-space:nowrap;
}
body #rechargeModal .annual-copy { align-items:center; gap:4px; padding:0; }
body #rechargeModal .plan-name { margin-top:3px; font-size:17px!important; font-weight:700; }
body #rechargeModal .plan-term { font-size:8px; }
body #rechargeModal .annual-inclusions { justify-content:center; gap:4px 8px; margin-top:2px; }
body #rechargeModal .annual-inclusions>i { color:#7f90a4; font-size:7px; }
body #rechargeModal .annual-price { min-width:0; align-items:center; gap:1px; padding:0; border:0; }
body #rechargeModal .annual-price>small { order:2; color:#8596aa; font-size:8px; }
body #rechargeModal .annual-price-line { order:1; }
body #rechargeModal .annual-price strong { font-size:28px; }
body #rechargeModal .annual-price>em { display:none; }
body #rechargeModal .annual-select-label {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 display:grid;
 place-items:center;
 min-width:0;
 min-height:34px;
 margin:0;
 padding:7px 10px;
 border-radius:0 0 9px 9px;
 background:#1476ce;
 color:#fff!important;
 font-size:9px;
 font-weight:700;
}
body #rechargeModal .membership-benefit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; border:0; border-radius:0; background:transparent; }
body #rechargeModal .membership-benefit-grid article {
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:176px;
 padding:28px 12px 16px;
 border:1px solid #d9e3ee;
 border-radius:11px;
 background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
 text-align:center;
}
body #rechargeModal .membership-benefit-grid article:last-child { border-right:1px solid #d9e3ee; }
body #rechargeModal .membership-benefit-grid article:before {
 content:"权益";
 position:absolute;
 top:-1px;
 left:50%;
 padding:3px 10px;
 transform:translateX(-50%);
 border-radius:0 0 7px 7px;
 background:#edf5fd;
 color:#5480ab;
 font-size:8px;
 font-weight:650;
 white-space:nowrap;
}
body #rechargeModal .membership-benefit-grid article>small { color:#71859c; font-size:9px; }
body #rechargeModal .membership-benefit-grid article>b { color:#166fca!important; font-size:17px; font-weight:700; }
body #rechargeModal .membership-benefit-grid article>em { color:#93a1b2; font-size:8px; line-height:1.55; white-space:normal; }
body #rechargeModal .membership-gift-strip { display:flex; align-items:center; gap:7px; margin-top:10px; color:#f07816; font-size:9px; }
body #rechargeModal .membership-gift-strip>span { display:grid; place-items:center; width:21px; height:21px; border-radius:6px; background:#ff951f; color:#fff; font-size:10px; font-weight:750; }
body #rechargeModal .membership-gift-strip>strong { padding:4px 8px; border-radius:5px; background:#fff2e1; color:#ee7415!important; font-weight:600; }
body #rechargeModal .membership-gift-strip>small { color:#a98a70; font-size:8px; }
body #rechargeModal .membership-terms-note { margin-top:9px; background:#f3f5f8; }
body #rechargeModal .credit-recharge-options { padding-top:0; }
body #rechargeModal .credit-recharge-options button,
body #rechargeModal .credit-recharge-options button:nth-child(n) { min-height:151px; padding-top:27px; overflow:visible; }
body #rechargeModal .credit-campaign-tag {
 position:absolute;
 top:-1px;
 left:50%;
 z-index:2;
 padding:3px 10px;
 transform:translateX(-50%);
 border-radius:0 0 7px 7px;
 background:linear-gradient(90deg,#ff9a21,#ff6d20);
 color:#fff;
 font-size:8px;
 font-weight:700;
 white-space:nowrap;
}
body #rechargeModal .credit-recharge-options button:before { display:none; }
body #rechargeModal .credit-recharge-options button.is-selected { border-color:#1678d2; background:#fff; box-shadow:0 0 0 1px #1678d2 inset,0 7px 18px rgba(42,91,145,.06); }
body #rechargeModal .recharge-checkout { margin-top:16px; border-color:#d9e3ee; background:#fff; box-shadow:0 7px 18px rgba(42,91,145,.045); }
body #rechargeModal .recharge-order-action { padding-left:18px; border-left:1px solid #e3e9f0; }
body #rechargeModal .modal-close {
 top:23px;
 right:22px;
 display:grid;
 place-items:center;
 width:36px;
 height:36px;
 padding:0;
 border:0;
 border-radius:50%;
 background:transparent;
 color:#55718f;
 font-size:0;
 line-height:1;
}
body #rechargeModal .modal-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
body #rechargeModal .modal-close:hover { background:#e6f1fc; color:#0f6fc8; }

@media(max-width:800px) {
 body #rechargeModal .membership-plan-row { grid-template-columns:1fr; }
 body #rechargeModal .plan-card { min-height:168px!important; }
 body #rechargeModal .membership-benefit-grid article { min-height:128px; }
 body #rechargeModal .recharge-order-action { padding-left:0; border-left:0; }
}
@media(max-width:500px) {
 body #rechargeModal .membership-benefit-grid { grid-template-columns:1fr; }
 body #rechargeModal .membership-benefit-grid article { min-height:112px; border-right:1px solid #d9e3ee; border-bottom:1px solid #d9e3ee; }
 body #rechargeModal .membership-gift-strip { align-items:flex-start; flex-wrap:wrap; }
 body #rechargeModal .membership-gift-strip>small { flex-basis:100%; padding-left:28px; }
}

/* v312: readable membership copy, one brand mark, and a bare close glyph. */
body #rechargeModal .recharge-title-copy { padding-left:0; border-left:0; gap:4px; }
body #rechargeModal .recharge-heading h2 { font-size:22px; }
body #rechargeModal .recharge-heading p { font-size:13px; color:#647a94!important; }
body #rechargeModal .recharge-account-copy>b { font-size:13px; }
body #rechargeModal .recharge-account-copy>span { font-size:12px; color:#667d98; }
body #rechargeModal .benefit-sidebar-brand small { font-size:11px; }
body #rechargeModal .benefit-sidebar-brand span { font-size:12px; }
body #rechargeModal .benefit-sidebar-content h3 { font-size:16px; }
body #rechargeModal .benefit-sidebar-content li b { font-size:13px; }
body #rechargeModal .benefit-sidebar-content li small,
body #rechargeModal .benefit-sidebar-note b,
body #rechargeModal .benefit-sidebar-note p { font-size:12px; }
body #rechargeModal .recharge-section-heading h3 { font-size:18px; }
body #rechargeModal .recharge-section-heading>span { font-size:12px; color:#667c96; }
body #rechargeModal .plan-card,
body #rechargeModal .membership-benefit-grid article { min-height:188px!important; }
body #rechargeModal .annual-eyebrow,
body #rechargeModal .credit-campaign-tag { font-size:11px; }
body #rechargeModal .plan-term,
body #rechargeModal .annual-inclusions>i,
body #rechargeModal .annual-price>small,
body #rechargeModal .annual-price-line>span,
body #rechargeModal .annual-select-label { font-size:12px; }
body #rechargeModal .membership-benefit-grid article>small { font-size:12px; }
body #rechargeModal .membership-benefit-grid article>b { font-size:20px; }
body #rechargeModal .membership-benefit-grid article>em { font-size:12px; color:#71839a; }
body #rechargeModal .membership-gift-strip,
body #rechargeModal .membership-gift-strip>small { font-size:12px; }
body #rechargeModal .membership-terms-note>b,
body #rechargeModal .membership-terms-note>p,
body #rechargeModal .membership-terms-note>span { font-size:12px; }
body #rechargeModal .credit-tier-name { font-size:12px; }
body #rechargeModal .credit-tier-footer { font-size:12px; color:#667c96; }
body #rechargeModal .recharge-order-label,
body #rechargeModal .recharge-order-summary dl,
body #rechargeModal #rechargeNotice,
body #rechargeModal .recharge-footnote,
body #rechargeModal .recharge-legal { font-size:12px; color:#667c96; }
html body.workspace-readable #rechargeModal #rechargeClose {
 display:grid!important;
 place-items:center!important;
 width:40px!important;
 min-width:40px!important;
 height:40px!important;
 min-height:40px!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
 color:#284967!important;
 font-size:0!important;
}
html body.workspace-readable #rechargeModal #rechargeClose:hover {
 border:0!important;
 background:transparent!important;
 box-shadow:none!important;
 color:#0876d8!important;
}
html body.workspace-readable #rechargeModal #rechargeClose svg { width:20px; height:20px; }

@media(max-width:500px) {
 body #rechargeModal .recharge-heading { gap:0; }
 body #rechargeModal .recharge-title-copy { padding-left:0; }
}

/* v395: reference-style credit package cards; all customer-facing units remain credits. */
body #rechargeModal .credit-recharge-options {
 gap:10px;
}
body #rechargeModal .credit-recharge-options button,
body #rechargeModal .credit-recharge-options button:nth-child(n) {
 display:grid;
 grid-template-rows:auto auto 1fr 34px;
 justify-items:center;
 align-content:start;
 min-height:170px;
 padding:32px 12px 0;
 gap:5px;
 overflow:hidden;
 border:1px solid #d8e1ec;
 border-radius:11px;
 background:#fff;
 box-shadow:none;
 text-align:center;
}
body #rechargeModal .credit-campaign-tag {
 top:-1px;
 left:50%;
 min-width:58px;
 padding:5px 9px 6px;
 transform:translateX(-50%);
 border-radius:0 0 7px 7px;
 background:linear-gradient(135deg,#ff6b5f,#ff3f4b);
 box-shadow:0 4px 10px rgba(255,70,75,.14);
 font-size:10px;
 line-height:1;
}
body #rechargeModal .credit-selection-mark {
 top:12px;
 right:11px;
 width:15px;
 height:15px;
 background:#fff;
}
body #rechargeModal .credit-recharge-options button>strong {
 grid-row:1;
 justify-content:center;
 width:100%;
 color:#162c49!important;
 font-size:19px;
 letter-spacing:0;
 line-height:1.3;
}
body #rechargeModal .credit-recharge-options button>strong small {
 color:#162c49;
 font-size:12px;
 font-weight:600;
}
body #rechargeModal .credit-price-row {
 grid-row:2;
 display:flex;
 flex-direction:column;
 align-items:center;
 margin:0;
 gap:1px;
}
body #rechargeModal .credit-price-row em {
 color:#287fee!important;
 font-size:22px!important;
 font-weight:700;
 line-height:1.25;
}
body #rechargeModal .credit-price-row del {
 color:#a5afbd;
 font-size:10px;
 line-height:1.3;
}
body #rechargeModal .credit-tier-footer {
 display:none;
}
body #rechargeModal .credit-tier-name {
 grid-row:4;
 align-self:end;
 display:grid;
 place-items:center;
 width:calc(100% + 24px);
 min-height:34px;
 margin:0 -12px;
 padding:7px 6px;
 border-radius:0;
 background:#f2f4f8;
 color:#53677f;
 font-size:10px;
 font-weight:600;
 line-height:1.25;
}
body #rechargeModal .credit-recharge-options button:hover:not(:disabled) {
 border-color:#78b0f1;
 box-shadow:0 7px 18px rgba(24,103,191,.09);
}
body #rechargeModal .credit-recharge-options button.is-selected {
 border-color:#1684e8;
 background:#fff;
 box-shadow:0 0 0 1px #1684e8 inset,0 8px 20px rgba(24,103,191,.10);
}
body #rechargeModal .credit-recharge-options button.is-selected .credit-tier-name {
 background:linear-gradient(135deg,#1682ea,#17a9d0);
 color:#fff;
}

@media(max-width:500px) {
 body #rechargeModal .credit-recharge-options button,
 body #rechargeModal .credit-recharge-options button:nth-child(n) {
  min-height:158px;
  padding:29px 9px 0;
 }
 body #rechargeModal .credit-tier-name {
  width:calc(100% + 18px);
  margin:0 -9px;
 }
 body #rechargeModal .credit-campaign-tag { min-width:52px; padding-inline:7px; font-size:9px; }
 body #rechargeModal .credit-recharge-options button>strong { font-size:18px; }
 body #rechargeModal .credit-price-row em { font-size:20px!important; }
}

/* v402: keep the desktop membership center on one screen without an inner scrollbar. */
@media(min-width:801px) {
 body #rechargeModal { padding:8px; }
 body #rechargeModal .recharge-card {
  max-height:calc(100dvh - 16px);
  overflow:hidden;
 }
 body #rechargeModal .recharge-account-bar { min-height:72px; padding:10px 26px; }
 body #rechargeModal .recharge-content { padding:10px 26px 10px; }
 body #rechargeModal .benefit-sidebar-brand { min-height:105px; padding:18px 20px; }
 body #rechargeModal .benefit-sidebar-content { padding:18px 20px; }
 body #rechargeModal .benefit-sidebar-content h3 { margin-bottom:13px; }
 body #rechargeModal .benefit-sidebar-content ul { gap:13px; }
 body #rechargeModal .benefit-sidebar-note { margin-top:18px; padding-top:14px; }
 body #rechargeModal .membership-heading { margin:0 0 8px; }
 body #rechargeModal .plan-card,
 body #rechargeModal .membership-benefit-grid article { min-height:160px!important; }
 body #rechargeModal .plan-card { padding-top:25px!important; }
 body #rechargeModal .membership-benefit-grid article { padding-top:24px; padding-bottom:12px; }
 body #rechargeModal .membership-gift-strip { margin-top:6px; }
 body #rechargeModal .membership-terms-note { margin-top:6px; padding:7px 10px; }
 body #rechargeModal .recharge-main>.recharge-section-heading { margin:12px 0 8px; }
 body #rechargeModal .credit-recharge-options button,
 body #rechargeModal .credit-recharge-options button:nth-child(n) {
  min-height:145px;
  padding-top:28px;
  grid-template-rows:auto auto 1fr 31px;
 }
 body #rechargeModal .credit-tier-name { min-height:31px; padding-block:5px; }
 body #rechargeModal .recharge-checkout { margin-top:10px; padding:10px 18px; }
 body #rechargeModal .recharge-order-summary h3 { margin:2px 0 4px; }
 body #rechargeModal .recharge-order-summary dl { gap:2px; line-height:1.45; }
 body #rechargeModal #rechargeNotice { margin-top:4px; line-height:1.45; }
 body #rechargeModal .recharge-footnote { margin-top:7px; line-height:1.45; }
 body #rechargeModal .recharge-legal { margin-top:2px; }
}

/* v592 final cascade: five recharge tiers and the two current memberships. */
body #rechargeModal .membership-plan-row{grid-template-columns:320px minmax(0,1fr)}
body #rechargeModal .package-recharge-options{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
body #rechargeModal .package-recharge-options .plan-card{min-height:160px!important;padding:18px 14px!important}
body #rechargeModal .trial-plan-card{border-color:#f0a144!important;background:linear-gradient(180deg,#fff9ef,#fff)!important}
body #rechargeModal .trial-plan-card .annual-eyebrow{background:#fff0d9;color:#c66410!important}
body #rechargeModal .credit-recharge-options{grid-template-columns:repeat(5,minmax(0,1fr))}
body #rechargeModal .credit-recharge-options .is-featured{border-color:#f29a33!important;box-shadow:0 0 0 1px #f29a33 inset,0 8px 20px rgba(232,123,20,.12)!important}
body #rechargeModal .credit-recharge-options .is-featured .credit-campaign-tag{background:#ff8a1f;color:#fff}
@media(max-width:1100px){body #rechargeModal .credit-recharge-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){body #rechargeModal .membership-plan-row{grid-template-columns:1fr}body #rechargeModal .credit-recharge-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){body #rechargeModal .package-recharge-options{grid-template-columns:1fr}}

/* v606: keep the explanatory membership content; close only top-up products. */
body #rechargeModal.membership-plan-only .recharge-body{display:grid!important;grid-template-columns:212px minmax(0,1fr)!important}
body #rechargeModal.membership-plan-only .recharge-benefit-sidebar{display:block!important}
body #rechargeModal.membership-plan-only .recharge-content{width:auto!important;max-width:none!important;margin:0!important;padding:18px 26px 16px!important}
body #rechargeModal.membership-plan-only .membership-plan-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
body #rechargeModal.membership-plan-only .package-recharge-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card{min-height:176px!important;padding:23px 18px 18px!important}
body #rechargeModal.membership-plan-only .membership-benefit-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
body #rechargeModal.membership-plan-only .membership-benefit-grid article{min-height:112px!important;padding:18px 12px 12px!important}
body #rechargeModal.membership-plan-only .membership-gift-strip{display:flex!important}
body #rechargeModal.membership-plan-only .membership-terms-note{display:grid!important}
body #rechargeModal.membership-plan-only .recharge-main>.recharge-section-heading,
body #rechargeModal.membership-plan-only .credit-recharge-options{display:none!important}
body #rechargeModal.membership-plan-only .recharge-checkout{margin-top:12px!important}
body #rechargeModal.membership-plan-only .recharge-footnote{display:block!important}
@media(max-width:800px){
 body #rechargeModal.membership-plan-only .recharge-body{grid-template-columns:1fr!important}
 body #rechargeModal.membership-plan-only .recharge-benefit-sidebar{border-right:0;border-bottom:1px solid #e4eaf2}
 body #rechargeModal.membership-plan-only .membership-benefit-grid{grid-template-columns:1fr!important}
}
@media(max-width:500px){body #rechargeModal.membership-plan-only .package-recharge-options{grid-template-columns:1fr!important}}

/* v607: reserve a dedicated bottom action lane inside both membership cards. */
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card{
 min-height:184px!important;
 padding:25px 18px 48px!important;
 gap:5px!important;
}
body #rechargeModal.membership-plan-only .plan-card .annual-copy{gap:3px!important}
body #rechargeModal.membership-plan-only .plan-card .annual-price{
 margin-top:auto!important;
 margin-bottom:2px!important;
 gap:1px!important;
}
body #rechargeModal.membership-plan-only .plan-card .annual-price>small{
 min-height:14px;
 line-height:1.3;
 white-space:nowrap;
}
body #rechargeModal.membership-plan-only .plan-card .annual-select-label{
 min-height:36px!important;
 padding:0 12px!important;
 line-height:36px!important;
}
@media(max-width:500px){
 body #rechargeModal.membership-plan-only .package-recharge-options .plan-card{min-height:196px!important;padding:27px 18px 48px!important}
}

/* v622: both membership cards share the same thin/rest and strong/selected frame. */
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card{
 transform:none!important;
 filter:none!important;
 opacity:1;
 touch-action:manipulation;
 -webkit-tap-highlight-color:transparent;
 transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease!important;
}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card::after{
 content:"✓";
 position:absolute;
 z-index:7;
 top:10px;
 right:10px;
 display:grid!important;
 place-items:center;
 width:20px;
 height:20px;
 border-radius:50%;
 background:#1678d2;
 box-shadow:0 4px 12px rgba(22,120,210,.24);
 color:#fff;
 font-size:12px;
 font-weight:800;
 line-height:1;
 opacity:0;
 transform:scale(.72);
 pointer-events:none;
 transition:opacity 120ms ease,transform 180ms cubic-bezier(.22,.85,.32,1.2);
}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card:not(.is-selected){
 border-color:#b8cde2!important;
 background:#fff!important;
 box-shadow:0 4px 12px rgba(38,73,113,.04)!important;
}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card.is-selected{
 border-color:#1678d2!important;
 background:#f8fbff!important;
 box-shadow:0 0 0 1px #1678d2 inset,0 7px 20px rgba(22,120,210,.10)!important;
}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card:active{
 border-color:#0f69bd!important;
 background:#eef6ff!important;
 box-shadow:0 0 0 2px rgba(22,120,210,.16) inset!important;
}
body #rechargeModal.membership-plan-only .package-recharge-options .plan-card.is-selected::after{
 opacity:1;
 transform:scale(1);
}
@media(prefers-reduced-motion:reduce){
 body #rechargeModal.membership-plan-only .package-recharge-options .plan-card,
 body #rechargeModal.membership-plan-only .package-recharge-options .plan-card::after{transition:none!important}
}