Badges
Stock .badge with a .badge-status-* variant: a small uppercase tag that says what a number or a row is before it is read. One tint idiom per theme color — translucent fill, alpha border, emphasis text. The variants share one definition in app.scss; add a tone there, never a page-local pill.
Status variants
Referral reward
Store credit
Amount due
Lifetime total
Gold
review for the earned, highlighted figure and for proofs awaiting review; green approved for store credit and approved proofs; red due for money owed; neutral for a plain fact.Without an icon
Awaiting Your Review
Approved
Past due
Archived
Count badge
Comments 3
Proofs 12
.badge-count is the gold count pill beside a section label.Usage
<span class="badge badge-status-review"><i class="fas fa-tag me-1"></i>Referral reward</span>
<span class="badge badge-status-due">Amount due</span>
<span class="badge rounded-pill badge-count">3</span>