.referral-page { width: 100%; max-width: 1120px; margin-inline: auto; }
.referral-page > .panel, .referral-summary { margin-bottom: 20px; }
.referral-summary .section-head { align-items: center; flex-wrap: wrap; gap: 12px; }
.referral-balance { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.referral-share { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.referral-share .field { flex: 1 1 280px; min-width: 0; margin: 0; }
.referral-share input { width: 100%; min-width: 0; }
.referral-share button { flex-shrink: 0; }
.referral-record { padding: 18px 0; border-top: 1px solid var(--line, #ddd); overflow-wrap: anywhere; }
.referral-record:first-of-type { border-top: 0; }
.referral-record p { margin: 8px 0; }
.referral-page .referral-record .button { max-width: 100%; white-space: normal; height: auto; overflow-wrap: anywhere; }
.referral-milestone { padding: 8px 0 8px 14px; border-left: 3px solid var(--line, #ddd); margin: 12px 0; }
.referral-page select, .referral-page input { max-width: 100%; min-width: 0; }
@media (max-width: 600px) {
  .referral-share { flex-direction: column; align-items: stretch; }
  .referral-share .field { flex-basis: auto; width: 100%; }
  .referral-share button { width: 100%; white-space: normal; }
  .referral-page .field-grid { grid-template-columns: minmax(0, 1fr); }
}