feat(gui): markup + CSS tab Braccio DX

web/style.css

@@ -734,3 +734,43 @@ details.joint-temps summary { cursor: pointer; font-weight: 600; font-size: 12px
 .agent-task-list .task-name { font-weight: 600; flex: 0 0 auto; }
 .agent-task-list .task-desc { color: var(--dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agent-task-list button.link-btn { font-size: 11px; padding: 2px 6px; }
+
+/* ----- Tab Braccio DX ----- */
+.ra-banner {
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ra-banner-warn { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
+.ra-banner-ok   { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+.ra-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.ra-card {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 12px;
+  background: #fafafa;
+}
+.ra-card h3 { margin-top: 0; }
+.ra-card.ra-wide { grid-column: 1 / -1; }
+.ra-imgwrap { position: relative; width: 100%; }
+.ra-imgwrap img { width: 100%; display: block; }
+.ra-imgwrap canvas { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; }
+.ra-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
+.ra-sep { color: #888; }
+.ra-result { font-family: monospace; font-size: 0.9em; padding: 6px; background: #f0f0f0; border-radius: 4px; }
+.ra-pose-table { border-collapse: collapse; }
+.ra-pose-table th, .ra-pose-table td { padding: 2px 8px; text-align: left; }
+.ra-pose-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
+.ra-pose-form input { width: 100%; }
+.ra-wide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.ra-danger { background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; }
+.ra-danger:hover { background: #c82333; }
+.dim { color: #888; }