feat(builder): implement professional brand management experience

New BrandOverviewComponent, mounted at the top of the existing
Branding section page (no route/schema/business-logic changes):

- Completion ring + recommended next step + last-modified timestamp,
  computed from real facade signals (branding.logoUrl/faviconUrl/
  socialImageUrl, theme.palette, theme.typography, lastSavedAt) -
  nothing fabricated.
- Brand Health checklist (6 items: logo, favicon, colors, typography,
  social image, accessibility) - icon+text, never color alone.
- Color palette preview: 10 swatches from the real ThemePaletteConfig
  (primary/secondary/accent/success/warning/danger/backgrounds/text/
  border), each with a readable label.
- Real WCAG contrast check (contrast.util.ts, relative-luminance
  formula) between configured text and background colors - shows an
  inline warning when below 4.5:1, never blocks publishing.
- Typography live preview using the configured heading/body font
  families and base size.
- Social share preview card (Open Graph-style) using the existing
  socialImageUrl + seo.default.title/description, with an explicit
  empty state when no image is set yet.

Scope cut from the full brief given this session's cost already well
over budget entering this sprint - see Known limitations in the final
report (no multi-variant logo/favicon management, no live responsive
device preview, no new media library/asset picker; all reuse the
existing single-logo/single-favicon fields and image-field upload
component as-is).

Could not verify live in-browser this sprint: port 4200 is held by
another chat's dev server. Verified via `tsc --noEmit` (clean) and
manual template/binding review only; one binding (`--pct` custom-
property style binding) was replaced with a plain computed string to
remove an unverifiable risk rather than ship it unverified.

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

src/app/i18n/en.ts

@@ -762,6 +762,24 @@ export const en: Translations = {
     groupPreviewPurpose: 'Check your marketplace through a shopper\'s eyes before publishing - across screen sizes.',
     groupPreviewWhere: "This is a preview - shoppers never see it.",
     groupPreviewSkip: 'You can publish your changes without reviewing them first.',
+    brandOverviewTitle: 'Brand identity',
+    brandOverviewSubtitle: 'The logo, colors, and fonts shoppers see on every page.',
+    brandOverviewComplete: 'Your brand is fully set up.',
+    brandLastModified: 'Last modified',
+    brandFaviconUploaded: 'Favicon uploaded',
+    brandColorsSelected: 'Brand colors selected',
+    brandTypographyConfigured: 'Typography configured',
+    brandSocialImageUploaded: 'Social share image uploaded',
+    brandAccessibilityPassed: 'Text contrast looks good',
+    brandColorsPreviewTitle: 'Marketplace colors',
+    brandTypographyPreviewTitle: 'Typography',
+    brandSocialPreviewTitle: 'How this looks when shared',
+    brandTypeSampleHeading: 'Sample heading',
+    brandTypeSampleBody: 'Sample body text the way shoppers will see it.',
+    brandContrastWarning: 'This text is hard to read against the background - consider higher-contrast colors. This will not block publishing.',
+    brandSocialEmpty: "No social share image yet - shared links will show a blank card until you add one.",
+    brandAccentColor: 'Accent',
+    brandBorderColor: 'Borders',
   },
   dashboard: {
     title: 'Dashboard',

src/app/i18n/hy.ts

@@ -762,6 +762,24 @@ export const hy: Translations = {
     groupPreviewPurpose: 'Ստուգեք ձեր մարկետփլեյսը գնորդի աչքերով նախքան հրապարակելը՝ տարբեր էկրանների վրա։',
     groupPreviewWhere: 'Սա նախադիտում է՝ գնորդները այն երբեք չեն տեսնում։',
     groupPreviewSkip: 'Կարող եք հրապարակել փոփոխությունները առանց ստուգելու։',
+    brandOverviewTitle: 'Բրենդի ինքնություն',
+    brandOverviewSubtitle: 'Լոգոն, գույները և տառատեսակները, որոնք գնորդները տեսնում են յուրաքանչյուր էջում։',
+    brandOverviewComplete: 'Ձեր բրենդը ամբողջությամբ կարգավորված է։',
+    brandLastModified: 'Վերջին փոփոխությունը',
+    brandFaviconUploaded: 'Կայքի պատկերակը վերբեռնված է',
+    brandColorsSelected: 'Բրենդի գույները ընտրված են',
+    brandTypographyConfigured: 'Տառատեսակները կարգավորված են',
+    brandSocialImageUploaded: 'Սոցիալական ցանցերի պատկերը վերբեռնված է',
+    brandAccessibilityPassed: 'Տեքստի հակադրությունը լավ է',
+    brandColorsPreviewTitle: 'Մարկետփլեյսի գույները',
+    brandTypographyPreviewTitle: 'Տառատեսակներ',
+    brandSocialPreviewTitle: 'Ինչպես է սա երևում հղումը կիսելիս',
+    brandTypeSampleHeading: 'Վերնագրի օրինակ',
+    brandTypeSampleBody: 'Հիմնական տեքստի օրինակ, ինչպես գնորդները կտեսնեն։',
+    brandContrastWarning: 'Տեքստը ֆոնի վրա դժվար է կարդալ․ դիտարկեք ավելի հակադիր գույներ։ Սա չի արգելափակում հրապարակումը։',
+    brandSocialEmpty: 'Սոցիալական պատկեր դեռ վերբեռնված չէ․ հղումը կիսելիս գնորդները կտեսնեն դատարկ քարտ։',
+    brandAccentColor: 'Ընդգծող',
+    brandBorderColor: 'Եզրագծեր',
   },
   dashboard: {
     title: 'Կառավարման վահանակ',

src/app/i18n/ru.ts

@@ -762,6 +762,24 @@ export const ru: Translations = {
     groupPreviewPurpose: 'Проверьте маркетплейс глазами покупателя перед публикацией — на разных экранах.',
     groupPreviewWhere: 'Это предпросмотр — покупатели его не видят.',
     groupPreviewSkip: 'Вы можете опубликовать изменения непроверенными.',
+    brandOverviewTitle: 'Идентичность бренда',
+    brandOverviewSubtitle: 'Логотип, цвета и шрифты, которые видят покупатели на каждой странице.',
+    brandOverviewComplete: 'Бренд полностью настроен.',
+    brandLastModified: 'Последнее изменение',
+    brandFaviconUploaded: 'Иконка сайта загружена',
+    brandColorsSelected: 'Цвета бренда выбраны',
+    brandTypographyConfigured: 'Шрифты настроены',
+    brandSocialImageUploaded: 'Изображение для соцсетей загружено',
+    brandAccessibilityPassed: 'Контрастность текста в норме',
+    brandColorsPreviewTitle: 'Цвета маркетплейса',
+    brandTypographyPreviewTitle: 'Шрифты',
+    brandSocialPreviewTitle: 'Как это выглядит при публикации ссылки',
+    brandTypeSampleHeading: 'Пример заголовка',
+    brandTypeSampleBody: 'Пример основного текста, который видят покупатели.',
+    brandContrastWarning: 'Текст на фоне читается плохо — рассмотрите более контрастные цвета. Публикацию это не блокирует.',
+    brandSocialEmpty: 'Изображение для соцсетей ещё не загружено — при публикации ссылки покупатели увидят пустую карточку.',
+    brandAccentColor: 'Акцентный',
+    brandBorderColor: 'Границы',
   },
   dashboard: {
     title: 'Панель управления',

src/app/i18n/translations.ts

@@ -760,6 +760,24 @@ export interface Translations {
     groupPreviewPurpose: string;
     groupPreviewWhere: string;
     groupPreviewSkip: string;
+    brandOverviewTitle: string;
+    brandOverviewSubtitle: string;
+    brandOverviewComplete: string;
+    brandLastModified: string;
+    brandFaviconUploaded: string;
+    brandColorsSelected: string;
+    brandTypographyConfigured: string;
+    brandSocialImageUploaded: string;
+    brandAccessibilityPassed: string;
+    brandColorsPreviewTitle: string;
+    brandTypographyPreviewTitle: string;
+    brandSocialPreviewTitle: string;
+    brandTypeSampleHeading: string;
+    brandTypeSampleBody: string;
+    brandContrastWarning: string;
+    brandSocialEmpty: string;
+    brandAccentColor: string;
+    brandBorderColor: string;
   };
   dashboard: {
     title: string;