refactor: improve admin panel styling with new CSS helpers and page layout patterns

- Add .admin-card, .admin-filter-bar, .admin-stat-row, .admin-stat-chip, .admin-section-title, .admin-info-grid, .admin-empty CSS helpers
- Improve admin table styling (uppercase headers, better spacing, border-separate)
- Add dark mode support for admin tables and cards
- Update housekeeping and settings pages to use new layout components
- Clean up inline styles in housekeeping and settings pages

src/app/admin/settings/page.tsx

@@ -16,36 +16,41 @@ export default async function AdminSettings() {
 
   return (
     <main>
-      <h1>CMS Settings</h1>
-      <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
-      </p>
-
-      <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 className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <span className="text-lg">⚙️</span>
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">CMS Settings</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
+            Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
+          </p>
+        </div>
       </div>
 
-      <section className="mt-6">
-        <h2>Add / overwrite</h2>
-        <form action={createSetting} className="card">
-          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+      <div className="admin-stat-row">
+        <span className="admin-stat-chip">{settings.length} settings</span>
+        <span className="admin-stat-chip">{documented} with comment</span>
+      </div>
+
+      <section>
+        <h2 className="admin-section-title">Add / overwrite</h2>
+        <form action={createSetting} className="admin-card">
+          <div className="flex gap-2 flex-wrap">
             <input name="key" placeholder="key" required />
-            <input name="value" placeholder="value" style={{ flex: 1, minWidth: 160 }} />
+            <input name="value" placeholder="value" className="flex-1 min-w-[160px]" />
             <input name="comment" placeholder="comment" />
-            <button type="submit" className="btn btn-primary">
-              Save
-            </button>
+            <button type="submit" className="btn btn-primary">Save</button>
           </div>
         </form>
       </section>
 
-      <section className="mt-6">
-        <h2>
+      <section>
+        <h2 className="admin-section-title">
           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>
+          <div className="admin-empty">No settings yet.</div>
         ) : (
           <div className="grid">
             {settings.map((s) => (