refactor: widen section and sidebar, plain period text, Badge xs size for stack

src/shared/styles/theme.css

@@ -80,7 +80,7 @@
 
   /* === GRID === */
   --grid-gap: var(--space-3);
-  --section-content-width: 56rem;
+  --section-content-width: 72rem;
 
   /* === ANIMATION === */
   --ease-default: ease;

src/shared/ui/Badge/ui/Badge.test.tsx

@@ -48,6 +48,11 @@ describe('Badge', () => {
       expect(screen.getByText('Tag')).toHaveClass('px-3', 'py-1', 'text-xs');
     });
 
+    it('applies xs size classes', () => {
+      render(<Badge size="xs">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('px-2', 'py-0.5');
+    });
+
     it('applies sm size classes', () => {
       render(<Badge size="sm">Tag</Badge>);
       expect(screen.getByText('Tag')).toHaveClass('px-3', 'py-1', 'text-xs');

src/shared/ui/Badge/ui/Badge.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { cn } from '$shared/lib';
 
 export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline';
-export type BadgeSize = 'sm' | 'md';
+export type BadgeSize = 'xs' | 'sm' | 'md';
 
 interface Props {
   /**
@@ -33,6 +33,7 @@ const VARIANTS: Record<BadgeVariant, string> = {
 };
 
 const SIZES: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[10px]',
   sm: 'px-3 py-1 text-xs',
   md: 'px-4 py-2 text-sm',
 };

src/shared/ui/Card/ui/Card.test.tsx

@@ -100,7 +100,7 @@ describe('CardSidebar', () => {
     it('sidebar column has fixed width on md', () => {
       render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
       const sidebar = screen.getByText('Sidebar').parentElement;
-      expect(sidebar).toHaveClass('md:w-52');
+      expect(sidebar).toHaveClass('md:w-64');
     });
 
     it('main column fills remaining space', () => {

src/shared/ui/Card/ui/Card.tsx

@@ -109,7 +109,7 @@ interface CardSidebarProps {
 export function CardSidebar({ sidebar, children, className }: CardSidebarProps) {
   return (
     <div className={cn('flex flex-col md:flex-row', className)}>
-      <div className="shrink-0 md:w-52 brutal-border-sidebar pb-6 md:pb-0 md:pr-8 mb-6 md:mb-0">{sidebar}</div>
+      <div className="shrink-0 md:w-64 brutal-border-sidebar pb-6 md:pb-0 md:pr-8 mb-6 md:mb-0">{sidebar}</div>
       <div className="flex-1 min-w-0 md:pl-8">{children}</div>
     </div>
   );