/* Gold recharge surface: deliberately scoped so shared navigation stays unchanged. */
/* 底纹图铺在滚动容器上。.main-content 自身 overflow-y:auto，background-attachment 取默认的
   scroll 时背景锚在它的 padding box 而非滚动内容上，所以这张图只需覆盖一屏，页面再长也不会
   露底、不会平铺出接缝。下面的纯色既是加载前的兜底，也是图片比例对不上时的补角色。 */
.main-content:has(> #page-recharge.active) {
  padding:24px;
  background:#fcf9f1 url('/static/img/recharge/ui/page-bg.jpg') center/cover no-repeat;
}
#page-recharge {
  --rc-ink:#172442; --rc-muted:#59657b; --rc-gold:#9b610d;
  --rc-line:#e8dfce; --rc-surface:#fffefa; --rc-soft:#faf5e9;
  /* 填充按钮悬停时压深的那一档。联系客服去掉描边后，悬停不能再靠换描边色反馈，
     只剩底色可用；深浅两套底色差距不同，所以各写一支，不能硬编码一个十六进制值。 */
  --rc-soft-hover:#f5edda;
  /* 兑换激活码用浅灰底，和联系客服的奶油底分开，两个入口才不会像同一颗按钮。
     它是次级入口，底色只比页面深半档，悬停再压一档，不能比联系客服更抢眼。 */
  --rc-gray:#f4f5f6;
  --rc-gray-hover:#eceef0;
  --rc-ticket-start:#fffdf8; --rc-ticket-end:#fde8ca; --rc-ticket-selected:#fff0ce;
  --rc-ticket-border:#dfc495; --rc-ticket-dot:rgba(160,103,22,.34);
  --rc-ticket-price:#b85b25; --rc-ticket-price-text:#fff; --rc-ticket-ribbon:#137c69; --rc-check-size:30px;
  --text-primary:var(--rc-ink); --text-secondary:var(--rc-muted); --text-tertiary:#687185;
  --bg-card:var(--rc-surface); --bg-subtle:var(--rc-soft); --border-medium:var(--rc-line);
  --rc-display:var(--font);
  max-width:1320px; margin-inline:auto; color:var(--rc-ink); font-size:14px;
}
#page-recharge [hidden] { display:none!important; }
#page-recharge button, #page-recharge input { font-family:inherit; }
#page-recharge button, #page-recharge a, #page-recharge input, #page-recharge summary { -webkit-tap-highlight-color:transparent; }
#page-recharge :is(button,a,input,summary):focus-visible { outline:3px solid #a26817; outline-offset:3px; }
#page-recharge h1, #page-recharge h2, #page-recharge h3 { text-wrap:balance; }
#page-recharge h2 { display:flex; align-items:center; gap:8px; font:650 20px/1.35 var(--rc-display); }
#page-recharge .rc-coin { object-fit:contain; flex:none; vertical-align:middle; user-select:none; }
#page-recharge .rc-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
#page-recharge .rc-brand-title { display:flex; align-items:center; gap:10px; flex-shrink:0; }
#page-recharge h1 { color:#362817; font:700 26px/1.2 var(--rc-display); letter-spacing:-.02em; }
#page-recharge .rc-header-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right; }
#page-recharge .head-meta { margin:0; display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--rc-muted); }
#page-recharge .head-meta b { font-weight:700; color:var(--rc-ink); }
#page-recharge #rc-balance { font-variant-numeric:tabular-nums; }
#page-recharge .rc-meta-divider { display:block; width:1px; height:12px; background:var(--rc-line); }
#page-recharge .console-status-pill { padding:0; border:0; background:none; color:#007955; }
#page-recharge .recharge-first-entry { margin-top:8px; font-size:12px; color:var(--rc-gold); }
#page-recharge .rc-commerce { display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); align-items:stretch; gap:16px; margin-bottom:18px; }
#page-recharge .rc-purchase { container-type:inline-size; display:flex; flex-direction:column; gap:16px; min-width:0; padding:16px; border:1px solid var(--rc-line); border-radius:12px; background:var(--rc-surface); }
#page-recharge .rc-commerce:not(.has-gift) { grid-template-columns:1fr; }
#page-recharge .rc-showcase { position:relative; isolation:isolate; overflow:hidden; border-radius:12px; background:linear-gradient(135deg,#f1dfce,#fff8eb); min-height:580px; }
#page-recharge .rc-portrait { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 0; z-index:-2; }
#page-recharge .rc-showcase::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 70%,rgba(255,248,235,.32) 78%,#fff7e9 92%); }
#page-recharge .rc-portrait-copy { color:var(--rc-ink); position:absolute; left:24px; right:24px; bottom:14px; }
#page-recharge .rc-kicker { display:block; margin-bottom:8px; color:#aa3d0e; font-weight:700; }
#page-recharge .rc-hero-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#page-recharge #rc-hero-name { font-size:24px; }
#page-recharge .recharge-gift-status { display:inline-flex; flex:none; padding:3px 10px; border:0; border-radius:99px; color:#643e0d; background:#f6dc9e; font-size:12px; line-height:1.5; }
#page-recharge .recharge-gift-status.is-claimed { background:#e0f1e8; color:#006244; }
#page-recharge .rc-gold-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; min-height:40px; padding:9px 24px; color:#342206; background:linear-gradient(105deg,#f7d77f,#dda231 58%,#ebc77b); font-size:15px; font-weight:650; text-decoration:none; cursor:pointer; transition:filter .18s ease,transform .18s ease; }
#page-recharge .rc-gold-button:hover { filter:brightness(1.05); }
#page-recharge .recharge-gift-download, #page-recharge .recharge-gift-download:hover { box-shadow:none; }
#page-recharge .rc-gold-button:active { transform:translateY(1px); }
#page-recharge .recharge-gift-download { border:1px solid #b18a48; background:transparent; color:#805116; box-shadow:none; }
#page-recharge .recharge-gift-download:hover { background:#fff4d9; }
#page-recharge .rc-portrait-copy .recharge-gift-download { width:100%; }
#page-recharge .recharge-workspace { margin:0; min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
#page-recharge .rc-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
#page-recharge .rc-balance-heading { display:flex; align-items:baseline; gap:5px; min-width:0; color:var(--rc-muted); }
#page-recharge .rc-balance-heading>.rc-coin { align-self:center; margin-right:3px; }
#page-recharge .rc-balance-heading>span { font-size:15px; font-weight:600; }
#page-recharge .rc-balance-heading>strong { color:var(--rc-ink); font:750 26px/1.15 var(--font); font-variant-numeric:tabular-nums; letter-spacing:-.015em; }
#page-recharge .rc-balance-heading>small { font-size:12px; font-weight:500; }
#page-recharge .rc-text-button { display:inline; padding:0; border:0; color:var(--rc-gold); background:none; font-size:13px; font-weight:600; line-height:1.6; cursor:pointer; text-decoration:none; }
#page-recharge .rc-text-button:hover { text-decoration:underline; }
#page-recharge .rc-ai-plan { margin:0 0 8px; }
#page-recharge .rc-ai-plan-line { padding:8px 10px; border:0; border-radius:8px; background:var(--rc-soft); font-size:13px; color:var(--rc-muted); line-height:1.6; gap:8px; }
#page-recharge .rc-ai-plan-line>svg { color:#ad7224; margin-top:2px; }
#page-recharge .rc-ai-plan-line b { color:var(--rc-ink); }
#page-recharge .rc-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 12px; }
#page-recharge :is(.rc-amount-btn,.rc-custom-card) {
  position:relative; box-sizing:border-box; min-width:0; min-height:154px;
  border:1px solid var(--rc-ticket-border); border-radius:12px;
  background:transparent;
  color:var(--rc-ink); box-shadow:none; overflow:hidden;
  /* 选中、悬停、聚焦的边框都由 inset 环承担（卡片不留 border），所以这里过渡 box-shadow
     而不是 border-color，否则这三种状态的切换会是硬跳。 */
  transition:box-shadow .18s ease,transform .18s cubic-bezier(.25,1,.5,1),background-color .18s ease;
}
#page-recharge .rc-amount-btn { display:flex; flex-direction:column; align-items:stretch; padding:0; text-align:left; cursor:pointer; }
@media(hover:hover) {
  #page-recharge :is(.rc-amount-btn,.rc-custom-card):hover { transform:translateY(-1px); }
}
#page-recharge :is(.rc-amount-btn,.rc-custom-card):active { transform:none; }
#page-recharge :is(.rc-amount-btn,.rc-custom-card).selected {
  background:
    radial-gradient(circle at 8px 8px,var(--rc-ticket-dot) 0 1.5px,transparent 2px),
    radial-gradient(circle at calc(100% - 8px) 8px,var(--rc-ticket-dot) 0 1.5px,transparent 2px),
    radial-gradient(circle at 8px calc(100% - 8px),var(--rc-ticket-dot) 0 1.5px,transparent 2px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),var(--rc-ticket-dot) 0 1.5px,transparent 2px),
    linear-gradient(135deg,var(--rc-ticket-start),var(--rc-ticket-selected));
  box-shadow:inset 0 0 0 1px #a86b16;
}
/* 档位插画由 --rc-tier-art 指定。档位金额来自后端活动配置，可能出现 ¥300 这类非预设值，
   所以插画按金额区间取，不做精确匹配；取哪一张由 createRcAmountButton() 写进内联变量。 */
#page-recharge .rc-tier-art { display:block; width:104px; max-width:100%; aspect-ratio:1; margin:0 auto; flex:none; background-image:var(--rc-tier-art); background-size:contain; background-position:center; background-repeat:no-repeat; filter:drop-shadow(0 4px 4px rgba(132,80,12,.14)); }
#page-recharge .rc-amount-body { position:relative; z-index:0; display:grid; flex:1; grid-template-columns:minmax(92px,42%) minmax(0,1fr); grid-template-rows:auto auto minmax(22px,auto); grid-template-areas:"art points" "art price" "notes notes"; align-items:center; column-gap:10px; row-gap:6px; min-width:0; padding:22px 14px 12px; }
#page-recharge .rc-amount-body>.rc-tier-art { grid-area:art; align-self:center; }
#page-recharge .rc-amount-cny { grid-area:price; align-self:start; justify-self:start; display:inline-flex; align-items:center; justify-content:center; min-width:80px; min-height:34px; padding:5px 14px; border-radius:7px; background:var(--rc-ticket-price); color:var(--rc-ticket-price-text); box-shadow:inset 0 -2px 0 rgba(70,28,8,.18),inset 0 1px 0 rgba(255,255,255,.28); font:700 19px/1.1 var(--font); letter-spacing:-.01em; white-space:nowrap; }
#page-recharge .rc-amount-pts { grid-area:points; align-self:end; display:flex; align-items:baseline; justify-content:flex-start; flex-wrap:wrap; gap:0 4px; min-width:0; margin:0; color:var(--rc-ink); font:750 22px/1.1 var(--font); font-variant-numeric:tabular-nums; }
#page-recharge .rc-amount-pts strong { font:inherit; white-space:nowrap; }
#page-recharge .rc-amount-pts small { color:var(--rc-muted); font-size:11px; font-weight:500; }
#page-recharge .rc-amount-pts small:first-child { flex:0 0 100%; margin-bottom:2px; font-size:10px; line-height:1.4; }
#page-recharge .rc-amount-notes { grid-area:notes; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; min-height:22px; padding-right:calc(var(--rc-check-size) + 6px); }
#page-recharge .rc-amount-bonus { display:inline-flex; align-items:center; justify-content:center; min-height:20px; margin:0; padding:1px 7px; border-radius:5px; background:#e1f2e8; color:#005d43; font-size:11px; line-height:18px; font-weight:600; white-space:nowrap; }
#page-recharge .rc-amount-bonus.is-empty { visibility:hidden; width:1px; padding-inline:0; }
/* 折扣与推荐角标用设计稿的带形状底图（燕尾、卷边、左侧尖角是 CSS 画不出来的），
   但文案一律由 CSS 渲染：折扣值来自后端 label，可能是「98折」也可能回落成整段文案，
   写进图里就只能服务一种活动。底图按 100% 100% 铺满，长文案只会让纯色中段轻微横向拉伸。
   padding 右侧让出燕尾、底部让出卷边，文字才不会压在缺口上。 */
#page-recharge .rc-benefit-ribbon { position:absolute; left:0; top:0; z-index:2; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:48px; min-height:31px; padding:0 9px 7px 5px; background:url('/static/img/recharge/ui/badge-discount.png') no-repeat; background-size:100% 100%; color:#fff; font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; pointer-events:none; text-shadow:0 1px 1px rgba(8,74,65,.4); }
#page-recharge .rc-recommend-tag { position:absolute; right:0; top:0; z-index:2; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:86px; min-height:30px; padding:0 7px 4px 19px; border-radius:0; background:url('/static/img/recharge/ui/badge-recommend.png') no-repeat; background-size:100% 100%; color:#fff6dd; font-size:11px; font-weight:650; line-height:1.2; white-space:nowrap; }
/* 勾选符号已经画在底图里，不再由 <i> 渲染。选中态仍靠 aria-pressed 对外表达，不只依赖这张图。 */
#page-recharge .rc-selected-label { position:absolute; right:0; bottom:0; z-index:2; display:grid; place-items:center; width:var(--rc-check-size); height:calc(var(--rc-check-size) * 48 / 50); border-radius:0; background:url('/static/img/recharge/ui/badge-selected.png') center/contain no-repeat; opacity:0; pointer-events:none; transform:scale(.82); transform-origin:100% 100%; transition:opacity .16s ease,transform .16s ease; }
#page-recharge .selected .rc-selected-label { opacity:1; transform:none; }
#page-recharge .rc-selected-label i { display:none; }
#page-recharge .rc-custom-card { display:grid; grid-template-columns:minmax(92px,42%) minmax(0,1fr); grid-template-rows:auto auto minmax(22px,auto); column-gap:10px; row-gap:6px; align-items:center; padding:22px 14px 12px; text-align:left; cursor:pointer; }
#page-recharge .rc-custom-card>.rc-tier-art { grid-column:1; grid-row:1/4; align-self:center; width:98px; }
#page-recharge .rc-custom-card>.rc-custom-art { background-image:url('/static/img/recharge/jellybean/family-v3/tier-custom.webp?v=20261017webp'); background-size:contain; background-position:center; }
#page-recharge .rc-custom-card label { grid-column:2; align-self:end; display:block; font:700 20px/1.25 var(--font); cursor:pointer; }
#page-recharge .rc-custom-input-shell { grid-column:2; display:flex; align-items:center; gap:4px; width:100%; min-width:0; min-height:38px; margin:0; padding:0 9px; border:1px solid var(--rc-ticket-border); border-radius:7px; background:rgba(255,255,255,.76); text-align:left; }
#page-recharge #rc-custom-input { min-width:0; width:100%; appearance:textfield; background:transparent; color:var(--rc-ink); border:0; font-size:15px; min-height:40px; cursor:text; }
#page-recharge #rc-custom-input::-webkit-inner-spin-button,
#page-recharge #rc-custom-input::-webkit-outer-spin-button { appearance:none; margin:0; }
#page-recharge #rc-custom-input::placeholder { color:var(--rc-muted); }
#page-recharge #rc-custom-input:focus-visible { outline:none; }
#page-recharge .rc-custom-input-shell:focus-within { outline:none; }
#page-recharge .rc-custom-card:has([aria-invalid="true"])>.rc-custom-input-shell { border-color:#b3291f; }
#page-recharge .rc-custom-card .rc-field-error { grid-column:1/-1; align-self:start; color:#b3291f; margin:0; padding-right:calc(var(--rc-check-size) + 6px); font-size:11px; line-height:1.3; }
#page-recharge .rc-checkout { container-type:inline-size; padding:16px 0 0; margin:0; border:0; border-radius:0; background:transparent; }
#page-recharge .rc-checkout-price { display:none; margin:0; }
#page-recharge .rc-checkout-price h2 { font-size:13px; font-weight:400; color:var(--rc-muted); }
#page-recharge #rc-order-amount { font:700 28px/1.2 var(--font); letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:#955713; white-space:nowrap; }
#page-recharge .rc-order-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; margin-top:7px; }
#page-recharge .rc-order-meta:not(:has(> :not([hidden]))) { display:none; }
#page-recharge .rc-coverage { margin:0; flex:0 0 auto; color:var(--rc-muted); font-size:12px; line-height:1.6; white-space:nowrap; }
/* 够用天数夹在第二行两句明细中间：左边是基础到账与赠送，右边是本单附赠。
   整句不折行。这一行放不下时整句退到下一行，行首不会多出分隔符或缩进。 */
#page-recharge .rc-checkout-body { min-width:0; }
#page-recharge .rc-payment-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(180px,1fr); align-items:start; gap:24px; }
#page-recharge .rc-credit-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; color:var(--rc-muted); font-size:13px; }
#page-recharge .rc-credit-total small { font-size:12px; }
#page-recharge #rc-order-total { color:#955713; font:700 28px/1.2 var(--font); font-variant-numeric:tabular-nums; }
#page-recharge .rc-equation { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; margin-top:6px; color:var(--rc-muted); font-size:12px; line-height:1.6; }
#page-recharge .rc-equation>span { white-space:nowrap; }
#page-recharge .rc-equation b { font-weight:400; font-variant-numeric:tabular-nums; }
#page-recharge .rc-order-gift { display:flex; align-items:center; gap:7px; width:fit-content; max-width:100%; margin:0; padding:0; border:0; color:var(--rc-muted); }
#page-recharge .rc-order-gift svg { width:16px; height:16px; flex:none; }
#page-recharge .rc-order-gift span { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; }
#page-recharge .rc-order-gift small { font-size:12px; }
#page-recharge .rc-order-gift b { color:inherit; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
#page-recharge .rc-breakdown { margin-top:6px; color:var(--rc-muted); font-size:12px; }
#page-recharge .rc-payment-details { min-width:0; }
#page-recharge .rc-payment-action { display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; min-width:0; max-width:100%; justify-self:end; }
#page-recharge .rc-pay-button { margin-top:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-width:144px; min-height:46px; padding:11px 18px; border-radius:8px; font-size:14px; font-weight:600; white-space:nowrap; background:#07c160; color:#fff; border:0; box-shadow:none; }
#page-recharge .rc-pay-button svg { flex:none; }
#page-recharge .rc-pay-button:hover { background:#06ad56; }
#page-recharge .rc-pay-button.rc-pay-card:not(:disabled) { background:#0570de; }
#page-recharge .rc-pay-button.rc-pay-card:not(:disabled):hover { background:#0461c4; }
#page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled) { background:#fff; color:#1a1f36; box-shadow:inset 0 0 0 1px #d5dbe1; }
#page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled):hover { background:#f6f8fa; }
[data-theme="dark"] #page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled) { background:transparent; color:#f5f5f5; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
[data-theme="dark"] #page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled):hover { background:rgba(255,255,255,.06); }
#page-recharge .rc-pay-button:disabled { opacity:1; background:#efede7; color:#7c8492; border:1px solid var(--rc-line); cursor:not-allowed; box-shadow:none; filter:none; }
@container (max-width:580px) {
  #page-recharge .rc-payment-row { grid-template-columns:1fr; gap:14px; }
  #page-recharge .rc-payment-action { width:100%; justify-self:stretch; min-width:0; }
}
/* Section headings live on the page canvas, outside a single content surface. */
#page-recharge .rc-content-section { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; margin:28px 0; }
#page-recharge .rc-content-section>.rc-section-heading,
#page-recharge .rc-content-section>.rc-story-heading,
#page-recharge .rc-content-section>h2 { margin:0 0 14px; padding:0; border:0; }
#page-recharge .rc-section-body { padding:20px; border:0; border-radius:10px; background:var(--rc-surface); box-shadow:none; }
#page-recharge .rc-history .table-wrap { background:var(--rc-surface); box-shadow:none; }
#page-recharge h3 { font:700 17px/1.4 var(--rc-display); margin-bottom:4px; }
#page-recharge .recharge-gift-card { grid-template-columns:1fr; min-height:0; overflow:visible; container-type:inline-size; }
#page-recharge .rc-story-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#page-recharge .rc-story-heading h2 { flex:0 1 auto; }
#page-recharge .rc-gift-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:20px 48px; }
#page-recharge .rc-gift-details.rc-section-body { padding:28px 32px; }
#page-recharge .rc-gift-details h3 { margin:0 0 18px; color:var(--rc-ink); font-size:16px; font-weight:700; line-height:1.5; }
#page-recharge .recharge-gift-benefits { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0; }
#page-recharge .recharge-gift-benefits>span { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.7; color:var(--rc-ink); }
#page-recharge .recharge-gift-benefits svg { width:18px; height:18px; margin-top:3px; color:var(--rc-gold); flex:none; }
#page-recharge .recharge-gift-desc { max-width:46ch; color:var(--rc-muted); font-size:14px; line-height:1.85; margin:0; text-wrap:pretty; overflow-wrap:anywhere; }
#page-recharge .rc-gift-rules { display:flex; flex-direction:column; min-width:0; }
#page-recharge .recharge-gift-benefits>span>span { min-width:0; text-wrap:balance; }
#page-recharge .recharge-gift-note { min-width:0; color:var(--rc-muted); font-size:12px; line-height:1.85; margin:auto 0 0; padding-top:18px; white-space:normal; overflow-wrap:anywhere; }
#page-recharge .rc-gift-story { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
#page-recharge .rc-gift-story .recharge-gift-desc { margin-bottom:20px; }
#page-recharge .rc-gift-story .recharge-gift-download { flex:none; display:inline-flex; width:fit-content; max-width:100%; justify-content:center; min-width:176px; min-height:44px; align-items:center; padding:10px 28px; margin:auto 0 0 auto; border:0; border-radius:999px; color:#342206; background:linear-gradient(105deg,#f7d77f,#dda231 58%,#ebc77b); font-size:14px; font-weight:650; text-decoration:none; }
#page-recharge .rc-gift-story .recharge-gift-download:hover { filter:brightness(1.05); text-decoration:none; }
@container (max-width:820px) {
  #page-recharge .rc-gift-details { grid-template-columns:1fr; gap:28px; }
  #page-recharge .rc-gift-details.rc-section-body { padding:22px; }
  #page-recharge .rc-gift-details h3 { margin-bottom:14px; }
}
@container (max-width:480px) {
  #page-recharge .rc-gift-story .recharge-gift-download { width:100%; min-width:0; }
}
#page-recharge .recharge-next-card { margin-bottom:16px; }
#page-recharge .rc-history .rc-section-heading { justify-content:flex-start; gap:30px; }
#page-recharge .rc-history-filters { display:flex; gap:20px; }
#page-recharge .rc-history-filters button { min-height:36px; border:0; border-bottom:2px solid transparent; background:none; font-size:13px; color:var(--rc-muted); cursor:pointer; }
#page-recharge .rc-history-filters button[aria-pressed="true"] { color:var(--rc-gold); border-bottom-color:#bd7e22; font-weight:650; }
#page-recharge .table { min-width:540px; width:100%; }
#page-recharge .table th { padding:10px 12px; background:var(--rc-soft); color:var(--rc-muted); font-size:12px; }
#page-recharge .table td { padding:10px 12px; border-bottom:1px solid var(--rc-line); font-size:13px; color:var(--rc-muted); }
#page-recharge .table tbody tr:nth-child(even) { background:#fcfbf8; }
#page-recharge .rc-record-amount { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--rc-ink); }
#page-recharge .rc-history-pagination { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; color:var(--rc-muted); }
#page-recharge .rc-history-pagination>span { margin-right:auto; }
#page-recharge .rc-history-pagination button { min-height:40px; padding:6px 14px; border:1px solid var(--rc-line); border-radius:6px; background:var(--rc-soft); color:var(--rc-ink); cursor:pointer; }
#page-recharge .rc-history-pagination button:disabled { opacity:.55; cursor:default; }
#page-recharge .rc-help { display:block; }
#page-recharge .rc-help-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:32px; margin-top:0; align-items:start; }
#page-recharge .rc-faq { margin:0; }
#page-recharge details { border-bottom:1px solid var(--rc-line); }
#page-recharge summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; cursor:pointer; min-height:48px; padding:12px 0; font-size:14px; }
#page-recharge summary::-webkit-details-marker { display:none; }
#page-recharge summary::after { content:""; width:6px; height:6px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-right:4px; }
#page-recharge details[open]>summary::after { transform:rotate(225deg); }
#page-recharge details p { padding:0 28px 14px 0; color:var(--rc-muted); font-size:13px; line-height:1.6; }
#page-recharge .rc-help aside { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:0; border-left:0; background:none; border-radius:0; }
#page-recharge .rc-support-button, #page-recharge .rc-redeem-link { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 16px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
#page-recharge .rc-support-button { color:var(--rc-gold); background:var(--rc-soft); border:1px solid var(--rc-line); }
#page-recharge .rc-support-button:hover { border-color:var(--rc-gold); }
#page-recharge .rc-support-button svg, #page-recharge .rc-redeem-link svg { width:20px; height:20px; flex:none; }
#page-recharge .rc-redeem-link { background:var(--rc-gray); border:1px solid var(--rc-line); color:var(--rc-ink); }
#page-recharge .rc-redeem-link:hover { border-color:var(--rc-gold); }
/* aside 里原有的退款说明（design.contactHint）已删，它和左栏「如何申请退款？」的答案是同一句话。
   这里不再给 aside 下的 p 留样式：现在 aside 只有联系客服与兑换激活码两个入口。 */
/* Dark mode is local to the recharge surface and never recolors the shared sidebar. */
/* 奶油底纹只属于浅色稿，暗色下必须把图撤掉，否则整页泛白、文字全部失效。 */
[data-theme="dark"] .main-content:has(> #page-recharge.active) { background:#1b1915; background-image:none; }
[data-theme="dark"] #page-recharge {
  --rc-ink:#f3ead8; --rc-muted:#bab3a9; --rc-gold:#edc577; --rc-line:#42392a; --rc-surface:#24211c; --rc-soft:#302a20;
  /* 暗色下悬停要往亮的方向走，和浅色相反，所以这支不能复用浅色的值。 */
  --rc-soft-hover:#3a3327;
  --rc-gray:#2c2c2a;
  --rc-gray-hover:#383836;
  --rc-ticket-start:#332b21; --rc-ticket-end:#2b241d; --rc-ticket-selected:#44331f;
  --rc-ticket-border:#66543a; --rc-ticket-dot:rgba(237,197,119,.3);
  --rc-ticket-price:#df995f; --rc-ticket-price-text:#27180b; --rc-ticket-ribbon:#176f61;
  --text-tertiary:#bab3a9;
}
[data-theme="dark"] #page-recharge :is(h1,.rc-brand-title p) { color:#f3dfad; }
[data-theme="dark"] #page-recharge .rc-ai-plan-line { background:#29251f; }
[data-theme="dark"] #page-recharge .rc-custom-input-shell { background:rgba(16,13,10,.38); }
[data-theme="dark"] #page-recharge :is(.rc-portrait-copy,.rc-hero-name-row) { --rc-ink:#172442; --rc-muted:#59657b; }
[data-theme="dark"] #page-recharge :is(.table th,.table tbody tr:nth-child(even)) { background:#2b2925; }
[data-theme="dark"] #page-recharge :is(#rc-order-amount,#rc-order-total) { color:#fbb87e; }
[data-theme="dark"] #page-recharge .rc-story-heading .recharge-gift-download { color:var(--rc-gold); border-color:#897047; }
[data-theme="dark"] #page-recharge .rc-story-heading .recharge-gift-download:hover { background:#39301f; }
/* 薄荷绿是支付通道状态的颜色。当前余额早先在页头 .head-meta 里，和状态胶囊共用这支色；
   余额移进余额卡之后这条还跟着 #rc-balance 走，暗色下把余额数字染成了薄荷绿，
   和浅色的深金对不上，而且 :is() 里的 id 特异性压过了 --rc-balance-num。只保留状态胶囊。 */
[data-theme="dark"] #page-recharge .console-status-pill { color:#7ddeaf; }
@media(min-width:1500px) { #page-recharge .rc-tier-art { width:112px; } #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:174px; } }
@media(max-width:1180px) {
  .main-content:has(> #page-recharge.active) { padding:20px 16px; }
  #page-recharge .rc-header { align-items:flex-start; }
  #page-recharge .head-meta { gap:8px; }
  #page-recharge .rc-tier-art { width:96px; }
  #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:150px; }
  #page-recharge .rc-showcase { min-height:520px; }
  #page-recharge .rc-portrait-copy { left:18px; right:18px; }
  #page-recharge .rc-help-layout { grid-template-columns:minmax(0,1fr) 210px; gap:20px; }
}
@media(max-width:900px) {
  #page-recharge .rc-header { flex-direction:column; gap:12px; }
  #page-recharge .rc-header-right { align-items:flex-start; text-align:left; }
  #page-recharge .head-meta { justify-content:flex-start; }
  #page-recharge .rc-commerce { grid-template-columns:minmax(0,.32fr) minmax(0,.68fr); gap:12px; }
  #page-recharge .recharge-workspace { padding:0; }
  #page-recharge h2 { font-size:20px; }
  #page-recharge .rc-tier-art { width:92px; }
  #page-recharge .rc-amount-pts { font-size:21px; }
  #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:148px; }
  #page-recharge .rc-portrait-copy { left:12px; right:12px; }
  #page-recharge #rc-hero-name { font-size:23px; }
  #page-recharge .recharge-gift-benefits { flex-wrap:wrap; }
}
@media(min-width:641px) and (max-width:1000px) {
  #page-recharge .rc-commerce { grid-template-columns:1fr; }
  #page-recharge .rc-showcase { order:2; min-height:240px; }
  #page-recharge .rc-portrait { width:44%; object-position:50% 50%; }
  #page-recharge .rc-showcase::after { background:linear-gradient(90deg,transparent 20%,#fff7e9 44%); }
  #page-recharge .rc-portrait-copy { left:46%; right:24px; top:32px; bottom:auto; }
}
@media(max-width:640px) {
  .main-content:has(> #page-recharge.active) { padding:18px 12px; }
  #page-recharge { --rc-check-size:26px; }
  #page-recharge h1 { font-size:28px; }
  #page-recharge .rc-brand-title>.rc-coin { width:45px; height:45px; }
  #page-recharge .rc-commerce { grid-template-columns:1fr; }
  #page-recharge .rc-showcase { order:2; display:grid; grid-template-rows:auto auto; min-height:0; }
  #page-recharge .rc-purchase { padding:12px; }
  #page-recharge .rc-portrait { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:2/3; object-position:50% 50%; z-index:0; }
  #page-recharge .rc-showcase::after { display:none; }
  #page-recharge .rc-portrait-copy { position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:0; padding:16px 18px 18px; background:#fff7e9; }
  #page-recharge .rc-kicker { font-size:12px; margin-bottom:6px; }
  #page-recharge .rc-portrait-copy .rc-gold-button { font-size:13px; padding:8px 12px; }
  #page-recharge .rc-presets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:140px; border-radius:10px; }
  #page-recharge .rc-amount-body,
  #page-recharge .rc-custom-card { grid-template-columns:minmax(60px,40%) minmax(0,1fr); column-gap:6px; row-gap:4px; padding:19px 9px 9px; }
  #page-recharge .rc-tier-art { width:68px; }
  #page-recharge .rc-custom-card>.rc-tier-art { width:64px; }
  #page-recharge .rc-amount-cny { min-width:62px; min-height:30px; padding:4px 8px; font-size:16px; }
  #page-recharge .rc-amount-pts { font-size:17px; gap:0 3px; }
  #page-recharge .rc-amount-pts small { font-size:9px; }
  #page-recharge .rc-amount-pts small:first-child { margin-bottom:1px; font-size:9px; }
  #page-recharge .rc-amount-notes { gap:3px 5px; min-height:18px; }
  #page-recharge .rc-amount-bonus { min-height:18px; padding:1px 4px; font-size:9px; line-height:16px; }
  #page-recharge .rc-benefit-ribbon { min-height:19px; padding:1px 10px 1px 6px; font-size:9px; line-height:17px; }
  #page-recharge .rc-recommend-tag { padding:3px 6px; border-radius:0 9px 0 6px; font-size:9px; line-height:17px; }
  #page-recharge .rc-selected-label { border-radius:7px 0 9px 0; }
  #page-recharge .rc-custom-card label { font-size:16px; }
  #page-recharge .rc-custom-input-shell { gap:2px; min-height:34px; padding:0 5px; }
  #page-recharge #rc-custom-input { min-height:34px; font-size:10px; font-variant-numeric:tabular-nums; }
  #page-recharge .rc-content-section { margin:24px 0; }
  #page-recharge .rc-section-body { padding:16px; }
  #page-recharge .rc-help-layout { grid-template-columns:1fr; gap:20px; }
  #page-recharge .rc-help aside { display:grid; grid-template-columns:1fr; padding:0; border:0; gap:10px; }
  #page-recharge .rc-help aside :is(button,a) { padding:10px 8px; font-size:13px; }
  #page-recharge .rc-story-heading .rc-gold-button { padding:8px 16px; margin-left:0; }
  #page-recharge .rc-history .rc-section-heading { gap:10px; }
  #page-recharge .rc-history-pagination { gap:6px; font-size:11px; }
  #page-recharge .rc-history-pagination button { padding:4px 10px; }
  #page-recharge .rc-story-heading h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { #page-recharge *, #page-recharge *::before, #page-recharge *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

/* 2026-10-05 layout revision. */
#page-recharge .rc-header { margin-bottom:22px; }
#page-recharge .rc-commerce { gap:28px; }
#page-recharge .rc-purchase { padding:0; border:0; border-radius:0; background:transparent; gap:8px; }
#page-recharge .recharge-workspace>.rc-section-heading { min-height:36px; margin-bottom:12px; }
#page-recharge .rc-ai-plan-line { padding:10px 12px; background:transparent; border:0; border-radius:0; }
#page-recharge .rc-ai-plan { margin-bottom:16px; }
#page-recharge .rc-presets { gap:12px; margin-bottom:12px; }
/* Supporting sections keep their heading above the content. */
#page-recharge .rc-content-section {
 display:grid; grid-template-columns:minmax(0,1fr);
 gap:14px; align-items:start;
 margin:28px 0; padding:0; border-top:0;
}
#page-recharge .recharge-gift-card.rc-content-section { gap:0; }
#page-recharge .rc-content-section>.rc-story-heading,
#page-recharge .rc-content-section>.rc-section-heading,
#page-recharge .rc-content-section>h2 { margin:0; }
#page-recharge .recharge-gift-card.rc-content-section>.rc-story-heading { margin-bottom:16px; }
#page-recharge .rc-content-section h2 { font-size:20px; line-height:1.6; }
#page-recharge .rc-content-section h2>.rc-coin { display:none; }
#page-recharge .rc-story-heading { display:flex; flex-direction:row; align-items:center; gap:14px; }
/* 下半页三块（赠礼说明、米粒明细、米粒帮助）共用这一种容器词汇：只有底色，没有描边。
   米粒明细原来是「块本身没底色，里面的表格单独是一张带描边的卡」，和左右两块对不上；
   底色上移到 .rc-history-body，表格就直接落在这块底上，少一层盒子。 */
#page-recharge :is(.rc-section-body,.rc-history-body) { padding:20px 24px; border:0; border-radius:10px; background:var(--rc-surface); }
/* 赠礼说明与结算条同用 --rc-surface-warm（与 --rc-surface 同值），理由见该变量的注释。 */
#page-recharge .rc-gift-details { background:var(--rc-surface-warm); }
#page-recharge .rc-history-body { min-width:0; box-sizing:border-box; }
#page-recharge .rc-history-filters { gap:28px; margin:0 0 12px; }
#page-recharge .rc-history-filters button { min-height:32px; font-size:14px; padding:0 0 8px; }
/* 表格不再是一张卡：底色由外层 .rc-history-body 提供，这里只留横向滚动。
   圆角留着是为了把表头那块底色的上两角切圆，`overflow-x:auto` 会按圆角裁切子元素。 */
#page-recharge .rc-history .table-wrap { border:0; border-radius:10px; background:transparent; overflow-x:auto; }
#page-recharge .rc-history .table { margin:0; }
/* 表格里一条分割线都不画。表头靠一块底色和数据行分开，数据行之间靠隔行底色分开。
   线和色块是两种做法，不要叠：早先「表头下边线 + 行线」的版本，六行数据读起来是六个框。 */
#page-recharge .table th { padding:12px 16px; border-bottom:0; background:var(--rc-soft); font-weight:500; }
/* 数据行之间不画分割线：隔行底色已经把行分开了，再加横线就是每行一个框。
   表头下面那一条保留，它分的是表头与数据，不是行与行。 */
#page-recharge .table td { padding:12px 16px; border-bottom:0; }
#page-recharge .table td[colspan] { height:96px; text-align:center; color:var(--rc-muted); }
#page-recharge .rc-history-pagination { margin-top:10px; }
#page-recharge .rc-history-pagination:has(#rc-history-btn-prev:disabled):has(#rc-history-btn-next:disabled) button { display:none; }
#page-recharge .rc-help-layout { grid-template-columns:minmax(0,1fr) 200px; gap:40px; }
/* 退款说明删掉后 aside 只剩两个入口，间距回到 14：收到 8 是当初为了把那句说明和入口拉开，
   现在没有第三样东西，8 会让两个入口挤成一团。 */
#page-recharge .rc-help aside { gap:14px; }
/* 联系客服有底色就不再描边：填充本身就是边界，那条 1px 是这片区域里唯一剩下的框，
   色值还正是已经从全页容器上删掉的 --rc-line。
   悬停原来靠换描边色反馈，描边去掉后改成把填充压深一档，否则悬停没有任何提示。 */
#page-recharge .rc-support-button { border:0; }
@media(hover:hover) {
  #page-recharge .rc-support-button:hover { background:var(--rc-soft-hover); }
  /* 兑换激活码现在也是填充按钮：悬停压深底色，不再改文字色。 */
  #page-recharge .rc-redeem-link:hover { background:var(--rc-gray-hover); }
}
/* 三个问题之间不画分割线，改用行间距分组：问题右侧本来就有展开箭头作为可点提示，
   再加横线等于每个问题一个框。
   节距 40 + 4 = 44。行高不再往下压：40 已经是这一列里最小的可点行，继续收会让
   三个问题挤成一段连续文字，分组就失效了。 */
#page-recharge .rc-faq { display:grid; gap:4px; }
#page-recharge details { border-bottom:0; }
#page-recharge summary { min-height:40px; padding:8px 0; }
#page-recharge .rc-faq details:first-child summary { padding-top:0; min-height:32px; }
#page-recharge .rc-redeem-link { border:0; min-height:44px; padding:10px 16px; background:var(--rc-gray); color:var(--rc-muted); font-weight:500; }
#page-recharge .rc-content-section:last-child { padding-bottom:24px; }
@media(max-width:1180px) {
 #page-recharge .rc-commerce { gap:20px; }
 #page-recharge .rc-help-layout { gap:24px; grid-template-columns:minmax(0,1fr) 180px; }
}
@media(max-width:760px) {
 #page-recharge .rc-content-section { grid-template-columns:1fr; gap:12px; margin:24px 0; padding:0; }
 #page-recharge .recharge-gift-card.rc-content-section>.rc-story-heading { margin-bottom:12px; }
 #page-recharge :is(.rc-section-body,.rc-history-body) { padding:16px; }
 #page-recharge .rc-story-heading { flex-direction:row; align-items:center; }
 #page-recharge .rc-help-layout { grid-template-columns:1fr; }
 #page-recharge .rc-help aside { padding:16px 0 0; border-left:0; border-top:0; display:grid; grid-template-columns:1fr; }
}
@media(max-width:640px) {
 #page-recharge .rc-purchase { padding:0; }
 #page-recharge .rc-content-section h2 { font-size:18px; }
}

/* 在原有金色卡片与下方结算布局中补充主线内容，不改变购买区结构。 */
#page-recharge .rc-order-breakdown { margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
#page-recharge .rc-breakdown-row { display:inline-flex; align-items:baseline; gap:5px; color:var(--rc-muted); font-size:12px; line-height:1.6; }
#page-recharge .rc-breakdown-row dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
#page-recharge #rc-checkout-info, #page-recharge #rc-merchant-note { margin:0; font-size:12px; line-height:1.65; color:var(--rc-muted); }
/* 没选金额时的那句提示和「本单附赠」并排放在明细行里：它原先独占一整行，
   结算区就从两行变成三行，比选好金额之后还高一截，付款键也跟着往下沉。
   提示本身不换行，宽度不够时整条退到下一行，而不是先把自己折成两行。 */
#page-recharge #rc-checkout-info { flex:0 0 auto; white-space:nowrap; }
#page-recharge .rc-first-bonus, #page-recharge .rc-cap-note { display:inline-flex; align-items:center; min-height:20px; margin:0; font-size:10px; line-height:18px; text-align:left; overflow-wrap:anywhere; }
#page-recharge .rc-first-bonus { color:var(--rc-gold); font-weight:600; }
#page-recharge .rc-cap-note { color:var(--rc-muted); }
#page-recharge .rc-custom-benefit { grid-column:1/-1; align-self:start; margin:0; padding-right:calc(var(--rc-check-size) + 6px); font-size:11px; line-height:1.5; color:var(--rc-gold); }
#page-recharge .rc-ai-plan-link { color:var(--rc-gold); text-decoration:underline; }
#page-recharge .rc-ai-plan-link:hover { color:var(--rc-gold); }
#page-recharge .rc-record-amount.is-credit { color:#007345; }
#page-recharge .rc-record-amount.is-minus { color:#b3291f; }
#page-recharge .rc-history-status.is-paid { color:#007345; }
#page-recharge .rc-history-status.is-pending { color:var(--rc-gold); }
#page-recharge .rc-history-status.is-failed { color:#b3291f; }
[data-theme="dark"] #page-recharge .rc-record-amount.is-credit,
[data-theme="dark"] #page-recharge .rc-history-status.is-paid { color:#7ddeaf; }
[data-theme="dark"] #page-recharge .rc-record-amount.is-minus,
[data-theme="dark"] #page-recharge .rc-history-status.is-failed { color:#ffaaa0; }
@media(max-width:600px) {
  #page-recharge .rc-pay-button { white-space:normal; text-wrap:balance; }
}
[data-theme="dark"] #page-recharge .rc-ai-plan-line { background:transparent; }
/* 赠礼展台出现时购买区会变窄，按容器而不是整页宽度决定两列，避免临界尺寸裁字。 */
@container (max-width:720px) {
  #page-recharge .rc-presets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
@media(max-width:640px) {
  #page-recharge .rc-presets { gap:8px; }
}
@media(max-width:359px) {
  #page-recharge .rc-presets { grid-template-columns:1fr; }
}

/* 2026-10-13 approved recharge composition: clean console shell with gold shop modules. */
#page-recharge {
  --rc-ticket-start:#fffdf8;
  --rc-ticket-end:#fff7e7;
  --rc-ticket-selected:#fff1ca;
  --rc-ticket-border:#e9bd6c;
  --rc-ticket-price:linear-gradient(180deg,#ff9c7c 0%,#f97753 100%);
  --rc-ticket-ribbon:#169786;
  --rc-check-size:29px;
  /* 示意图的深蓝数字与暖褐小标题都是浅色稿专用；暗色下换成本页的通用文字色，
     否则深蓝落在深色卡上几乎看不见。 */
  --rc-amount-ink:#13265c;
  --rc-amount-sub:#5a6f93;
  --rc-heading-ink:#3b1d10;
  --rc-heading-hint:#9c7b55;
  /* 金额区小标题那行的引导语单独一支中性暖灰，不跟标题共用那支褐：示意图里引导比标题
     退得更远，而同一支褐会让两段字读成同一句话的两半。明度与原来那支持平（对比度
     3.60 对 3.63），只去掉了饱和度，不是把字调淡。 */
  --rc-heading-sub:#8a8078;
  /* 星光切图本身是奶白金 #fed999，落在奶油底上对比度只有 1.02，等于看不见。颜色改由 CSS
     给、切图只出轮廓（mask 只取 alpha 通道），暗色因此也能单独换一支金，不用再切一张图。 */
  --rc-heading-sparkle:#fbbe27;
  /* 标题与引导之间的渐隐细线：两头透明，标题和引导旁边都不会留下硬端点。峰值透明度压到
     .08（示意图里这条线在奶油底上只有 16/255 的压暗量），比米粒明细的表头下边线还弱一档
     ——它只负责把一行分成两段，不能成为这行里第三件要看的东西。
     不改成 .5px 高再加倍透明度：那样在 1 倍屏上会被取整成看不见。
     整段渐变写进变量，暗色只换这一个值。 */
  --rc-heading-rule:linear-gradient(90deg,rgba(138,106,74,0) 0,rgba(138,106,74,.08) 6%,rgba(138,106,74,.06) 62%,rgba(138,106,74,0) 100%);
  /* 结算条与赠礼说明和米粒明细、米粒帮助同用一种暖白，整页白色卡片只有一个色值。
     纯白 #fff 落在奶白底纹上偏冷，和其他卡片读起来不是同一种白。 */
  --rc-surface-warm:var(--rc-surface);
  /* 自定义金额输入框只用暖色填充，不加描边。它在金额卡里已经是第三层盒子，
     再给一条描边就是「卡里的卡里的卡」；原来那条冷灰蓝 #e3e7f1 还是整页唯一的冷色描边，
     落在一片暖卡里是异物。
     填充原先是 #fdf5e6，和未选中卡面亮度只差 0.024，看不出这里能点能填；压深到 #f7e6c3
     又成了卡里最抢眼的一块色（与卡面差 0.140）。#f9ebcd（差 0.103）仍嫌重，现取 #fbf0d9，
     与未选中卡面 #fef8ec 差 0.064。
     选中卡面（渐变末端 #fff1ca）比未选中暗，这么浅的填充落上去几乎等于卡面色，输入框会消失。
     所以选中与正在输入时换成 --rc-field-bg-active：比卡面更亮的 70% 白，与卡面差 0.05–0.08。 */
  --rc-field-bg:#fbf0d9;
  --rc-field-bg-active:rgba(255,255,255,.7);
  /* 输入框里的 ¥ 与「10–10,000」是提示而非已填的值，和档位券上的「到账」同属弱文字一档，
     不能用深蓝的数值色。比 --rc-amount-sub 再暗一点，才能在填充上过 AA：
     在 #fbf0d9 上 4.63，在选中态的亮填充上 5.06。 */
  --rc-field-hint:#5c6d8a;
  /* 整页所有容器都不画描边，这支色值现在只剩米粒明细的表头下边线在用。
     余额卡与结算条的描边已按设计决定去掉：它们的底色与页面底纹只差 1/255 和 4/255，
     去掉之后两块基本和页面连成一片，边界改由内容本身的留白与字号层级承担。 */
  --rc-card-line:#ecdfc6;
  /* 余额卡：奶油微光底图配深金数字。金色落在「当前余额」这个米粒数值本身，而不是卡框，
     所以这张卡不需要任何描边装饰。深金 #8a4f12 与结算区的充值金额同一脉，
     页面上「金色＝米粒价值」口径统一。
     底图整段写进变量，暗色只换这一个值，不用再为余额卡单独写一条覆盖。 */
  /* 色值 #fdfaf3 不是底图加载前的兜底色，它要和底图 multiply 混合，把整张近白的底图
     一起压暖一档。底图本身与页面底纹只差 5/255，没有描边时这张卡会整个化进页面；
     压到 15/255（明度比 1.045）才和下半页的米粒帮助（11/255、1.053）处在同一档分离度。
     用 multiply 而不是换一张深一点的图：乘法按比例缩放各通道，底图那层微光的相对起伏
     会保留下来，换成平色就没有微光了。 */
  --rc-balance-bg:#fdfaf3 url('/static/img/recharge/ui/balance-panel.jpg') center/100% 100% no-repeat;
  --rc-balance-num:#8a4f12;
  --rc-balance-sub:#6b5435;
  --rc-balance-strong:#4a3a1f;
}
[data-theme="dark"] #page-recharge {
  --rc-amount-ink:var(--rc-ink);
  --rc-amount-sub:var(--rc-muted);
  --rc-heading-ink:#f3dfad;
  --rc-heading-hint:var(--rc-muted);
  --rc-heading-sub:var(--rc-muted);
  --rc-heading-sparkle:var(--rc-gold);
  /* 暗色下页面底是深色，浅褐的细线会整条消失，换成本页那支亮金。 */
  --rc-heading-rule:linear-gradient(90deg,rgba(237,197,119,0) 0,rgba(237,197,119,.12) 6%,rgba(237,197,119,.085) 62%,rgba(237,197,119,0) 100%);
  /* 暗色页面底是平的 #1b1915，没有渐变，不需要分两支，两支指向同一个值。 */
  --rc-surface-warm:var(--rc-surface);
  --rc-field-bg:rgba(16,13,10,.38);
  --rc-field-bg-active:var(--rc-field-bg);
  --rc-field-hint:var(--rc-muted);
  --rc-card-line:var(--rc-line);
  --rc-balance-bg:rgba(36,33,28,.94);
  --rc-balance-num:#f6dca8;
  --rc-balance-sub:#c2b29a;
  --rc-balance-strong:#f0e5d0;
}
#page-recharge .rc-header { min-height:54px; margin-bottom:18px; }
#page-recharge .rc-brand-title { gap:14px; }
#page-recharge .rc-brand-title>.rc-coin { width:40px; height:40px; }
#page-recharge h1 { color:#4b2c17; font-size:30px; letter-spacing:.01em; }
#page-recharge .head-meta { font-size:13px; }
#page-recharge .rc-commerce {
  grid-template-columns:minmax(300px,.34fr) minmax(0,.66fr);
  grid-template-areas:
    "showcase purchase"
    "checkout checkout";
  gap:16px 24px;
  align-items:stretch;
  margin-bottom:24px;
}
#page-recharge .rc-commerce:not(.has-gift) {
  grid-template-columns:1fr;
  grid-template-areas:"purchase" "checkout";
}
#page-recharge .rc-showcase {
  grid-area:showcase;
  /* 示意图里赠礼卡与右侧金额区同底对齐。金额卡按示意图改矮之后，高度交给右栏撑；
     这里只留一个下限，免得右栏在没有活动卡时把赠礼卡压扁。 */
  min-height:430px;
  /* 不加描边：卡里是一张满幅立绘，照片自己的边缘就是边界，再描一圈等于给图加画框。
     底色只在立绘加载前兜底，加载完就被完全盖住。 */
  background:#fff9ed;
}
#page-recharge .rc-portrait { object-fit:cover; object-position:50% 50%; }
#page-recharge .rc-showcase::after { background:linear-gradient(180deg,transparent 68%,rgba(255,249,237,.26) 77%,#fff7e8 94%); }
#page-recharge .rc-portrait-copy { left:22px; right:22px; bottom:18px; }
#page-recharge .rc-kicker { margin-bottom:7px; font-size:14px; }
#page-recharge #rc-hero-name { font-size:25px; }
#page-recharge .rc-purchase { grid-area:purchase; gap:14px; }
#page-recharge .recharge-workspace { display:flex; flex-direction:column; gap:14px; }
/* 余额卡靠底图自己站住：没有描边、没有投影，也没有任何角饰。
   卡框一旦承担装饰，就会和「金色只用于米粒价值」这条冲突，而且外框花纹在
   一块通栏文字上没有安身之处（金描边版实测卷纹正压在用量那行字上）。
   素材 824 × 146（5.64∶1）与面板比例不同，但底图只有柔和的微光和一缕卷纹，
   没有金边和角饰，按 100% 100% 拉伸不会出现可见形变；圆角仍由 border-radius 切，
   素材的圆角已在导入时补成直角，横向拉伸不会把圆角拉成椭圆。 */
#page-recharge .rc-balance-panel {
  min-height:0;
  box-sizing:border-box;
  padding:18px 23px 17px;
  border:0;
  border-radius:14px;
  background:var(--rc-balance-bg);
  /* 只混合 background 自己的图层与背景色，不碰元素背后的页面（那是 mix-blend-mode）。
     暗色下 --rc-balance-bg 是纯色、没有图层可混，这条自动失效，不需要另写覆盖。 */
  background-blend-mode:multiply;
}
#page-recharge .rc-balance-panel .rc-section-heading { margin:0 0 6px; }
#page-recharge .rc-balance-heading { gap:8px; }
#page-recharge .rc-balance-heading>.rc-coin { width:30px; height:30px; margin-right:4px; }
/* 金币组合图不是方的，按高度定尺寸，宽度交给原生比例，避免被上面那条方形规则压扁。
   高度跟着「当前余额」那行字走：图再大就会压过余额数字，而数字才是这块要人看的东西。 */
#page-recharge .rc-balance-heading>.rc-coin-cluster { width:auto; height:30px; }
#page-recharge .rc-balance-heading>span { color:var(--rc-balance-sub); font-size:17px; }
#page-recharge .rc-balance-heading>strong { color:var(--rc-balance-num); font-size:34px; }
#page-recharge .rc-balance-heading>small { color:var(--rc-balance-sub); font-size:14px; }
#page-recharge .rc-ai-plan { margin:0; }
#page-recharge .rc-ai-plan-line {
  align-items:center;
  min-height:26px;
  padding:0;
  color:var(--rc-balance-sub);
  font-size:13px;
  line-height:1.65;
}
#page-recharge .rc-ai-plan-line b { color:var(--rc-balance-strong); }
#page-recharge .rc-ai-plan-line>svg { display:none; }
/* 入口沿用余额数字那支深金：页面上金色只代表米粒价值和它的去处，口径一致。 */
#page-recharge .rc-ai-plan-link { margin-left:auto; color:var(--rc-balance-num); white-space:nowrap; }
/* 示意图的金额区小标题：左侧星光加标题，中间一条渐隐细线，右侧一句引导再跟一枚小星光。
   星光复用金额卡右上角那张切图的轮廓，窄屏把细线和引导整句一起收掉，只留标题。 */
#page-recharge .rc-presets-heading { min-height:24px; margin:0; }
#page-recharge .rc-presets-heading>h3 {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--rc-heading-ink);
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}
/* 尺寸给 16px 是切图的原尺寸：缩到 14px 时 alpha 峰值只剩 .77，星心就吃不满上面那支金，
   示意图里这枚星是实心的。 */
#page-recharge .rc-presets-heading>h3::before,
#page-recharge .rc-presets-hint::after {
  content:"";
  flex:none;
  width:16px;
  height:16px;
  background:var(--rc-heading-sparkle);
  -webkit-mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
}
/* 行尾那枚只有标题那枚的一半大：示意图用大小分主次，两枚一样大时右边那句会读成第二个标题。 */
#page-recharge .rc-presets-hint::after { width:9px; height:9px; }
#page-recharge .rc-heading-rule {
  flex:1 1 24px;
  min-width:16px;
  height:1px;
  background:var(--rc-heading-rule);
}
#page-recharge .rc-presets-hint {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:var(--rc-heading-sub);
  font-size:12px;
  line-height:1.5;
}
#page-recharge .rc-presets { gap:14px; margin:0; }
/* 示意图里的卡片宽大于高（约 1.25:1）。未选中卡原先是奶白（#fffdf8→#fff7e7）压在同样
   奶白的页面底图上，对比度只有 1.01–1.04，等于没有边界，卡片只能靠卡内的内容被认出来。
   既不套外框、也不加实描边，改成两个弱信号叠加：卡面比页面底略暖，
   再加一道透明度 .14 的发丝边（对比度 1.23）。单看任何一个都弱到不像框，合起来边界明确。
   纯靠填色要做到同样清楚，卡片得暖到整排发黄，和金币插画撞色；纯靠投影则顶边永远糊。 */
#page-recharge :is(.rc-amount-btn,.rc-custom-card) {
  min-height:176px;
  /* 不留 1px 透明 border。border-box 下那一格会透出卡面色，在底边形成一条贴在发丝边
     外侧的亮线（实测 发丝边 223 → 亮线 241 → 投影 233），看起来是卡片多了一道白边。
     选中、悬停、聚焦三种金边一律改用 inset 环实现：inset 不参与布局，不会有位移，
     所以也不再需要靠透明 border 预留这一格宽度。 */
  border:0;
  border-radius:15px;
  background:#fef8ec;
  /* 这里只能有一道近距信号。曾经同时挂 inset 发丝边与 0 1px 2px 的近距投影，
     底边就变成「暗线（发丝边）→ 1px 亮缝（卡面）→ 暗线（投影）」，实测亮度 223 / 241 / 225，
     看起来是两条描边。近距投影删掉，抬升交给下面那道 0 10px 20px -15px 的弥散投影。 */
  box-shadow:inset 0 0 0 1px rgba(168,124,54,.14),0 10px 20px -15px rgba(138,98,36,.32);
}
/* 自定义卡聚焦时不再单独画一道深金焦点框：那是这排卡里的第三种边框语言，
   和旁边的选中金环并排时会被读成另一个状态。点进输入框就等于选了「自定义」这一档，
   所以聚焦直接套用选中态的金环与底色，整排卡只剩「未选 / 选中」两种长相。 */
#page-recharge :is(.rc-amount-btn,.rc-custom-card).selected,
#page-recharge .rc-custom-card:focus-within {
  background:linear-gradient(145deg,#fffdf7,var(--rc-ticket-selected));
  /* 金边仍是两层金叠成的 2px，外圈深金、内圈亮金，与改前逐像素一致。
     box-shadow 先列的画在上面，所以 1px 的 #c47c08 压在 2px 的 #d69827 最外那一格。 */
  box-shadow:inset 0 0 0 1px #c47c08,inset 0 0 0 2px #d69827;
}
/* 悬停不能换成金色描边：那会借走「选中」的金环语言，逐个掠过时六张卡都像被选中。
   改成把本来就有的发丝边加深一档、投影同步加重，抬升仍由上面的 transform 负责。 */
@media(hover:hover) {
  #page-recharge :is(.rc-amount-btn,.rc-custom-card):hover {
    box-shadow:inset 0 0 0 1px rgba(168,124,54,.26),0 14px 24px -14px rgba(138,98,36,.42);
  }
  /* 聚焦态也要挡住上面那条悬停发丝边，否则鼠标停在已聚焦的自定义卡上金环会被洗掉。 */
  #page-recharge :is(.rc-amount-btn,.rc-custom-card).selected:hover,
  #page-recharge .rc-custom-card:focus-within:hover {
    box-shadow:inset 0 0 0 1px #c47c08,inset 0 0 0 2px #d69827,0 10px 20px -13px rgba(162,106,20,.4);
  }
}
#page-recharge .rc-tier-art {
  width:96px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 5px 5px rgba(132,80,12,.13));
}
/* 设计稿里每张金额卡（含自定义卡）右上角都有一枚小星光。推荐档那一格要让给「智能推荐」角标，不叠在一起。 */
#page-recharge :is(.rc-amount-btn,.rc-custom-card)::before {
  content:"";
  position:absolute;
  right:11px;
  top:10px;
  z-index:1;
  width:13px;
  height:13px;
  background:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  pointer-events:none;
}
#page-recharge .rc-amount-btn.is-recommended::before,
#page-recharge .rc-custom-card:has(.rc-recommend-tag:not([hidden]))::before { display:none; }
/* 示意图的两栏结构：插画占左栏并纵向居中，右栏自上而下是「到账」、米粒数、价格牌，
   赠送标签单独占最后一行、靠卡片左下。插画横跨前两行，这样右栏两行的视觉重心才和插画对齐。 */
#page-recharge .rc-amount-body {
  /* 插画列定宽、右栏吃掉剩余宽度：右栏若按内容定宽（auto），列宽就被米粒数的字宽决定，
     米粒数一缩小，价格牌跟着缩到 85px 左右，掏钱的数字反倒成了卡里最小的一块。
     反过来让价格牌横向铺满右栏，它就稳定是卡里最重的元素，卡片变宽也不会在中间空出一截。
     右栏的下限交给 min-content：卡片窄到放不下「82,352 米粒」时，让插画列先让位，
     而不是把「米粒」挤出卡外裁掉（360 像素宽下就会裁）。 */
  grid-template-columns:minmax(0,112px) minmax(min-content,1fr);
  grid-template-rows:auto auto minmax(26px,auto);
  grid-template-areas:"art points" "art price" "notes notes";
  align-content:end;
  justify-items:stretch;
  column-gap:12px;
  row-gap:7px;
  padding:16px 16px 10px 14px;
}
/* 插画与米粒数之间要有一条真的列间距：插画素材自带的透明边距只有两三像素，靠它留白时
   金币几乎贴着数字，六张卡并排就显得挤。左右内边距也取齐，省下来的右侧留白给这条间距。 */
#page-recharge .rc-amount-body>.rc-tier-art { align-self:center; justify-self:center; width:100%; max-width:80px; }
/* 示意图里价格牌和米粒数同宽、右栏按内容定宽，插画吃掉剩下的空间，所以右栏用 auto 轨道。
   「到账」要单独占一行，但不能参与定宽：换行 flex 的 max-content 会把三段算在同一行，
   右栏会被撑到挤掉插画，所以这里改成两行 grid。 */
#page-recharge .rc-amount-pts {
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"label label" "value unit";
  align-self:end;
  justify-content:start;
  align-items:baseline;
  column-gap:5px;
  row-gap:1px;
  text-align:left;
  /* 到账米粒是「这笔钱换到多少」的说明，真正要付的是下面那块价格牌，所以字号压在价格牌之下：
     米粒数原先 26px，比 21px 的价格还大，一眼先读到米粒数，掏钱的数字反倒成了配角。 */
  font-size:19px;
  color:var(--rc-amount-ink);
}
#page-recharge .rc-amount-pts>small { color:var(--rc-amount-sub); font-size:12px; }
#page-recharge .rc-amount-pts>small:first-child { grid-area:label; margin:0; font-size:12px; font-weight:600; }
#page-recharge .rc-amount-pts>strong { grid-area:value; }
/* 「米粒」只有两个字，一旦右栏算窄一像素就会断成「米 / 粒」，看着像坏了，所以不许换行。 */
#page-recharge .rc-amount-pts>small:last-child { grid-area:unit; white-space:nowrap; }
/* 价格牌只占右栏宽度，不再通栏；示意图里它没有描边与内斜角，只有一层朱橙渐变和外投影。 */
#page-recharge .rc-amount-cny {
  align-self:start;
  justify-self:stretch;
  width:auto;
  min-width:0;
  min-height:42px;
  margin:0;
  padding:7px 10px;
  border:0;
  border-radius:14px;
  background:var(--rc-ticket-price);
  font-size:21px;
  box-shadow:0 2px 5px -1px rgba(222,98,62,.3);
}
#page-recharge .rc-amount-notes { justify-content:flex-start; min-height:25px; padding:0 calc(var(--rc-check-size) + 2px) 0 0; }
#page-recharge .rc-amount-bonus { min-height:25px; padding:1px 10px; font-size:12px; line-height:23px; }
/* 角标按底图原生比例放大：折扣 81×52，推荐 110×38。只调尺寸，形状由底图决定。 */
#page-recharge .rc-benefit-ribbon { min-width:48px; min-height:31px; padding:0 10px 7px 5px; font-size:12px; }
#page-recharge .rc-recommend-tag { min-width:80px; min-height:28px; padding:0 7px 4px 18px; font-size:9px; }
/* 自定义卡沿用同一两栏骨架：插画靠左（示意图里比档位插画大一圈），右栏是标题与输入框。
   四行里第一行和第四行是同宽的占位：第四行放折扣标与报错，第一行永远是空的。
   只留底下那一行时，被居中的是「标题 + 输入框 + 空出来的一行」，看得见的那组东西
   就被顶到卡片中心上方 12.5px，和左右档位券（各自偏下 4.8px）差出 17px，一排卡看着没对齐。
   顶上补一行等高占位，居中的范围才和看得见的那组对称。它也比「没内容就把第四行收掉」稳：
   收行的话，金额填到 100 以上冒出折扣标时，整组内容会当场往上跳一截。 */
#page-recharge .rc-custom-card {
  grid-template-columns:minmax(0,100px) minmax(min-content,1fr);
  grid-template-rows:minmax(20px,auto) auto auto minmax(20px,auto);
  align-content:center;
  justify-items:stretch;
  column-gap:12px;
  row-gap:8px;
  padding:13px 16px 9px 14px;
  text-align:left;
}
/* 插画高度跟着标题与输入框这两行走，所以它的中线和右栏文字组的中线天然重合。 */
#page-recharge .rc-custom-card>.rc-tier-art { grid-column:1; grid-row:2/4; align-self:center; justify-self:center; width:100%; max-width:76px; }
#page-recharge .rc-custom-card>.rc-custom-art { background-size:contain; }
#page-recharge .rc-custom-card label { grid-column:2; grid-row:2; align-self:end; justify-self:center; color:var(--rc-amount-ink); font-size:22px; }
#page-recharge .rc-custom-input-shell { grid-column:2; grid-row:3; align-self:start; min-width:0; min-height:42px; padding:0 10px; border:0; border-radius:11px; background:var(--rc-field-bg); }
#page-recharge .rc-custom-card:is(.selected,:focus-within) .rc-custom-input-shell { background:var(--rc-field-bg-active); }
/* 右栏是 auto 轨道，按内容定宽。input 带 width:100% 时固有宽度算 0，轨道就不会为
   「10–10,000」这段占位文案留位置，窄屏下会被截成「10–10,00」。用 min-width 给个字符数下限。 */
#page-recharge #rc-custom-input { min-width:9ch; width:100%; min-height:42px; font-size:15px; }
/* ¥ 与占位的金额区间都是提示，不是已填的值，统一走弱文字色。 */
#page-recharge #rc-custom-currency,
#page-recharge #rc-custom-input::placeholder { color:var(--rc-field-hint); }
#page-recharge .rc-custom-benefit,
#page-recharge .rc-custom-card .rc-field-error { grid-column:1/-1; grid-row:4; justify-self:start; padding:0 calc(var(--rc-check-size) + 2px) 0 0; text-align:left; }
/* 错误提示只占一行。金额无效时卡片不会进入选中态，右下角的对勾不显示，
   所以这时不必再给对勾留位置。卡片最窄时整句仍放不下，就用省略号收尾，不折成第二行。 */
#page-recharge .rc-custom-card .rc-field-error { min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#page-recharge .rc-custom-card:not(.selected) .rc-field-error { padding-right:0; }
/* 伙伴计划引导是一条通栏横幅入口。纯文字旁注没有边界和悬停反馈，用户认不出能点。
   它不能读成第七张金额券：金额券是奶油底、金环、三列排布，这里换成薄荷色相、通栏横条，
   右侧放一颗实心按钮。整条都是链接，悬停时底色压深、整条微微上浮、箭头右移。
   这一条只说朋友领多少、你领多少；好友充值后的回馈留在相伴中心。 */
#page-recharge .rc-referral-guide {
  --rc-invite-bg:linear-gradient(100deg,#e4f3ec 0%,#eff7f2 58%,#f6f8ef 100%);
  --rc-invite-bg-hover:linear-gradient(100deg,#d6ede3 0%,#e5f2ea 58%,#eff4e7 100%);
  --rc-invite-ring:rgba(18,122,107,.14);
  --rc-invite-ring-hover:rgba(18,122,107,.26);
  --rc-invite-accent:#127a6b;
  --rc-invite-accent-hover:#0d6659;
  --rc-invite-on-accent:#fff;
  --rc-invite-icon-bg:#fff;
  --rc-invite-title:#123c35;
  --rc-invite-sub:#4b6b63;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:var(--rc-invite-bg);
  box-shadow:inset 0 0 0 1px var(--rc-invite-ring);
  color:var(--rc-invite-title);
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow .18s ease,transform .18s cubic-bezier(.25,1,.5,1);
}
[data-theme="dark"] #page-recharge .rc-referral-guide {
  --rc-invite-bg:linear-gradient(100deg,rgba(40,150,128,.24) 0%,rgba(40,150,128,.12) 100%);
  --rc-invite-bg-hover:linear-gradient(100deg,rgba(40,150,128,.32) 0%,rgba(40,150,128,.18) 100%);
  --rc-invite-ring:rgba(90,200,175,.18);
  --rc-invite-ring-hover:rgba(90,200,175,.32);
  --rc-invite-accent:#4cc0a7;
  --rc-invite-accent-hover:#66d0b9;
  --rc-invite-on-accent:#0b2621;
  --rc-invite-icon-bg:rgba(255,255,255,.08);
  --rc-invite-title:#e4f2ec;
  --rc-invite-sub:#a7c1b9;
}
#page-recharge .rc-referral-guide::after { content:none; }
#page-recharge .rc-referral-guide:focus-visible {
  outline:2px solid var(--rc-invite-accent);
  outline-offset:3px;
}
@media(hover:hover) {
  #page-recharge .rc-referral-guide:hover {
    background:var(--rc-invite-bg-hover);
    box-shadow:inset 0 0 0 1px var(--rc-invite-ring-hover),0 10px 20px -14px rgba(18,122,107,.45);
    transform:translateY(-1px);
  }
  #page-recharge .rc-referral-guide:hover .rc-referral-guide-cta { background:var(--rc-invite-accent-hover); }
  #page-recharge .rc-referral-guide:hover .rc-referral-guide-cta svg { transform:translateX(2px); }
}
#page-recharge .rc-referral-guide:active { transform:none; }
#page-recharge .rc-referral-guide-icon {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--rc-invite-icon-bg);
  box-shadow:0 2px 6px -2px rgba(18,122,107,.28);
  color:var(--rc-invite-accent);
}
#page-recharge .rc-referral-guide-icon svg { width:18px; height:18px; }
/* 文案吃掉中间的宽度，按钮靠右：横幅里按钮靠右是常见的入口形态，不会和文字断开。 */
#page-recharge .rc-referral-guide-text {
  display:grid;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
  color:var(--rc-invite-sub);
  font-size:12px;
  line-height:1.5;
}
#page-recharge .rc-referral-guide-text b {
  color:var(--rc-invite-title);
  font-size:14px;
  font-weight:650;
  line-height:1.4;
  text-wrap:pretty;
}
#page-recharge .rc-referral-guide-cta {
  gap:4px;
  min-height:34px;
  padding:0 12px 0 16px;
  border-radius:999px;
  background:var(--rc-invite-accent);
  box-shadow:none;
  color:var(--rc-invite-on-accent);
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  transition:background-color .18s ease;
}
#page-recharge .rc-referral-guide-cta svg { transition:transform .18s cubic-bezier(.25,1,.5,1); }
#page-recharge .rc-checkout {
  grid-area:checkout;
  box-sizing:border-box;
  min-height:0;
  margin:0;
  padding:16px 26px;
  border:0;
  border-radius:12px;
  /* 整条是一块不透明暖白。页面底纹是渐变，半透明会随位置漂移，
     通栏两端读得出来；中间也不再铺余额卡丝绸，那张图的亮边会看成一道分界。 */
  background:var(--rc-surface-warm);
}
#page-recharge .rc-payment-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; }
#page-recharge .rc-credit-total { gap:5px 11px; font-size:17px; }
#page-recharge .rc-credit-total small { font-size:14px; }
#page-recharge #rc-order-total { font-size:35px; color:#8d4c10; }
#page-recharge .rc-order-meta { margin-top:6px; }
/* 付款簇靠右，只放微信支付按钮。应付金额写在按钮文案里，不再在按钮上方另起一行。
   列宽跟着按钮走，最短 208 像素，长金额也不会把按钮挤窄。 */
#page-recharge .rc-payment-action {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-self:end;
  width:max-content;
  min-width:208px;
  max-width:100%;
  gap:8px;
}
#page-recharge .rc-checkout-price { display:none; }
#page-recharge .rc-pay-button { min-height:44px; padding:10px 18px; border-radius:8px; font-size:15px; }
#page-recharge .rc-payment-action>#rc-merchant-note { text-align:center; }

[data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card) { background:linear-gradient(145deg,var(--rc-ticket-start),var(--rc-ticket-end)); }
[data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card).selected,
[data-theme="dark"] #page-recharge .rc-custom-card:focus-within { background:linear-gradient(145deg,var(--rc-ticket-start),var(--rc-ticket-selected)); }
/* 暗色下卡片本来就比页面底亮，不缺边界；暖色发丝边落在深色卡上会显脏，换成中性提亮。
   必须排除选中与聚焦：这条规则比浅色那条 .selected 更靠后、权重又更高，不排除就会把金环洗掉。 */
[data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card):not(.selected,.rc-custom-card:focus-within) {
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 20px -15px rgba(0,0,0,.5);
}
@media(hover:hover) {
  [data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card):not(.selected,.rc-custom-card:focus-within):hover {
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 24px -14px rgba(0,0,0,.6);
  }
}
/* 余额卡的文字色全部走 --rc-balance-* 变量，暗色在变量块里一次换掉，
   这里不再按元素逐条覆盖，因为逐条覆盖的特异性更高，会把变量压掉。 */

@media(max-width:1180px) {
  #page-recharge .rc-commerce { grid-template-columns:minmax(280px,.32fr) minmax(0,.68fr); gap:14px 18px; }
  #page-recharge .rc-showcase { min-height:410px; }
  #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:184px; }
  #page-recharge .rc-amount-body { grid-template-columns:minmax(0,104px) minmax(min-content,1fr); column-gap:11px; padding:13px 13px 9px 12px; }
  #page-recharge .rc-amount-body>.rc-tier-art { max-width:76px; }
  #page-recharge .rc-amount-pts { font-size:18px; }
  #page-recharge .rc-custom-card { grid-template-columns:minmax(0,96px) minmax(min-content,1fr); column-gap:11px; padding:12px 13px 9px 12px; }
  #page-recharge .rc-custom-card>.rc-tier-art { max-width:72px; }
}
@media(min-width:641px) and (max-width:1000px) {
  #page-recharge .rc-commerce,
  #page-recharge .rc-commerce:not(.has-gift) {
    grid-template-columns:1fr;
    grid-template-areas:"purchase" "checkout" "showcase";
  }
  #page-recharge .rc-showcase { min-height:260px; }
  /* 赠礼卡在这个区间变成横幅，人像只占左边 44%，文案必须让到右半边。
     上面那条不带媒体查询的 .rc-portrait-copy 会按源序盖掉窄屏规则，所以这里要再写一遍。 */
  #page-recharge .rc-portrait-copy { left:46%; right:24px; top:32px; bottom:auto; }
}
/* 结账行左右两栏的断点按「左栏还装不装得下摘要」来定。
   右栏现在只放付款按钮，最短 208 像素。装不下「左栏 430 + 间距 28 + 右栏 208」
   就上下堆叠，摘要拿到整行后仍是两行。
   阈值按 ¥9,999.99 这种七位米粒数定：左栏 430 像素时 ¥360 还是两行，七位数会挤成三行。 */
@container (max-width:680px) {
  #page-recharge .rc-payment-row { grid-template-columns:1fr; gap:14px; }
  #page-recharge .rc-payment-action { justify-self:stretch; width:min(100%,360px); margin-inline:auto; }
}
@container (max-width:720px) {
  #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:176px; }
  #page-recharge .rc-amount-body { grid-template-columns:minmax(0,98px) minmax(min-content,1fr); column-gap:10px; padding:12px 11px 9px 10px; }
  #page-recharge .rc-amount-body>.rc-tier-art { max-width:72px; }
  #page-recharge .rc-amount-pts { font-size:17px; }
  #page-recharge .rc-amount-cny { min-height:39px; border-radius:13px; font-size:19px; }
  #page-recharge .rc-custom-card { grid-template-columns:minmax(0,92px) minmax(min-content,1fr); column-gap:10px; padding:11px 11px 8px 10px; }
  #page-recharge .rc-custom-card label { font-size:19px; }
  #page-recharge .rc-custom-card>.rc-tier-art { max-width:70px; }
}
@media(max-width:640px) {
  #page-recharge { --rc-check-size:22px; }
  #page-recharge .rc-header { margin-bottom:14px; }
  #page-recharge h1 { font-size:25px; }
  #page-recharge .rc-brand-title>.rc-coin { width:36px; height:36px; }
  #page-recharge .rc-commerce,
  #page-recharge .rc-commerce:not(.has-gift) {
    grid-template-columns:1fr;
    grid-template-areas:"purchase" "checkout" "showcase";
    gap:12px;
  }
  #page-recharge .rc-balance-panel { padding:16px 18px 15px; border-radius:12px; }
  #page-recharge .rc-balance-heading>strong { font-size:29px; }
  #page-recharge .rc-ai-plan-link { margin-left:0; }
  #page-recharge .rc-presets-heading>h3 { font-size:15px; }
  /* 引导语收掉后细线没有右端可对，留着就成了标题后面一条悬空的横线，一起收掉。 */
  #page-recharge :is(.rc-presets-hint,.rc-heading-rule) { display:none; }
  /* 窄屏保持示意图的左右两栏，只按比例缩小：卡片本来就是宽大于高，堆叠反而更挤。 */
  #page-recharge :is(.rc-amount-btn,.rc-custom-card) { min-height:148px; }
  #page-recharge .rc-amount-body { grid-template-columns:minmax(0,74px) minmax(min-content,1fr); column-gap:9px; row-gap:5px; padding:10px 9px 7px 8px; }
  #page-recharge .rc-amount-body>.rc-tier-art { max-width:58px; }
  #page-recharge .rc-amount-pts { font-size:15px; }
  #page-recharge .rc-amount-pts small { font-size:10px; }
  #page-recharge .rc-amount-pts small:first-child { font-size:10px; }
  #page-recharge .rc-amount-cny { min-height:33px; padding:4px 6px; border-radius:11px; font-size:16px; }
  #page-recharge .rc-amount-notes { min-height:20px; }
  #page-recharge .rc-amount-bonus { min-height:19px; padding-inline:5px; font-size:9px; line-height:17px; }
  #page-recharge .rc-benefit-ribbon { min-width:38px; min-height:25px; padding:0 7px 5px 4px; font-size:11px; line-height:1.2; }
  #page-recharge .rc-recommend-tag { min-width:58px; min-height:20px; padding:0 4px 3px 13px; font-size:9px; line-height:1.2; }
  #page-recharge :is(.rc-amount-btn,.rc-custom-card)::before { right:8px; top:7px; width:10px; height:10px; }
  /* 窄屏两列时自定义卡补进五档后面的空格，和档位卡同宽，不另起一行。
     半宽卡的右栏只剩 84px，「¥ 10–10,000」放不下会被截断，所以改成插画与标题同一行、
     输入框放到下一行，只跨插画与标题两列，宽度跟上面这组一致。插画与标题夹在两条等宽弹性列中间，整组与输入框同一条中轴线；
     列间距留 0，免得两侧空列的间距把标题挤换行，标题自己留出与插画的间隔。
     第三行给折扣标与报错常驻占位，内容出现时整组不跳；这一行按它们的实际高度 13px 留，
     上内边距比下内边距多出「一个行距 + 这一行」，看得见的插画、标题、输入框才落在卡片正中。
     原先按 20px 留且上 12 下 7，这组内容比中线高出 11px。 */
  #page-recharge .rc-custom-card { grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr); grid-template-rows:auto auto minmax(13px,auto); column-gap:0; row-gap:8px; padding:20px 9px 3px 9px; }
  #page-recharge .rc-custom-card>.rc-tier-art { grid-column:2; grid-row:1; width:46px; max-width:46px; }
  #page-recharge .rc-custom-card label { grid-column:3; grid-row:1; align-self:center; justify-self:start; margin-left:8px; font-size:17px; }
  #page-recharge .rc-custom-input-shell { grid-column:2/4; grid-row:2; min-height:38px; padding-inline:8px; border-radius:9px; }
  #page-recharge #rc-custom-input { min-width:9ch; min-height:36px; font-size:13px; }
  /* 窄屏这套只有三行，没有桌面那行顶部占位，折扣标与报错要跟回第三行；
     留在第四行的话第三行会空着，卡里白出一截。 */
  #page-recharge .rc-custom-benefit,
  #page-recharge .rc-custom-card .rc-field-error { grid-row:3; font-size:9px; }
  /* 窄屏横幅不换行：图标、文案、按钮仍在一排，文案自己折行，按钮始终贴在右侧。 */
  #page-recharge .rc-referral-guide { flex-wrap:nowrap; gap:10px; padding:10px; }
  #page-recharge .rc-referral-guide-icon { width:30px; height:30px; }
  #page-recharge .rc-referral-guide-icon svg { width:16px; height:16px; }
  #page-recharge .rc-referral-guide-text { flex:1 1 auto; font-size:11px; }
  #page-recharge .rc-referral-guide-text b { font-size:13px; }
  #page-recharge .rc-referral-guide-cta { flex:none; min-height:32px; margin-left:0; padding:0 10px 0 12px; font-size:12px; }
  #page-recharge .rc-checkout { min-height:0; padding:18px 16px; }
  #page-recharge .rc-payment-row { grid-template-columns:1fr; gap:14px; }
  #page-recharge .rc-payment-action { width:100%; max-width:none; margin-inline:0; gap:10px; }
  #page-recharge .rc-pay-button { min-width:0; min-height:48px; font-size:16px; }
  /* 窄屏文案条是正常流里的色块，不能再吃绝对定位时的左右偏移，否则整条会右移 22px 顶出卡片。 */
  #page-recharge .rc-portrait-copy { left:auto; right:auto; }
  /* 明细是充值没到账时自查的地方，「到账」「状态」两列必须留在可视区内。
     540px 的下限在手机上会把这两列推出屏幕，而横向滚动没有任何可发现性，所以窄屏改为压缩列宽。 */
  #page-recharge .rc-history .table { min-width:0; }
  #page-recharge .rc-history .table :is(th,td) { padding:9px 6px; font-size:11px; }
  #page-recharge .rc-history .table th:first-child,
  #page-recharge .rc-history .table td:first-child { padding-left:10px; }
  #page-recharge .rc-history .table th:last-child,
  #page-recharge .rc-history .table td:last-child { padding-right:10px; }
  /* 状态只有两三个字，宁可让整张表横向滚一点，也不要被压成竖排。 */
  #page-recharge .rc-history-status { white-space:nowrap; }
  #page-recharge .rc-showcase { order:initial; }
}

/* 2026-10-15 橙黄色调定稿。设计稿与整页快照留在本机，不纳入仓库。
   只覆盖浅色：每条都挂 :root:not([data-theme="dark"])，暗色沿用上面的规则，不跟着变橙。
   这个前缀同时把特异性抬到 (1,3,0) 以上，压过前面各版的同名规则，不需要 !important。
   配色分工：橙是主色（选中、结算金额、银行卡），向日葵黄只做星光与「未领取」，
   折扣徽章用樱桃珊瑚红、智能推荐与邀请条用薄荷青做撞色，微信绿和明细状态色保持语义。 */
:root:not([data-theme="dark"]) .main-content:has(> #page-recharge.active) {
  background:
    radial-gradient(1100px 600px at 70% 8%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(900px 500px at 20% 100%,rgba(255,214,160,.35),transparent 70%),
    linear-gradient(180deg,#fff7ec 0%,#fffaf3 42%,#fff1de 100%);
}
@media(min-width:1181px) {
  :root:not([data-theme="dark"]) .main-content:has(> #page-recharge.active) { padding:22px 34px 60px; }
}
:root:not([data-theme="dark"]) #page-recharge {
  --rc-ink:#3d200c; --rc-muted:#8a6146; --rc-gold:#c85a0c; --rc-line:#fde3c4;
  --rc-surface:#fffcf7; --rc-soft:#fff6ea; --text-tertiary:#906446;
  --rc-amount-ink:var(--rc-ink); --rc-amount-sub:var(--rc-muted);
  --rc-heading-ink:var(--rc-ink); --rc-heading-sub:#906446; --rc-heading-sparkle:#f2b84b;
  --rc-field-hint:#906446;
  --rc-balance-num:var(--rc-ink); --rc-balance-sub:var(--rc-muted); --rc-balance-strong:var(--rc-ink);
  --rc-check-size:22px;
  --ry-faint:#906446;
  --ry-hair:#fde3c4;
  /* 大面板靠底色和很浅的投影分开，不再画发丝边。边框只留给可点的金额卡和输入框。 */
  --ry-glass:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,251,245,.86));
  --ry-glass-shadow:0 16px 36px -28px rgba(160,95,35,.34);
  --ry-pill-shadow:0 6px 14px -12px rgba(160,95,35,.4);
  /* 金额卡上半是发光道具台。这三个数对齐柔和紫稿的台高、插画和底条，窄屏只改这三个值。 */
  --ry-stage:118px;
  --ry-art:86px;
  --ry-band:44px;
  --ry-sparkle:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
}

/* 标题行：倾斜糖豆 + 四个字从左到右由深红过渡到黑 + 一枚星光，右侧汇率与通道状态做成两颗白胶囊。 */
:root:not([data-theme="dark"]) #page-recharge .rc-header { min-height:0; margin-bottom:18px; }
:root:not([data-theme="dark"]) #page-recharge .rc-brand-title { position:relative; gap:14px; }
:root:not([data-theme="dark"]) #page-recharge .rc-brand-title>.rc-coin { width:42px; height:42px; transform:rotate(-12deg); filter:drop-shadow(0 6px 10px rgba(230,150,60,.35)); }
:root:not([data-theme="dark"]) #page-recharge .rc-brand-title::after {
  content:""; position:absolute; right:-16px; top:0; width:10px; height:10px;
  background:#ffb547; -webkit-mask:var(--ry-sparkle); mask:var(--ry-sparkle);
  filter:drop-shadow(0 0 5px rgba(255,181,71,.7));
}
:root:not([data-theme="dark"]) #page-recharge h1 {
  width:max-content; font-size:30px; font-weight:600; letter-spacing:.12em;
  background:linear-gradient(90deg,#c81e16,#1a0c0a); -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root:not([data-theme="dark"]) #page-recharge .head-meta { gap:8px; font-size:12px; }
:root:not([data-theme="dark"]) #page-recharge .rc-meta-divider { display:none; }
:root:not([data-theme="dark"]) #page-recharge .head-meta>span:first-child,
:root:not([data-theme="dark"]) #page-recharge .console-status-pill {
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:0; border-radius:99px;
  background:rgba(255,255,255,.9); box-shadow:var(--ry-pill-shadow); color:var(--rc-muted); font-size:12px;
}
:root:not([data-theme="dark"]) #page-recharge .head-meta b { color:var(--rc-ink); font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .console-status-pill { color:#178a5a; }
:root:not([data-theme="dark"]) #page-recharge .console-status-pill i { width:6px; height:6px; background:#2fcf8a; box-shadow:0 0 0 3px rgba(47,207,138,.18); }

:root:not([data-theme="dark"]) #page-recharge .rc-commerce { gap:24px 22px; }
:root:not([data-theme="dark"]) #page-recharge :is(.rc-purchase,.recharge-workspace) { gap:16px; }

/* 赠礼展台：卡片内缩 8px 留一圈浅色边，立绘自己再圆角，底部渐白托住外观名。
   只在宽屏用内嵌框：1000px 以下展台会变成横幅或纵向堆叠，那两套定位由前面的规则负责。 */
:root:not([data-theme="dark"]) #page-recharge .rc-showcase { border-radius:20px; background:linear-gradient(180deg,#fff,#fffcf7); box-shadow:var(--ry-glass-shadow); }
@media(min-width:1001px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-portrait { inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); border-radius:16px; object-position:50% 16%; }
  :root:not([data-theme="dark"]) #page-recharge .rc-showcase::after { inset:8px; border-radius:16px; background:linear-gradient(180deg,rgba(255,251,245,0) 64%,rgba(255,251,245,.8) 82%,rgba(255,251,245,.97) 100%); }
  :root:not([data-theme="dark"]) #page-recharge .rc-portrait-copy { left:28px; right:28px; bottom:26px; }
}
:root:not([data-theme="dark"]) #page-recharge .rc-kicker { display:inline-flex; align-items:center; gap:6px; margin-bottom:6px; color:#ef6a12; font-size:11px; font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .rc-kicker::before { content:""; flex:none; width:12px; height:12px; background:#f2b84b; -webkit-mask:var(--ry-sparkle); mask:var(--ry-sparkle); }
:root:not([data-theme="dark"]) #page-recharge #rc-hero-name { color:var(--rc-ink); font-size:25px; font-weight:600; letter-spacing:.06em; }
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-status:not(.is-claimed) {
  padding:4px 10px; color:#7a4b00; font-weight:600;
  background:linear-gradient(180deg,#fff1cf,#f8d68a); box-shadow:inset 0 0 0 1px rgba(217,149,44,.25);
}
@media(max-width:640px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-portrait-copy { background:#fffcf7; }
}

/* 余额卡：左边糖豆堆配「当前余额」大数字，一条渐隐竖线后是 AI 用量建议。 */
:root:not([data-theme="dark"]) #page-recharge .rc-balance-panel {
  display:flex; align-items:center; gap:24px; padding:18px 24px; border-radius:20px;
  background:linear-gradient(90deg,#fff6e9,#fffaf2 70%,#fff9f0); background-blend-mode:normal; box-shadow:var(--ry-glass-shadow);
}
:root:not([data-theme="dark"]) #page-recharge .rc-balance-panel .rc-section-heading { flex:none; margin:0; }
:root:not([data-theme="dark"]) #page-recharge .rc-balance-heading {
  display:grid; grid-template-columns:auto auto auto; grid-template-areas:"coin label label" "coin num unit";
  align-items:baseline; justify-content:start; gap:4px;
}
:root:not([data-theme="dark"]) #page-recharge .rc-balance-heading>.rc-coin-cluster { grid-area:coin; align-self:center; width:auto; height:44px; margin-right:10px; filter:drop-shadow(0 6px 10px rgba(230,150,60,.3)); }
:root:not([data-theme="dark"]) #page-recharge .rc-balance-heading>span { grid-area:label; color:var(--rc-muted); font-size:13px; font-weight:400; }
:root:not([data-theme="dark"]) #page-recharge .rc-balance-heading>strong { grid-area:num; color:var(--rc-ink); font-size:34px; font-weight:700; line-height:1; }
:root:not([data-theme="dark"]) #page-recharge .rc-balance-heading>small { grid-area:unit; margin-left:4px; color:var(--rc-muted); font-size:13px; }
:root:not([data-theme="dark"]) #page-recharge .rc-ai-plan { position:relative; flex:1; min-width:0; padding-left:24px; }
:root:not([data-theme="dark"]) #page-recharge .rc-ai-plan.is-visible::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:linear-gradient(180deg,transparent,rgba(220,150,80,.28),transparent); }
:root:not([data-theme="dark"]) #page-recharge .rc-ai-plan-line { padding:0; background:none; color:var(--rc-muted); font-size:13px; line-height:1.75; }
:root:not([data-theme="dark"]) #page-recharge .rc-ai-plan-line b { color:var(--rc-ink); font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .rc-ai-plan-link { margin-left:6px; color:#e5600c; font-weight:600; text-decoration:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-ai-plan-link::after { content:" ›"; }
@media(max-width:640px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-balance-panel { flex-wrap:wrap; gap:12px; padding:16px 18px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-ai-plan { flex-basis:100%; padding-left:0; }
  :root:not([data-theme="dark"]) #page-recharge .rc-ai-plan.is-visible::before { display:none; }
  :root:not([data-theme="dark"]) #page-recharge .rc-balance-heading>strong { font-size:30px; }
}

/* 金额区小标题：星光 + 标题，引导语靠右，不再画中间那条细线。 */
:root:not([data-theme="dark"]) #page-recharge .rc-presets-heading>h3 { color:var(--rc-ink); font-size:18px; font-weight:600; letter-spacing:.06em; }
:root:not([data-theme="dark"]) #page-recharge .rc-presets-heading>h3::before { width:14px; height:14px; filter:drop-shadow(0 0 4px rgba(242,184,75,.6)); }
:root:not([data-theme="dark"]) #page-recharge .rc-heading-rule { background:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-presets-hint { color:var(--ry-faint); }
:root:not([data-theme="dark"]) #page-recharge .rc-presets-hint::after { display:none; }

/* 金额卡：上半是发光道具台（插画 + 底座），中间一行到账，下半是通栏价格条。
   卡片不裁切溢出，左上角的倾斜徽章才能探出卡外。 */
:root:not([data-theme="dark"]) #page-recharge .rc-presets { gap:18px 14px; padding-top:6px; }
@container (max-width:720px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-presets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
}
@container (max-width:560px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-presets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
}
:root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-btn,.rc-custom-card) {
  /* 所有档位共用明亮黄色底光，提高显色强度，渐隐边缘保持柔和。 */
  --ry-glow:#ffd447;
  min-height:0; border-radius:18px; overflow:visible;
  background:linear-gradient(180deg,#fff,#fffcf7);
  box-shadow:0 12px 28px -24px rgba(160,95,35,.45);
}
@media(hover:hover) {
  :root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-btn,.rc-custom-card):hover {
    transform:translateY(-3px); box-shadow:0 16px 28px -20px rgba(160,95,35,.42);
  }
}
:root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-btn,.rc-custom-card).selected,
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:focus-within,
:root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-btn,.rc-custom-card).selected:hover,
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:focus-within:hover {
  transform:translateY(-4px); background:linear-gradient(180deg,#fff,#fffcf7);
  /* 外圈发光先去掉，只留 2px 橙边和底部投影，方便对照卡片本身。 */
  box-shadow:0 0 0 2px #ffb35c,0 24px 40px -22px rgba(240,110,20,.45);
}
/* 每张金额卡的道具台上有两枚星光：大的在右上，小的在左上。位置落在插画区，不和「智能推荐」角标重叠，所以推荐档也保留。 */
:root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-btn,.rc-custom-card)::before,
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn.is-recommended::before,
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:has(.rc-recommend-tag:not([hidden]))::before {
  display:block; right:22%; top:16px; width:11px; height:11px; opacity:.8;
  background:#ffb547; -webkit-mask:var(--ry-sparkle); mask:var(--ry-sparkle);
  filter:drop-shadow(0 0 5px rgba(255,181,71,.75));
}
:root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-body>.rc-tier-art,.rc-custom-card>.rc-custom-art) { position:relative; }
:root:not([data-theme="dark"]) #page-recharge :is(.rc-amount-body>.rc-tier-art,.rc-custom-card>.rc-custom-art)::after {
  content:""; position:absolute; left:24%; top:30px; z-index:1; width:7px; height:7px; opacity:.55; pointer-events:none;
  background:#ffb547; -webkit-mask:var(--ry-sparkle); mask:var(--ry-sparkle);
  filter:drop-shadow(0 0 4px rgba(255,181,71,.6));
}
:root:not([data-theme="dark"]) #page-recharge .rc-amount-body { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; }
/* 道具台保留轻薄底光与椭圆底座。光晕只挂在金额卡 body 上。
   自定义卡的光晕和糖豆分层写在下方 .rc-custom-art，不要把 drop-shadow 挂回这个伪元素。 */
:root:not([data-theme="dark"]) #page-recharge .rc-amount-body::before {
  content:""; position:absolute; left:0; right:0; top:0; height:var(--ry-stage); z-index:-1; border-radius:18px 18px 0 0;
  background:
    radial-gradient(60px 12px at 50% calc(var(--ry-stage) - 22px),color-mix(in srgb,var(--ry-glow) 50%,#fff),rgba(255,255,255,0)),
    radial-gradient(66px 16px at 50% calc(var(--ry-stage) - 22px),rgba(255,255,255,0) 82%,color-mix(in srgb,var(--ry-glow) 38%,transparent) 90%,rgba(255,255,255,0) 100%),
    radial-gradient(55% 64% at 50% 58%,color-mix(in srgb,var(--ry-glow) 34%,transparent),transparent 72%);
}
:root:not([data-theme="dark"]) #page-recharge .rc-amount-body>.rc-tier-art {
  order:0; width:100%; max-width:none; height:var(--ry-stage); aspect-ratio:auto; margin:0;
  background-size:auto var(--ry-icon-height,var(--ry-art)); background-position:50% calc(var(--ry-stage) - 16px - var(--ry-icon-height,var(--ry-art)));
  filter:none;
}
/* 小额双豆减少视觉体量，底部仍对齐原有光圈，光圈本身不缩放。 */
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn[data-tier-art="tier-20"] .rc-tier-art { --ry-icon-height:calc(var(--ry-art) * .9); }
/* 糖罐围绕原中心放大 6% 后下移 3px，保持黄色底光独立。 */
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn[data-tier-art="tier-500"] .rc-tier-art {
  --ry-icon-height:calc(var(--ry-art) * 1.06);
  background-position:50% calc(var(--ry-stage) - 16px - var(--ry-art) * 1.03 + 3px);
}
:root:not([data-theme="dark"]) #page-recharge .rc-amount-pts {
  order:1; align-self:stretch; display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:0 4px;
  padding:2px 10px 10px; color:var(--rc-muted); font-size:12px; text-align:center;
}
:root:not([data-theme="dark"]) #page-recharge .rc-amount-pts>small,
:root:not([data-theme="dark"]) #page-recharge .rc-amount-pts>small:first-child { flex:none; margin:0; color:var(--rc-muted); font-size:11px; font-weight:400; }
:root:not([data-theme="dark"]) #page-recharge .rc-amount-pts>strong { margin:0 4px; color:#9a603b; font-size:21px; font-weight:700; line-height:1.1; }
:root:not([data-theme="dark"]) #page-recharge .rc-amount-notes:not(:has(.rc-first-bonus,.rc-cap-note)) { padding:0; }
:root:not([data-theme="dark"]) #page-recharge .rc-amount-notes { order:2; justify-content:center; min-height:0; padding:0 10px 10px; }
:root:not([data-theme="dark"]) #page-recharge .rc-amount-cny {
  order:3; display:grid; place-items:center; align-self:stretch; height:var(--ry-band); min-height:var(--ry-band); margin-top:auto; padding:0;
  border-radius:0 0 18px 18px; background:#fff7ee;
  color:#4a2810; font-size:19px; font-weight:700;
  /* 底条自己再落一层暖投影。卡片那道弥散投影被负扩散收得很紧，单靠它底边是平的。
     自定义卡的底条是伪元素，必须抄同一条，否则六张卡只有它底边发飘。 */
  box-shadow:0 2px 5px -1px rgba(222,98,62,.3);
}
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn.selected .rc-amount-cny {
  color:#fff; text-shadow:0 1px 2px rgba(190,80,10,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),linear-gradient(90deg,#ffb347,#ff8a2a 55%,#f5711a);
}
/* 折扣与赠送合成一枚倾斜的珊瑚红气泡：赠送那一块当气泡底，折扣文字浮在气泡上面一行。
   两个元素都以卡片左上角为原点、同角度旋转，所以无论金额多长都严丝合缝。
   只有折扣没有赠送时，气泡改由折扣自己画；只有赠送没有折扣时，气泡不再留上面那行。 */
:root:not([data-theme="dark"]) #page-recharge .rc-amount-bonus.is-empty { display:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-amount-bonus,
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn:not(:has(.rc-amount-bonus:not(.is-empty))) .rc-benefit-ribbon {
  position:absolute; z-index:1; top:-8px; left:-6px; display:block; min-width:0; min-height:0; margin:0;
  padding:4px 9px; border-radius:12px 12px 12px 4px; transform:rotate(-6deg); transform-origin:0 0;
  color:#fff; font-size:12px; font-weight:800; line-height:1.15; text-shadow:0 1px 2px rgba(200,50,60,.3);
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 52%),linear-gradient(160deg,#ff8a7a,#ff5d6c 55%,#f2445e);
  box-shadow:0 8px 16px -6px rgba(242,68,94,.45),inset 0 0 0 1px rgba(255,255,255,.55);
}
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn:has(.rc-benefit-ribbon) .rc-amount-bonus { padding-top:16px; }
:root:not([data-theme="dark"]) #page-recharge .rc-amount-btn:has(.rc-amount-bonus:not(.is-empty)) .rc-benefit-ribbon {
  top:-8px; left:-6px; min-width:0; min-height:0; padding:4px 9px 0; background:none; transform:rotate(-6deg); transform-origin:0 0;
  color:#fff; font-size:9.5px; font-weight:600; line-height:1.15; opacity:.92; text-shadow:0 1px 2px rgba(200,50,60,.3);
}
:root:not([data-theme="dark"]) #page-recharge .rc-recommend-tag {
  top:8px; right:8px; min-width:0; min-height:0; padding:2px 8px; border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(180deg,#3fd0c0,#14a698);
  box-shadow:0 4px 10px -4px rgba(20,166,152,.5); color:#fff; font-size:10px; font-weight:600;
}
:root:not([data-theme="dark"]) #page-recharge .rc-selected-label {
  right:-6px; bottom:-6px; width:var(--rc-check-size); height:var(--rc-check-size); border-radius:50%;
  background:linear-gradient(135deg,#ffb347,#f5711a); box-shadow:0 0 0 3px #fff,0 6px 14px -4px rgba(240,110,20,.5);
}
:root:not([data-theme="dark"]) #page-recharge .rc-selected-label::after {
  content:""; width:4px; height:8px; border:solid #fff; border-width:0 2.5px 2.5px 0; border-radius:1px; transform:translateY(-1px) rotate(45deg);
}
/* 自定义卡沿用同一骨架：道具台、标题、通栏底条里放输入框。
   糖豆与其余档位共用柔亮材质，高度沿用上一版收 16px 的尺寸。
   黄色底光留在元素背景，透明糖豆图放在 ::before，不叠加棕色投影。 */
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card { isolation:isolate; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; }
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card>.rc-custom-art {
  position:relative; order:0; width:100%; max-width:none; height:var(--ry-stage); aspect-ratio:auto; margin:0;
  background:
    radial-gradient(60px 12px at 50% calc(var(--ry-stage) - 22px),color-mix(in srgb,var(--ry-glow) 50%,#fff),rgba(255,255,255,0)),
    radial-gradient(66px 16px at 50% calc(var(--ry-stage) - 22px),rgba(255,255,255,0) 82%,color-mix(in srgb,var(--ry-glow) 38%,transparent) 90%,rgba(255,255,255,0) 100%),
    radial-gradient(55% 64% at 50% 58%,color-mix(in srgb,var(--ry-glow) 34%,transparent),transparent 72%);
  filter:none;
}
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card>.rc-custom-art::before {
  content:""; position:absolute; inset:0; z-index:0; border-radius:0; pointer-events:none;
  background:url('/static/img/recharge/jellybean/family-v3/tier-custom.webp?v=20261017webp') 50% calc(var(--ry-stage) - 16px - var(--ry-art) + 16px) / auto calc(var(--ry-art) - 16px) no-repeat;
  filter:none;
}
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card label { order:1; align-self:center; justify-self:auto; padding:2px 10px 10px; color:var(--rc-ink); font-size:15px; font-weight:700; text-align:center; }
:root:not([data-theme="dark"]) #page-recharge :is(.rc-custom-benefit,.rc-custom-card .rc-field-error) { order:1; align-self:center; padding:0 10px 8px; text-align:center; }
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card::after {
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0; height:var(--ry-band); border-radius:0 0 18px 18px;
  background:#fff7ee;
  box-shadow:0 2px 5px -1px rgba(222,98,62,.3);
}
/* 已经填了金额，底条才换成和价格条同一条橙渐变。输入框不再自带白底，否则会在这条渐变上再叠一个盒子。
   还没填时保持米色底：橙底配白字会把「1–2,000」读成已经选定的价格。 */
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:is(.selected,:focus-within):not(:has(#rc-custom-input:placeholder-shown))::after {
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),linear-gradient(90deg,#ffb347,#ff8a2a 55%,#f5711a);
}
:root:not([data-theme="dark"]) #page-recharge .rc-custom-input-shell {
  position:relative; z-index:1; order:2; align-self:stretch; justify-content:center; gap:2px; width:auto;
  margin:auto 8px calc((var(--ry-band) - 30px) / 2); min-height:30px; padding:0 8px; border-radius:0;
  background:transparent; box-shadow:none;
  color:#4a2810; font-size:19px; font-weight:700;
}
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:is(.selected,:focus-within) .rc-custom-input-shell { background:transparent; }
:root:not([data-theme="dark"]) #page-recharge #rc-custom-input {
  flex:0 1 auto; width:9ch; max-width:100%; min-width:0; min-height:28px;
  text-align:left; font-size:inherit; font-weight:inherit; color:inherit;
}
@supports (field-sizing:content) {
  :root:not([data-theme="dark"]) #page-recharge #rc-custom-input { field-sizing:content; width:auto; min-width:4ch; }
}
:root:not([data-theme="dark"]) #page-recharge #rc-custom-currency,
:root:not([data-theme="dark"]) #page-recharge #rc-custom-input::placeholder { color:#4a2810; font-weight:700; }
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:is(.selected,:focus-within):not(:has(#rc-custom-input:placeholder-shown)) :is(#rc-custom-input,#rc-custom-currency) {
  color:#fff; text-shadow:0 1px 2px rgba(190,80,10,.35);
}
/* 点进空输入框后，区间提示收成小一号灰字。和价格同字号同字色时，看不出这里能填。 */
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:is(.selected,:focus-within):has(#rc-custom-input:placeholder-shown) .rc-custom-input-shell {
  font-size:13px; font-weight:500; color:#8a6146;
}
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:is(.selected,:focus-within):has(#rc-custom-input:placeholder-shown) :is(#rc-custom-input,#rc-custom-currency),
:root:not([data-theme="dark"]) #page-recharge .rc-custom-card:is(.selected,:focus-within):has(#rc-custom-input:placeholder-shown) #rc-custom-input::placeholder {
  color:#8a6146; font-weight:500; text-shadow:none;
}
@media(max-width:640px) {
  :root:not([data-theme="dark"]) #page-recharge { --ry-stage:100px; --ry-art:72px; --ry-band:40px; }
  :root:not([data-theme="dark"]) #page-recharge h1 { font-size:22px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-presets { gap:16px 10px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-amount-pts>strong { font-size:18px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-amount-cny { font-size:17px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-custom-card label { font-size:13px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-custom-input-shell { font-size:17px; }
  :root:not([data-theme="dark"]) #page-recharge #rc-order-total { font-size:32px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-pay-button { min-height:48px; }
}

/* 伙伴计划邀请条：薄荷青撞色，和橙色金额卡分得开，不会读成第七张卡。 */
:root:not([data-theme="dark"]) #page-recharge .rc-referral-guide {
  --rc-invite-bg:linear-gradient(90deg,#eaf9f5,#f0fbf8);
  --rc-invite-bg-hover:linear-gradient(90deg,#def5ef,#e8f8f3);
  --rc-invite-ring:transparent;
  --rc-invite-ring-hover:transparent;
  --rc-invite-accent:#14a698;
  --rc-invite-accent-hover:#0f9488;
  --rc-invite-title:var(--rc-ink);
  --rc-invite-sub:var(--rc-muted);
  padding:12px 14px; border-radius:18px;
}
:root:not([data-theme="dark"]) #page-recharge .rc-referral-guide-icon { width:34px; height:34px; box-shadow:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-referral-guide-text b { font-size:13px; font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .rc-referral-guide-cta { min-height:32px; padding:0 16px; background:#2cc2b2; box-shadow:0 6px 14px -8px rgba(17,148,136,.7); }

/* 结算条：到账合计用橙色渐变大数字，右侧一条渐隐竖线后两颗胶囊付款键横排。 */
:root:not([data-theme="dark"]) #page-recharge .rc-checkout { padding:22px 28px; border-radius:20px; background:#fffef9; box-shadow:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-credit-total { gap:4px 10px; color:var(--rc-ink); font-size:13px; font-weight:500; }
:root:not([data-theme="dark"]) #page-recharge .rc-credit-total small { color:var(--rc-muted); font-size:13px; }
:root:not([data-theme="dark"]) #page-recharge #rc-order-total {
  font-size:40px; font-weight:700; line-height:1;
  background:linear-gradient(180deg,#ff9a3c,#e5600c); -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root:not([data-theme="dark"]) #page-recharge .rc-order-meta { margin-top:12px; gap:6px 18px; }
:root:not([data-theme="dark"]) #page-recharge .rc-order-gift b { color:var(--rc-ink); font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .rc-payment-action {
  position:relative; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
  /* 宽度按两颗按钮 + 间距 + 分隔线算死；用 auto 会被下面那行商户说明的整行长度撑开，把左边金额挤成竖排。 */
  box-sizing:border-box; width:calc(220px * 2 + 14px + 24px); max-width:100%; min-width:0; gap:10px 14px; padding-left:24px;
}
:root:not([data-theme="dark"]) #page-recharge .rc-payment-action::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg,transparent,rgba(220,150,80,.3),transparent); }
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button {
  flex:0 0 220px; width:220px; min-width:0; min-height:54px; padding:0 18px; border:0; border-radius:99px;
  font-size:15px; font-weight:600; letter-spacing:.04em; gap:10px; transition:transform .15s ease;
}
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button:not(:disabled):hover { transform:translateY(-1px); }
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button:not(.rc-pay-card,.rc-pay-wallet):not(:disabled) {
  color:#fff; background:linear-gradient(180deg,#6fd07a,#4fbb5e);
  box-shadow:0 10px 22px -14px rgba(60,170,80,.75),inset 0 1px 0 rgba(255,255,255,.35);
}
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button.rc-pay-card:not(:disabled) {
  color:#e36b12; background:#fff; border:1.5px solid #f0993a; box-shadow:none;
}
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button.rc-pay-card:not(:disabled):hover {
  color:#c85a0c; background:#fff8f2; border-color:#e36b12;
}
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled) { color:var(--rc-ink); background:#fff; box-shadow:inset 0 0 0 1px var(--ry-hair); }
:root:not([data-theme="dark"]) #page-recharge .rc-pay-button:disabled { color:var(--ry-faint); background:#f8f1e8; box-shadow:inset 0 0 0 1px var(--ry-hair); }
:root:not([data-theme="dark"]) #page-recharge .rc-payment-action>#rc-merchant-note { flex-basis:100%; color:var(--ry-faint); font-size:12px; text-align:center; }
@container (max-width:1000px) and (min-width:681px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-payment-action { width:calc(220px + 24px); }
  :root:not([data-theme="dark"]) #page-recharge .rc-payment-action:has(#rc-pay-btn:not([style*="display"])):has(#rc-wallet-btn:not([style*="display"])) {
    width:calc(160px * 2 + 14px + 24px);
  }
  :root:not([data-theme="dark"]) #page-recharge .rc-payment-action:has(#rc-pay-btn:not([style*="display"])):has(#rc-wallet-btn:not([style*="display"])) .rc-pay-button {
    flex-basis:160px; width:160px; padding-inline:12px;
  }
}
@container (max-width:680px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-payment-action { width:100%; padding-left:0; }
  :root:not([data-theme="dark"]) #page-recharge .rc-payment-action::before { display:none; }
  :root:not([data-theme="dark"]) #page-recharge .rc-pay-button { flex:1 1 100%; width:100%; }
}

/* 下半页：赠礼说明、糖豆明细、帮助和上面的结算条共用一种平整暖白卡片，没有投影。 */
:root:not([data-theme="dark"]) #page-recharge .rc-content-section { margin:34px 0 0; }
:root:not([data-theme="dark"]) #page-recharge .rc-content-section h2 { color:var(--rc-ink); font-size:18px; font-weight:600; letter-spacing:.06em; }
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-card .rc-story-heading h2::before {
  content:""; flex:none; width:14px; height:14px; background:#f2b84b; -webkit-mask:var(--ry-sparkle); mask:var(--ry-sparkle);
  filter:drop-shadow(0 0 4px rgba(242,184,75,.6));
}
:root:not([data-theme="dark"]) #page-recharge :is(.rc-section-body,.rc-history-body),
:root:not([data-theme="dark"]) #page-recharge .rc-gift-details.rc-section-body {
  padding:22px 24px; border-radius:20px; background:#fffef9; box-shadow:none;
}
:root:not([data-theme="dark"]) #page-recharge .rc-gift-details { gap:28px 40px; }
:root:not([data-theme="dark"]) #page-recharge .rc-gift-details h3 { margin:0 0 16px; color:var(--rc-muted); font-size:13px; font-weight:600; letter-spacing:.06em; }
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-benefits>span { flex-direction:row; align-items:center; gap:10px; color:#6a3f1c; font-size:12px; line-height:1.6; text-align:left; }
/* 三枚说明图标做成毛玻璃圆：半透明暖白叠一层顶部高光，线条改细、颜色压到和正文同一档，
   不再用实心橙圆把图标从卡片里顶出来。 */
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-benefits svg {
  box-sizing:border-box; width:40px; height:40px; margin:0; padding:10px; border-radius:50%;
  color:#b57945; stroke-width:1.35;
  background:
    radial-gradient(90% 70% at 32% 20%,rgba(255,255,255,.95),rgba(255,255,255,0) 48%),
    linear-gradient(165deg,rgba(255,255,255,.7),rgba(255,244,228,.34) 62%,rgba(255,255,255,.48));
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -10px 16px rgba(232,186,130,.14),
    0 10px 18px -14px rgba(150,96,36,.35);
}
:root:not([data-theme="dark"]) #page-recharge .rc-gift-story { align-items:stretch; }
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-desc { max-width:none; padding:0; border-radius:0; background:none; color:#5a3a22; font-size:13px; line-height:1.9; }
:root:not([data-theme="dark"]) #page-recharge .recharge-gift-note { color:#916b4f; font-size:12px; }
:root:not([data-theme="dark"]) #page-recharge .rc-gift-story .recharge-gift-download {
  color:#68370d; background:#f8c875;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 12px -8px rgba(163,92,20,.45);
  filter:none; transition:background-color .18s ease,transform .18s ease;
}
:root:not([data-theme="dark"]) #page-recharge .rc-gift-story .recharge-gift-download:hover { background:#f3bc5c; }
/* 两栏各自包含完整内容，窄屏顺序保持为领取说明、补充说明、介绍、下载。 */
@container (max-width:820px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-gift-details.rc-section-body { padding:22px; }
  :root:not([data-theme="dark"]) #page-recharge .rc-gift-details h3 { margin-bottom:14px; }
}
@container (max-width:480px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-gift-details.rc-section-body { padding:20px; }
  :root:not([data-theme="dark"]) #page-recharge .recharge-gift-benefits { gap:12px; }
  :root:not([data-theme="dark"]) #page-recharge .recharge-gift-benefits>span { flex-direction:column; gap:8px; text-align:center; }
}

:root:not([data-theme="dark"]) #page-recharge .rc-history-filters { width:max-content; gap:4px; margin:0 0 14px; padding:4px; border-radius:99px; background:#fff1de; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-filters button { min-height:0; padding:6px 16px; border:0; border-radius:99px; background:transparent; color:var(--rc-muted); font-size:13px; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-filters button[aria-pressed="true"] { color:var(--rc-ink); font-weight:600; background:#fff; box-shadow:0 4px 10px -6px rgba(170,95,30,.5); }
:root:not([data-theme="dark"]) #page-recharge .rc-history .table { border-collapse:separate; border-spacing:0; }
:root:not([data-theme="dark"]) #page-recharge .table th { padding:8px 14px; background:#fff8f2; color:#8a6146; font-size:12px; font-weight:500; }
:root:not([data-theme="dark"]) #page-recharge .table th:first-child { border-radius:10px 0 0 10px; }
:root:not([data-theme="dark"]) #page-recharge .table th:last-child { border-radius:0 10px 10px 0; }
:root:not([data-theme="dark"]) #page-recharge .table td { padding:12px 14px; color:#4a2a14; font-size:13px; }
:root:not([data-theme="dark"]) #page-recharge .table tbody tr:nth-child(even) td { background:#fffbf7; }
:root:not([data-theme="dark"]) #page-recharge .rc-record-amount.is-credit { color:#178a5a; font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .rc-record-amount.is-minus { color:#d23f6f; font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-status { padding:0; border-radius:0; background:none; font-size:13px; font-weight:500; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-status.is-paid { color:#178a5a; background:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-status.is-pending { color:#c85a0c; background:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-status.is-failed { color:#d23f6f; background:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-history-pagination { color:var(--ry-faint); }

:root:not([data-theme="dark"]) #page-recharge .rc-help-layout { grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:18px; }
:root:not([data-theme="dark"]) #page-recharge .rc-faq { gap:8px; }
/* 三个问题各是一条圆角浅底，不再用底边线把它们连成一张表。 */
:root:not([data-theme="dark"]) #page-recharge .rc-faq details { border-radius:14px; background:#fffaf4; box-shadow:none; }
:root:not([data-theme="dark"]) #page-recharge .rc-faq summary,
:root:not([data-theme="dark"]) #page-recharge .rc-faq details:first-child summary { min-height:0; padding:13px 16px; color:var(--rc-ink); font-size:13px; }
:root:not([data-theme="dark"]) #page-recharge .rc-faq details[open] summary { padding-bottom:4px; }
:root:not([data-theme="dark"]) #page-recharge .rc-faq summary::after { opacity:.5; margin-right:0; }
:root:not([data-theme="dark"]) #page-recharge .rc-faq details p { padding:0 16px 13px; }
:root:not([data-theme="dark"]) #page-recharge .rc-help aside { gap:10px; }
:root:not([data-theme="dark"]) #page-recharge :is(.rc-support-button,.rc-redeem-link) { min-height:46px; border:0; border-radius:99px; font-size:13px; font-weight:600; }
:root:not([data-theme="dark"]) #page-recharge :is(.rc-support-button,.rc-redeem-link) svg { width:16px; height:16px; }
:root:not([data-theme="dark"]) #page-recharge .rc-support-button { color:#c85a0c; background:#fff0dc; box-shadow:inset 0 0 0 1px #ffdcb0; }
:root:not([data-theme="dark"]) #page-recharge .rc-redeem-link { color:var(--rc-ink); background:#fff; box-shadow:inset 0 0 0 1px var(--ry-hair); }
@media(hover:hover) {
  :root:not([data-theme="dark"]) #page-recharge .rc-support-button:hover { background:#ffe7c6; }
  :root:not([data-theme="dark"]) #page-recharge .rc-redeem-link:hover { background:#fffaf3; }
}
@media(max-width:760px) {
  :root:not([data-theme="dark"]) #page-recharge .rc-help-layout { grid-template-columns:1fr; }
}

/* 活动加赠卡、充值挑战、下一套外观预告：设计稿里没画，按需出现，换成同一种玻璃面板，不留原来的灰描边。 */
:root:not([data-theme="dark"]) #page-recharge :is(.recharge-campaign-card,.recharge-next-card,.rc-ch) {
  border:0; border-radius:20px; background:var(--ry-glass); box-shadow:var(--ry-glass-shadow);
}

/* 2026-10-15 橙黄色调定稿结束 */

/* 极窄屏改成单列，避免金额、单位和推荐角标挤出卡片。 */
@container (max-width:320px) {
  #page-recharge .rc-presets,
  :root:not([data-theme="dark"]) #page-recharge .rc-presets { grid-template-columns:1fr; }
}

/* 手机端把充值明细改成字段卡片。横向表格在窄屏上会让「方式」逐字换行，
   同时把到账和状态推到可视区之外。伪元素从 data-label 读取当前语言的表头。 */
@media(max-width:640px) {
  #page-recharge .rc-history .table { display:block; min-width:0; }
  #page-recharge .rc-history .table thead {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  #page-recharge .rc-history .table tbody { display:block; }
  #page-recharge .rc-history .table tbody tr {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px;
    padding:14px 0; border-bottom:1px solid var(--rc-line);
  }
  #page-recharge .rc-history .table tbody tr:last-child { border-bottom:0; }
  #page-recharge .rc-history .table tbody td,
  :root:not([data-theme="dark"]) #page-recharge .rc-history .table tbody td {
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    min-width:0; padding:0; border:0; background:transparent; font-size:12px;
    overflow-wrap:anywhere;
  }
  #page-recharge .rc-history .table tbody td:first-child,
  :root:not([data-theme="dark"]) #page-recharge .rc-history .table tbody td:first-child {
    grid-column:1/-1; padding:0;
  }
  #page-recharge .rc-history .table tbody td::before {
    content:attr(data-label); color:var(--ry-faint,var(--rc-muted)); font-size:10px; line-height:1.4;
  }
  #page-recharge .rc-history .table tbody td[colspan] {
    grid-column:1/-1; display:block; text-align:center;
  }
  #page-recharge .rc-history .table tbody td[colspan]::before { display:none; }
}

/* 2026-10-16 dark composition parity.
   浅色定稿保留原样；暗色只在这里补齐同一套展台、余额卡、纵向金额卡与横向结算条。 */
[data-theme="dark"] .main-content:has(> #page-recharge.active) {
  padding:22px 34px 60px;
  background:
    radial-gradient(900px 520px at 72% 2%,rgba(125,83,38,.12),transparent 72%),
    linear-gradient(180deg,#1b1815 0%,#1b1916 52%,#171411 100%);
}
[data-theme="dark"] #page-recharge {
  --rc-ink:#f2e6d0;
  --rc-muted:#b8ad9f;
  --rc-gold:#f0c47b;
  --rc-line:rgba(244,194,113,.18);
  --rc-surface:#28231e;
  --rc-soft:#332b23;
  --rc-gray:#302d29;
  --rc-gray-hover:#3b3731;
  --rc-ticket-start:#322a22;
  --rc-ticket-end:#29231e;
  --rc-ticket-selected:#493522;
  --rc-ticket-border:rgba(244,194,113,.28);
  --rc-ticket-dot:rgba(244,194,113,.24);
  --rc-ticket-price:#3b3027;
  --rc-ticket-price-text:#f7ead7;
  --rc-heading-ink:#f3dfb4;
  --rc-heading-sub:#b8aa96;
  --rc-heading-sparkle:#f1bd68;
  --rc-amount-ink:#f4e5ca;
  --rc-amount-sub:#b8aa98;
  --rc-field-bg:rgba(16,13,10,.38);
  --rc-field-bg-active:rgba(16,13,10,.5);
  --rc-field-hint:#b8aa98;
  --rc-balance-num:#f6d49a;
  --rc-balance-sub:#c2b29a;
  --rc-balance-strong:#f1e2c8;
  --rc-surface-warm:#29231d;
  --rc-card-line:rgba(244,194,113,.16);
  --ry-stage:118px;
  --ry-art:86px;
  --ry-band:44px;
  --ry-faint:#a99d8e;
  --ry-hair:rgba(244,194,113,.18);
}
[data-theme="dark"] #page-recharge .rc-header { min-height:0; margin-bottom:18px; }
[data-theme="dark"] #page-recharge .rc-brand-title { position:relative; gap:14px; }
[data-theme="dark"] #page-recharge .rc-brand-title>.rc-coin {
  width:42px; height:42px; transform:rotate(-12deg);
  filter:drop-shadow(0 6px 10px rgba(229,146,46,.3));
}
[data-theme="dark"] #page-recharge .rc-brand-title::after {
  content:""; position:absolute; right:-16px; top:0; width:10px; height:10px;
  background:#f3bd68; -webkit-mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(243,189,104,.6));
}
[data-theme="dark"] #page-recharge h1 {
  width:max-content; font-size:30px; font-weight:600; letter-spacing:.12em;
  background:linear-gradient(90deg,#f1c27c,#f4e6c6); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
[data-theme="dark"] #page-recharge .head-meta { gap:8px; font-size:12px; }
[data-theme="dark"] #page-recharge .rc-meta-divider { display:none; }
[data-theme="dark"] #page-recharge .head-meta>span:first-child,
[data-theme="dark"] #page-recharge .console-status-pill {
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:0;
  border-radius:99px; background:rgba(48,42,34,.88);
  box-shadow:0 6px 14px -12px rgba(0,0,0,.8); color:var(--rc-muted); font-size:12px;
}
[data-theme="dark"] #page-recharge .head-meta b { color:var(--rc-ink); font-weight:600; }
[data-theme="dark"] #page-recharge .console-status-pill { color:#79dca9; }
[data-theme="dark"] #page-recharge .console-status-pill i {
  width:6px; height:6px; background:#45d69b; box-shadow:0 0 0 3px rgba(69,214,155,.16);
}
[data-theme="dark"] #page-recharge .rc-commerce { gap:24px 22px; }
[data-theme="dark"] #page-recharge :is(.rc-purchase,.recharge-workspace) { gap:16px; }

/* 展台和浅色稿保持同一层级，图片内缩后用深色渐隐托住外观名。 */
[data-theme="dark"] #page-recharge .rc-showcase {
  min-height:430px; border-radius:20px;
  background:linear-gradient(180deg,#2c2823,#24201b);
  box-shadow:0 16px 36px -28px rgba(0,0,0,.8);
}
@media(min-width:1001px) {
  [data-theme="dark"] #page-recharge .rc-portrait {
    inset:8px; width:calc(100% - 16px); height:calc(100% - 16px);
    border-radius:16px; object-position:50% 16%;
  }
  [data-theme="dark"] #page-recharge .rc-showcase::after {
    inset:8px; border-radius:16px;
    background:linear-gradient(180deg,rgba(24,21,18,0) 62%,rgba(24,21,18,.68) 82%,#24201b 100%);
  }
  [data-theme="dark"] #page-recharge .rc-portrait-copy { left:28px; right:28px; bottom:26px; }
}
[data-theme="dark"] #page-recharge .rc-portrait-copy {
  --rc-ink:#f4e8d2; --rc-muted:#cbbca8; color:var(--rc-ink);
}
[data-theme="dark"] #page-recharge .rc-hero-name-row {
  --rc-ink:#f4e8d2; --rc-muted:#cbbca8;
}
[data-theme="dark"] #page-recharge .rc-kicker {
  display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
  color:#f0a35e; font-size:11px; font-weight:650;
}
[data-theme="dark"] #page-recharge .rc-kicker::before {
  content:""; flex:none; width:12px; height:12px; background:#f1bd68;
  -webkit-mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
}
[data-theme="dark"] #page-recharge #rc-hero-name {
  color:var(--rc-ink); font-size:25px; font-weight:600; letter-spacing:.06em;
}
[data-theme="dark"] #page-recharge .recharge-gift-status:not(.is-claimed) {
  padding:4px 10px; color:#5a3b16; font-weight:600;
  background:linear-gradient(180deg,#f7d995,#dcae57); box-shadow:inset 0 0 0 1px rgba(255,214,126,.24);
}
[data-theme="dark"] #page-recharge .recharge-gift-status.is-claimed {
  color:#a7f0cb; background:rgba(61,188,133,.16);
}

/* 余额区：左侧图标与数字分两行，右侧建议由渐隐竖线分开。 */
[data-theme="dark"] #page-recharge .rc-balance-panel {
  display:flex; align-items:center; gap:24px; padding:18px 24px; border:0;
  border-radius:20px; background:linear-gradient(90deg,#2b251f,#29231e 70%,#27211c);
  box-shadow:0 14px 30px -26px rgba(0,0,0,.9);
}
[data-theme="dark"] #page-recharge .rc-balance-panel .rc-section-heading { flex:none; margin:0; }
[data-theme="dark"] #page-recharge .rc-balance-heading {
  display:grid; grid-template-columns:auto auto auto; grid-template-areas:"coin label label" "coin num unit";
  align-items:baseline; justify-content:start; gap:4px;
}
[data-theme="dark"] #page-recharge .rc-balance-heading>.rc-coin-cluster {
  grid-area:coin; align-self:center; width:auto; height:44px; margin-right:10px;
  filter:drop-shadow(0 6px 10px rgba(229,146,46,.24));
}
[data-theme="dark"] #page-recharge .rc-balance-heading>span { grid-area:label; color:var(--rc-balance-sub); font-size:13px; font-weight:400; }
[data-theme="dark"] #page-recharge .rc-balance-heading>strong { grid-area:num; color:var(--rc-balance-num); font-size:34px; font-weight:700; line-height:1; }
[data-theme="dark"] #page-recharge .rc-balance-heading>small { grid-area:unit; margin-left:4px; color:var(--rc-balance-sub); font-size:13px; }
[data-theme="dark"] #page-recharge .rc-ai-plan { position:relative; flex:1; min-width:0; padding-left:24px; margin:0; }
[data-theme="dark"] #page-recharge .rc-ai-plan.is-visible::before {
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(241,189,104,.28),transparent);
}
[data-theme="dark"] #page-recharge .rc-ai-plan-line {
  min-height:26px; padding:0; background:none; color:var(--rc-balance-sub);
  font-size:13px; line-height:1.75;
}
[data-theme="dark"] #page-recharge .rc-ai-plan-line b { color:var(--rc-balance-strong); font-weight:600; }
[data-theme="dark"] #page-recharge .rc-ai-plan-link { margin-left:6px; color:var(--rc-balance-num); text-decoration:none; }
[data-theme="dark"] #page-recharge .rc-ai-plan-link::after { content:" ›"; }

/* 金额区标题与浅色稿保持同一信息层级。 */
[data-theme="dark"] #page-recharge .rc-presets-heading>h3 {
  color:var(--rc-heading-ink); font-size:18px; font-weight:600; letter-spacing:.06em;
}
[data-theme="dark"] #page-recharge .rc-presets-heading>h3::before { width:14px; height:14px; filter:drop-shadow(0 0 4px rgba(241,189,104,.55)); }
[data-theme="dark"] #page-recharge .rc-heading-rule { background:none; }
[data-theme="dark"] #page-recharge .rc-presets-hint { color:var(--rc-heading-sub); }
[data-theme="dark"] #page-recharge .rc-presets-hint::after { display:none; }
[data-theme="dark"] #page-recharge .rc-presets { gap:18px 14px; padding-top:6px; }

/* 金额卡切换为纵向道具台，底部价格条与浅色稿同高。 */
[data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card) {
  min-height:0; border:0; border-radius:18px; overflow:visible;
  background:linear-gradient(180deg,#302a24,#29231e);
  box-shadow:0 12px 28px -24px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,220,160,.08);
}
@media(hover:hover) {
  [data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card):hover {
    transform:translateY(-3px); box-shadow:0 16px 28px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,220,160,.14);
  }
}
[data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card).selected,
[data-theme="dark"] #page-recharge .rc-custom-card:focus-within,
[data-theme="dark"] #page-recharge :is(.rc-amount-btn,.rc-custom-card).selected:hover,
[data-theme="dark"] #page-recharge .rc-custom-card:focus-within:hover {
  transform:translateY(-4px); background:linear-gradient(180deg,#3a2d22,#493521);
  box-shadow:0 0 0 2px #d8893d,0 24px 40px -22px rgba(211,119,49,.42);
}
[data-theme="dark"] #page-recharge .rc-amount-body {
  display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0;
}
[data-theme="dark"] #page-recharge .rc-amount-body::before {
  content:""; position:absolute; left:0; right:0; top:0; z-index:-1; height:var(--ry-stage);
  border-radius:18px 18px 0 0;
  background:
    radial-gradient(60px 12px at 50% calc(var(--ry-stage) - 22px),rgba(255,199,107,.28),rgba(255,255,255,0)),
    radial-gradient(66px 16px at 50% calc(var(--ry-stage) - 22px),rgba(255,255,255,0) 82%,rgba(255,199,107,.18) 90%,rgba(255,255,255,0) 100%),
    radial-gradient(55% 64% at 50% 58%,rgba(255,190,86,.14),transparent 72%);
}
[data-theme="dark"] #page-recharge :is(.rc-amount-body>.rc-tier-art,.rc-custom-card>.rc-custom-art) { position:relative; }
[data-theme="dark"] #page-recharge .rc-amount-body>.rc-tier-art {
  order:0; width:100%; max-width:none; height:var(--ry-stage); aspect-ratio:auto; margin:0;
  background-size:auto var(--ry-icon-height,var(--ry-art));
  background-position:50% calc(var(--ry-stage) - 16px - var(--ry-icon-height,var(--ry-art)));
  filter:none;
}
[data-theme="dark"] #page-recharge .rc-amount-btn[data-tier-art="tier-20"] .rc-tier-art { --ry-icon-height:calc(var(--ry-art) * .9); }
[data-theme="dark"] #page-recharge .rc-amount-btn[data-tier-art="tier-500"] .rc-tier-art {
  --ry-icon-height:calc(var(--ry-art) * 1.06);
  background-position:50% calc(var(--ry-stage) - 16px - var(--ry-art) * 1.03 + 3px);
}
[data-theme="dark"] #page-recharge .rc-amount-pts {
  order:1; align-self:stretch; display:flex; justify-content:center; align-items:baseline;
  flex-wrap:wrap; gap:0 4px; padding:2px 10px 10px; color:var(--rc-amount-sub);
  font-size:12px; text-align:center;
}
[data-theme="dark"] #page-recharge .rc-amount-pts>small,
[data-theme="dark"] #page-recharge .rc-amount-pts>small:first-child {
  flex:none; margin:0; color:var(--rc-amount-sub); font-size:11px; font-weight:400;
}
[data-theme="dark"] #page-recharge .rc-amount-pts>strong {
  margin:0 4px; color:var(--rc-amount-ink); font-size:21px; font-weight:700; line-height:1.1;
}
[data-theme="dark"] #page-recharge .rc-amount-notes:not(:has(.rc-first-bonus,.rc-cap-note)) { padding:0; }
[data-theme="dark"] #page-recharge .rc-amount-notes { order:2; justify-content:center; min-height:0; padding:0 10px 10px; }
[data-theme="dark"] #page-recharge .rc-amount-bonus {
  min-height:20px; padding:1px 7px; border-radius:5px; background:rgba(96,205,164,.16);
  color:#8ee0bc; font-size:11px; line-height:18px;
}
[data-theme="dark"] #page-recharge .rc-amount-cny {
  order:3; display:grid; place-items:center; align-self:stretch; height:var(--ry-band); min-height:var(--ry-band);
  margin-top:auto; padding:0; border-radius:0 0 18px 18px; background:#3a3027;
  color:#f6e6cf; font-size:19px; font-weight:700; box-shadow:0 2px 5px -1px rgba(0,0,0,.5);
}
[data-theme="dark"] #page-recharge .rc-amount-btn.selected .rc-amount-cny {
  color:#fff9ed; text-shadow:0 1px 2px rgba(105,48,10,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(90deg,#d58b3b,#efaa5b 55%,#d8792e);
}

/* 暗色角标沿用浅色的气泡与圆形勾选语言，降低饱和度以免压过糖豆插画。 */
[data-theme="dark"] #page-recharge .rc-amount-bonus.is-empty { display:none; }
[data-theme="dark"] #page-recharge .rc-amount-bonus,
[data-theme="dark"] #page-recharge .rc-amount-btn:not(:has(.rc-amount-bonus:not(.is-empty))) .rc-benefit-ribbon {
  position:absolute; z-index:1; top:-8px; left:-6px; display:block; min-width:0; min-height:0; margin:0;
  padding:4px 9px; border-radius:12px 12px 12px 4px; transform:rotate(-6deg); transform-origin:0 0;
  color:#fff7f0; font-size:12px; font-weight:800; line-height:1.15;
  text-shadow:0 1px 2px rgba(110,28,26,.38);
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 52%),linear-gradient(160deg,#d87468,#c65161 55%,#aa3f58);
  box-shadow:0 8px 16px -6px rgba(160,46,62,.5),inset 0 0 0 1px rgba(255,255,255,.3);
}
[data-theme="dark"] #page-recharge .rc-amount-btn:has(.rc-benefit-ribbon) .rc-amount-bonus { padding-top:16px; }
[data-theme="dark"] #page-recharge .rc-amount-btn:has(.rc-amount-bonus:not(.is-empty)) .rc-benefit-ribbon {
  top:-8px; left:-6px; min-width:0; min-height:0; padding:4px 9px 0; background:none;
  color:#fff2e8; font-size:9.5px; font-weight:600; opacity:.92;
}
[data-theme="dark"] #page-recharge .rc-recommend-tag {
  top:8px; right:8px; min-width:0; min-height:0; padding:2px 8px; border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(180deg,#3cb9aa,#208e82);
  box-shadow:0 4px 10px -4px rgba(34,178,158,.42); color:#f2fffb; font-size:10px; font-weight:600;
}
[data-theme="dark"] #page-recharge .rc-selected-label {
  right:-6px; bottom:-6px; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#e9a34e,#ce6b28); box-shadow:0 0 0 3px #29231e,0 6px 14px -4px rgba(211,119,49,.48);
}
[data-theme="dark"] #page-recharge .rc-selected-label::after {
  content:""; width:4px; height:8px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  border-radius:1px; transform:translateY(-1px) rotate(45deg);
}

/* 自定义金额卡共用同一道具台骨架。 */
[data-theme="dark"] #page-recharge .rc-custom-card {
  isolation:isolate; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0;
}
[data-theme="dark"] #page-recharge .rc-custom-card>.rc-custom-art {
  position:relative; order:0; width:100%; max-width:none; height:var(--ry-stage); aspect-ratio:auto; margin:0;
  background:
    radial-gradient(60px 12px at 50% calc(var(--ry-stage) - 22px),rgba(255,199,107,.28),rgba(255,255,255,0)),
    radial-gradient(66px 16px at 50% calc(var(--ry-stage) - 22px),rgba(255,255,255,0) 82%,rgba(255,199,107,.18) 90%,rgba(255,255,255,0) 100%),
    radial-gradient(55% 64% at 50% 58%,rgba(255,190,86,.14),transparent 72%);
  filter:none;
}
[data-theme="dark"] #page-recharge .rc-custom-card>.rc-custom-art::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('/static/img/recharge/jellybean/family-v3/tier-custom.webp?v=20261017webp') 50% calc(var(--ry-stage) - 16px - var(--ry-art) + 16px) / auto calc(var(--ry-art) - 16px) no-repeat;
}
[data-theme="dark"] #page-recharge .rc-custom-card label {
  order:1; align-self:center; justify-self:auto; padding:2px 10px 10px;
  color:var(--rc-amount-ink); font-size:15px; font-weight:700; text-align:center; z-index:1;
}
[data-theme="dark"] #page-recharge :is(.rc-custom-benefit,.rc-custom-card .rc-field-error) {
  order:1; align-self:center; padding:0 10px 8px; color:var(--rc-gold); text-align:center; z-index:1;
}
[data-theme="dark"] #page-recharge .rc-custom-card::after {
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0; height:var(--ry-band);
  border-radius:0 0 18px 18px; background:#3a3027; box-shadow:0 2px 5px -1px rgba(0,0,0,.5);
}
[data-theme="dark"] #page-recharge .rc-custom-card:is(.selected,:focus-within):not(:has(#rc-custom-input:placeholder-shown))::after {
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(90deg,#d58b3b,#efaa5b 55%,#d8792e);
}
[data-theme="dark"] #page-recharge .rc-custom-input-shell {
  position:relative; z-index:1; order:2; align-self:stretch; justify-content:center; gap:2px; width:auto;
  margin:auto 8px calc((var(--ry-band) - 30px) / 2); min-height:30px; padding:0 8px; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:#f3e0c4; font-size:19px; font-weight:700;
}
[data-theme="dark"] #page-recharge .rc-custom-card:is(.selected,:focus-within) .rc-custom-input-shell { background:transparent; }
[data-theme="dark"] #page-recharge #rc-custom-input {
  flex:0 1 auto; width:9ch; max-width:100%; min-width:0; min-height:28px;
  text-align:left; font-size:inherit; font-weight:inherit; color:inherit;
}
[data-theme="dark"] #page-recharge #rc-custom-currency,
[data-theme="dark"] #page-recharge #rc-custom-input::placeholder { color:#f3e0c4; font-weight:700; }
[data-theme="dark"] #page-recharge .rc-custom-card:is(.selected,:focus-within):not(:has(#rc-custom-input:placeholder-shown)) :is(#rc-custom-input,#rc-custom-currency) {
  color:#fff; text-shadow:0 1px 2px rgba(105,48,10,.45);
}
[data-theme="dark"] #page-recharge .rc-custom-card:is(.selected,:focus-within):has(#rc-custom-input:placeholder-shown) .rc-custom-input-shell {
  font-size:13px; font-weight:500; color:#c2b19c;
}
[data-theme="dark"] #page-recharge .rc-custom-card:is(.selected,:focus-within):has(#rc-custom-input:placeholder-shown) :is(#rc-custom-input,#rc-custom-currency),
[data-theme="dark"] #page-recharge .rc-custom-card:is(.selected,:focus-within):has(#rc-custom-input:placeholder-shown) #rc-custom-input::placeholder {
  color:#c2b19c; font-weight:500; text-shadow:none;
}

/* 邀请条和结算条保持图二的横向节奏，按钮只换成暗色材质。 */
[data-theme="dark"] #page-recharge .rc-referral-guide {
  --rc-invite-bg:linear-gradient(90deg,rgba(40,150,128,.22),rgba(40,150,128,.1));
  --rc-invite-bg-hover:linear-gradient(90deg,rgba(40,150,128,.3),rgba(40,150,128,.16));
  --rc-invite-ring:transparent; --rc-invite-ring-hover:rgba(90,200,175,.28);
  --rc-invite-accent:#4cc0a7; --rc-invite-accent-hover:#66d0b9; --rc-invite-on-accent:#0b2621;
  --rc-invite-icon-bg:rgba(255,255,255,.08); --rc-invite-title:#e4f2ec; --rc-invite-sub:#a7c1b9;
  padding:12px 14px; border-radius:18px; box-shadow:none;
}
[data-theme="dark"] #page-recharge .rc-referral-guide-icon { width:34px; height:34px; box-shadow:none; }
[data-theme="dark"] #page-recharge .rc-referral-guide-text b { font-size:13px; font-weight:600; }
[data-theme="dark"] #page-recharge .rc-referral-guide-cta { min-height:32px; padding:0 16px; background:#38b9a5; box-shadow:0 6px 14px -8px rgba(17,148,136,.55); }
[data-theme="dark"] #page-recharge .rc-checkout {
  padding:22px 28px; border-radius:20px; box-shadow:0 14px 30px -26px rgba(0,0,0,.9);
}
[data-theme="dark"] #page-recharge .rc-credit-total { gap:4px 10px; color:var(--rc-ink); font-size:13px; font-weight:500; }
[data-theme="dark"] #page-recharge .rc-credit-total small { color:var(--rc-muted); font-size:13px; }
[data-theme="dark"] #page-recharge #rc-order-total {
  font-size:40px; font-weight:700; line-height:1;
  background:linear-gradient(180deg,#ffc177,#e58a3a); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
[data-theme="dark"] #page-recharge .rc-order-meta { margin-top:12px; gap:6px 18px; }
[data-theme="dark"] #page-recharge .rc-order-gift b { color:var(--rc-ink); font-weight:600; }
[data-theme="dark"] #page-recharge .rc-payment-action {
  position:relative; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
  box-sizing:border-box; width:calc(220px * 2 + 14px + 24px); max-width:100%; min-width:0;
  gap:10px 14px; padding-left:24px;
}
[data-theme="dark"] #page-recharge .rc-payment-action::before {
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(241,189,104,.26),transparent);
}
[data-theme="dark"] #page-recharge .rc-pay-button {
  flex:0 0 220px; width:220px; min-width:0; min-height:54px; padding:0 18px;
  border-radius:99px; font-size:15px; font-weight:600; letter-spacing:.04em; gap:10px;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
}
[data-theme="dark"] #page-recharge .rc-pay-button:not(:disabled):hover { transform:translateY(-1px); }
[data-theme="dark"] #page-recharge .rc-pay-button.rc-pay-card:not(:disabled) {
  color:#f0a35e; background:transparent; border:1.5px solid #d98943; box-shadow:none;
}
[data-theme="dark"] #page-recharge .rc-pay-button.rc-pay-card:not(:disabled):hover {
  color:#ffc17f; background:rgba(217,137,67,.1); border-color:#f0a35e;
}
[data-theme="dark"] #page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled),
[data-theme="dark"] #page-recharge .rc-pay-button:not(.rc-pay-card,.rc-pay-wallet):not(:disabled) {
  color:#f4fff9; background:linear-gradient(180deg,#62c878,#42ab60);
  box-shadow:0 10px 22px -14px rgba(60,170,80,.62),inset 0 1px 0 rgba(255,255,255,.25);
}
[data-theme="dark"] #page-recharge .rc-pay-button.rc-pay-wallet:not(:disabled):hover,
[data-theme="dark"] #page-recharge .rc-pay-button:not(.rc-pay-card,.rc-pay-wallet):not(:disabled):hover { background:#4fbb6a; }
[data-theme="dark"] #page-recharge .rc-pay-button:disabled {
  color:#958a7e; background:#302a24; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="dark"] #page-recharge .rc-payment-action>#rc-merchant-note { flex-basis:100%; color:var(--ry-faint); font-size:12px; text-align:center; }

/* 下半页也跟随同一套圆角面板与胶囊筛选，避免首屏改版后继续露出旧灰框。 */
[data-theme="dark"] #page-recharge .rc-content-section { margin:34px 0 0; }
[data-theme="dark"] #page-recharge .rc-content-section h2 { color:var(--rc-ink); font-size:18px; font-weight:600; letter-spacing:.06em; }
[data-theme="dark"] #page-recharge .recharge-gift-card .rc-story-heading h2::before {
  content:""; flex:none; width:14px; height:14px; background:#f1bd68;
  -webkit-mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  mask:url('/static/img/recharge/ui/sparkle-sm.png') center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(241,189,104,.5));
}
[data-theme="dark"] #page-recharge :is(.rc-section-body,.rc-history-body),
[data-theme="dark"] #page-recharge .rc-gift-details.rc-section-body {
  padding:22px 24px; border:0; border-radius:20px; background:#29231d; box-shadow:none;
}
[data-theme="dark"] #page-recharge .rc-gift-details { gap:28px 40px; }
[data-theme="dark"] #page-recharge .rc-gift-details h3 { margin:0 0 16px; color:var(--rc-muted); font-size:13px; font-weight:600; letter-spacing:.06em; }
[data-theme="dark"] #page-recharge .recharge-gift-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
[data-theme="dark"] #page-recharge .recharge-gift-benefits>span { flex-direction:row; align-items:center; gap:10px; color:#e4d6c3; font-size:12px; line-height:1.6; text-align:left; }
[data-theme="dark"] #page-recharge .recharge-gift-benefits svg {
  box-sizing:border-box; width:40px; height:40px; margin:0; padding:10px; border-radius:50%;
  color:#d8aa6e; stroke-width:1.35; background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,203,123,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,210,145,.12),0 10px 18px -14px rgba(0,0,0,.7);
}
[data-theme="dark"] #page-recharge .rc-gift-story { align-items:stretch; }
[data-theme="dark"] #page-recharge .recharge-gift-desc { max-width:none; padding:0; border-radius:0; background:none; color:#cdbda9; font-size:13px; line-height:1.9; }
[data-theme="dark"] #page-recharge .recharge-gift-note { color:#a99a89; font-size:12px; }
[data-theme="dark"] #page-recharge .rc-gift-story .recharge-gift-download { color:#3e2810; background:#e6b768; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 12px -8px rgba(0,0,0,.55); }
[data-theme="dark"] #page-recharge .rc-gift-story .recharge-gift-download:hover { background:#f0c578; }
[data-theme="dark"] #page-recharge .rc-history-filters { width:max-content; gap:4px; margin:0 0 14px; padding:4px; border-radius:99px; background:#342b23; }
[data-theme="dark"] #page-recharge .rc-history-filters button { min-height:0; padding:6px 16px; border:0; border-radius:99px; background:transparent; color:var(--rc-muted); font-size:13px; }
[data-theme="dark"] #page-recharge .rc-history-filters button[aria-pressed="true"] { color:var(--rc-ink); font-weight:600; background:#4a3a2c; box-shadow:0 4px 10px -6px rgba(0,0,0,.6); }
[data-theme="dark"] #page-recharge .rc-history .table { border-collapse:separate; border-spacing:0; }
[data-theme="dark"] #page-recharge .table th { padding:8px 14px; background:#332b23; color:#b8a998; font-size:12px; font-weight:500; }
[data-theme="dark"] #page-recharge .table th:first-child { border-radius:10px 0 0 10px; }
[data-theme="dark"] #page-recharge .table th:last-child { border-radius:0 10px 10px 0; }
[data-theme="dark"] #page-recharge .table td { padding:12px 14px; color:#c6b7a5; font-size:13px; }
[data-theme="dark"] #page-recharge .table tbody tr:nth-child(even) td { background:#2f2923; }
[data-theme="dark"] #page-recharge .rc-history-status.is-pending { color:#f0c47b; }
[data-theme="dark"] #page-recharge .rc-history-pagination { color:var(--ry-faint); }
[data-theme="dark"] #page-recharge .rc-help-layout { grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:18px; }
[data-theme="dark"] #page-recharge .rc-faq { gap:8px; }
[data-theme="dark"] #page-recharge .rc-faq details { border-radius:14px; background:#302922; box-shadow:none; }
[data-theme="dark"] #page-recharge .rc-faq summary,
[data-theme="dark"] #page-recharge .rc-faq details:first-child summary { min-height:0; padding:13px 16px; color:var(--rc-ink); font-size:13px; }
[data-theme="dark"] #page-recharge .rc-faq details[open] summary { padding-bottom:4px; }
[data-theme="dark"] #page-recharge .rc-faq summary::after { opacity:.5; margin-right:0; }
[data-theme="dark"] #page-recharge .rc-faq details p { padding:0 16px 13px; }
[data-theme="dark"] #page-recharge :is(.rc-support-button,.rc-redeem-link) { min-height:46px; border:0; border-radius:99px; font-size:13px; font-weight:600; }
[data-theme="dark"] #page-recharge :is(.rc-support-button,.rc-redeem-link) svg { width:16px; height:16px; }
[data-theme="dark"] #page-recharge .rc-support-button { color:#f0b26c; background:#3c2b1f; box-shadow:inset 0 0 0 1px rgba(230,160,79,.2); }
[data-theme="dark"] #page-recharge .rc-redeem-link { color:var(--rc-ink); background:#332e29; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
@media(hover:hover) {
  [data-theme="dark"] #page-recharge .rc-support-button:hover { background:#483326; }
  [data-theme="dark"] #page-recharge .rc-redeem-link:hover { background:#3d3832; }
}
[data-theme="dark"] #page-recharge :is(.recharge-campaign-card,.recharge-next-card,.rc-ch) {
  border:0; border-radius:20px; background:#29231d; box-shadow:0 14px 30px -26px rgba(0,0,0,.8);
}

@media(max-width:640px) {
  [data-theme="dark"] .main-content:has(> #page-recharge.active) { padding:18px 16px 44px; }
  [data-theme="dark"] #page-recharge .rc-balance-panel { flex-wrap:wrap; gap:12px; padding:16px 18px; }
  [data-theme="dark"] #page-recharge .rc-ai-plan { flex-basis:100%; padding-left:0; }
  [data-theme="dark"] #page-recharge .rc-ai-plan.is-visible::before { display:none; }
  [data-theme="dark"] #page-recharge .rc-balance-heading>strong { font-size:30px; }
  [data-theme="dark"] #page-recharge .rc-presets { gap:16px 10px; }
  [data-theme="dark"] #page-recharge .rc-amount-pts>strong { font-size:18px; }
  [data-theme="dark"] #page-recharge .rc-amount-cny { font-size:17px; }
  [data-theme="dark"] #page-recharge .rc-custom-card label { font-size:13px; }
  [data-theme="dark"] #page-recharge .rc-custom-input-shell { font-size:17px; }
  [data-theme="dark"] #page-recharge #rc-order-total { font-size:32px; }
  [data-theme="dark"] #page-recharge .rc-pay-button { min-height:48px; }
  [data-theme="dark"] #page-recharge .rc-gift-details.rc-section-body { padding:20px; }
  [data-theme="dark"] #page-recharge .recharge-gift-benefits { gap:12px; }
  [data-theme="dark"] #page-recharge .recharge-gift-benefits>span { flex-direction:column; gap:8px; text-align:center; }
}
@media(max-width:760px) {
  [data-theme="dark"] #page-recharge .rc-help-layout { grid-template-columns:1fr; }
}

/* 新人入门档横幅：用淡金底和细描边承载，不加色条。深浅色共用同一组变量。 */
#page-recharge .rc-starter-banner {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 14px; padding:10px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--rc-gold) 11%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rc-gold) 28%, transparent);
}
#page-recharge .rc-starter-banner[hidden] { display:none; }
#page-recharge .rc-starter-copy { display:grid; gap:2px; min-width:0; }
#page-recharge .rc-starter-copy strong { font-size:14px; line-height:1.4; font-weight:700; }
#page-recharge .rc-starter-copy span { font-size:12px; line-height:1.5; color:var(--rc-muted); overflow-wrap:anywhere; }
#page-recharge .rc-starter-countdown {
  flex:none; font-size:12px; font-weight:600; color:var(--rc-gold);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (max-width:560px) {
  #page-recharge .rc-starter-banner { flex-direction:column; align-items:flex-start; gap:6px; }
}