.s-referral-live .s-invite-share-content { align-items: stretch; }
.s-referral-code-box {
  min-height: calc(190 * var(--v));
  border-radius: calc(16 * var(--v));
  background: #fff;
  border: 1px solid #d9dfea;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(10 * var(--v));
  color: #5d6680;
  text-align: center;
}
.s-referral-code-box strong { color: #111b4d; font-size: max(16px, calc(50 * var(--v))); letter-spacing: .04em; }
.s-referral-code-box button,
.s-referral-copy {
  border: 0;
  border-radius: calc(10 * var(--v));
  background: #ffc72c;
  color: #24200f;
  font-weight: 800;
  padding: calc(9 * var(--v)) calc(16 * var(--v));
}
.s-share-links p { margin-top: calc(14 * var(--v)); color: #777; line-height: 1.45; font-size: max(9px, calc(26 * var(--v))); }
.s-referral-goal strong { color: #ffd07c; }
.s-referral-phase-note {
  margin: calc(26 * var(--v)) 0;
  padding: calc(22 * var(--v));
  border-radius: calc(14 * var(--v));
  background: #fff6da;
  color: #69551a;
  display: grid;
  gap: calc(8 * var(--v));
  line-height: 1.45;
}
.s-referral-phase-note strong { color: #9a6f00; }
.s-referral-loading,
.s-referral-empty { min-height: calc(340 * var(--v)); display: grid; place-content: center; justify-items: center; text-align: center; gap: calc(14 * var(--v)); color: #777; padding: calc(30 * var(--v)); }
.s-referral-loading span { width: calc(54 * var(--v)); height: calc(54 * var(--v)); min-width: 22px; min-height: 22px; border: 3px solid #e5e5e5; border-top-color: #ffbd00; border-radius: 50%; animation: s-referral-spin .8s linear infinite; }
@keyframes s-referral-spin { to { transform: rotate(360deg); } }
.s-referral-error { margin: 0 0 calc(18 * var(--v)); padding: calc(14 * var(--v)); border-radius: calc(10 * var(--v)); background: #fff0f0; color: #c52c36; }
.s-referral-list { display: grid; gap: calc(10 * var(--v)); padding: calc(20 * var(--v)) calc(28 * var(--v)); }
.s-referral-list article { display: flex; align-items: center; justify-content: space-between; gap: calc(18 * var(--v)); padding: calc(19 * var(--v)); border-radius: calc(14 * var(--v)); background: #fff; border: 1px solid #ededed; }
.s-referral-list article div { min-width: 0; display: grid; gap: calc(6 * var(--v)); }
.s-referral-list article strong { color: #333; }
.s-referral-list article span { color: #999; font-size: max(8px, calc(24 * var(--v))); }
.s-referral-list article > b { padding: calc(6 * var(--v)) calc(10 * var(--v)); border-radius: 999px; background: #eee; color: #555; font-size: max(8px, calc(23 * var(--v))); }
.s-referral-list article > b.is-active { background: #e3f8ed; color: #11814c; }
.s-referral-record-table { display: grid; }
.s-referral-record-table > div { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; gap: calc(6 * var(--v)); padding: calc(18 * var(--v)) calc(8 * var(--v)); border-bottom: 1px solid #efefef; background: #fff; font-size: max(8px, calc(25 * var(--v))); }
.s-referral-record-table strong { color: #333; }
.s-referral-record-table b { color: #187b54; }
.s-referral-income section { margin: calc(24 * var(--v)); }
@media (prefers-reduced-motion: reduce) { .s-referral-loading span { animation-duration: 1.6s; } }

/* Referral Phase 2: short code + wallet reward history */
.s-referral-code-box strong {
  font-size: max(18px, calc(58 * var(--v)));
  letter-spacing: .12em;
  white-space: nowrap;
}

.s-referral-phase-note.is-enabled {
  background: #eef9ef;
  color: #28613b;
}
.s-referral-phase-note.is-enabled strong { color: #128044; }
.s-referral-phase-note.is-disabled {
  background: #f4f4f4;
  color: #777;
}

.s-referral-rule-card {
  margin-top: calc(18 * var(--v));
  padding: calc(22 * var(--v));
  border: 1px solid #e9e9e9;
  border-radius: calc(14 * var(--v));
  background: #fffaf0;
  color: #725a22;
  line-height: 1.5;
}
.s-referral-rule-card strong {
  display: block;
  margin-bottom: calc(8 * var(--v));
  color: #9a6f00;
}
.s-referral-rule-card p { margin: 0; }

.s-referral-reward-list {
  display: grid;
  gap: calc(10 * var(--v));
  padding: calc(20 * var(--v)) calc(28 * var(--v));
}
.s-referral-reward-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--v));
  padding: calc(19 * var(--v));
  border: 1px solid #ededed;
  border-radius: calc(14 * var(--v));
  background: #fff;
}
.s-referral-reward-list article div {
  min-width: 0;
  display: grid;
  gap: calc(5 * var(--v));
}
.s-referral-reward-list article strong { color: #333; }
.s-referral-reward-list article span {
  color: #999;
  font-size: max(8px, calc(23 * var(--v)));
}
.s-referral-reward-list article > b {
  flex: 0 0 auto;
  color: #0b9c60;
  font-size: max(11px, calc(32 * var(--v)));
}