/* ==========================================================================
   白叶 · 点券充值（recharge.html 独立页 + 个人档案「点券钱包」卡片）
   - 页面主题：body.wl-sp-recharge（点券 = 琥珀金）
   - 复用 wl-subpages.css 的像素变量；卡片部分复用 wl-achieve.css 的 .ach-card
   - 只覆盖外观，不改业务逻辑 / DOM id / API
   ========================================================================== */

/* ---------- 分页强调色：点券金 ---------- */
html[data-theme="light"] body.wl-sp-recharge { --sp-accent: #2f9a4a; --sp-accent-hi: #3fb85e; --sp-accent-ink: #ffffff; --sp-accent-soft: rgba(47, 154, 74, .13); --lf-g:#59c26a; --lf-k:#1f4a1a; --lf-w:#d6f7c4; }
html[data-theme="dark"]  body.wl-sp-recharge { --sp-accent: #7ddc72; --sp-accent-hi: #9aea8e; --sp-accent-ink: #06200a; --sp-accent-soft: rgba(125, 220, 114, .14); --lf-g:#6fcf62; --lf-k:#0b2a10; --lf-w:#c8f5b2; }

/* ---------- 页头 / 页脚 ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--px-surface); border-bottom: 3px solid var(--px-line); padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--px-ink); }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand b { font-family: var(--font-pixel); font-weight: 400; font-size: 24px; -webkit-font-smoothing: none; }
.brand small { font-size: 11.5px; color: var(--px-ink-3); border-left: 1px solid var(--px-line-soft); padding-left: 12px; letter-spacing: .08em; }
.hdr-actions { display: flex; gap: 10px; align-items: center; }
.btn { font-size: 13px; font-weight: 700; padding: 8px 14px; border: 2px solid var(--px-line); background: var(--px-surface-2); color: var(--px-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: 3px 3px 0 var(--px-hard); }
.btn:hover { transform: translate(-1px, -1px); border-color: var(--sp-accent); }
.btn.primary { background: var(--sp-accent); color: var(--sp-accent-ink); }
.btn.primary:hover { background: var(--sp-accent-hi); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.wl-beian-footer a { color: inherit; }

/* ---------- 布局 ---------- */
.rc-main { max-width: 1120px; margin: 0 auto; padding: 0 22px 80px; }
.rc-hero { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: end; padding: 36px 0 10px; }
.rc-kicker { font-family: var(--font-pixel); font-size: 12px; letter-spacing: .14em; color: var(--sp-accent); -webkit-font-smoothing: none; margin-bottom: 10px; }
.rc-title { font-family: var(--font-pixel); font-weight: 400; font-size: 48px; line-height: 1; -webkit-font-smoothing: none; }
.rc-sub { color: var(--px-ink-2); font-size: 13.5px; line-height: 1.75; margin-top: 12px; max-width: 620px; }
.rc-rules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rc-rule { border: 2px solid var(--px-line); background: var(--px-surface); box-shadow: 3px 3px 0 var(--px-hard); padding: 7px 12px; font-size: 12.5px; }
.rc-rule b { color: var(--sp-accent); font-family: var(--font-pixel); font-weight: 400; }

/* 余额卡 */
.rc-wall { border: 3px solid var(--px-line); background: var(--px-surface); box-shadow: 6px 6px 0 var(--px-hard); padding: 16px 20px; min-width: 214px; transform: rotate(-1deg); }
.rc-wall span { font-size: 11.5px; color: var(--px-ink-3); display: block; letter-spacing: .06em; }
.rc-wall b { font-family: var(--font-pixel); font-weight: 400; font-size: 44px; line-height: 1.05; color: var(--sp-accent); -webkit-font-smoothing: none; display: block; }
.rc-wall small { font-size: 11.5px; color: var(--px-ink-3); }

/* 提示条 */
.rc-notice { border: 3px solid var(--px-amber); background: color-mix(in srgb, var(--px-amber) 12%, var(--px-surface)); padding: 12px 16px; font-size: 13px; line-height: 1.7; margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rc-notice.bad { border-color: var(--px-red); background: color-mix(in srgb, var(--px-red) 12%, var(--px-surface)); }
.rc-notice[hidden] { display: none; }
[hidden] { display: none !important; }

/* 套餐 */
.rc-h2 { font-family: var(--font-pixel); font-weight: 400; font-size: 24px; -webkit-font-smoothing: none; display: flex; align-items: baseline; gap: 10px; margin: 38px 0 4px; }
.rc-h2 small { font-size: 11.5px; color: var(--px-ink-3); font-family: var(--font-body); }
.rc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.tier { position: relative; border: 3px solid var(--px-line); background: var(--px-surface); box-shadow: 5px 5px 0 var(--px-hard); padding: 18px 18px 16px; cursor: pointer; text-align: left; width: 100%; color: inherit; font: inherit; }
.tier:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--px-hard); border-color: var(--sp-accent); }
.tier[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.tier .t-pt { font-family: var(--font-pixel); font-weight: 400; font-size: 40px; line-height: 1; -webkit-font-smoothing: none; display: flex; align-items: center; gap: 8px; }
.tier .t-pt em { font-style: normal; font-size: 15px; color: var(--px-ink-2); font-family: var(--font-body); }
.tier .t-name { font-size: 13px; color: var(--px-ink-2); margin-top: 6px; }
.tier .t-price { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; border-top: 2px dashed var(--px-line-soft); padding-top: 12px; }
.tier .t-price b { font-family: var(--font-pixel); font-weight: 400; font-size: 24px; color: var(--sp-accent); -webkit-font-smoothing: none; }
.tier .t-price span { font-size: 12px; color: var(--px-ink-3); }
.tier .t-hot { position: absolute; top: -11px; right: 14px; font-family: var(--font-pixel); font-size: 11px; letter-spacing: .08em; background: var(--px-red); color: #fff; padding: 2px 8px; box-shadow: 2px 2px 0 var(--px-hard); -webkit-font-smoothing: none; }
.rc-loading { color: var(--px-ink-3); padding: 26px; text-align: center; border: 3px dashed var(--px-line-mid); grid-column: 1 / -1; }

/* 历史 */
.rc-orders { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rc-oh, .rc-or { display: grid; grid-template-columns: 1.6fr 1.2fr .8fr .9fr 1.1fr; gap: 12px; align-items: center; padding: 10px 14px; }
.rc-oh { font-size: 11.5px; color: var(--px-ink-3); font-weight: 700; letter-spacing: .05em; border-bottom: 2px solid var(--px-line-soft); }
.rc-or { border: 2px solid var(--px-line); background: var(--px-surface); box-shadow: 3px 3px 0 var(--px-hard); font-size: 13px; }
.rc-or .no { font-family: var(--font-mono); font-size: 12px; }
.rc-or .amt { font-variant-numeric: tabular-nums; }
.rc-empty { border: 3px dashed var(--px-line-mid); padding: 28px; text-align: center; color: var(--px-ink-3); }
.rc-history-actions { display: flex; justify-content: flex-end; }

/* 状态药丸 */
.rc-st { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border: 2px solid var(--px-line); background: var(--px-surface-2); white-space: nowrap; }
.rc-st.ok { background: var(--px-accent); color: var(--px-accent-ink); }
.rc-st.warn { background: var(--px-amber); color: #1d1406; }
.rc-st.sky { background: var(--px-sky); color: #04121d; }
.rc-st.muted { color: var(--px-ink-3); border-color: var(--px-line-mid); }
.rc-st.bad { background: var(--px-red); color: #fff; }

/* 订单弹窗 */
dialog#rcDlg { width: min(480px, calc(100vw - 28px)); border: 3px solid var(--px-line); background: var(--px-surface); color: var(--px-ink); padding: 0; box-shadow: 8px 8px 0 var(--px-hard); }
dialog#rcDlg::backdrop { background: rgba(0, 0, 0, .5); }
.rc-dl { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.rc-dl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 3px solid var(--px-line-soft); padding-bottom: 12px; }
.rc-dl-top h3 { font-family: var(--font-pixel); font-weight: 400; font-size: 24px; -webkit-font-smoothing: none; }
.rc-dl-top .x { border: 2px solid var(--px-line); background: var(--px-surface-2); width: 34px; height: 34px; cursor: pointer; font-weight: 800; }
.rc-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.rc-rows span { color: var(--px-ink-3); }
.rc-rows b { text-align: right; }
.rc-rows b.mono { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.rc-qr { border: 3px dashed var(--px-line-mid); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rc-qr .ph { width: 180px; height: 180px; display: grid; place-items: center; border: 2px solid var(--px-line-soft); background: var(--px-surface-2); font-size: 12px; color: var(--px-ink-3); padding: 14px; text-align: center; line-height: 1.6; }
.rc-qr .url { font-family: var(--font-mono); font-size: 11px; word-break: break-all; color: var(--px-ink-2); text-align: center; }
.rc-count { font-family: var(--font-mono); font-size: 12px; color: var(--px-amber); text-align: center; }
.rc-dl-acts { display: flex; gap: 10px; }
.rc-dl-acts .btn { flex: 1; justify-content: center; }
.rc-ch { display: flex; gap: 10px; }
.rc-ch button { flex: 1; border: 2px solid var(--px-line); background: var(--px-surface-2); padding: 10px; cursor: pointer; font-weight: 700; }
.rc-ch button[aria-pressed="true"] { background: var(--sp-accent); color: var(--sp-accent-ink); }
.rc-ok { text-align: center; padding: 6px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rc-ok .big { font-family: var(--font-pixel); font-weight: 400; font-size: 36px; color: var(--px-accent); -webkit-font-smoothing: none; }

/* ===== v2 改版覆盖 ===== */
.rc-hero { grid-template-columns: 1fr 260px; align-items: stretch; padding: 40px 0 6px; }
.rc-title { font-size: 44px; line-height: 1.15; }
.rc-sub { max-width: 640px; font-size: 14px; }
.rc-sub b { color: var(--sp-accent); }
.rc-wall { transform: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; background: linear-gradient(160deg, var(--sp-accent-soft), var(--px-surface) 70%); border-color: var(--sp-accent); }
.rc-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; }
.rc-steps li { position: relative; border: 2px solid var(--px-line-soft); background: var(--px-surface); padding: 12px 14px 12px 50px; display: flex; flex-direction: column; gap: 2px; }
.rc-steps li i { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; display: grid; place-items: center; font-style: normal; font-family: var(--font-pixel); font-size: 14px; background: var(--sp-accent); color: var(--sp-accent-ink); box-shadow: 2px 2px 0 var(--px-hard); -webkit-font-smoothing: none; }
.rc-steps li b { font-size: 13.5px; }
.rc-steps li small { font-size: 11.5px; color: var(--px-ink-3); line-height: 1.5; }
.rc-tiers { gap: 18px; margin-top: 20px; }
.tier { display: flex; flex-direction: column; padding: 20px 20px 16px; transition: transform .08s, box-shadow .08s; }
.tier .t-pt { font-size: 44px; }
.tier .t-name { font-size: 13px; }
.tier .t-coin { margin-top: 10px; font-size: 12.5px; color: var(--px-ink-2); background: var(--sp-accent-soft); border: 2px dashed var(--px-line-soft); padding: 5px 9px; align-self: flex-start; }
.tier .t-coin b { color: var(--sp-accent); font-weight: 800; }
.tier .t-price { margin-top: auto; }
.tier .t-price { padding-top: 12px; }
.tier .t-go { font-size: 12px; font-weight: 800; color: var(--sp-accent); }
.tier.is-hot { border-color: var(--sp-accent); background: linear-gradient(180deg, var(--sp-accent-soft), var(--px-surface) 60%); }
.tier:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--px-hard); }
.tier:focus-visible, .btn:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; }
.rc-hist-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 44px; }
.rc-hist-head .rc-h2 { margin-bottom: 0; }
.rc-terms { margin-top: 36px; border: 2px dashed var(--px-line-soft); padding: 12px 16px; font-size: 12.5px; color: var(--px-ink-2); }
.rc-terms summary { cursor: pointer; font-weight: 800; color: var(--px-ink); }
.rc-terms ul { margin: 10px 0 2px; padding-left: 18px; line-height: 1.9; }
.rc-terms b { color: var(--sp-accent); }

@media (max-width: 820px) {
  .rc-hero { grid-template-columns: 1fr; }
  .rc-title { font-size: 30px; }
  .rc-steps { grid-template-columns: 1fr 1fr; }
  .tier .t-pt { font-size: 34px; }
}
@media (max-width: 460px) {
  .rc-tiers { grid-template-columns: 1fr !important; }
  .rc-steps { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .hdr { padding: 10px 14px; }
  .brand small { display: none; }
  .rc-main { padding: 0 12px 60px; }
  .rc-hero { grid-template-columns: 1fr; gap: 16px; }
  .rc-title { font-size: 34px; }
  .rc-tiers { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tier .t-pt { font-size: 32px; }
  .rc-oh { display: none; }
  .rc-or { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .rc-or .no { grid-column: 1 / -1; }
}

/* ============ 个人档案「点券钱包」卡片（user.html，玻璃主题） ============ */
#pointsCard .rpc-head-tag { font-size: 11px; font-weight: 800; color: var(--accent-blue); background: var(--accent-soft); padding: 3px 9px; border-radius: 99px; }
#pointsCard .rpc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; }
#pointsCard .rpc-stat { border: 1px solid var(--border-glass); border-radius: 14px; padding: 12px 14px; }
#pointsCard .rpc-stat span { font-size: 12px; color: var(--text-muted); }
#pointsCard .rpc-stat b { font-size: 22px; font-weight: 800; display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
#pointsCard .rpc-sub { font-size: 12px; font-weight: 800; color: var(--text-muted); margin: 18px 0 8px; }
#pointsCard .rpc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#pointsCard .rpc-list { display: flex; flex-direction: column; gap: 6px; }
#pointsCard .rpc-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border-glass); border-radius: 10px; }
#pointsCard .rpc-row small { color: var(--text-muted); font-size: 11.5px; }
#pointsCard .rpc-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
#pointsCard .rpc-delta.plus { color: #10b981; }
#pointsCard .rpc-delta.minus { color: #ef4444; }
#pointsCard .rpc-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
#pointsCard .rpc-st { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-blue); white-space: nowrap; }
#pointsCard .rpc-st.ok { background: rgba(16, 185, 129, .16); color: #10b981; }
#pointsCard .rpc-st.warn { background: rgba(251, 191, 36, .18); color: #f59e0b; }
#pointsCard .rpc-st.muted { background: rgba(148, 163, 184, .16); color: var(--text-muted); }
#pointsCard .rpc-st.bad { background: rgba(239, 68, 68, .16); color: #ef4444; }
#pointsCard .rpc-acts { display: flex; gap: 8px; }
#pointsCard .rpc-btn { font: inherit; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border-glass); background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
#pointsCard .rpc-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
@media (max-width: 700px) { #pointsCard .rpc-cols { grid-template-columns: 1fr; } }




/* ===== v3：小叶片主题 ===== */
.hdr { backdrop-filter: none; }
.hdr .btn span { display: inline-block; }
.rc-hero { position: relative; isolation: isolate; margin-top: 18px; padding: 40px 36px 34px; border: 3px solid var(--px-line); background: linear-gradient(160deg, color-mix(in srgb, var(--sp-accent) 16%, var(--px-surface)), var(--px-surface) 62%); box-shadow: 6px 6px 0 var(--px-hard); overflow: hidden; }
.rc-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rc-sky .fl { position: absolute; width: 34px; height: 34px; opacity: .55; filter: drop-shadow(2px 2px 0 var(--px-hard)); animation: rcDrift 11s ease-in-out infinite; }
.rc-sky .f1 { left: 4%; top: 12%; animation-delay: -1s; } .rc-sky .f2 { left: 34%; top: 70%; width: 24px; height: 24px; animation-delay: -4s; }
.rc-sky .f3 { left: 52%; top: 8%; width: 28px; height: 28px; animation-delay: -7s; } .rc-sky .f4 { left: 63%; top: 62%; animation-delay: -2s; }
.rc-sky .f5 { left: 78%; top: 18%; width: 22px; height: 22px; animation-delay: -5s; } .rc-sky .f6 { left: 90%; top: 74%; width: 30px; height: 30px; animation-delay: -9s; }
.rc-sky .f7 { left: 20%; top: 86%; width: 20px; height: 20px; animation-delay: -3s; }
@keyframes rcDrift { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 50% { transform: translate(14px, -18px) rotate(18deg); } }
.rc-title { display: flex; align-items: center; gap: 14px; font-size: 56px; }
.rc-title-lf { width: 54px; height: 54px; filter: drop-shadow(3px 3px 0 var(--px-hard)); animation: rcSway 4s ease-in-out infinite; transform-origin: 20% 90%; }
@keyframes rcSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.rc-slogan { font-size: 17px; font-weight: 800; color: var(--sp-accent); margin: 8px 0 0; letter-spacing: .06em; }
.rc-wall { position: relative; }
.rc-wall::after { content: ""; position: absolute; right: 12px; top: 10px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21C3 10 10 3 21 3c0 11-7 18-18 18z' fill='%236fcf62' stroke='%231f4a1a' stroke-width='1.6'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' fill='none' stroke='%23d6f7c4' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; animation: rcSway 4s ease-in-out infinite; }
.rc-steps { margin-top: 22px; }
.rc-steps li { transition: transform .12s, border-color .12s; }
.rc-steps li:hover { transform: translateY(-2px); border-color: var(--sp-accent); }

/* 档位：成长阶段 */
.tier { align-items: stretch; overflow: hidden; }
.tier .t-stage { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--sp-accent); display: flex; align-items: center; justify-content: space-between; }
.tier .t-leaves { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 10px 0 4px; }
.tier .t-leaves svg { width: 20px; height: 20px; filter: drop-shadow(1.5px 1.5px 0 var(--px-hard)); transform-origin: 50% 100%; transition: transform .2s; }
.tier .t-leaves svg:nth-child(odd) { transform: rotate(-8deg); }
.tier .t-leaves svg:nth-child(even) { transform: rotate(8deg) translateY(-3px); }
.tier:hover .t-leaves svg { animation: rcWiggle .7s ease-in-out infinite alternate; }
.tier:hover .t-leaves svg:nth-child(even) { animation-delay: .15s; }
@keyframes rcWiggle { from { transform: rotate(-14deg) scale(1.05); } to { transform: rotate(14deg) scale(1.18); } }
.tier .t-pt { font-size: 44px; }
.tier:hover .t-go { transform: translateX(4px); }
.tier .t-go { transition: transform .12s; }
.tier.is-hot::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--sp-accent) 7%, transparent) 14px 16px); pointer-events: none; }
.rc-h2 svg { width: 22px; height: 22px; }
.rc-terms b { color: var(--sp-accent); }
.rc-sub b { color: var(--sp-accent); }
@media (max-width: 820px) {
  .rc-hero { padding: 26px 18px 22px; }
  .rc-title { font-size: 38px; } .rc-title-lf { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .rc-sky .fl, .rc-title-lf, .rc-wall::after, .tier:hover .t-leaves svg { animation: none !important; } }
/* ===== 像素树林背景 + 像素橡树场景（v2） ===== */
body.wl-sp-recharge { position: relative; }
body.wl-sp-recharge::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 500px; z-index: -1; pointer-events: none; opacity: .85; image-rendering: pixelated;
  background: url("/rc-forest-top.svg") center top / 2400px 500px repeat-x; }
body.wl-sp-recharge::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 700px; z-index: -1; pointer-events: none; opacity: .9; image-rendering: pixelated;
  background: url("/rc-forest-bottom.svg") center bottom / 2400px 700px repeat-x; }
html[data-theme="dark"] body.wl-sp-recharge::before { opacity: .5; }
html[data-theme="dark"] body.wl-sp-recharge::after { opacity: .55; }
.rc-jungle { display: none !important; }
.tier .t-hot { display: none; }
.tier { padding-top: 16px; }
.tier .t-leaves { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 132px; margin: 10px -2px 12px; padding: 0 0 12px;
  border: 2px solid var(--px-line); overflow: hidden;
  background: linear-gradient(180deg, #bfe6f5 0 55%, #d9f1fa 55% 80%, #eaf8fd 80%); }
html[data-theme="dark"] .tier .t-leaves { background: linear-gradient(180deg, #16303a 0 55%, #1b3a45 55% 80%, #214452 80%); }
.tier .t-leaves::before { content: ""; position: absolute; left: 14px; top: 14px; width: 12px; height: 8px; background: #fff; opacity: .85;
  box-shadow: 12px 0 #fff, 24px 0 #fff, 12px -8px #fff, 24px 8px #fff, 100px 12px #fff, 112px 12px #fff, 124px 12px #fff, 112px 4px #fff; }
html[data-theme="dark"] .tier .t-leaves::before { opacity: .18; }
.tier .t-leaves::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: linear-gradient(180deg, #5aa84a 0 6px, #7a5230 6px 12px); box-shadow: 0 -2px 0 #3f8a3a inset; }
.tier .t-leaves svg { position: relative; z-index: 1; display: block; width: auto; height: 100%; max-width: 100%; margin-bottom: 0; image-rendering: pixelated; transform: none; animation: none; filter: none; }
.tier .lfg { transform-origin: 50% 100%; }
@keyframes rcPx { 0% { transform: translate(0, 0); } 50% { transform: translate(2px, -4px); } 100% { transform: translate(-2px, 0); } }

@keyframes rcCloud { from { transform: translateX(0); } to { transform: translateX(48px); } }
.tier:hover .t-leaves::before { animation: rcCloud 2.4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .tier:hover .t-leaves::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .tier:hover .t-leaves .lfg { animation: none; } }

/* 每张卡的云各不相同 */
.tier:nth-child(1) .t-leaves::before { left: 18px; top: 16px; box-shadow: 12px 0 #fff, 24px 0 #fff, 12px -8px #fff, 150px 20px #fff, 162px 20px #fff; }
.tier:nth-child(2) .t-leaves::before { left: 120px; top: 10px; box-shadow: 12px 0 #fff, 24px 0 #fff, 36px 0 #fff, 12px -8px #fff, 24px -8px #fff, -100px 24px #fff, -88px 24px #fff, -88px 16px #fff; }
.tier:nth-child(3) .t-leaves::before { left: 30px; top: 22px; box-shadow: 12px 0 #fff, 12px -8px #fff, 24px -8px #fff, 36px 0 #fff, 48px 0 #fff, 170px -8px #fff, 182px -8px #fff; }
.tier:nth-child(4) .t-leaves::before { left: 200px; top: 14px; box-shadow: 12px 0 #fff, 24px 0 #fff, 24px -8px #fff, 36px 8px #fff, -170px 18px #fff, -158px 18px #fff, -146px 18px #fff, -158px 10px #fff; }
.tier:nth-child(5) .t-leaves::before { left: 70px; top: 8px; box-shadow: 12px 0 #fff, 24px 0 #fff, 36px 0 #fff, 48px 0 #fff, 24px -8px #fff, 36px -8px #fff, 140px 26px #fff, 152px 26px #fff; }
.tier:nth-child(6) .t-leaves::before { left: 12px; top: 12px; box-shadow: 12px 0 #fff, 12px -8px #fff, 24px 4px #fff, 36px 4px #fff, 190px 18px #fff, 202px 18px #fff, 214px 18px #fff, 202px 10px #fff, 226px 10px #fff; }
/* 卡片底色：未选中=深绿渐变，选中(悬浮/聚焦)=浅绿渐变 */
.tier { background: linear-gradient(180deg, #2f6b3a 0%, #1d4a2a 100%); color: #eaf6e4; transition: transform .08s, box-shadow .08s, background .25s, color .25s; }
.tier .t-pt, .tier .t-pt em { color: #f3fbee; }
.tier .t-stage { color: #b9efa8; }
.tier .t-coin { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #dcefd5; }
.tier .t-coin b, .tier .t-price b, .tier .t-go { color: #b9efa8; }
.tier .t-price { border-top-color: rgba(255,255,255,.28); }
.tier:hover, .tier:focus-visible { background: linear-gradient(180deg, #f1fbea 0%, #d3efc6 100%); color: var(--px-ink); }
.tier:hover .t-pt { color: var(--px-ink); }
.tier:hover .t-pt em { color: var(--px-ink-2); }
.tier:hover .t-stage, .tier:focus-visible .t-stage { color: var(--sp-accent); }
.tier:hover .t-coin { background: var(--sp-accent-soft); border-color: var(--px-line-soft); color: var(--px-ink-2); }
.tier:hover .t-coin b, .tier:hover .t-price b, .tier:hover .t-go { color: var(--sp-accent); }
.tier:hover .t-price { border-top-color: var(--px-line-soft); }
.tier:focus-visible .t-pt { color: var(--px-ink); }
/* 卡片渐变（明显、较浅；含深浅主题） */
.tier { background: linear-gradient(135deg, #7cc870 0%, #4fa352 55%, #2f8240 100%); }
.tier:hover, .tier:focus-visible { background: linear-gradient(135deg, #fbfff6 0%, #e2f6d6 50%, #c4ebb2 100%); }
html[data-theme="dark"] .tier { background: linear-gradient(135deg, #3d8a4c 0%, #276b38 55%, #17492a 100%); }
html[data-theme="dark"] .tier:hover, html[data-theme="dark"] .tier:focus-visible { background: linear-gradient(135deg, #b8ecA6 0%, #8fd57e 55%, #66bb5a 100%); color: #10301c; }
html[data-theme="dark"] .tier:hover .t-pt, html[data-theme="dark"] .tier:hover .t-pt em, html[data-theme="dark"] .tier:hover .t-stage, html[data-theme="dark"] .tier:hover .t-coin, html[data-theme="dark"] .tier:hover .t-coin b, html[data-theme="dark"] .tier:hover .t-price b, html[data-theme="dark"] .tier:hover .t-go { color: #10301c; }
html[data-theme="dark"] .tier:hover .t-coin { background: rgba(16,48,28,.12); border-color: rgba(16,48,28,.35); }
html[data-theme="dark"] .tier:hover .t-price { border-top-color: rgba(16,48,28,.35); }
.tier .t-stage, .tier .t-coin b, .tier .t-price b, .tier .t-go { color: #fff; }
.tier .t-coin { background: rgba(255,255,255,.2); }
.tier:hover .t-stage { color: #2a7a2c; }
.tier:hover .t-coin b, .tier:hover .t-price b, .tier:hover .t-go { color: #2a7a2c; }
/* 萤火虫 + 飘落叶片 */
.rc-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rc-ff { position: absolute; width: 4px; height: 4px; background: #ffe566; box-shadow: 0 0 0 2px rgba(255,229,102,.25), 0 0 10px 3px rgba(255,214,70,.55);
  animation: rcFfMove 8s ease-in-out infinite alternate, rcFfBlink 2.4s steps(2) infinite; }
@keyframes rcFfMove { 0% { transform: translate(0, 0); } 33% { transform: translate(28px, -22px); } 66% { transform: translate(-20px, -40px); } 100% { transform: translate(14px, -64px); } }
@keyframes rcFfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.rc-fl { position: absolute; top: -20px; width: calc(8px * var(--s, 1)); height: calc(8px * var(--s, 1)); background: var(--c, #5faf4e);
  clip-path: polygon(0 100%, 0 50%, 25% 25%, 50% 0, 100% 0, 100% 50%, 75% 75%, 50% 100%);
  animation: rcFall 14s linear infinite, rcSway2 3s ease-in-out infinite alternate; opacity: .85; }
@keyframes rcFall { to { top: 105%; } }
@keyframes rcSway2 { from { margin-left: -30px; transform: rotate(-35deg); } to { margin-left: 30px; transform: rotate(35deg); } }

.tier .t-leaves svg:nth-child(odd), .tier .t-leaves svg:nth-child(even), .tier:hover .t-leaves svg { transform: none !important; animation: none !important; }

/* 人工收款面板 */
.rc-man{display:grid;gap:12px;margin-top:10px}
.rc-man-amt{font-size:15px}.rc-man-amt b{font-size:28px;font-family:inherit}
.rc-man-qr{display:grid;place-items:center;min-height:200px;border:3px solid var(--rc-line,#2a3a22);background:#fff;padding:10px}
.rc-man-qr img{max-width:240px;width:100%;image-rendering:auto}
.rc-man-miss{padding:20px;text-align:center;color:#555;font-size:13px}
.rc-man-remark{padding:10px 12px;border:2px dashed currentColor;font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rc-man-remark code{font-weight:700;letter-spacing:.5px;user-select:all}
.rc-man-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.7;opacity:.85}
.rc-man-note{width:100%;box-sizing:border-box;padding:9px 10px;border:2px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:13px}
.rc-wait{text-align:center;padding:18px 10px;display:grid;gap:8px}.rc-wait-ic{font-size:34px}.rc-wait p{margin:0;font-size:13px;line-height:1.7;opacity:.85}

.rc-man-qr{position:relative;width:min(280px,100%);margin:6px auto 4px;padding:14px;background:#fff;border:4px solid #3f7d2c;box-shadow:6px 6px 0 rgba(31,60,22,.45);min-height:0}
.rc-man-qr[data-tab="wechat"]{border-color:#07a35a;box-shadow:6px 6px 0 rgba(7,120,60,.45)}
.rc-man-qr[data-tab="alipay"]{border-color:#1677ff;box-shadow:6px 6px 0 rgba(22,80,180,.45)}
.rc-man-qr img{display:block;width:100%;height:auto}
.rc-man-qr::before,.rc-man-qr::after{content:"";position:absolute;width:18px;height:18px;background:#5fb43e;border:3px solid #2f6a1e;image-rendering:pixelated}
.rc-man-qr::before{left:-12px;top:-12px}.rc-man-qr::after{right:-12px;bottom:-12px}
.rc-man-qr[data-tab="wechat"]::before,.rc-man-qr[data-tab="wechat"]::after{background:#3fd183;border-color:#07a35a}
.rc-man-qr[data-tab="alipay"]::before,.rc-man-qr[data-tab="alipay"]::after{background:#5aa2ff;border-color:#1677ff}
.rc-man-qr+.rc-man-remark{margin-top:6px}

.rc-or.is-open{cursor:pointer}.rc-or.is-open:hover{outline:3px solid #3f7d2c;outline-offset:-3px}.rc-open-hint{color:#3f7d2c;font-weight:700}

/* ===== v61 订单窗口精修 + 赞助须知可读性 ===== */
dialog#rcDlg{width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;border-color:#3f7d2c;background:linear-gradient(180deg,var(--px-surface),var(--px-surface) 70%,rgba(63,125,44,.10))}
.rc-man{gap:14px;margin-top:6px}
.rc-man-amt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border:2px solid var(--px-line);background:var(--sp-accent-soft,rgba(63,125,44,.14));font-size:13px;color:var(--px-ink-2)}
.rc-man-amt b{font-size:30px;line-height:1;color:var(--px-ink);font-variant-numeric:tabular-nums}
.rc-ch button{padding:11px 10px;letter-spacing:1px}
.rc-ch button:not([aria-pressed="true"]){opacity:.78}
.rc-man-qr{margin:14px auto 10px}
html[data-theme="dark"] .rc-man-qr{box-shadow:0 0 0 4px rgba(0,0,0,.35),6px 6px 0 rgba(0,0,0,.5)}
.rc-man-remark{display:grid;gap:8px;padding:12px 14px;border:2px dashed var(--px-line-soft,currentColor);background:rgba(63,125,44,.08);color:var(--px-ink-2);font-size:13px}
.rc-man-remark code{display:block;font-family:var(--font-mono,monospace);font-size:15px;letter-spacing:1px;color:var(--px-ink);padding:8px 10px;background:var(--px-surface-2);border:2px solid var(--px-line);word-break:break-all}
.rc-man-remark .btn{justify-self:start}
.rc-man-steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:8px;color:var(--px-ink-2);opacity:1}
.rc-man-steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.rc-man-steps li::before{content:counter(s);flex:none;width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--sp-accent,#3f7d2c);color:var(--sp-accent-ink,#fff);border:2px solid var(--px-line)}
.rc-man-note{background:var(--px-surface-2);color:var(--px-ink);border:2px solid var(--px-line)}
.rc-man-note::placeholder{color:var(--px-ink-3)}
.rc-man-note:focus{outline:3px solid var(--sp-accent-soft,rgba(63,125,44,.3));border-color:var(--sp-accent,#3f7d2c)}
#rcDlg .rc-count{text-align:center;color:var(--px-ink-3)}
#rcDlg .btn.primary{background:var(--sp-accent,#3f7d2c);color:var(--sp-accent-ink,#fff);border-color:var(--px-line)}
#rcClaim{flex:1 1 100%;padding:12px;font-size:15px}

/* 赞助须知：实底面板，盖住背景树林 */
.rc-terms{position:relative;z-index:2;background:var(--px-surface,#fff);border:3px solid var(--px-line);box-shadow:5px 5px 0 rgba(0,0,0,.18);padding:16px 20px;color:var(--px-ink)}
.rc-terms ul{color:var(--px-ink-2)}
.rc-terms li{color:var(--px-ink-2)}
.rc-terms summary{font-size:14px}
html[data-theme="light"] .rc-terms{background:#fbfaf3;color:#1f2a1c}
html[data-theme="light"] .rc-terms li,html[data-theme="light"] .rc-terms ul{color:#2f3a2b}
html[data-theme="light"] .rc-terms summary{color:#14210f}
html[data-theme="light"] .rc-terms b{color:#1f7a37}

dialog#rcConfirm{width:min(420px,calc(100vw - 24px));border:3px solid #3f7d2c;background:var(--px-surface);color:var(--px-ink);padding:0;box-shadow:8px 8px 0 rgba(0,0,0,.35)}
dialog#rcConfirm::backdrop{background:rgba(0,0,0,.55)}
.rc-cf{padding:20px 22px;display:grid;gap:12px}.rc-cf h3{margin:0;font-size:20px}
.rc-cf-box{display:grid;gap:6px;padding:12px 14px;border:2px solid var(--px-line);background:var(--px-surface-2)}
.rc-cf-box div{display:flex;justify-content:space-between;font-size:14px}.rc-cf-box span{color:var(--px-ink-3)}
.rc-cf p{margin:0;font-size:13px;line-height:1.65;color:var(--px-ink-2)}.rc-cf-warn{color:var(--px-ink-3)!important;font-size:12px!important}
.rc-cf-act{display:flex;gap:10px}.rc-cf-act .btn{flex:1;padding:11px}.rc-cf-act .primary{background:var(--sp-accent,#3f7d2c);color:var(--sp-accent-ink,#fff)}

/* 兑换白叶币 */
#pointsCard .rpx-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#pointsCard .rpx-form input { flex: 1 1 160px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border-glass); border-radius: 12px; background: transparent; color: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
#pointsCard .rpx-est { font-size: 13px; color: var(--text-muted); } #pointsCard .rpx-est b { color: var(--accent-blue); font-size: 17px; }
#pointsCard .rpx-tip { font-size: 12px; color: var(--text-muted); margin: 8px 0 10px; line-height: 1.6; }
#pointsCard .rpx-cancel { margin-left: 6px; padding: 3px 10px; font-size: 12px; }
#pointsCard .rpc-st.sky { background: rgba(56, 189, 248, .16); color: #38bdf8; }

/* ===== 自定义赞助金额（与档位卡同风格）===== */
.rc-custom { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 20px 28px; padding: 20px 24px; border: 3px solid var(--px-line); box-shadow: 5px 5px 0 var(--px-hard); color: #fff; background: linear-gradient(135deg, #7cc870 0%, #4fa352 55%, #2f8240 100%); position: relative; }
html[data-theme="dark"] .rc-custom { background: linear-gradient(135deg, #3d8a4c 0%, #276b38 55%, #17492a 100%); }
.rc-custom[hidden] { display: none; }
.rc-custom .cu-stage { font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.rc-custom h3 { margin: 6px 0 6px; font-family: var(--font-pixel); font-weight: 400; font-size: 26px; line-height: 1.15; -webkit-font-smoothing: none; }
.rc-custom .cu-head p { margin: 0; font-size: 13px; line-height: 1.6; opacity: .95; }
.rc-custom .cu-head b { font-weight: 800; }
.rc-custom .cu-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.rc-custom .cu-field { display: flex; align-items: center; gap: 8px; background: var(--px-surface); color: var(--px-ink); border: 3px solid var(--px-line); box-shadow: 3px 3px 0 var(--px-hard); padding: 0 14px; min-width: 0; }
.rc-custom .cu-field:focus-within { border-color: var(--sp-accent); outline: 3px solid var(--sp-accent); outline-offset: 2px; }
.rc-custom .cu-yen, .rc-custom .cu-unit { font-family: var(--font-pixel); font-size: 22px; color: var(--sp-accent); -webkit-font-smoothing: none; }
.rc-custom .cu-unit { font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--px-ink-2); }
.rc-custom input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font-family: var(--font-pixel); font-size: 30px; padding: 10px 0; -webkit-font-smoothing: none; }
.rc-custom input::placeholder { font-family: var(--font-body); font-size: 14px; color: var(--px-ink-3); }
.rc-custom .cu-go { font: inherit; font-weight: 800; font-size: 15px; padding: 0 26px; cursor: pointer; border: 3px solid var(--px-line); background: #fff; color: #2a7a2c; box-shadow: 3px 3px 0 var(--px-hard); transition: transform .08s, box-shadow .08s; }
.rc-custom .cu-go:hover:not([disabled]) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--px-hard); }
.rc-custom .cu-go:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--px-hard); }
.rc-custom .cu-go[disabled] { opacity: .55; cursor: not-allowed; }
.rc-custom .cu-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rc-custom .cu-preview { grid-column: 1 / -1; order: 3; font-size: 12.5px; background: rgba(255,255,255,.2); border: 2px dashed rgba(255,255,255,.45); padding: 6px 10px; }
.rc-custom .cu-preview b { font-weight: 800; }
.rc-custom .cu-err { font-weight: 800; color: #fff3b0; }
@media (max-width: 860px) { .rc-custom { grid-template-columns: 1fr; padding: 18px; } }
@media (max-width: 480px) { .rc-custom .cu-form { grid-template-columns: 1fr; } .rc-custom .cu-go { padding: 12px; } .rc-custom input { font-size: 26px; } }