refactor: convert admin pages to Tailwind and improve media uploads; fix TypeScript error in commandocentrum

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

@@ -38,14 +38,14 @@ export function EmbedSnippet({
 
   return (
     <section className="mt-6">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <h2 style={{ flex: 1, margin: 0 }}>{title}</h2>
+      <div className="flex items-center justify-between gap-4 mb-1">
+        <h2 className="m-0 text-base font-bold text-[var(--color-text)]">{title}</h2>
         <button type="button" className="btn btn-primary" onClick={copy}>
           {copied ? 'Copied!' : 'Copy'}
         </button>
       </div>
       {description ? (
-        <p className="muted" style={{ marginTop: '0.4rem' }}>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
           {description}
         </p>
       ) : null}
@@ -56,13 +56,7 @@ export function EmbedSnippet({
         rows={Math.min(Math.max(lines + 1, 3), 14)}
         onFocus={(e) => e.currentTarget.select()}
         spellCheck={false}
-        style={{
-          width: '100%',
-          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-          fontSize: '0.85rem',
-          whiteSpace: 'pre',
-          resize: 'vertical',
-        }}
+        className="w-full font-mono text-sm resize-vertical"
       />
     </section>
   );

src/app/admin/radio/page.tsx

@@ -108,7 +108,7 @@ export default async function AdminRadioPage() {
 
   return (
     <main>
-      <nav className="muted" style={{ marginBottom: '0.5rem' }}>
+      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
         <Link href="/admin/radio">Radio</Link> ·{' '}
         <Link href="/admin/radio/settings">Settings</Link> ·{' '}
         <Link href="/admin/radio/banners">Banners</Link> ·{' '}
@@ -117,7 +117,7 @@ export default async function AdminRadioPage() {
       </nav>
 
       <h1>Radio Moderation</h1>
-      <p className="muted" style={{ marginTop: '-0.4rem' }}>
+      <p className="text-xs text-gray-500 dark:text-gray-400">
         Latest shouts, DJ applications and on-air schedules (25 most recent of each).
       </p>
 
@@ -141,7 +141,7 @@ export default async function AdminRadioPage() {
       <section className="mt-6">
         <h2>Recent Shouts ({shouts.length})</h2>
         {shouts.length === 0 ? (
-          <p className="muted">No shouts to moderate.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">No shouts to moderate.</p>
         ) : (
           <table>
             <thead>
@@ -156,10 +156,10 @@ export default async function AdminRadioPage() {
             <tbody>
               {shouts.map((s) => (
                 <tr key={String(s.id)}>
-                  <td>{String(s.id)}</td>
+                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(s.id)}</td>
                   <td>{String(s.userId)}</td>
                   <td>{s.message}</td>
-                  <td className="muted">{formatDate(s.createdAt)}</td>
+                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(s.createdAt)}</td>
                   <td>
                     <form action={deleteShout}>
                       <input type="hidden" name="id" value={String(s.id)} />
@@ -178,7 +178,7 @@ export default async function AdminRadioPage() {
       <section className="mt-6">
         <h2>DJ Applications ({applications.length})</h2>
         {applications.length === 0 ? (
-          <p className="muted">No applications submitted.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">No applications submitted.</p>
         ) : (
           <table>
             <thead>
@@ -207,7 +207,7 @@ export default async function AdminRadioPage() {
                       {a.status}
                     </span>
                   </td>
-                  <td className="muted">{formatDate(a.createdAt)}</td>
+                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(a.createdAt)}</td>
                 </tr>
               ))}
             </tbody>
@@ -218,7 +218,7 @@ export default async function AdminRadioPage() {
       <section className="mt-6">
         <h2>Schedules ({schedules.length})</h2>
         {schedules.length === 0 ? (
-          <p className="muted">No schedules configured.</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">No schedules configured.</p>
         ) : (
           <table>
             <thead>