.account-menu { width: min(420px, calc(100vw - 24px)); }
.referral-section { display: grid; gap: 18px; padding: 22px 0 6px; }
.referral-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.referral-heading .section-label { margin: 0; letter-spacing: .08em; }
.referral-heading > span { color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.referral-intro { margin: -8px 0 0; color: var(--paper); font-size: 15px; line-height: 1.5; }
.referral-rewards { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 0; border-block: 1px solid var(--line); }
.referral-rewards > div { display: grid; gap: 4px; }
.referral-rewards > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.referral-rewards span, .referral-code-block > label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.referral-rewards strong { color: var(--cyan); font: 600 32px/1.1 var(--heading-type); }
.referral-rewards small { font: 600 13px var(--ui-type); }
.referral-code-block { display: grid; gap: 8px; margin: 0; }
.referral-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.referral-code-row input { min-width: 0; width: 100%; padding: 12px; font-size: 14px; }
#ownReferralCode { font-family: monospace; letter-spacing: .1em; color: var(--paper); }
.referral-code-row button { min-height: 44px; padding: 0 16px; background: var(--cyan); color: var(--ink); }
.referral-code-row button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.referral-code-block small, .referral-footnote { color: var(--muted); font-size: 12px; line-height: 1.5; }
.referral-footnote, .referral-section .menu-notice { margin: 0; }
.referral-section .menu-notice:empty { display: none; }
.referral-progress-card { display: grid; gap: 9px; padding: 15px; border: 1px solid var(--line); background: var(--ink); }
.referral-progress-card > strong { overflow-wrap: anywhere; font-size: 13px; }
.referral-progress-status { color: var(--cyan); font-size: 13px; }
.referral-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.referral-steps span { display: grid; place-items: center; height: 34px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.referral-steps .is-complete { color: var(--ink); border-color: var(--cyan); background: var(--cyan); font-weight: 900; }
.referral-invites summary { cursor: pointer; color: var(--paper); padding: 6px 0; font-size: 12px; font-weight: 600; }
#referralInviteList { display: grid; gap: 10px; margin-top: 10px; max-height: 320px; overflow-y: auto; }