diff --git a/TaxBaik.Web/Components/Admin/App.razor b/TaxBaik.Web/Components/Admin/App.razor
index 96c6ff9..35b8075 100644
--- a/TaxBaik.Web/Components/Admin/App.razor
+++ b/TaxBaik.Web/Components/Admin/App.razor
@@ -24,6 +24,9 @@
             <span>배포 또는 서버 재시작 중이면 잠시 후 자동으로 새로고침됩니다.</span>
         </div>
     </div>
+    <MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="mudTheme" />
+    <MudDialogProvider />
+    <MudSnackbarProvider />
     <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
     <script src="js/admin-session.js"></script>
@@ -31,3 +34,90 @@
     <script>window.taxbaikAdminSession?.watchReconnect();</script>
 </body>
 </html>
+
+@code {
+    private bool isDarkMode = false;
+    private MudTheme mudTheme = new()
+    {
+        Palette = new PaletteLight()
+        {
+            Primary = "#1976D2",
+            PrimaryContrastText = "#FFFFFF",
+            Secondary = "#2D9F7E",
+            SecondaryContrastText = "#FFFFFF",
+            Tertiary = "#FF8A50",
+            TertiaryContrastText = "#FFFFFF",
+            Surface = "#F5F7FA",
+            Background = "#FFFFFF",
+            BackgroundGrey = "#F8F9FB",
+            DrawerBackground = "#FFFFFF",
+            DrawerText = "#424242",
+            AppbarBackground = "#FFFFFF",
+            AppbarText = "#424242",
+            TextPrimary = "#1A1A1A",
+            TextSecondary = "#64748B",
+            TextDisabled = "#94A3B8",
+            ActionDefault = "#1976D2",
+            ActionDisabled = "#BDBDBD",
+            Divider = "#E2E8F0",
+            DividerLight = "#F1F5F9",
+            Error = "#DC2626",
+            ErrorContrastText = "#FFFFFF",
+            Warning = "#F59E0B",
+            WarningContrastText = "#FFFFFF",
+            Info = "#06B6D4",
+            InfoContrastText = "#FFFFFF",
+            Success = "#16A34A",
+            SuccessContrastText = "#FFFFFF",
+        },
+        LayoutProperties = new LayoutProperties()
+        {
+            DefaultBorderRadius = "8px"
+        },
+        Typography = new Typography()
+        {
+            Default = new Default()
+            {
+                FontSize = ".875rem",
+                FontWeight = 400,
+                LineHeight = 1.5
+            },
+            H1 = new H1()
+            {
+                FontSize = "2.5rem",
+                FontWeight = 600,
+                LineHeight = 1.2
+            },
+            H2 = new H2()
+            {
+                FontSize = "2rem",
+                FontWeight = 600,
+                LineHeight = 1.3
+            },
+            H3 = new H3()
+            {
+                FontSize = "1.75rem",
+                FontWeight = 600,
+                LineHeight = 1.3
+            },
+            H4 = new H4()
+            {
+                FontSize = "1.5rem",
+                FontWeight = 600,
+                LineHeight = 1.4
+            },
+            H5 = new H5()
+            {
+                FontSize = "1.25rem",
+                FontWeight = 500,
+                LineHeight = 1.4
+            },
+            H6 = new H6()
+            {
+                FontSize = "1rem",
+                FontWeight = 500,
+                LineHeight = 1.5
+            }
+        }
+    };
+}
diff --git a/TaxBaik.Web/Program.cs b/TaxBaik.Web/Program.cs
index 5b1108a..ca54b5b 100644
--- a/TaxBaik.Web/Program.cs
+++ b/TaxBaik.Web/Program.cs
@@ -111,8 +111,12 @@ builder.Services.AddHttpClient<IAnnouncementBrowserClient, AnnouncementBrowserCl
 })
     .AddHttpMessageHandler<TokenRefreshHandler>();
 
-// UI & 캐시
-builder.Services.AddMudServices();
+// UI & 캐시 (MudBlazor Theme Customization)
+builder.Services.AddMudServices(config =>
+{
+    config.SnackbarConfiguration.HideTransitionDuration = 400;
+    config.SnackbarConfiguration.ShowTransitionDuration = 300;
+});
 builder.Services.AddMemoryCache();
 builder.Services.AddResponseCompression(opts => {
     opts.Providers.Add<GzipCompressionProvider>();
diff --git a/TaxBaik.Web/wwwroot/css/admin.css b/TaxBaik.Web/wwwroot/css/admin.css
index e728cff..c68c580 100644
--- a/TaxBaik.Web/wwwroot/css/admin.css
+++ b/TaxBaik.Web/wwwroot/css/admin.css
@@ -1,69 +1,220 @@
 /* ============================================================================
-   Admin Layout & Dashboard Styles
-   - Integrates with MudBlazor without overriding Mud components
-   - Focuses on custom admin-* and accent-* classes only
+   TaxBaik Admin UI - Enterprise Grade Design System
+   - CSS Custom Properties (Design Tokens)
+   - Material Design 3 Principles
+   - WCAG 2.1 AA Accessibility
+   - Modern responsive design
+   ============================================================================ */
+
+/* ============================================================================
+   Design Tokens (Color, Spacing, Typography, Shadow)
+   ============================================================================ */
+
+:root {
+  /* Color System */
+  --primary-color: #1976D2;
+  --primary-light: #E3F2FD;
+  --primary-lighter: #BBDEFB;
+  --primary-dark: #1565C0;
+  --primary-darker: #0D47A1;
+  --primary-contrast: #FFFFFF;
+
+  --secondary-color: #2D9F7E;
+  --secondary-light: #E8F7F3;
+  --secondary-dark: #1D7A64;
+  --secondary-contrast: #FFFFFF;
+
+  --tertiary-color: #FF8A50;
+  --tertiary-light: #FFEBEE;
+  --tertiary-dark: #E65100;
+  --tertiary-contrast: #FFFFFF;
+
+  --success-color: #16A34A;
+  --success-light: #DCFCE7;
+  --success-dark: #15803D;
+
+  --warning-color: #F59E0B;
+  --warning-light: #FEF3C7;
+  --warning-dark: #B45309;
+
+  --error-color: #DC2626;
+  --error-light: #FEE2E2;
+  --error-dark: #991B1B;
+
+  --info-color: #06B6D4;
+  --info-light: #CFFAFE;
+  --info-dark: #0E7490;
+
+  /* Semantic Colors */
+  --text-primary: #1A1A1A;
+  --text-secondary: #64748B;
+  --text-tertiary: #94A3B8;
+  --text-disabled: #CBD5E1;
+  --text-inverse: #FFFFFF;
+
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F8F9FB;
+  --bg-tertiary: #F1F5F9;
+  --bg-overlay: rgba(15, 23, 42, 0.08);
+  --bg-overlay-strong: rgba(15, 23, 42, 0.12);
+
+  --border-color: #E2E8F0;
+  --border-color-light: #F1F5F9;
+  --border-color-strong: #CBD5E1;
+
+  /* Spacing Scale */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Typography Scale */
+  --font-family-base: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Shadow System (Elevation) */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Z-Index Scale */
+  --z-dropdown: 100;
+  --z-modal-backdrop: 1000;
+  --z-modal: 1001;
+  --z-popover: 1050;
+  --z-tooltip: 1100;
+}
+
+/* ============================================================================
+   Global Reset & Base Styles
    ============================================================================ */
 
-/* Global Reset */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html, body {
-    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background-color: #f5f5f5;
-    color: #333;
+  font-family: var(--font-family-base);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
 }
 
-/* Utility Classes */
+/* ============================================================================
+   Utility Classes
+   ============================================================================ */
+
 .d-flex {
-    display: flex;
+  display: flex;
 }
 
 .align-center {
-    align-items: center;
+  align-items: center;
 }
 
 .justify-center {
-    justify-content: center;
+  justify-content: center;
 }
 
 .justify-space-between {
-    justify-content: space-between;
+  justify-content: space-between;
 }
 
 .pa-8 {
-    padding: 32px !important;
+  padding: var(--space-8) !important;
 }
 
 .mb-4 {
-    margin-bottom: 16px !important;
+  margin-bottom: var(--space-4) !important;
 }
 
 .mb-6 {
-    margin-bottom: 24px !important;
+  margin-bottom: var(--space-6) !important;
 }
 
 .mt-4 {
-    margin-top: 16px !important;
+  margin-top: var(--space-4) !important;
 }
 
 .text-center {
-    text-align: center;
+  text-align: center;
 }
 
 .ml-3 {
-    margin-left: 12px !important;
+  margin-left: var(--space-3) !important;
 }
 
 .cursor-pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .font-weight-bold {
-    font-weight: 600 !important;
+  font-weight: var(--font-weight-bold) !important;
+}
+
+/* ============================================================================
+   Focus Visible (Accessibility)
+   ============================================================================ */
+
+:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
 }
 
 /* ============================================================================
@@ -71,156 +222,182 @@ html, body {
    ============================================================================ */
 
 .admin-login-page.mud-container {
-    width: 100%;
-    margin: 0 auto;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .admin-login-page.mud-container-maxwidth-small {
-    max-width: 600px !important;
+  max-width: 480px !important;
 }
 
 .admin-login-page .mud-paper {
-    background-color: white;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    padding: 16px;
+  background-color: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-8);
 }
 
 .admin-login-page .mud-paper.elevation-3 {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-lg);
 }
 
 .admin-login-page .mud-typography {
-    color: #333;
-    line-height: 1.5;
+  color: var(--text-primary);
+  line-height: var(--line-height-normal);
 }
 
 .admin-login-page .mud-typography--h4 {
-    font-size: 2.125rem;
-    font-weight: 500;
-    color: #1976d2;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--primary-color);
+  margin-bottom: var(--space-4);
 }
 
 .admin-login-page .mud-typography--body1 {
-    font-size: 1rem;
+  font-size: var(--font-size-base);
 }
 
 .admin-login-page input[type="text"],
 .admin-login-page input[type="password"] {
-    width: 100%;
-    padding: 12px;
-    margin-bottom: 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-family: inherit;
-    font-size: 1rem;
-    transition: border-color 0.3s;
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-4);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-size: var(--font-size-base);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 44px;
 }
 
 .admin-login-page input[type="text"]:focus,
 .admin-login-page input[type="password"]:focus {
-    outline: none;
-    border-color: #1976d2;
-    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--primary-light);
 }
 
 .admin-login-page label {
-    display: block;
-    margin-bottom: 6px;
-    font-weight: 500;
-    color: #555;
-    font-size: 0.875rem;
+  display: block;
+  margin-bottom: var(--space-2);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
 }
 
 .admin-login-page button {
-    width: 100%;
-    padding: 12px 24px;
-    margin-top: 12px;
-    background-color: #1976d2;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s;
+  width: 100%;
+  padding: var(--space-3) var(--space-6);
+  margin-top: var(--space-4);
+  background-color: var(--primary-color);
+  color: var(--primary-contrast);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+  min-height: 44px;
 }
 
 .admin-login-page button:hover {
-    background-color: #1565c0;
+  background-color: var(--primary-dark);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.admin-login-page button:active {
+  transform: translateY(0);
 }
 
 .admin-login-page button:disabled {
-    background-color: #bdbdbd;
-    cursor: not-allowed;
+  background-color: var(--text-disabled);
+  cursor: not-allowed;
+  transform: none;
 }
 
 .admin-login-page .mud-alert {
-    padding: 12px 16px;
-    margin-bottom: 16px;
-    border-radius: 4px;
-    background-color: #ffebee;
-    border-left: 4px solid #c62828;
-    color: #c62828;
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-4);
+  border-radius: var(--radius-md);
+  border-left: 4px solid transparent;
 }
 
 .admin-login-page .mud-alert--error {
-    background-color: #ffebee;
-    color: #c62828;
+  background-color: var(--error-light);
+  color: var(--error-dark);
+  border-left-color: var(--error-color);
 }
 
 .admin-login-page .mud-alert--success {
-    background-color: #e8f5e9;
-    color: #2e7d32;
+  background-color: var(--success-light);
+  color: var(--success-dark);
+  border-left-color: var(--success-color);
 }
 
 .admin-login-page .mud-alert--info {
-    background-color: #e3f2fd;
-    color: #1565c0;
-}
-
-.admin-login-page .mud-progress-circular {
-    display: inline-block;
-}
-
-.loading {
-    opacity: 0.6;
+  background-color: var(--info-light);
+  color: var(--info-dark);
+  border-left-color: var(--info-color);
 }
 
 /* Reconnect Modal */
 .admin-reconnect-modal {
-    display: none;
+  display: none;
 }
 
 .admin-reconnect-modal.components-reconnect-show,
 .admin-reconnect-modal.components-reconnect-failed,
 .admin-reconnect-modal.components-reconnect-rejected {
-    position: fixed;
-    inset: 0;
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 24px;
-    background: rgba(15, 23, 42, 0.48);
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  background: rgba(15, 23, 42, 0.48);
+  backdrop-filter: blur(4px);
 }
 
 .admin-reconnect-card {
-    width: min(420px, 100%);
-    padding: 24px;
-    border-radius: 16px;
-    background: #fff;
-    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
+  width: min(420px, 100%);
+  padding: var(--space-6);
+  border-radius: var(--radius-xl);
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-2xl);
+  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .admin-reconnect-card strong,
 .admin-reconnect-card span {
-    display: block;
+  display: block;
+}
+
+.admin-reconnect-card strong {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-3);
 }
 
 .admin-reconnect-card span {
-    margin-top: 8px;
-    color: #64748b;
+  margin-top: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* ============================================================================
@@ -228,714 +405,960 @@ html, body {
    ============================================================================ */
 
 .admin-shell {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: var(--bg-secondary);
 }
 
 .admin-topbar {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 12px 24px;
-    background-color: #fff;
-    border-bottom: 1px solid #e0e0e0;
-    z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-6);
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  z-index: var(--z-dropdown);
+  box-shadow: var(--shadow-xs);
 }
 
 .admin-menu-button {
-    margin-right: 8px;
+  margin-right: var(--space-2);
 }
 
 .admin-topbar-title {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.admin-topbar-title span {
+  color: var(--text-primary);
 }
 
 .admin-topbar-action {
-    white-space: nowrap;
+  white-space: nowrap;
+  min-height: 40px;
+  padding: var(--space-2) var(--space-4);
 }
 
 .admin-drawer {
-    width: 280px;
-    background-color: #fff;
-    border-right: 1px solid #e0e0e0;
+  width: 280px;
+  background-color: var(--bg-primary);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
 }
 
 .admin-drawer-brand {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 20px 16px;
-    border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-4);
+  border-bottom: 1px solid var(--border-color-light);
 }
 
 .admin-brand-mark {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
-    color: white;
-    font-weight: bold;
-    font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+  color: var(--primary-contrast);
+  font-weight: var(--font-weight-bold);
+  font-size: 1.125rem;
+  flex-shrink: 0;
 }
 
 .admin-nav {
-    padding: 16px 0;
+  padding: var(--space-4) 0;
+  flex: 1;
+  overflow-y: auto;
 }
 
 .admin-nav .mud-nav-link,
 .admin-nav .mud-nav-group-header {
-    margin: 4px 8px !important;
-    border-radius: 8px !important;
+  margin: var(--space-1) var(--space-2) !important;
+  border-radius: var(--radius-md) !important;
+  transition: all var(--transition-base) !important;
+}
+
+.admin-nav .mud-nav-link:hover {
+  background-color: var(--primary-light) !important;
 }
 
 .admin-nav .mud-nav-link.active {
-    background-color: #e3f2fd !important;
+  background-color: var(--primary-light) !important;
+  color: var(--primary-dark) !important;
+  font-weight: var(--font-weight-semibold) !important;
+}
+
+.admin-nav .mud-nav-link::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--primary-color);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.admin-nav .mud-nav-link.active::before {
+  opacity: 1;
 }
 
 .admin-drawer-footer {
-    padding: 16px;
-    border-top: 1px solid #f0f0f0;
-    font-size: 0.875rem;
+  padding: var(--space-4);
+  border-top: 1px solid var(--border-color-light);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
 }
 
 .admin-main {
-    flex: 1;
-    overflow-y: auto;
-    background-color: #f5f5f5;
+  flex: 1;
+  overflow-y: auto;
+  background-color: var(--bg-secondary);
 }
 
 .admin-content {
-    padding: 32px;
-    max-width: 1400px;
-    margin: 0 auto;
-    width: 100%;
+  padding: var(--space-8);
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 /* ============================================================================
    Dashboard Page Styles
    ============================================================================ */
 
-/* Page Header */
 .admin-page-hero {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 24px;
-    margin-bottom: 32px;
-    padding-bottom: 24px;
-    border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-6);
+  margin-bottom: var(--space-8);
+  padding-bottom: var(--space-6);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.admin-page-hero > div {
-    flex: 1;
+.admin-page-hero > div:first-child {
+  flex: 1;
 }
 
 .admin-eyebrow {
-    display: block;
-    color: #1976d2;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
+  display: block;
+  color: var(--primary-color);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.5px;
+  margin-bottom: var(--space-1);
 }
 
 .admin-page-title {
-    display: block;
-    color: #1a1a1a;
-    font-weight: 600;
-    margin-bottom: 8px;
-    font-size: 1.75rem;
+  display: block;
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-3);
+  font-size: var(--font-size-3xl);
+  line-height: var(--line-height-tight);
 }
 
 .admin-page-subtitle {
-    display: block;
-    color: #666;
-    font-size: 0.95rem;
+  display: block;
+  color: var(--text-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
 }
 
-/* Metrics Grid - CSS Grid Layout */
+/* Metrics Grid */
 .admin-metric-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
-    margin-bottom: 32px;
-    width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-6);
+  margin-bottom: var(--space-8);
+  width: 100%;
 }
 
-/* Metric Card - Professional Dashboard Style */
+/* Metric Card - Enterprise Grade */
 .admin-metric-card {
-    padding: 24px;
-    border-radius: 12px;
-    background-color: #fff;
-    border: 1px solid #e8e8e8;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    min-height: 160px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    position: relative;
-    overflow: hidden;
+  padding: var(--space-6);
+  border-radius: var(--radius-lg);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  transition: all var(--transition-base);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 160px;
+  box-shadow: var(--shadow-xs);
+  position: relative;
+  overflow: hidden;
 }
 
 .admin-metric-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, currentColor, transparent);
-    opacity: 0;
-    transition: opacity 0.3s ease;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, currentColor, transparent);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
 }
 
 .admin-metric-card:hover {
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
-    border-color: #d0d0d0;
-    transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--border-color-strong);
+  transform: translateY(-4px);
 }
 
 .admin-metric-card:hover::before {
-    opacity: 1;
+  opacity: 1;
 }
 
-/* Metric Card Accent Colors */
+.admin-metric-card:active {
+  transform: translateY(-2px);
+}
+
+/* Card Accent Colors */
 .accent-blue {
-    background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
-    border-color: #bbdefb;
-    color: #1565c0;
+  background: linear-gradient(135deg, var(--primary-light) 0%, #E3F2FD 100%);
+  border-color: #BBDEFB;
+  color: var(--primary-dark);
 }
 
 .accent-blue:hover {
-    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-    border-color: #90caf9;
+  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
+  border-color: #90CAF9;
 }
 
 .accent-amber {
-    background: linear-gradient(135deg, #fff9f0 0%, #fff3e0 100%);
-    border-color: #ffe0b2;
-    color: #e65100;
+  background: linear-gradient(135deg, #FFEBEE 0%, #FFE0B2 100%);
+  border-color: var(--tertiary-color);
+  color: var(--tertiary-dark);
 }
 
 .accent-amber:hover {
-    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-    border-color: #ffcc80;
+  background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);
+  border-color: #FFAB91;
 }
 
 .accent-slate {
-    background: linear-gradient(135deg, #f5f7fa 0%, #eceff1 100%);
-    border-color: #cfd8dc;
-    color: #455a64;
+  background: linear-gradient(135deg, #F5F7FA 0%, #F1F5F9 100%);
+  border-color: #CBD5E1;
+  color: #455A64;
 }
 
 .accent-slate:hover {
-    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
-    border-color: #b0bec5;
+  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
+  border-color: #94A3B8;
 }
 
 .accent-green {
-    background: linear-gradient(135deg, #f1f9f6 0%, #e8f5e9 100%);
-    border-color: #c8e6c9;
-    color: #2e7d32;
+  background: linear-gradient(135deg, #DCFCE7 0%, #C8E6C9 100%);
+  border-color: var(--success-color);
+  color: var(--success-dark);
 }
 
 .accent-green:hover {
-    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-    border-color: #81c784;
+  background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%);
+  border-color: #81C784;
 }
 
 /* Surfaces & Containers */
 .admin-surface {
-    padding: 24px !important;
-    border-radius: 8px !important;
-    background-color: #fff !important;
-    border: 1px solid #e0e0e0 !important;
-    margin-bottom: 24px !important;
+  padding: var(--space-6) !important;
+  border-radius: var(--radius-lg) !important;
+  background-color: var(--bg-primary) !important;
+  border: 1px solid var(--border-color) !important;
+  margin-bottom: var(--space-6) !important;
+  box-shadow: var(--shadow-xs);
 }
 
 .admin-section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 16px;
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border-color-light);
 }
 
 .admin-section-header > div:first-child {
-    flex: 1;
+  flex: 1;
+}
+
+.admin-section-header h6 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+}
+
+.admin-section-header p {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: 0;
 }
 
 /* Tables */
 .admin-table {
-    width: 100%;
-    border-collapse: collapse;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
 }
 
 .admin-table thead {
-    background-color: #f5f5f5;
-    border-bottom: 2px solid #e0e0e0;
+  background-color: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .admin-table thead th {
-    padding: 12px 16px;
-    text-align: left;
-    font-weight: 600;
-    color: #666;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .admin-table tbody tr {
-    border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border-color-light);
+  transition: background-color var(--transition-fast);
 }
 
 .admin-table tbody tr:hover {
-    background-color: #fafafa;
+  background-color: var(--bg-overlay);
+}
+
+.admin-table tbody tr:focus-within {
+  background-color: var(--bg-overlay-strong);
 }
 
 .admin-table tbody td {
-    padding: 12px 16px;
-    color: #333;
+  padding: var(--space-3) var(--space-4);
+  color: var(--text-primary);
+  vertical-align: middle;
 }
 
 .admin-table tbody a {
-    color: #1976d2;
-    text-decoration: none;
-    font-weight: 600;
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: var(--font-weight-semibold);
+  transition: color var(--transition-fast);
 }
 
 .admin-table tbody a:hover {
-    text-decoration: underline;
+  color: var(--primary-dark);
+  text-decoration: underline;
+}
+
+.admin-table tbody a:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
 }
 
 .admin-table .mud-chip-small {
-    height: 24px !important;
-    font-size: 0.75rem !important;
+  height: 24px !important;
+  font-size: var(--font-size-xs) !important;
+  font-weight: var(--font-weight-medium);
+  min-width: 60px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Loading States */
+.admin-skeleton {
+  background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-overlay-strong) 50%, var(--bg-overlay) 100%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Empty States */
+.admin-empty-state {
+  text-align: center;
+  padding: var(--space-12);
+  color: var(--text-secondary);
+}
+
+.admin-empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-4);
+  opacity: 0.5;
+}
+
+.admin-empty-state-title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+}
+
+.admin-empty-state-description {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
 }
 
 /* ============================================================================
-   Responsive Design
+   Responsive Design - Mobile First
    ============================================================================ */
 
-/* ============================================================================
-   Responsive Design - Mobile First Approach
-   ============================================================================ */
-
-/* Desktop XXL: 1920px+ - 4 columns, full spacing */
+/* Desktop XXL: 1920px+ */
 @media (min-width: 1920px) {
-    .admin-content {
-        padding: 40px;
-        max-width: 100%;
-    }
+  .admin-content {
+    padding: var(--space-10);
+    max-width: 100%;
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: repeat(4, 1fr);
-        gap: 24px;
-    }
+  .admin-metric-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-6);
+  }
 
-    .admin-metric-card {
-        min-height: 180px;
-        padding: 28px;
-    }
+  .admin-metric-card {
+    min-height: 180px;
+    padding: var(--space-7);
+  }
 
-    .admin-page-hero {
-        gap: 32px;
-        margin-bottom: 40px;
-        padding-bottom: 32px;
-    }
+  .admin-page-hero {
+    gap: var(--space-8);
+    margin-bottom: var(--space-10);
+    padding-bottom: var(--space-8);
+  }
 }
 
-/* Desktop XL: 1440px - 4 columns, large spacing */
+/* Desktop XL: 1440px */
 @media (min-width: 1440px) and (max-width: 1919px) {
-    .admin-metric-grid {
-        grid-template-columns: repeat(4, 1fr);
-        gap: 22px;
-    }
+  .admin-metric-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-6);
+  }
 
-    .admin-metric-card {
-        min-height: 170px;
-        padding: 26px;
-    }
+  .admin-metric-card {
+    min-height: 170px;
+    padding: var(--space-6);
+  }
 }
 
-/* Desktop L: 1024px - 4 columns, medium spacing */
+/* Desktop L: 1024px */
 @media (min-width: 1024px) and (max-width: 1439px) {
-    .admin-drawer {
-        width: 280px;
-    }
+  .admin-drawer {
+    width: 280px;
+  }
 
-    .admin-content {
-        padding: 28px;
-    }
+  .admin-content {
+    padding: var(--space-7);
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: repeat(4, 1fr);
-        gap: 18px;
-    }
+  .admin-metric-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-5);
+  }
 
-    .admin-metric-card {
-        min-height: 160px;
-        padding: 22px;
-    }
+  .admin-metric-card {
+    min-height: 160px;
+    padding: var(--space-5);
+  }
 
-    .admin-page-hero {
-        gap: 24px;
-    }
+  .admin-page-hero {
+    gap: var(--space-6);
+  }
 
-    .admin-topbar {
-        padding: 12px 20px;
-    }
+  .admin-topbar {
+    padding: var(--space-3) var(--space-5);
+  }
 }
 
-/* Tablet L: 960px - 3 columns */
+/* Tablet L: 960px */
 @media (min-width: 960px) and (max-width: 1023px) {
-    .admin-drawer {
-        width: 260px;
-    }
+  .admin-drawer {
+    width: 260px;
+  }
 
-    .admin-content {
-        padding: 24px;
-    }
+  .admin-content {
+    padding: var(--space-6);
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 16px;
-    }
+  .admin-metric-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-5);
+  }
 
-    .admin-metric-card {
-        min-height: 150px;
-        padding: 20px;
-    }
+  .admin-metric-card {
+    min-height: 150px;
+    padding: var(--space-5);
+  }
 
-    .admin-page-title {
-        font-size: 1.75rem;
-    }
+  .admin-page-title {
+    font-size: var(--font-size-2xl);
+  }
 
-    .admin-surface {
-        padding: 22px;
-    }
+  .admin-surface {
+    padding: var(--space-5) !important;
+  }
+
+  .admin-table thead th,
+  .admin-table tbody td {
+    padding: var(--space-3) var(--space-3);
+  }
 }
 
-/* Tablet M: 768px - 2 columns */
+/* Tablet M: 768px */
 @media (min-width: 768px) and (max-width: 959px) {
-    .admin-drawer {
-        width: 200px;
-    }
+  .admin-shell {
+    flex-direction: row;
+  }
 
-    .admin-content {
-        padding: 20px;
-    }
+  .admin-drawer {
+    width: 240px;
+    min-width: 240px;
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 14px;
-    }
+  .admin-content {
+    padding: var(--space-5);
+  }
 
-    .admin-metric-card {
-        min-height: 140px;
-        padding: 18px;
-        font-size: 0.95rem;
-    }
+  .admin-metric-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-4);
+  }
 
-    .admin-page-title {
-        font-size: 1.5rem;
-    }
+  .admin-metric-card {
+    min-height: 140px;
+    padding: var(--space-4);
+    font-size: 0.95rem;
+  }
 
-    .admin-page-hero {
-        gap: 18px;
-        margin-bottom: 24px;
-    }
+  .admin-page-title {
+    font-size: var(--font-size-2xl);
+  }
 
-    .admin-surface {
-        padding: 18px;
-    }
+  .admin-page-hero {
+    gap: var(--space-4);
+    margin-bottom: var(--space-6);
+  }
 
-    .admin-table thead th {
-        padding: 10px 12px;
-        font-size: 0.8rem;
-    }
+  .admin-surface {
+    padding: var(--space-4) !important;
+  }
 
-    .admin-table tbody td {
-        padding: 10px 12px;
-        font-size: 0.9rem;
-    }
+  .admin-table thead th {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-xs);
+  }
 
-    .admin-topbar {
-        padding: 10px 16px;
-    }
+  .admin-table tbody td {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-sm);
+  }
+
+  .admin-topbar {
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .admin-section-header {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
 }
 
-/* Tablet S: 600px - 1 column, collapse drawer */
+/* Tablet S: 600px */
 @media (min-width: 600px) and (max-width: 767px) {
-    .admin-shell {
-        flex-direction: row;
-    }
+  .admin-shell {
+    flex-direction: column;
+  }
 
-    .admin-drawer {
-        width: 60px;
-        min-height: 100%;
-    }
+  .admin-drawer {
+    width: 100%;
+    height: auto;
+    max-height: 60px;
+    flex-direction: row;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    overflow-x: auto;
+  }
 
-    .admin-main {
-        flex: 1;
-    }
+  .admin-drawer-brand {
+    padding: var(--space-3) var(--space-4);
+    border-bottom: none;
+    border-right: 1px solid var(--border-color-light);
+    flex-shrink: 0;
+  }
 
-    .admin-content {
-        padding: 18px;
-    }
+  .admin-brand-mark {
+    width: 36px;
+    height: 36px;
+    font-size: 1rem;
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: 1fr;
-        gap: 12px;
-    }
+  .admin-nav {
+    display: flex;
+    flex-direction: row;
+    padding: var(--space-2);
+    gap: var(--space-1);
+    overflow-x: auto;
+    flex: 1;
+  }
 
-    .admin-metric-card {
-        min-height: 130px;
-        padding: 16px;
-    }
+  .admin-drawer-footer {
+    display: none;
+  }
 
-    .admin-page-title {
-        font-size: 1.35rem;
-    }
+  .admin-main {
+    flex: 1;
+  }
 
-    .admin-page-hero {
-        flex-direction: column;
-        gap: 12px;
-        margin-bottom: 20px;
-        padding-bottom: 16px;
-    }
+  .admin-content {
+    padding: var(--space-4);
+  }
 
-    .admin-surface {
-        padding: 16px;
-    }
+  .admin-metric-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+  }
 
-    .admin-section-header {
-        flex-direction: column;
-        gap: 12px;
-    }
+  .admin-metric-card {
+    min-height: 130px;
+    padding: var(--space-4);
+  }
 
-    .admin-topbar {
-        padding: 10px 12px;
-    }
+  .admin-page-title {
+    font-size: var(--font-size-xl);
+  }
 
-    .admin-topbar-title {
-        display: none;
-    }
+  .admin-page-hero {
+    flex-direction: column;
+    gap: var(--space-3);
+    margin-bottom: var(--space-5);
+    padding-bottom: var(--space-4);
+  }
 
-    .admin-table thead th {
-        padding: 8px 10px;
-        font-size: 0.75rem;
-    }
+  .admin-surface {
+    padding: var(--space-4) !important;
+  }
 
-    .admin-table tbody td {
-        padding: 8px 10px;
-        font-size: 0.85rem;
-    }
+  .admin-section-header {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .admin-topbar {
+    padding: var(--space-2) var(--space-4);
+  }
+
+  .admin-topbar-title {
+    display: none;
+  }
+
+  .admin-table thead th {
+    padding: var(--space-2) var(--space-2);
+    font-size: var(--font-size-xs);
+  }
+
+  .admin-table tbody td {
+    padding: var(--space-2) var(--space-2);
+    font-size: var(--font-size-sm);
+  }
 }
 
 /* Mobile L: 480px */
 @media (min-width: 480px) and (max-width: 599px) {
-    .admin-shell {
-        flex-direction: column;
-    }
+  .admin-shell {
+    flex-direction: column;
+  }
 
-    .admin-drawer {
-        width: 100%;
-        height: auto;
-        max-height: 60px;
-    }
+  .admin-drawer {
+    width: 100%;
+    height: auto;
+    max-height: auto;
+    flex-direction: column;
+  }
 
-    .admin-nav {
-        display: flex;
-        flex-direction: row;
-        padding: 8px;
-        gap: 4px;
-        overflow-x: auto;
-    }
+  .admin-drawer-brand {
+    padding: var(--space-3) var(--space-4);
+  }
 
-    .admin-content {
-        padding: 14px;
-    }
+  .admin-brand-mark {
+    width: 36px;
+    height: 36px;
+    font-size: 1rem;
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: 1fr;
-        gap: 10px;
-    }
+  .admin-nav {
+    display: flex;
+    flex-direction: row;
+    padding: var(--space-2);
+    gap: var(--space-1);
+    overflow-x: auto;
+  }
 
-    .admin-metric-card {
-        min-height: 110px;
-        padding: 14px;
-    }
+  .admin-drawer-footer {
+    display: none;
+  }
 
-    .admin-page-title {
-        font-size: 1.25rem;
-    }
+  .admin-content {
+    padding: var(--space-3);
+  }
 
-    .admin-page-subtitle {
-        font-size: 0.9rem;
-    }
+  .admin-metric-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
 
-    .admin-surface {
-        padding: 14px;
-    }
+  .admin-metric-card {
+    min-height: 110px;
+    padding: var(--space-3);
+  }
 
-    .admin-section-header {
-        flex-direction: column;
-        gap: 10px;
-        margin-bottom: 12px;
-        padding-bottom: 10px;
-    }
+  .admin-page-title {
+    font-size: var(--font-size-lg);
+  }
 
-    .admin-table thead th {
-        padding: 6px 8px;
-        font-size: 0.7rem;
-    }
+  .admin-page-subtitle {
+    font-size: var(--font-size-sm);
+  }
 
-    .admin-table tbody td {
-        padding: 6px 8px;
-        font-size: 0.8rem;
-    }
+  .admin-surface {
+    padding: var(--space-3) !important;
+  }
+
+  .admin-section-header {
+    flex-direction: column;
+    gap: var(--space-3);
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+  }
+
+  .admin-table thead th {
+    padding: var(--space-2) var(--space-1);
+    font-size: var(--font-size-xs);
+  }
+
+  .admin-table tbody td {
+    padding: var(--space-2) var(--space-1);
+    font-size: var(--font-size-sm);
+  }
+
+  .admin-topbar {
+    padding: var(--space-2) var(--space-3);
+    gap: var(--space-2);
+  }
+
+  .admin-topbar-action {
+    padding: var(--space-2) var(--space-2) !important;
+    font-size: var(--font-size-xs);
+    min-height: 36px;
+  }
 }
 
 /* Mobile S: <480px */
 @media (max-width: 479px) {
-    .admin-login-page.mud-container-maxwidth-small {
-        max-width: 100% !important;
-        padding: 12px;
-    }
+  .admin-login-page.mud-container-maxwidth-small {
+    max-width: 100% !important;
+    padding: var(--space-3);
+  }
 
-    .admin-login-page .mud-typography--h4 {
-        font-size: 1.3rem;
-    }
+  .admin-login-page .mud-typography--h4 {
+    font-size: var(--font-size-2xl);
+  }
 
-    .admin-shell {
-        flex-direction: column;
-        height: auto;
-    }
+  .admin-shell {
+    flex-direction: column;
+    height: auto;
+  }
 
-    .admin-topbar {
-        padding: 8px;
-        gap: 8px;
-    }
+  .admin-topbar {
+    padding: var(--space-2);
+    gap: var(--space-2);
+  }
 
-    .admin-topbar-action {
-        padding: 4px 8px !important;
-        font-size: 0.75rem;
-    }
+  .admin-topbar-action {
+    padding: var(--space-2) var(--space-2) !important;
+    font-size: var(--font-size-xs);
+    min-height: 36px;
+  }
 
-    .admin-drawer {
-        width: 100%;
-        height: auto;
-    }
+  .admin-drawer {
+    width: 100%;
+    height: auto;
+  }
 
-    .admin-drawer-brand {
-        padding: 12px;
-        gap: 8px;
-    }
+  .admin-drawer-brand {
+    padding: var(--space-3) var(--space-4);
+    gap: var(--space-2);
+  }
 
-    .admin-brand-mark {
-        width: 32px;
-        height: 32px;
-        font-size: 14px;
-    }
+  .admin-brand-mark {
+    width: 32px;
+    height: 32px;
+    font-size: var(--font-size-base);
+  }
 
-    .admin-nav {
-        display: flex;
-        flex-direction: row;
-        padding: 6px;
-        gap: 2px;
-        overflow-x: auto;
-    }
+  .admin-nav {
+    display: flex;
+    flex-direction: row;
+    padding: var(--space-2);
+    gap: var(--space-1);
+    overflow-x: auto;
+  }
 
-    .admin-main {
-        flex: 1;
-    }
+  .admin-nav .mud-nav-link {
+    min-width: 100px;
+    font-size: var(--font-size-xs);
+  }
 
-    .admin-content {
-        padding: 12px;
-        max-width: 100%;
-        margin: 0;
-    }
+  .admin-drawer-footer {
+    display: none;
+  }
 
-    .admin-page-hero {
-        flex-direction: column;
-        gap: 10px;
-        margin-bottom: 16px;
-        padding-bottom: 12px;
-    }
+  .admin-main {
+    flex: 1;
+  }
 
-    .admin-page-title {
-        font-size: 1.1rem;
-    }
+  .admin-content {
+    padding: var(--space-3);
+    max-width: 100%;
+    margin: 0;
+  }
 
-    .admin-page-subtitle {
-        font-size: 0.85rem;
-        display: none;
-    }
+  .admin-page-hero {
+    flex-direction: column;
+    gap: var(--space-3);
+    margin-bottom: var(--space-4);
+    padding-bottom: var(--space-3);
+  }
 
-    .admin-eyebrow {
-        font-size: 0.65rem;
-    }
+  .admin-page-title {
+    font-size: var(--font-size-lg);
+  }
 
-    .admin-metric-grid {
-        grid-template-columns: 1fr;
-        gap: 8px;
-    }
+  .admin-page-subtitle {
+    font-size: var(--font-size-sm);
+    display: block;
+  }
 
-    .admin-metric-card {
-        min-height: 100px;
-        padding: 12px;
-        border-radius: 8px;
-    }
+  .admin-eyebrow {
+    font-size: var(--font-size-xs);
+  }
 
-    .admin-surface {
-        padding: 12px;
-        border-radius: 6px;
-    }
+  .admin-metric-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
 
-    .admin-section-header {
-        flex-direction: column;
-        gap: 8px;
-        margin-bottom: 12px;
-        padding-bottom: 8px;
-    }
+  .admin-metric-card {
+    min-height: 100px;
+    padding: var(--space-3);
+    border-radius: var(--radius-md);
+  }
 
-    .admin-section-header h6 {
-        font-size: 1rem !important;
-    }
+  .admin-surface {
+    padding: var(--space-3) !important;
+    border-radius: var(--radius-md) !important;
+  }
 
-    .admin-section-header .mud-button {
-        width: 100%;
-    }
+  .admin-section-header {
+    flex-direction: column;
+    gap: var(--space-3);
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+  }
 
-    .admin-table {
-        font-size: 0.75rem;
-    }
+  .admin-section-header h6 {
+    font-size: var(--font-size-base) !important;
+  }
 
-    .admin-table thead th {
-        padding: 4px 6px;
-        font-size: 0.65rem;
-    }
+  .admin-section-header .mud-button {
+    width: 100%;
+  }
 
-    .admin-table tbody tr {
-        line-height: 1.2;
-    }
+  .admin-table {
+    font-size: var(--font-size-xs);
+  }
 
-    .admin-table tbody td {
-        padding: 4px 6px;
-        font-size: 0.75rem;
-    }
+  .admin-table thead th {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--font-size-xs);
+  }
+
+  .admin-table tbody tr {
+    line-height: var(--line-height-tight);
+  }
+
+  .admin-table tbody td {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--font-size-xs);
+  }
+
+  /* Touch Target Sizing (WCAG 2.5.5) */
+  .mud-button,
+  .mud-icon-button,
+  a,
+  input,
+  select,
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+/* ============================================================================
+   Reduced Motion Support (Accessibility)
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ============================================================================
+   Print Styles
+   ============================================================================ */
+
+@media print {
+  .admin-topbar,
+  .admin-drawer,
+  .admin-topbar-action {
+    display: none;
+  }
+
+  .admin-shell {
+    height: auto;
+  }
+
+  .admin-content {
+    padding: 0;
+    max-width: 100%;
+  }
+
+  .admin-metric-card {
+    break-inside: avoid;
+  }
+
+  .admin-table {
+    break-inside: avoid;
+  }
 }