fix(site-finder): §4.2 «Качество данных» — inline-стили (Tailwind flex/gap не применяется) (#1953) (#2100)

frontend/src/components/site-finder/BestLayoutsBlock.tsx

@@ -14,10 +14,27 @@ import type {
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
-const CONFIDENCE_STYLES: Record<Confidence, { cls: string; label: string }> = {
-  high: { cls: "bg-emerald-100 text-emerald-800", label: "Высокое" },
-  medium: { cls: "bg-amber-100 text-amber-800", label: "Среднее" },
-  low: { cls: "bg-rose-100 text-rose-800", label: "Низкое" },
+// Inline-токены (НЕ Tailwind-классы): на site-finder-отчёте Tailwind-утилиты
+// (flex/gap/bg-*) не генерируются в сборку — секции стилизованы inline (#1953).
+const CONFIDENCE_STYLES: Record<
+  Confidence,
+  { fg: string; bg: string; label: string }
+> = {
+  high: {
+    fg: "var(--success, #0A7A3A)",
+    bg: "var(--success-soft, #DCFCE7)",
+    label: "Высокое",
+  },
+  medium: {
+    fg: "var(--warn, #9A6700)",
+    bg: "var(--warn-soft, #FEF3C7)",
+    label: "Среднее",
+  },
+  low: {
+    fg: "var(--danger, #B3261E)",
+    bg: "var(--danger-soft, #FEE2E2)",
+    label: "Низкое",
+  },
 };
 
 const TIME_WINDOW_LABELS: Record<TimeWindow, string> = {
@@ -47,21 +64,50 @@ const ROOM_BUCKET_LABELS: Record<string, string> = {
 function DataQualityCard({ dq }: { dq: BestLayoutsResponse["data_quality"] }) {
   const conf = CONFIDENCE_STYLES[dq.confidence];
   return (
-    <div className="border border-gray-200 rounded-xl px-[18px] py-[14px] bg-white flex items-center gap-x-3 gap-y-1 flex-wrap">
-      <span className="font-semibold text-[13px] text-gray-700">
+    // Inline-стили (НЕ Tailwind): flex/gap/bg-* не применяются на этой странице —
+    // спаны текли inline и слипались («НизкоеПокрытие», #1953). Inline гарантирует
+    // flex+gap (воздух вокруг «·») и фон бейджа.
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        columnGap: 12,
+        rowGap: 4,
+        border: "1px solid var(--border-card, #E6E8EC)",
+        borderRadius: 12,
+        padding: "14px 18px",
+        background: "var(--bg-card, #ffffff)",
+      }}
+    >
+      <span
+        style={{
+          fontWeight: 600,
+          fontSize: 13,
+          color: "var(--fg-secondary, #5B6066)",
+        }}
+      >
         Качество данных:
       </span>
       <span
-        className={`px-[10px] py-[2px] rounded-md text-xs font-semibold ${conf.cls}`}
+        style={{
+          fontSize: 12,
+          fontWeight: 600,
+          padding: "2px 10px",
+          borderRadius: 6,
+          color: conf.fg,
+          background: conf.bg,
+        }}
       >
         {conf.label}
       </span>
-      {/* Явный разделитель + неразрывное «покрытие …» — иначе при flex-wrap бейдж
-          качества и текст покрытия слипались («Низкое​Покрытие 18%», #1953). */}
-      <span className="text-xs text-gray-400" aria-hidden>
+      <span
+        style={{ fontSize: 12, color: "var(--fg-tertiary, #73767E)" }}
+        aria-hidden
+      >
         ·
       </span>
-      <span className="text-xs text-gray-500">
+      <span style={{ fontSize: 12, color: "var(--fg-secondary, #5B6066)" }}>
         покрытие {dq.velocity_coverage_pct.toFixed(0)}% (
         {dq.objects_with_velocity_data} из {dq.objects_total_in_radius} ЖК)
       </span>