.recharge-page{min-height:100vh;background:#02080d;color:#f7fbff}
.recharge-shop-shell{min-height:100vh}
.recharge-shop-main{min-height:100vh;padding:18px 24px 24px!important;overflow:hidden}
.recharge-hero{min-height:156px!important;margin-top:0!important;padding:24px 28px!important}
.recharge-hero h2{margin-top:9px!important;font-size:28px!important;letter-spacing:.4px!important}
.recharge-hero p{max-width:600px;margin-top:10px!important;color:#90a9b8!important;font-size:13px!important}
.recharge-alert{margin-top:14px;padding:12px 15px;border:1px solid rgba(0,234,255,.45);background:rgba(0,22,31,.82);color:#bce9f2;font-size:12px;line-height:1.45}
.recharge-alert[hidden]{display:none!important}
.recharge-alert.is-info{border-color:#00eaff;color:#00eaff}.recharge-alert.is-success{border-color:#00ff91;color:#00ff91}.recharge-alert.is-warning{border-color:#ffbd2e;color:#ffdb73}.recharge-alert.is-error{border-color:#ff416d;color:#ff7896}
.recharge-content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,34%);gap:22px;margin-top:16px;align-items:stretch;flex:1 1 auto}
.recharge-main{min-width:0;padding:9px 6px 0 4px}
.recharge-side{min-width:0;min-height:455px;padding:18px 14px;border:1px solid rgba(255,45,183,.64);background:linear-gradient(165deg,rgba(4,24,34,.88),rgba(1,10,16,.94));display:flex;flex-direction:column;overflow:hidden}
.recharge-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0;border:0}
.recharge-section-header h1{margin:9px 0 0;font-family:Orbitron,sans-serif;font-size:30px;line-height:1.1;letter-spacing:.7px;text-transform:uppercase}
.stripe-mode{flex:0 0 auto;margin-top:5px;padding:8px 11px;border:1px solid currentColor;font-size:9px;font-weight:900;letter-spacing:.1em}.stripe-mode.is-ready{color:#00ff91}.stripe-mode.is-missing{color:#ff416d}
.recharge-warning{width:min(100%,470px);margin-top:25px!important;border-color:rgba(255,197,43,.65)!important;background:rgba(48,35,2,.72)!important;color:#ffdc6c!important;box-shadow:0 0 0 4px rgba(255,189,46,.05)}
.recharge-explain{margin:78px 0 0!important;padding-top:14px;border-top:1px solid rgba(0,234,255,.25);color:#85a9b8;font-size:10px;line-height:1.5}
.topup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.topup-grid>.recharge-alert{grid-column:1/-1;margin-top:0}
.topup-card{position:relative;z-index:0;min-width:0;min-height:184px;padding:16px;display:flex;flex-direction:column;border:1px solid rgba(0,234,255,.45);background:linear-gradient(145deg,#071923,#02090f);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease}
.topup-card:hover{z-index:3;transform:translateY(-5px) scale(1.035);border-color:#00ff91;filter:brightness(1.12);box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 20px rgba(0,255,145,.2)}
.topup-card-topline{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.topup-card.is-offer{border:2px solid #ffd447!important;border-color:#ffd447!important;background:linear-gradient(145deg,rgba(54,39,4,.98),rgba(17,18,8,.98) 54%,#07131b)!important;box-shadow:0 0 17px rgba(255,202,55,.3),inset 0 0 24px rgba(255,190,30,.12)!important;animation:rechargeOfferPulse 1.8s ease-in-out infinite!important}
.topup-card.is-offer .topup-card-kicker{color:#ffd447!important;text-shadow:0 0 8px rgba(255,212,71,.5)}
.topup-card.is-offer .topup-points{color:#ffd447!important;text-shadow:0 0 9px rgba(255,212,71,.45)}
.topup-card.is-offer:hover{animation:rechargeOfferPulse 1.8s ease-in-out infinite;transform:translateY(-5px) scale(1.035);filter:brightness(1.15)}
@keyframes rechargeOfferPulse{0%,100%{box-shadow:0 0 13px rgba(255,202,55,.16),inset 0 0 20px rgba(255,190,30,.06)}50%{box-shadow:0 0 30px rgba(255,202,55,.48),inset 0 0 31px rgba(255,190,30,.14)}}
.offer-timer{min-width:74px;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-end;gap:6px;color:#ffd447;text-align:right}
.offer-timer span{font-size:7px;font-weight:900;letter-spacing:.1em;line-height:1}.offer-timer strong{font:900 var(--timer-size,24px)/.9 Orbitron,sans-serif;letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 8px rgba(255,212,71,.6)}
.topup-card-kicker{color:#00eaff;font-size:8px;font-weight:900;letter-spacing:.14em}.topup-card h3{margin-top:12px;color:#fff;font-family:Orbitron,sans-serif;font-size:13px;line-height:1.2}.topup-card p{margin-top:9px;min-height:30px;color:#85a9b8;font-size:10px;line-height:1.4}.topup-points{margin-top:auto;color:#00ff91;font:900 19px Orbitron,sans-serif;text-shadow:0 0 9px rgba(0,255,145,.45)}.topup-button{width:100%;min-width:0;height:36px;margin-top:12px}.topup-button span{font-size:var(--pay-text-size,7px)!important}.topup-button:disabled{opacity:.4;cursor:not-allowed}
.recharge-message{min-height:20px;margin-top:14px;color:#85a9b8;font-size:11px}.recharge-message.is-error{color:#ff7896}.recharge-message.is-info{color:#00eaff}
.recharge-side>.shop-kicker{display:block}.recharge-side h2{margin-top:8px;font-size:17px;letter-spacing:.06em}
.topup-history{min-height:0;flex:0 0 auto;max-height:360px;margin-top:18px;padding-right:4px;display:grid;grid-auto-rows:50px;align-content:start;gap:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#00eaff rgba(2,12,18,.88)}
.topup-history::-webkit-scrollbar{width:8px}.topup-history::-webkit-scrollbar-track{background:rgba(2,12,18,.88)}.topup-history::-webkit-scrollbar-thumb{background:#00eaff;border-radius:8px}
.empty-history{padding:24px 8px;color:#85a9b8;font-size:12px;text-align:center}
.history-row{height:50px;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(0,234,255,.4);background:rgba(0,13,21,.78)}
.history-row strong,.history-row small{display:block}.history-row strong{color:#fff;font-size:10px;line-height:1.2}.history-row small{margin-top:5px;color:#85a9b8;font-size:9px}.history-value{text-align:right}.history-value b{display:block;color:#00ff91;font:900 10px Orbitron,sans-serif}.history-status{display:inline-block;margin-top:5px;color:#85a9b8;font-size:8px;font-weight:900}.status-paid{color:#00ff91}.status-pending{color:#ffdb73}.status-failed,.status-expired{color:#ff7896}
.recharge-shop-main>.shop-footer{margin-top:auto!important}
@media(max-width:1180px){.recharge-content{grid-template-columns:minmax(0,1fr) 310px}.topup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.recharge-content{grid-template-columns:1fr}.recharge-side{min-height:330px}.recharge-main{padding-right:0}}
@media(max-width:700px){.recharge-shop-main{padding:14px 12px 20px!important}.recharge-hero{padding:20px!important}.recharge-section-header h1{font-size:24px}.recharge-explain{margin-top:48px!important}.topup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.recharge-section-header{align-items:stretch;flex-direction:column}.stripe-mode{align-self:flex-start}.topup-grid{grid-template-columns:1fr}.recharge-warning{width:100%}.recharge-explain{margin-top:32px!important}}