Adapt + improve all admin pages to the new design system

Swept the whole housekeeping panel (34 pages) so it's a consistent,
improved adaptation of the old Filament admin rather than bare tables:
- Live status tiles (StatusCard) summarising each page's data — counts
  and stateful metrics (users online, active/permanent bans, pending
  applications, settings, radio shouts, etc.).
- Status pills (admin-badge ok/danger) replacing ad-hoc text: online/
  offline, account/ip ban types, permanent vs timed, command OK/FAIL,
  alert severity & read/new, enabled/disabled, open/closed.
- Sections wrapped in .admin-section with h2 headers; redundant inline
  table styling removed (the global .admin layer handles it).
- alerts/logs/emulator hand-built as the reference pattern; the rest
  via parallel agents that read the schema and preserved every server
  action, query and field name.

Behaviour unchanged (same actions, queries, field names). Verified in a
real authed admin session (prod, amx_test): pages render with live data
(Users tiles show 7 real accounts + online/offline pills), no errors.
tsc 0, vitest 49/49, next build 0.

src/app/admin/achievements/page.tsx

@@ -1,3 +1,4 @@
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -39,47 +40,60 @@ export default async function AdminAchievements() {
     groups.set(a.category, list);
   }
 
+  // Distinct achievement names (each name can have multiple level rows).
+  const distinctNames = new Set(achievements.map((a) => a.name)).size;
+
   return (
     <main>
       <h1>Achievements</h1>
-      <p className="muted" style={{ marginTop: 0 }}>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
         Read-only · {achievements.length} rows across {groups.size} categories.
       </p>
 
+      <div className="admin-stats">
+        <StatusCard label="Achievement rows" value={achievements.length} icon="🏆" />
+        <StatusCard label="Distinct achievements" value={distinctNames} icon="🎖️" />
+        <StatusCard label="Categories" value={groups.size} icon="🗂️" />
+      </div>
+
       {groups.size === 0 ? (
         <p className="muted">No achievements found.</p>
       ) : (
         [...groups.entries()].map(([category, rows]) => (
-          <div key={category} className="card" style={{ marginBottom: "1.5rem" }}>
-            <h3 style={{ marginTop: 0 }}>{category}</h3>
-            <table style={{ width: "100%", borderCollapse: "collapse" }}>
-              <thead>
-                <tr style={{ textAlign: "left", color: "var(--muted)" }}>
-                  <th>Name</th>
-                  <th>Level</th>
-                  <th>Progress needed</th>
-                  <th>Reward type</th>
-                  <th>Reward amount</th>
-                  <th>Points</th>
-                </tr>
-              </thead>
-              <tbody>
-                {rows.map((a) => (
-                  <tr
-                    key={`${a.name}-${a.level}`}
-                    style={{ borderTop: "1px solid var(--border)" }}
-                  >
-                    <td>{a.name}</td>
-                    <td>{a.level}</td>
-                    <td>{a.progressNeeded}</td>
-                    <td>{a.rewardType}</td>
-                    <td>{a.rewardAmount}</td>
-                    <td>{a.points ?? 0}</td>
+          <section key={category} className="admin-section">
+            <h2>
+              {category}{" "}
+              <span className="admin-badge">{rows.length}</span>
+            </h2>
+            <div className="card" style={{ padding: 0, overflowX: "auto" }}>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Level</th>
+                    <th>Progress needed</th>
+                    <th>Reward type</th>
+                    <th>Reward amount</th>
+                    <th>Points</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+                </thead>
+                <tbody>
+                  {rows.map((a) => (
+                    <tr key={`${a.name}-${a.level}`}>
+                      <td>
+                        <strong>{a.name}</strong>
+                      </td>
+                      <td>{a.level}</td>
+                      <td>{a.progressNeeded}</td>
+                      <td>{a.rewardType}</td>
+                      <td>{a.rewardAmount}</td>
+                      <td>{a.points ?? 0}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </section>
         ))
       )}
     </main>