.topup-page{--topup-surface:#ffffffd1;--topup-border:#94a3b833;--topup-ink:#0f172a;--topup-muted:#475569;--topup-board-shadow:0 28px 70px #0f172a1f;padding-bottom:var(--ds-space-12);position:relative}.topup-page:before{content:"";background:radial-gradient(circle at top left, rgba(var(--ds-color-primary-rgb), .12), transparent 34%), radial-gradient(circle at top right, rgba(var(--ds-color-primary-rgb), .12), transparent 28%), linear-gradient(180deg, #f8fafceb, #fff0);pointer-events:none;position:absolute;inset:0}.topup-page>*{z-index:1;position:relative}.topup-hero{margin-bottom:var(--ds-space-8);background:radial-gradient(circle at top left, rgba(var(--ds-color-primary-rgb), .12), transparent 36%), radial-gradient(circle at top right, rgba(var(--ds-color-primary-rgb), .14), transparent 30%), linear-gradient(145deg, #fffffff7, #f8fafceb);border:1px solid var(--topup-border);box-shadow:var(--topup-board-shadow);grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:clamp(20px,3vw,32px)}.topup-hero-content{gap:clamp(16px,2vw,22px)}.topup-brandline{font-size:var(--ds-text-sm);font-weight:var(--ds-font-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--ds-color-primary-dark);margin:-8px 0 0}.topup-pricing-badge{align-items:center;gap:var(--ds-space-2);border:1px solid rgba(var(--ds-color-primary-rgb), .24);border-radius:var(--admin-radius-pill);font-size:var(--ds-text-sm);color:var(--ds-color-primary-dark);font-weight:var(--ds-font-medium);background:linear-gradient(135deg,#fbf4ebf5,#fff7edf5);width:fit-content;padding:12px 16px;display:inline-flex;box-shadow:inset 0 1px #fffc}.topup-hero-pills{flex-wrap:wrap;gap:10px;display:flex}.topup-hero-pill{min-height:38px;color:var(--topup-muted);font-size:var(--ds-text-sm);font-weight:var(--ds-font-medium);-webkit-backdrop-filter:var(--ds-blur-sm);backdrop-filter:var(--ds-blur-sm);background:#ffffffb8;border:1px solid #94a3b838;border-radius:999px;align-items:center;padding:0 14px;display:inline-flex}.topup-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.topup-hero-stat{background:var(--topup-surface);border:1px solid #94a3b82e;border-radius:22px;flex-direction:column;gap:6px;padding:16px 18px;display:flex;box-shadow:0 10px 24px #0f172a0d}.topup-hero-stat:first-child{grid-column:span 2}.topup-hero-stat-label{font-size:var(--ds-text-xs);letter-spacing:.06em;text-transform:uppercase;color:#64748b}.topup-hero-stat-value{letter-spacing:-.03em;color:var(--topup-ink);font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.1}.topup-actions{flex-wrap:wrap;gap:12px;display:flex}.topup-welcome-card{margin:0 0 var(--ds-space-8);border-radius:var(--admin-radius-lg);background:linear-gradient(135deg, #fffffff0, #f8fafce6), radial-gradient(circle at 12% 16%, rgba(var(--ds-color-primary-rgb), .1), transparent 34%);border:1px solid #94a3b833;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,28px);padding:clamp(18px,3vw,26px);display:grid;position:relative;box-shadow:0 14px 36px #0f172a14}.topup-welcome-close{border-radius:var(--admin-radius-pill);color:#475569;background:#ffffffdb;border:1px solid #94a3b84d;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex;position:absolute;top:14px;right:14px}.topup-welcome-copy{align-content:start;gap:10px;padding-right:34px;display:grid}.topup-welcome-badge{border:1px solid rgba(var(--ds-color-primary-rgb), .24);border-radius:var(--admin-radius-pill);background:rgba(var(--ds-color-primary-rgb), .12);width:fit-content;min-height:32px;color:var(--ds-color-primary-dark);font-size:var(--ds-text-sm);align-items:center;gap:8px;padding:0 12px;font-weight:750;display:inline-flex}.topup-welcome-copy h2{color:var(--topup-ink);margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.2}.topup-welcome-copy p{color:var(--topup-muted);font-size:var(--ds-text-base);margin:0;line-height:1.7}.topup-welcome-body,.topup-welcome-choices,.topup-welcome-steps{gap:12px;display:grid}.topup-welcome-choice{border-radius:var(--admin-radius-lg);width:100%;min-height:84px;color:inherit;text-align:left;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;text-decoration:none;display:grid}.topup-welcome-choice-buy{border:1px solid rgba(var(--ds-color-primary-rgb), .24);background:linear-gradient(135deg, rgba(var(--ds-color-primary-rgb), .1), rgba(var(--ds-color-primary-rgb), .06))}.topup-welcome-choice-topup{border:1px solid rgba(var(--ds-color-primary-rgb), .28);background:linear-gradient(135deg, rgba(var(--ds-color-primary-rgb), .12), rgba(var(--ds-color-primary-rgb), .07));cursor:pointer}.topup-welcome-choice-icon{border-radius:var(--admin-radius-md);color:#fff;justify-content:center;align-items:center;width:46px;height:46px;display:inline-flex}.topup-welcome-choice-buy .topup-welcome-choice-icon{background:#047857}.topup-welcome-choice-topup .topup-welcome-choice-icon{color:#052e2b;background:#10b981}.topup-welcome-choice-copy{gap:4px;min-width:0;display:grid}.topup-welcome-choice-copy strong{color:var(--topup-ink)}.topup-welcome-choice-copy span,.topup-welcome-resource span span,.topup-welcome-step-copy span{color:var(--topup-muted);font-size:var(--ds-text-sm);line-height:1.55}.topup-welcome-resources{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.topup-welcome-resource{border-radius:var(--admin-radius-md);color:inherit;background:#f8fafcd1;border:1px solid #e2e8f0e6;align-items:flex-start;gap:10px;padding:12px 14px;text-decoration:none;display:flex}.topup-welcome-resource>svg{color:var(--ds-color-primary-dark);flex:none}.topup-welcome-resource span,.topup-welcome-step-copy{gap:2px;min-width:0;display:grid}.topup-welcome-resource strong,.topup-welcome-step-copy strong{color:var(--topup-ink);font-size:var(--ds-text-sm)}.topup-welcome-step{border-radius:var(--admin-radius-lg);background:#f8fafce0;border:1px solid #e2e8f0eb;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 15px;display:grid}.topup-welcome-step.is-current{background:rgba(var(--ds-color-primary-rgb), .1)}.topup-welcome-step-number{border-radius:var(--admin-radius-md);color:#334155;background:#e2e8f0;justify-content:center;align-items:center;width:34px;height:34px;font-weight:800;display:inline-flex}.topup-welcome-step.is-current .topup-welcome-step-number{color:#052e2b;background:#10b981}.topup-welcome-step>svg{color:#64748b}.topup-welcome-step.is-current>svg{color:var(--ds-color-primary-dark)}.topup-welcome-actions{grid-template-columns:auto minmax(0,1fr);gap:12px;display:grid}.topup-hint{max-width:56ch;font-size:var(--ds-text-sm);margin:0;line-height:1.7}.topup-policy-links{flex-wrap:wrap;gap:10px;display:flex}.topup-policy-link{border-radius:var(--admin-radius-pill);min-height:38px;color:var(--topup-ink);font-size:var(--ds-text-sm);font-weight:var(--ds-font-semibold);background:#ffffffb8;border:1px solid #94a3b82e;align-items:center;padding:0 14px;display:inline-flex}.topup-policy-note{max-width:560px;font-size:var(--ds-text-sm);line-height:var(--ds-leading-relaxed);margin:0}.topup-preview-board{background:radial-gradient(circle at 90% 8%, rgba(var(--ds-color-primary-rgb), .2), transparent 36%), linear-gradient(160deg, #0f172af5, #0d4b4de6 56%, #0f172af0 100%);color:#f8fafc;border-radius:20px;flex-direction:column;align-self:start;gap:12px;min-width:0;padding:clamp(16px,2vw,20px);display:flex;box-shadow:inset 0 1px #ffffff1a,0 16px 36px #0f172a29}.topup-preview-head{gap:6px;display:grid}.topup-preview-kicker{letter-spacing:.08em;text-transform:uppercase;color:#e2e8f0d1;margin-bottom:5px;font-size:.75rem;font-weight:700;display:inline-flex}.topup-preview-title{margin:0;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.22}.topup-preview-description{color:#e2e8f0d6;max-width:34ch;margin:0;font-size:.8rem;line-height:1.5}.topup-preview-metrics{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.topup-preview-metric{background:#ffffff14;border:1px solid #ffffff1f;border-radius:14px;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;display:flex}.topup-preview-metric span{color:#e2e8f0d1;font-size:.68rem}.topup-preview-metric strong{color:#fff;font-size:.9rem;line-height:1.2}.topup-token-ladder{background:linear-gradient(#fffffff5,#f0fdfae6);border:1px solid #0f766e2e;border-radius:18px;align-self:start;gap:14px;min-width:0;padding:clamp(16px,2vw,22px);display:grid;box-shadow:0 18px 42px #0f172a1a}.topup-token-ladder-head{gap:6px;display:grid}.topup-token-ladder-kicker{color:#047857;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:800}.topup-token-ladder-title{color:#0f172a;margin:0;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.18}.topup-token-ladder-description{color:#475569;font-size:var(--ds-text-sm);margin:0;line-height:1.65}.topup-token-ladder-rows{background:#0f766e1a;border:1px solid #0f766e1f;border-radius:12px;gap:2px;display:grid;overflow:hidden}.topup-token-ladder-row{background:#ffffffdb;grid-template-columns:minmax(86px,.75fr) minmax(0,1fr);align-items:center;gap:12px;min-height:56px;padding:10px 12px;display:grid}.topup-token-ladder-row strong{color:#047857;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.2}.topup-token-ladder-row span{color:#475569;font-size:var(--ds-text-sm);text-align:right;font-weight:750}.topup-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.topup-tier-card{min-height:104px;-webkit-backdrop-filter:var(--ds-blur-md);backdrop-filter:var(--ds-blur-md);background:linear-gradient(#0f172a9e,#0f172a6b);border:1px solid #ffffff24;border-radius:13px;flex-direction:column;gap:5px;padding:10px;display:flex;position:relative;box-shadow:0 12px 24px #0206171f}.topup-tier-card.is-bonus{background:radial-gradient(circle at top right, rgba(var(--ds-color-primary-rgb), .12), transparent 46%), linear-gradient(155deg, #0f172ab3 0%, #0478576b 100%)}.topup-tier-card.is-recommended{border-color:rgba(var(--ds-color-primary-rgb), .38);box-shadow:0 12px 28px #78350f1f, inset 0 0 0 1px rgba(var(--ds-color-primary-rgb), .16)}.topup-tier-card-custom{background:radial-gradient(circle at top right, rgba(var(--ds-color-primary-rgb), .14), transparent 42%), linear-gradient(155deg, #0f172ac7 0%, #04785761 100%);border-color:rgba(var(--ds-color-primary-rgb), .24)}.topup-tier-card-badges{flex-wrap:wrap;gap:4px;min-height:20px;display:flex}.topup-tier-badge{min-height:19px;font-size:.62rem;font-weight:var(--ds-font-bold);border-radius:var(--admin-radius-pill);justify-content:center;align-items:center;padding:1px 7px;display:inline-flex}.topup-tier-badge.recommended{color:#052e2b;background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.topup-tier-badge.gift{color:var(--ds-color-primary-light);background:rgba(var(--ds-color-primary-rgb), .12);border:1px solid #86efac2e}.topup-tier-badge.custom{color:#d1fae5;background:#10b9811f;border:1px solid #fcd34d38}.topup-tier-card-price{font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:var(--ds-font-bold);letter-spacing:-.03em;color:#fff}.topup-tier-card-total{font-size:.78rem;font-weight:var(--ds-font-semibold);color:#f0fdfaf5}.topup-tier-card-unit{color:#a7f3d0;width:fit-content;max-width:100%;min-height:22px;font-size:.66rem;font-weight:var(--ds-font-bold);background:#ffffff1a;border:1px solid #ffffff24;border-radius:999px;align-items:center;padding:0 8px;display:inline-flex}.topup-tier-card-formula{color:#e2e8f0b8;flex-wrap:wrap;align-items:center;gap:4px;margin-top:auto;font-size:.68rem;line-height:1.35;display:flex}.topup-tier-card-formula.is-plain{color:#e2e8f0ad}.topup-tier-card-plus{color:#e2e8f080}.topup-tier-card-bonus{background:linear-gradient(135deg, rgba(var(--ds-color-primary-rgb), .24), rgba(var(--ds-color-primary-rgb), .14));border:1px solid rgba(var(--ds-color-primary-rgb), .38);min-height:22px;box-shadow:inset 0 1px 0 #ffffff1f, 0 8px 18px rgba(var(--ds-color-primary-rgb), .14);font-weight:var(--ds-font-bold);color:#a7f3d0;border-radius:999px;align-items:center;padding:0 8px;display:inline-flex}.topup-tier-card-link{color:#ecfdf5;min-height:30px;font-size:.76rem;font-weight:var(--ds-font-semibold);background:#ffffff24;border:1px solid #ffffff29;border-radius:999px;justify-content:center;align-items:center;margin-top:4px;padding:0 10px;transition:transform .16s,background-color .16s,border-color .16s;display:inline-flex}.topup-tier-card-link:hover{background:#ffffff2e;border-color:#ffffff47;transform:translateY(-1px)}.topup-checkout-section{scroll-margin-top:96px}.token-pricing-panel{background:linear-gradient(#fffffff5,#f8fafceb);border:1px solid #0f766e29;border-radius:18px;gap:18px;padding:clamp(18px,3vw,26px);display:grid;box-shadow:0 18px 44px #0f172a14}.topup-token-pricing-panel{margin-bottom:16px}.token-pricing-head,.token-pricing-summary{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;display:grid}.token-pricing-head strong{color:#0f172a;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.2;display:block}.token-pricing-head p,.token-pricing-control p{color:#64748b;font-size:var(--ds-text-sm);margin:6px 0 0;line-height:1.65}.token-pricing-rate{text-align:right;gap:4px;min-width:168px;display:grid}.token-pricing-rate span,.token-pricing-summary dt{color:#64748b;font-size:var(--ds-text-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:700}.token-pricing-rate strong{color:#047857;font-size:clamp(1.15rem,2vw,1.65rem)}.token-pricing-control{gap:8px;display:grid}.token-pricing-control label{color:#0f172a;font-size:var(--ds-text-sm);font-weight:800}.token-pricing-input-row{background:#fff;border:1px solid #0f766e38;border-radius:14px;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:62px;display:grid;overflow:hidden}.token-pricing-input-row input{color:#0f172a;background:0 0;border:0;outline:none;width:100%;min-width:0;padding:0 18px;font-size:clamp(1.6rem,4vw,2.35rem);font-weight:850;line-height:1}.token-pricing-input-row span{color:#047857;font-size:var(--ds-text-sm);white-space:nowrap;padding:0 18px;font-weight:850}.token-pricing-slider{gap:10px;display:grid}.token-pricing-slider input[type=range]{accent-color:#059669;width:100%}.token-pricing-progress{background:#94a3b838;border-radius:999px;height:9px;overflow:hidden}.token-pricing-progress span{border-radius:inherit;background:linear-gradient(90deg,#10b981,#0f766e);height:100%;display:block}.token-pricing-markers{color:#64748b;height:1.1em;font-size:var(--ds-text-xs);font-weight:700;position:relative}.token-pricing-markers span{white-space:nowrap;position:absolute;top:0;transform:translate(-50%)}.token-pricing-markers span:last-child{transform:translate(-100%)}.token-pricing-control p.token-pricing-approx{color:#047857;font-size:var(--ds-text-sm);margin:0 0 2px;font-weight:800}.token-pricing-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.token-pricing-summary div{border-top:1px solid #94a3b833;min-width:0;padding-top:14px}.token-pricing-summary dd{color:#0f172a;margin:6px 0 0;font-size:clamp(1rem,1.7vw,1.25rem);font-weight:850;line-height:1.35}@media (max-width:1024px){.topup-hero{grid-template-columns:1fr}.topup-preview-description{max-width:none}.topup-preview-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:900px){.topup-hero{margin-bottom:var(--ds-space-6)}.topup-welcome-card{margin-bottom:var(--ds-space-6);grid-template-columns:1fr;gap:16px}.topup-welcome-copy{padding-right:38px}.topup-hero-stats{grid-template-columns:1fr}.topup-hero-stat:first-child{grid-column:span 1}.topup-preview-head{flex-direction:column;align-items:flex-start}.topup-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.token-pricing-head,.token-pricing-summary{grid-template-columns:1fr}.token-pricing-rate{text-align:left;min-width:0}.topup-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topup-policy-link{justify-content:center}}@media (max-width:480px){.topup-welcome-card{padding:16px}.topup-welcome-choice{grid-template-columns:auto minmax(0,1fr)}.topup-welcome-choice>svg{display:none}.topup-welcome-resources,.topup-welcome-actions{grid-template-columns:1fr}.topup-actions .ds-button,.topup-policy-link{justify-content:center;width:100%}.topup-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.topup-token-ladder-row{grid-template-columns:1fr;gap:4px}.topup-token-ladder-row span{text-align:left}.token-pricing-markers{font-size:.68rem}.topup-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topup-tier-card{border-radius:12px;gap:6px;min-height:120px;padding:12px}.topup-tier-card-price{font-size:1.15rem}.topup-tier-card-total{font-size:.82rem}.topup-tier-card-unit{min-height:24px;padding:0 8px;font-size:.68rem}.topup-tier-card-formula{font-size:.72rem}.topup-tier-card-bonus{min-height:24px;padding:0 8px;font-size:.68rem}}html.dark .topup-page{--topup-surface:#181c24d1;--topup-border:#ffffff1a;--topup-ink:var(--ds-color-text);--topup-muted:var(--ds-color-text-secondary);--topup-board-shadow:0 28px 70px #00000059}html.dark .topup-page:before{background:linear-gradient(#111318eb,#11131800)}html.dark .topup-hero{border-color:var(--topup-border);background:linear-gradient(145deg,#181c24f7,#141820eb)}html.dark .topup-brandline{color:var(--ds-color-primary-light)}html.dark .topup-welcome-card{background:linear-gradient(135deg,#181c24f2,#141820e6),radial-gradient(circle at 12% 16%,#2a8a6124,#0000 34%);border-color:#ffffff1a;box-shadow:0 16px 38px #00000047}html.dark .topup-welcome-close{color:var(--ds-color-text-secondary);background:#ffffff0f;border-color:#ffffff1f}html.dark .topup-welcome-badge{border-color:rgba(var(--ds-color-primary-rgb), .28);background:rgba(var(--ds-color-primary-rgb), .16);color:var(--ds-color-primary-light)}html.dark .topup-welcome-choice-buy{border-color:rgba(var(--ds-color-primary-rgb), .24);background:linear-gradient(135deg, rgba(var(--ds-color-primary-rgb), .16), rgba(var(--ds-color-primary-rgb), .08))}html.dark .topup-welcome-choice-topup{border-color:rgba(var(--ds-color-primary-rgb), .26);background:linear-gradient(135deg, rgba(var(--ds-color-primary-rgb), .16), rgba(var(--ds-color-primary-rgb), .09))}html.dark .topup-welcome-resource,html.dark .topup-welcome-step{background:#ffffff0e;border-color:#ffffff17}html.dark .topup-welcome-step.is-current{background:rgba(var(--ds-color-primary-rgb), .14)}html.dark .topup-welcome-step-number{color:var(--ds-color-text-secondary);background:#ffffff1f}html.dark .topup-pricing-badge{background:linear-gradient(135deg, rgba(var(--ds-color-primary-rgb), .14), #8ea3be1a);border-color:rgba(var(--ds-color-primary-rgb), .24);color:var(--ds-color-primary-light);box-shadow:inset 0 1px #ffffff0a}html.dark .topup-token-ladder,html.dark .token-pricing-panel{background:linear-gradient(#181c24f5,#141820eb);border-color:#ffffff1a;box-shadow:0 18px 44px #0000003d}html.dark .topup-token-ladder-title,html.dark .token-pricing-head strong,html.dark .token-pricing-control label,html.dark .token-pricing-input-row input,html.dark .token-pricing-summary dd{color:var(--ds-color-text)}html.dark .topup-token-ladder-description,html.dark .topup-token-ladder-row span,html.dark .token-pricing-head p,html.dark .token-pricing-control p,html.dark .token-pricing-rate span,html.dark .token-pricing-summary dt,html.dark .token-pricing-markers{color:var(--ds-color-text-secondary)}html.dark .token-pricing-control p.token-pricing-approx{color:var(--ds-color-primary-light)}html.dark .topup-token-ladder-row,html.dark .token-pricing-input-row{border-color:rgba(var(--ds-color-primary-rgb), .24);background:#ffffff0f}html.dark .topup-token-ladder-rows{background:#ffffff0a;border-color:#ffffff17}html.dark .token-pricing-summary div{border-top-color:#ffffff1a}html.dark .topup-hero-pill{color:var(--ds-color-text-secondary);-webkit-backdrop-filter:var(--ds-blur-sm);backdrop-filter:var(--ds-blur-sm);background:#ffffff0f;border-color:#ffffff1a}html.dark .topup-hero-stat{background:var(--topup-surface);border-color:#ffffff14;box-shadow:0 10px 24px #0003}html.dark .topup-hero-stat-label{color:var(--ds-color-text-tertiary)}html.dark .topup-hero-stat-value{color:var(--ds-color-text)}html.dark .topup-policy-link{color:var(--ds-color-text);background:#ffffff0f;border-color:#ffffff1a}html.dark .topup-policy-link:hover{background:#ffffff1a;border-color:#ffffff29}