dialog.page-referral-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.page-referral-dialog p { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.page-referral-dialog [data-referral-status] { color: #526174; }
.page-referral-dialog [data-referral-status-kind="error"] { color: #b42318; }
.page-referral-rewards { padding: 12px; border-radius: 12px; background: #f6f2fa; }
.page-referral-field { display: flex; gap: 12px; align-items: end; margin: 18px 0; }
.page-referral-field label { flex: 1; min-width: 0; display: grid; gap: 6px; font-size: 16px; font-weight: 650; }
.page-referral-field input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; color: #17212f; background: #f8fafc; font: inherit; font-size: 16px; }
.page-referral-field button, .page-referral-actions button { min-height: 44px; padding: 9px 16px; border: 1px solid #cbd5e1; border-radius: 10px; color: #17212f; background: #fff; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; }
.page-referral-field button:disabled, .page-referral-actions button:disabled { opacity: .55; cursor: not-allowed; }
.page-referral-actions [data-referral-issue] { color: #fff; border-color: #1769d2; background: #1769d2; }
[data-registration-referral]:not([hidden]) { display: grid; gap: 8px; }
[data-registration-referral] [data-referral-clear] { justify-self: start; min-height: 44px; font-size: 16px; }
.page-referral-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
  .page-referral-field { display: grid; grid-template-columns: 1fr; align-items: start; }
  .page-referral-field button { justify-self: start; }
}