.referral-wrapper {
  padding:24px;
  color:#fff;
  background-color:#0d0d0d;
  margin-bottom:100px
}
.ref-title {
  font-weight:500;
  font-size:24px;
  line-height:36px;
  text-align:center;
  margin-bottom:4px
}
.ref-subtitle {
  font-weight:400;
  font-size:16px;
  line-height:24px;
  color:#89899a;
  text-align:center;
  margin-bottom:16px
}
.ref-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:12px
}
.invite-btn {
  width:291px;
  height:50px;
  border-radius:10px;
  background-color:#007aff;
  color:#fff;
  padding:15px 12px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  font-weight:500;
  font-size:18px;
  line-height:24px
}
.copy-btn {
  width:50px;
  height:50px;
  border-radius:10px;
  background-color:#007aff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center
}
.ref-contact {
  font-weight:400;
  font-size:14px;
  line-height:20px;
  text-align:center;
  color:#89899a;
  margin-bottom:20px
}
.ref-contact a {
  color:#1e90ff;
  text-decoration:none
}
.ref-summary {
  margin-top:40px;
  margin-bottom:40px
}
.ref-summary-title {
  font-weight:500;
  font-size:18px;
  line-height:24px;
  margin-bottom:16px
}
.ref-summary-stats {
  display:flex;
  margin-bottom:20px
}
.stat+.stat {
  margin-left:70px
}
.stat {
  display:flex;
  flex-direction:column
}
.stat-label {
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#89899a;
  margin-bottom:4px
}
.stat-value {
  font-weight:500;
  font-size:32px;
  line-height:40px
}
.stat-value.blue {
  color:#2687e9
}
.stat-value span {
  font-weight:500;
  font-size:18px;
  line-height:24px;
  color:#2687e9
}
.ref-summary-balance {
  background-color:#161920;
  border-radius:20px;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.balance-amount {
  font-weight:500;
  font-size:24px;
  line-height:36px
}
.withdraw-button {
  background-color:#007aff;
  color:#fff;
  border:none;
  cursor:pointer;
  width:143px;
  height:37px;
  border-radius:14px;
  padding:8px 18px;
  gap:8px;
  font-weight:500;
  font-size:14px;
  line-height:20px
}
.info-alert {
  width:100%;
  padding:4px 10px;
  background-color:#007aff21;
  color:#007aff;
  text-align:center;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  border-radius:6px;
  margin-bottom:16px
}
.ref-output {
  margin-top:40px
}
.ref-output-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px
}
.output-title {
  font-weight:500;
  font-size:16px;
  line-height:24px
}
.invited-card {
  display:flex;
  align-items:center;
  background-color:#161920;
  border-radius:14px;
  padding:12px 16px;
  margin-bottom:12px;
  gap:12px
}
.invited-avatar {
  width:52px;
  height:52px;
  border-radius:12px;
  object-fit:cover
}
.invited-info {
  flex:1 1
}
.invited-info-name {
  font-weight:400;
  font-size:16px;
  line-height:24px;
  margin-bottom:2px
}
.invited-info span {
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#89899a
}
.invited-badge {
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:#ff4d4d;
  font-size:14px
}
.pagination-block {
  margin-top:24px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}
.no-invites {
  text-align:center
}
.promo-code-row.styled {
  background-color:#161920;
  border-radius:12px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#aab2d5
}
.promo-code-block-info {
  color:#89899a;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  margin-top:5px
}
.promo-code-row .label-value {
  display:flex;
  flex-direction:column
}
.promo-code-row .label {
  font-size:12px;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:5px;
  color:#89899a
}
.promo-code-row .value,
.promo-code-row .promo-input {
  font-size:18px;
  color:#fff;
  background:none;
  border:none;
  outline:none
}
.promo-code-row .promo-input {
  border-bottom:1px solid #4c4f70;
  width:100%;
  border-radius:unset;
  text-align:left;
  padding:6px
}
.promo-code-row .actions {
  display:flex;
  align-items:center
}
.create-promo-btn {
  margin:0 auto
}
.promo-code-row .actions button {
  background:none;
  border:none;
  cursor:pointer;
  margin-left:8px;
  color:#fff;
  font-size:18px
}
.promo-code-row .actions button:hover {
  color:#fff
}
.actions-save,
.actions-cancel {
  width:26px;
  height:26px
}
@media (max-width: 480px) {
  .ref-stats {
    flex-direction:column;
    align-items:stretch
  }
}