.referral-page { width: 100%; max-width: 1280px; margin: 0 auto; container-type: inline-size; }
.referral-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.referral-page h3 { margin: 0; font-size: 17px; font-weight: 600; }
.referral-page p { color: var(--ui-text-muted); font-size: 14px; line-height: 1.8; margin: 10px 0 0; }
.referral-feedback { padding: 12px 0; color: var(--ui-text-muted); font-size: 14px; overflow-wrap: anywhere; }
.referral-feedback[data-error="true"] { color: var(--ui-danger); }
.referral-share, .referral-commission, .referral-records { padding: 24px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; }
.referral-binding { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ui-border); min-width: 0; }
.referral-binding h4 { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 500; }
.referral-binding-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.referral-binding-heading > span { font-size: 13px; color: var(--ui-text-muted); }
.referral-bind-controls { display: flex; gap: 10px; max-width: 540px; }
.referral-bind-controls input { flex: 1; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--ui-control-border); border-radius: 6px; background: var(--ui-surface-soft); color: var(--ui-text); font: inherit; font-size: 16px; }
.referral-bind-controls button { flex-shrink: 0; min-height: 42px; }
.referral-page #referralBindHelp { font-size: 13px; }
.referral-binding dl { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.referral-binding dl > div { min-width: 0; }
.referral-binding dt { font-size: 13px; color: var(--ui-text-muted); }
.referral-binding dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 500; }
.referral-page .referral-binding-status { color: var(--ui-primary); font-size: 14px; }
.referral-page .referral-binding-status[data-error="true"] { color: var(--ui-danger); }
.referral-binding-status:empty { display: none; }
.referral-share, .referral-commission { min-width: 0; display: flex; flex-direction: column; }
.referral-share .referral-metrics { margin-top: auto; }
.referral-share h3 strong { color: var(--ui-primary); font-weight: 600; }
.referral-share-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; margin: 20px 0; }
.referral-share-actions label { display: grid; gap: 8px; color: var(--ui-text-muted); font-size: 13px; }
.referral-share-actions input { width: 100%; min-width: 0; height: 42px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-soft) !important; font-size: 16px; font-weight: 600; letter-spacing: 1px; }
.referral-share-actions button { min-width: 102px; min-height: 42px; white-space: nowrap; }
.referral-copy-toast { position: fixed; top: max(82px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1200; max-width: calc(100vw - 32px); width: max-content; padding: 13px 20px; border-radius: 10px; background: var(--ui-text); color: var(--ui-surface); box-shadow: 0 8px 28px rgba(15,23,42,.18); font-size: 14px; line-height: 1.6; text-align: center; pointer-events: none; }
.referral-copy-toast[data-error="true"] { background: var(--ui-surface); color: var(--ui-danger); border: 1px solid var(--ui-danger); }
.referral-manual-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin-bottom: 20px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; }
.referral-manual-copy label { grid-column: 1 / -1; color: var(--ui-text-muted); font-size: 13px; }
.referral-manual-copy input { min-width: 0; width: 100%; padding: 10px; font-size: 16px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-text); background: var(--ui-surface); }
.referral-copy-close { color: var(--ui-text-muted); font-size: 13px; cursor: pointer; }
.referral-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--ui-border); }
.referral-metrics > div, .referral-wallet > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.referral-metrics span, .referral-wallet span { color: var(--ui-text-muted); font-size: 14px; }
.referral-metrics strong { font-size: 23px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.referral-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.referral-tiers > div { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 2px solid var(--ui-border); }
.referral-tiers span { font-size: 14px; color: var(--ui-text-muted); }
.referral-tiers strong { font-size: 24px; font-weight: 600; }
.referral-tiers .achieved { border-color: var(--ui-primary); }
.referral-tiers .achieved strong { color: var(--ui-primary); }
.referral-wallet { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.referral-wallet strong { font-size: 27px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.referral-wallet > div:first-child { flex: 1; }
.referral-wallet > div:first-child strong { color: var(--ui-primary); }
.referral-wallet > button { margin-left: auto; flex-shrink: 0; }
.referral-wallet-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.referral-wallet-details > div { display: grid; gap: 8px; min-width: 0; }
.referral-wallet-details span { color: var(--ui-text-muted); font-size: 13px; }
.referral-wallet-details strong { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.referral-page .referral-progress { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; margin-top: 20px; }
.referral-progress strong { color: var(--ui-text); font-weight: 500; }
.referral-rules { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ui-border); }
.referral-rules summary { width: max-content; color: var(--ui-text-muted); font-size: 13px; cursor: pointer; }
.referral-withdraw-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ui-border); }
.referral-withdraw-form > label { display: grid; gap: 8px; min-width: 0; color: var(--ui-text-muted); font-size: 14px; }
.referral-withdraw-form input:not([type="checkbox"]) { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--ui-control-border); border-radius: 5px; font-size: 16px; }
.referral-withdraw-form > p, .referral-withdraw-form > div, .referral-withdraw-form > .referral-confirm { grid-column: 1 / -1; }
.referral-withdraw-form > .referral-confirm { display: flex; align-items: center; gap: 8px; }
.referral-withdraw-form > div { display: flex; gap: 8px; }
.referral-records { margin-top: 16px; min-width: 0; }
.referral-records-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.referral-tabs { display: flex; gap: 16px; }
.referral-tabs button { padding: 8px 0; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ui-text-muted); font: inherit; font-size: 14px; cursor: pointer; }
.referral-tabs button[aria-pressed="true"] { border-bottom-color: var(--ui-primary); color: var(--ui-primary); }
.referral-page [data-records] { max-width: 100%; overflow-x: auto; }
.referral-page table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; white-space: nowrap; }
.referral-page :is(th, td) { padding: 14px 12px; border-bottom: 1px solid var(--ui-border); }
.referral-page th { font-weight: 500; color: var(--ui-text-muted); }
.referral-page .referral-empty { padding: 24px 0; margin: 0; text-align: center; }
.referral-empty span { display: block; margin-top: 6px; font-size: 13px; color: var(--ui-text-muted); }
.referral-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-size: 14px; color: var(--ui-text-muted); }
.referral-pagination > span:first-child { margin-right: auto; }
.referral-page [hidden] { display: none !important; }
@container (max-width: 850px) { .referral-overview { grid-template-columns: minmax(0, 1fr); } .referral-share .referral-metrics { margin-top: 0; } }
@container (max-width: 500px) {
  .referral-share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-share-actions label { grid-column: 1 / -1; }
  .referral-records-heading { display: grid; gap: 10px; }
  .referral-tabs { justify-content: space-between; gap: 12px; }
  .referral-page table { white-space: normal; }
  .referral-page thead { display: none; }
  .referral-page tbody, .referral-page tr { display: block; }
  .referral-page tr { padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
  .referral-page td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 6px 0; border: 0; overflow-wrap: anywhere; text-align: right; }
  .referral-page td::before { content: attr(data-label); color: var(--ui-text-muted); text-align: left; }
  .referral-pagination { justify-content: center; gap: 8px; }
  .referral-pagination > span:first-child { width: 100%; text-align: center; margin: 0; }
}
@media (max-width: 700px) {
  .referral-share, .referral-commission, .referral-records { padding: 18px; }
  .referral-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .referral-withdraw-form { grid-template-columns: minmax(0, 1fr); }
  .referral-share-actions label { width: 100%; }
  .referral-share-actions input { width: 100%; }
  .referral-share-actions button { flex: 1; }
}