/* Invite friends card (referral.js) */
.ref-card { display: flex; flex-direction: row; gap: 24px; align-items: center; margin-bottom: 18px; }
.ref-art { flex: 0 0 150px; height: 104px; border-radius: 18px; display: grid; place-items: center; background: radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--cta-b) 35%, transparent), color-mix(in srgb, var(--cta-a) 6%, transparent) 70%); }
.ref-art .ref-av { fill: var(--card); }
.ref-art .ref-pp { fill: var(--ink); }
.ref-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) { .ref-card { flex-direction: column; align-items: stretch; } .ref-art { flex-basis: auto; height: 96px; } }
.ref-top { display: flex; gap: 14px; align-items: flex-start; }
.ref-top h2 { margin: 0 0 4px; }
.ref-top .note { margin: 0; }
.ref-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-link { flex: 1 1 260px; min-width: 0; font-family: var(--mono); font-size: 13px; }
.ref-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.ref-stats div { display: flex; align-items: baseline; gap: 6px; }
.ref-stats b { font-size: 22px; letter-spacing: -.02em; }
.ref-stats span { font-size: 13px; color: var(--ink-muted); }
.ref-stats .note { flex-basis: 100%; margin: 0; }
.invited-note { margin: -4px 0 4px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink); background: color-mix(in srgb, var(--cta-b) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--cta-b) 32%, var(--line)); }