/* One vector vocabulary across discovery, campaign pages, sharing and the creator planner. */
.referral-network{min-width:0;margin:8px 0 12px;color:var(--theme-text,var(--text));font-style:normal}
.referral-network-art{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;overflow:visible}
.referral-network-lines{fill:none;stroke:var(--theme-accent,var(--lime));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.referral-network-return{stroke-dasharray:4 5;opacity:.45}
.referral-network-arrow{opacity:.6}
.referral-person>circle:first-child{fill:var(--theme-panel,var(--panel));stroke:var(--theme-accent,var(--lime));stroke-width:1.5}
.referral-person-head{fill:var(--theme-accent,var(--lime));stroke:none}
.referral-person path{fill:none;stroke:var(--theme-accent,var(--lime));stroke-width:1.5;stroke-linecap:round}
.referral-person.is-root>circle:first-child{fill:var(--brand-red,#d71935);stroke:var(--brand-red,#d71935)}
.referral-person.is-root .referral-person-head{fill:#fff}
.referral-person.is-root path{stroke:#fff}
.referral-network-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center;max-width:480px;margin:0 auto}
.referral-network-labels>div{min-width:0}
.referral-network-root{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:10px}
.referral-network-root>strong{font-size:14px;line-height:1.2;color:var(--text)}
.referral-network-root>span,.referral-network-step{display:block;font-size:10px;line-height:1.4;color:var(--muted)}
.referral-network-step{font-size:9px;text-transform:uppercase;letter-spacing:.6px}
.referral-network-name{display:block;margin-top:3px;font-size:11px;font-weight:650;line-height:1.3;color:var(--text)}
.referral-network-reward{margin-top:8px;padding-top:7px;border-top:1px solid var(--theme-line,var(--line))}
.referral-network-reward>span{display:block;font-size:10px;color:var(--muted);line-height:1.4}
.referral-network-reward>strong{display:block;color:var(--theme-accent,var(--lime));font-size:26px;line-height:1.25;letter-spacing:-.7px;font-weight:800}
.referral-network-reward>small,.referral-network-count{display:block;font-size:10px;color:var(--muted);line-height:1.4}
.referral-network-count{margin-top:6px;color:var(--text)}
.referral-network-level.is-disabled .referral-network-reward>strong{font-weight:500;color:var(--muted)}
.referral-network figcaption{margin:10px 0 0;font-size:10px;line-height:1.45;text-align:center;color:var(--muted)}
.referral-network.is-disabled .referral-network-art{opacity:.45}
.referral-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;padding:13px 0;margin-top:12px;border:0;border-top:1px solid var(--theme-selected-border,var(--line));border-bottom:1px solid var(--theme-line,var(--line));border-radius:0;background:transparent;text-align:left;text-decoration:none;color:var(--text);font-family:inherit;cursor:default}
a.referral-card,button.referral-card{cursor:pointer}
a.referral-card:hover,button.referral-card:hover{color:var(--text);background:var(--theme-selected,var(--panel2));text-decoration:none}
.referral-card-copy{display:flex;align-items:center;gap:9px;min-width:0}
.referral-card-copy>.icon{flex:none;width:20px;height:20px;color:var(--theme-accent,var(--lime))}
.referral-card-copy>span{min-width:0}
.referral-card-copy strong{display:block;font-size:12px;font-weight:750;line-height:1.35;color:var(--theme-accent,var(--lime))}
.referral-card-copy small{display:block;margin-top:3px;font-size:10px;color:var(--muted);line-height:1.4}
.referral-card-levels{flex:none;display:flex;gap:9px;align-items:center;text-align:center}
.referral-card-levels>span{display:grid;gap:2px}
.referral-card-levels small{font-size:9px;line-height:1;color:var(--muted)}
.referral-card-levels strong{font-size:19px;font-weight:750;line-height:1.1;color:var(--theme-accent,var(--lime))}
.referral-card-levels .is-disabled strong{color:var(--muted);font-weight:400}
.referral-card:focus-visible{outline:2px solid var(--theme-accent,var(--lime));outline-offset:3px}
@media(max-width:480px){
 .referral-network-labels{gap:4px}
 .referral-network-root>strong{font-size:12px;overflow-wrap:anywhere}
 .referral-network-name{font-size:10px}
 .referral-network-reward>strong{font-size:23px}
 .referral-card{gap:8px}
 .referral-card-copy{gap:7px}
 .referral-card-copy strong{font-size:11px}
 .referral-card-copy small{font-size:10px}
 .referral-card-levels{gap:7px}
}