Phase 1: Layout & Core Design System

src/app.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 @import "tailwindcss";
 
 @theme {
@@ -18,13 +18,13 @@
   --color-orange-500:  #fd6216;
   --color-orange-600:  #e5560f;
 
-  --font-family-sans: 'Exo 2', sans-serif;
+  --font-family-sans: 'Inter', sans-serif;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
-  font-family: 'Exo 2', sans-serif;
+  font-family: 'Inter', sans-serif;
   background: #f9f9fd;
   color: #0a1d37;
   -webkit-font-smoothing: antialiased;

src/components/AdminShell.tsx

@@ -334,7 +334,7 @@ export default function AdminShell(props: { children: JSX.Element }) {
 
           <div class="flex min-w-0 flex-1 flex-col">
             <header class="h-[97px] border-b border-[#e5e7eb] bg-white shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_0px_rgba(0,0,0,0.1)]">
-              <div class="mx-auto flex h-full w-full max-w-[783px] items-center justify-between px-6">
+              <div class="flex h-full w-full items-center justify-between px-8">
                 <GlobalSearch />
                 <div class="flex items-center gap-3">
                   <button type="button" class="relative inline-flex h-11 w-11 items-center justify-center rounded-[14px] text-[#000032] hover:bg-[#f9fafb]" aria-label="Notifications">
@@ -363,7 +363,7 @@ export default function AdminShell(props: { children: JSX.Element }) {
             </header>
 
             <div class="min-h-0 flex-1 overflow-y-auto">
-              <main class="mx-auto w-full max-w-[783px] px-6 pb-8 pt-6">
+              <main class="w-full px-8 pb-8 pt-6">
                 <ShowTabs
                   tabs={tabs()}
                   isTabActive={isTabActive}