frontend/src/app/site-finder/page.tsx

@@ -19,7 +19,6 @@ import type {
   ParcelBboxItem,
   BboxCoords,
 } from "@/lib/site-finder-api";
-import styles from "./site-finder.module.css";
 
 // EntryMap uses Leaflet — must load without SSR
 const EntryMap = dynamic(
@@ -32,13 +31,13 @@ const EntryMap = dynamic(
         style={{
           flex: 1,
           minHeight: 480,
-          background: "rgba(9, 22, 31, 0.62)",
+          background: "var(--bg-card-alt)",
-          border: "1px dashed rgba(150, 192, 214, 0.4)",
+          border: "1px dashed var(--border-strong)",
           borderRadius: 12,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          color: "#8ba6b3",
+          color: "var(--fg-tertiary)",
           fontSize: 14,
         }}
       >
@@ -130,10 +129,9 @@ export default function SiteFinderPage() {
 
   return (
     <main
-      className={styles.sfRoot}
-      data-theme="dark"
       style={{
         minHeight: "100vh",
+        background: "var(--bg-app)",
         display: "flex",
         flexDirection: "column",
       }}
@@ -141,8 +139,8 @@ export default function SiteFinderPage() {
       {/* Header */}
       <header
         style={{
-          background: "rgba(12, 30, 42, 0.94)",
+          background: "var(--bg-card)",
-          borderBottom: "1px solid rgba(150, 192, 214, 0.18)",
+          borderBottom: "1px solid var(--border-card)",
           padding: "12px 24px",
           display: "flex",
           alignItems: "center",
@@ -154,20 +152,19 @@ export default function SiteFinderPage() {
           href="/"
           style={{
             fontSize: 13,
-            color: "#8ba6b3",
+            color: "var(--fg-secondary)",
             textDecoration: "none",
           }}
         >
           ← Главная
         </Link>
-        <span style={{ color: "rgba(150, 192, 214, 0.4)" }}>·</span>
+        <span style={{ color: "var(--border-soft)" }}>·</span>
         <h1
           style={{
             margin: 0,
             fontSize: 16,
             fontWeight: 600,
-            color: "#f2fafe",
+            color: "var(--fg-primary)",
-            letterSpacing: "0.01em",
           }}
         >
           SiteFinder · карта участков
@@ -177,7 +174,7 @@ export default function SiteFinderPage() {
           style={{
             marginLeft: "auto",
             fontSize: 13,
-            color: "#7fd0ee",
+            color: "var(--accent)",
             textDecoration: "none",
             fontWeight: 500,
           }}

frontend/src/app/site-finder/site-finder.module.css

@@ -1,132 +0,0 @@
-/*
- * SiteFinder entry page — ПТИЦА dark "operator terminal" skin (Track B).
- *
- * Every design token is scoped under `.sfRoot[data-theme="dark"]` (the page
- * wrapper carries BOTH the class and the attribute) so these dark vars NEVER
- * leak onto the global light theme of other pages (analytics etc.). This
- * mirrors how the ПТИЦА cockpit scopes its dark tokens under
- * `.pticaRoot[data-theme="dark"]`. The dark palette is the SAME cockpit palette
- * (#060f16 / #08131c surfaces, #dcebf2 text, #7fd0ee accent-cyan, token borders).
- */
-
-/* ===================== SCOPED TOKENS (dark) ===================== */
-.sfRoot[data-theme="dark"] {
-  --sf-font-mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
-
-  /* accents */
-  --sf-accent-cyan: #7fd0ee;
-  --sf-accent-cyan-strong: #8ed3ff;
-  --sf-accent-green: #38c172;
-  --sf-accent-yellow: #e0a93b;
-  --sf-accent-red: #d2655b;
-
-  /* dark surface palette */
-  --sf-bg: #060f16;
-  --sf-bg-2: #08131c;
-  --sf-grid-line: rgba(120, 165, 190, 0.06);
-  --sf-surface: rgba(11, 26, 36, 0.72);
-  --sf-surface-2: rgba(9, 22, 31, 0.62);
-  --sf-surface-strong: rgba(12, 30, 42, 0.94);
-  --sf-surface-muted: rgba(26, 52, 67, 0.55);
-  --sf-surface-inset: rgba(4, 12, 18, 0.6);
-
-  --sf-text: #dcebf2;
-  --sf-text-strong: #f2fafe;
-  --sf-text-muted: #8ba6b3;
-  --sf-text-soft: #5f7886;
-
-  --sf-border: rgba(150, 192, 214, 0.18);
-  --sf-border-strong: rgba(150, 192, 214, 0.4);
-  --sf-border-faint: rgba(150, 192, 214, 0.1);
-
-  --sf-map-filter: saturate(0.7) contrast(1.12) brightness(0.7);
-  --sf-glow: rgba(110, 200, 240, 0.28);
-  --sf-glow-strong: rgba(110, 200, 240, 0.55);
-  --sf-shadow: 0 18px 70px rgba(0, 0, 0, 0.5);
-
-  /* root paint — subtle grid + corner glow, same recipe as the cockpit */
-  color: var(--sf-text);
-  font-variant-numeric: tabular-nums;
-  -webkit-font-smoothing: antialiased;
-  background:
-    linear-gradient(90deg, transparent 31px, var(--sf-grid-line) 32px),
-    linear-gradient(0deg, transparent 31px, var(--sf-grid-line) 32px),
-    radial-gradient(circle at 82% -8%, var(--sf-glow), transparent 42%),
-    var(--sf-bg);
-  background-size:
-    32px 32px,
-    32px 32px,
-    100% 100%,
-    100% 100%;
-}
-
-/* ===================== LEAFLET (dark map chrome) ===================== */
-.sfRoot :global(.leaflet-container) {
-  background: var(--sf-bg-2);
-  font-family: inherit;
-}
-/* dark base tiles → muted / contrast-bumped so markers stay readable */
-.sfRoot :global(.leaflet-tile-pane) {
-  filter: var(--sf-map-filter);
-}
-/* glassy dark popups (match the cockpit chrome) */
-.sfRoot :global(.leaflet-popup-content-wrapper) {
-  background: var(--sf-surface-strong);
-  color: var(--sf-text);
-  border: 1px solid var(--sf-border);
-  border-radius: 8px;
-  box-shadow: var(--sf-shadow);
-}
-.sfRoot :global(.leaflet-popup-tip) {
-  background: var(--sf-surface-strong);
-}
-.sfRoot :global(.leaflet-popup-content) {
-  margin: 10px 12px;
-}
-.sfRoot :global(.leaflet-container a.leaflet-popup-close-button) {
-  color: var(--sf-text-muted);
-}
-/* dark tooltips */
-.sfRoot :global(.leaflet-tooltip) {
-  background: var(--sf-surface-strong);
-  color: var(--sf-text);
-  border: 1px solid var(--sf-border);
-  box-shadow: var(--sf-shadow);
-}
-.sfRoot :global(.leaflet-tooltip-top::before) {
-  border-top-color: var(--sf-border);
-}
-.sfRoot :global(.leaflet-control-attribution) {
-  background: rgba(8, 19, 28, 0.55);
-  color: var(--sf-text-soft);
-  font-size: 9px;
-  padding: 1px 6px;
-  opacity: 0.65;
-  backdrop-filter: blur(4px);
-}
-.sfRoot :global(.leaflet-control-attribution a) {
-  color: var(--sf-text-muted);
-}
-/* dark-styled zoom +/- control (prototype map controls) */
-.sfRoot :global(.leaflet-control-zoom) {
-  border: 1px solid var(--sf-border-strong);
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 0 12px var(--sf-glow);
-}
-.sfRoot :global(.leaflet-control-zoom a) {
-  background: var(--sf-surface-strong);
-  color: var(--sf-text);
-  border-bottom: 1px solid var(--sf-border);
-  width: 28px;
-  height: 28px;
-  line-height: 28px;
-}
-.sfRoot :global(.leaflet-control-zoom a:hover) {
-  background: var(--sf-surface-muted);
-  color: var(--sf-accent-cyan);
-}
-.sfRoot :global(.leaflet-control-zoom a.leaflet-disabled) {
-  background: var(--sf-surface-strong);
-  color: var(--sf-text-soft);
-}

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

@@ -30,15 +30,7 @@ export function CadInput({ onSubmit, loading }: Props) {
   }
 
   return (
-    <form
+    <form onSubmit={handleSubmit}>
-      onSubmit={handleSubmit}
-      style={{
-        background: "rgba(11, 26, 36, 0.72)",
-        border: "1px solid rgba(150, 192, 214, 0.18)",
-        borderRadius: 12,
-        padding: "14px 16px",
-      }}
-    >
       <label
         htmlFor="cad-input"
         style={{
@@ -46,7 +38,6 @@ export function CadInput({ onSubmit, loading }: Props) {
           fontWeight: 600,
           marginBottom: 6,
           fontSize: 14,
-          color: "#f2fafe",
         }}
       >
         Кадастровый номер
@@ -63,17 +54,14 @@ export function CadInput({ onSubmit, loading }: Props) {
           placeholder="66:41:0204016:10"
           style={{
             flex: 1,
-            minWidth: 0,
             padding: "8px 12px",
             fontSize: 14,
-            background: "rgba(4, 12, 18, 0.6)",
-            color: "#dcebf2",
             border: error
-              ? "1px solid #d2655b"
+              ? "1px solid var(--danger, #B3261E)"
-              : "1px solid rgba(150, 192, 214, 0.4)",
+              : "1px solid var(--border-strong, #D1D5DB)",
             borderRadius: 8,
             outline: "none",
-            fontFamily: "'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace",
+            fontFamily: "monospace",
           }}
           disabled={loading}
         />
@@ -85,12 +73,10 @@ export function CadInput({ onSubmit, loading }: Props) {
             fontSize: 14,
             fontWeight: 600,
             background: loading
-              ? "rgba(26, 52, 67, 0.55)"
+              ? "var(--fg-tertiary, #73767E)"
-              : "rgba(127, 208, 238, 0.16)",
+              : "var(--accent, #1D4ED8)",
-            color: loading ? "#5f7886" : "#8ed3ff",
+            color: "var(--fg-on-dark, #E2E8F0)",
-            border: loading
+            border: "none",
-              ? "1px solid rgba(150, 192, 214, 0.18)"
-              : "1px solid rgba(127, 208, 238, 0.55)",
             borderRadius: 8,
             cursor: loading ? "default" : "pointer",
             whiteSpace: "nowrap",
@@ -104,7 +90,7 @@ export function CadInput({ onSubmit, loading }: Props) {
           style={{
             marginTop: 8,
             fontSize: 12,
-            color: "#d2655b",
+            color: "var(--danger, #B3261E)",
           }}
         >
           {error}
@@ -114,7 +100,7 @@ export function CadInput({ onSubmit, loading }: Props) {
         style={{
           marginTop: 4,
           fontSize: 11,
-          color: "#5f7886",
+          color: "var(--fg-tertiary, #73767E)",
         }}
       >
         Примеры: <code>66:41:0204016:10</code> (участок) ·{" "}

frontend/src/components/site-finder/entry/EntryMap.tsx

@@ -7,7 +7,6 @@ import {
   CircleMarker,
   Tooltip,
   Popup,
-  AttributionControl,
   useMapEvents,
 } from "react-leaflet";
 import type { Map as LeafletMap } from "leaflet";
@@ -85,7 +84,7 @@ function ParcelMarkers({
   return (
     <>
       {parcels.map((parcel) => {
-        const color = STATUS_COLORS[parcel.status] ?? "#8ba6b3";
+        const color = STATUS_COLORS[parcel.status] ?? "#73767E";
         const statusLabel = STATUS_LABELS[parcel.status] ?? parcel.status;
         const isSelected = parcel.cad_num === selectedCad;
         return (
@@ -94,26 +93,22 @@ function ParcelMarkers({
             center={[parcel.lat, parcel.lon]}
             radius={isSelected ? 10 : 7}
             pathOptions={{
-              // Selected → bright cyan ring so it pops on the dark base; others
+              color: isSelected ? "#0F172A" : color,
-              // get a soft dark halo for separation from the tiles.
-              color: isSelected ? "#8ed3ff" : "rgba(6, 15, 22, 0.85)",
               fillColor: color,
-              fillOpacity: 0.9,
+              fillOpacity: 0.85,
-              weight: isSelected ? 3 : 1.5,
+              weight: isSelected ? 2.5 : 1.5,
             }}
             // Leaflet renders interactive vector markers with a pointer cursor
             // and keeps them keyboard-focusable; click opens the Popup below.
           >
             {/* Hover hint — quick identity without committing to the analyze POST */}
-            <Tooltip direction="top" offset={[0, -8]} opacity={1}>
+            <Tooltip direction="top" offset={[0, -8]} opacity={0.95}>
-              <div style={{ fontSize: 12, color: "#dcebf2" }}>
+              <div style={{ fontSize: 12 }}>
-                <div style={{ fontWeight: 600, color: "#f2fafe" }}>
+                <div style={{ fontWeight: 600 }}>{parcel.cad_num}</div>
-                  {parcel.cad_num}
+                <div style={{ color: "var(--fg-secondary)" }}>
-                </div>
-                <div style={{ color: "#8ba6b3" }}>
                   {parcel.area_ha != null ? parcel.area_ha.toFixed(2) : "—"} га · {statusLabel}
                 </div>
-                <div style={{ color: "#5f7886", marginTop: 2 }}>
+                <div style={{ color: "var(--fg-tertiary)", marginTop: 2 }}>
                   Нажмите, чтобы открыть анализ
                 </div>
               </div>
@@ -125,13 +120,15 @@ function ParcelMarkers({
                 <div
                   style={{
                     fontWeight: 600,
-                    color: "#f2fafe",
+                    color: "var(--fg-primary)",
                     fontVariantNumeric: "tabular-nums",
                   }}
                 >
                   {parcel.cad_num}
                 </div>
-                <div style={{ color: "#8ba6b3", marginBottom: 8 }}>
+                <div
+                  style={{ color: "var(--fg-secondary)", marginBottom: 8 }}
+                >
                   {parcel.area_ha != null ? parcel.area_ha.toFixed(2) : "—"} га · {statusLabel}
                 </div>
                 <button
@@ -144,9 +141,9 @@ function ParcelMarkers({
                     justifyContent: "center",
                     gap: 6,
                     width: "100%",
-                    background: "rgba(127, 208, 238, 0.16)",
+                    background: "var(--accent)",
-                    color: "#8ed3ff",
+                    color: "#fff",
-                    border: "1px solid rgba(127, 208, 238, 0.55)",
+                    border: "none",
                     borderRadius: 6,
                     padding: "6px 12px",
                     fontSize: 13,
@@ -165,7 +162,7 @@ function ParcelMarkers({
                     width: "100%",
                     background: "none",
                     border: "none",
-                    color: "#8ba6b3",
+                    color: "var(--fg-secondary)",
                     padding: "6px 12px 0",
                     fontSize: 12,
                     cursor: "pointer",
@@ -229,19 +226,13 @@ export function EntryMap({
         zoom={DEFAULT_ZOOM}
         style={{ width: "100%", height: "100%", borderRadius: 12 }}
         ref={mapRef}
-        // Drop Leaflet's built-in attribution control (it carries the "Leaflet"
-        // flag prefix). We add our own below with prefix={false} so only the data
-        // credit shows — no Leaflet branding.
-        attributionControl={false}
         // Click on map backdrop deselects parcel
         // handled via eventHandlers on markers + backdrop div
       >
         <TileLayer
-          attribution="© OpenStreetMap · © CARTO"
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-          url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          subdomains="abcd"
         />
-        <AttributionControl prefix={false} position="bottomright" />
         <BboxListener onBboxChange={handleBboxChange} />
         {parcels && parcels.length > 0 && (
           <ParcelMarkers
@@ -276,13 +267,12 @@ export function EntryMap({
             left: "50%",
             transform: "translateX(-50%)",
             zIndex: 1000,
-            background: "rgba(12, 30, 42, 0.94)",
+            background: "var(--bg-card)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 20,
             padding: "4px 14px",
             fontSize: 12,
-            color: "#8ba6b3",
+            color: "var(--fg-secondary)",
-            boxShadow: "0 0 12px rgba(110, 200, 240, 0.28)",
           }}
         >
           Загрузка участков...
@@ -298,14 +288,13 @@ export function EntryMap({
             left: "50%",
             transform: "translate(-50%, -50%)",
             zIndex: 1000,
-            background: "rgba(12, 30, 42, 0.94)",
+            background: "var(--bg-card)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 12,
             padding: "16px 24px",
             fontSize: 13,
-            color: "#8ba6b3",
+            color: "var(--fg-secondary)",
             textAlign: "center",
-            boxShadow: "0 18px 70px rgba(0, 0, 0, 0.5)",
           }}
         >
           Нет участков в текущем виде. Измените фильтры или область карты.

frontend/src/components/site-finder/entry/MapFilterBar.tsx

@@ -32,16 +32,14 @@ function Chip({ label, selected, onClick, disabled, title }: ChipProps) {
         padding: "4px 12px",
         borderRadius: 999,
         border: selected
-          ? "1px solid rgba(127, 208, 238, 0.55)"
+          ? "1px solid var(--accent)"
-          : "1px solid rgba(150, 192, 214, 0.18)",
+          : "1px solid var(--border-card)",
-        background: selected
+        background: selected ? "var(--accent-soft)" : "var(--bg-card)",
-          ? "rgba(127, 208, 238, 0.16)"
+        color: selected ? "var(--accent)" : "var(--fg-secondary)",
-          : "rgba(9, 22, 31, 0.62)",
-        color: selected ? "#8ed3ff" : "#8ba6b3",
         fontSize: 12,
         fontWeight: selected ? 500 : 400,
         cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.4 : 1,
+        opacity: disabled ? 0.45 : 1,
         whiteSpace: "nowrap",
         transition: "background 0.12s, color 0.12s, border-color 0.12s",
       }}
@@ -132,8 +130,8 @@ export function MapFilterBar({
   return (
     <div
       style={{
-        background: "rgba(12, 30, 42, 0.94)",
+        background: "var(--bg-card)",
-        borderBottom: "1px solid rgba(150, 192, 214, 0.18)",
+        borderBottom: "1px solid var(--border-card)",
         padding: "8px 16px",
         display: "flex",
         flexWrap: "wrap",
@@ -145,7 +143,7 @@ export function MapFilterBar({
       <span
         style={{
           fontSize: 12,
-          color: "#8ba6b3",
+          color: "var(--fg-secondary)",
           marginRight: 4,
           flexShrink: 0,
           fontVariantNumeric: "tabular-nums",
@@ -177,7 +175,7 @@ export function MapFilterBar({
         style={{
           width: 1,
           height: 20,
-          background: "rgba(150, 192, 214, 0.18)",
+          background: "var(--border-soft)",
           flexShrink: 0,
         }}
       />
@@ -199,7 +197,7 @@ export function MapFilterBar({
         style={{
           width: 1,
           height: 20,
-          background: "rgba(150, 192, 214, 0.18)",
+          background: "var(--border-soft)",
           flexShrink: 0,
         }}
       />
@@ -225,7 +223,7 @@ export function MapFilterBar({
         style={{
           width: 1,
           height: 20,
-          background: "rgba(150, 192, 214, 0.18)",
+          background: "var(--border-soft)",
           flexShrink: 0,
         }}
       />
@@ -248,18 +246,18 @@ export function MapFilterBar({
           borderRadius: 999,
           border:
             DISTRICT_VRI_FILTERS_AVAILABLE && filters.district
-              ? "1px solid rgba(127, 208, 238, 0.55)"
+              ? "1px solid var(--accent)"
-              : "1px solid rgba(150, 192, 214, 0.18)",
+              : "1px solid var(--border-card)",
           background:
             DISTRICT_VRI_FILTERS_AVAILABLE && filters.district
-              ? "rgba(127, 208, 238, 0.16)"
+              ? "var(--accent-soft)"
-              : "rgba(9, 22, 31, 0.62)",
+              : "var(--bg-card)",
           color:
             DISTRICT_VRI_FILTERS_AVAILABLE && filters.district
-              ? "#8ed3ff"
+              ? "var(--accent)"
-              : "#8ba6b3",
+              : "var(--fg-secondary)",
           cursor: DISTRICT_VRI_FILTERS_AVAILABLE ? "pointer" : "not-allowed",
-          opacity: DISTRICT_VRI_FILTERS_AVAILABLE ? 1 : 0.4,
+          opacity: DISTRICT_VRI_FILTERS_AVAILABLE ? 1 : 0.45,
         }}
       >
         <option value="">Все районы</option>
@@ -276,7 +274,7 @@ export function MapFilterBar({
           onClick={clearAll}
           style={{
             fontSize: 12,
-            color: "#d2655b",
+            color: "var(--danger)",
             background: "none",
             border: "none",
             cursor: "pointer",

frontend/src/components/site-finder/entry/ParcelDrawer.tsx

@@ -22,7 +22,7 @@ const VRI_LABELS: Record<string, string> = {
 export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
   if (!parcel) return null;
 
-  const statusColor = STATUS_COLORS[parcel.status] ?? "#8ba6b3";
+  const statusColor = STATUS_COLORS[parcel.status] ?? "#73767E";
   const statusLabel = STATUS_LABELS[parcel.status] ?? parcel.status;
 
   return (
@@ -37,13 +37,13 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
         bottom: 16,
         width: 360,
         zIndex: 20,
-        background: "rgba(12, 30, 42, 0.94)",
+        background: "var(--bg-card)",
-        border: "1px solid rgba(150, 192, 214, 0.18)",
+        borderLeft: "1px solid var(--border-card)",
+        border: "1px solid var(--border-card)",
         borderRadius: 12,
         display: "flex",
         flexDirection: "column",
-        boxShadow: "0 18px 70px rgba(0, 0, 0, 0.5)",
+        boxShadow: "-4px 0 24px rgba(0,0,0,0.10)",
-        backdropFilter: "blur(6px)",
       }}
       role="dialog"
       aria-label="Карточка участка"
@@ -52,7 +52,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
       <div
         style={{
           padding: "16px 20px 12px",
-          borderBottom: "1px solid rgba(150, 192, 214, 0.1)",
+          borderBottom: "1px solid var(--border-soft)",
           display: "flex",
           alignItems: "flex-start",
           gap: 8,
@@ -62,7 +62,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
           size={16}
           strokeWidth={1.5}
           style={{
-            color: "#8ba6b3",
+            color: "var(--fg-secondary)",
             marginTop: 2,
             flexShrink: 0,
           }}
@@ -74,7 +74,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#5f7886",
+              color: "var(--fg-tertiary)",
               fontVariantNumeric: "tabular-nums",
             }}
           >
@@ -83,7 +83,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
           <div
             style={{
               fontSize: 13,
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               marginTop: 2,
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -101,7 +101,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
             border: "none",
             cursor: "pointer",
             padding: 4,
-            color: "#8ba6b3",
+            color: "var(--fg-tertiary)",
             flexShrink: 0,
           }}
         >
@@ -121,8 +121,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
         {/* Status */}
         <div
           style={{
-            background: "rgba(4, 12, 18, 0.6)",
+            background: "var(--bg-card-alt)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 8,
             padding: "10px 12px",
           }}
@@ -133,7 +133,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               marginBottom: 4,
             }}
           >
@@ -159,7 +159,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               style={{
                 fontSize: 13,
                 fontWeight: 500,
-                color: "#dcebf2",
+                color: "var(--fg-primary)",
               }}
             >
               {statusLabel}
@@ -170,8 +170,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
         {/* Area */}
         <div
           style={{
-            background: "rgba(4, 12, 18, 0.6)",
+            background: "var(--bg-card-alt)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 8,
             padding: "10px 12px",
           }}
@@ -182,7 +182,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               marginBottom: 4,
             }}
           >
@@ -192,7 +192,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
             style={{
               fontSize: 18,
               fontWeight: 600,
-              color: "#dcebf2",
+              color: "var(--fg-primary)",
               fontVariantNumeric: "tabular-nums",
             }}
           >
@@ -201,7 +201,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               style={{
                 fontSize: 13,
                 fontWeight: 400,
-                color: "#8ba6b3",
+                color: "var(--fg-secondary)",
               }}
             >
               га
@@ -212,8 +212,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
         {/* District */}
         <div
           style={{
-            background: "rgba(4, 12, 18, 0.6)",
+            background: "var(--bg-card-alt)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 8,
             padding: "10px 12px",
           }}
@@ -224,7 +224,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               marginBottom: 4,
             }}
           >
@@ -234,7 +234,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
             style={{
               fontSize: 13,
               fontWeight: 500,
-              color: "#dcebf2",
+              color: "var(--fg-primary)",
             }}
           >
             {parcel.district}
@@ -244,8 +244,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
         {/* VRI */}
         <div
           style={{
-            background: "rgba(4, 12, 18, 0.6)",
+            background: "var(--bg-card-alt)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 8,
             padding: "10px 12px",
           }}
@@ -256,7 +256,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               marginBottom: 4,
             }}
           >
@@ -266,7 +266,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
             style={{
               fontSize: 13,
               fontWeight: 500,
-              color: "#dcebf2",
+              color: "var(--fg-primary)",
             }}
           >
             {VRI_LABELS[parcel.vri] ?? parcel.vri}
@@ -276,8 +276,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
         {/* Coords */}
         <div
           style={{
-            background: "rgba(4, 12, 18, 0.6)",
+            background: "var(--bg-card-alt)",
-            border: "1px solid rgba(150, 192, 214, 0.18)",
+            border: "1px solid var(--border-card)",
             borderRadius: 8,
             padding: "10px 12px",
             gridColumn: "1 / -1",
@@ -289,7 +289,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               marginBottom: 4,
             }}
           >
@@ -298,7 +298,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
           <div
             style={{
               fontSize: 12,
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
               fontVariantNumeric: "tabular-nums",
             }}
           >
@@ -314,7 +314,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
       <div
         style={{
           padding: "16px 20px",
-          borderTop: "1px solid rgba(150, 192, 214, 0.1)",
+          borderTop: "1px solid var(--border-soft)",
           display: "flex",
           flexDirection: "column",
           gap: 8,
@@ -337,9 +337,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
             alignItems: "center",
             justifyContent: "center",
             gap: 8,
-            background: "rgba(127, 208, 238, 0.16)",
+            background: "var(--accent)",
-            color: "#8ed3ff",
+            color: "#fff",
-            border: "1px solid rgba(127, 208, 238, 0.55)",
             borderRadius: 8,
             padding: "10px 20px",
             fontSize: 14,
@@ -360,7 +359,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
             justifyContent: "center",
             gap: 8,
             background: "none",
-            color: "#8ba6b3",
+            color: "var(--fg-secondary)",
             borderRadius: 8,
             padding: "8px 20px",
             fontSize: 13,

frontend/src/components/site-finder/entry/ParcelLegend.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-// Status color constants — kept in sync with EntryMap marker colours.
+// Status color constants — kept in sync with EntryMap marker colours
-// ПТИЦА cockpit palette (dark map): green = свободный, amber = в работе,
-// cyan = избранный — semantics preserved, tuned to read on the dark base.
 export const STATUS_COLORS: Record<string, string> = {
-  free: "#38c172",
+  free: "#0A7A3A",
-  in_progress: "#e0a93b",
+  in_progress: "#9A6700",
-  favorite: "#7fd0ee",
+  favorite: "#1D4ED8",
 };
 
 export const STATUS_LABELS: Record<string, string> = {
@@ -23,8 +21,8 @@ export function ParcelLegend() {
   return (
     <div
       style={{
-        background: "rgba(11, 26, 36, 0.72)",
+        background: "var(--bg-card)",
-        border: "1px solid rgba(150, 192, 214, 0.18)",
+        border: "1px solid var(--border-card)",
         borderRadius: 8,
         padding: "8px 12px",
         display: "flex",
@@ -39,7 +37,7 @@ export function ParcelLegend() {
           fontWeight: 500,
           textTransform: "uppercase",
           letterSpacing: "0.04em",
-          color: "#8ba6b3",
+          color: "var(--fg-secondary)",
         }}
       >
         Статус участка
@@ -59,7 +57,7 @@ export function ParcelLegend() {
               display: "inline-block",
             }}
           />
-          <span style={{ fontSize: 12, color: "#dcebf2" }}>
+          <span style={{ fontSize: 12, color: "var(--fg-primary)" }}>
             {STATUS_LABELS[status]}
           </span>
         </div>

frontend/src/components/site-finder/entry/RecentParcels.tsx

@@ -25,8 +25,8 @@ export function RecentParcels() {
     return (
       <div
         style={{
-          background: "rgba(11, 26, 36, 0.72)",
+          background: "var(--bg-card)",
-          border: "1px solid rgba(150, 192, 214, 0.18)",
+          border: "1px solid var(--border-card)",
           borderRadius: 12,
           padding: "12px 16px",
         }}
@@ -34,7 +34,7 @@ export function RecentParcels() {
         <div
           style={{
             height: 14,
-            background: "rgba(26, 52, 67, 0.55)",
+            background: "var(--bg-card-alt)",
             borderRadius: 4,
             marginBottom: 12,
             width: 120,
@@ -45,7 +45,7 @@ export function RecentParcels() {
             key={i}
             style={{
               height: 40,
-              background: "rgba(26, 52, 67, 0.55)",
+              background: "var(--bg-card-alt)",
               borderRadius: 6,
               marginBottom: 6,
             }}
@@ -61,8 +61,8 @@ export function RecentParcels() {
     return (
       <div
         style={{
-          background: "rgba(11, 26, 36, 0.72)",
+          background: "var(--bg-card)",
-          border: "1px solid rgba(150, 192, 214, 0.18)",
+          border: "1px solid var(--border-card)",
           borderRadius: 12,
           padding: "12px 16px",
         }}
@@ -78,7 +78,7 @@ export function RecentParcels() {
           <Clock
             size={14}
             strokeWidth={1.5}
-            style={{ color: "#8ba6b3" }}
+            style={{ color: "var(--fg-secondary)" }}
           />
           <span
             style={{
@@ -86,7 +86,7 @@ export function RecentParcels() {
               fontWeight: 500,
               textTransform: "uppercase",
               letterSpacing: "0.04em",
-              color: "#8ba6b3",
+              color: "var(--fg-secondary)",
             }}
           >
             Недавние участки
@@ -95,7 +95,7 @@ export function RecentParcels() {
         <p
           style={{
             fontSize: 12,
-            color: "#5f7886",
+            color: "var(--fg-tertiary)",
             margin: 0,
           }}
         >
@@ -108,8 +108,8 @@ export function RecentParcels() {
   return (
     <div
       style={{
-        background: "rgba(11, 26, 36, 0.72)",
+        background: "var(--bg-card)",
-        border: "1px solid rgba(150, 192, 214, 0.18)",
+        border: "1px solid var(--border-card)",
         borderRadius: 12,
         overflow: "hidden",
       }}
@@ -118,7 +118,7 @@ export function RecentParcels() {
       <div
         style={{
           padding: "10px 14px 8px",
-          borderBottom: "1px solid rgba(150, 192, 214, 0.1)",
+          borderBottom: "1px solid var(--border-soft)",
           display: "flex",
           alignItems: "center",
           gap: 6,
@@ -127,7 +127,7 @@ export function RecentParcels() {
         <Clock
           size={14}
           strokeWidth={1.5}
-          style={{ color: "#8ba6b3" }}
+          style={{ color: "var(--fg-secondary)" }}
         />
         <span
           style={{
@@ -135,7 +135,7 @@ export function RecentParcels() {
             fontWeight: 500,
             textTransform: "uppercase",
             letterSpacing: "0.04em",
-            color: "#8ba6b3",
+            color: "var(--fg-secondary)",
           }}
         >
           Недавние участки
@@ -156,13 +156,13 @@ export function RecentParcels() {
               textDecoration: "none",
               borderBottom:
                 idx < shown.length - 1
-                  ? "1px solid rgba(150, 192, 214, 0.1)"
+                  ? "1px solid var(--border-soft)"
                   : "none",
               transition: "background 0.1s",
             }}
             onMouseEnter={(e) => {
               (e.currentTarget as HTMLElement).style.background =
-                "rgba(26, 52, 67, 0.55)";
+                "var(--bg-card-alt)";
             }}
             onMouseLeave={(e) => {
               (e.currentTarget as HTMLElement).style.background = "transparent";
@@ -172,7 +172,7 @@ export function RecentParcels() {
               size={14}
               strokeWidth={1.5}
               style={{
-                color: "#5f7886",
+                color: "var(--fg-tertiary)",
                 marginTop: 2,
                 flexShrink: 0,
               }}
@@ -182,7 +182,7 @@ export function RecentParcels() {
                 style={{
                   fontSize: 12,
                   fontWeight: 500,
-                  color: "#dcebf2",
+                  color: "var(--fg-primary)",
                   fontVariantNumeric: "tabular-nums",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -194,7 +194,7 @@ export function RecentParcels() {
               <div
                 style={{
                   fontSize: 11,
-                  color: "#5f7886",
+                  color: "var(--fg-tertiary)",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",