refactor: enhance admin panel styling with better card patterns

- Dashboard: use admin-card for sections, refine progress bars and action badges
- Applications: enhanced card styling with p-3 and better text hierarchy
- Emulator: convert remaining 'card' classes to 'admin-card'
- All changes eliminate inline styles and use consistent Tailwind patterns

Co-authored-by: openhands <[email protected]>

src/app/admin/applications/page.tsx

@@ -46,10 +46,15 @@ export default async function AdminApplications() {
 
   return (
     <main>
-      <h1>Staff Applications</h1>
-      <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        Pending applications from players requesting a staff rank.
-      </p>
+      <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">
+          <ClipboardList size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Staff Applications</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Pending applications from players requesting a staff rank.</p>
+        </div>
+      </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
@@ -61,24 +66,17 @@ export default async function AdminApplications() {
       </div>
 
       <section className="mt-6">
-        <h2>Applications ({applications.length})</h2>
+        <h2 className="admin-section-title">Applications ({applications.length})</h2>
         {applications.length === 0 ? (
-          <p className="muted">No pending applications.</p>
+          <div className="admin-empty">No pending applications.</div>
         ) : (
           <div className="grid cols-2">
             {applications.map((a) => {
               const username = userMap.get(a.userId);
               return (
-                <article key={String(a.id)} className="card">
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "baseline",
-                      gap: "0.5rem",
-                    }}
-                  >
-                    <h3 style={{ margin: "0 0 0.25rem" }}>
+                <article key={String(a.id)} className="admin-card p-3">
+                  <div className="flex items-baseline justify-between gap-2 mb-1">
+                    <h3 className="m-0 text-sm font-semibold text-[var(--color-text)]">
                       {username ? (
                         <Link href={`/admin/users/${a.userId}`}>{username}</Link>
                       ) : (
@@ -87,10 +85,10 @@ export default async function AdminApplications() {
                     </h3>
                     <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 }}>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 m-0 mb-2">
                     {formatDate(a.createdAt)}
                   </p>
-                  <p style={{ whiteSpace: "pre-wrap", margin: "0 0 0.75rem" }}>{a.content}</p>
+                  <p className="text-sm text-[var(--color-text)] whitespace-pre-wrap m-0 mb-3">{a.content}</p>
                   <form action={dismissApplication}>
                     <input type="hidden" name="id" value={String(a.id)} />
                     <button type="submit" className="btn btn-danger">