Improve wizard mapping and quality guidance

apps/ui/css/wizard.css

@@ -189,6 +189,137 @@
   color: var(--text-primary);
 }
 
+.mapping-builder-card .config-card-header {
+  align-items: flex-start;
+}
+
+.mapping-table {
+  display: grid;
+  gap: 8px;
+}
+
+.mapping-row {
+  display: grid;
+  grid-template-columns:
+    minmax(130px, 1fr)
+    minmax(105px, 0.65fr)
+    minmax(130px, 1fr)
+    minmax(120px, 0.8fr)
+    minmax(150px, 0.9fr)
+    34px;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-overlay);
+}
+
+.response-mapping-row {
+  grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) 34px;
+}
+
+.mapping-row-remove {
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.mapping-builder-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.advanced-mapping-details {
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.02);
+  overflow: hidden;
+}
+
+.advanced-mapping-details summary {
+  padding: 10px 12px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.advanced-mapping-details[open] summary {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.mapping-response-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.15fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.json-tree-picker {
+  display: grid;
+  gap: 6px;
+  max-height: 320px;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-overlay);
+}
+
+.json-tree-node {
+  width: 100%;
+  text-align: left;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  padding: 7px 9px;
+  cursor: pointer;
+}
+
+.json-tree-node:hover {
+  border-color: var(--border);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+
+.mapping-warnings {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.mapping-warning {
+  padding: 10px 12px;
+  border: 1px solid rgba(245, 158, 11, 0.34);
+  border-radius: 10px;
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.mapping-warning strong {
+  color: var(--text-primary);
+}
+
+@media (max-width: 900px) {
+  .mapping-row,
+  .response-mapping-row,
+  .mapping-response-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .mapping-row-remove {
+    width: 100%;
+  }
+}
+
 /* ══════════════════════════════════════════════════
    STEP SIDEBAR
 ══════════════════════════════════════════════════ */
@@ -1527,6 +1658,16 @@
   margin-top: 6px;
 }
 
+.quality-finding-jump {
+  margin-top: 8px;
+}
+
+.quality-focus-target {
+  outline: 2px solid rgba(13, 148, 136, 0.85);
+  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14);
+  transition: box-shadow 0.2s ease, outline-color 0.2s ease;
+}
+
 @media (max-width: 760px) {
   .agent-preview-summary {
     grid-template-columns: 1fr;