style: switch studio theme to purple-first palette

Author: OpenClaw Bot

frontend/src/styles.css

@@ -1,7 +1,7 @@
 :root {
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  color: #e5e7eb;
-  background: #070b18;
+  color: #f3e8ff;
+  background: #12061f;
 }
 
 * { box-sizing: border-box; }
@@ -10,9 +10,9 @@ body {
   margin: 0;
   min-height: 100vh;
   background:
-    radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.35), transparent 40%),
-    radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.25), transparent 35%),
-    #070b18;
+    radial-gradient(circle at 18% 0%, rgba(192, 132, 252, 0.45), transparent 42%),
+    radial-gradient(circle at 82% 0%, rgba(139, 92, 246, 0.30), transparent 36%),
+    #12061f;
 }
 
 .app-shell {
@@ -41,8 +41,8 @@ body {
 }
 
 .badge {
-  background: linear-gradient(135deg, #22d3ee, #818cf8);
-  color: #0f172a;
+  background: linear-gradient(135deg, #c084fc, #8b5cf6);
+  color: #2a0e42;
   font-weight: 700;
   font-size: 12px;
   padding: 8px 12px;
@@ -53,9 +53,9 @@ body {
   margin-bottom: 14px;
   padding: 10px 12px;
   border-radius: 10px;
-  background: rgba(16, 185, 129, 0.15);
-  border: 1px solid rgba(16, 185, 129, 0.4);
-  color: #6ee7b7;
+  background: rgba(168, 85, 247, 0.18);
+  border: 1px solid rgba(196, 181, 253, 0.45);
+  color: #e9d5ff;
 }
 
 .main-grid {
@@ -66,11 +66,11 @@ body {
 }
 
 .panel {
-  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(9, 15, 30, 0.95));
-  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: linear-gradient(180deg, rgba(40, 18, 70, 0.94), rgba(28, 12, 52, 0.96));
+  border: 1px solid rgba(192, 132, 252, 0.28);
   border-radius: 16px;
   padding: 14px;
-  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.35);
+  box-shadow: 0 20px 35px rgba(12, 2, 24, 0.45);
 }
 
 .panel h2 {
@@ -92,9 +92,9 @@ input, textarea, select, button {
 
 input, textarea, select {
   margin-top: 6px;
-  border: 1px solid rgba(148, 163, 184, 0.35);
-  background: rgba(15, 23, 42, 0.75);
-  color: #e2e8f0;
+  border: 1px solid rgba(196, 181, 253, 0.35);
+  background: rgba(46, 16, 81, 0.6);
+  color: #f3e8ff;
   border-radius: 10px;
   padding: 10px;
 }
@@ -109,8 +109,8 @@ textarea { min-height: 84px; resize: vertical; }
 
 .primary-btn, button {
   border: none;
-  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-  color: white;
+  background: linear-gradient(135deg, #a855f7, #7c3aed);
+  color: #faf5ff;
   border-radius: 10px;
   padding: 10px 12px;
   font-weight: 600;
@@ -126,7 +126,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .hint {
-  color: #93c5fd;
+  color: #d8b4fe;
   font-size: 12px;
   margin-top: 10px;
 }
@@ -163,8 +163,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .slide-card {
-  background: rgba(2, 6, 23, 0.65);
-  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: rgba(30, 10, 54, 0.68);
+  border: 1px solid rgba(192, 132, 252, 0.25);
   border-radius: 12px;
   padding: 10px;
   margin-bottom: 10px;
@@ -175,25 +175,25 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .slide-card span {
   display: inline-block;
   font-size: 12px;
-  color: #93c5fd;
+  color: #c4b5fd;
   margin-bottom: 2px;
 }
 
 .skeleton {
   border-radius: 10px;
   padding: 14px;
-  background: rgba(148, 163, 184, 0.08);
-  border: 1px dashed rgba(148, 163, 184, 0.4);
-  color: #94a3b8;
+  background: rgba(168, 85, 247, 0.10);
+  border: 1px dashed rgba(196, 181, 253, 0.45);
+  color: #d8b4fe;
 }
 
 .chat-box {
   height: 62vh;
   overflow: auto;
   border-radius: 12px;
   padding: 10px;
-  background: rgba(2, 6, 23, 0.7);
-  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(24, 8, 44, 0.74);
+  border: 1px solid rgba(196, 181, 253, 0.22);
   margin-bottom: 10px;
 }
 
@@ -207,13 +207,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .msg.user {
-  background: rgba(59, 130, 246, 0.25);
-  border: 1px solid rgba(59, 130, 246, 0.4);
+  background: rgba(168, 85, 247, 0.30);
+  border: 1px solid rgba(192, 132, 252, 0.45);
 }
 
 .msg.assistant {
-  background: rgba(30, 41, 59, 0.9);
-  border: 1px solid rgba(148, 163, 184, 0.25);
+  background: rgba(44, 16, 74, 0.85);
+  border: 1px solid rgba(196, 181, 253, 0.26);
 }
 
 .chat-input-row {