refactor: convert admin panel to Tailwind CSS

- Convert admin layout, sidebar, and navigation to Tailwind classes
- Convert dashboard components (StatusCard, DiagnosticRow, etc.) to Tailwind
- Convert all ~48 admin page files from admin CSS classes to Tailwind
- Remove unused admin CSS from globals.css (973 → 712 lines)
- Convert developers page badges to Tailwind
- Remove <style jsx> block from OnlineUsersWidget

src/app/admin/achievements/page.tsx

@@ -50,7 +50,7 @@ export default async function AdminAchievements() {
         Read-only · {achievements.length} rows across {groups.size} categories.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Achievement rows" value={achievements.length} icon="🏆" />
         <StatusCard label="Distinct achievements" value={distinctNames} icon="🎖️" />
         <StatusCard label="Categories" value={groups.size} icon="🗂️" />
@@ -60,10 +60,10 @@ export default async function AdminAchievements() {
         <p className="muted">No achievements found.</p>
       ) : (
         [...groups.entries()].map(([category, rows]) => (
-          <section key={category} className="admin-section">
+          <section key={category} className="mt-6">
             <h2>
               {category}{" "}
-              <span className="admin-badge">{rows.length}</span>
+              <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{rows.length}</span>
             </h2>
             <div className="card" style={{ padding: 0, overflowX: "auto" }}>
               <table>