/* /account/sponsor (templates/account_sponsor.html, sponsor.go). Builds on account-recovery.css and wax-site.css. */
/* Class and id names say "referral", never "sponsor": ad blockers hide generic "sponsor" names (EasyList ##.sponsor-block
   hid the whole page body for players, 2026-10-24). TestNoAdBlockerBaitNames keeps them out of the website. */
.referral-main { width: min(640px, calc(100% - 48px)); }
.referral-block { margin: 0 0 22px; padding-top: 20px; border-top: 1px solid var(--wx-line-2); }
.referral-block h2 { margin: 0 0 10px; font: 700 16px/1.4 var(--wx-font); }
.referral-block p { margin: 0 0 12px; color: var(--wx-text-2); font-size: 14.5px; line-height: 1.65; }
.referral-block strong { color: var(--wx-text); }
.referral-code { display: flex; }
.referral-code strong { padding: 8px 16px; border: 1px solid var(--wx-teal-line); border-radius: var(--wx-radius-sm); background: var(--wx-teal-bg); color: var(--wx-teal-hi); font: 700 20px/1.3 var(--wx-font); letter-spacing: 0.02em; overflow-wrap: anywhere; user-select: all; }
.referral-invite a { color: var(--wx-teal-hi); font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.referral-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.referral-stats div { padding: 12px 14px; border: 1px solid var(--wx-line-2); border-radius: var(--wx-radius-sm); background: var(--wx-sunken); }
.referral-stats dt { color: var(--wx-muted); font-size: 12.5px; }
.referral-stats dd { margin: 4px 0 0; color: var(--wx-text); font: 700 22px/1.2 var(--wx-font); font-variant-numeric: tabular-nums; }
.referral-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.referral-list li { padding: 3px 10px; border: 1px solid var(--wx-line-2); border-radius: 999px; color: var(--wx-text-2); font-size: 13px; }
.referral-confirm { display: flex; gap: 10px; align-items: flex-start; color: var(--wx-text-2); font-size: 13.5px; line-height: 1.55; }
.referral-confirm input { margin-top: 3px; }
#referral-done { border: 1px solid var(--wx-teal-line); background: var(--wx-teal-bg); color: var(--wx-text); }
@media (max-width: 560px) {
  .referral-main { width: calc(100% - 28px); }
}