/* bl-referral.css - the paid-referral card (assets/js/bl-referral.js): Account > Plan and the welcome after buying.
   Site tokens only (brainlag.css), so light and dark follow the page. No red, no accent bars, nothing wider than 320. */
.ref-card{margin:6px 0 20px;padding:18px 20px;border-radius:var(--r2);background:var(--study-tint);color:var(--ink);min-width:0}
.ref-card[hidden]{display:none}
.ref-top{display:flex;gap:14px;align-items:flex-start}
.ref-art{flex:none;width:64px;height:auto}
.ref-hd{min-width:0}
.ref-card .ref-h{margin:2px 0 4px;font-size:17px;line-height:1.3;color:var(--ink);text-wrap:balance}
.ref-wl .ref-h{font-size:19px}
.ref-card .ref-p{margin:0;color:var(--ink-2);font-size:15px;text-wrap:pretty}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.ref-stat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--r1);background:var(--surface);text-align:center;min-width:0}
.ref-big{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px}
.ref-n{font-size:30px;line-height:1;color:var(--study-ink)}
.ref-people{display:flex}
.ref-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--study);border:3px solid var(--surface);margin-inline-start:-8px}
.ref-dot:first-child{margin-inline-start:0}
.ref-dot-empty{background:transparent;border:2px dashed var(--ink-3)}
.ref-lab{display:flex;flex-direction:column;font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.3}
.ref-of{font-weight:600;color:var(--ink-3)}
.ref-ring{display:block}
.ref-seg{stroke:color-mix(in srgb,var(--ink) 14%,transparent)}
.ref-seg.ref-on{stroke:var(--study)}
.ref-seg.ref-way{stroke:color-mix(in srgb,var(--study) 45%,transparent)}
.ref-ring-n{font:800 18px/1 inherit;fill:var(--study-ink)}
.ref-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ref-url{flex:1 1 180px;min-width:0;background:var(--surface);border:2px solid var(--rule-2,transparent);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit;font-size:14.5px}
.ref-copy,.ref-share{min-height:44px;padding:0 16px;border-radius:10px;font:inherit;font-weight:800;cursor:pointer}
.ref-copy{border:0;background:var(--study-ink);color:#fff}
.ref-share{border:2px solid var(--study-ink);background:transparent;color:var(--study-ink)}
.ref-copy:focus-visible,.ref-share:focus-visible,.ref-url:focus-visible{outline:3px solid var(--study);outline-offset:2px}
[data-theme="dark"] .ref-copy{color:#0b1626}
@media (max-width:420px){.ref-card{padding:16px 14px}.ref-art{width:48px}.ref-n{font-size:26px}.ref-copy,.ref-share{flex:1 1 auto}}