.topup-progress { margin: 0 0 30px; }
.topup-step-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 18px; padding: 0; list-style: none; }
.topup-step > div,.topup-step > button { display: flex; align-items: center; gap: 13px; text-align: left; font: 600 14px/1.6 var(--font-body); color: var(--text-dim); }
.topup-step > button { background: none; cursor: pointer; }
.topup-step small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; margin-bottom: 2px; opacity: .6; }
.topup-step-number { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #ffffff06; color: var(--text-dim); font-size: 13px; }
.topup-step.is-current > div,.topup-step.is-done > button { color: var(--text); }
.topup-step.is-current .topup-step-number { color: #111; background: #eee; border-color: #fff9; box-shadow: 0 0 20px #ffffff0d; }
.topup-step.is-done .topup-step-number { color: var(--text); border-color: var(--line-strong); background: #ffffff14; }
.topup-progress-track { height: 3px; overflow: hidden; border-radius: 4px; background: #ffffff14; }
.topup-progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffffff70,#fff); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.topup-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.topup-stage-count { color: var(--text-dim); font: 500 12px/1.5 var(--font-mono); }
.topup-stage { animation: topupStageIn .36s cubic-bezier(.2,.8,.2,1) both; }
.topup-stage-title { margin: 0 0 24px; color: var(--text); font: 700 22px/1.4 var(--font-display); outline: none; }
.topup-page-card { scroll-margin-top: 96px; }
.topup-next,.topup-proceed { width: 100%; min-height: 50px; font-size: 13px; }
.topup-payment-intro { margin: 0 0 24px; color: var(--text-soft); font-size: 13px; line-height: 1.8; }
.topup-payment-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 22px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 20px; background: #0002; }
.topup-payment-amount > span { width: 100%; color: var(--text-dim); font-size: 11px; }
.topup-payment-amount strong { flex: 1; color: var(--text); font: 600 clamp(22px,3vw,32px)/1.5 var(--font-body); font-variant-numeric: tabular-nums; }
.topup-edit,.topup-back { padding: 0; border: 0; background: transparent; color: var(--text-soft); font: 500 12px/1.7 var(--font-body); cursor: pointer; transition: color .18s; }
.topup-edit { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.topup-edit:hover,.topup-back:hover { color: #fff; }
.topup-preview-notice { margin: 0 0 22px; color: var(--text-dim); font-size: 11px; line-height: 1.8; }
.topup-payment-status { margin-top: 18px; padding: 0; color: var(--text-dim); font-size: 12px; line-height: 1.8; }
.topup-payment-status > span,.topup-payment-status > small { display: block; }
.topup-payment-status > small { font-size: 11px; }
.topup-payment-status.loading,.topup-payment-status.unavailable { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff06; }
.topup-payment-status.loading > span,.topup-payment-status.unavailable > span { margin-bottom: 4px; color: var(--text-soft); font-weight: 600; }
.topup-spinner { width: 16px; height: 16px; flex: none; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: topupSpin .8s linear infinite; }
.topup-back { margin-top: 22px; }
.topup-step button:focus-visible,.topup-edit:focus-visible,.topup-back:focus-visible { outline: 2px solid var(--text-soft); outline-offset: 4px; border-radius: 5px; }
@keyframes topupStageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes topupSpin { to { transform: rotate(360deg); } }
/* A normal nav entry uses the site's existing link/active-dot treatment. */
@media(min-width:721px) and (max-width:1100px) { .nav { grid-template-columns: 1fr auto; gap: 10px; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } .nav-sheet { display: flex !important; } .nav-overlay { display: block !important; } }
@media(max-width:600px) { .topup-step-list { gap: 12px; } .topup-step > div,.topup-step > button { gap: 9px; font-size: 11px; } .topup-step-number { width: 33px; height: 33px; } .topup-stage-title { font-size: 19px; } .topup-payment-amount { padding: 18px; } .topup-edit { font-size: 11px; } }
@media(prefers-reduced-motion:reduce) { .topup-stage,.topup-spinner { animation: none !important; } .topup-progress-track > span { transition: none !important; } }