/* ── Referral Panel (Settings) ─────────────────────────────────────── */

.referral-tiers {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0;
}
.referral-tier {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
}
.referral-tier-label {
  font-size: 13px; color: var(--cream); font-weight: 500;
}
.referral-tier-value {
  font-size: 12px; color: var(--muted);
}
.referral-tier-value strong {
  color: var(--rose); font-weight: 600;
}

/* Link box */
.referral-link-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
}
.referral-link-text {
  flex: 1; font-family: monospace; font-size: 12px;
  color: var(--cream); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; user-select: all;
}
.referral-copy-btn {
  flex-shrink: 0; padding: 6px 14px; border-radius: 6px;
  background: var(--rose); color: #fff; border: none;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.referral-copy-btn:hover { background: var(--rose-hover) }
.referral-copy-btn:active { transform: scale(0.97) }

/* Share shortcuts */
.refer-share-row {
  display: flex; gap: 8px; margin-top: 12px;
}
.refer-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border2); background: transparent;
  color: var(--dim); font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.refer-share-btn:hover { color: var(--text); border-color: var(--cream-15); }
.refer-share-btn:active { transform: scale(0.97); }
.refer-share-btn svg { flex-shrink: 0; }

/* Stats row */
.referral-stats-row {
  display: flex; gap: 12px;
}
.referral-stat {
  flex: 1; text-align: center; padding: 14px 10px;
  border-radius: 8px; background: var(--bg2);
  border: 1px solid var(--border);
}
.referral-stat-value {
  font-size: 22px; font-weight: 600; color: var(--cream);
  font-family: var(--ff-display);
}
.referral-stat-label {
  font-size: 11px; color: var(--muted); margin-top: 4px;
}

/* Referral list */
.referral-list {
  display: flex; flex-direction: column; gap: 6px;
}
.referral-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
}
.referral-list-name {
  flex: 1; font-size: 13px; color: var(--cream); font-weight: 500;
}
.referral-list-status {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  font-weight: 500; text-transform: capitalize;
}
.referral-status-signed_up {
  background: rgba(255, 255, 255, 0.06); color: var(--muted);
}
.referral-status-basic {
  background: rgba(99, 179, 237, 0.12); color: #63b3ed;
}
.referral-status-premium {
  background: rgba(237, 137, 54, 0.12); color: #ed8936;
}
.referral-list-tokens {
  font-size: 12px; color: var(--rose); font-weight: 500;
}
.referral-list-date {
  font-size: 11px; color: var(--muted2); min-width: 80px; text-align: right;
}