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>

src/app/admin/ads/page.tsx

@@ -32,12 +32,12 @@ export default async function AdminAds() {
         across the site.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Ads" value={ads.length} icon="🖼️" />
         <StatusCard label="Latest" value={latest} hint="most recent ad" icon="🕒" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>All ads</h2>
         {ads.length === 0 ? (
           <p className="muted">No advertisements yet.</p>

src/app/admin/alerts/page.tsx

@@ -79,7 +79,7 @@ export default async function AdminAlerts() {
         Read-only · 100 most recent alert_logs (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="Alerts shown" value={alerts.length} icon="🔔" />
         <StatusCard
           label="Critical"

src/app/admin/applications/page.tsx

@@ -50,7 +50,7 @@ export default async function AdminApplications() {
         Pending applications from players requesting a staff rank.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
           label="Pending applications"
           value={applications.length}
@@ -59,7 +59,7 @@ export default async function AdminApplications() {
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Applications ({applications.length})</h2>
         {applications.length === 0 ? (
           <p className="muted">No pending applications.</p>
@@ -84,7 +84,7 @@ export default async function AdminApplications() {
                         <>User #{a.userId}</>
                       )}
                     </h3>
-                    <span className="admin-badge">Rank {a.rankId}</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)]">Rank {a.rankId}</span>
                   </div>
                   <p className="muted" style={{ marginTop: 0 }}>
                     {formatDate(a.createdAt)}

src/app/admin/articles/page.tsx

@@ -41,12 +41,12 @@ export default async function AdminArticles({
         </p>
       ) : null}
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Articles shown" value={articles.length} icon="📰" />
         <StatusCard label="Latest" value={latest} hint="most recent post" icon="🕒" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent articles</h2>
         {articles.length === 0 ? (
           <p className="muted">No articles yet.</p>

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>

src/app/admin/bans/page.tsx

@@ -32,7 +32,7 @@ export default async function AdminBans() {
         Active bans only (expiry in the future) · 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="Active bans"
           value={bans.length}
@@ -66,7 +66,7 @@ export default async function AdminBans() {
         </div>
       </form>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Active bans ({bans.length})</h2>
         {bans.length === 0 ? (
           <p className="muted">No active bans.</p>
@@ -87,12 +87,12 @@ export default async function AdminBans() {
                   <tr key={b.id}>
                     <td>{b.userId}</td>
                     <td>
-                      <span className="admin-badge">{b.type}</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)]">{b.type}</span>
                     </td>
                     <td>{b.banReason || "—"}</td>
                     <td>
                       {b.banExpire === 0 ? (
-                        <span className="admin-badge danger">permanent</span>
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">permanent</span>
                       ) : (
                         <span className="muted" style={{ whiteSpace: "nowrap" }}>
                           {fromUnix(b.banExpire)}

src/app/admin/calendar/page.tsx

@@ -62,7 +62,7 @@ export default async function AdminCalendar() {
         Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Campaigns" value={campaigns.length} icon="📅" />
         <StatusCard
           label="Enabled"
@@ -104,7 +104,7 @@ export default async function AdminCalendar() {
                     }}
                   >
                     <h3 style={{ margin: 0 }}>{c.name || `Campaign #${c.id}`}</h3>
-                    <span className={`admin-badge ${enabled ? "ok" : "danger"}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                       {enabled ? "enabled" : "disabled"}
                     </span>
                   </div>

src/app/admin/catalog/page.tsx

@@ -53,7 +53,7 @@ export default async function AdminCatalog() {
         Browse catalog pages and the items they contain. Read-only.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Pages" value={pages.length} icon="📚" />
         <StatusCard label="Visible" value={visibleCount} state="ok" icon="👁️" />
         <StatusCard
@@ -65,7 +65,7 @@ export default async function AdminCatalog() {
         <StatusCard label="Root pages" value={rootCount} icon="🗂️" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Pages ({pages.length})</h2>
         {pages.length === 0 ? (
           <p className="muted">No catalog pages found.</p>
@@ -105,7 +105,7 @@ export default async function AdminCatalog() {
                       <td>{p.minRank}</td>
                       <td>{p.orderNum}</td>
                       <td>
-                        <span className={`admin-badge ${hidden ? "danger" : "ok"}`}>
+                        <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${hidden ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
                           {hidden ? "Hidden" : "Visible"}
                         </span>
                       </td>

src/app/admin/commandocentrum/page.tsx

@@ -91,7 +91,7 @@ export default async function CommandoCentrum() {
       </p>
 
       {/* ── Live status ────────────────────────────────────────── */}
-      <div className="admin-stats" style={{ marginTop: "1.1rem" }}>
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6" style={{ marginTop: "1.1rem" }}>
         <StatusCard
           label="Players online"
           value={onlineCount}
@@ -135,7 +135,7 @@ export default async function CommandoCentrum() {
       <div className="grid cols-2">
         <section className="card">
           <h2 style={{ marginTop: 0 }}>Server info</h2>
-          <div className="admin-info-grid">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
             <InfoItem label="Node" value={process.version} />
             <InfoItem label="Platform" value={`${process.platform} ${process.arch}`} />
             <InfoItem label="App uptime" value={uptime(process.uptime())} />
@@ -149,7 +149,7 @@ export default async function CommandoCentrum() {
 
         <section className="card">
           <h2 style={{ marginTop: 0 }}>System diagnostics</h2>
-          <div className="admin-diag">
+          <div className="flex flex-col">
             <DiagnosticRow
               label="Database"
               detail={dbOk ? "Connection healthy" : "Unreachable"}
@@ -185,7 +185,7 @@ export default async function CommandoCentrum() {
       </div>
 
       {/* ── RCON controls ──────────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Emulator controls</h2>
         <div className="grid cols-3">
           <form action={updateCatalog} className="card">
@@ -240,7 +240,7 @@ export default async function CommandoCentrum() {
       </section>
 
       {/* ── User RCON actions ──────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>User actions (RCON)</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           Enter a User ID to perform actions on a specific user. Username required for disconnect.
@@ -345,7 +345,7 @@ export default async function CommandoCentrum() {
       </section>
 
       {/* ── Staff activity ─────────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent staff activity</h2>
         {activity.length === 0 ? (
           <p className="muted">No staff activity logged yet.</p>
@@ -367,7 +367,7 @@ export default async function CommandoCentrum() {
                   </td>
                   <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
                   <td>
-                    <span className="admin-badge">{a.action}</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)]">{a.action}</span>
                   </td>
                   <td>{a.description}</td>
                 </tr>
@@ -378,7 +378,7 @@ export default async function CommandoCentrum() {
       </section>
 
       {/* ── Emulator errors ────────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent emulator errors</h2>
         {errors.length === 0 ? (
           <p className="muted">No emulator errors logged.</p>

src/app/admin/emulator/page.tsx

@@ -41,12 +41,12 @@ export default async function AdminEmulator() {
         on the next emulator read (some keys require an emulator reload).
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Settings keys" value={settings.length} icon="⚙️" />
         <StatusCard label="Text keys" value={textsCount} icon="🗒️" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Settings</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           {settings.length} keys.
@@ -111,7 +111,7 @@ export default async function AdminEmulator() {
       ) : null}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Texts</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           {textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.

src/app/admin/help-questions/page.tsx

@@ -33,13 +33,13 @@ export default async function AdminHelpQuestions() {
         the public help page, ordered by position.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Entries" value={entries.length} icon="❓" />
         <StatusCard label="With button" value={withButton} icon="🔘" />
         <StatusCard label="Small boxes" value={smallBoxes} icon="🗂️" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Entries</h2>
         {entries.length === 0 ? (
           <p className="muted">No help-center entries yet.</p>
@@ -63,7 +63,7 @@ export default async function AdminHelpQuestions() {
                   </td>
                   <td className="muted">{e.buttonText || "—"}</td>
                   <td>
-                    <span className={`admin-badge ${e.smallBox ? "ok" : ""}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
                       {e.smallBox ? "Yes" : "No"}
                     </span>
                   </td>

src/app/admin/housekeeping/page.tsx

@@ -49,13 +49,13 @@ export default async function AdminHousekeeping({
         existing key overwrites its min rank and description.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Permissions" value={permissions.length} icon="🔑" />
         <StatusCard label="Highest min rank" value={maxRank} icon="⬆️" />
         <StatusCard label="Total min rank" value={totalMin} icon="∑" />
       </div>
 
-      <div className="card admin-section-header" style={{ marginBottom: "1rem" }}>
+      <div className="card mt-6" style={{ marginBottom: "1rem" }}>
         <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
           <form style={{ display: "flex", gap: "0.5rem", flex: 1 }}>
             <input
@@ -97,7 +97,7 @@ export default async function AdminHousekeeping({
       </div>
 
       {mode === "manage" ? (
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Add / overwrite permission</h2>
           <form action={upsertPermission} className="card">
             <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -109,7 +109,7 @@ export default async function AdminHousekeeping({
           </form>
         </section>
       ) : (
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Import Permissions</h2>
           <p className="muted" style={{ marginTop: "-0.4rem" }}>
             Paste comma-separated permission IDs to import them as a selection.
@@ -123,9 +123,9 @@ export default async function AdminHousekeeping({
         </section>
       )}
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>
-          Permissions <span className="admin-badge">{filtered.length}</span>
+          Permissions <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)]">{filtered.length}</span>
         </h2>
         {filtered.length === 0 ? (
           <p className="muted">No housekeeping permissions match this search.</p>

src/app/admin/ip/page.tsx

@@ -49,7 +49,7 @@ export default async function AdminIp() {
         Allow or block IP addresses (and ASNs) at the website edge.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
           label="Whitelisted"
           value={whitelist.length}
@@ -66,7 +66,7 @@ export default async function AdminIp() {
 
       <div className="grid cols-2">
         {/* ── Whitelist ──────────────────── */}
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Whitelist</h2>
 
           <form action={addWhitelist} className="card" style={{ marginBottom: "1rem" }}>
@@ -120,7 +120,7 @@ export default async function AdminIp() {
         </section>
 
         {/* ── Blacklist ──────────────────── */}
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Blacklist</h2>
 
           <form action={addBlacklist} className="card" style={{ marginBottom: "1rem" }}>

src/app/admin/layout.tsx

@@ -92,22 +92,29 @@ export default async function AdminLayout({ children }: { children: ReactNode })
   const initial = staff.username.charAt(0).toUpperCase();
 
   return (
-    <div className="admin">
+    <div className="grid grid-cols-1 lg:grid-cols-[232px_minmax(0,1fr)] gap-5 items-start">
-      <aside className="admin-sidebar">
+      <aside className="sticky top-4 self-start bg-[#2d2d44] text-[#e7e9f3] rounded-xl p-3.5 shadow-card max-h-[calc(100vh-2rem)] overflow-y-auto">
-        <div className="admin-sidebar-head">
+        <div className="flex items-center gap-2.5 px-1.5 pb-3.5 border-b border-white/10 mb-2">
-          <span className="admin-avatar" aria-hidden>
+          <span
+            className="flex-none w-[38px] h-[38px] rounded-lg grid place-items-center font-extrabold text-[#1a1a2e] bg-[var(--color-primary)]"
+            aria-hidden
+          >
             {initial}
           </span>
-          <div style={{ minWidth: 0 }}>
+          <div className="min-w-0">
-            <div className="admin-sidebar-name">{staff.username}</div>
+            <div className="font-bold text-sm leading-tight text-white truncate">{staff.username}</div>
-            <span className="admin-rank-badge">rank {staff.rank}</span>
+            <span className="inline-block mt-0.5 text-[0.66rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2 py-0.5">
+              rank {staff.rank}
+            </span>
           </div>
         </div>
 
-        <nav className="admin-nav">
+        <nav className="flex flex-col gap-0.5">
           {NAV_GROUPS.map((group) => (
-            <div key={group.label} className="admin-nav-group">
+            <div key={group.label} className="mt-2">
-              <span className="admin-nav-group-label">{group.label}</span>
+              <span className="block text-[0.64rem] font-bold uppercase tracking-widest text-[rgba(231,233,243,0.42)] px-2.5 pb-1">
+                {group.label}
+              </span>
               {group.items.map((item) => (
                 <AdminNavLink key={item.href} href={item.href} label={item.label} />
               ))}
@@ -116,10 +123,10 @@ export default async function AdminLayout({ children }: { children: ReactNode })
         </nav>
       </aside>
 
-      <div className="admin-content">
+      <div className="min-w-0">
-        <header className="admin-topbar">
+        <header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-xl px-4 py-3 mb-4 shadow-card">
-          <h2>Housekeeping</h2>
+          <h2 className="m-0 text-base font-extrabold">Housekeeping</h2>
-          <span className="muted" style={{ fontSize: "0.8rem" }}>
+          <span className="muted text-[0.8rem]">
             Signed in as <strong>{staff.username}</strong>
           </span>
         </header>

src/app/admin/logs/page.tsx

@@ -86,7 +86,7 @@ export default async function AdminStaffActivities({
         Auditor trail of all staff actions in the hotel.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Total activities" value={total} icon="📋" />
         <StatusCard label="On this page" value={activities.length} icon="📄" />
         <StatusCard
@@ -130,7 +130,7 @@ export default async function AdminStaffActivities({
         )}
       </form>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Activities ({total})</h2>
         {activities.length === 0 ? (
           <p className="muted">No staff activities match this search.</p>
@@ -153,7 +153,7 @@ export default async function AdminStaffActivities({
                     <td className="muted" style={{ whiteSpace: "nowrap" }}>{fromDate(a.createdAt)}</td>
                     <td className="muted">#{Number(a.userId)} ({nameById.get(Number(a.userId)) ?? "unknown"})</td>
                     <td>
-                      <span className="admin-badge">{a.action}</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)]">{a.action}</span>
                     </td>
                     <td>{a.description}</td>
                     <td>

src/app/admin/maintenance/page.tsx

@@ -41,7 +41,7 @@ export default async function AdminMaintenance() {
         <code> website_settings</code> and read live by the login flow.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
           label="Maintenance"
           value={enabled ? "ENABLED" : "Disabled"}
@@ -64,10 +64,10 @@ export default async function AdminMaintenance() {
       </div>
 
       {/* ── Current state ─────────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Current state</h2>
         <div className="card" style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          <span className={`admin-badge ${enabled ? "danger" : "ok"}`}>
+          <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
             {enabled ? "ENABLED" : "disabled"}
           </span>
           <div>
@@ -84,7 +84,7 @@ export default async function AdminMaintenance() {
       </section>
 
       {/* ── Edit form ─────────────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Settings</h2>
         <form action={saveMaintenance} className="card">
           <label

src/app/admin/navigation/page.tsx

@@ -29,7 +29,7 @@ type PublicRow = {
 // Reusable yes/no pill so emulator boolean-ish "1"/"0" columns read consistently.
 function YesNo({ on }: { on: boolean }) {
   return (
-    <span className={`admin-badge ${on ? "ok" : "danger"}`}>{on ? "Yes" : "No"}</span>
+    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>{on ? "Yes" : "No"}</span>
   );
 }
 
@@ -108,7 +108,7 @@ export default async function AdminNavigation() {
         emulator tooling, not here.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Flat categories" value={flatcats.length} icon="📂" />
         <StatusCard
           label="Public (flatcats)"
@@ -126,7 +126,7 @@ export default async function AdminNavigation() {
       </div>
 
       {/* ── navigator_flatcats ───────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Flat categories</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           <code>navigator_flatcats</code> · {flatcats.length} rows
@@ -174,7 +174,7 @@ export default async function AdminNavigation() {
       </section>
 
       {/* ── navigator_publics ────────────────────────────────── */}
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Public rooms</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           <code>navigator_publics</code> · {publics.length} rows

src/app/admin/page.tsx

@@ -52,7 +52,7 @@ export default async function AdminDashboard() {
     <main>
       <h1>Dashboard</h1>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
           label="Players online"
           value={online}
@@ -75,44 +75,40 @@ export default async function AdminDashboard() {
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
-        <h2 style={{ margin: 0 }}>Users by rank</h2>
+        <h2 className="m-0 text-lg">Users by rank</h2>
         {rankCounts.length === 0 ? (
-          <p className="muted" style={{ marginTop: "0.7rem" }}>
+          <p className="muted mt-3">
             {dbOk ? "No accounts to break down yet." : "DB unavailable."}
           </p>
         ) : (
-          <div style={{ display: "grid", gap: "0.5rem", marginTop: "0.8rem" }}>
+          <div className="grid gap-2 mt-3">
             {rankCounts.map((r) => {
               const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
               return (
                 <div
                   key={r.rank}
-                  style={{ display: "grid", gridTemplateColumns: "5.5rem 1fr 3rem", alignItems: "center", gap: "0.6rem" }}
+                  className="grid items-center gap-2.5"
+                  style={{ gridTemplateColumns: "5.5rem 1fr 3rem" }}
                 >
-                  <span className="muted" style={{ fontSize: "0.82rem", whiteSpace: "nowrap" }}>
+                  <span className="text-[var(--color-text-muted)] text-[0.82rem] whitespace-nowrap">
                     Rank {r.rank}
                   </span>
                   <div
-                    style={{
+                    className="h-3.5 rounded-[var(--radius-sm)] overflow-hidden"
-                      background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+                    style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
-                      borderRadius: "var(--radius-sm)",
-                      height: "0.85rem",
-                      overflow: "hidden",
-                    }}
                     role="img"
                     aria-label={`Rank ${r.rank}: ${r.count} accounts`}
                   >
                     <div
+                      className="h-full rounded-[var(--radius-sm)]"
                       style={{
                         width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
-                        height: "100%",
                         background: "var(--color-primary, #eeb425)",
-                        borderRadius: "var(--radius-sm)",
                       }}
                     />
                   </div>
-                  <strong style={{ fontSize: "0.85rem", textAlign: "right" }}>{r.count}</strong>
+                  <strong className="text-[0.85rem] text-right">{r.count}</strong>
                 </div>
               );
             })}
@@ -120,17 +116,17 @@ export default async function AdminDashboard() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
-        <div style={{ display: "flex", alignItems: "baseline", gap: "0.75rem" }}>
+        <div className="flex items-baseline gap-3">
-          <h2 style={{ margin: 0 }}>Recent staff activity</h2>
+          <h2 className="m-0 text-lg">Recent staff activity</h2>
-          <Link href="/admin/commandocentrum" className="muted" style={{ fontSize: "0.82rem" }}>
+          <Link href="/admin/commandocentrum" className="muted text-[0.82rem]">
             View all →
           </Link>
         </div>
         {activity.length === 0 ? (
-          <p className="muted">No staff activity logged yet.</p>
+          <p className="muted mt-3">No staff activity logged yet.</p>
         ) : (
-          <table style={{ marginTop: "0.7rem" }}>
+          <table className="mt-3">
             <thead>
               <tr>
                 <th>When</th>
@@ -142,12 +138,14 @@ export default async function AdminDashboard() {
             <tbody>
               {activity.map((a) => (
                 <tr key={String(a.id)}>
-                  <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                  <td className="muted whitespace-nowrap">
                     {fromDate(a.createdAt)}
                   </td>
                   <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
                   <td>
-                    <span className="admin-badge">{a.action}</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)]">
+                      {a.action}
+                    </span>
                   </td>
                   <td>{a.description}</td>
                 </tr>

src/app/admin/permissions/page.tsx

@@ -40,7 +40,7 @@ export default async function AdminPermissions() {
         a permission name to the minimum rank allowed to use it.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Permissions" value={permissions.length} icon="🔑" />
         <StatusCard label="Highest min rank" value={highestRank} icon="🎖️" />
       </div>
@@ -68,7 +68,7 @@ export default async function AdminPermissions() {
         </div>
       </form>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Permissions ({permissions.length})</h2>
         {permissions.length === 0 ? (
           <p className="muted">No permissions found.</p>

src/app/admin/photos/page.tsx

@@ -26,13 +26,13 @@ export default async function AdminPhotos() {
         <code>camera_web</code>.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Photos shown" value={photos.length} icon="📸" />
         <StatusCard label="Rooms" value={uniqueRooms} hint="distinct rooms" icon="🚪" />
         <StatusCard label="Users" value={uniqueUsers} hint="distinct photographers" icon="👤" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent photos</h2>
         {photos.length === 0 ? (
           <p className="muted">No photos found.</p>

src/app/admin/radio/api-keys/page.tsx

@@ -74,7 +74,7 @@ export default async function AdminRadioApiKeysPage() {
         <Link href="/admin/radio/monitoring">Monitoring</Link>
       </nav>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h1>Radio API Keys</h1>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           API keys for external radio integrations (<code>radio_api_keys</code>). Keys are generated
@@ -88,7 +88,7 @@ export default async function AdminRadioApiKeysPage() {
             </p>
           </div>
         ) : (
-          <div className="admin-stats">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
             <StatusCard label="Total keys" value={total} icon="🔑" />
             <StatusCard
               label="Active"
@@ -106,7 +106,7 @@ export default async function AdminRadioApiKeysPage() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Generate key</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           The secret key is generated automatically with cryptographic randomness — you do not enter
@@ -161,7 +161,7 @@ export default async function AdminRadioApiKeysPage() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Existing keys ({total})</h2>
         {total === 0 ? (
           <p className="muted">No API keys yet — generate one above.</p>
@@ -194,7 +194,7 @@ export default async function AdminRadioApiKeysPage() {
                     <td className="muted">{formatDate(k.lastUsedAt)}</td>
                     <td className="muted">{formatDate(k.expiresAt)}</td>
                     <td>
-                      <span className={`admin-badge ${k.isActive ? "ok" : "danger"}`}>
+                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                         {k.isActive ? "active" : "inactive"}
                       </span>
                     </td>

src/app/admin/radio/autodj/page.tsx

@@ -76,7 +76,7 @@ export default async function AdminRadioAutoDjPage() {
         <Link href="/admin/radio/autodj">AutoDJ</Link>
       </nav>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Radio AutoDJ</h2>
         <p className="muted" style={{ marginTop: '-0.4rem' }}>
           Fallback playlist (<code>radio_auto_dj_playlist</code>) the radio rotates
@@ -90,7 +90,7 @@ export default async function AdminRadioAutoDjPage() {
             </p>
           </div>
         ) : (
-          <div className="admin-stats">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
             <StatusCard label="Tracks" value={tracks.length} icon="🎵" />
             <StatusCard
               label="Active"
@@ -108,7 +108,7 @@ export default async function AdminRadioAutoDjPage() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Add track</h2>
         <form action={createTrack} className="card">
           <div className="grid cols-2">
@@ -186,7 +186,7 @@ export default async function AdminRadioAutoDjPage() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Playlist ({tracks.length})</h2>
         {tracks.length === 0 ? (
           <p className="muted">No AutoDJ tracks yet — add one above.</p>
@@ -232,7 +232,7 @@ export default async function AdminRadioAutoDjPage() {
                     <td className="muted">{t.playCount}</td>
                     <td className="muted">{formatDate(t.lastPlayedAt)}</td>
                     <td>
-                      <span className={`admin-badge ${t.isActive ? 'ok' : 'danger'}`}>
+                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                         {t.isActive ? 'active' : 'inactive'}
                       </span>
                     </td>

src/app/admin/radio/banners/page.tsx

@@ -72,7 +72,7 @@ export default async function AdminRadioBannersPage() {
           </p>
         </div>
       ) : (
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard label="Banners" value={banners.length} icon="🖼️" />
           <StatusCard
             label="Active"
@@ -89,7 +89,7 @@ export default async function AdminRadioBannersPage() {
         </div>
       )}
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Add banner</h2>
         <form action={createRadioBanner} className="card">
           <div className="grid cols-2">
@@ -148,7 +148,7 @@ export default async function AdminRadioBannersPage() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Existing banners ({banners.length})</h2>
         {banners.length === 0 ? (
           <p className="muted">No banners yet — add one above.</p>
@@ -170,7 +170,7 @@ export default async function AdminRadioBannersPage() {
                     style={{ display: 'inline-flex', gap: '0.5rem', alignItems: 'center' }}
                   >
                     by user {String(b.userId)} · {formatDate(b.createdAt)} ·{' '}
-                    <span className={`admin-badge ${b.isActive ? 'ok' : 'danger'}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                       {b.isActive ? 'active' : 'hidden'}
                     </span>
                   </span>

src/app/admin/radio/embed/embed-snippet.tsx

@@ -37,7 +37,7 @@ export function EmbedSnippet({
   const lines = snippet.split('\n').length;
 
   return (
-    <section className="admin-section">
+    <section className="mt-6">
       <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
         <h2 style={{ flex: 1, margin: 0 }}>{title}</h2>
         <button type="button" className="btn btn-primary" onClick={copy}>

src/app/admin/radio/embed/page.tsx

@@ -53,7 +53,7 @@ export default async function AdminRadioEmbedPage() {
         <Link href="/admin/radio/history">History</Link>
       </nav>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h1>Radio Embed</h1>
         <p className="muted" style={{ marginTop: '-0.4rem' }}>
           Copy-ready embed code for the live stream. Read-only — nothing here
@@ -62,7 +62,7 @@ export default async function AdminRadioEmbedPage() {
           <code>radio_stream_url</code>).
         </p>
 
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
             label="Stream URL"
             value={hasStream ? 'Configured' : 'Missing'}
@@ -80,7 +80,7 @@ export default async function AdminRadioEmbedPage() {
       </section>
 
       {!hasStream ? (
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>No stream URL configured</h2>
           <p className="muted">
             There is no <code>radio_stream_url</code> set, so there is nothing to
@@ -98,7 +98,7 @@ export default async function AdminRadioEmbedPage() {
         </section>
       ) : (
         <>
-          <section className="admin-section">
+          <section className="mt-6">
             <h2>Live preview</h2>
             <p className="muted" style={{ marginTop: '-0.4rem' }}>
               This is the bare <code>&lt;audio&gt;</code> player as visitors will

src/app/admin/radio/history/page.tsx

@@ -95,7 +95,7 @@ export default async function AdminRadioHistoryPage() {
           </p>
         </div>
       ) : (
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard label="Shows logged" value={history.length} icon="🎙️" />
           <StatusCard
             label="On air now"
@@ -113,7 +113,7 @@ export default async function AdminRadioHistoryPage() {
       ) : null}
 
       {history.length > 0 ? (
-        <section className="admin-section">
+        <section className="mt-6">
           <h2>Show log ({history.length})</h2>
           <table>
             <thead>
@@ -139,7 +139,7 @@ export default async function AdminRadioHistoryPage() {
                     {h.endedAt ? (
                       <span className="muted">{formatDate(h.endedAt)}</span>
                     ) : (
-                      <span className="admin-badge ok">on air</span>
+                      <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">on air</span>
                     )}
                   </td>
                   <td className="muted">{formatDuration(h.startedAt, h.endedAt)}</td>

src/app/admin/radio/moderation/page.tsx

@@ -51,11 +51,11 @@ export default async function AdminRadioModerationPage() {
         Review and remove radio shouts (50 most recent).
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent Shouts ({shouts.length})</h2>
         {shouts.length === 0 ? (
           <p className="muted">No shouts to moderate.</p>

src/app/admin/radio/monitoring/page.tsx

@@ -224,7 +224,7 @@ export default async function AdminRadioMonitoringPage() {
         <Link href="/admin/radio/history">History</Link>
       </nav>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Radio Monitoring</h2>
         <p className="muted" style={{ marginTop: '-0.4rem' }}>
           Read-only live probe of the configured radio endpoints
@@ -234,7 +234,7 @@ export default async function AdminRadioMonitoringPage() {
           <Link href="/admin/radio/settings">Settings</Link>.
         </p>
 
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
             label="Stream"
             value={
@@ -261,14 +261,14 @@ export default async function AdminRadioMonitoringPage() {
         </div>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Endpoint diagnostics</h2>
         <p className="muted" style={{ marginTop: '-0.4rem' }}>
-          <span className="admin-badge ok">OK</span> reachable ·{' '}
+          <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">OK</span> reachable ·{' '}
-          <span className="admin-badge">WARN</span> not configured ·{' '}
+          <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)]">WARN</span> not configured ·{' '}
-          <span className="admin-badge danger">ERROR</span> fetch failed / timed out.
+          <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> fetch failed / timed out.
         </p>
-        <div className="admin-diag">
+        <div className="flex flex-col">
           {endpoints.map((ep) => {
             let state: 'ok' | 'warn' | 'danger';
             let detail: string;

src/app/admin/radio/page.tsx

@@ -121,7 +121,7 @@ export default async function AdminRadioPage() {
         Latest shouts, DJ applications and on-air schedules (25 most recent of each).
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
         <StatusCard
           label="Pending applications"
@@ -138,7 +138,7 @@ export default async function AdminRadioPage() {
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent Shouts ({shouts.length})</h2>
         {shouts.length === 0 ? (
           <p className="muted">No shouts to moderate.</p>
@@ -175,7 +175,7 @@ export default async function AdminRadioPage() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>DJ Applications ({applications.length})</h2>
         {applications.length === 0 ? (
           <p className="muted">No applications submitted.</p>
@@ -203,7 +203,7 @@ export default async function AdminRadioPage() {
                   <td>{a.musicStyle ?? '—'}</td>
                   <td>{a.discordUsername ?? '—'}</td>
                   <td>
-                    <span className={`admin-badge ${statusBadgeClass(a.status)}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === 'ok' ? 'bg-green-600/20 text-[var(--color-text)]' : statusBadgeClass(a.status) === 'danger' ? 'bg-red-500/22 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'}`}>
                       {a.status}
                     </span>
                   </td>
@@ -215,7 +215,7 @@ export default async function AdminRadioPage() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Schedules ({schedules.length})</h2>
         {schedules.length === 0 ? (
           <p className="muted">No schedules configured.</p>
@@ -242,7 +242,7 @@ export default async function AdminRadioPage() {
                   <td>{formatTime(sc.endTime)}</td>
                   <td>{sc.showName ?? '—'}</td>
                   <td>
-                    <span className={`admin-badge ${sc.isActive ? 'ok' : 'danger'}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                       {sc.isActive ? 'active' : 'inactive'}
                     </span>
                   </td>

src/app/admin/radio/points/page.tsx

@@ -66,7 +66,7 @@ export default async function AdminRadioPointsPage({
         <Link href="/admin/radio/history">History</Link>
       </nav>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Radio Listener Points</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           Reward listeners with currency for time spent on the radio. Edits write
@@ -77,11 +77,11 @@ export default async function AdminRadioPointsPage({
 
         {saved === "1" ? (
           <p>
-            <span className="admin-badge ok">Saved</span>
+            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Saved</span>
           </p>
         ) : null}
 
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
             label="Points"
             value={enabled ? "Enabled" : "Disabled"}
@@ -103,7 +103,7 @@ export default async function AdminRadioPointsPage({
         </div>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Settings</h2>
         <form action={savePoints}>
           <div className="grid cols-2">

src/app/admin/radio/ranks/page.tsx

@@ -61,7 +61,7 @@ export default async function AdminRadioRanksPage() {
           </p>
         </div>
       ) : (
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard label="Ranks" value={ranks.length} icon="🎖️" />
           <StatusCard
             label="Active"
@@ -72,7 +72,7 @@ export default async function AdminRadioRanksPage() {
         </div>
       )}
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Add rank</h2>
         <form action={createRadioRank} className="card">
           <div className="grid cols-3">
@@ -108,7 +108,7 @@ export default async function AdminRadioRanksPage() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Existing ranks ({ranks.length})</h2>
         {ranks.length === 0 ? (
           <p className="muted">No ranks yet — add one above.</p>
@@ -126,7 +126,7 @@ export default async function AdminRadioRanksPage() {
                   }}
                 >
                   <strong>#{String(r.id)}</strong>
-                  <span className={`admin-badge ${r.isActive ? 'ok' : 'danger'}`}>
+                  <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                     {r.isActive ? 'active' : 'inactive'}
                   </span>
                 </div>

src/app/admin/radio/settings/page.tsx

@@ -241,7 +241,7 @@ export default async function AdminRadioSettingsPage() {
           </p>
         </div>
       ) : (
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
             label="Radio"
             value={radioEnabled ? 'Enabled' : 'Disabled'}

src/app/admin/rare-values/page.tsx

@@ -46,7 +46,7 @@ export default async function AdminRareValues() {
         rendered as a tab on the public rare values page.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Categories" value={categories.length} icon="🗂️" />
         <StatusCard label="Rare items" value={values.length} icon="💎" />
       </div>
@@ -82,8 +82,8 @@ export default async function AdminRareValues() {
               >
                 <div style={{ display: "flex", gap: "0.6rem", alignItems: "baseline", flexWrap: "wrap" }}>
                   <strong>{cat.name}</strong>
-                  <span className="admin-badge">badge {cat.badge}</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)]">badge {cat.badge}</span>
-                  <span className="admin-badge">priority {cat.priority}</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)]">priority {cat.priority}</span>
                   <span className="muted">{rows.length} item{rows.length === 1 ? "" : "s"}</span>
                 </div>
                 <form action={deleteCategory}>
@@ -112,7 +112,7 @@ export default async function AdminRareValues() {
                       <td>{v.creditValue ?? "—"}</td>
                       <td>{v.currencyValue ?? "—"}</td>
                       <td>
-                        <span className="admin-badge">{v.currencyType}</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)]">{v.currencyType}</span>
                       </td>
                       <td className="muted">{v.furnitureIcon}</td>
                       <td>

src/app/admin/rooms/page.tsx

@@ -73,7 +73,7 @@ export default async function AdminRooms({
         {total} room{total === 1 ? "" : "s"} total.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label={q ? "Matching rooms" : "Total rooms"} value={total} icon="🏠" />
         <StatusCard label="Open (this page)" value={openOnPage} state="ok" icon="🔓" />
         <StatusCard label="Users in-room (this page)" value={usersOnPage} icon="👥" />
@@ -110,7 +110,7 @@ export default async function AdminRooms({
                   {r.users} / {r.usersMax}
                 </td>
                 <td>
-                  <span className={`admin-badge ${r.state === "open" ? "ok" : "danger"}`}>
+                  <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.state === "open" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                     {r.state}
                   </span>
                 </td>

src/app/admin/settings/page.tsx

@@ -21,12 +21,12 @@ export default async function AdminSettings() {
         Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Settings" value={settings.length} icon="🗄️" />
         <StatusCard label="With comment" value={documented} icon="📝" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Add / overwrite</h2>
         <form action={createSetting} className="card">
           <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -40,9 +40,9 @@ export default async function AdminSettings() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>
-          Settings <span className="admin-badge">{settings.length}</span>
+          Settings <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)]">{settings.length}</span>
         </h2>
         {settings.length === 0 ? (
           <p className="muted">No settings yet.</p>

src/app/admin/shop/page.tsx

@@ -51,7 +51,7 @@ export default async function AdminShop() {
         shown in the store; credits/duckets/diamonds/badges are what the buyer receives.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Packages" value={packages.length} icon="🛍️" />
         <StatusCard label="Recent orders" value={orders.length} icon="🧾" />
         <StatusCard
@@ -62,7 +62,7 @@ export default async function AdminShop() {
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Packages ({packages.length})</h2>
         {packages.length === 0 ? (
           <p className="muted">No shop packages yet.</p>
@@ -102,7 +102,7 @@ export default async function AdminShop() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent orders ({orders.length})</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           Read-only PayPal transaction log (<code>website_paypal_transactions</code>).
@@ -138,7 +138,7 @@ export default async function AdminShop() {
                       <td>
                         {o.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)]"}`}
                           >
                             {o.status}
                           </span>

src/app/admin/subscriptions/page.tsx

@@ -52,7 +52,7 @@ export default async function AdminSubscriptions() {
         Active Habbo Club / VIP subscriptions (expiry > now). Read-only.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Active subs" value={active.length} icon="⭐" />
         <StatusCard label="Types" value={types} icon="🏷️" />
         <StatusCard
@@ -63,7 +63,7 @@ export default async function AdminSubscriptions() {
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Active subscriptions ({active.length})</h2>
         <div className="card">
           <table>
@@ -85,7 +85,7 @@ export default async function AdminSubscriptions() {
                     <td>{s.userId ?? "—"}</td>
                     <td>{s.subscriptionType ?? "—"}</td>
                     <td>
-                      <span className={`admin-badge ${soon ? "" : "ok"}`}>
+                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${soon ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
                         {soon ? "Expiring" : "Active"}
                       </span>
                     </td>

src/app/admin/tags/page.tsx

@@ -56,7 +56,7 @@ export default async function AdminTagsPage() {
           </p>
         </div>
       ) : (
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard label="Tags" value={tags.length} icon="🏷️" />
           <StatusCard
             label="In use"
@@ -114,7 +114,7 @@ export default async function AdminTagsPage() {
         </div>
       </form>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>All tags</h2>
         {tags.length === 0 ? (
           <p className="muted">No tags yet.</p>
@@ -152,8 +152,8 @@ export default async function AdminTagsPage() {
                   </td>
                   <td>
                     <span
-                      className={`admin-badge ${
+                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${
-                        (usage.get(String(t.id)) ?? 0) > 0 ? 'ok' : ''
+                        (usage.get(String(t.id)) ?? 0) > 0 ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'
                       }`}
                     >
                       {usage.get(String(t.id)) ?? 0}

src/app/admin/teams/page.tsx

@@ -40,7 +40,7 @@ export default async function AdminTeams() {
         Staff rank definitions shown on the public team page.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Team ranks" value={teams.length} icon="🛡️" />
         <StatusCard
           label="Visible"
@@ -84,7 +84,7 @@ export default async function AdminTeams() {
         </form>
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Ranks ({teams.length})</h2>
         {teams.length === 0 ? (
           <p className="muted">No teams yet.</p>
@@ -131,7 +131,7 @@ export default async function AdminTeams() {
                       </span>
                     </td>
                     <td>
-                      <span className={`admin-badge ${t.hiddenRank ? "" : "ok"}`}>
+                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
                         {t.hiddenRank ? "hidden" : "visible"}
                       </span>
                     </td>

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

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>

src/app/admin/users/[id]/page.tsx

@@ -39,7 +39,7 @@ export default async function AdminUserDetail({
         {user.motto ? user.motto : "No motto set."}
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="User ID" value={user.id} icon="🆔" />
         <StatusCard label="Rank" value={user.rank} icon="🎖️" />
         <StatusCard label="Credits" value={user.credits} icon="💰" />
@@ -51,14 +51,14 @@ export default async function AdminUserDetail({
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Overview</h2>
-        <div className="admin-info-grid">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
           <InfoItem label="Username" value={user.username} />
           <InfoItem
             label="Status"
             value={
-              <span className={`admin-badge ${isOnline ? "ok" : ""}`}>
+              <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${isOnline ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
                 {isOnline ? "online" : "offline"}
               </span>
             }
@@ -69,7 +69,7 @@ export default async function AdminUserDetail({
         </div>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Actions</h2>
         <div className="grid cols-2">
           <form action={giveCurrency} className="card">

src/app/admin/users/page.tsx

@@ -37,7 +37,7 @@ export default async function AdminUsers({
         {q ? `Search results for “${q}”.` : "Most recent accounts 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 users" value={total} icon="👥" />
         <StatusCard label="On this page" value={users.length} icon="📄" />
         <StatusCard
@@ -63,7 +63,7 @@ export default async function AdminUsers({
         </button>
       </form>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Accounts ({total})</h2>
         {users.length === 0 ? (
           <p className="muted">No users match this search.</p>
@@ -90,7 +90,7 @@ export default async function AdminUsers({
                     <td>{u.rank}</td>
                     <td>{u.credits}</td>
                     <td>
-                      <span className={`admin-badge ${u.online === "1" ? "ok" : ""}`}>
+                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
                         {u.online === "1" ? "online" : "offline"}
                       </span>
                     </td>

src/app/admin/vouchers/page.tsx

@@ -61,7 +61,7 @@ export default async function AdminVouchers() {
         use a given voucher once, up to its max uses.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Vouchers" value={vouchers.length} icon="🎟️" />
         <StatusCard
           label="Active"
@@ -106,7 +106,7 @@ export default async function AdminVouchers() {
         <button type="submit" className="btn btn-primary">Create voucher</button>
       </form>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Vouchers ({vouchers.length})</h2>
         <div className="card">
           <table>
@@ -136,11 +136,11 @@ export default async function AdminVouchers() {
                     </td>
                     <td>
                       {expired ? (
-                        <span className="admin-badge danger">Expired</span>
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Expired</span>
                       ) : usedUp ? (
-                        <span className="admin-badge">Used up</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)]">Used up</span>
                       ) : (
-                        <span className="admin-badge ok">Active</span>
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Active</span>
                       )}
                     </td>
                     <td className="muted">{fmtDate(v.expiresAt)}</td>

src/app/admin/vpn/page.tsx

@@ -31,7 +31,7 @@ export default async function AdminVpn({
 
   return (
     <main>
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>VPN / Proxy Detection</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           Block registrations from detected VPN/proxy IPs at sign-up. Settings
@@ -41,12 +41,12 @@ export default async function AdminVpn({
         </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)]" style={{ display: "inline-block" }}>
             VPN settings saved
           </p>
         ) : null}
 
-        <div className="admin-stats">
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
             label="Protection"
             value={enabled ? "On" : "Off"}
@@ -57,7 +57,7 @@ export default async function AdminVpn({
         </div>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Settings</h2>
         <form action={saveVpn} className="card">
           <div style={{ marginBottom: "1rem" }}>
@@ -147,7 +147,7 @@ export default async function AdminVpn({
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Raw IP allow / deny list</h2>
         <p className="muted" style={{ marginTop: "-0.4rem" }}>
           VPN detection screens unknown IPs automatically. To explicitly allow

src/app/admin/wordfilter/page.tsx

@@ -25,11 +25,11 @@ export default async function AdminWordFilter() {
         Words added here are blocked in-game. Saving pushes the list to the emulator.
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Filtered words" value={words.length} icon="🚫" />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Add word</h2>
         <form action={addWord} className="card">
           <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -47,9 +47,9 @@ export default async function AdminWordFilter() {
         </form>
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>
-          Words <span className="admin-badge">{words.length}</span>
+          Words <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)]">{words.length}</span>
         </h2>
         {words.length === 0 ? (
           <p className="muted">No filtered words.</p>

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>

src/app/developers/page.tsx

@@ -299,28 +299,28 @@ const GROUPS: Group[] = [
 ];
 
 const METHOD_CLASS: Record<Method, string> = {
-  GET: "ok",
+  GET: "bg-green-600/20 text-[var(--color-text)]",
-  POST: "",
+  POST: "bg-[var(--color-primary)]/18 text-[var(--color-text)]",
-  DELETE: "danger",
+  DELETE: "bg-red-500/22 text-[var(--color-text)]",
 };
 
 function AuthTag({ endpoint }: { endpoint: Endpoint }) {
   if (endpoint.bearer) {
     return (
-      <span className="admin-badge" title="Requires Authorization: Bearer <token>">
+      <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)]" title="Requires Authorization: Bearer <token>">
         🔒 Bearer
       </span>
     );
   }
   if (endpoint.session) {
     return (
-      <span className="admin-badge" title="Requires a signed-in web session">
+      <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)]" title="Requires a signed-in web session">
         🔒 Session
       </span>
     );
   }
   return (
-    <span className="admin-badge ok" title="No authentication required">
+    <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]" title="No authentication required">
       Public
     </span>
   );
@@ -355,7 +355,7 @@ function EndpointRow({ endpoint }: { endpoint: Endpoint }) {
           overflowX: "auto",
         }}
       >
-        <span className={`admin-badge ${METHOD_CLASS[endpoint.method]}`}>{endpoint.method}</span>
+        <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${METHOD_CLASS[endpoint.method]}`}>{endpoint.method}</span>
         <span>{endpoint.path}</span>
       </code>
       <span className="muted" style={{ flex: "1 1 14rem", minWidth: "12rem" }}>
@@ -387,7 +387,7 @@ export default function DevelopersPage() {
         <div style={{ display: "grid", gap: "0.75rem" }}>
           <p className="muted" style={{ margin: 0 }}>
             Most reads are <strong>open</strong> and need no credentials. Endpoints marked{" "}
-            <span className="admin-badge">🔒 Bearer</span> require a personal access token sent in
+            <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)]">🔒 Bearer</span> require a personal access token sent in
             the request header:
           </p>
           <code
@@ -411,7 +411,7 @@ export default function DevelopersPage() {
             <code>POST</code> to <code>/api/tokens</code> — the plaintext token is returned{" "}
             <strong>once</strong> and never shown again, so store it safely. You can list and revoke
             your tokens at <code>/api/me/tokens</code>. These token-management endpoints are marked{" "}
-            <span className="admin-badge">🔒 Session</span> because they use your signed-in web
+            <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)]">🔒 Session</span> because they use your signed-in web
             session rather than a Bearer token.
           </p>
           <p className="muted" style={{ margin: 0 }}>

src/app/globals.css

@@ -436,136 +436,7 @@ tbody tr:hover {
 }
 
 /* ── Admin panel (Housekeeping) ─────────────────────────────────
-   Faithful to AtomCMS's Filament panel: dark #2d2d44 sidebar with
+   Page content wrapper — table card styling and h1 formatting. */
-   grouped nav + amber active state, a topbar, and a light content
-   area with carded tables. Scoped under .admin so it never leaks
-   into the public site. */
-.admin {
-  display: grid;
-  grid-template-columns: 232px minmax(0, 1fr);
-  gap: 1.25rem;
-  align-items: start;
-}
-@media (max-width: 860px) {
-  .admin {
-    grid-template-columns: 1fr;
-  }
-}
-
-.admin-sidebar {
-  position: sticky;
-  top: 1rem;
-  align-self: start;
-  background: #2d2d44;
-  color: #e7e9f3;
-  border-radius: 14px;
-  padding: 0.85rem 0.7rem;
-  box-shadow: var(--shadow-card);
-  max-height: calc(100vh - 2rem);
-  overflow-y: auto;
-}
-.admin-sidebar-head {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.3rem 0.45rem 0.85rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
-  margin-bottom: 0.5rem;
-}
-.admin-avatar {
-  flex: none;
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  display: grid;
-  place-items: center;
-  font-weight: 800;
-  color: #1a1a2e;
-  background: var(--color-primary, #eeb425);
-}
-.admin-sidebar-name {
-  font-weight: 700;
-  font-size: 0.92rem;
-  line-height: 1.1;
-  color: #fff;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.admin-rank-badge {
-  display: inline-block;
-  margin-top: 0.2rem;
-  font-size: 0.66rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #1a1a2e;
-  background: var(--color-primary, #eeb425);
-  border-radius: 999px;
-  padding: 0.05rem 0.5rem;
-}
-.admin-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-}
-.admin-nav-group {
-  margin-top: 0.55rem;
-}
-.admin-nav-group-label {
-  display: block;
-  font-size: 0.64rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.09em;
-  color: rgba(231, 233, 243, 0.42);
-  padding: 0.3rem 0.55rem 0.25rem;
-}
-.admin-nav-link {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.43rem 0.6rem;
-  border-radius: 9px;
-  color: #c8cbe0;
-  font-size: 0.85rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: background 0.15s ease, color 0.15s ease;
-}
-.admin-nav-link:hover {
-  background: rgba(255, 255, 255, 0.07);
-  color: #fff;
-  text-decoration: none;
-}
-.admin-nav-link.active {
-  background: var(--color-primary, #eeb425);
-  color: #1a1a2e;
-  box-shadow: 0 2px 8px rgba(238, 180, 37, 0.35);
-}
-
-.admin-content {
-  min-width: 0;
-}
-.admin-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  background: var(--color-surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 0.7rem 1.15rem;
-  margin-bottom: 1.1rem;
-  box-shadow: var(--shadow-card);
-}
-.admin-topbar h2 {
-  margin: 0;
-  font-size: 1.05rem;
-  font-weight: 800;
-}
-
-/* Page content inside the admin panel */
 .admin-page main > h1:first-child,
 .admin-page > h1:first-child {
   margin-top: 0;
@@ -603,138 +474,6 @@ tbody tr:hover {
 .admin-page tbody td {
   border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
 }
-/* status pill used by some admin lists */
-.admin-badge {
-  display: inline-block;
-  font-size: 0.72rem;
-  font-weight: 700;
-  padding: 0.1rem 0.55rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
-  color: var(--color-text);
-}
-.admin-badge.ok {
-  background: color-mix(in srgb, #16a34a 20%, transparent);
-}
-.admin-badge.danger {
-  background: color-mix(in srgb, #ef4444 22%, transparent);
-}
-
-/* Dashboard: live-status tiles, server info, diagnostics */
-.admin-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 0.9rem;
-  margin-bottom: 1.4rem;
-}
-.admin-stat-card {
-  background: var(--color-surface);
-  border: 1px solid var(--border);
-  border-left: 4px solid var(--color-text-muted);
-  border-radius: 12px;
-  padding: 0.85rem 1rem;
-  box-shadow: var(--shadow-card);
-}
-.admin-stat-card.ok {
-  border-left-color: #16a34a;
-}
-.admin-stat-card.warn {
-  border-left-color: var(--color-primary, #eeb425);
-}
-.admin-stat-card.danger {
-  border-left-color: #ef4444;
-}
-.admin-stat-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-.admin-stat-label {
-  font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
-}
-.admin-stat-icon {
-  font-size: 1.1rem;
-  line-height: 1;
-}
-.admin-stat-value {
-  font-size: 1.7rem;
-  font-weight: 800;
-  line-height: 1.1;
-  margin-top: 0.3rem;
-}
-.admin-stat-hint {
-  font-size: 0.78rem;
-  color: var(--color-text-muted);
-  margin-top: 0.15rem;
-}
-
-.admin-info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 0.6rem 1.2rem;
-}
-.admin-info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-  font-size: 0.88rem;
-}
-
-.admin-diag {
-  display: flex;
-  flex-direction: column;
-}
-.admin-diag-row {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.5rem 0.1rem;
-  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
-}
-.admin-diag-row:first-child {
-  border-top: none;
-}
-.admin-diag-label {
-  font-weight: 700;
-  font-size: 0.88rem;
-}
-.admin-diag-detail {
-  flex: 1;
-  font-size: 0.82rem;
-}
-.admin-dot {
-  flex: none;
-  width: 9px;
-  height: 9px;
-  border-radius: 999px;
-  background: var(--color-text-muted);
-}
-.admin-dot.ok {
-  background: #16a34a;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent);
-}
-.admin-dot.warn {
-  background: var(--color-primary, #eeb425);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
-}
-.admin-dot.danger {
-  background: #ef4444;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent);
-}
-
-.admin-section {
-  margin-top: 1.6rem;
-}
-.admin-section > h2 {
-  margin: 0 0 0.7rem;
-  font-size: 1.15rem;
-}
-
 /* ── Public design system (faithful to the atom theme) ──────────
    content-card = surface card with a primary-tinted header (icon +
    title + subtitle) and a padded body — the signature atom block. */

src/components/admin/admin-nav-link.tsx

@@ -14,7 +14,12 @@ export function AdminNavLink({ href, label }: { href: string; label: string }) {
     href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
 
   return (
-    <Link href={href} className={`admin-nav-link${active ? " active" : ""}`}>
+    <Link
+      href={href}
+      className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[#c8cbe0] text-sm font-semibold no-underline transition-[background,color] duration-150 hover:bg-white/7 hover:text-white hover:no-underline ${
+        active ? "bg-[var(--color-primary)] text-[#1a1a2e] shadow-[0_2px_8px_rgba(238,180,37,0.35)]" : ""
+      }`}
+    >
       {label}
     </Link>
   );

src/components/admin/dashboard.tsx

@@ -27,18 +27,24 @@ export function StatusCard({
   state?: State;
   icon?: string;
 }) {
+  const borderColor =
+    state === "ok" ? "border-l-green-600" :
+    state === "warn" ? "border-l-[var(--color-primary)]" :
+    state === "danger" ? "border-l-red-500" :
+    "border-l-[var(--color-text-muted)]";
+
   return (
-    <div className={`admin-stat-card ${state}`}>
+    <div className={`bg-[var(--color-surface)] border border-[var(--border)] border-l-4 ${borderColor} rounded-xl p-3.5 shadow-card`}>
-      <div className="admin-stat-top">
+      <div className="flex items-center justify-between gap-2">
-        <span className="admin-stat-label">{label}</span>
+        <span className="text-[0.72rem] font-bold uppercase tracking-wider text-[var(--color-text-muted)]">{label}</span>
         {icon ? (
-          <span className="admin-stat-icon" aria-hidden>
+          <span className="text-lg leading-none" aria-hidden>
             {icon}
           </span>
         ) : null}
       </div>
-      <div className="admin-stat-value">{value}</div>
+      <div className="text-[1.7rem] font-extrabold leading-tight mt-1.5">{value}</div>
-      {hint ? <div className="admin-stat-hint">{hint}</div> : null}
+      {hint ? <div className="text-[0.78rem] text-[var(--color-text-muted)] mt-1">{hint}</div> : null}
     </div>
   );
 }
@@ -54,12 +60,19 @@ export function DiagnosticRow({
   state: Exclude<State, "neutral">;
 }) {
   const text = state === "ok" ? "OK" : state === "warn" ? "WARN" : "ERROR";
+  const dotColor = state === "ok" ? "bg-green-600 shadow-[0_0_0_3px_rgba(22,163,74,0.22)]" :
+    state === "warn" ? "bg-[var(--color-primary)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]" :
+    "bg-red-500 shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
+  const badgeColor = state === "ok" ? "bg-green-600/20" :
+    state === "danger" ? "bg-red-500/22" :
+    "bg-[var(--color-primary)]/18";
+
   return (
-    <div className="admin-diag-row">
+    <div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--border)] first:border-t-0">
-      <span className={`admin-dot ${state}`} aria-hidden />
+      <span className={`flex-none w-[9px] h-[9px] rounded-full ${dotColor}`} aria-hidden />
-      <span className="admin-diag-label">{label}</span>
+      <span className="font-bold text-sm">{label}</span>
-      <span className="admin-diag-detail muted">{detail}</span>
+      <span className="flex-1 text-[0.82rem] text-[var(--color-text-muted)]">{detail}</span>
-      <span className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}>
+      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${badgeColor} text-[var(--color-text)]`}>
         {text}
       </span>
     </div>
@@ -69,8 +82,8 @@ export function DiagnosticRow({
 /** Small labelled key/value used in the server-info card. */
 export function InfoItem({ label, value }: { label: string; value: ReactNode }) {
   return (
-    <div className="admin-info-item">
+    <div className="flex flex-col gap-0.5 text-sm">
-      <span className="muted">{label}</span>
+      <span className="text-[var(--color-text-muted)]">{label}</span>
       <strong>{value}</strong>
     </div>
   );
@@ -95,49 +108,50 @@ export function OnlineUsersWidget({
   };
 
   return (
-    <div className="online-users-widget">
+    <div className="bg-[var(--color-surface)] rounded-xl border border-[var(--border)] p-6">
-      <div className="widget-header">
+      <div className="flex justify-between items-center mb-4">
-        <h3>Online Now</h3>
+        <h3 className="m-0 text-lg font-semibold text-[var(--color-text)]">Online Now</h3>
-        <span className="online-count">
+        <span className="text-sm text-[var(--color-text-muted)] bg-[var(--color-primary)]/10 px-3 py-1 rounded-full">
           {isLoading ? "..." : users.length} users
         </span>
       </div>
       
-      <div className="online-users-list">
+      <div className="max-h-80 overflow-y-auto flex flex-col gap-3">
         {users.length === 0 ? (
-          <div className="empty-state">
+          <div className="py-8 text-center bg-[var(--color-text-muted)]/5 rounded-lg">
-            <span className="muted">No users online</span>
+            <span className="text-[var(--color-text-muted)] text-sm">No users online</span>
           </div>
         ) : (
           users.map((user) => (
-            <div key={user.id} className="online-user-row">
+            <div
-              <div className="user-avatar-container">
+              key={user.id}
+              className="flex items-center gap-3 p-3 bg-[var(--color-text-muted)]/5 rounded-lg transition-all duration-150 hover:bg-[var(--color-text-muted)]/10 hover:translate-x-0.5"
+            >
+              <div className="relative flex-none w-[50px] h-[62px]">
                 <img
                   src={`https://www.habbo.com/habbo-imaging/avatarimage?width=50&height=62&direction=2&headonly=1&crop=face&action=wav&gender=m&look=${encodeURIComponent(user.look)}`}
                   alt={user.username}
-                  className="user-avatar"
+                  className="w-full h-full rounded object-cover border border-[var(--border)]"
                   loading="lazy"
                 />
                 {user.roomId && user.roomName && (
-                  <div className="room-indicator">
+                  <div className="absolute -bottom-0.5 -right-0.5">
-                    <span className="room-dot" />
+                    <span className="block w-[10px] h-[10px] bg-green-500 rounded-full border-2 border-[var(--color-surface)]" />
                   </div>
                 )}
               </div>
               
-              <div className="user-info">
+              <div className="flex-1 min-w-0">
-                <div className="user-name">
+                <div className="font-medium text-[var(--color-text)] mb-1 truncate">
-                  <a href={`/u/${user.username}`} className="user-link">
+                  <a href={`/u/${user.username}`} className="text-inherit no-underline hover:text-[var(--color-primary)] hover:underline">
                     {user.username}
                   </a>
                 </div>
-                <div className="user-status">
+                <div className="text-[0.75rem] text-[var(--color-text-muted)]">
                   {user.roomId && user.roomName ? (
-                    <span className="in-room">
+                    <span className="text-green-500 font-medium">🏠 {user.roomName}</span>
-                      🏠 {user.roomName}
-                    </span>
                   ) : (
-                    <span className="afk">⏱️ {formatLastSeen(user.lastActivity)}</span>
+                    <span className="text-red-500">⏱️ {formatLastSeen(user.lastActivity)}</span>
                   )}
                 </div>
               </div>
@@ -145,136 +159,6 @@ export function OnlineUsersWidget({
           ))
         )}
       </div>
-
-      <style jsx>{`
-        .online-users-widget {
-          background: var(--color-surface);
-          border-radius: 12px;
-          border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
-          padding: 1.5rem;
-        }
-        
-        .widget-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 1rem;
-        }
-        
-        .widget-header h3 {
-          margin: 0;
-          font-size: 1.125rem;
-          font-weight: 600;
-          color: var(--color-text);
-        }
-        
-        .online-count {
-          font-size: 0.875rem;
-          color: var(--color-text-muted);
-          background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-          padding: 0.25rem 0.75rem;
-          border-radius: 999px;
-        }
-        
-        .online-users-list {
-          max-height: 320px;
-          overflow-y: auto;
-          display: flex;
-          flex-direction: column;
-          gap: 0.75rem;
-        }
-        
-        .empty-state {
-          padding: 2rem;
-          text-align: center;
-          background: color-mix(in srgb, var(--color-text-muted) 5%, transparent);
-          border-radius: 8px;
-        }
-        
-        .online-user-row {
-          display: flex;
-          align-items: center;
-          gap: 0.75rem;
-          padding: 0.75rem;
-          background: color-mix(in srgb, var(--color-text-muted) 5%, transparent);
-          border-radius: 8px;
-          transition: all 0.15s ease;
-        }
-        
-        .online-user-row:hover {
-          background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
-          transform: translateX(2px);
-        }
-        
-        .user-avatar-container {
-          position: relative;
-          width: 50px;
-          height: 62px;
-          flex-shrink: 0;
-        }
-        
-        .user-avatar {
-          width: 100%;
-          height: 100%;
-          border-radius: 4px;
-          object-fit: cover;
-          border: 1px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);
-        }
-        
-        .room-indicator {
-          position: absolute;
-          bottom: -2px;
-          right: -2px;
-        }
-        
-        .room-dot {
-          width: 10px;
-          height: 10px;
-          background: #22c55e;
-          border-radius: 999px;
-          border: 2px solid var(--color-surface);
-          display: block;
-        }
-        
-        .user-info {
-          flex: 1;
-          min-width: 0;
-        }
-        
-        .user-name {
-          font-weight: 500;
-          color: var(--color-text);
-          margin-bottom: 0.25rem;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        
-        .user-name .user-link {
-          color: inherit;
-          text-decoration: none;
-          transition: color 0.15s ease;
-        }
-        
-        .user-name .user-link:hover {
-          color: var(--color-primary);
-          text-decoration: underline;
-        }
-        
-        .user-status {
-          font-size: 0.75rem;
-          color: var(--color-text-muted);
-        }
-        
-        .in-room {
-          color: #22c55e;
-          font-weight: 500;
-        }
-        
-        .afk {
-          color: #ef4444;
-        }
-      `}</style>
     </div>
   );
 }