style(visual-fidelity): pages-admin — batches B,C,F

- B: token-equivalent rgba → color-mix(srgb, var(--ember|green|candle) X%, transparent) so colors track dark mode
- C: drop stale var(--green, #...) fallbacks (canonical token now defined in main.css)
- F: inline circle badge → <CircleBadge/> in admin/index, members/[id], members/index

app/pages/admin/members/[id].vue

@@ -16,7 +16,7 @@
           <p v-if="member" class="member-email">{{ member.email }}</p>
         </div>
         <div v-if="member" class="header-badges">
-          <span class="badge" :class="member.circle">{{ member.circle }}</span>
+          <CircleBadge :circle="member.circle" />
           <span :class="statusClass(member.status)" class="status-badge">{{ member.status }}</span>
         </div>
       </div>

app/pages/admin/members/index.vue

@@ -108,9 +108,7 @@
             </td>
             <td class="col-email">{{ member.email }}</td>
             <td>
-              <span class="badge" :class="member.circle">{{
-                member.circle
-              }}</span>
+              <CircleBadge :circle="member.circle" />
             </td>
             <td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td>
             <td>
@@ -1149,7 +1147,7 @@ th.sortable:hover {
   text-transform: uppercase;
 }
 .badge.status-active {
-  color: var(--green, #3a6b3a);
+  color: var(--green);
   border-color: rgba(58, 107, 58, 0.45);
 }
 .badge.status-pending_payment {
@@ -1158,7 +1156,7 @@ th.sortable:hover {
 }
 .badge.status-suspended {
   color: var(--ember);
-  border-color: rgba(138, 68, 32, 0.45);
+  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
 }
 .badge.status-cancelled {
   color: var(--text-faint);