/* ==========================================================================
   Top Up Credits modal (dashboard.html) — glass redesign
   All IDs used by the payment code are unchanged; this file is styling only.
   ========================================================================== */
.tu-overlay {
  position: fixed; inset: 0; z-index: 100002; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(60% 50% at 50% 30%, rgba(255, 107, 0, .16), transparent 70%), rgba(3, 3, 7, .66);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tu-card {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px; border-radius: 26px; color: #c4c4d0; font-family: 'Inter', system-ui, sans-serif; box-sizing: border-box;
  background: linear-gradient(165deg, rgba(34, 34, 48, .96), rgba(16, 16, 24, .97));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: tuPop .45s cubic-bezier(.22, .9, .3, 1);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
@keyframes tuPop { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.tu-card h3 { color: #fff; margin: 0; }

/* header */
.tu-head { display: flex; align-items: center; gap: 12px; }
.tu-coin { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #1a1205;
  background: linear-gradient(135deg, #fde047, #f59e0b); box-shadow: 0 10px 26px rgba(245, 158, 11, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
.tu-coin svg { width: 24px; height: 24px; }
.tu-head-txt { flex: 1; min-width: 0; }
.tu-head-txt h3 { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.tu-sub { font-size: 12px; color: #9a9aab; margin-top: 2px; }
.tu-x { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #d4d4dc;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s ease, transform .3s ease; }
.tu-x:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); }

/* signed-in account */
.tu-account { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; padding: 10px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.tu-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #ff6b00, #ff9a3c); }
.tu-account-txt { flex: 1; min-width: 0; }
.tu-account-txt small { display: block; font-size: 10.5px; color: #80808f; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.tu-account-txt b { display: block; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-verified { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #4ade80;
  padding: 4px 8px; border-radius: 999px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .3); }

/* progress */
.tu-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 16px; padding: 0; }
.tu-step { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; color: #6f6f80;
  padding: 7px 4px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); transition: all .3s ease; }
.tu-step span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(255, 255, 255, .08); }
.tu-card[data-step="1"] .tu-step.s1, .tu-card[data-step="2"] .tu-step.s2, .tu-card[data-step="3"] .tu-step.s3 {
  color: #fff; background: rgba(255, 107, 0, .16); border-color: rgba(255, 107, 0, .45); }
.tu-card[data-step="1"] .tu-step.s1 span, .tu-card[data-step="2"] .tu-step.s2 span, .tu-card[data-step="3"] .tu-step.s3 span { background: #ff6b00; color: #fff; }
.tu-card[data-step="2"] .tu-step.s1, .tu-card[data-step="3"] .tu-step.s1, .tu-card[data-step="3"] .tu-step.s2 {
  color: #4ade80; background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .25); }
.tu-card[data-step="2"] .tu-step.s1 span, .tu-card[data-step="3"] .tu-step.s1 span, .tu-card[data-step="3"] .tu-step.s2 span { background: #22c55e; color: #04130a; }

.tu-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff9a3c; margin-bottom: 10px; }

/* packs */
#dash-credit-modal .tu-packs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin: 0 0 12px !important; }
#dash-credit-modal .tu-pack {
  position: relative; text-align: center; cursor: pointer; padding: 18px 8px 12px !important; border-radius: 18px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important;
  border: 1.5px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; color: #c4c4d0 !important;
  transition: transform .3s cubic-bezier(.22, .9, .3, 1), border-color .3s ease, background .3s ease, box-shadow .3s ease !important;
}
#dash-credit-modal .tu-pack:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22) !important; }
#dash-credit-modal .tu-pack:focus-visible { outline: 2px solid #ff9a3c; outline-offset: 2px; }
#dash-credit-modal .tu-pack.active {
  border-color: #ff9a3c !important;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 107, 0, .32), rgba(255, 107, 0, .06) 70%) !important;
  box-shadow: 0 14px 34px rgba(255, 107, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
#dash-credit-modal .tu-pack.active::after { content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: #ff6b00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; }
.tu-pack-num { font-size: 30px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.03em; }
.tu-pack-unit { font-size: 11px; color: #9a9aab; font-weight: 600; margin-top: 2px; }
.tu-pack-price { font-size: 15px; font-weight: 900; color: #fcd34d; margin-top: 8px; }
.tu-pack-runs { font-size: 10.5px; color: #80808f; margin-top: 2px; }
#dash-credit-modal .tu-badge { position: absolute !important; top: -9px !important; left: 50% !important; right: auto !important; transform: translateX(-50%);
  white-space: nowrap; font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px !important; border-radius: 999px !important; background: linear-gradient(90deg, #ff6b00, #ff9a3c) !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, .4); }
#dash-credit-modal .tu-badge-green { background: linear-gradient(90deg, #10b981, #34d399) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, .4); }

/* custom amount */
.tu-box { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); margin-bottom: 14px; }
.tu-box-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tu-box-title { font-size: 14px; font-weight: 800; color: #fff; }
.tu-box-sub { font-size: 11.5px; color: #80808f; margin-top: 2px; }
#dash-credit-modal .tu-stepper { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 4px; border-radius: 999px;
  background: rgba(0, 0, 0, .3) !important; border: 1px solid rgba(255, 255, 255, .1); }
#dash-credit-modal .tu-stepper .fampay-step-btn { width: 34px !important; height: 34px !important; border-radius: 50% !important; font-size: 18px !important; font-weight: 800;
  background: rgba(255, 255, 255, .1) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; cursor: pointer; padding: 0 !important; }
#dash-credit-modal .tu-stepper .fampay-step-btn:hover { background: rgba(255, 107, 0, .55) !important; }
#dash-credit-modal .tu-stepper .fampay-manual-input { width: 56px !important; height: 34px; text-align: center; font-size: 17px !important; font-weight: 900 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; padding: 0 !important; -moz-appearance: textfield; }
.tu-stepper input::-webkit-outer-spin-button, .tu-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tu-total { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.tu-total span { font-size: 13px; color: #9a9aab; font-weight: 600; }
.tu-total strong { font-size: 18px; font-weight: 900; color: #4ade80; }

/* buttons */
.tu-primary, .tu-secondary, .tu-ghost, .tu-amber {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  font-family: inherit; font-size: 14.5px; font-weight: 800; text-decoration: none; border: 0;
  transition: transform .25s cubic-bezier(.22, .9, .3, 1), box-shadow .25s ease, background .25s ease;
}
#dash-credit-modal .tu-primary { background: linear-gradient(135deg, #ff6b00, #ff9a3c) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 12px 30px rgba(255, 107, 0, .4) !important; }
#dash-credit-modal .tu-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255, 107, 0, .55) !important; }
.tu-primary:active, .tu-secondary:active, .tu-ghost:active { transform: scale(.98); }
.tu-primary[disabled], .tu-secondary[disabled], .tu-amber[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.tu-secondary { background: rgba(255, 255, 255, .07); color: #f4f4f6; border: 1px solid rgba(255, 255, 255, .14); }
.tu-secondary:hover { background: rgba(255, 255, 255, .12); }
.tu-ghost { width: auto; flex: 1; padding: 10px 12px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .06); color: #d4d4dc; border: 1px solid rgba(255, 255, 255, .12); }
.tu-ghost strong { color: #7dd3fc; font-weight: 800; }
.tu-ghost:hover { background: rgba(255, 255, 255, .1); }
.tu-amber { width: auto; padding: 0 16px; font-size: 13px; background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a1205; white-space: nowrap; }

.tu-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; font-size: 11.5px; color: #80808f; }
.tu-trust span { display: inline-flex; align-items: center; gap: 5px; }
.tu-trust svg { color: #4ade80; }

/* pay step */
.tu-loader { text-align: center; padding: 34px 10px; }
.tu-spinner { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: #ff9a3c; animation: tuSpin .8s linear infinite; }
@keyframes tuSpin { to { transform: rotate(360deg); } }
.tu-loader-title { font-size: 15px; font-weight: 800; color: #fff; }
.tu-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; margin-bottom: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.tu-summary-title { font-size: 14px; font-weight: 800; color: #fff; }
.tu-summary-id { font-size: 11px; color: #80808f; font-family: ui-monospace, Consolas, monospace; margin-top: 2px; word-break: break-all; }
.tu-summary-right { text-align: right; flex: none; }
.tu-summary-price { font-size: 24px; font-weight: 900; color: #4ade80; line-height: 1.1; }
#dash-credit-modal .tu-pill { display: inline-block; margin-top: 4px; font-size: 10px !important; font-weight: 800 !important; padding: 3px 8px !important; border-radius: 999px !important;
  background: rgba(34, 197, 94, .12) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, .3) !important; }

.tu-qr-stage { text-align: center; margin-bottom: 14px; }
#dash-credit-modal .tu-qr { position: relative; display: inline-block; padding: 14px !important; border-radius: 22px !important; background: #fff !important; border: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .06) !important; margin: 4px auto 0 !important; }
.tu-corner { position: absolute; width: 22px; height: 22px; border: 3px solid #ff6b00; }
.tu-corner.tl { top: -8px; left: -8px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.tu-corner.tr { top: -8px; right: -8px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.tu-corner.bl { bottom: -8px; left: -8px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.tu-corner.br { bottom: -8px; right: -8px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.tu-qr::after { content: ''; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff6b00, transparent); box-shadow: 0 0 12px #ff6b00; animation: tuScan 2.6s ease-in-out infinite; opacity: .75; }
@keyframes tuScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(218px); } }
.tu-qr-hint { margin-top: 16px; font-size: 13px; font-weight: 700; color: #fff; }
.tu-apps { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tu-apps span { font-size: 11px; font-weight: 700; color: #b9b9c6; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.tu-row2 { display: flex; gap: 8px; margin-bottom: 12px; }

#dash-credit-modal #fampay-status-badge { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px !important;
  border-radius: 999px !important; font-size: 13px !important; font-weight: 800 !important; box-sizing: border-box;
  background: rgba(34, 197, 94, .14) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, .35) !important; }
#dash-credit-modal #fampay-status-badge.waiting { background: rgba(56, 189, 248, .1) !important; color: #7dd3fc !important; border-color: rgba(56, 189, 248, .3) !important; }
.tu-note { font-size: 11.5px; color: #80808f; text-align: center; margin: 8px 0 14px; line-height: 1.5; }
.tu-actions { display: grid; gap: 8px; margin-bottom: 14px; }
.tu-mini-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #7dd3fc; border-top-color: transparent; animation: tuSpin .8s linear infinite; }

/* UTR fallback */
.tu-utr { border-radius: 18px; background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .28); overflow: hidden; }
.tu-utr summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.tu-utr summary::-webkit-details-marker { display: none; }
.tu-utr-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #1a1205; background: #fbbf24; }
.tu-utr-txt { flex: 1; min-width: 0; }
.tu-utr-txt b { display: block; font-size: 13px; color: #fcd34d; }
.tu-utr-txt small { font-size: 11.5px; color: #b9a77a; }
.tu-utr-chev { color: #fcd34d; transition: transform .3s ease; }
.tu-utr[open] .tu-utr-chev { transform: rotate(180deg); }
.tu-utr-body { padding: 0 14px 14px; }
.tu-utr-body p { font-size: 12px; color: #c9b98f; margin: 0 0 10px; line-height: 1.5; }
.tu-utr-form { display: flex; gap: 8px; }
#dash-credit-modal .tu-utr-form input { flex: 1; min-width: 0; padding: 11px 14px !important; font-family: ui-monospace, Consolas, monospace; font-size: 14px !important; letter-spacing: .06em;
  background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(251, 191, 36, .35) !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important; }
#dash-credit-modal .tu-utr-form input:focus { border-color: #fbbf24 !important; box-shadow: 0 0 0 4px rgba(251, 191, 36, .18) !important; outline: none; }
.tu-error { font-size: 11.5px; color: #fca5a5; margin-top: 8px; font-weight: 600; }
.tu-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; color: #6f6f80; }
.tu-link { background: none; border: 0; color: #d4d4dc; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 0; }
.tu-link:hover { color: #ff9a3c; }

/* result screens */
.tu-result { text-align: center; padding: 10px 4px 2px; }
.tu-result h3 { font-size: 21px; font-weight: 900; margin-bottom: 6px !important; }
.tu-result > p { font-size: 13px; color: #b9b9c6; margin: 0 0 14px; line-height: 1.55; }
.tu-result-ico { width: 72px; height: 72px; margin: 4px auto 16px; border-radius: 24px; display: grid; place-items: center; }
.tu-result-ico svg { width: 34px; height: 34px; }
.tu-result-ico.ok { color: #04130a; background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 14px 36px rgba(34, 197, 94, .4); }
.tu-result-ico.wait { color: #1a1205; background: linear-gradient(135deg, #fde047, #f59e0b); box-shadow: 0 14px 36px rgba(245, 158, 11, .4); }
.tu-result-ico.wait svg { animation: tuSpin 6s linear infinite; }
.tu-balance { padding: 12px; border-radius: 16px; margin-bottom: 14px; font-size: 13px; color: #b9b9c6; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.tu-balance strong { font-size: 18px; color: #ff9a3c; margin: 0 4px; }
.tu-receipt { text-align: left; padding: 6px 14px; border-radius: 16px; margin-bottom: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.tu-receipt > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.tu-receipt > div:last-child { border-bottom: 0; }
.tu-receipt span { color: #9a9aab; }
.tu-receipt strong { color: #fff; font-weight: 800; }
.tu-mono { font-family: ui-monospace, Consolas, monospace; }
#review-utr-display { color: #fcd34d !important; background: rgba(251, 191, 36, .12); padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(251, 191, 36, .3); }
.tu-cyan { color: #7dd3fc !important; }
.tu-green { color: #4ade80 !important; }
.tu-chip-wait { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px;
  color: #1a1205 !important; background: linear-gradient(90deg, #fde047, #f59e0b); }

@media (max-width: 420px) {
  .tu-card { padding: 16px; border-radius: 22px; }
  .tu-pack-num { font-size: 26px; }
  .tu-row2 { flex-direction: column; }
  .tu-verified { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tu-card, .tu-qr::after, .tu-spinner, .tu-result-ico.wait svg, .tu-mini-spin { animation: none !important; }
}

/* ---------- Compact amount entry (starts at 0) ---------- */
.tu-amount { text-align: center; padding: 16px 14px; }
.tu-amount .tu-box-title { display: block; font-size: 15px; }
#dash-credit-modal .tu-stepper-lg { justify-content: center; width: max-content; margin: 12px auto 4px !important; padding: 5px; }
#dash-credit-modal .tu-stepper-lg .fampay-step-btn { width: 42px !important; height: 42px !important; font-size: 20px !important; }
#dash-credit-modal .tu-stepper-lg .fampay-manual-input { width: 96px !important; height: 42px; font-size: 26px !important; }
#dash-credit-modal .tu-stepper-lg .fampay-manual-input::placeholder { color: rgba(255, 255, 255, .28) !important; }
.tu-bump { animation: tuBump .35s cubic-bezier(.22, .9, .3, 1); }
@keyframes tuBump { 40% { transform: scale(1.18); color: #ff9a3c; } }
.tu-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.tu-chips-label { font-size: 11px; color: #6f6f80; font-weight: 700; margin-right: 2px; }
.tu-chip { font-family: inherit; font-size: 12.5px; font-weight: 800; color: #f4f4f6; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.tu-chip:hover { background: rgba(255, 107, 0, .22); border-color: rgba(255, 154, 60, .55); transform: translateY(-1px); }
.tu-chip:active { transform: scale(.95); }
.tu-chip-clear { color: #9a9aab; background: transparent; }
.tu-amount .tu-total { text-align: left; }
#dash-credit-modal .tu-primary[disabled] { opacity: .45 !important; box-shadow: none !important; cursor: not-allowed; transform: none !important;
  background: rgba(255, 255, 255, .1) !important; }

/* ---------- Credit balance pill (dashboard top bar) ---------- */
.hx-dash .dash-credit-pill.cp {
  position: relative; display: inline-flex !important; align-items: center; gap: 9px; padding: 4px 4px 4px 5px !important;
  border-radius: 999px !important; cursor: pointer; font-family: inherit; color: #fff !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, .16), rgba(255, 107, 0, .1)) !important;
  border: 1px solid rgba(251, 191, 36, .4) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transition: transform .25s cubic-bezier(.22, .9, .3, 1), border-color .25s ease, box-shadow .25s ease !important;
}
.hx-dash .dash-credit-pill.cp:hover { transform: translateY(-1px); border-color: rgba(251, 191, 36, .75) !important; box-shadow: 0 10px 26px rgba(245, 158, 11, .25) !important; }
.hx-dash .dash-credit-pill.cp:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }
.cp-coin { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #1a1205;
  background: radial-gradient(circle at 35% 30%, #fff7c2, #fde047 35%, #f59e0b 80%); box-shadow: 0 3px 10px rgba(245, 158, 11, .45), inset 0 -2px 3px rgba(146, 64, 14, .35); }
.cp-coin svg { width: 17px; height: 17px; }
.cp-txt { display: inline-flex; align-items: baseline; gap: 5px; line-height: 1; }
.cp-txt b { font-size: 16px; font-weight: 900; color: #fcd34d; letter-spacing: -.01em; font-variant-numeric: tabular-nums; display: inline-block; }
.cp-txt small { font-size: 12px; font-weight: 700; color: #e5d5a8; }
.cp-add { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px 7px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ff6b00, #ff9a3c); box-shadow: 0 4px 12px rgba(255, 107, 0, .4); }
.cp-add em { font-style: normal; }
.cp-bump { animation: cpBump .5s cubic-bezier(.22, .9, .3, 1); }
@keyframes cpBump { 40% { transform: scale(1.35); color: #fff; } }
/* zero balance: gently invite a top up */
.hx-dash .dash-credit-pill.cp[data-state="empty"] { border-color: rgba(255, 107, 0, .6) !important; }
.hx-dash .dash-credit-pill.cp[data-state="empty"]::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid rgba(255, 154, 60, .6);
  animation: cpRing 2.2s ease-out infinite; pointer-events: none; }
@keyframes cpRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.hx-dash .dash-credit-pill.cp[data-state="empty"] .cp-txt b { color: #fdba74; }

@media (max-width: 560px) {
  .cp-add em, .cp-txt small { display: none; }
  .cp-add { padding: 7px; }
  .hx-dash .dash-credit-pill.cp { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-dash .dash-credit-pill.cp[data-state="empty"]::after, .cp-bump { animation: none !important; }
}