Improving all side of app

web/src/styles.css

@@ -1263,6 +1263,8 @@ body {
 .flow-node-flow    { border-top: 3px solid #10b981; }
 .flow-node-action  { border-top: 3px solid #3b82f6; }
 .flow-node-selected { border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f680; }
+.flow-node-error { border-color: #ef4444; box-shadow: 0 0 0 2px #ef444455; }
+.flow-node-error.flow-node-selected { box-shadow: 0 0 0 2px #ef4444aa; }
 
 .flow-node-header {
   display: flex;
@@ -1309,6 +1311,24 @@ body {
   pointer-events: none;
 }
 
+/* Named input ports (Formula/Lua) show their variable name beside the port. */
+.flow-port-label-in {
+  position: absolute;
+  left: 0.55rem;
+  font-size: 0.6rem;
+  color: #94a3b8;
+  pointer-events: none;
+}
+
+/* Named-input editor row in the inspector */
+.synth-var-row {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+  margin-bottom: 0.3rem;
+}
+.synth-var-row > input { flex: 1; min-width: 0; }
+
 /* Expression field: signal-insert helper row */
 .flow-expr-insert {
   display: flex;