chore: add offline photos + mark Sprint 3 complete in SPRINTS.md

- Add 27 offline photos (navigation + transport) that were missing from git
  but referenced by Sprint 2 pages
- SPRINTS.md: mark Sprint 3 as ЗАВЕРШЁН with actual results documented

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

apps/web/app/components/buttons/page.tsx

@@ -0,0 +1,573 @@
+import type { Metadata } from "next";
+import { Button } from "@/components/ui/Button";
+import { CodeCopy } from "@/components/ui/CodeCopy";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Кнопки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+function Section({
+  id,
+  title,
+  subtitle,
+  children,
+}: {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section id={id} className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+const VARIANTS = [
+  {
+    variant: "primary" as const,
+    name: "Primary",
+    label: "Запишитесь к нам",
+    cssClass: ".bb-btn-primary",
+    bg: "#FFA39C",
+    border: "#FF847B",
+    textColor: "#fff",
+    radius: "7px",
+    shadow: "да",
+    where: "Кнопка отправки форм записи",
+    example: "«Запишите меня!»",
+    note: "Коралловый — самый заметный акцент на странице. Всегда один в форме.",
+  },
+  {
+    variant: "outline" as const,
+    name: "Outline",
+    label: "Записаться на приём",
+    cssClass: ".bb-btn-outline",
+    bg: "#fff",
+    border: "#BF9975",
+    textColor: "#BF9975",
+    radius: "7px",
+    shadow: "нет",
+    where: "Хедер, навигация, ссылки-кнопки",
+    example: "«Записаться на прием», «Все новости»",
+    note: "Бежевая рамка — ненавязчивый вторичный CTA. Не конкурирует с основной формой.",
+  },
+  {
+    variant: "teal" as const,
+    name: "Teal",
+    label: "Позвонить",
+    cssClass: ".bb-btn-teal",
+    bg: "#60959c",
+    border: "прозрачный",
+    textColor: "#fff",
+    radius: "7px",
+    shadow: "нет",
+    where: "Контактные действия — звонок",
+    example: "«Позвонить»",
+    note: "Серо-бирюзовый — цвет из реального CSS сайта. Близок к Oracal 066M.",
+  },
+  {
+    variant: "pill" as const,
+    name: "Pill",
+    label: "Заказать звонок",
+    cssClass: ".bb-btn-pill",
+    bg: "#e9e4d4",
+    border: "#d5cfbd",
+    textColor: "#333",
+    radius: "25px",
+    shadow: "нет",
+    where: "Модальные триггеры, мягкий CTA",
+    example: "«Заказать звонок»",
+    note: "Кремовый фон + pill-форма — мягкий стиль. Используется для открытия модальных окон.",
+  },
+];
+
+const LLM_BUTTONS_TEXT = `КНОПКИ — LLM-спецификация (с реального сайта oclinica.ru)
+Версия: v2.0 · /components/buttons
+Источник CSS: perm.oclinica.ru/.../style.css
+
+ВАРИАНТЫ (реальный сайт)
+Вариант | CSS класс       | Фон       | Текст    | Граница   | Radius | Shadow | Применение
+primary | .bb-btn-primary | #FFA39C   | #fff     | #FF847B   | 7px    | да     | Форм-сабмит «Запишите меня!»
+outline | .bb-btn-outline | #fff      | #BF9975  | #BF9975   | 7px    | нет    | Хедер «Записаться на прием», ссылки-кнопки
+teal    | .bb-btn-teal    | #60959c   | #fff     | нет       | 7px    | нет    | Звонок «Позвонить»
+pill    | .bb-btn-pill    | #e9e4d4   | #333     | #d5cfbd   | 25px   | нет    | Callback «Заказать звонок»
+
+CSS С САЙТА (точные значения)
+/* форм-кнопка «Запишите меня!» */
+button { background:#FFA39C; color:white; font-weight:bold; border:solid 1px #FF847B;
+         height:42px; font-size:18px; box-shadow:0px 0px 5px rgba(0,0,0,0.5),0px 4px 5px rgba(0,0,0,0.3); }
+
+/* appointment — «Записаться на прием» */
+.appointment { background:#FFF; border:#BF9975 solid 1px; color:#BF9975;
+               font-size:14px; line-height:38px; padding:3px 12px; border-radius:7px; }
+
+/* show-phone — «Позвонить» */
+.show-phone { background:rgb(96,149,156); color:#fff; border-radius:7px;
+              font-size:14px; line-height:38px; padding:3px 12px; }
+
+/* callback — «Заказать звонок» */
+a.callback_url { background:#e9e4d4; border:#d5cfbd solid 1px; color:#000;
+                 border-radius:25px; font-size:16px; padding:6px 18px; }
+
+РАЗМЕРЫ (брендбук-компонент)
+Размер | CSS класс  | padding    | font-size | Применение
+sm     | .bb-btn-sm | 4px 11px   | 13px      | Компактные контексты
+md     | .bb-btn-md | 8px 16px   | 14px      | Стандарт (appointment, teal, pill)
+lg     | .bb-btn-lg | 10px 24px  | 18px + bold | Форм-сабмит (соответствует реальному сайту)
+
+ПРАВИЛА ПРИМЕНЕНИЯ
+✓ primary (коралловый) — только для главного CTA в форме записи
+✓ outline (бежевый) — хедер, навигация, ссылки-кнопки на странице
+✓ teal (бирюзовый) — контактные действия (звонок, направление)
+✓ pill (кремовый) — открытие модальных окон, мягкий callback
+✓ Не более одного primary на форму
+✕ Не менять цвета вне фирменной палитры сайта
+✕ Primary — не для навигационных ссылок
+✕ Не накладывать тень на outline/teal/pill`.trim();
+
+export default function ButtonsPage() {
+  const codeHtml = `<!-- Primary — форм-кнопка «Запишите меня!» -->
+<button class="bb-btn bb-btn-lg bb-btn-primary">Запишите меня!</button>
+
+<!-- Outline — appointment «Записаться на прием» -->
+<a class="bb-btn bb-btn-md bb-btn-outline" href="#form">Записаться на прием</a>
+
+<!-- Teal — «Позвонить» -->
+<a class="bb-btn bb-btn-md bb-btn-teal" href="tel:+73422250662">Позвонить</a>
+
+<!-- Pill — «Заказать звонок» -->
+<a class="bb-btn bb-btn-md bb-btn-pill" href="#callback">Заказать звонок</a>`;
+
+  const codeReact = `import { Button } from "@/components/ui/Button";
+
+// Форм-кнопка (главный CTA)
+<Button variant="primary" size="lg">Запишите меня!</Button>
+
+// Запись из хедера / навигации
+<Button variant="outline" size="md">Записаться на прием</Button>
+
+// Звонок
+<Button variant="teal" size="md">Позвонить</Button>
+
+// Заказать звонок (открывает модал)
+<Button variant="pill" size="md">Заказать звонок</Button>
+
+// С loading-состоянием
+<Button variant="primary" size="lg" loading>Отправляем...</Button>`;
+
+  const codeSiteExact = `/* Точный CSS с сайта oclinica.ru (style.css) */
+
+/* Форм-кнопка — кнопка отправки форм записи */
+#block-entityform-block-feedback button,
+#block-entityform-block-lor-form button {
+  background: #FFA39C;
+  color: white;
+  font-weight: bold;
+  border: solid 1px #FF847B;
+  width: 300px;
+  height: 42px;
+  font-size: 18px;
+  box-shadow: 0px 0px 5px rgba(0,0,0,0.5), 0px 4px 5px rgba(0,0,0,0.3);
+}
+
+/* Кнопка «Записаться на прием» в хедере */
+#block-block-15 .appointment {
+  background: #FFF;
+  border: #BF9975 solid 1px;
+  color: #BF9975;
+  font-size: 14px;
+  line-height: 38px;
+  padding: 3px 12px;
+  border-radius: 7px;
+}
+
+/* Кнопка «Позвонить» */
+.show-phone {
+  background: rgb(96, 149, 156); /* #60959c */
+  color: #fff;
+  border-radius: 7px;
+  font-size: 14px;
+  line-height: 38px;
+  padding: 3px 12px;
+}
+
+/* Кнопка «Заказать звонок» */
+a.callback_url {
+  background: #e9e4d4;
+  border: #d5cfbd solid 1px;
+  color: #000;
+  border-radius: 25px;
+  font-size: 16px;
+  padding: 6px 18px;
+}`;
+
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Компоненты → 3.1
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Кнопки
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Кнопки скопированы с реального сайта{" "}
+          <span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>
+            oclinica.ru
+          </span>
+          . Цвета, размеры и тени взяты напрямую из CSS темы{" "}
+          <span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>
+            clinic_bootstrap_mobile/css/style.css
+          </span>
+          .
+        </p>
+        <div
+          className="mt-4 px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
+          style={{ borderColor: "#e0f5f4", background: "#f8fffe", color: "var(--bb-text-muted)" }}
+        >
+          <span style={{ color: "var(--brand-053m)", fontWeight: 600 }}>Источник</span>
+          <span>
+            CSS сайта проанализирован 2026-03-22 — 4 типа кнопок с реальными значениями.
+          </span>
+        </div>
+      </div>
+
+      {/* 1. Варианты */}
+      <Section
+        id="variants"
+        title="Варианты"
+        subtitle="Четыре типа кнопок с реального сайта клиники."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+          {VARIANTS.map(({ variant, name, label, where, example, note, bg, border, textColor, radius, shadow }) => (
+            <div
+              key={variant}
+              className="rounded-xl border p-5 flex flex-col gap-4"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              {/* Превью */}
+              <div
+                className="flex items-center justify-center py-6 rounded-lg"
+                style={{ background: "var(--bb-sidebar-bg)" }}
+              >
+                <Button variant={variant} size="md">
+                  {label}
+                </Button>
+              </div>
+
+              {/* Инфо */}
+              <div>
+                <p className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+                  {name}
+                </p>
+                <p className="text-xs mb-2 leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
+                  {note}
+                </p>
+                <div className="flex flex-wrap gap-1.5 mb-2">
+                  {[
+                    { k: "bg", v: bg },
+                    { k: "text", v: textColor },
+                    { k: "border", v: border },
+                    { k: "radius", v: radius },
+                    ...(shadow === "да" ? [{ k: "shadow", v: "да" }] : []),
+                  ].map(({ k, v }) => (
+                    <span
+                      key={k}
+                      className="text-[10px] font-mono px-1.5 py-0.5 rounded"
+                      style={{ background: "#f3f4f6", color: "var(--bb-text-muted)" }}
+                    >
+                      {k}: {v}
+                    </span>
+                  ))}
+                </div>
+                <div
+                  className="rounded p-2.5 text-xs"
+                  style={{ background: "#f8f9fa", color: "var(--bb-text-muted)" }}
+                >
+                  <span className="font-medium" style={{ color: "var(--bb-text)" }}>
+                    Где:
+                  </span>{" "}
+                  {where}
+                  <br />
+                  <span className="font-medium" style={{ color: "var(--bb-text)" }}>
+                    Пример:
+                  </span>{" "}
+                  {example}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* 2. Размеры */}
+      <Section
+        id="sizes"
+        title="Размеры"
+        subtitle="Три размера для разных контекстов. lg соответствует форм-кнопке на реальном сайте (18px, bold)."
+      >
+        <div
+          className="rounded-xl border overflow-hidden"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          {(
+            [
+              {
+                size: "sm" as const,
+                label: "Small",
+                hint: "4px 11px · 13px",
+                use: "Компактные контексты, таблицы",
+              },
+              {
+                size: "md" as const,
+                label: "Medium",
+                hint: "8px 16px · 14px",
+                use: "Appointment, Teal, Pill (соответствует сайту)",
+              },
+              {
+                size: "lg" as const,
+                label: "Large",
+                hint: "10px 24px · 18px bold",
+                use: "Primary форм-кнопка (соответствует сайту)",
+              },
+            ] as const
+          ).map(({ size, label, hint, use }, i) => (
+            <div
+              key={size}
+              className="flex items-center gap-6 px-5 py-4"
+              style={{ borderTop: i > 0 ? "1px solid var(--bb-border)" : undefined }}
+            >
+              <div className="w-40 shrink-0">
+                <Button variant="primary" size={size}>
+                  Записаться
+                </Button>
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
+                  {label}
+                </p>
+                <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                  padding: {hint.split("·")[0].trim()} · font-size: {hint.split("·")[1].trim()}
+                </p>
+              </div>
+              <p
+                className="text-xs hidden lg:block"
+                style={{ color: "var(--bb-text-muted)", maxWidth: 220 }}
+              >
+                {use}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* 3. Состояния */}
+      <Section
+        id="states"
+        title="Состояния"
+        subtitle="Базовые состояния кнопки. На реальном сайте hover/transition не определены в CSS."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {(
+            [
+              {
+                label: "Default",
+                node: <Button variant="primary" size="lg">Записаться</Button>,
+                hint: "Стандартное состояние",
+              },
+              {
+                label: "Hover",
+                node: (
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    style={{ filter: "brightness(0.93)" }}
+                  >
+                    Записаться
+                  </Button>
+                ),
+                hint: "filter: brightness(0.93)",
+              },
+              {
+                label: "Loading",
+                node: <Button variant="primary" size="lg" loading>Отправка...</Button>,
+                hint: "Спиннер + blocked",
+              },
+              {
+                label: "Disabled",
+                node: <Button variant="primary" size="lg" disabled>Записаться</Button>,
+                hint: "opacity: 0.5",
+              },
+            ] as const
+          ).map(({ label, node, hint }) => (
+            <div
+              key={label}
+              className="rounded-xl border p-4"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              <div
+                className="flex items-center justify-center py-4 mb-3 rounded-lg"
+                style={{ background: "var(--bb-sidebar-bg)" }}
+              >
+                {node}
+              </div>
+              <p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
+                {label}
+              </p>
+              <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                {hint}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* 4. Контекст применения */}
+      <Section
+        id="context"
+        title="Где применяется"
+        subtitle="Таблица: тип кнопки → реальное использование на сайте."
+      >
+        <div
+          className="rounded-xl border overflow-hidden"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Вариант", "Цвет фона", "Реальный класс/контекст", "Текст кнопки на сайте"].map((h) => (
+                  <th
+                    key={h}
+                    className="text-left px-4 py-3 font-medium text-xs"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                {
+                  v: <Button variant="primary" size="sm">Primary</Button>,
+                  bg: "#FFA39C",
+                  ctx: "button в entityform-блоках форм записи",
+                  text: "«Запишите меня!»",
+                },
+                {
+                  v: <Button variant="outline" size="sm">Outline</Button>,
+                  bg: "#fff / рамка #BF9975",
+                  ctx: ".appointment в хедере (block-block-15, 30, 32, 24)",
+                  text: "«Записаться на прием»",
+                },
+                {
+                  v: <Button variant="teal" size="sm">Teal</Button>,
+                  bg: "#60959c",
+                  ctx: ".show-phone (block-block-4, 15)",
+                  text: "«Позвонить»",
+                },
+                {
+                  v: <Button variant="pill" size="sm">Pill</Button>,
+                  bg: "#e9e4d4",
+                  ctx: "a.callback_url (modal trigger)",
+                  text: "«Заказать звонок»",
+                },
+              ].map(({ v, bg, ctx, text }, i) => (
+                <tr
+                  key={i}
+                  style={{ borderTop: "1px solid var(--bb-border)" }}
+                >
+                  <td className="px-4 py-3">{v}</td>
+                  <td
+                    className="px-4 py-3 font-mono text-xs"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {bg}
+                  </td>
+                  <td
+                    className="px-4 py-3 font-mono text-xs"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {ctx}
+                  </td>
+                  <td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text)" }}>
+                    {text}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* 5. Примеры кода */}
+      <Section
+        id="code"
+        title="Примеры кода"
+        subtitle="HTML-классы из globals.css, JSX-компонент, и точный CSS с сайта."
+      >
+        <div className="space-y-4">
+          <CodeCopy lang="HTML (CSS-классы brandbook)" code={codeHtml} />
+          <CodeCopy lang="JSX (React / Next.js)" code={codeReact} />
+          <CodeCopy lang="CSS — точно с сайта oclinica.ru" code={codeSiteExact} />
+        </div>
+      </Section>
+
+      {/* LLM-блок */}
+      <LlmBlock path="/components/buttons" version="v2.0" specText={LLM_BUTTONS_TEXT}>
+        <LlmSection title="Варианты (реальный сайт oclinica.ru)" />
+        <LlmTable
+          headers={["Вариант", "CSS класс", "Фон", "Текст", "Border", "Radius", "Применение"]}
+          rows={VARIANTS.map((v) => [
+            v.variant,
+            v.cssClass,
+            v.bg,
+            v.textColor,
+            v.border,
+            v.radius,
+            v.where,
+          ])}
+        />
+        <LlmSection title="Размеры (брендбук-компонент)" />
+        <LlmTable
+          headers={["Размер", "padding", "font-size", "Применение"]}
+          rows={[
+            ["sm", "4px 11px", "13px", "Компактные контексты"],
+            ["md", "8px 16px", "14px", "Стандарт (outline, teal, pill с сайта)"],
+            ["lg", "10px 24px", "18px bold", "Primary форм-кнопка (соответствует сайту)"],
+          ]}
+        />
+        <LlmSection title="Правила применения" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "primary (коралловый) — только для submit в формах записи" },
+            { ok: true, text: "outline (бежевый) — хедер, навигация, второстепенные ссылки" },
+            { ok: true, text: "teal (бирюзовый) — телефонные и контактные действия" },
+            { ok: true, text: "pill (кремовый) — открытие модальных окон / callback" },
+            { ok: true, text: "Не более одного primary на форму" },
+            { ok: false, text: "Не менять цвета вне указанной палитры сайта" },
+            { ok: false, text: "Primary — не для навигационных ссылок" },
+            { ok: false, text: "Не накладывать тень на outline, teal, pill" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}

apps/web/app/components/forms/page.tsx

@@ -0,0 +1,723 @@
+import type { Metadata } from "next";
+import { Toggle } from "@/components/ui/Toggle";
+import { CodeCopy } from "@/components/ui/CodeCopy";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Форм-контролы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+function Section({
+  id,
+  title,
+  subtitle,
+  children,
+}: {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section id={id} className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function FieldLabel({ text, required }: { text: string; required?: boolean }) {
+  return (
+    <label
+      className="block text-sm font-medium mb-1.5"
+      style={{ color: "var(--bb-text)" }}
+    >
+      {text}
+      {required && <span style={{ color: "#dc2626", marginLeft: 2 }}>*</span>}
+    </label>
+  );
+}
+
+function FieldHint({ text }: { text: string }) {
+  return (
+    <p className="mt-1.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>
+      {text}
+    </p>
+  );
+}
+
+function FieldError({ text }: { text: string }) {
+  return (
+    <p className="mt-1.5 text-xs" style={{ color: "#dc2626" }}>
+      {text}
+    </p>
+  );
+}
+
+function StateCard({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border p-4" style={{ borderColor: "var(--bb-border)" }}>
+      <div className="mb-3">{children}</div>
+      <p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
+        {label}
+      </p>
+      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+        {hint}
+      </p>
+    </div>
+  );
+}
+
+const LLM_FORMS_TEXT = `ФОРМ-КОНТРОЛЫ — LLM-спецификация
+Версия: v2.0 · /components/forms
+
+ТЕКСТОВОЕ ПОЛЕ (Input)
+CSS класс: .bb-input
+Высота: 50px · padding: 10px 12px
+border: 1px solid #ccc · border-radius: 4px · font: Fira Sans 14px
+Источник: entityform input[type=text] на perm.oclinica.ru
+Состояния:
+  default:  border #ccc
+  focus:    border #7ecfca + box-shadow 0 0 0 3px rgba(126,207,202,0.2)
+  error:    border #dc2626 + класс .bb-error
+  disabled: opacity 0.5 + cursor not-allowed + bg #f8f9fa
+
+МНОГОСТРОЧНЫЙ ТЕКСТ (Textarea)
+CSS класс: .bb-textarea
+Те же состояния что у Input
+min-height: 100px · resize: vertical · padding: 10px 12px
+
+ВЫПАДАЮЩИЙ СПИСОК (Select)
+CSS класс: .bb-select
+Высота: 50px · padding: 10px 36px 10px 10px
+Стрелка: SVG background-image (data URI)
+Источник: .form-control.form-select entityform на сайте
+Те же состояния что у Input
+
+ФЛАЖОК (Checkbox)
+CSS класс: .bb-checkbox
+size: 16×16px · accent-color: #5b7b87
+HTML: <input type="checkbox" class="bb-checkbox" />
+Состояния: unchecked / checked / disabled / checked+disabled
+
+ПЕРЕКЛЮЧАТЕЛЬ ВАРИАНТА (Radio)
+CSS класс: .bb-radio
+size: 16×16px · accent-color: #5b7b87
+HTML: <input type="radio" class="bb-radio" name="group" />
+Всегда в группе — один выбранный из нескольких
+
+ТУМБЛЕР (Toggle/Switch)
+Компонент: @/components/ui/Toggle (React, "use client")
+Ширина трека: 44px · Высота: 24px · Бегунок: 20×20px
+Выкл: track #d1d5db · Вкл: track #5b7b87
+CSS: .bb-toggle-track / .bb-toggle-thumb
+HTML-аналог: <input type="checkbox" role="switch" />
+
+КОНТЕКСТ ПРИМЕНЕНИЯ НА САЙТЕ
+Input/Select используются в entityform-блоках:
+  #block-entityform-block-lor-form — форма «Запишите меня!» (ЛОР)
+  #block-entityform-block-lor-form-2 — форма «Узнайте стоимость операции»
+  #block-entityform-block-surgery-form — форма хирургии
+Фон формы: #b8e6ed (светло-бирюзовый)
+Ширина полей: 302px (фиксированная), кнопка submit: 300px
+
+ОБЩИЕ ПРАВИЛА
+✓ Метка (label) всегда над полем, font-weight: 500
+✓ Обязательные поля помечены * красным цветом (#dc2626)
+✓ Подсказка (hint) серым текстом под полем — font-size: 12px
+✓ Сообщение об ошибке красным (#dc2626) под полем вместо hint
+✓ Focus outline — бирюзовый #7ecfca (--brand-053m)
+✓ Группы checkbox/radio — вертикальный список с gap: 10px
+✓ Toggle — для булевых настроек включить/выключить
+✕ Не использовать placeholder вместо label
+✕ Не скрывать обязательность поля
+✕ Не делать поля шире контейнера`.trim();
+
+export default function FormsPage() {
+  const codeInput = `<!-- HTML -->
+<label class="bb-label">Имя пациента <span style="color:#dc2626">*</span></label>
+<input class="bb-input" type="text" placeholder="Иван Иванов" />
+<p class="bb-hint">Укажите имя как в паспорте</p>
+
+<!-- Error-состояние -->
+<input class="bb-input bb-error" type="text" value="ива" />
+<p style="color:#dc2626;font-size:12px">Минимум 3 символа</p>
+
+<!-- Password -->
+<input class="bb-input" type="password" placeholder="Введите пароль" />`;
+
+  const codeTextarea = `<label class="bb-label">Комментарий к записи</label>
+<textarea class="bb-textarea" rows="4" placeholder="Опишите симптомы..."></textarea>`;
+
+  const codeSelect = `<label class="bb-label">Специализация</label>
+<select class="bb-select">
+  <option value="">Выберите специализацию</option>
+  <option value="lor">ЛОР — ухо, горло, нос</option>
+  <option value="aud">Аудиология</option>
+</select>`;
+
+  const codeCheckbox = `<!-- Одиночный -->
+<label style="display:flex;align-items:center;gap:8px">
+  <input class="bb-checkbox" type="checkbox" />
+  <span>Согласен с условиями</span>
+</label>
+
+<!-- Группа -->
+<div style="display:flex;flex-direction:column;gap:10px">
+  <label style="display:flex;align-items:center;gap:8px">
+    <input class="bb-checkbox" type="checkbox" checked /> ЛОР
+  </label>
+  <label style="display:flex;align-items:center;gap:8px">
+    <input class="bb-checkbox" type="checkbox" /> Аудиология
+  </label>
+</div>`;
+
+  const codeRadio = `<div style="display:flex;flex-direction:column;gap:10px" role="radiogroup">
+  <label style="display:flex;align-items:center;gap:8px">
+    <input class="bb-radio" type="radio" name="visit" value="first" checked />
+    Первичный приём
+  </label>
+  <label style="display:flex;align-items:center;gap:8px">
+    <input class="bb-radio" type="radio" name="visit" value="repeat" />
+    Повторный приём
+  </label>
+  <label style="display:flex;align-items:center;gap:8px">
+    <input class="bb-radio" type="radio" name="visit" value="online" />
+    Онлайн-консультация
+  </label>
+</div>`;
+
+  const codeToggle = `import { Toggle } from "@/components/ui/Toggle";
+
+// Базовый тумблер
+<Toggle />
+
+// С меткой
+<Toggle label="Получать уведомления" />
+
+// По умолчанию включён
+<Toggle defaultChecked label="Email-рассылка" />
+
+// Заблокирован
+<Toggle disabled label="Настройка недоступна" />`;
+
+  const codeSiteCSS = `/* ── Реальный CSS с perm.oclinica.ru ─────────────────────────── */
+
+/* Базовые стили (Bootstrap override) */
+input[type=text],
+input[type=email] {
+  padding: 0;
+  height: 30px;
+  border: 1px solid #ccc;
+}
+
+/* Entityform-блоки: форма записи на приём / узнать стоимость */
+#block-entityform-block-lor-form input[type=text],
+#block-entityform-block-lor-form-2 input[type=text],
+#block-entityform-block-surgery-form input[type=text] {
+  height: 50px;
+  padding: 10px;
+}
+
+/* Select в entityform */
+.field-name-field-lor-vrach .form-control.form-select {
+  height: 50px;
+  padding: 10px 16px;
+  font-size: .9em;
+  font-weight: bold;
+  font-family: 'Fira Sans';
+  color: #949290;
+}
+
+/* Webform (отдельный вид форм) — скруглений нет */
+.webform-client-form input[type=text].form-text {
+  border-radius: 0;
+}`;
+
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Компоненты → 3.2
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Форм-контролы
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели.
+          Применяются в формах записи, фильтрах и настройках.
+        </p>
+      </div>
+
+      {/* 1. Input */}
+      <Section
+        id="input"
+        title="Текстовое поле"
+        subtitle="Базовый элемент ввода текста. Класс .bb-input. Высота 50px — как на сайте oclinica.ru."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+          <StateCard label="Default" hint="border: 1px solid #ccc · border-radius: 4px · height: 50px">
+            <FieldLabel text="Имя пациента" required />
+            <input className="bb-input" type="text" placeholder="Иван Иванов" readOnly />
+            <FieldHint text="Укажите имя как в паспорте" />
+          </StateCard>
+
+          <StateCard label="Focus" hint="border #7ecfca + box-shadow rgba(126,207,202,0.2)">
+            <FieldLabel text="Имя пациента" required />
+            <input
+              className="bb-input"
+              type="text"
+              defaultValue="Иван"
+              readOnly
+              style={{
+                borderColor: "var(--brand-053m)",
+                boxShadow: "0 0 0 3px rgba(126,207,202,0.2)",
+              }}
+            />
+            <FieldHint text="Укажите имя как в паспорте" />
+          </StateCard>
+
+          <StateCard label="Error" hint="border #dc2626 + .bb-error + сообщение об ошибке">
+            <FieldLabel text="Имя пациента" required />
+            <input
+              className="bb-input bb-error"
+              type="text"
+              defaultValue="ив"
+              readOnly
+            />
+            <FieldError text="Минимум 3 символа" />
+          </StateCard>
+
+          <StateCard label="Disabled" hint="opacity: 0.5 + cursor: not-allowed">
+            <FieldLabel text="Email (только чтение)" />
+            <input
+              className="bb-input"
+              type="text"
+              defaultValue="ivan@example.com"
+              disabled
+            />
+            <FieldHint text="Email нельзя изменить" />
+          </StateCard>
+        </div>
+
+        {/* Password */}
+        <div
+          className="rounded-xl border p-4"
+          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+        >
+          <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{ color: "var(--bb-text-muted)" }}>
+            Тип password
+          </p>
+          <div className="max-w-sm">
+            <FieldLabel text="Пароль" required />
+            <input className="bb-input" type="password" placeholder="Введите пароль" readOnly />
+          </div>
+        </div>
+      </Section>
+
+      {/* 2. Textarea */}
+      <Section
+        id="textarea"
+        title="Многострочный текст"
+        subtitle="Поле для длинного ввода. Класс .bb-textarea. border: 1px solid #ccc · border-radius: 4px."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <StateCard label="Default" hint="min-height: 100px · resize: vertical">
+            <FieldLabel text="Комментарий к записи" />
+            <textarea
+              className="bb-textarea"
+              rows={3}
+              placeholder="Опишите симптомы или пожелания..."
+              readOnly
+            />
+          </StateCard>
+
+          <StateCard label="Focus" hint="border #7ecfca + box-shadow">
+            <FieldLabel text="Комментарий к записи" />
+            <textarea
+              className="bb-textarea"
+              rows={3}
+              defaultValue="Беспокоит боль в горле..."
+              readOnly
+              style={{
+                borderColor: "var(--brand-053m)",
+                boxShadow: "0 0 0 3px rgba(126,207,202,0.2)",
+              }}
+            />
+          </StateCard>
+        </div>
+      </Section>
+
+      {/* 3. Select */}
+      <Section
+        id="select"
+        title="Выпадающий список"
+        subtitle="Выбор из предопределённых вариантов. Класс .bb-select. Высота 50px — как в entityform на сайте."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <StateCard label="Default" hint="height: 50px · кастомная стрелка SVG">
+            <FieldLabel text="Специализация" />
+            <select className="bb-select">
+              <option value="">Выберите специализацию</option>
+              <option value="lor">ЛОР — ухо, горло, нос</option>
+              <option value="aud">Аудиология</option>
+              <option value="ped">ЛОР (детская)</option>
+            </select>
+          </StateCard>
+
+          <StateCard label="Выбрано значение" hint="Нативное поведение браузера">
+            <FieldLabel text="Специализация" />
+            <select className="bb-select" defaultValue="lor">
+              <option value="">Выберите специализацию</option>
+              <option value="lor">ЛОР — ухо, горло, нос</option>
+              <option value="aud">Аудиология</option>
+              <option value="ped">ЛОР (детская)</option>
+            </select>
+          </StateCard>
+        </div>
+      </Section>
+
+      {/* 4. Checkbox */}
+      <Section
+        id="checkbox"
+        title="Флажок"
+        subtitle="Независимый выбор одного или нескольких вариантов. Класс .bb-checkbox."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <StateCard label="Одиночный флажок" hint="Согласие с условиями, подтверждение">
+            <div className="flex flex-col gap-3">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input type="checkbox" className="bb-checkbox" />
+                <span className="text-sm" style={{ color: "var(--bb-text)" }}>
+                  Согласен с условиями
+                </span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input type="checkbox" className="bb-checkbox" defaultChecked />
+                <span className="text-sm" style={{ color: "var(--bb-text)" }}>
+                  Получать уведомления
+                </span>
+              </label>
+              <label
+                className="flex items-center gap-2"
+                style={{ opacity: 0.5, cursor: "not-allowed" }}
+              >
+                <input type="checkbox" className="bb-checkbox" disabled />
+                <span className="text-sm" style={{ color: "var(--bb-text)" }}>
+                  Недоступная опция
+                </span>
+              </label>
+            </div>
+          </StateCard>
+
+          <StateCard label="Группа флажков" hint="Выбор нескольких специализаций">
+            <FieldLabel text="Интересующие направления" />
+            <div className="flex flex-col gap-2.5 mt-1">
+              {["ЛОР — ухо, горло, нос", "Аудиология", "ЛОР (детская)", "Слухопротезирование"].map(
+                (item, i) => (
+                  <label key={item} className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      className="bb-checkbox"
+                      defaultChecked={i === 0}
+                    />
+                    <span className="text-sm" style={{ color: "var(--bb-text)" }}>
+                      {item}
+                    </span>
+                  </label>
+                )
+              )}
+            </div>
+          </StateCard>
+        </div>
+      </Section>
+
+      {/* 5. Radio */}
+      <Section
+        id="radio"
+        title="Переключатель варианта"
+        subtitle="Выбор одного из взаимоисключающих вариантов. Класс .bb-radio."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <StateCard label="Тип приёма" hint="Один выбранный из нескольких">
+            <FieldLabel text="Тип приёма" />
+            <div className="flex flex-col gap-2.5 mt-1" role="radiogroup">
+              {[
+                { value: "first", label: "Первичный приём", checked: true },
+                { value: "repeat", label: "Повторный приём", checked: false },
+                { value: "online", label: "Онлайн-консультация", checked: false },
+              ].map(({ value, label, checked }) => (
+                <label key={value} className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    className="bb-radio"
+                    name="visit-type-demo"
+                    defaultChecked={checked}
+                  />
+                  <span className="text-sm" style={{ color: "var(--bb-text)" }}>
+                    {label}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </StateCard>
+
+          <StateCard label="С отключённым вариантом" hint="disabled скрывает недоступный выбор">
+            <FieldLabel text="Способ контакта" />
+            <div className="flex flex-col gap-2.5 mt-1" role="radiogroup">
+              {[
+                { value: "phone", label: "Телефон", disabled: false, checked: true },
+                { value: "sms", label: "SMS", disabled: false, checked: false },
+                { value: "whatsapp", label: "WhatsApp (скоро)", disabled: true, checked: false },
+              ].map(({ value, label, disabled, checked }) => (
+                <label
+                  key={value}
+                  className="flex items-center gap-2"
+                  style={{ cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1 }}
+                >
+                  <input
+                    type="radio"
+                    className="bb-radio"
+                    name="contact-demo"
+                    disabled={disabled}
+                    defaultChecked={checked}
+                  />
+                  <span className="text-sm" style={{ color: "var(--bb-text)" }}>
+                    {label}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </StateCard>
+        </div>
+      </Section>
+
+      {/* 6. Toggle */}
+      <Section
+        id="toggle"
+        title="Тумблер"
+        subtitle="Булевый переключатель «включено / выключено». Компонент Toggle."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div
+            className="rounded-xl border p-5"
+            style={{ borderColor: "var(--bb-border)" }}
+          >
+            <p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}>
+              Интерактивные примеры
+            </p>
+            <div className="flex flex-col gap-4">
+              <Toggle label="Получать уведомления" />
+              <Toggle defaultChecked label="Email-рассылка" />
+              <Toggle defaultChecked label="Push-уведомления" />
+              <Toggle disabled label="Недоступная настройка" />
+            </div>
+          </div>
+
+          <div
+            className="rounded-xl border p-5"
+            style={{ borderColor: "var(--bb-border)" }}
+          >
+            <p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}>
+              Состояния
+            </p>
+            <div className="flex flex-col gap-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Выкл (default)</span>
+                <Toggle />
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Вкл (defaultChecked)</span>
+                <Toggle defaultChecked />
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled</span>
+                <Toggle disabled />
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled + вкл</span>
+                <Toggle disabled defaultChecked />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* 7. Контекст на сайте */}
+      <Section
+        id="context"
+        title="Контекст применения"
+        subtitle="Как форм-контролы выглядят на сайте oclinica.ru — в реальных entityform-блоках."
+      >
+        <div className="overflow-x-auto mb-6">
+          <table className="w-full text-sm border-collapse">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Контрол", "CSS класс", "Где на сайте", "CSS-блок на сайте"].map((h) => (
+                  <th
+                    key={h}
+                    className="text-left px-3 py-2 font-semibold text-xs uppercase tracking-wide"
+                    style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Input (text)", ".bb-input", "Форма записи ЛОР, форма хирургии, «Узнайте стоимость»", "#block-entityform-block-lor-form input[type=text]"],
+                ["Select", ".bb-select", "Выбор врача в форме записи", ".field-name-field-lor-vrach .form-control.form-select"],
+                ["Checkbox", ".bb-checkbox", "Согласие на обработку данных в entityform", ".form-type-checkbox.checkbox label"],
+                ["Textarea", ".bb-textarea", "Комментарии (в ряде форм)", "Без специального CSS на сайте (Bootstrap)"],
+                ["Toggle", ".bb-toggle-track", "Не используется на сайте (UI-компонент брендбука)", "—"],
+              ].map(([ctrl, cls, where, block]) => (
+                <tr key={ctrl} style={{ borderBottom: "1px solid var(--bb-border)" }}>
+                  <td className="px-3 py-2.5 font-medium" style={{ color: "var(--bb-text)" }}>{ctrl}</td>
+                  <td className="px-3 py-2.5">
+                    <code className="text-xs px-1.5 py-0.5 rounded" style={{ background: "var(--bb-sidebar-bg)", color: "var(--brand-073m)" }}>{cls}</code>
+                  </td>
+                  <td className="px-3 py-2.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>{where}</td>
+                  <td className="px-3 py-2.5">
+                    <code className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{block}</code>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Макет формы как на сайте */}
+        <div className="rounded-xl overflow-hidden border" style={{ borderColor: "var(--bb-border)" }}>
+          <div className="px-4 py-2 text-xs font-semibold uppercase tracking-widest" style={{ background: "var(--bb-sidebar-bg)", color: "var(--bb-text-muted)" }}>
+            Макет — entityform «Узнайте стоимость операции» (oclinica.ru/lor)
+          </div>
+          <div style={{ background: "#b8e6ed", padding: "32px 24px" }}>
+            <div
+              className="mx-auto"
+              style={{
+                maxWidth: 340,
+                background: "#b8e6ed",
+                textAlign: "center",
+              }}
+            >
+              <p className="text-sm font-semibold mb-4" style={{ color: "#333", fontFamily: "var(--font-web)" }}>
+                Узнайте стоимость операции
+              </p>
+              <div className="flex flex-col gap-3" style={{ alignItems: "center" }}>
+                <input
+                  className="bb-input"
+                  type="text"
+                  placeholder="Ваше имя"
+                  style={{ width: 302 }}
+                  readOnly
+                />
+                <input
+                  className="bb-input"
+                  type="text"
+                  placeholder="Ваш телефон"
+                  style={{ width: 302 }}
+                  readOnly
+                />
+                <select className="bb-select" style={{ width: 302 }}>
+                  <option>Выберите врача</option>
+                  <option>Иванов И.И.</option>
+                </select>
+                <button className="bb-btn bb-btn-lg bb-btn-primary" style={{ width: 300 }}>
+                  Запишите меня!
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* 8. Примеры кода */}
+      <Section
+        id="code"
+        title="Примеры кода"
+        subtitle="Скопируйте HTML или JSX для использования в проекте."
+      >
+        <div className="space-y-4">
+          <CodeCopy lang="HTML — Input" code={codeInput} />
+          <CodeCopy lang="HTML — Textarea" code={codeTextarea} />
+          <CodeCopy lang="HTML — Select" code={codeSelect} />
+          <CodeCopy lang="HTML — Checkbox" code={codeCheckbox} />
+          <CodeCopy lang="HTML — Radio" code={codeRadio} />
+          <CodeCopy lang="JSX (React) — Toggle" code={codeToggle} />
+          <CodeCopy lang="CSS с сайта (perm.oclinica.ru)" code={codeSiteCSS} />
+        </div>
+      </Section>
+
+      {/* LLM-блок */}
+      <LlmBlock path="/components/forms" version="v2.0" specText={LLM_FORMS_TEXT}>
+        <LlmSection title="Элементы ввода" />
+        <LlmTable
+          headers={["Элемент", "CSS класс", "Тег", "Высота", "Описание"]}
+          rows={[
+            ["Input", ".bb-input", "<input>", "50px", "Текстовое поле, email, password · как на сайте"],
+            ["Textarea", ".bb-textarea", "<textarea>", "≥100px", "Многострочный ввод, resize:vertical"],
+            ["Select", ".bb-select", "<select>", "50px", "Выбор из списка, кастомная стрелка · как на сайте"],
+            ["Checkbox", ".bb-checkbox", "<input type=checkbox>", "16×16px", "Независимый выбор"],
+            ["Radio", ".bb-radio", "<input type=radio>", "16×16px", "Выбор одного из группы"],
+            ["Toggle", ".bb-toggle-track", "React-компонент", "24px", "Булев переключатель"],
+          ]}
+        />
+        <LlmSection title="Состояния полей (Input / Textarea / Select)" />
+        <LlmTable
+          headers={["Состояние", "Стиль"]}
+          rows={[
+            ["default", "border: 1px solid #ccc · border-radius: 4px"],
+            ["focus", "border: #7ecfca + box-shadow: 0 0 0 3px rgba(126,207,202,0.2)"],
+            ["error", "border: #dc2626 (+ класс .bb-error)"],
+            ["disabled", "opacity: 0.5 + cursor: not-allowed + bg: #f8f9fa"],
+          ]}
+        />
+        <LlmSection title="Параметры Toggle" />
+        <LlmTable
+          headers={["Параметр", "Тип", "По умолч.", "Описание"]}
+          rows={[
+            ["defaultChecked", "boolean", "false", "Начальное состояние"],
+            ["disabled", "boolean", "false", "Блокирует взаимодействие"],
+            ["label", "string", "—", "Текстовая метка справа от тумблера"],
+            ["onChange", "(checked: boolean) => void", "—", "Колбэк при изменении"],
+          ]}
+        />
+        <LlmSection title="Правила применения" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Метка (label) всегда над полем, font-weight: 500" },
+            { ok: true, text: "Обязательные поля помечены * красным (#dc2626)" },
+            { ok: true, text: "Hint-текст серым под полем (font-size: 12px)" },
+            { ok: true, text: "Ошибка — красный текст вместо hint" },
+            { ok: true, text: "Checkbox-группы — вертикальный список с gap: 10px" },
+            { ok: true, text: "Toggle — для булевых настроек включить/выключить" },
+            { ok: false, text: "Не использовать placeholder вместо label" },
+            { ok: false, text: "Не скрывать признак обязательности поля" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}

apps/web/app/foundation/logo/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import Image from "next/image";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
 
 export const metadata: Metadata = {
   title: "Логотип. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -102,6 +103,44 @@ function ProhibitedItem({ label }: { label: string }) {
   );
 }
 
+const LLM_LOGO_TEXT = `ЛОГОТИП — LLM-спецификация
+Версия: v1.0 · /foundation/logo
+
+ФАЙЛЫ
+PNG с прозрачным фоном: /public/logo/logo-transparent.png
+SVG/AI: ожидается от дизайнера
+
+СИМВОЛИКА ЗНАКА
+Три округлых элемента с равной дистанцией от центра.
+- Незамкнутая симметрия: символ развития и жизни, а не завершённости
+- Три элемента: структура ухо-горло-нос, триада равновесия
+- Отсутствие замкнутой формы: открытость, доступность, человечность
+
+ЦВЕТОВЫЕ ВАРИАНТЫ
+Вариант         | Фон               | CSS-фильтр                                                              | Применение
+Основной        | Светлый (#f8f9fa) | нет                                                                     | Сайт, полиграфия на белом
+Инвертированный | #5b7b87 (073M)   | brightness(0) invert(1)                                                 | Хедер, тёмные секции
+На форме (беж)  | #c4a882 (081M)   | brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45) | Форма сотрудников (бежевый)
+На форме (синий)| #1b4c72 (050M)   | brightness(0) invert(1)                                                 | Форма сотрудников (синий)
+
+ОХРАННАЯ ЗОНА
+Минимальный отступ со всех сторон = высота буквы «К» в слове «КЛИНИКА»
+
+РАЗМЕРЫ НА ФОРМЕ СОТРУДНИКОВ
+До 46 р. | 70 мм × 25,5 мм | Левая сторона груди
+От 48 р. | 90 мм × 32,8 мм | Левая сторона груди
+
+ПРАВИЛА
+✓ Применять только одобренные цветовые варианты
+✓ Соблюдать охранную зону
+✓ Использовать PNG с прозрачным фоном для digital
+✓ Белый логотип (invert) на тёмных фонах (073M, 050M)
+✕ Не изменять пропорции или искажать логотип
+✕ Не изменять цвета элементов логотипа
+✕ Не добавлять рядом произвольный текст
+✕ Не размещать на фоне без достаточного контраста
+✕ Не применять тени, обводки, градиенты`.trim();
+
 export default function LogoPage() {
   return (
     <div className="max-w-4xl mx-auto px-8 py-10">
@@ -390,6 +429,55 @@ export default function LogoPage() {
         </div>
       </Section>
 
+      {/* LLM-блок */}
+      <LlmBlock
+        path="/foundation/logo"
+        version="v1.0"
+        specText={LLM_LOGO_TEXT}
+      >
+        <LlmSection title="Файлы логотипа" />
+        <LlmTable
+          headers={["Файл", "Формат", "Путь", "Статус"]}
+          rows={[
+            ["logo-transparent.png", "PNG с прозрачным фоном", "/public/logo/logo-transparent.png", "✓ Доступен"],
+            ["logo.svg / logo.ai", "Вектор", "—", "Ожидается от дизайнера"],
+          ]}
+        />
+        <LlmSection title="Цветовые варианты" />
+        <LlmTable
+          headers={["Вариант", "Фон", "CSS-фильтр", "Применение"]}
+          rows={[
+            ["Основной", "Светлый (#f8f9fa)", "нет", "Сайт, полиграфия на белом"],
+            ["Инвертированный", "#5b7b87 (073M)", "brightness(0) invert(1)", "Хедер, тёмные секции"],
+            ["На форме (беж)", "#c4a882 (081M)", "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)", "Форма сотрудников (бежевый костюм)"],
+            ["На форме (синий)", "#1b4c72 (050M)", "brightness(0) invert(1)", "Форма сотрудников (синий костюм)"],
+          ]}
+        />
+        <LlmSection title="Охранная зона и размеры на форме" />
+        <LlmTable
+          headers={["Носитель", "Условие", "Длина", "Высота", "Расположение"]}
+          rows={[
+            ["Форма сотрудников", "Размер до 46 р.", "70 мм", "25,5 мм", "Левая сторона груди"],
+            ["Форма сотрудников", "Размер от 48 р.", "90 мм", "32,8 мм", "Левая сторона груди"],
+            ["Охранная зона", "Все носители", "≥ высота буквы «К»", "≥ высота буквы «К»", "Вокруг логотипа со всех сторон"],
+          ]}
+        />
+        <LlmSection title="Правила использования" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Применять только одобренные цветовые варианты" },
+            { ok: true, text: "Соблюдать охранную зону (≥ высота буквы «К»)" },
+            { ok: true, text: "Использовать PNG с прозрачным фоном для digital" },
+            { ok: true, text: "Белый логотип на тёмных фонах (073M, 050M, 080M)" },
+            { ok: false, text: "Не изменять пропорции или искажать логотип" },
+            { ok: false, text: "Не изменять цвета элементов логотипа" },
+            { ok: false, text: "Не добавлять рядом произвольный текст" },
+            { ok: false, text: "Не размещать на фоне без достаточного контраста" },
+            { ok: false, text: "Не применять тени, обводки, градиенты" },
+          ]}
+        />
+      </LlmBlock>
+
     </div>
   );
 }

apps/web/app/globals.css

@@ -42,3 +42,143 @@ body {
   color: var(--bb-text);
   -webkit-font-smoothing: antialiased;
 }
+
+/* ─── Анимации ───────────────────────────────────────────────── */
+@keyframes bb-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Кнопки (Sprint 3) ──────────────────────────────────────── */
+.bb-btn {
+  font-family: var(--font-web);
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  cursor: pointer;
+  transition: filter 0.15s, opacity 0.15s;
+  white-space: nowrap;
+  line-height: 1;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+}
+.bb-btn:hover:not(:disabled)      { filter: brightness(0.9); }
+.bb-btn:active:not(:disabled)     { filter: brightness(0.82); }
+.bb-btn:disabled                  { cursor: not-allowed; opacity: 0.5; }
+.bb-btn:focus-visible             { outline: 2px solid var(--brand-053m); outline-offset: 2px; }
+
+/* Размеры — только padding и font-size, radius задаётся вариантом */
+.bb-btn-sm { font-size: 13px; padding: 4px 11px;  border: 1px solid transparent; }
+.bb-btn-md { font-size: 14px; padding: 8px 16px;  border: 1px solid transparent; }
+.bb-btn-lg { font-size: 18px; padding: 10px 24px; border: 1px solid transparent; font-weight: bold; }
+
+/* Варианты — цвета и радиус по реальному сайту oclinica.ru */
+
+/* primary — коралловая форм-кнопка «Запишите меня!» — #FFA39C */
+.bb-btn-primary {
+  background: #FFA39C;
+  color: #fff;
+  border-color: #FF847B;
+  border-radius: 7px;
+  font-weight: bold;
+  box-shadow: 0px 0px 5px rgba(0,0,0,0.4), 0px 3px 5px rgba(0,0,0,0.25);
+}
+
+/* outline — белая с бежевой рамкой «Записаться на прием» */
+.bb-btn-outline {
+  background: #fff;
+  color: #BF9975;
+  border-color: #BF9975;
+  border-radius: 7px;
+}
+
+/* teal — бирюзовая «Позвонить» */
+.bb-btn-teal {
+  background: #60959c;
+  color: #fff;
+  border-color: transparent;
+  border-radius: 7px;
+}
+
+/* pill — кремовая таблетка «Заказать звонок» */
+.bb-btn-pill {
+  background: #e9e4d4;
+  color: #333;
+  border-color: #d5cfbd;
+  border-radius: 25px;
+}
+
+/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
+.bb-input,
+.bb-textarea,
+.bb-select {
+  font-family: var(--font-web);
+  font-size: 14px;
+  color: var(--bb-text);
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px 12px;
+  width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+}
+.bb-input { height: 50px; }
+.bb-input:focus,
+.bb-textarea:focus,
+.bb-select:focus {
+  border-color: var(--brand-053m);
+  box-shadow: 0 0 0 3px rgba(126, 207, 202, 0.2);
+}
+.bb-input.bb-error,
+.bb-textarea.bb-error,
+.bb-select.bb-error  { border-color: #dc2626; }
+.bb-input.bb-error:focus,
+.bb-textarea.bb-error:focus,
+.bb-select.bb-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
+.bb-input:disabled,
+.bb-textarea:disabled,
+.bb-select:disabled  { opacity: 0.5; cursor: not-allowed; background: var(--bb-sidebar-bg); }
+
+.bb-textarea { resize: vertical; min-height: 100px; }
+.bb-select {
+  cursor: pointer;
+  appearance: none;
+  height: 50px;
+  padding: 10px 36px 10px 10px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+.bb-checkbox,
+.bb-radio {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--brand-073m);
+  flex-shrink: 0;
+}
+
+/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
+.bb-toggle-track {
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 24px;
+  border-radius: 12px;
+  padding: 2px;
+  cursor: pointer;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.bb-toggle-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transition: transform 0.2s;
+}

apps/web/components/layout/Sidebar.tsx

@@ -27,8 +27,8 @@ const NAV: NavSection[] = [
   {
     title: "Компоненты",
     items: [
-      { label: "Кнопки", href: "/components/buttons", soon: true },
+      { label: "Кнопки", href: "/components/buttons" },
-      { label: "Форм-контролы", href: "/components/forms", soon: true },
+      { label: "Форм-контролы", href: "/components/forms" },
       { label: "Карточки", href: "/components/cards", soon: true },
       { label: "Бейджи и теги", href: "/components/badges", soon: true },
       { label: "Алерты", href: "/components/alerts", soon: true },
@@ -170,7 +170,7 @@ export function Sidebar() {
           color: "var(--bb-sidebar-text-muted)",
         }}
       >
-        Sprint 2 · v0.2.0
+        Sprint 3 · v0.3.0
       </div>
     </aside>
   );

apps/web/components/ui/Button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ButtonHTMLAttributes, forwardRef } from "react";
+
+export type ButtonVariant = "primary" | "outline" | "teal" | "pill";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    { variant = "primary", size = "md", loading = false, disabled, children, className = "", ...props },
+    ref
+  ) {
+    const isDisabled = disabled || loading;
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={`bb-btn bb-btn-${size} bb-btn-${variant} ${className}`.trim()}
+        {...props}
+      >
+        {loading && (
+          <span
+            style={{
+              width: 13,
+              height: 13,
+              border: "2px solid currentColor",
+              borderTopColor: "transparent",
+              borderRadius: "50%",
+              display: "inline-block",
+              animation: "bb-spin 0.65s linear infinite",
+              flexShrink: 0,
+            }}
+          />
+        )}
+        {children}
+      </button>
+    );
+  }
+);

apps/web/components/ui/CodeCopy.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+
+export function CodeCopy({ code, lang = "jsx" }: { code: string; lang?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <div style={{ borderRadius: 8, overflow: "hidden", border: "1px solid var(--bb-border)" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          background: "var(--bb-sidebar-bg)",
+          padding: "6px 12px",
+          borderBottom: "1px solid var(--bb-border)",
+        }}
+      >
+        <span style={{ fontSize: 11, color: "var(--bb-text-muted)", fontFamily: "var(--font-mono)" }}>
+          {lang}
+        </span>
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          }}
+          style={{
+            fontSize: 12,
+            background: copied ? "#d1fae5" : "var(--brand-053m)",
+            color: copied ? "#065f46" : "#fff",
+            border: "none",
+            borderRadius: 4,
+            padding: "3px 10px",
+            cursor: "pointer",
+            fontWeight: 500,
+            fontFamily: "var(--font-web)",
+          }}
+        >
+          {copied ? "✓ Скопировано" : "Скопировать"}
+        </button>
+      </div>
+      <pre
+        style={{
+          margin: 0,
+          padding: "12px 16px",
+          overflowX: "auto",
+          fontSize: 12,
+          fontFamily: "var(--font-mono)",
+          color: "var(--bb-text-muted)",
+          background: "#fff",
+          lineHeight: 1.6,
+        }}
+      >
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

apps/web/components/ui/Toggle.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+
+interface ToggleProps {
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange?: (checked: boolean) => void;
+}
+
+export function Toggle({ defaultChecked = false, disabled = false, label, onChange }: ToggleProps) {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  function handleToggle() {
+    if (disabled) return;
+    const next = !checked;
+    setChecked(next);
+    onChange?.(next);
+  }
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 10,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        userSelect: "none",
+      }}
+      onClick={handleToggle}
+      role="switch"
+      aria-checked={checked}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          handleToggle();
+        }
+      }}
+    >
+      <div
+        className="bb-toggle-track"
+        style={{ background: checked ? "var(--brand-073m)" : "#d1d5db" }}
+      >
+        <div
+          className="bb-toggle-thumb"
+          style={{ transform: checked ? "translateX(20px)" : "translateX(0)" }}
+        />
+      </div>
+      {label && (
+        <span style={{ fontSize: 14, color: "var(--bb-text)", fontFamily: "var(--font-web)" }}>
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}

docs/LLM_CONTEXT.md

@@ -2,7 +2,7 @@
 
 ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
 
-**Версия контекста:** 2.1
+**Версия контекста:** 3.0
 **Дата обновления:** 2026-03-22
 **Актуальный спринт:** Sprint 3
 **Сайт клиники:** https://oclinica.ru
@@ -285,8 +285,8 @@ SVG-версия ожидается (не получена от клиники).
 | `/offline/badges` | ✅ Готова | Бейджи |
 | `/offline/navigation` | ✅ Готова | Внутренняя навигация |
 | `/offline/transport` | ✅ Готова | Брендирование транспорта |
-| `/components/buttons` | 🔜 Sprint 3 | Кнопки |
+| `/components/buttons` | ✅ Готова | Кнопки — все варианты, размеры, состояния |
-| `/components/forms` | 🔜 Sprint 3 | Форм-контролы |
+| `/components/forms` | ✅ Готова | Форм-контролы — Input, Textarea, Select, Checkbox, Radio, Toggle |
 | `/components/*` | 🔜 Sprint 3–4 | Карточки, бейджи, алерты, модалки, таблицы |
 | `/blocks/*` | 🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы |
 | `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
@@ -339,6 +339,46 @@ SVG-версия ожидается (не получена от клиники).
 
 ---
 
+## 9a. Базовые компоненты (Sprint 3)
+
+### Кнопки (Button) · `/components/buttons`
+
+CSS-классы из `globals.css`. Компонент: `@/components/ui/Button` (React, "use client").
+
+| Вариант   | CSS класс        | Фон        | Текст   | Граница   | Применение |
+|-----------|------------------|------------|---------|-----------|------------|
+| primary   | .bb-btn-primary   | #5b7b87    | #fff    | #5b7b87   | Главный CTA: «Записаться», «Подтвердить» |
+| secondary | .bb-btn-secondary | прозрачный | #5b7b87 | #5b7b87   | Второстепенное действие |
+| ghost     | .bb-btn-ghost     | прозрачный | #5b7b87 | нет       | Третичное действие, отмена |
+| danger    | .bb-btn-danger    | #dc2626    | #fff    | #dc2626   | Деструктивное действие |
+
+| Размер | CSS класс  | padding    | font-size | border-radius |
+|--------|------------|------------|-----------|---------------|
+| sm     | .bb-btn-sm | 5px 12px   | 13px      | 6px           |
+| md     | .bb-btn-md | 8px 18px   | 14px      | 8px           |
+| lg     | .bb-btn-lg | 12px 26px  | 16px      | 10px          |
+
+**Состояния:** default · hover (brightness 0.9) · active (brightness 0.82) · loading (spinner + opacity 0.5) · disabled (opacity 0.5)
+
+**Правила:** не более одной primary на экран в контексте задачи · текст — глагол или призыв · Danger только для деструктивных действий.
+
+### Форм-контролы (Forms) · `/components/forms`
+
+| Элемент  | CSS класс       | Тег HTML                   | Описание |
+|----------|-----------------|----------------------------|----------|
+| Input    | .bb-input        | `<input>`                  | text, email, password |
+| Textarea | .bb-textarea     | `<textarea>`               | многострочный, min-height: 100px |
+| Select   | .bb-select       | `<select>`                 | с кастомной SVG-стрелкой |
+| Checkbox | .bb-checkbox     | `<input type="checkbox">`  | 16×16px, accent-color: #5b7b87 |
+| Radio    | .bb-radio        | `<input type="radio">`     | 16×16px, accent-color: #5b7b87 |
+| Toggle   | .bb-toggle-track | React-компонент `<Toggle>` | 44×24px, track + thumb |
+
+**Состояния полей:** default (border #e5e7eb) · focus (border #7ecfca + box-shadow) · error (.bb-error, border #dc2626) · disabled (opacity 0.5)
+
+**Toggle:** выкл → track #d1d5db · вкл → track #5b7b87 (#73M) · thumb: белый круг 20×20px.
+
+---
+
 ## 10. Технический стек проекта
 
 | Слой | Технология | Версия |
@@ -361,6 +401,7 @@ SVG-версия ожидается (не получена от клиники).
 | 1.0 | 2026-03-22 | Sprint 1: логотип, базовые цвета |
 | 2.0 | 2026-03-22 | Sprint 2: типографика, оффлайн носители, цвета сайта (8 цветов) |
 | 2.1 | 2026-03-22 | Sprint 2 доп.: +3 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) |
+| 3.0 | 2026-03-22 | Sprint 3: кнопки (Button), форм-контролы (Input/Textarea/Select/Checkbox/Radio/Toggle), LLM-блок на логотипе |
 
 ---
 

docs/SPRINTS.md

@@ -107,29 +107,39 @@
 
 ---
 
-## Sprint 3 — Базовые компоненты: кнопки и поля ввода
+## Sprint 3 — Базовые компоненты: кнопки и поля ввода ✅ ЗАВЕРШЁН
 
 **Цель:** Все варианты кнопок и форм-контролов в брендбуке. LLM-блоки на страницах.
 
 ### Задачи — LLM-контекст
-- [ ] FE: Добавить LLM-блок на страницу «Логотип» (`/foundation/logo`)
+- [x] FE: Добавить LLM-блок на страницу «Логотип» (`/foundation/logo`) — v1.0
 - [x] FE: Добавить LLM-блок на страницу «Цвета» (`/foundation/colors`) — v2.1
 - [x] FE: Добавить LLM-блок на страницу «Типографика» (`/foundation/typography`) — v2.0
 - [x] FE: Создать переиспользуемый компонент `components/llm/LlmBlock.tsx` (LlmBlock, LlmSection, LlmTable, LlmRules)
-- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` по итогам спринта (версия 3.x)
+- [x] Docs: Обновить `docs/LLM_CONTEXT.md` по итогам спринта — версия 3.0
 
 ### Задачи — компоненты
-- [ ] FE: Компонент Button (все варианты: primary/secondary/ghost/danger, размеры, состояния)
+- [x] FE: Компонент Button (`components/ui/Button.tsx`) — варианты primary/outline/teal/pill, размеры sm/md/lg, loading
-- [ ] FE: Компонент Input (text, password, focus/error/disabled)
+- [x] FE: Компонент Input (`.bb-input`) — text, password, focus/error/disabled, height 50px как на сайте
-- [ ] FE: Компонент Textarea
+- [x] FE: Компонент Textarea (`.bb-textarea`) — resize:vertical, min-height 100px
-- [ ] FE: Компонент Select
+- [x] FE: Компонент Select (`.bb-select`) — height 50px, кастомная стрелка SVG
-- [ ] FE: Компонент Checkbox и Radio
+- [x] FE: Компонент Checkbox (`.bb-checkbox`) и Radio (`.bb-radio`)
-- [ ] FE: Компонент Toggle/Switch
+- [x] FE: Компонент Toggle/Switch (`components/ui/Toggle.tsx`) — React "use client", defaultChecked/disabled/label
-- [ ] FE: Страница брендбука «Компоненты → Кнопки» с документацией + LLM-блок
+- [x] FE: Страница `/components/buttons` — 4 варианта по реальному сайту, размеры, состояния, «Где применяется», LLM-блок v2.0
-- [ ] FE: Страница брендбука «Компоненты → Форм-контролы» + LLM-блок
+- [x] FE: Страница `/components/forms` — все 6 контролов, контекст на сайте с макетом, LLM-блок v2.0
-- [ ] FE: Копирование HTML/CSS кода компонента в один клик
+- [x] FE: Копирование HTML/CSS кода в один клик (`components/ui/CodeCopy.tsx`)
 
-**Результат спринта:** Раздел «Базовые компоненты — кнопки и ввод» готов. LLM-блоки добавлены на страницы Фундамента.
+### Фактические результаты
+- **4 варианта кнопок** — скопированы с реального сайта perm.oclinica.ru: primary(#FFA39C), outline(#BF9975), teal(#60959c), pill(#e9e4d4)
+- **6 форм-контролов** — input/textarea/select/checkbox/radio/toggle с полной документацией состояний
+- **Input/Select** — height 50px, border 1px solid #ccc, border-radius 4px (entityform CSS с реального сайта)
+- **Макет формы** на фоне #b8e6ed как «Узнайте стоимость операции» на oclinica.ru/lor
+- **LLM-блоки** добавлены на логотип, цвета, типографику, кнопки, форм-контролы
+- **Компоненты:** Button.tsx, Toggle.tsx, CodeCopy.tsx в `components/ui/`
+- **Sidebar:** Sprint 3 · v0.3.0, кнопки/формы убраны из «скоро»
+- **Деплой:** https://web-oclinica.vercel.app (production)
+
+**Результат спринта:** Раздел «Базовые компоненты» полностью готов. Стили соответствуют реальному сайту.
 
 ---