.referral-layout { padding-block: 44px 70px; }
.referral-layout [hidden] { display: none !important; }
.referral-layout button:disabled, .referral-layout fieldset:disabled button { opacity: .55; cursor: not-allowed; }
.referral-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; padding-block: 30px 55px; }
.referral-hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.12; margin-block: 18px; }
.referral-hero h1 span { color: #257253; }
.referral-rate { border-radius: 28px; background: #dcefe4; padding: 38px 24px; text-align: center; border: 1px solid #bad8c8; }
.referral-rate strong { color: #18583e; font-size: clamp(5rem, 10vw, 8.5rem); line-height: 1.1; letter-spacing: -.065em; }
.referral-rate strong span { font-size: .55em; }
.referral-rate p { color: #315a47; }
.referral-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 24px; }
.referral-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.referral-stats article { border: 1px solid #dce3dc; background: #fff; border-radius: 16px; padding: 22px; min-width: 0; }
.referral-stats span { color: #5d6d61; font-size: .88rem; }
.referral-stats strong { display: block; font-size: clamp(1.2rem, 2.2vw, 1.8rem); margin-block-start: 12px; overflow-wrap: anywhere; }
.referral-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block: 24px; }
.referral-layout .registration-card { width: auto; min-width: 0; padding: clamp(20px, 3vw, 32px); }
.referral-layout input { width: 100%; box-sizing: border-box; }
.referral-layout label { display: block; margin-block: 16px 7px; }
.referral-layout fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.referral-layout button { margin-block-start: 12px; white-space: normal; }
.referral-records { margin-block: 20px; }
.referral-table { overflow-x: auto; }
.referral-table table { border-collapse: collapse; width: 100%; text-align: start; font-size: .9rem; }
.referral-table th, .referral-table td { text-align: start; padding: 14px 10px; border-bottom: 1px solid #e3e8e1; }
.referral-pagination { display: flex; gap: 16px; justify-content: flex-end; align-items: center; }
.referral-withdrawal { border-bottom: 1px solid #e3e8e1; padding-block: 16px; overflow-wrap: anywhere; }
.referral-withdrawal p { margin-block: 6px; }
.referral-rules { margin-block-start: 55px; }
.referral-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block: 28px; }
.referral-rule-grid article { border-inline-start: 2px solid #93bba2; padding-inline-start: 20px; }
.referral-rule-grid p { line-height: 1.8; color: #5d6d61; }
#referral-feedback, #withdrawal-feedback { overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .referral-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-hero { gap: 20px; }
  .referral-columns, .referral-rule-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .referral-hero { grid-template-columns: 1fr; }
  .referral-rate { padding: 20px; }
  .referral-stats article { padding: 16px; }
  .referral-layout { padding-block-start: 16px; }
}