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

@@ -97,17 +97,17 @@ export default async function AdminTheme({
       </p>
 
       {sp.saved ? (
-        <p className="admin-badge ok" style={{ display: "inline-block" }}>
+        <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
           Theme saved
         </p>
       ) : null}
       {sp.preset ? (
-        <p className="admin-badge ok" style={{ display: "inline-block" }}>
+        <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
           Applied preset “{sp.preset}”
         </p>
       ) : null}
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Presets</h2>
         <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
           {Object.entries(PRESETS).map(([name, palette]) => (
@@ -141,17 +141,17 @@ export default async function AdminTheme({
       </section>
 
       <form action={saveTheme}>
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Colours</h2>
           <div className="card">{colorGrid(COLOR_FIELDS, current)}</div>
         </section>
 
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Buttons & links</h2>
           <div className="card">{colorGrid(BUTTON_FIELDS, current)}</div>
         </section>
 
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Typography & layout</h2>
           <div className="card">
             <div style={{ display: "flex", flexWrap: "wrap", gap: "1.25rem", alignItems: "center" }}>
@@ -193,7 +193,7 @@ export default async function AdminTheme({
           </div>
         </section>
 
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Custom CSS</h2>
           <p className="muted" style={{ marginTop: "-0.4rem" }}>
             Injected raw into every page (after the theme variables). Use it for tweaks the controls