From a96b0fcdced11ea8b2eecd1772017e47e55dd0d6 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Wed, 19 Aug 2026 12:56:13 +0300
Subject: [PATCH] Improve responsive commerce management layouts and create
 actions

---
 frontend/src/app/globals.css                  | 168 ++++++++++++++++++
 frontend/src/app/page.tsx                     |  36 +++-
 frontend/src/app/products/manage/page.tsx     |  60 ++++---
 .../commerce/ProductConnectionsContent.tsx    |  48 ++---
 .../components/ui/AutoRevealStickyHeader.tsx  |  61 +------
 .../components/ui/HorizontalChipScroller.tsx  |   4 +-
 frontend/src/hooks/useAutoRevealOnScroll.ts   |  65 +++++++
 7 files changed, 329 insertions(+), 113 deletions(-)
 create mode 100644 frontend/src/hooks/useAutoRevealOnScroll.ts

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index dc4a9429..ccf73a5e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -29,6 +29,174 @@
   --shadow-elevated: 0 18px 40px -24px rgba(15, 23, 42, 0.18), 0 8px 16px -12px rgba(15, 23, 42, 0.1);
 }
 
+/* Product management switches between cards and tables by the available
+   module width, not by the browser width. This keeps the regular desktop
+   three-column shell usable without forcing wide mode. */
+.commerce-management-section {
+  container-type: inline-size;
+}
+
+.commerce-management-mobile-list {
+  display: block;
+}
+
+.commerce-management-table {
+  display: none;
+}
+
+@container (min-width: 44rem) {
+  .commerce-management-mobile-list {
+    display: none;
+  }
+
+  .commerce-management-table {
+    display: block;
+  }
+}
+
+.commerce-connections {
+  container-type: inline-size;
+}
+
+.commerce-connection-card {
+  padding: 1rem;
+}
+
+.commerce-connection-metrics,
+.commerce-connection-meta,
+.commerce-planned-services {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.commerce-connection-metrics {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.commerce-connection-meta,
+.commerce-planned-services {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.commerce-connection-schedule,
+.commerce-connection-form-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1rem;
+}
+
+.commerce-connection-schedule-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.commerce-connection-actions,
+.commerce-connection-form-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.5rem;
+}
+
+.commerce-connection-actions > button,
+.commerce-connection-form-actions > button {
+  width: 100%;
+  justify-content: center;
+}
+
+.commerce-connection-auth-grid {
+  display: grid;
+  gap: 1.25rem;
+}
+
+.commerce-planned-service-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@container (min-width: 28rem) {
+  .commerce-connection-card {
+    padding: 1.25rem;
+  }
+
+  .commerce-connection-actions,
+  .commerce-connection-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .commerce-connection-actions > button,
+  .commerce-connection-form-actions > button {
+    width: auto;
+  }
+
+  .commerce-planned-services {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .commerce-connection-meta {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 44rem) {
+  .commerce-connection-card {
+    padding: 1.5rem;
+  }
+
+  .commerce-connection-metrics-six {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .commerce-connection-metrics-four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .commerce-connection-meta {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .commerce-connection-schedule,
+  .commerce-connection-form-footer {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .commerce-connection-schedule-controls {
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  .commerce-connection-auth-grid {
+    grid-template-columns: minmax(15rem, 0.65fr) minmax(22.5rem, 1.35fr);
+    align-items: end;
+  }
+
+  .commerce-planned-services {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .commerce-planned-service-content {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+@container (min-width: 64rem) {
+  .commerce-connection-metrics-six {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .commerce-connection-metrics-four {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 171538f8..cc4d5af2 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -19,6 +19,7 @@ import { RelatedTaskLinks } from "@/components/tasks/RelatedTaskLinks";
 import TaskLinkPill from "@/components/tasks/TaskLinkPill";
 import { ViewportAwareMenu } from "@/components/shared/ViewportAwareMenu";
 import { useNotifications } from "@/contexts/NotificationsContext";
+import { useAutoRevealOnScroll } from "@/hooks/useAutoRevealOnScroll";
 import { apiClient } from "@/lib/api";
 import { getDocumentFileExtension } from "@/lib/document-preview";
 import { NAV_NOTIFICATION_CATEGORIES } from "@/lib/navigation-notifications";
@@ -101,6 +102,7 @@ function HomePageContent() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { visible: createActionVisibleOnScroll } = useAutoRevealOnScroll();
   const [posts, setPosts] = useState<Post[]>([]);
   const [regulations, setRegulations] = useState<Document[]>([]);
   const [selectedRegulation, setSelectedRegulation] = useState<Document | null>(null);
@@ -214,6 +216,12 @@ function HomePageContent() {
     ((user?.departments?.length || 0) > 0)
   );
   const canCreatePost = canCreateCompanyPost || canCreateDepartmentPost;
+  const hasMultipleCreateActions = canCreatePost && canManageRegulations;
+  const createActionLabel = hasMultipleCreateActions
+    ? (createMenuOpen ? "Закрыть меню создания" : "Открыть меню создания")
+    : canCreatePost
+      ? "Создать новость"
+      : "Создать регламент";
   const userDepartments = useMemo(() => user?.departments || [], [user?.departments]);
   const canManageAnyPost = Boolean(
     auth?.is_staff ||
@@ -1151,9 +1159,13 @@ function HomePageContent() {
       {user && (canCreatePost || canManageRegulations) && !createPostOpen && !createRegulationOpen ? (
         <div
           ref={createMenuRef}
-          className="pointer-events-none fixed bottom-[calc(env(safe-area-inset-bottom)+5.5rem)] right-4 z-30 flex flex-col items-end gap-2 lg:bottom-6 lg:right-[max(2rem,calc((100vw-72rem)/2+21.5rem))]"
+          className={`${
+            createMenuOpen || createActionVisibleOnScroll
+              ? "translate-y-0 opacity-100"
+              : "translate-y-[calc(100%+7rem)] opacity-0"
+          } pointer-events-none fixed bottom-[calc(env(safe-area-inset-bottom)+5.5rem)] right-4 z-30 flex flex-col items-end gap-2 transition-[transform,opacity] duration-200 ease-out will-change-transform lg:bottom-6 lg:right-[max(2rem,calc((100vw-72rem)/2+21.5rem))]`}
         >
-          {createMenuOpen ? (
+          {createMenuOpen && hasMultipleCreateActions ? (
             <div className="flex flex-col items-end gap-2" role="menu" aria-label="Создать в ленте">
               {canCreatePost ? (
                 <button
@@ -1181,14 +1193,22 @@ function HomePageContent() {
           ) : null}
           <button
             type="button"
-            onClick={() => setCreateMenuOpen((current) => !current)}
+            onClick={() => {
+              if (hasMultipleCreateActions) {
+                setCreateMenuOpen((current) => !current);
+              } else if (canCreatePost) {
+                openCreatePostModal();
+              } else {
+                openCreateRegulationModal();
+              }
+            }}
             className="app-action-primary pointer-events-auto inline-flex h-12 w-12 items-center justify-center rounded-full p-0 leading-none shadow-[var(--shadow-card)] transition active:scale-[0.98]"
-            title={createMenuOpen ? "Закрыть меню создания" : "Создать"}
-            aria-label={createMenuOpen ? "Закрыть меню создания" : "Открыть меню создания"}
-            aria-expanded={createMenuOpen}
-            aria-haspopup="menu"
+            title={createActionLabel}
+            aria-label={createActionLabel}
+            aria-expanded={hasMultipleCreateActions ? createMenuOpen : undefined}
+            aria-haspopup={hasMultipleCreateActions ? "menu" : "dialog"}
           >
-            <Plus size={22} className={`transition-transform duration-200 ${createMenuOpen ? "rotate-45" : ""}`} />
+            <Plus size={22} className={`transition-transform duration-200 ${createMenuOpen && hasMultipleCreateActions ? "rotate-45" : ""}`} />
           </button>
         </div>
       ) : null}
diff --git a/frontend/src/app/products/manage/page.tsx b/frontend/src/app/products/manage/page.tsx
index de382f7e..b9bef756 100644
--- a/frontend/src/app/products/manage/page.tsx
+++ b/frontend/src/app/products/manage/page.tsx
@@ -3,6 +3,7 @@
 import { AppShell } from "@/components/AppShell";
 import { ProductConnectionsContent } from "@/components/commerce/ProductConnectionsContent";
 import { Modal } from "@/components/ui";
+import { HorizontalChipScroller } from "@/components/ui/HorizontalChipScroller";
 import { useUser } from "@/contexts/UserContext";
 import { apiClient } from "@/lib/api";
 import type {
@@ -401,12 +402,12 @@ export default function CommerceManagementPage() {
   }
 
   return (
-    <AppShell desktopWideMode>
-      <main className="mx-auto w-full min-w-0 max-w-[1600px] space-y-4 p-4 sm:p-6 lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
+    <AppShell>
+      <main className="mx-auto w-full min-w-0 max-w-[1600px] space-y-3 sm:space-y-4 lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
         <Link href="/products" className="app-text-muted inline-flex items-center gap-2 text-sm hover:text-[var(--foreground)]"><ArrowLeft className="h-4 w-4" /> К каталогу</Link>
 
-        <section className="app-surface min-w-0 overflow-hidden rounded-2xl p-4">
-          <header className="flex flex-wrap items-start justify-between gap-4">
+        <section className="app-surface min-w-0 overflow-hidden rounded-2xl p-3 sm:p-4">
+          <header className="flex items-start justify-between gap-3">
             <div className="min-w-0">
               <div className="flex min-w-0 flex-wrap items-center gap-3">
                 <h1 className="text-xl font-semibold sm:text-2xl">Управление товарами</h1>
@@ -421,19 +422,12 @@ export default function CommerceManagementPage() {
             <button
               type="button"
               onClick={() => tab === "connections" ? setConnectionsRefreshKey((current) => current + 1) : void loadData()}
-              className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm"
+              className="app-action-secondary inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm"
             >
-              <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} /> Обновить
+              <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} /> <span className="hidden sm:inline">Обновить</span>
             </button>
           </header>
 
-          <nav className="mt-4 flex max-w-full gap-1 overflow-x-auto rounded-xl bg-[var(--surface-secondary)] p-1.5" aria-label="Разделы управления товарами">
-            {tabs.map((item) => {
-              const Icon = item.icon;
-              return <button key={item.id} type="button" onClick={() => selectTab(item.id)} aria-current={tab === item.id ? "page" : undefined} className={`inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition ${tab === item.id ? "app-selected" : "app-text-muted hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)]"}`}><Icon className="h-4 w-4" /> {item.label}</button>;
-            })}
-          </nav>
-
           {tab !== "connections" ? (
             <label className="relative mt-4 block min-w-0">
               <Search className="app-text-muted pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
@@ -450,6 +444,13 @@ export default function CommerceManagementPage() {
               />
             </label>
           ) : null}
+
+          <HorizontalChipScroller className="mt-4" ariaLabel="Разделы управления товарами">
+            {tabs.map((item) => {
+              const Icon = item.icon;
+              return <button key={item.id} type="button" onClick={() => selectTab(item.id)} aria-current={tab === item.id ? "page" : undefined} className={`inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition ${tab === item.id ? "app-selected" : "app-surface-muted app-text-muted hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)]"}`}><Icon className="h-3.5 w-3.5" /> {item.label}</button>;
+            })}
+          </HorizontalChipScroller>
         </section>
 
         {error ? <div className="app-feedback-danger rounded-xl p-4 text-sm">{error}</div> : null}
@@ -569,21 +570,36 @@ function EditorFields({ kind, editorId, form, setForm, products, sources, sales
 type TableActions<TId extends string | number, TItem> = { onCreate: () => void; onEdit: (item: TItem) => void; onDelete: (id: TId) => void };
 
 function Section({ title, subtitle, onCreate, children }: { title: string; subtitle: string; onCreate: () => void; children: ReactNode }) {
-  return <section className="app-surface min-w-0 overflow-hidden rounded-2xl"><header className="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--border-subtle)] p-4"><div className="min-w-0"><h2 className="font-semibold">{title}</h2><p className="app-text-muted mt-1 text-xs">{subtitle}</p></div><button type="button" onClick={onCreate} className="app-action-primary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm"><Plus className="h-4 w-4" /> Добавить</button></header>{children}</section>;
+  return <section className="commerce-management-section app-surface min-w-0 overflow-hidden rounded-2xl"><header className="flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] p-3 sm:p-4"><div className="min-w-0"><h2 className="truncate font-semibold">{title}</h2><p className="app-text-muted mt-1 line-clamp-2 text-xs">{subtitle}</p></div><button type="button" onClick={onCreate} className="app-action-primary inline-flex h-10 shrink-0 items-center justify-center gap-2 rounded-lg px-3 text-sm" aria-label={`Добавить: ${title}`}><Plus className="h-4 w-4" /><span className="hidden min-[390px]:inline">Добавить</span></button></header>{children}</section>;
 }
 
 function Actions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () => void }) { return <div className="flex justify-end gap-1"><button type="button" onClick={onEdit} className="app-icon-button rounded-lg p-2" title="Изменить" aria-label="Изменить запись"><Pencil className="h-4 w-4" /></button><button type="button" onClick={onDelete} className="app-icon-button rounded-lg p-2 text-rose-600" title="Удалить" aria-label="Удалить запись"><Trash2 className="h-4 w-4" /></button></div>; }
 function EmptyRow({ columns }: { columns: number }) { return <tr><td colSpan={columns} className="p-8 text-center text-sm text-[var(--muted-foreground)]">Записей пока нет.</td></tr>; }
 
-function ProductsTable({ items, onCreate, onEdit, onDelete }: { items: CommerceProduct[] } & TableActions<string, CommerceProduct>) { return <Section title="Товары" subtitle="Единый каталог и внутренние артикулы" onCreate={onCreate}><Table headers={["SKU", "Название", "Тип", "Привязки", ""]}>{items.length ? items.map((item) => <tr key={item.id} className="transition hover:bg-[var(--surface-secondary)]"><Td><span className="font-medium">{item.sku}</span></Td><Td>{item.name}</Td><Td><span className="app-badge rounded-full px-2 py-0.5 text-[10px]">{productKindLabels[item.kind]}</span></Td><Td>{item.bindings.length}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={5} />}</Table></Section>; }
-function SourcesTable({ items, onCreate, onEdit, onDelete }: { items: SourceSystem[] } & TableActions<number, SourceSystem>) { return <Section title="Источники" subtitle="Сервисы, API и импортируемые отчёты" onCreate={onCreate}><Table headers={["Код", "Название", "Статус", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{item.code}</Td><Td>{item.name}</Td><Td>{item.is_active ? "Активен" : "Отключён"}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={4} />}</Table></Section>; }
-function BindingsTable({ items, productMap, sourceMap, onCreate, onEdit, onDelete }: { items: ProductBinding[]; productMap: Map<string, CommerceProduct>; sourceMap: Map<number, SourceSystem> } & TableActions<string, ProductBinding>) { return <Section title="Внешние привязки" subtitle="Соответствия товаров и офферов разных систем" onCreate={onCreate}><Table headers={["Товар", "Источник", "Внешний ID", "Внешний SKU", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{productMap.get(item.product)?.sku ?? item.product}</Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{item.external_id}</Td><Td>{item.external_sku || "—"}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={5} />}</Table></Section>; }
-function SalesTable({ items, sourceMap, selectedSaleId, onSelect, onCreate, onEdit, onDelete }: { items: CommerceSale[]; sourceMap: Map<number, SourceSystem>; selectedSaleId: string | null; onSelect: (id: string) => void } & TableActions<string, CommerceSale>) { return <Section title="Продажи и возвраты" subtitle="Выберите продажу, чтобы управлять её позициями" onCreate={onCreate}><Table headers={["Номер", "Источник", "Канал", "Статус", "Дата", "Позиции", ""]}>{items.length ? items.map((item) => <tr key={item.id} className={selectedSaleId === item.id ? "bg-[var(--surface-secondary)]" : ""}><Td><button type="button" onClick={() => onSelect(item.id)} className="font-medium hover:underline">{item.number || item.external_id}</button></Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{item.channel || "—"}</Td><Td>{item.status || item.event_type}</Td><Td>{displayDate(item.occurred_at)}</Td><Td>{item.lines.length}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={7} />}</Table></Section>; }
-function SaleLinesTable({ sale, productMap, onCreate, onEdit, onDelete }: { sale: CommerceSale; productMap: Map<string, CommerceProduct> } & TableActions<string, CommerceSaleLine>) { return <Section title={`Позиции · ${sale.number || sale.external_id}`} subtitle="Товарные строки выбранной продажи" onCreate={onCreate}><Table headers={["Товар", "Внешний SKU", "Количество", "Выручка", "Себестоимость", ""]}>{sale.lines.length ? sale.lines.map((item) => <tr key={item.id}><Td>{item.product ? productMap.get(item.product)?.name ?? item.name : item.name || "Не сопоставлен"}</Td><Td>{item.external_sku || "—"}</Td><Td>{displayNumber(item.quantity, 4)}</Td><Td>{displayNumber(item.net_amount)}</Td><Td>{displayNumber(item.cost_amount)}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={6} />}</Table></Section>; }
-function CostsTable({ items, productMap, sourceMap, onCreate, onEdit, onDelete }: { items: CommerceCost[]; productMap: Map<string, CommerceProduct>; sourceMap: Map<number, SourceSystem> } & TableActions<string, CommerceCost>) { return <Section title="Расходы" subtitle="Комиссии, логистика, реклама и прочие затраты" onCreate={onCreate}><Table headers={["Товар", "Источник", "Тип", "Канал", "Сумма", "Дата", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{item.product ? productMap.get(item.product)?.name ?? item.product : "По позиции продажи"}</Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{costTypeLabels[item.cost_type] ?? item.cost_type}</Td><Td>{item.channel || "—"}</Td><Td>{displayNumber(item.amount)} {item.currency}</Td><Td>{displayDate(item.occurred_at)}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={7} />}</Table></Section>; }
-function StockTable({ items, productMap, sourceMap, onCreate, onEdit, onDelete }: { items: CommerceStockSnapshot[]; productMap: Map<string, CommerceProduct>; sourceMap: Map<number, SourceSystem> } & TableActions<string, CommerceStockSnapshot>) { return <Section title="Снимки остатков" subtitle="Наблюдения по складам и источникам" onCreate={onCreate}><Table headers={["Товар", "Источник", "Склад", "Количество", "Резерв", "Доступно", "Дата", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{productMap.get(item.product)?.name ?? item.product}</Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{item.warehouse_name || item.warehouse_external_id}</Td><Td>{displayNumber(item.quantity, 4)}</Td><Td>{displayNumber(item.reserved, 4)}</Td><Td>{displayNumber(item.available, 4)}</Td><Td>{displayDate(item.captured_at)}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={8} />}</Table></Section>; }
+function MobileList({ children }: { children: ReactNode }) { return <div className="commerce-management-mobile-list space-y-2 p-3">{children}</div>; }
+function MobileEmpty() { return <p className="app-text-muted p-6 text-center text-sm">Записей пока нет.</p>; }
+function MobileCard({ title, eyebrow, badges, details, actions, className = "", onClick }: { title: ReactNode; eyebrow?: ReactNode; badges?: ReactNode; details?: Array<[string, ReactNode]>; actions: ReactNode; className?: string; onClick?: () => void }) {
+  const heading = <>{eyebrow ? <div className="app-text-muted truncate text-[11px]">{eyebrow}</div> : null}<div className="mt-0.5 break-words text-sm font-semibold">{title}</div></>;
+  return <article className={`rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)] p-3 ${className}`}>
+    <div className="flex min-w-0 items-start justify-between gap-2">
+      {onClick ? <button type="button" onClick={onClick} className="min-w-0 flex-1 cursor-pointer text-left">{heading}</button> : <div className="min-w-0 flex-1 text-left">{heading}</div>}
+      <div className="shrink-0">{actions}</div>
+    </div>
+    {badges ? <div className="mt-2 flex flex-wrap gap-1.5">{badges}</div> : null}
+    {details?.length ? <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1.5 text-xs">{details.map(([label, value]) => <div key={label} className="min-w-0"><dt className="app-text-muted">{label}</dt><dd className="mt-0.5 break-words">{value || "—"}</dd></div>)}</dl> : null}
+  </article>;
+}
+function Badge({ children }: { children: ReactNode }) { return <span className="app-badge rounded-full px-2 py-1 text-[10px]">{children}</span>; }
 
-function Table({ headers, children }: { headers: string[]; children: ReactNode }) { return <div className="max-w-full overflow-x-auto overscroll-x-contain"><table className="w-full min-w-[760px] text-left text-sm"><thead className="sticky top-0 z-10 bg-[var(--surface-secondary)] text-xs uppercase tracking-wide text-[var(--muted-foreground)]"><tr>{headers.map((header, index) => <th key={`${header}-${index}`} className="px-4 py-3 font-medium">{header}</th>)}</tr></thead><tbody className="divide-y divide-[var(--border-subtle)]">{children}</tbody></table></div>; }
+function ProductsTable({ items, onCreate, onEdit, onDelete }: { items: CommerceProduct[] } & TableActions<string, CommerceProduct>) { return <Section title="Товары" subtitle="Единый каталог и внутренние артикулы" onCreate={onCreate}><MobileList>{items.length ? items.map((item) => <MobileCard key={item.id} eyebrow={`SKU · ${item.sku}`} title={item.name} badges={<><Badge>{productKindLabels[item.kind]}</Badge><Badge>Привязки · {item.bindings.length}</Badge></>} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["SKU", "Название", "Тип", "Привязки", ""]}>{items.length ? items.map((item) => <tr key={item.id} className="transition hover:bg-[var(--surface-secondary)]"><Td><span className="font-medium">{item.sku}</span></Td><Td>{item.name}</Td><Td><span className="app-badge rounded-full px-2 py-0.5 text-[10px]">{productKindLabels[item.kind]}</span></Td><Td>{item.bindings.length}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={5} />}</Table></Section>; }
+function SourcesTable({ items, onCreate, onEdit, onDelete }: { items: SourceSystem[] } & TableActions<number, SourceSystem>) { return <Section title="Источники" subtitle="Сервисы, API и импортируемые отчёты" onCreate={onCreate}><MobileList>{items.length ? items.map((item) => <MobileCard key={item.id} eyebrow={`Код · ${item.code}`} title={item.name} badges={<Badge>{item.is_active ? "Активен" : "Отключён"}</Badge>} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["Код", "Название", "Статус", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{item.code}</Td><Td>{item.name}</Td><Td>{item.is_active ? "Активен" : "Отключён"}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={4} />}</Table></Section>; }
+function BindingsTable({ items, productMap, sourceMap, onCreate, onEdit, onDelete }: { items: ProductBinding[]; productMap: Map<string, CommerceProduct>; sourceMap: Map<number, SourceSystem> } & TableActions<string, ProductBinding>) { return <Section title="Внешние привязки" subtitle="Соответствия товаров и офферов разных систем" onCreate={onCreate}><MobileList>{items.length ? items.map((item) => <MobileCard key={item.id} eyebrow={sourceMap.get(item.source)?.name ?? item.source_code} title={productMap.get(item.product)?.sku ?? item.product} details={[["Внешний ID", item.external_id], ["Внешний SKU", item.external_sku || "—"]]} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["Товар", "Источник", "Внешний ID", "Внешний SKU", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{productMap.get(item.product)?.sku ?? item.product}</Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{item.external_id}</Td><Td>{item.external_sku || "—"}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={5} />}</Table></Section>; }
+function SalesTable({ items, sourceMap, selectedSaleId, onSelect, onCreate, onEdit, onDelete }: { items: CommerceSale[]; sourceMap: Map<number, SourceSystem>; selectedSaleId: string | null; onSelect: (id: string) => void } & TableActions<string, CommerceSale>) { return <Section title="Продажи и возвраты" subtitle="Выберите продажу, чтобы управлять её позициями" onCreate={onCreate}><MobileList>{items.length ? items.map((item) => <MobileCard key={item.id} className={selectedSaleId === item.id ? "border-[var(--accent-primary)]" : ""} eyebrow={sourceMap.get(item.source)?.name ?? item.source_code} title={item.number || item.external_id} onClick={() => onSelect(item.id)} badges={<><Badge>{item.status || item.event_type}</Badge><Badge>Позиции · {item.lines.length}</Badge></>} details={[["Канал", item.channel || "—"], ["Дата", displayDate(item.occurred_at)]]} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["Номер", "Источник", "Канал", "Статус", "Дата", "Позиции", ""]}>{items.length ? items.map((item) => <tr key={item.id} className={selectedSaleId === item.id ? "bg-[var(--surface-secondary)]" : ""}><Td><button type="button" onClick={() => onSelect(item.id)} className="font-medium hover:underline">{item.number || item.external_id}</button></Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{item.channel || "—"}</Td><Td>{item.status || item.event_type}</Td><Td>{displayDate(item.occurred_at)}</Td><Td>{item.lines.length}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={7} />}</Table></Section>; }
+function SaleLinesTable({ sale, productMap, onCreate, onEdit, onDelete }: { sale: CommerceSale; productMap: Map<string, CommerceProduct> } & TableActions<string, CommerceSaleLine>) { return <Section title={`Позиции · ${sale.number || sale.external_id}`} subtitle="Товарные строки выбранной продажи" onCreate={onCreate}><MobileList>{sale.lines.length ? sale.lines.map((item) => <MobileCard key={item.id} eyebrow={item.external_sku ? `SKU · ${item.external_sku}` : "Без внешнего SKU"} title={item.product ? productMap.get(item.product)?.name ?? item.name : item.name || "Не сопоставлен"} details={[["Количество", displayNumber(item.quantity, 4)], ["Выручка", displayNumber(item.net_amount)], ["Себестоимость", displayNumber(item.cost_amount)]]} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["Товар", "Внешний SKU", "Количество", "Выручка", "Себестоимость", ""]}>{sale.lines.length ? sale.lines.map((item) => <tr key={item.id}><Td>{item.product ? productMap.get(item.product)?.name ?? item.name : item.name || "Не сопоставлен"}</Td><Td>{item.external_sku || "—"}</Td><Td>{displayNumber(item.quantity, 4)}</Td><Td>{displayNumber(item.net_amount)}</Td><Td>{displayNumber(item.cost_amount)}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={6} />}</Table></Section>; }
+function CostsTable({ items, productMap, sourceMap, onCreate, onEdit, onDelete }: { items: CommerceCost[]; productMap: Map<string, CommerceProduct>; sourceMap: Map<number, SourceSystem> } & TableActions<string, CommerceCost>) { return <Section title="Расходы" subtitle="Комиссии, логистика, реклама и прочие затраты" onCreate={onCreate}><MobileList>{items.length ? items.map((item) => <MobileCard key={item.id} eyebrow={sourceMap.get(item.source)?.name ?? item.source_code} title={item.product ? productMap.get(item.product)?.name ?? item.product : "По позиции продажи"} badges={<Badge>{costTypeLabels[item.cost_type] ?? item.cost_type}</Badge>} details={[["Сумма", `${displayNumber(item.amount)} ${item.currency}`], ["Канал", item.channel || "—"], ["Дата", displayDate(item.occurred_at)]]} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["Товар", "Источник", "Тип", "Канал", "Сумма", "Дата", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{item.product ? productMap.get(item.product)?.name ?? item.product : "По позиции продажи"}</Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{costTypeLabels[item.cost_type] ?? item.cost_type}</Td><Td>{item.channel || "—"}</Td><Td>{displayNumber(item.amount)} {item.currency}</Td><Td>{displayDate(item.occurred_at)}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={7} />}</Table></Section>; }
+function StockTable({ items, productMap, sourceMap, onCreate, onEdit, onDelete }: { items: CommerceStockSnapshot[]; productMap: Map<string, CommerceProduct>; sourceMap: Map<number, SourceSystem> } & TableActions<string, CommerceStockSnapshot>) { return <Section title="Снимки остатков" subtitle="Наблюдения по складам и источникам" onCreate={onCreate}><MobileList>{items.length ? items.map((item) => <MobileCard key={item.id} eyebrow={sourceMap.get(item.source)?.name ?? item.source_code} title={productMap.get(item.product)?.name ?? item.product} badges={<Badge>{item.warehouse_name || item.warehouse_external_id}</Badge>} details={[["Количество", displayNumber(item.quantity, 4)], ["Резерв", displayNumber(item.reserved, 4)], ["Доступно", displayNumber(item.available, 4)], ["Дата", displayDate(item.captured_at)]]} actions={<Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} />} />) : <MobileEmpty />}</MobileList><Table headers={["Товар", "Источник", "Склад", "Количество", "Резерв", "Доступно", "Дата", ""]}>{items.length ? items.map((item) => <tr key={item.id}><Td>{productMap.get(item.product)?.name ?? item.product}</Td><Td>{sourceMap.get(item.source)?.name ?? item.source_code}</Td><Td>{item.warehouse_name || item.warehouse_external_id}</Td><Td>{displayNumber(item.quantity, 4)}</Td><Td>{displayNumber(item.reserved, 4)}</Td><Td>{displayNumber(item.available, 4)}</Td><Td>{displayDate(item.captured_at)}</Td><Td><Actions onEdit={() => onEdit(item)} onDelete={() => onDelete(item.id)} /></Td></tr>) : <EmptyRow columns={8} />}</Table></Section>; }
+
+function Table({ headers, children }: { headers: string[]; children: ReactNode }) { return <div className="commerce-management-table max-w-full overflow-x-auto overscroll-x-contain"><table className="w-full min-w-[760px] text-left text-sm"><thead className="sticky top-0 z-10 bg-[var(--surface-secondary)] text-xs uppercase tracking-wide text-[var(--muted-foreground)]"><tr>{headers.map((header, index) => <th key={`${header}-${index}`} className="px-4 py-3 font-medium">{header}</th>)}</tr></thead><tbody className="divide-y divide-[var(--border-subtle)]">{children}</tbody></table></div>; }
 function Td({ children }: { children: ReactNode }) { return <td className="max-w-sm break-words px-4 py-3 align-middle">{children}</td>; }
 
 function Field({ label, value, onChange, required = false, type = "text", step, placeholder, multiline = false, className = "" }: { label: string; value: string; onChange: (value: string) => void; required?: boolean; type?: string; step?: string; placeholder?: string; multiline?: boolean; className?: string }) { const controlClass = "mt-1 w-full rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-primary)] px-3 py-2 text-sm outline-none focus:border-[var(--border-strong)]"; return <label className={className}><span className="text-xs font-medium text-[var(--muted-foreground)]">{label}{required ? " *" : ""}</span>{multiline ? <textarea required={required} value={value} onChange={(event) => onChange(event.target.value)} placeholder={placeholder} rows={4} className={controlClass} /> : <input required={required} type={type} step={step} value={value} onChange={(event) => onChange(event.target.value)} placeholder={placeholder} className={controlClass} />}</label>; }
diff --git a/frontend/src/components/commerce/ProductConnectionsContent.tsx b/frontend/src/components/commerce/ProductConnectionsContent.tsx
index 2804c0be..6ae89ba5 100644
--- a/frontend/src/components/commerce/ProductConnectionsContent.tsx
+++ b/frontend/src/components/commerce/ProductConnectionsContent.tsx
@@ -337,7 +337,7 @@ export function ProductConnectionsContent({
   const wildberriesVisibleStats = wildberriesCurrentRun || wildberries?.last_stats;
 
   return (
-      <div className={embedded ? "space-y-5" : "mx-auto w-full max-w-6xl space-y-5 p-4 sm:p-6"}>
+      <div className={`commerce-connections ${embedded ? "space-y-5" : "mx-auto w-full max-w-6xl space-y-5 p-4 sm:p-6"}`}>
         {!embedded ? <header className="flex flex-wrap items-center justify-between gap-3">
           <div>
             <Link href="/products/manage" className="mb-2 inline-flex items-center gap-2 text-sm app-text-muted hover:text-[var(--foreground)]"><ArrowLeft className="h-4 w-4" /> К управлению</Link>
@@ -348,11 +348,11 @@ export function ProductConnectionsContent({
 
         {error ? <div className="app-feedback-danger rounded-xl p-4 text-sm">{error}</div> : null}
 
-        <section className="app-surface rounded-2xl p-5 sm:p-6">
+        <section className="commerce-connection-card app-surface min-w-0 overflow-hidden rounded-2xl">
           <div className="flex flex-wrap items-start justify-between gap-4">
-            <div className="flex gap-3">
+            <div className="flex min-w-0 gap-3">
               <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sky-500/10 text-sky-500"><Store className="h-5 w-5" /></div>
-              <div>
+              <div className="min-w-0">
                 <h2 className="font-semibold">МойСклад</h2>
                 <p className="mt-1 max-w-2xl text-sm app-text-muted">Массовый импорт товаров, модификаций и текущих остатков с сохранением внешних идентификаторов.</p>
               </div>
@@ -362,7 +362,7 @@ export function ProductConnectionsContent({
 
           {loading ? <div className="mt-6 flex items-center gap-2 text-sm app-text-muted"><Loader2 className="h-4 w-4 animate-spin" /> Загрузка…</div> : moysklad && !editing ? (
             <div className="mt-6 space-y-5">
-              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-6">
+              <div className="commerce-connection-metrics commerce-connection-metrics-six">
                 <Metric icon={PackageCheck} label="Товаров обработано" value={visibleStats?.processed ?? 0} />
                 <Metric icon={CloudDownload} label="Создано товаров" value={visibleStats?.created_products ?? 0} />
                 <Metric icon={CheckCircle2} label="Сопоставлено" value={visibleStats?.matched_products ?? 0} />
@@ -386,19 +386,19 @@ export function ProductConnectionsContent({
                 </div>
               ) : null}
               {moysklad.last_error ? <div className="app-feedback-danger flex gap-2 rounded-xl p-4 text-sm"><TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" /> {moysklad.last_error}</div> : null}
-              <dl className="grid gap-3 text-sm sm:grid-cols-3">
+              <dl className="commerce-connection-meta text-sm">
                 <div><dt className="text-xs app-text-muted">Учётная запись</dt><dd className="mt-1">{moysklad.account_name || "—"}</dd></div>
                 <div><dt className="text-xs app-text-muted">Последняя проверка</dt><dd className="mt-1">{displayDate(moysklad.last_tested_at)}</dd></div>
                 <div><dt className="text-xs app-text-muted">Последний импорт</dt><dd className="mt-1">{displayDate(moysklad.last_sync_finished_at)}</dd></div>
               </dl>
-              <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl bg-[var(--surface-secondary)] p-4">
+              <div className="commerce-connection-schedule rounded-xl bg-[var(--surface-secondary)] p-4">
                 <label className="flex items-center gap-3 text-sm"><input type="checkbox" checked={moysklad.auto_sync} disabled={Boolean(busy)} onChange={(event) => void updateSchedule(moysklad, { auto_sync: event.target.checked, sync_interval_minutes: moysklad.sync_interval_minutes })} /><span><span className="block font-medium">Постоянная синхронизация</span><span className="block text-xs app-text-muted">Сервер запускает импорт автоматически</span></span></label>
-                <div className="flex flex-wrap items-center gap-3">
+                <div className="commerce-connection-schedule-controls">
                   <label className="flex items-center gap-2 text-sm app-text-muted"><Clock3 className="h-4 w-4" /><span>Каждые</span><select value={moysklad.sync_interval_minutes} disabled={!moysklad.auto_sync || Boolean(busy)} onChange={(event) => void updateSchedule(moysklad, { auto_sync: true, sync_interval_minutes: Number(event.target.value) })} className="rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-primary)] px-2 py-1.5 text-sm text-[var(--foreground)] disabled:opacity-50"><option value={5}>5 минут</option><option value={15}>15 минут</option><option value={30}>30 минут</option><option value={60}>1 час</option><option value={360}>6 часов</option><option value={1440}>сутки</option></select></label>
                   <span className="text-xs app-text-muted">Следующий запуск: {moysklad.auto_sync ? displayDate(moysklad.next_sync_at) : "отключён"}</span>
                 </div>
               </div>
-              <div className="flex flex-wrap gap-2">
+              <div className="commerce-connection-actions">
                 <button type="button" disabled={Boolean(syncActive || busy)} onClick={() => void startSync(moysklad)} className="app-action-primary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm disabled:opacity-50">{syncActive ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudDownload className="h-4 w-4" />} {syncActive ? "Импорт выполняется" : "Синхронизировать всё"}</button>
                 <button type="button" disabled={Boolean(busy)} onClick={() => { setAuthType(moysklad.auth_type); setEditing(true); }} className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm"><KeyRound className="h-4 w-4" /> Обновить доступ</button>
                 <button type="button" disabled={Boolean(syncActive || busy)} onClick={() => void disconnect(moysklad)} className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-rose-500 disabled:opacity-50"><Trash2 className="h-4 w-4" /> Отключить</button>
@@ -407,7 +407,7 @@ export function ProductConnectionsContent({
             </div>
           ) : (
             <form onSubmit={connectAndImport} className="mt-6 space-y-5">
-              <div className="grid gap-5 lg:grid-cols-[minmax(240px,0.65fr)_minmax(360px,1.35fr)] lg:items-end">
+              <div className="commerce-connection-auth-grid">
                 <div>
                   <p className="mb-2 text-xs font-medium app-text-muted">Способ авторизации</p>
                   <div className="flex flex-wrap gap-2">
@@ -417,9 +417,9 @@ export function ProductConnectionsContent({
                 </div>
                 {authType === "token" ? <Field label="Access token МойСклад" type="password" value={token} onChange={setToken} placeholder="Токен без слова Bearer" /> : <div className="grid gap-4 sm:grid-cols-2"><Field label="Логин" value={login} onChange={setLogin} /><Field label="Пароль" type="password" value={password} onChange={setPassword} /></div>}
               </div>
-              <div className="flex flex-col gap-4 border-t border-[var(--border-subtle)] pt-5 sm:flex-row sm:items-center sm:justify-between">
+              <div className="commerce-connection-form-footer border-t border-[var(--border-subtle)] pt-5">
                 <div className="flex max-w-xl items-start gap-2 text-sm app-text-muted"><ShieldCheck className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" /><span>Реквизиты шифруются на сервере и никогда не возвращаются в браузер.</span></div>
-                <div className="flex shrink-0 flex-wrap gap-2">
+                <div className="commerce-connection-form-actions">
                   {moysklad ? <button type="button" onClick={() => setEditing(false)} className="app-action-secondary rounded-lg px-4 py-2 text-sm">Отмена</button> : null}
                   <button type="submit" disabled={busy === "connect"} className="app-action-primary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm disabled:opacity-50">{busy === "connect" ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudDownload className="h-4 w-4" />} Проверить и импортировать всё</button>
                 </div>
@@ -428,11 +428,11 @@ export function ProductConnectionsContent({
           )}
         </section>
 
-        <section className="app-surface rounded-2xl p-5 sm:p-6">
+        <section className="commerce-connection-card app-surface min-w-0 overflow-hidden rounded-2xl">
           <div className="flex flex-wrap items-start justify-between gap-4">
-            <div className="flex gap-3">
+            <div className="flex min-w-0 gap-3">
               <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-violet-500/10 text-violet-400"><Store className="h-5 w-5" /></div>
-              <div>
+              <div className="min-w-0">
                 <h2 className="font-semibold">Wildberries</h2>
                 <p className="mt-1 max-w-2xl text-sm app-text-muted">Продажи и возвраты из финансового отчёта, комиссии, эквайринг, логистика, хранение и удержания по товарам.</p>
               </div>
@@ -442,7 +442,7 @@ export function ProductConnectionsContent({
 
           {loading ? <div className="mt-6 flex items-center gap-2 text-sm app-text-muted"><Loader2 className="h-4 w-4 animate-spin" /> Загрузка…</div> : wildberries && !wildberriesEditing ? (
             <div className="mt-6 space-y-5">
-              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+              <div className="commerce-connection-metrics commerce-connection-metrics-four">
                 <Metric icon={CloudDownload} label="Строк отчёта" value={wildberriesVisibleStats?.processed ?? 0} />
                 <Metric icon={CheckCircle2} label="Сопоставлено с товарами" value={wildberriesVisibleStats?.matched_products ?? 0} />
                 <Metric icon={PackageCheck} label="Продаж и возвратов" value={wildberriesVisibleStats?.sales ?? 0} />
@@ -451,16 +451,16 @@ export function ProductConnectionsContent({
               {(wildberries.last_stats.unmatched_products ?? 0) > 0 ? <div className="app-feedback-warning flex gap-2 rounded-xl p-4 text-sm"><TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" /><span>Не сопоставлено с каталогом: {wildberries.last_stats.unmatched_products}. Строки сохранены; после привязки товаров повторный импорт дополнит аналитику.</span></div> : null}
               {wildberries.last_stats.report_complete === false ? <div className="app-feedback-warning flex gap-2 rounded-xl p-4 text-sm"><Clock3 className="mt-0.5 h-4 w-4 shrink-0" /><span>Страница отчёта загружена. Курсор сохранён: следующий запуск продолжит импорт и подтвердит завершение ответом Wildberries.</span></div> : null}
               {wildberries.last_error ? <div className="app-feedback-danger flex gap-2 rounded-xl p-4 text-sm"><TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" /> {wildberries.last_error}</div> : null}
-              <dl className="grid gap-3 text-sm sm:grid-cols-3">
+              <dl className="commerce-connection-meta text-sm">
                 <div><dt className="text-xs app-text-muted">Магазин</dt><dd className="mt-1">{wildberries.account_name || "—"}</dd></div>
                 <div><dt className="text-xs app-text-muted">Последняя проверка</dt><dd className="mt-1">{displayDate(wildberries.last_tested_at)}</dd></div>
                 <div><dt className="text-xs app-text-muted">Последний импорт</dt><dd className="mt-1">{displayDate(wildberries.last_sync_finished_at)}</dd></div>
               </dl>
-              <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl bg-[var(--surface-secondary)] p-4">
+              <div className="commerce-connection-schedule rounded-xl bg-[var(--surface-secondary)] p-4">
                 <label className="flex items-center gap-3 text-sm"><input type="checkbox" checked={wildberries.auto_sync} disabled={Boolean(busy)} onChange={(event) => void updateSchedule(wildberries, { auto_sync: event.target.checked, sync_interval_minutes: wildberries.sync_interval_minutes })} /><span><span className="block font-medium">Автоматический финансовый импорт</span><span className="block text-xs app-text-muted">Повторно проверяет последние 30 дней и учитывает корректировки WB</span></span></label>
                 <label className="flex items-center gap-2 text-sm app-text-muted"><Clock3 className="h-4 w-4" /><span>Каждые</span><select value={wildberries.sync_interval_minutes} disabled={!wildberries.auto_sync || Boolean(busy)} onChange={(event) => void updateSchedule(wildberries, { auto_sync: true, sync_interval_minutes: Number(event.target.value) })} className="rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-primary)] px-2 py-1.5 text-sm text-[var(--foreground)] disabled:opacity-50"><option value={60}>1 час</option><option value={360}>6 часов</option><option value={720}>12 часов</option><option value={1440}>сутки</option></select></label>
               </div>
-              <div className="flex flex-wrap gap-2">
+              <div className="commerce-connection-actions">
                 <button type="button" disabled={Boolean(wildberriesSyncActive || busy)} onClick={() => void startSync(wildberries)} className="app-action-primary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm disabled:opacity-50">{wildberriesSyncActive ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudDownload className="h-4 w-4" />} {wildberriesSyncActive ? "Импорт выполняется" : "Импортировать отчёт"}</button>
                 <button type="button" disabled={Boolean(busy)} onClick={() => setWildberriesEditing(true)} className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm"><KeyRound className="h-4 w-4" /> Обновить токен</button>
                 <button type="button" disabled={Boolean(wildberriesSyncActive || busy)} onClick={() => void disconnect(wildberries)} className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-rose-500 disabled:opacity-50"><Trash2 className="h-4 w-4" /> Отключить</button>
@@ -470,9 +470,9 @@ export function ProductConnectionsContent({
           ) : (
             <form onSubmit={connectWildberries} className="mt-6 space-y-5">
               <Field label="API-токен Wildberries с категорией «Финансы»" type="password" value={wildberriesToken} onChange={setWildberriesToken} placeholder="Токен без слова Bearer" />
-              <div className="flex flex-col gap-4 border-t border-[var(--border-subtle)] pt-5 sm:flex-row sm:items-center sm:justify-between">
+              <div className="commerce-connection-form-footer border-t border-[var(--border-subtle)] pt-5">
                 <div className="flex max-w-xl items-start gap-2 text-sm app-text-muted"><ShieldCheck className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" /><span>Токен шифруется на сервере. Тест сверит магазин и ИНН, а также отдельно подтвердит доступ к категории «Финансы».</span></div>
-                <div className="flex shrink-0 flex-wrap gap-2">
+                <div className="commerce-connection-form-actions">
                   {wildberries ? <button type="button" onClick={() => setWildberriesEditing(false)} className="app-action-secondary rounded-lg px-4 py-2 text-sm">Отмена</button> : null}
                   <button type="submit" disabled={busy === "wildberries-connect"} className="app-action-primary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm disabled:opacity-50">{busy === "wildberries-connect" ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudDownload className="h-4 w-4" />} Проверить и импортировать отчёт</button>
                 </div>
@@ -481,7 +481,7 @@ export function ProductConnectionsContent({
           )}
         </section>
 
-        <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <section className="commerce-planned-services">
           <PlannedService name="Ozon" description="Начисления, комиссии, логистика и реклама по SKU" />
           <PlannedService name="InSales" description="Каталог, варианты и заказы интернет-магазина" />
           <PlannedService name="RetailCRM" description="Заказы, каналы, статусы и расходы" />
@@ -495,9 +495,9 @@ function Field({ label, value, onChange, type = "text", placeholder }: { label:
 }
 
 function Metric({ icon: Icon, label, value }: { icon: typeof Store; label: string; value: number }) {
-  return <div className="rounded-xl bg-[var(--surface-secondary)] p-3"><Icon className="mb-2 h-4 w-4 text-sky-500" /><p className="text-xl font-semibold">{new Intl.NumberFormat("ru-RU").format(value)}</p><p className="mt-0.5 text-xs app-text-muted">{label}</p></div>;
+  return <div className="min-w-0 rounded-xl bg-[var(--surface-secondary)] p-3"><Icon className="mb-2 h-4 w-4 text-sky-500" /><p className="text-xl font-semibold">{new Intl.NumberFormat("ru-RU").format(value)}</p><p className="mt-0.5 break-words text-xs app-text-muted">{label}</p></div>;
 }
 
 function PlannedService({ name, description }: { name: string; description: string }) {
-  return <div className="app-surface rounded-xl p-4 opacity-70"><div className="flex items-center justify-between gap-3"><div><h2 className="font-medium">{name}</h2><p className="mt-1 text-sm app-text-muted">{description}</p></div><span className="shrink-0 rounded-full bg-[var(--surface-secondary)] px-2.5 py-1 text-xs app-text-muted">Следующий этап</span></div></div>;
+  return <div className="app-surface min-w-0 rounded-xl p-4 opacity-70"><div className="commerce-planned-service-content"><div className="min-w-0"><h2 className="font-medium">{name}</h2><p className="mt-1 text-sm app-text-muted">{description}</p></div><span className="shrink-0 self-start rounded-full bg-[var(--surface-secondary)] px-2.5 py-1 text-xs app-text-muted">Следующий этап</span></div></div>;
 }
diff --git a/frontend/src/components/ui/AutoRevealStickyHeader.tsx b/frontend/src/components/ui/AutoRevealStickyHeader.tsx
index 9deb7799..82906125 100644
--- a/frontend/src/components/ui/AutoRevealStickyHeader.tsx
+++ b/frontend/src/components/ui/AutoRevealStickyHeader.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { type ReactNode } from "react";
 
 import { useMobileNavPlacement } from "@/contexts/MobileNavPlacementContext";
+import { useAutoRevealOnScroll } from "@/hooks/useAutoRevealOnScroll";
 
 type AutoRevealStickyHeaderProps = {
   children: ReactNode;
@@ -18,66 +19,12 @@ export function AutoRevealStickyHeader({
   surface = "solid",
 }: AutoRevealStickyHeaderProps) {
   const { mobileNavPlacement } = useMobileNavPlacement();
-  const [visible, setVisible] = useState(true);
-  const [elevated, setElevated] = useState(false);
-  const lastScrollYRef = useRef(0);
-  const scrollDeltaRef = useRef(0);
-  const scrollDirectionRef = useRef<"up" | "down" | null>(null);
-
-  useEffect(() => {
-    lastScrollYRef.current = Math.max(0, window.scrollY);
-    let frameId: number | null = null;
-
-    const update = () => {
-      frameId = null;
-      const currentScrollY = Math.max(0, window.scrollY);
-      const delta = currentScrollY - lastScrollYRef.current;
-      setElevated(currentScrollY > 8);
-
-      if (currentScrollY <= 8) {
-        setVisible(true);
-        scrollDeltaRef.current = 0;
-        scrollDirectionRef.current = null;
-        lastScrollYRef.current = currentScrollY;
-        return;
-      }
-
-      if (Math.abs(delta) >= 1) {
-        const direction = delta > 0 ? "down" : "up";
-        if (scrollDirectionRef.current !== direction) {
-          scrollDirectionRef.current = direction;
-          scrollDeltaRef.current = 0;
-        }
-        scrollDeltaRef.current += delta;
-
-        if (direction === "down" && scrollDeltaRef.current >= 24 && currentScrollY > 80) {
-          setVisible(false);
-          scrollDeltaRef.current = 0;
-        } else if (direction === "up" && scrollDeltaRef.current <= -12) {
-          setVisible(true);
-          scrollDeltaRef.current = 0;
-        }
-      }
-
-      lastScrollYRef.current = currentScrollY;
-    };
-
-    const handleScroll = () => {
-      if (frameId !== null) return;
-      frameId = window.requestAnimationFrame(update);
-    };
-
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      if (frameId !== null) window.cancelAnimationFrame(frameId);
-    };
-  }, []);
+  const { elevated, show, visible } = useAutoRevealOnScroll();
 
   return (
     <div
       data-auto-reveal-header="true"
-      onFocusCapture={() => setVisible(true)}
+      onFocusCapture={show}
       className={`sticky z-30 transition-[transform,box-shadow] duration-200 ease-out will-change-transform ${
         disableOnDesktop
           ? "lg:static lg:translate-y-0 lg:bg-transparent lg:shadow-none"
diff --git a/frontend/src/components/ui/HorizontalChipScroller.tsx b/frontend/src/components/ui/HorizontalChipScroller.tsx
index 641435b2..cc2c02fc 100644
--- a/frontend/src/components/ui/HorizontalChipScroller.tsx
+++ b/frontend/src/components/ui/HorizontalChipScroller.tsx
@@ -114,7 +114,6 @@ export function HorizontalChipScroller({
       startX: event.clientX,
       dragged: false,
     };
-    event.currentTarget.setPointerCapture(event.pointerId);
   }, []);
 
   const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
@@ -122,12 +121,13 @@ export function HorizontalChipScroller({
     if (!drag || drag.pointerId !== event.pointerId) return;
 
     const distance = event.clientX - drag.startX;
-    if (!drag.dragged && Math.abs(distance) < 5) return;
+    if (!drag.dragged && Math.abs(distance) < 8) return;
 
     if (!drag.dragged) {
       drag.dragged = true;
       suppressClickRef.current = true;
       setIsMouseDragging(true);
+      event.currentTarget.setPointerCapture(event.pointerId);
     }
 
     event.preventDefault();
diff --git a/frontend/src/hooks/useAutoRevealOnScroll.ts b/frontend/src/hooks/useAutoRevealOnScroll.ts
new file mode 100644
index 00000000..ecbbac2d
--- /dev/null
+++ b/frontend/src/hooks/useAutoRevealOnScroll.ts
@@ -0,0 +1,65 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useAutoRevealOnScroll() {
+  const [visible, setVisible] = useState(true);
+  const [elevated, setElevated] = useState(false);
+  const lastScrollYRef = useRef(0);
+  const scrollDeltaRef = useRef(0);
+  const scrollDirectionRef = useRef<"up" | "down" | null>(null);
+
+  useEffect(() => {
+    lastScrollYRef.current = Math.max(0, window.scrollY);
+    let frameId: number | null = null;
+
+    const update = () => {
+      frameId = null;
+      const currentScrollY = Math.max(0, window.scrollY);
+      const delta = currentScrollY - lastScrollYRef.current;
+      setElevated(currentScrollY > 8);
+
+      if (currentScrollY <= 8) {
+        setVisible(true);
+        scrollDeltaRef.current = 0;
+        scrollDirectionRef.current = null;
+        lastScrollYRef.current = currentScrollY;
+        return;
+      }
+
+      if (Math.abs(delta) >= 1) {
+        const direction = delta > 0 ? "down" : "up";
+        if (scrollDirectionRef.current !== direction) {
+          scrollDirectionRef.current = direction;
+          scrollDeltaRef.current = 0;
+        }
+        scrollDeltaRef.current += delta;
+
+        if (direction === "down" && scrollDeltaRef.current >= 24 && currentScrollY > 80) {
+          setVisible(false);
+          scrollDeltaRef.current = 0;
+        } else if (direction === "up" && scrollDeltaRef.current <= -12) {
+          setVisible(true);
+          scrollDeltaRef.current = 0;
+        }
+      }
+
+      lastScrollYRef.current = currentScrollY;
+    };
+
+    const handleScroll = () => {
+      if (frameId !== null) return;
+      frameId = window.requestAnimationFrame(update);
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (frameId !== null) window.cancelAnimationFrame(frameId);
+    };
+  }, []);
+
+  const show = useCallback(() => setVisible(true), []);
+
+  return { elevated, show, visible };
+}