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/badges/page.tsx

@@ -25,7 +25,7 @@ export default async function AdminBadges({
 
   return (
     <main>
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Badges</h2>
         <p className="muted">
           Website badge catalogue (<code>website_badges</code>). Granting fires the emulator
@@ -34,18 +34,18 @@ export default async function AdminBadges({
 
         {uploaded ? (
           <p>
-            <span className="admin-badge ok">Uploaded</span> Badge image{" "}
+            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Uploaded</span> Badge image{" "}
             <code>{uploaded}.gif</code> saved.
           </p>
         ) : null}
         {error ? (
           <p>
-            <span className="admin-badge danger">Error</span> {error}
+            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Error</span> {error}
           </p>
         ) : null}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Upload badge image</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           Saves a <code>.gif</code> badge image to the emulator badge directory
@@ -69,7 +69,7 @@ export default async function AdminBadges({
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Give badge to user</h2>
         <form action={giveBadge} className="card">
           <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
@@ -96,7 +96,7 @@ export default async function AdminBadges({
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Catalogue ({badges.length})</h2>
         {badges.length === 0 ? (
           <p className="muted">No badges in the catalogue.</p>