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/events/index.vue

@@ -570,7 +570,7 @@ tbody td {
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--c-founder);
-  border: 1px dashed rgba(138, 68, 32, 0.3);
+  border: 1px dashed color-mix(in srgb, var(--ember) 30%, transparent);
   padding: 2px 8px;
 }
 
@@ -583,7 +583,7 @@ tbody td {
   font-size: 10px;
   font-weight: 600;
   color: var(--c-founder);
-  border: 1px dashed rgba(138, 68, 32, 0.4);
+  border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
   border-radius: 50%;
 }
 
@@ -632,12 +632,12 @@ tbody td {
 
 .status-upcoming {
   color: var(--candle);
-  border-color: rgba(122, 90, 16, 0.3);
+  border-color: color-mix(in srgb, var(--candle) 30%, transparent);
 }
 
 .status-ongoing {
   color: var(--green);
-  border-color: rgba(74, 106, 56, 0.3);
+  border-color: color-mix(in srgb, var(--green) 30%, transparent);
 }
 
 .status-past {
@@ -647,7 +647,7 @@ tbody td {
 
 .status-cancelled {
   color: var(--ember);
-  border-color: rgba(138, 68, 32, 0.3);
+  border-color: color-mix(in srgb, var(--ember) 30%, transparent);
   margin-top: 4px;
 }
 

app/pages/admin/index.vue

@@ -65,7 +65,7 @@
                 <span class="item-sub">{{ member.email }}</span>
               </div>
               <div class="item-meta">
-                <span class="badge" :class="member.circle">{{ member.circle }}</span>
+                <CircleBadge :circle="member.circle" />
                 <span class="item-date">{{ formatDate(member.createdAt) }}</span>
               </div>
             </div>

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);

app/pages/admin/pre-registrants/index.vue

@@ -643,8 +643,8 @@ tbody td {
 }
 
 .status-accepted {
-  color: var(--green, #4a7);
-  border-color: var(--green, #4a7);
+  color: var(--green);
+  border-color: var(--green);
 }
 
 .status-expired {
@@ -671,7 +671,7 @@ tbody td {
 
 /* ---- STATUS INDICATORS ---- */
 .status-ok {
-  color: var(--green, #4a7);
+  color: var(--green);
   font-size: 11px;
 }
 

app/pages/admin/series-management.vue

@@ -850,7 +850,7 @@ const exportSeriesData = () => {
   font-size: 11px;
   font-weight: 600;
   color: var(--c-founder);
-  border: 1px dashed rgba(138, 68, 32, 0.4);
+  border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
   border-radius: 50%;
   flex-shrink: 0;
 }
@@ -931,12 +931,12 @@ const exportSeriesData = () => {
 
 .status-active {
   color: var(--green);
-  border-color: rgba(74, 106, 56, 0.3);
+  border-color: color-mix(in srgb, var(--green) 30%, transparent);
 }
 
 .status-upcoming {
   color: var(--candle);
-  border-color: rgba(122, 90, 16, 0.3);
+  border-color: color-mix(in srgb, var(--candle) 30%, transparent);
 }
 
 .status-completed {
@@ -946,7 +946,7 @@ const exportSeriesData = () => {
 
 .status-ongoing {
   color: var(--green);
-  border-color: rgba(74, 106, 56, 0.3);
+  border-color: color-mix(in srgb, var(--green) 30%, transparent);
 }
 
 /* ---- LINK BUTTONS ---- */

app/pages/admin/wiki.vue

@@ -954,8 +954,8 @@ const applyBatchVisibility = async (hidden) => {
 }
 
 .sync-created {
-  color: var(--green, #4a7);
-  border-color: var(--green, #4a7);
+  color: var(--green);
+  border-color: var(--green);
 }
 
 .sync-updated {