Update app.py

app.py

@@ -166,8 +166,8 @@ CSS = """
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body, .gradio-container {
-    background: #0a0a0f !important;
-    color: #e2e8f0 !important;
+    background: #1e1e2e !important;
+    color: #cdd6f4 !important;
     font-family: 'Inter', sans-serif !important;
 }
 
@@ -175,20 +175,20 @@ body, .gradio-container {
 .twt-header {
     text-align: center;
     padding: 2.5rem 1rem 1.5rem;
-    border-bottom: 1px solid #1e1e2e;
+    border-bottom: 1px solid #313244;
     margin-bottom: 1.5rem;
 }
 .twt-title {
     font-size: 2rem;
     font-weight: 600;
     letter-spacing: -0.03em;
-    color: #f1f5f9;
+    color: #cdd6f4;
     font-family: 'JetBrains Mono', monospace;
 }
-.twt-title span { color: #818cf8; }
+.twt-title span { color: #cba6f7; }
 .twt-sub {
     font-size: 0.8rem;
-    color: #64748b;
+    color: #6c7086;
     margin-top: 0.4rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -198,29 +198,29 @@ body, .gradio-container {
 .input-label {
     font-size: 0.75rem;
     font-weight: 500;
-    color: #64748b;
+    color: #a6adc8;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     margin-bottom: 0.5rem;
 }
 textarea {
-    background: #0f0f1a !important;
-    border: 1px solid #1e1e2e !important;
+    background: #181825 !important;
+    border: 1px solid #45475a !important;
     border-radius: 8px !important;
-    color: #e2e8f0 !important;
+    color: #cdd6f4 !important;
     font-family: 'Inter', sans-serif !important;
     font-size: 0.95rem !important;
     transition: border-color 0.2s !important;
 }
 textarea:focus {
-    border-color: #818cf8 !important;
+    border-color: #cba6f7 !important;
     outline: none !important;
 }
 
 /* Button */
 button.primary {
-    background: #818cf8 !important;
-    color: #0a0a0f !important;
+    background: #cba6f7 !important;
+    color: #1e1e2e !important;
     font-weight: 600 !important;
     font-family: 'Inter', sans-serif !important;
     border: none !important;
@@ -231,7 +231,7 @@ button.primary {
     transition: background 0.2s !important;
     cursor: pointer !important;
 }
-button.primary:hover { background: #6366f1 !important; }
+button.primary:hover { background: #b4befe !important; }
 
 /* Step cards */
 .step-card {
@@ -240,23 +240,23 @@ button.primary:hover { background: #6366f1 !important; }
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     margin-bottom: 0.5rem;
-    background: #0f0f1a;
-    border: 1px solid #1e1e2e;
+    background: #181825;
+    border: 1px solid #313244;
     border-radius: 8px;
     font-size: 0.88rem;
     line-height: 1.6;
     animation: fadeSlide 0.25s ease both;
 }
 .step-card.step-fault {
-    border-color: #450a0a;
-    background: #150a0a;
+    border-color: #f38ba8;
+    background: #2a1520;
 }
 @keyframes fadeSlide {
     from { opacity: 0; transform: translateY(6px); }
     to   { opacity: 1; transform: translateY(0); }
 }
 .step-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
-.step-text { flex: 1; color: #cbd5e1; font-family: 'Inter', sans-serif; }
+.step-text { flex: 1; color: #cdd6f4; font-family: 'Inter', sans-serif; }
 .badge {
     flex-shrink: 0;
     font-size: 0.65rem;
@@ -268,9 +268,9 @@ button.primary:hover { background: #6366f1 !important; }
     align-self: flex-start;
     margin-top: 2px;
 }
-.badge-ok   { background: #052e16; color: #4ade80; }
-.badge-fail { background: #450a0a; color: #f87171; }
-.badge-final { background: #1e1b4b; color: #818cf8; }
+.badge-ok   { background: #1e3a2a; color: #a6e3a1; border: 1px solid #a6e3a1; }
+.badge-fail { background: #3a1e22; color: #f38ba8; border: 1px solid #f38ba8; }
+.badge-final { background: #2a1e3a; color: #cba6f7; border: 1px solid #cba6f7; }
 
 /* Trace panel */
 .trace-row {
@@ -278,48 +278,48 @@ button.primary:hover { background: #6366f1 !important; }
     align-items: center;
     gap: 0.6rem;
     font-size: 0.8rem;
-    color: #64748b;
+    color: #a6adc8;
     font-family: 'JetBrains Mono', monospace;
-    padding: 0.3rem 0;
-    border-bottom: 1px solid #0f0f1a;
+    padding: 0.35rem 0;
+    border-bottom: 1px solid #313244;
 }
 .dot {
     width: 8px; height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
 }
-.dot-ok    { background: #4ade80; }
-.dot-fail  { background: #f87171; box-shadow: 0 0 6px #f87171; }
-.dot-final { background: #818cf8; }
+.dot-ok    { background: #a6e3a1; }
+.dot-fail  { background: #f38ba8; box-shadow: 0 0 6px #f38ba8; }
+.dot-final { background: #cba6f7; }
 
 .trace-summary { margin-top: 1rem; }
-.trace-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
-.trace-bar-bg { background: #1e1e2e; border-radius: 4px; height: 6px; overflow: hidden; }
+.trace-label { font-size: 0.7rem; color: #a6adc8; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
+.trace-bar-bg { background: #313244; border-radius: 4px; height: 6px; overflow: hidden; }
 .trace-bar { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
-.trace-pct { font-size: 0.75rem; color: #94a3b8; margin-top: 0.3rem; font-family: 'JetBrains Mono', monospace; }
+.trace-pct { font-size: 0.75rem; color: #a6adc8; margin-top: 0.3rem; font-family: 'JetBrains Mono', monospace; }
 
 /* Panel labels */
 .panel-label {
     font-size: 0.7rem;
     font-weight: 600;
-    color: #475569;
+    color: #a6adc8;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 0.75rem;
     padding-bottom: 0.5rem;
-    border-bottom: 1px solid #1e1e2e;
+    border-bottom: 1px solid #313244;
 }
 
 /* Messages */
 .msg { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; }
-.msg.warn  { background: #1c1700; color: #fbbf24; border: 1px solid #292400; }
-.msg.error { background: #150a0a; color: #f87171; border: 1px solid #450a0a; }
-.msg.empty { color: #334155; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
+.msg.warn  { background: #2a2010; color: #f9e2af; border: 1px solid #f9e2af; }
+.msg.error { background: #2a1520; color: #f38ba8; border: 1px solid #f38ba8; }
+.msg.empty { color: #6c7086; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
 
 /* Output panels */
 .output-panel {
-    background: #0a0a0f;
-    border: 1px solid #1e1e2e;
+    background: #181825;
+    border: 1px solid #313244;
     border-radius: 10px;
     padding: 1rem;
     min-height: 200px;