refactor(admin): migrate admin/index to PageShell + ColumnsLayout

- Replace .admin-dash wrapper + bespoke .page-header with <PageShell title/subtitle>
- Replace two .content-row grids with <ColumnsLayout cols=2 collapse=768> + named slots
- Rename .content-block to .admin-block (no border-right; ColumnsLayout provides divider)
- Drop .content-row, .content-block, .page-header scoped CSS

app/pages/admin/index.vue

@@ -1,16 +1,14 @@
 <template>
-  <div class="admin-dash">
+  <PageShell
-    <!-- Page Header -->
+    title="Admin Dashboard"
-    <div class="page-header">
+    subtitle="Members, events, and community operations"
-      <h1>Admin Dashboard</h1>
+  >
-      <p>Members, events, and community operations</p>
-    </div>
-
     <AdminAlertsPanel />
 
     <!-- Stats + Quick Actions row -->
-    <div class="content-row">
+    <ColumnsLayout cols="2" collapse="768" class="admin-row">
-      <div class="content-block">
+      <template #left>
+        <div class="admin-block">
           <div class="section-label">Overview</div>
           <div class="stat-row">
             <span class="stat-key">Total Members</span>
@@ -29,8 +27,10 @@
             <span class="stat-val">{{ stats.pendingSlackInvites || 0 }}</span>
           </div>
         </div>
+      </template>
 
-      <div class="content-block">
+      <template #right>
+        <div class="admin-block">
           <div class="section-label">Quick Actions</div>
           <NuxtLink to="/admin/members" class="action-link">
             Manage Members<span class="arrow">&rarr;</span>
@@ -45,11 +45,13 @@
             Create Series<span class="arrow">&rarr;</span>
           </NuxtLink>
         </div>
-    </div>
+      </template>
+    </ColumnsLayout>
 
     <!-- Recent Activity row -->
-    <div class="content-row">
+    <ColumnsLayout cols="2" collapse="768" class="admin-row">
-      <div class="content-block">
+      <template #left>
+        <div class="admin-block">
           <div class="section-label">Recent Members</div>
 
           <div v-if="pending" class="loading-inline">
@@ -72,8 +74,10 @@
 
           <NuxtLink to="/admin/members" class="section-link">View all members &rarr;</NuxtLink>
         </div>
+      </template>
 
-      <div class="content-block">
+      <template #right>
+        <div class="admin-block">
           <div class="section-label">Upcoming Events</div>
 
           <div v-if="pending" class="loading-inline">
@@ -96,8 +100,9 @@
 
           <NuxtLink to="/admin/events" class="section-link">View all events &rarr;</NuxtLink>
         </div>
-    </div>
+      </template>
-  </div>
+    </ColumnsLayout>
+  </PageShell>
 </template>
 
 <script setup>
@@ -127,45 +132,16 @@ const formatDateTime = (dateString) => {
 </script>
 
 <style scoped>
-.admin-dash {}
+/* ---- ROWS ---- */
-
+.admin-row {
-/* ---- PAGE HEADER ---- */
-.page-header {
-  padding: 28px 28px 20px;
   border-bottom: 1px dashed var(--border);
 }
 
-.page-header h1 {
+.admin-block {
-  font-family: 'Brygada 1918', serif;
-  font-size: 24px;
-  font-weight: 500;
-  color: var(--text-bright);
-  line-height: 1.2;
-  margin-bottom: 4px;
-}
-
-.page-header p {
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-/* ---- CONTENT GRID ---- */
-.content-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px dashed var(--border);
-}
-
-.content-block {
   padding: 24px 28px;
-  border-right: 1px dashed var(--border);
   min-width: 0;
 }
 
-.content-block:last-child {
-  border-right: none;
-}
-
 /* ---- STATS ---- */
 .stat-row {
   display: flex;
@@ -313,24 +289,7 @@ a.item-name:hover {
 
 /* ---- RESPONSIVE ---- */
 @media (max-width: 768px) {
-  .content-row {
+  .admin-block {
-    grid-template-columns: 1fr;
-  }
-
-  .content-block {
-    border-right: none;
-    border-bottom: 1px dashed var(--border);
-  }
-
-  .content-block:last-child {
-    border-bottom: none;
-  }
-
-  .page-header {
-    padding: 24px 20px 16px;
-  }
-
-  .content-block {
     padding: 20px;
   }
 }