.referral-card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  flex: 0 0 auto;
  align-items: center; gap: 14px; padding: 16px; overflow: hidden;
  border: 1px solid rgba(85,221,255,.3); border-radius: 18px;
  background: linear-gradient(135deg,rgba(34,111,140,.24),rgba(92,72,173,.2));
  animation: referral-in .35s ease-out;
}
.messages > .message { flex: 0 0 auto }
.referral-card::before { content:""; position:absolute; width:130px; height:130px; right:-45px; top:-70px; border-radius:50%; background:rgba(85,221,255,.16); filter:blur(28px); pointer-events:none }
.referral-icon { position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#56ddff,#8879ff); color:#07101d; font-size:21px; font-weight:900 }
.referral-copy { position:relative }
.referral-copy span { display:block; margin-bottom:3px; color:#77e8ff; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.1em }
.referral-copy strong { font-size:15px }
.referral-copy p { margin:4px 0 0; color:#aab9cb; font-size:12px; line-height:1.4 }
.referral-card a { position:relative; display:flex; align-items:center; gap:7px; padding:11px 13px; border-radius:12px; background:#effbff; color:#092034; text-decoration:none; font-size:12px; font-weight:700; transition:.2s }
.referral-card a b { font-weight:800 }
.referral-card a i { font-size:17px; font-style:normal; transition:.2s }
.referral-card a:hover { transform:translateY(-2px); box-shadow:0 9px 25px rgba(85,221,255,.18) }
.referral-card a:hover i { transform:translateX(3px) }
@keyframes referral-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@media (max-width:680px) {
  .referral-card { grid-template-columns:auto 1fr }
  .referral-card a { grid-column:1/-1; justify-content:center; width:100% }
}
.continue-card.limit-reached { border-color:rgba(255,190,85,.42); background:linear-gradient(135deg,rgba(153,95,25,.22),rgba(75,55,148,.2)); box-shadow:0 16px 48px rgba(0,0,0,.2) }
.continue-card.limit-reached strong { font-size:17px; color:#fff2d3 }
.continue-card.limit-reached button { background:linear-gradient(135deg,#ffd36b,#7cf0d2); box-shadow:0 8px 24px rgba(255,199,91,.18) }