.topup-page{--topup-border:#94a3b833;--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-actions{flex-wrap:wrap;gap:12px;display:flex}.topup-purchase-hint{color:var(--ds-color-primary-dark);margin:16px 0;font-size:1.05rem;font-weight:650;line-height:1.65}.topup-user-paths{background:#f8fafce0;border:1px solid #0f766e29;border-radius:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px;padding:5px;display:grid}.topup-user-path{color:#334155;border:1px solid #0000;border-radius:12px;align-items:center;gap:11px;min-width:0;min-height:66px;padding:12px 14px;text-decoration:none;transition:color .16s,background-color .16s,border-color .16s,box-shadow .16s;display:flex}.topup-user-path:hover{color:#047857;background:#0f766e0f;border-color:#0f766e33}.topup-user-path-current{color:#fff;background:linear-gradient(135deg,#059669,#047857);border-color:#0596695c;box-shadow:0 10px 24px #05966933}.topup-user-path-current:hover{color:#fff;background:linear-gradient(135deg,#047857,#065f46);border-color:#0596697a}.topup-user-path-icon{background:#0f766e14;border-radius:10px;flex:0 0 36px;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.topup-user-path-current .topup-user-path-icon{background:#ffffff26}.topup-user-path-copy{gap:3px;min-width:0;display:grid}.topup-user-path-copy small{letter-spacing:.02em;opacity:.78;font-size:.72rem;font-weight:650}.topup-user-path-copy strong{font-size:.95rem;line-height:1.25}.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-checkout-section{scroll-margin-top:96px}@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-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:641px) and (max-width:900px){.topup-inline-field>.ds-button.ds-button-primary{width:auto}}@media (max-width:480px){.topup-actions .ds-button{justify-content:center;width:100%}.topup-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.topup-user-paths{grid-template-columns:1fr}}html.dark .topup-page{--topup-border:#ffffff1a;--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-user-paths{background:#ffffff0a;border-color:#ffffff1a}html.dark .topup-user-path:not(.topup-user-path-current){color:var(--ds-color-text-secondary)}html.dark .topup-user-path:not(.topup-user-path-current):hover{color:var(--ds-color-primary-light);background:#ffffff0f}