diff --git a/web/style.css b/web/style.css
index bc53dc5..38cb288 100644
--- a/web/style.css
+++ b/web/style.css
@@ -744,8 +744,16 @@ details.joint-temps summary { cursor: pointer; font-weight: 600; font-size: 12px
   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-banner-warn {
+  background: rgba(240, 173, 78, 0.15);
+  color: var(--warn);
+  border: 1px solid var(--warn);
+}
+.ra-banner-ok {
+  background: rgba(62, 207, 142, 0.15);
+  color: var(--ok);
+  border: 1px solid var(--ok);
+}
 .ra-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -753,24 +761,41 @@ details.joint-temps summary { cursor: pointer; font-weight: 600; font-size: 12px
   margin-bottom: 12px;
 }
 .ra-card {
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 4px;
   padding: 12px;
-  background: #fafafa;
+  background: var(--panel);
+  color: var(--fg);
 }
 .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 img { width: 100%; display: block; background: var(--bg); }
 .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-sep { color: var(--dim); }
+.ra-result {
+  font-family: monospace;
+  font-size: 0.9em;
+  padding: 6px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  white-space: pre-wrap;
+}
+.ra-result.dim { color: var(--dim); }
 .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; }
+.ra-danger {
+  background: var(--danger);
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ra-danger:hover { filter: brightness(1.1); }
+#tab-right-arm .dim { color: var(--dim); }