.recharge-workspace { max-width: 1120px; margin: 0 auto; color: #25323b; }
.recharge-footer-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:12px; max-width:1120px; margin:24px auto 0; padding-top:20px; border-top:1px solid #dde4e8; }
.recharge-footer-actions .recharge-footer-link { display:flex; align-items:center; justify-content:flex-start; gap:8px; box-sizing:border-box; min-height:44px; min-width:0; max-width:100%; margin:0; padding:10px 14px; border:1px solid #d7e0da; border-radius:6px; background:#fff; color:#315c49; font:inherit; font-size:13px; line-height:1.6; text-align:left; white-space:normal; cursor:pointer; }
.recharge-footer-actions .recharge-footer-link .ws-icon { width:18px; height:18px; flex:0 0 18px; }
.recharge-footer-actions .recharge-footer-link span { min-width:0; overflow-wrap:anywhere; }
.recharge-footer-actions .recharge-footer-link:hover { background:#eef5f1; border-color:#a9c4b5; }
.recharge-footer-actions .recharge-footer-link:focus-visible { outline:2px solid #43896e; outline-offset:3px; }
@media(max-width:600px) { .recharge-footer-actions { flex-direction:column; gap:10px; } .recharge-footer-actions .recharge-footer-link { width:100%; } }
.recharge-benefit { display:flex; align-items:center; gap:16px; padding:20px; margin:20px 0 0; background:#edf5ff; border-left:3px solid #3874bc; }
.recharge-benefit-icon { flex:0 0 40px; display:grid; place-items:center; color:#d52d43; }
.recharge-benefit-icon .ws-icon { width:28px; height:28px; }
.recharge-benefit>div { flex:1; min-width:0; }
.recharge-benefit strong { display:block; font-size:15px; line-height:1.5; }
.recharge-benefit p { margin:5px 0 0; font-size:13px; line-height:1.6; color:#526578; }
.recharge-benefit .membership-promo-link { display:inline-flex; width:auto; margin:0; flex-shrink:0; align-items:center; justify-content:center; gap:8px; padding:10px 14px; min-height:42px; border:1px solid #b5cceb; border-radius:6px; background:white; color:#245992; font-size:13px; cursor:pointer; }
@media(max-width:560px) { .recharge-benefit { flex-wrap:wrap; padding:16px; gap:12px; } .recharge-benefit>div { flex-basis:calc(100% - 52px); } .recharge-benefit .membership-promo-link { margin-left:52px; } }
.recharge-balance { display:flex; align-items:center; gap:16px; padding:22px 0 28px; border-bottom:1px solid #dde4e8; }
.recharge-wallet { width:44px; height:44px; display:grid; place-items:center; border-radius:8px; background:#eaf5ee; color:#176b4e; }
.recharge-wallet .ws-icon { width:24px; height:24px; }
.recharge-balance span { font-size:13px; }
.recharge-balance strong { display:block; margin-top:6px; font-size:28px; font-weight:600; }
.recharge-balance strong small { font-size:13px; font-weight:400; color:#677681; }
.recharge-balance button { margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
.recharge-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; padding-top:30px; }
.recharge-workspace h3 { font-size:17px; font-weight:600; margin:0 0 14px; }
.recharge-rate { color:#62727b; font-size:13px; margin:0 0 20px; }
.recharge-packages { border:0; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.recharge-packages legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.recharge-packages label { position:relative; display:flex; align-items:center; gap:10px; padding:18px; min-height:88px; border:1px solid #d7e0e6; border-radius:8px; background:white; cursor:pointer; }
.recharge-packages label:has(input:checked) { border-color:#176b4e; box-shadow:0 0 0 1px #176b4e; background:#f5faf7; }
.recharge-packages strong { display:block; font-size:19px; font-weight:600; overflow-wrap:anywhere; }
.recharge-packages small { display:block; margin-top:7px; font-size:12px; color:#64747f; }
.recharge-workspace input[type=radio], .payment-method-choice input { width:16px; height:16px; flex:0 0 16px; margin:0; accent-color:#176b4e; }
.recharge-custom { margin:0 0 28px; }
.recharge-custom label { display:block; font-size:13px; margin-bottom:9px; }
.recharge-custom input { width:100%; box-sizing:border-box; min-height:46px; border:1px solid #bdcbd4; border-radius:6px; padding:12px; font:inherit; background:#fff; }
.recharge-custom input:focus { outline:2px solid #80b29a; outline-offset:2px; }
.recharge-custom p { font-size:12px; color:#6a7984; margin:8px 0; }
.recharge-custom #recharge-error { color:#b33134; }
.recharge-methods label { display:flex; align-items:center; gap:10px; padding:16px 0; border-bottom:1px solid #e4e9ed; color:#687680; font-size:14px; }
.recharge-methods small { margin-left:auto; font-size:11px; }
.recharge-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:34px; padding-top:18px; border-top:1px solid #e0e7eb; }
.recharge-link { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; font:inherit; font-size:13px; color:#2c6e52; cursor:pointer; }
.recharge-link .ws-icon { width:16px; height:16px; flex:0 0 16px; }
.recharge-link:hover { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:480px) { .recharge-links { gap:12px; } .recharge-link { font-size:12px; } }
dialog.wechat-pay-dialog { width:min(420px,calc(100% - 32px)); padding:0; border:1px solid #dce5e0; border-radius:12px; color:#25332e; background:#fff; box-shadow:0 28px 90px #102b2938; }
.wechat-pay-dialog::backdrop { background:rgba(20,33,29,.58); backdrop-filter:blur(4px); }
.wechat-pay-dialog>section { margin:0; padding:0; }
.wechat-pay-dialog header { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid #e5ebe8; }
.wechat-pay-dialog header>span { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; color:#138357; background:#e9f7ef; }
.wechat-pay-dialog header p { margin:0 0 2px; color:#728078; font-size:10px; font-weight:650; letter-spacing:.08em; }
.wechat-pay-dialog header h2 { margin:0; font-size:19px; }
.wechat-pay-dialog header button { margin-left:auto; width:34px; height:34px; display:grid; place-items:center; border:1px solid #dce5e0; border-radius:7px; color:#607068; background:#fff; cursor:pointer; }
.wechat-pay-dialog .wechat-pay-body { display:flex; flex-direction:column; align-items:center; padding:26px 26px 22px; text-align:center; }
.wechat-pay-dialog .wechat-pay-body img { width:236px; height:236px; max-width:100%; border:10px solid #fff; box-shadow:0 0 0 1px #dfe7e3; border-radius:6px; image-rendering:pixelated; }
.wechat-pay-dialog .wechat-pay-body strong { margin-top:20px; font-size:26px; font-weight:650; }
.wechat-pay-dialog .wechat-pay-body p { margin:10px 0; max-width:320px; color:#566860; font-size:13px; line-height:1.7; }
.wechat-pay-dialog .wechat-pay-body small { color:#89948e; font-size:11px; overflow-wrap:anywhere; }
.wechat-pay-dialog footer { display:flex; justify-content:center; padding:14px 20px 18px; }
.wechat-pay-dialog footer button { min-width:130px; }
.wechat-pay-dialog.is-paid header>span { color:#fff; background:#168457; }
.wechat-pay-dialog.is-paid .wechat-pay-body { padding-block:38px; }
.wechat-pay-dialog.is-paid .wechat-pay-body p { color:#126543; font-size:15px; font-weight:600; }
.recharge-summary { padding-left:28px; border-left:1px solid #e0e7eb; }
.recharge-summary dl { margin:20px 0 26px; }
.recharge-summary dl>div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:13px 0; }
.recharge-summary dt { font-size:12px; color:#62727f; }
.recharge-summary dd { margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.recharge-summary button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; white-space:normal; }
.recharge-summary button:disabled { background:#e4e9e6; border:1px solid #dce4df; color:#687d71; opacity:1; cursor:not-allowed; }
.recharge-summary .recharge-availability { font-size:12px; line-height:1.7; color:#697984; margin-top:16px; }
.payment-method-choice { border:0; padding:0; margin:20px 0; display:flex; gap:12px; flex-wrap:wrap; }
.payment-method-choice legend { font-size:13px; font-weight:600; margin-bottom:10px; }
.payment-method-choice label { display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid #d5dfe5; border-radius:6px; font-size:13px; cursor:pointer; }
.payment-method-choice label:has(input:checked) { border-color:#176b4e; background:#f0f8f3; }
.payment-online-status { background:#f5f7fa; padding:14px; border:1px solid #e0e6ec; border-radius:6px; font-size:13px; line-height:1.7; }
@media(max-width:800px) { .recharge-layout { grid-template-columns:1fr; gap:28px; } .recharge-summary { border-left:0; border-top:1px solid #e0e7eb; padding:24px 0 0; } }
@media(max-width:480px) { .recharge-balance { flex-wrap:wrap; } .recharge-balance strong { font-size:24px; } .recharge-balance button { margin-left:60px; } .recharge-packages { grid-template-columns:1fr; } .recharge-packages label { padding:14px; min-height:76px; } .recharge-packages strong { font-size:17px; } }