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

@@ -18,7 +18,7 @@ export default async function AdminWriteableBoxes() {
 
   return (
     <main>
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Writeable boxes</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           Content panels stored in <code>website_writeable_boxes</code> and ordered by{" "}
@@ -26,7 +26,7 @@ export default async function AdminWriteableBoxes() {
           hidden ones are kept here as drafts.
         </p>
 
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard label="Total boxes" value={boxes.length} icon="🗂️" />
           <StatusCard
             label="Active"
@@ -38,7 +38,7 @@ export default async function AdminWriteableBoxes() {
         </div>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>New box</h2>
         <form action={createBox} className="grid cols-2">
           <div>
@@ -96,7 +96,7 @@ export default async function AdminWriteableBoxes() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Boxes ({boxes.length})</h2>
         {boxes.length === 0 ? (
           <p className="muted">No writeable boxes yet.</p>
@@ -115,7 +115,7 @@ export default async function AdminWriteableBoxes() {
                   <span className="muted">#{String(box.id)}</span>
                   {box.icon ? <span aria-hidden>{box.icon}</span> : null}
                   <strong style={{ flex: 1 }}>{box.title}</strong>
-                  <span className={`admin-badge ${box.isActive ? "ok" : "danger"}`}>
+                  <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                     {box.isActive ? "Active" : "Hidden"}
                   </span>
                 </div>