fix(web): ширина контента и цветовая гамма как в MikrotikManager

Контент на всю ширину с отступами p-6 и gap-5 вместо max-w 1480; токены светлой и тёмной тем (фон, карточки, muted, accent, border, ring, sidebar, chart) взяты из globals.css MikrotikManager.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/components/layout/portal-shell.tsx

@@ -163,7 +163,7 @@ export function PortalShell({ children }: { children: ReactNode }) {
             <PortalSidebar />
             <SidebarInset id="main-content" className="min-w-0">
               <PortalHeader />
-              <div className="mx-auto flex w-full min-w-0 max-w-[1480px] flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">{children}</div>
+              <div className="flex w-full min-w-0 flex-1 flex-col gap-5 p-4 md:p-6">{children}</div>
             </SidebarInset>
             <CommandPalette />
           </SidebarProvider>

packages/ui/src/styles/globals.css

@@ -8,37 +8,37 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  --background: oklch(0.973 0.004 247.858);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.141 0.006 264);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.141 0.006 264);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.141 0.006 264);
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
+  --secondary: oklch(0.958 0.005 247.858);
   --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
+  --muted: oklch(0.958 0.005 247.858);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.52 0.01 264);
-  --accent: oklch(0.97 0 0);
+  --accent: oklch(0.942 0.016 264.376);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
+  --border: oklch(0.904 0.006 264);
-  --input: oklch(0.922 0 0);
+  --input: oklch(0.904 0.006 264);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.488 0.243 264.376);
-  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-1: oklch(0.546 0.215 264.376);
-  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-2: oklch(0.527 0.154 150.069);
-  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-3: oklch(0.625 0.162 41.5);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-4: oklch(0.591 0.224 296.4);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-5: oklch(0.577 0.245 27.325);
-  --sidebar: oklch(0.985 0 0);
+  --sidebar: oklch(0.152 0.01 264.376);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-foreground: oklch(0.92 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent: oklch(0.24 0.012 264.376);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-border: oklch(1 0 0 / 8%);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
   --destructive-foreground: var(--color-red-800);
   --success: var(--color-emerald-500);
   --success-foreground: var(--color-emerald-900);
@@ -49,41 +49,43 @@
   --invert: var(--color-zinc-900);
   --invert-foreground: var(--color-zinc-50);
   --focus: var(--color-blue-500);
+  --chart-rx: oklch(0.527 0.154 150.069);
+  --chart-tx: oklch(0.546 0.215 264.376);
   --focus-foreground: var(--color-blue-900);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: oklch(0.133 0.011 264.376);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.191 0.011 264.376);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.191 0.011 264.376);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: oklch(0.252 0.01 264.376);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
+  --muted: oklch(0.252 0.01 264.376);
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: oklch(0.648 0.008 264.376);
-  --accent: oklch(0.269 0 0);
+  --accent: oklch(0.285 0.022 264.376);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --ring: oklch(0.488 0.243 264.376);
-  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.637 0.222 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-2: oklch(0.696 0.17 151.328);
-  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-3: oklch(0.713 0.176 47.6);
-  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-4: oklch(0.714 0.173 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-5: oklch(0.704 0.191 22.216);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: oklch(0.191 0.011 264.376);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.262 0.014 264.376);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
   --destructive-foreground: var(--color-red-600);
   --success: var(--color-emerald-500);
   --success-foreground: var(--color-emerald-600);