@layer components{.page-account-referral{& .page-account-referral__row{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-block-start:var(--space-s);& .field{flex-grow:1;min-inline-size:14rem}}& .page-account-referral__bonus{margin-block-start:var(--space-s);padding:var(--space-m);border-radius:var(--radius-xl)}& .page-account-referral__amount{margin-block-start:var(--space-3xs);font-size:var(--size-step-3)}& .page-account-referral__how{margin-block-start:var(--space-s);& h2{font-size:var(--size-step-1)}}& .page-account-referral__steps{display:flex;flex-direction:column;gap:var(--space-s);margin-block-start:var(--space-m);padding:0;list-style:none;& li{display:flex;gap:var(--space-s);align-items:flex-start;color:var(--color-text-muted)}}& .page-account-referral__number{flex-shrink:0;display:grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:var(--radius-pill);background:var(--color-accent-surface);color:var(--color-accent-deep)}}}