.vxReferralPage{--vxrf-line:#304258;--vxrf-bg:#121d2c;--vxrf-accent:#9976ff;max-width:1080px;margin:28px auto;padding:0 18px 60px;color:#e9effa;font-family:inherit}
.vxReferralPage *, .vxReferralOverlay *{box-sizing:border-box}
.vxReferralHero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.vxReferralHero h1{margin:4px 0;font-size:clamp(26px,3vw,36px);font-weight:750}
.vxReferralHero p{color:#aebdd1;margin:3px 0}
.vxReferralCard{border:1px solid var(--vxrf-line);background:linear-gradient(130deg,#172538,#0f1b2b);padding:22px;border-radius:16px;margin:0 0 18px;min-width:0}
.vxReferralStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.vxReferralStat{padding:20px;border:1px solid var(--vxrf-line);background:var(--vxrf-bg);border-radius:13px}
.vxReferralStat b{font-size:28px;display:block;color:#f2efff;font-variant-numeric:tabular-nums}
.vxReferralStat span,.vxReferralMuted{color:#adc0d5;font-size:13px}
.vxReferralTrack{height:10px;border-radius:100px;background:#2a3850;overflow:hidden;margin:15px 0 10px}
.vxReferralFill{height:100%;border-radius:100px;background:linear-gradient(90deg,#6f66ed,#ad78ff)}
.vxReferralCopy{display:flex;gap:10px;align-items:stretch}
.vxReferralCopy input{width:100%;flex:1;min-width:0;background:#0a1320;color:#e7eafd;padding:12px;border:1px solid var(--vxrf-line);border-radius:8px;font:inherit}
.vxReferralBtn{padding:12px 17px;border:1px solid #7a63de;background:#6152b8;color:white;border-radius:10px;cursor:pointer;font:inherit;white-space:normal}
.vxReferralBtn:hover{background:#7867d9}.vxReferralBtn:disabled{opacity:.55;cursor:wait}
.vxReferralBtnSecondary{background:#21334a;border-color:#536885}.vxReferralBtnSecondary:hover{background:#314761}
.vxReferralPage h2{font-size:20px;margin:0 0 12px}.vxReferralPage h3{font-size:16px}
.vxReferralTiers{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.vxReferralTier{border:1px solid var(--vxrf-line);background:#142135;border-radius:10px;padding:10px 15px;min-width:110px;text-align:center}
.vxReferralTier strong{display:block;font-size:18px}.vxReferralTier.is-current{border-color:#9778ef;background:#2a2451}
.vxReferralTable{width:100%;border-collapse:collapse}.vxReferralTable th,.vxReferralTable td{padding:12px 8px;border-bottom:1px solid var(--vxrf-line);text-align:left;word-break:break-word}.vxReferralTable td{font-size:14px}
.vxReferralOk{color:#85dab5}.vxReferralError{color:#ffacac;margin:10px 0}.vxReferralGiftGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.vxReferralGiftCard{border:1px solid #405571;background:#16263b;color:#e9effa;text-align:left;padding:18px;border-radius:14px;cursor:pointer;font:inherit;min-height:160px;display:flex;flex-direction:column;gap:9px}
.vxReferralGiftCard strong{font-size:17px}.vxReferralGiftCard span{color:#b4c5d9;font-size:13px;line-height:1.5}
.vxReferralGiftCard[aria-pressed="true"]{border:2px solid #a58aff;background:#30284c;padding:17px}
.vxReferralOverlay{position:fixed;inset:0;background:rgba(4,10,19,.83);display:flex;align-items:center;justify-content:center;z-index:2147483000;padding:18px;overflow:auto;color:#e9effa;font-family:system-ui,Arial,sans-serif}
.vxReferralOverlay[hidden]{display:none!important}.vxReferralDialog{max-width:840px;width:100%;background:#101b2b;border:1px solid #52627e;border-radius:20px;padding:22px;box-shadow:0 26px 90px #0008;max-height:94vh;overflow:auto}
.vxReferralDialog h2{font-size:25px;margin:4px 0 10px}.vxReferralDialog p{line-height:1.5;color:#b6c7db}
.vxReferralDialogHead{display:flex;align-items:center;justify-content:space-between;gap:14px}.vxReferralDialogHead button{background:transparent;color:#d3dfee;border:1px solid #54667b;border-radius:8px;font-size:24px;padding:3px 12px;cursor:pointer}
.vxReferralActionRow{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;align-items:center}
.vxReferralNotice{color:#aabbd0;font-size:12px;line-height:1.5;margin:12px 0}
.vxReferralAdminGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.vxReferralField{display:flex;flex-direction:column;gap:5px;color:#b5c9db;font-size:13px}.vxReferralField input{background:#0b1423;color:#fff;border:1px solid #526078;border-radius:8px;padding:10px;min-width:0}
.vxReferralField.check{flex-direction:row;gap:9px;align-items:center}.vxReferralField.check input{width:18px;height:18px}
.vxReferralAdminTiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media(max-width:750px){.vxReferralStats,.vxReferralGiftGrid{grid-template-columns:1fr}.vxReferralCopy{flex-direction:column}.vxReferralAdminGrid{grid-template-columns:1fr}.vxReferralAdminTiers{grid-template-columns:repeat(2,1fr)}.vxReferralDialog{padding:16px}.vxReferralGiftCard{min-height:unset}.vxReferralHero{align-items:flex-start}}

/* Backfill past referrals from the superadmin tool. */
.vxReferralLookupResults{display:grid;gap:5px;max-height:220px;overflow:auto;margin-top:6px}
.vxReferralLookupItem{display:block;width:100%;text-align:left;border:1px solid #354962;color:#eaf1ff;background:#18283b;border-radius:8px;padding:9px 11px;cursor:pointer;font-size:13px;line-height:1.4;word-break:break-word}
.vxReferralLookupItem:hover,.vxReferralLookupItem:focus-visible{background:#293d5c;border-color:#a48aff}
.vxReferralPicked{min-height:20px;color:#a7cbf1;font-size:12px;padding-top:6px;word-break:break-word}
#vx-ref-manual-form>.vxReferralField{margin:10px 0 14px}
#vx-ref-manual-result{color:#a7d8c9;font-size:13px;flex:1}