/* Referrals page styles */
:root {
  --bg: #07131d;
  --panel: rgba(16, 35, 53, 0.9);
  --primary: #1ee0b6;
  --text: #ecfaff;
  --muted: #a6b9c8;
  --border: rgba(134, 169, 255, 0.3);
}

body {
  margin: 0; min-height: 100vh; font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top, #102335 0%, #07131d 58%);
  color: var(--text);
}

.page-shell { padding: 28px; max-width: 1200px; margin: 0 auto; }
.page-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;
  padding: 18px 22px; background: rgba(9,18,28,0.8); border-radius: 18px; border: 1px solid var(--border);
  gap: 18px;
}
.page-header h1 { margin: 0; }
.page-nav {
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px;
}
.page-nav a {
  color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); transition: all 0.2s ease;
}
.page-nav a:hover {
  background: rgba(30,224,182,0.08); border-color: rgba(30,224,182,0.2); transform: translateY(-1px);
}
.page-nav a.accent-link {
  background: linear-gradient(135deg, rgba(30,224,182,0.18), rgba(63,93,255,0.15));
  border-color: rgba(30,224,182,0.28);
  color: #dffef6;
}
.page-body {
  background: rgba(255,255,255,0.02); padding:18px; border-radius:18px; border: 1px solid var(--border);
}

.referral-box, .list-box, .item-row { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
#referralsContent { display:grid; gap:16px; }