feat: WIP: add css fixes

web/src/lib/components/kit/ColorField.svelte

@@ -32,10 +32,15 @@
 		gap: 8px;
 	}
 	label {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 8px;
 		font: 10px var(--font-mono);
-		letter-spacing: 0.1em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 		color: var(--muted);
+		margin-bottom: 8px;
 	}
 	.color-field {
 		display: flex;

web/src/lib/components/kit/FieldGrid.svelte

@@ -14,19 +14,31 @@
 </div>
 
 <style>
+	/* Реф раскладывает контролы горизонтальным рядом ячеек, каждая с
+	   верхней границей-разделителем (≈189px, font-size 16px). */
 	.controls {
-		display: flex;
-		flex-direction: column;
-		gap: 14px;
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(0, 1fr);
+		gap: 0 24px;
 	}
 	.controls.compact {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 14px;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(0, 1fr);
+		gap: 0 16px;
+	}
+	/* Верхняя граница-разделитель на каждой ячейке контрола. */
+	.controls > :global(*) {
+		border-top: 1px solid var(--line);
+		padding-top: 10px;
+		min-width: 0;
 	}
 	@media (max-width: 800px) {
+		.controls,
 		.controls.compact {
-			grid-template-columns: 1fr;
+			grid-auto-flow: row;
+			grid-auto-columns: auto;
 		}
 	}
 </style>

web/src/lib/components/kit/SliderField.svelte

@@ -33,7 +33,7 @@
 	.control-block {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 0;
 	}
 	label {
 		display: flex;
@@ -41,9 +41,10 @@
 		justify-content: space-between;
 		gap: 0.5rem;
 		font: 10px var(--font-mono);
-		letter-spacing: 0.1em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 		color: var(--muted);
+		margin-bottom: 8px;
 	}
 	output {
 		font: 11px var(--font-mono);