/* Root demo wallet typography, scoped to the real recharge page. */
#info-page.deposit-page .wallet-balance-copy p {
  color: #8b8391;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
#info-page.deposit-page .wallet-usage h2 {
  color: #8a8490;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 14px;
}
#info-page.deposit-page .wallet-usage-item p {
  color: #847f8b;
  font-size: 14px;
  line-height: 1.6;
  margin: 3px 0 0;
}
#info-page.deposit-page .deposit-submit {
  font-size: 16px !important;
  line-height: 24px;
}
#info-page.deposit-page .deposit-submit:disabled {
  opacity: 1;
  cursor: not-allowed;
}
#info-page.deposit-page .deposit-selection {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 1.95;
  margin-top: 12px !important;
}
@media (max-width: 600px) {
  #info-page.deposit-page .wallet-balance-copy p { font-size: 12px; }
}

/* Recharge owns its component layout at every viewport; values come from the
   root demo's final shared-recharge rules, not its earlier wallet draft. */
#info-page.deposit-page{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:auto}
#info-page.deposit-page .deposit-breadcrumb,
#info-page.deposit-page .deposit-breadcrumb :is(a,span){font-size:16px;line-height:24px;font-weight:400}
#info-page.deposit-page .wallet-balance-card{margin-bottom:30px}
#info-page.deposit-page .deposit-section-heading{display:block;margin:0 0 18px}
#info-page.deposit-page .deposit-section-heading h2,
#info-page.deposit-page .deposit-transactions h2{display:block;font-size:20px;font-weight:700;line-height:30px;margin:0}
#info-page.deposit-page .deposit-packages-panel{display:block;box-sizing:border-box;width:100%;min-width:0;padding:26px 24px;border:1px solid #ffd39933;border-radius:24px;background:linear-gradient(150.751deg,#3228201a 0%,#16100b1a 50.05%,#3228201a 100%)}
#info-page.deposit-page .deposit-packages-panel header{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 24px}
#info-page.deposit-page .deposit-packages-panel header h2{font-size:16px;font-weight:500;line-height:22px;color:#ffddc4;margin:0;white-space:nowrap}
#info-page.deposit-page .deposit-packages-panel header p{display:flex;align-items:center;gap:12px;font-size:12px;line-height:18px;color:#ffddc44d;margin:0}
#info-page.deposit-page .deposit-packages-panel header p::before{content:"";height:10px;width:1px;flex:none;background:#ffffff1a}
#info-page.deposit-page .deposit-packages--coin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
/* 23px padding preserves the demo's 180px geometry while allowing long live
   content and optional original prices to grow without clipping. */
#info-page.deposit-page .deposit-package{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:180px;height:auto;padding:23px 12px;border:1px solid #ffd39933;border-radius:18px;overflow:visible;background:#ffffff0d;box-shadow:none;color:#fff;text-align:center;font:inherit}
#info-page.deposit-page .deposit-package:hover{border-color:#febf8b99;background:#ffffff12}
#info-page.deposit-page .deposit-package--active,
#info-page.deposit-page .deposit-package--active:hover{border-color:#febf8b;background:linear-gradient(180deg,#febe8b4d,#febe8b1a);box-shadow:inset 0 0 0 1px #febf8b}
#info-page.deposit-page .deposit-package:focus-visible{outline:2px solid #febf8b;outline-offset:3px}
#info-page.deposit-page .deposit-reference-coin{display:grid;width:32px;height:32px;flex:0 0 32px;box-sizing:border-box;box-shadow:inset 0 0 0 2px #ffd563}
#info-page.deposit-page .deposit-package-name{flex:none;order:0;font-size:16px;font-weight:400;line-height:22px;color:#fff;white-space:normal;overflow:visible;overflow-wrap:anywhere;max-width:100%;margin:0}
#info-page.deposit-page .deposit-package-bonus{flex:none;order:0;font-size:14px;font-weight:400;line-height:20px;color:#999;white-space:normal;overflow-wrap:anywhere;max-width:100%;margin:0}
#info-page.deposit-page .deposit-package-price{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
#info-page.deposit-page .deposit-package-price small{order:0;font-size:14px;line-height:18px;font-weight:400;color:#fff}
#info-page.deposit-page .deposit-price{flex:none;order:0;font-size:22px;font-weight:600;line-height:28px;color:#fff;margin:0}
#info-page.deposit-page .deposit-package del{order:0;font-size:12px;line-height:18px;color:#999}
#info-page.deposit-page .deposit-package-check{display:none;position:absolute;left:50%;right:auto;top:auto;bottom:-10px;transform:translateX(-50%);width:24px;height:24px;max-width:none;background:none;border:0;border-radius:0;z-index:2}
#info-page.deposit-page .deposit-package--active .deposit-package-check{display:block}
#info-page.deposit-page .deposit-purchase{margin:28px 0 38px;padding:0;text-align:center}
#info-page.deposit-page .deposit-purchase>.deposit-submit{width:420px;max-width:100%;min-width:0;min-height:0;height:52px;padding:14px 30px;border:0;font-weight:600}
#info-page.deposit-page .deposit-transactions{display:block;margin:0;padding:0;border:0}
#info-page.deposit-page .deposit-transactions h2{margin:0 0 18px}
#info-page.deposit-page .deposit-transactions>div{padding:0 22px;border:1px solid #ffffff10;border-radius:16px;overflow:hidden;background:#1a1a1b}
#info-page.deposit-page .deposit-transactions article{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border:0}
#info-page.deposit-page .deposit-transactions article+article{border-top:1px solid #ffffff0b}
#info-page.deposit-page .deposit-transactions strong{display:block;font-size:16px;font-weight:400;line-height:1.5;color:#e5e5e5}
#info-page.deposit-page .deposit-transactions time{display:block;margin-top:12px;font-size:14px;color:#85858b}
#info-page.deposit-page .deposit-transactions article>span{font-size:18px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
#info-page.deposit-page .deposit-tx-amount--plus{color:#00c780}
#info-page.deposit-page .deposit-tx-amount--minus{color:#ff3d43}
#info-page.deposit-page .deposit-footer{margin:38px 0 0;text-align:center;font-size:12px;line-height:1.95;color:#777}
#info-page.deposit-page .deposit-footer a{color:var(--accent)}
@media(max-width:760px){
 #info-page.deposit-page .deposit-breadcrumb,#info-page.deposit-page .deposit-breadcrumb :is(a,span){font-size:12px;line-height:19.2px}
 #info-page.deposit-page .deposit-packages-panel{padding:20px 12px}
 #info-page.deposit-page .deposit-packages-panel header{margin-bottom:18px}
 #info-page.deposit-page .deposit-packages--coin{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}
 #info-page.deposit-page .deposit-package{min-height:152px;padding:20px 4px;gap:8px}
 #info-page.deposit-page .deposit-reference-coin{width:24px;height:24px;flex-basis:24px}
 #info-page.deposit-page .deposit-package-name{font-size:14px;line-height:20px}
 #info-page.deposit-page .deposit-package-bonus{font-size:12px;line-height:18px}
 #info-page.deposit-page .deposit-price{font-size:18px;line-height:24px}
 #info-page.deposit-page .deposit-package-price small{font-size:12px}
}
@media(max-width:350px){
 #info-page.deposit-page .deposit-packages-panel{padding-left:10px;padding-right:10px}
 #info-page.deposit-page .deposit-packages--coin{column-gap:6px}
 #info-page.deposit-page .deposit-package-name{font-size:12px}
 #info-page.deposit-page .deposit-package-bonus{font-size:10px}
}

@media(max-width:600px){
 #info-page.deposit-page .deposit-transactions>div{padding:0 16px}
 #info-page.deposit-page .deposit-transactions article{padding:18px 0}
}

/* Recommendation is independent of selection and comes from package settings. */
#info-page.deposit-page .deposit-package-recommend{position:absolute;display:grid;place-items:center;right:-6px;top:-14px;width:46px;height:46px;transform:rotate(-8deg);pointer-events:none}
#info-page.deposit-page .deposit-package-recommend>img{position:absolute;width:37.0911px;height:37.0911px;max-width:none;transform:scale(1.24)}
#info-page.deposit-page .deposit-package-recommend>span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:18px;color:#fff}
@media(max-width:760px){
 #info-page.deposit-page .deposit-package-recommend{right:-4px;top:-10px;width:32px;height:32px}
 #info-page.deposit-page .deposit-package-recommend>img{transform:scale(.86)}
 #info-page.deposit-page .deposit-package-recommend>span{font-size:10px;line-height:16px}
}

/* Payment dialog: same reference surface, using the live available methods. */
body.deposit-layout .deposit-pay-dialog{width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:34px 32px;border:1px solid #ffffff28;border-radius:36px;background:#0e0e0f;box-shadow:0 24px 100px #0005;transform:none;color:#eee;font-family:"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.5;-webkit-font-smoothing:auto}
body.deposit-layout .deposit-pay-dialog::backdrop{background:#0008;backdrop-filter:blur(9px)}
body.deposit-layout .deposit-pay-surface{padding:0;border:0;border-radius:0;background:none;max-height:none;overflow:visible}
body.deposit-layout .deposit-pay-surface header{margin-bottom:20px}
body.deposit-layout .deposit-pay-dialog h2{font-size:24px;line-height:1.4;margin:0}
body.deposit-layout .deposit-pay-surface header>span{font-size:16px;color:#929292}
body.deposit-layout .deposit-pay-order{margin:0;gap:14px;padding:18px 16px;border:1px solid #ffffff0c;border-radius:20px;background:#1a1a1b}
body.deposit-layout .deposit-pay-order>div{display:grid;gap:12px;min-width:0}
body.deposit-layout .deposit-pay-order strong{font-size:20px;font-weight:400;line-height:1.4}
body.deposit-layout .deposit-pay-order p{margin:0;font-size:14px;line-height:1.5;color:#909090}
body.deposit-layout .deposit-pay-order small{font-size:12px;line-height:1.6;color:#bda578}
body.deposit-layout .deposit-pay-order .deposit-pay-amount{flex-shrink:0;display:grid;place-items:center;min-width:78px;padding:10px 16px;margin:0;background:#ffc00010;border-radius:999px;color:var(--accent);font-size:22px;font-weight:600}
body.deposit-layout .deposit-pay-surface h3{font-size:18px;line-height:1.5;margin:20px 0 18px}
body.deposit-layout .deposit-pay-dialog [data-deposit-pay-pc]{margin:0;gap:12px}
body.deposit-layout .deposit-pay-btn{min-height:66px;padding:14px 48px 14px 16px;border:1px solid #ffffff0d;border-radius:20px;background:#1a1a1b;color:#f5f5f5;font-size:16px;font-weight:500;line-height:24px}
body.deposit-layout .deposit-pay-btn:hover{border-color:#ffc00080}
body.deposit-layout .deposit-pay-btn--active,body.deposit-layout .deposit-pay-btn--active:hover{border-color:var(--accent)}
body.deposit-layout .deposit-pay-btn::after{background:#333}
body.deposit-layout .deposit-pay-btn--active::after{background:var(--accent)}
body.deposit-layout .deposit-pay-brand{flex:0 0 36px}
body.deposit-layout .deposit-pay-surface .deposit-submit{min-width:0;width:100%;height:50px;margin-top:18px;padding:0;border:0;border-radius:12px;background:var(--accent);font-size:18px;font-weight:500;line-height:27px}
body.deposit-layout .deposit-pay-dialog .deposit-pay-notice{font-size:12px;line-height:1.7;margin:18px 0 0;color:#858585}
body.deposit-layout .deposit-pay-dialog form{top:12px;right:16px;left:auto;width:24px;height:24px;margin:0}
body.deposit-layout .deposit-dialog-close{width:24px;height:24px;color:#eee}
body.deposit-layout .deposit-dialog-close svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:480px){
 body.deposit-layout .deposit-pay-dialog{padding:30px 24px;border-radius:28px}
 body.deposit-layout .deposit-pay-dialog h2{font-size:22px}
 body.deposit-layout .deposit-pay-surface header>span{font-size:14px}
}