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

@@ -93,7 +93,7 @@ export default async function AdminTransactions({
         Read-only · PayPal / top-up transactions recorded by the CMS, newest first.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Total transactions" value={total} icon="🧾" />
         <StatusCard
           label="Paid (this page)"
@@ -109,7 +109,7 @@ export default async function AdminTransactions({
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Transactions ({total})</h2>
         {transactions.length === 0 ? (
           <p className="muted">No transactions.</p>
@@ -143,7 +143,7 @@ export default async function AdminTransactions({
                       <td>
                         {t.status ? (
                           <span
-                            className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}
+                            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                           >
                             {t.status}
                           </span>