Mobile: smaller fonts, single column, less padding

app/page.tsx

@@ -77,7 +77,7 @@ export default function MissionControl() {
       <header style={{
         position: 'relative',
         zIndex: 10,
-        padding: '20px',
+        padding: '15px',
         borderBottom: '1px solid rgba(255,255,255,0.08)',
         display: 'flex',
         justifyContent: 'space-between',
@@ -101,7 +101,7 @@ export default function MissionControl() {
           </div>
           <div>
             <h1 style={{ 
-              fontSize: '1.5rem', 
+              fontSize: '1rem', 
               fontWeight: 700,
               background: 'linear-gradient(90deg, #fff 0%, #a0a0a0 100%)',
               WebkitBackgroundClip: 'text',
@@ -147,7 +147,7 @@ export default function MissionControl() {
       <main style={{ 
         position: 'relative', 
         zIndex: 10, 
-        padding: '20px',
+        padding: '15px',
         maxWidth: '1200px',
         margin: '0 auto'
       }}>
@@ -158,7 +158,7 @@ export default function MissionControl() {
             justifyContent: 'center', 
             height: '50vh',
             flexDirection: 'column',
-            gap: '20px'
+            gap: '10px'
           }}>
             <div style={{ 
               width: '60px', 
@@ -197,7 +197,7 @@ function TasksBoard({ tasks }: { tasks: Task[] }) {
   ];
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '10px' }}>
       {columns.map((col, i) => (
         <div 
           key={col.status} 
@@ -333,7 +333,7 @@ function CronMonitor({ crons }: { crons: CronJob[] }) {
           ⏱
         </div>
         <div>
-          <h2 style={{ color: '#fff', fontSize: '1.2rem' }}>System Cron Jobs</h2>
+          <h2 style={{ color: '#fff', fontSize: '1rem' }}>System Cron Jobs</h2>
           <p style={{ color: '#666', fontSize: '0.75rem' }}>{crons.length} active jobs</p>
         </div>
       </div>
@@ -411,7 +411,7 @@ function MemoryVault({ memories }: { memories: Memory[] }) {
           💾
         </div>
         <div>
-          <h2 style={{ color: '#fff', fontSize: '1.2rem' }}>Memory Vault</h2>
+          <h2 style={{ color: '#fff', fontSize: '1rem' }}>Memory Vault</h2>
           <p style={{ color: '#666', fontSize: '0.75rem' }}>{memories.length} memories stored</p>
         </div>
       </div>
@@ -435,14 +435,14 @@ function MemoryVault({ memories }: { memories: Memory[] }) {
         }}
       />
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '20px' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '10px' }}>
         {filtered.map((mem, i) => (
           <div 
             key={mem.id}
             style={{
               background: 'rgba(20, 20, 30, 0.6)',
               borderRadius: '12px',
-              padding: '20px',
+              padding: '15px',
               border: '1px solid rgba(255,255,255,0.05)',
               backdropFilter: 'blur(20px)',
               transition: 'all 0.3s ease',
@@ -497,7 +497,7 @@ function Team() {
   ];
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '20px' }}>
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '10px' }}>
       {members.map((member, i) => (
         <div 
           key={i}