/* Rameez Scripts — Buy Points page (body.page-buy-points). Plans moved to page-plans.css.
   Loaded in <head>; every rule here is body-class scoped to win on specificity. */

/* ===== Buy Points ===== */
/* colours = the shared dashboard tokens (--dx-*, styles.css); --bp-r = inner box corner, the portal's 14px */
body.page-buy-points { --bp-line: var(--dx-line); --bp-wash: var(--dx-wash); --bp-muted: var(--dx-sub); --bp-field: color-mix(in srgb, var(--dx-a) 18%, var(--gray-300, #cbd5e1)); --bp-r: var(--up-r-box, 14px); }
:where(body.page-buy-points) button { font: inherit; }

body.page-buy-points .bp-bal { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--bp-line); background: var(--bp-wash); color: var(--bp-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
body.page-buy-points .bp-bal i { color: var(--c-accent, #0074D9); }
body.page-buy-points .bp-bal b { font-size: 16px; color: var(--c-primary, #001f3f); }

body.page-buy-points .bp-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid; border-radius: var(--bp-r); font-size: 14px; line-height: 1.45; }
body.page-buy-points .bp-alert i { margin-top: 2px; }
body.page-buy-points .bp-alert.ok { background: color-mix(in srgb, var(--dx-ok) 8%, var(--dx-card)); border-color: color-mix(in srgb, var(--dx-ok) 30%, var(--dx-card)); color: var(--dx-ok); }
body.page-buy-points .bp-alert.err { background: color-mix(in srgb, var(--dx-bad) 7%, var(--dx-card)); border-color: color-mix(in srgb, var(--dx-bad) 28%, var(--dx-card)); color: var(--dx-bad); }
body.page-buy-points .bp-pending { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; background: color-mix(in srgb, var(--dx-warn) 9%, var(--dx-card)); border: 1px solid color-mix(in srgb, var(--dx-warn) 32%, var(--dx-card)); border-radius: var(--bp-r); color: var(--dx-warn); font-size: 14px; }
body.page-buy-points .bp-pending > span { flex: 1 1 220px; }
body.page-buy-points .bp-pending > span i { margin-right: 4px; }

/* steps */
body.page-buy-points .payment-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--dx-card); border: 1px solid var(--bp-line); margin-bottom: 16px; }
body.page-buy-points .step { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 8px; color: var(--bp-muted); font-size: 14px; font-weight: 600; }
body.page-buy-points .step + .step { border-left: 1px solid var(--bp-line); }
body.page-buy-points .step-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; background: var(--dx-row); color: var(--bp-muted); font-size: 13px; font-weight: 700; }
body.page-buy-points .step.active { color: var(--c-primary, #001f3f); }
body.page-buy-points .step.active .step-number { background: var(--dx-p); color: var(--c-on-primary, #fff); }
body.page-buy-points .step.completed .step-number { background: var(--dx-a); color: var(--c-on-accent, #fff); }

/* packages */
body.page-buy-points .points-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding-top: 8px; }
body.page-buy-points .points-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 44px; padding: 20px 10px 14px; background: var(--dx-card); border: 1px solid var(--bp-field); border-radius: var(--bp-r); color: inherit; cursor: pointer; text-align: center; touch-action: manipulation; transition: border-color .15s, background .15s; }
body.page-buy-points .points-card:hover { border-color: var(--c-accent, #0074D9); }
body.page-buy-points .points-card:focus-visible { outline: 2px solid var(--c-accent, #0074D9); outline-offset: 2px; }
body.page-buy-points .points-card.selected { border-color: var(--c-accent, #0074D9); background: var(--bp-wash); box-shadow: inset 0 0 0 1px var(--c-accent, #0074D9); }
body.page-buy-points .points-amount { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--c-primary, #001f3f); }
body.page-buy-points .points-label { font-size: 12.5px; font-weight: 600; color: var(--bp-muted); }
body.page-buy-points .points-price { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--c-accent, #0074D9); }
body.page-buy-points .points-per { font-size: 12px; color: var(--bp-muted); font-variant-numeric: tabular-nums; }
body.page-buy-points .points-best-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--dx-a); color: var(--c-on-accent, #fff); font-size: 11px; font-weight: 700; white-space: nowrap; }
body.page-buy-points #points-next-btn { width: 100%; min-height: 48px; margin-top: 16px; font-size: 15px; }
body.page-buy-points .cta-pulse { animation: bpPulse 1.2s ease-out 2; }
@keyframes bpPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb, 0,116,217), .45); } 100% { box-shadow: 0 0 0 12px rgba(var(--c-accent-rgb, 0,116,217), 0); } }

/* step 2: summary + method rows */
body.page-buy-points .selected-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bp-line); border-radius: var(--bp-r); background: var(--bp-wash); }
body.page-buy-points .summary-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-width: 0; }
body.page-buy-points .summary-item + .summary-item { border-left: 1px solid var(--bp-line); }
body.page-buy-points .summary-item span { font-size: 12.5px; font-weight: 600; color: var(--bp-muted); }
body.page-buy-points .summary-item b { font-size: 18px; color: var(--c-primary, #001f3f); overflow-wrap: anywhere; }
body.page-buy-points #selected-amount { color: var(--c-accent, #0074D9); }
body.page-buy-points .other-methods-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
body.page-buy-points .other-method-card-form { margin: 0; }
body.page-buy-points .other-method-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 60px; padding: 10px 14px; background: var(--dx-card); border: 1px solid var(--bp-field); color: var(--dx-ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .15s, background .15s; }
body.page-buy-points .other-method-btn:hover { border-color: var(--c-accent, #0074D9); background: var(--bp-wash); }
body.page-buy-points .other-method-btn:focus-visible { outline: 2px solid var(--c-accent, #0074D9); outline-offset: 2px; }
body.page-buy-points .other-method-btn:disabled { opacity: .75; cursor: default; }
body.page-buy-points .other-method-btn > span:first-child { display: inline-flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
body.page-buy-points .other-method-btn.pm-method-primary { border-color: var(--c-accent, #0074D9); background: var(--bp-wash); }
body.page-buy-points .pm-method-logo-wrap { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; }
body.page-buy-points .pm-method-logo-wrap img, body.page-buy-points .pm-method-logo-wrap .dp-method-logo { width: 28px; height: 28px; object-fit: contain; }
body.page-buy-points .pm-method-logo-wrap .dp-method-logo-fallback { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; font-size: 18px; color: var(--dx-a); background: var(--bp-wash); }
body.page-buy-points .pm-method-logo-wrap .dp-logo-cards { display: inline-flex; gap: 2px; font-size: 20px; }
body.page-buy-points .pm-method-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page-buy-points .pm-method-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
body.page-buy-points .pm-method-sub { font-size: 12.5px; color: var(--bp-muted); }
body.page-buy-points .pm-method-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--dx-a); color: var(--c-on-accent, #fff); font-size: 11px; font-weight: 700; }
body.page-buy-points .other-method-price { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--dx-chip-a); color: var(--dx-p); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; white-space: nowrap; }
body.page-buy-points .pm-method-primary .other-method-price { background: var(--dx-a); color: var(--c-on-accent, #fff); }
body.page-buy-points .pm-foot-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* pay modals — full page sheet on phones, centred panel on desktop */
body.page-buy-points :is(.paytm-overlay, .binance-overlay, .crypto-overlay) { display: none; position: fixed; inset: 0; z-index: 100000; align-items: flex-start; justify-content: center; padding: 32px 16px; background: color-mix(in srgb, var(--dx-p) 60%, transparent); overflow-y: auto; overscroll-behavior: contain; }
body.page-buy-points .pm-box { width: 100%; max-width: 920px; background: var(--dx-card); border-radius: var(--up-r, 20px); box-shadow: 0 20px 50px color-mix(in srgb, var(--dx-p) 30%, transparent); }
body.page-buy-points .pm-modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; background: var(--dx-p); color: var(--c-on-primary, #fff); border-radius: var(--up-r, 20px) var(--up-r, 20px) 0 0; }   /* sticky head carries the top corners — overflow on the box would break sticky */
body.page-buy-points .pm-modal-head b { display: flex; align-items: center; gap: 8px; font-size: 17px; }
body.page-buy-points .pm-modal-head small { display: block; font-size: 13px; opacity: .75; }
body.page-buy-points .pm-modal-head .pm-method-logo-wrap { background: var(--dx-card); width: 32px; height: 32px; border-radius: 10px; }
body.page-buy-points .pm-x { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-on-primary, #fff) 15%, transparent); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
body.page-buy-points .pm-x:hover { background: color-mix(in srgb, var(--c-on-primary, #fff) 25%, transparent); }
body.page-buy-points .pm-x:focus-visible { outline: 2px solid var(--c-on-primary, #fff); outline-offset: 2px; }
body.page-buy-points .pm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
body.page-buy-points .pm-left { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-right: 1px solid var(--bp-line); }
body.page-buy-points .pm-right { padding: 20px; min-width: 0; }
body.page-buy-points .pm-amt-box { text-align: center; }
body.page-buy-points .pm-amt { font-size: 34px; font-weight: 800; line-height: 1.15; color: var(--c-primary, #001f3f); overflow-wrap: anywhere; }
body.page-buy-points .pm-amt-box small { font-size: 12.5px; color: var(--bp-muted); }
body.page-buy-points .pm-qr { align-self: center; padding: 14px; background: var(--bp-wash); border: 1px dashed var(--bp-field); border-radius: var(--bp-r); text-align: center; }
body.page-buy-points .pm-qr img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; border-radius: 8px; }
body.page-buy-points .pm-qr span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--bp-muted); }
body.page-buy-points .pm-row { padding: 10px 12px; background: var(--bp-wash); border: 1px solid var(--bp-line); border-radius: var(--bp-r); }
body.page-buy-points .pm-row-l { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--bp-muted); }
body.page-buy-points .pm-row-v { display: flex; align-items: center; gap: 8px; }
body.page-buy-points .pm-row-v > span { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--c-primary, #001f3f); overflow-wrap: anywhere; }
body.page-buy-points .pm-row-v > span.mono { font-family: ui-monospace, 'Courier New', monospace; font-size: 14px; }
body.page-buy-points .pm-copy { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--bp-field); background: var(--dx-card); color: var(--dx-a); cursor: pointer; touch-action: manipulation; }
body.page-buy-points .pm-copy:hover { border-color: var(--c-accent, #0074D9); }
body.page-buy-points .pm-note { display: flex; gap: 8px; padding: 10px 12px; background: var(--bp-wash); border: 1px solid var(--bp-line); border-radius: var(--bp-r); color: var(--bp-muted); font-size: 13px; line-height: 1.5; }
body.page-buy-points .pm-note i { margin-top: 3px; flex-shrink: 0; }
body.page-buy-points .pm-note.warn { background: color-mix(in srgb, var(--dx-warn) 9%, var(--dx-card)); border-color: color-mix(in srgb, var(--dx-warn) 32%, var(--dx-card)); color: var(--dx-warn); }
body.page-buy-points .pm-holder { font-size: 13px; color: var(--bp-muted); }
body.page-buy-points .pm-holder i { color: var(--c-accent, #0074D9); margin-right: 4px; }
body.page-buy-points .pm-how { display: flex; gap: 8px; margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--dx-ink); }
body.page-buy-points .pm-how i { margin-top: 3px; color: var(--c-accent, #0074D9); flex-shrink: 0; }
body.page-buy-points .binance-pay-link { width: 100%; background: var(--c-primary, #001f3f); border-color: var(--c-primary, #001f3f); color: var(--c-on-primary, #fff); }
body.page-buy-points .binance-pay-link:hover { background: var(--c-primary-hover, #002a52); color: var(--c-on-primary, #fff); }
body.page-buy-points .crypto-wallet-picker { display: grid; gap: 8px; }
body.page-buy-points .crypto-wallet-opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; background: var(--dx-card); border: 1px solid var(--bp-field); border-radius: var(--bp-r); cursor: pointer; }
body.page-buy-points .crypto-wallet-opt:hover, body.page-buy-points .crypto-wallet-opt.active { border-color: var(--c-accent, #0074D9); background: var(--bp-wash); }
body.page-buy-points .crypto-wallet-opt input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--c-accent, #0074D9); }
body.page-buy-points .crypto-wallet-opt-name { font-size: 14px; font-weight: 700; color: var(--dx-ink); min-width: 0; overflow-wrap: anywhere; }
body.page-buy-points .crypto-wallet-opt-name i { color: var(--c-accent, #0074D9); margin-right: 2px; }
body.page-buy-points .crypto-wallet-opt-chain { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--bp-muted); }
body.page-buy-points .proof-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--dx-ink); }
body.page-buy-points .proof-label i { color: var(--c-accent, #0074D9); margin-right: 4px; }
body.page-buy-points .proof-field { margin-bottom: 14px; }
body.page-buy-points .proof-submit-btn { width: 100%; min-height: 48px; font-size: 15px; }
body.page-buy-points .proof-note { margin-top: 8px; text-align: center; font-size: 12px; color: var(--bp-muted); }

@media (prefers-reduced-motion: reduce) { body.page-buy-points .cta-pulse { animation: none; } }
@media (max-width: 768px) {
    body.page-buy-points .up-head-actions .bp-bal { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    body.page-buy-points .step { flex-direction: column; gap: 2px; min-height: 56px; font-size: 12.5px; }
    body.page-buy-points .points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.page-buy-points .points-card { padding: 18px 6px 12px; }
    body.page-buy-points .points-amount { font-size: 22px; }
    body.page-buy-points .pm-method-sub { font-size: 12px; }
    body.page-buy-points .pm-foot-actions { flex-direction: column; align-items: stretch; }
    body.page-buy-points .bp-pending .up-btn { flex: 1 1 100%; }
    body.page-buy-points :is(.paytm-overlay, .binance-overlay, .crypto-overlay) { padding: 0; background: var(--dx-card); }
    body.page-buy-points .pm-box { max-width: none; min-height: 100vh; min-height: 100dvh; border-radius: 0; box-shadow: none; }
    body.page-buy-points .pm-modal-head { border-radius: 0; }
    body.page-buy-points .pm-grid { grid-template-columns: 1fr; }
    body.page-buy-points .pm-left { border-right: 0; border-bottom: 1px solid var(--bp-line); padding: 16px; }
    body.page-buy-points .pm-right { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
    body.page-buy-points .pm-amt { font-size: 28px; }
    body.page-buy-points .pm-copy { width: 44px; height: 44px; }
}

/* account + how-to strip — answers "can I pay from here?" before a package is picked */
body.page-buy-points .bp-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
body.page-buy-points .bp-intro[hidden] { display: none; }
body.page-buy-points .bp-acct, body.page-buy-points .bp-how { min-width: 0; padding: 16px 18px; background: var(--c-card, #fff); border: 1px solid var(--bp-line); border-radius: var(--up-r, 16px); }
body.page-buy-points .bp-acct > b, body.page-buy-points .bp-how > b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--c-primary, #001f3f); }
body.page-buy-points .bp-acct > b i, body.page-buy-points .bp-how > b i { color: var(--c-accent, #0074D9); }
body.page-buy-points .bp-acct p { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--bp-muted); }
body.page-buy-points .bp-acct p strong { color: var(--c-primary, #001f3f); }
body.page-buy-points .bp-acct a { color: var(--dx-p); font-weight: 700; text-decoration: none; }
body.page-buy-points .bp-acct a:hover { color: var(--dx-a); }
body.page-buy-points .bp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-buy-points .bp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 4px 5px; border: 1px solid var(--bp-line); border-radius: 999px; background: var(--bp-wash); font-size: 13px; font-weight: 600; color: var(--c-primary, #001f3f); }
body.page-buy-points .bp-chip-logo { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--dx-card); border: 1px solid var(--bp-line); }
body.page-buy-points .bp-chip-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
body.page-buy-points .bp-chip-logo i { font-size: 12px; color: var(--c-accent, #0074D9); }
body.page-buy-points .bp-chip-logo .dp-method-logo, body.page-buy-points .bp-chip-logo .dp-method-logo-fallback { width: 100%; height: 100%; font-size: 12px; border-radius: 0; background: none; } /* the shared 36px tile would overflow the 28px circle */
body.page-buy-points .bp-chip small { font-size: 11px; font-weight: 700; color: var(--bp-muted); }
body.page-buy-points .bp-chip.instant small { color: var(--dx-ok); }
body.page-buy-points .bp-acct > small { display: block; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--bp-muted); }
body.page-buy-points .bp-how ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: bp; }
body.page-buy-points .bp-how li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; counter-increment: bp; }
body.page-buy-points .bp-how li::before { content: counter(bp); flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--dx-a); color: var(--c-on-accent, #fff); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
body.page-buy-points .bp-how li b { display: block; color: var(--c-primary, #001f3f); }
body.page-buy-points .bp-how li span { color: var(--bp-muted); }
@media (max-width: 768px) {
    body.page-buy-points .bp-intro { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
    body.page-buy-points .bp-acct, body.page-buy-points .bp-how { padding: 14px; }
}

/* proof form inside the pay sheets — sheets sit at body end (outside .main-content), so the portal field corners don't reach them */
body.page-buy-points .proof-input { border: 1px solid var(--bp-field); border-radius: var(--bp-r); background: var(--dx-card); color: var(--dx-ink); }
body.page-buy-points .proof-input:focus { border-color: var(--dx-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-a) 15%, transparent); }
/* receipt drop zone around the native file input — preview / remove / drag-drop from pmxProofUploadJs() */
body.page-buy-points .proof-upload { padding: 14px; border: 1.5px dashed var(--bp-field); border-radius: var(--bp-r); background: var(--bp-wash); transition: border-color .15s, background .15s; }
body.page-buy-points .proof-upload:hover { border-color: var(--dx-a); }
body.page-buy-points .proof-upload:focus-within { border-style: solid; border-color: var(--dx-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-a) 15%, transparent); }
body.page-buy-points .proof-upload.is-drag { border-color: var(--dx-a); background: var(--dx-chip-a); }
body.page-buy-points .proof-upload.has-file { border-style: solid; background: var(--dx-card); }
body.page-buy-points .proof-upload-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
body.page-buy-points .proof-upload.has-file .proof-upload-head { display: none; }
body.page-buy-points .proof-upload-ic { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bp-line); border-radius: 50%; background: var(--dx-card); color: var(--dx-a); font-size: 16px; }
body.page-buy-points .proof-upload-txt { min-width: 0; }
body.page-buy-points .proof-upload-txt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--dx-ink); }
body.page-buy-points .proof-upload-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--bp-muted); }
body.page-buy-points .proof-upload .file-input { border: 1px solid var(--bp-field); border-radius: 10px; background: var(--dx-card); }
body.page-buy-points .proof-upload .file-input::file-selector-button { margin: 5px 12px 5px 5px; padding: 9px 16px; border-radius: 999px; background: var(--dx-p); color: var(--c-on-primary, #fff); }
body.page-buy-points .proof-upload .file-input::file-selector-button:hover { background: var(--dx-a); color: var(--c-on-accent, #fff); }
body.page-buy-points .proof-upload-preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
body.page-buy-points .proof-upload-preview[hidden] { display: none; }
body.page-buy-points .proof-upload-preview img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border: 1px solid var(--bp-line); border-radius: 10px; background: var(--dx-card); }
body.page-buy-points .proof-upload-meta { flex: 1 1 auto; min-width: 0; }
body.page-buy-points .proof-upload-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--dx-ink); }
body.page-buy-points .proof-upload-size { display: block; font-size: 12px; color: var(--bp-muted); font-variant-numeric: tabular-nums; }
body.page-buy-points .proof-upload-clear { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--bp-line); border-radius: 999px; background: var(--dx-card); color: var(--bp-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
body.page-buy-points .proof-upload-clear:hover { border-color: color-mix(in srgb, var(--dx-bad) 40%, var(--dx-card)); color: var(--dx-bad); }
body.page-buy-points :is(.pm-copy, .crypto-wallet-opt, .proof-upload-clear, .bp-acct a, .bp-pending a):focus-visible { outline: 2px solid var(--dx-a); outline-offset: 2px; }
@media (max-width: 768px) {
    body.page-buy-points .proof-upload-clear { min-height: 44px; }
}