From b828026c2316a71e5b7ca911e29a4ce26193c0bc Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 7 Jun 2026 09:12:29 +0800
Subject: [PATCH] fix(hub): refine AI summary heading style for light and dark
 themes

Replace red text with white stroke by theme-aware accent bar and soft background tint.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 manual_trading_hub/static/app.css    | 86 +++++++++++-----------------
 manual_trading_hub/static/index.html |  2 +-
 2 files changed, 34 insertions(+), 54 deletions(-)

diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index b320e8f..8c3a7ee 100644
--- a/manual_trading_hub/static/app.css
+++ b/manual_trading_hub/static/app.css
@@ -48,6 +48,10 @@ html[data-theme="dark"] {
   --primary-btn-border: var(--accent);
   --status-done: #4cd97f;
   --status-pending: #9aa3c4;
+  --ai-sum-heading: #ffc8d4;
+  --ai-sum-heading-bg: rgba(255, 77, 109, 0.12);
+  --ai-sum-heading-border: rgba(255, 107, 138, 0.55);
+  --ai-sum-name: #ffe0e8;
   --font: "JetBrains Mono", ui-monospace, Consolas, monospace;
   --display: "Orbitron", var(--font);
   --mono: var(--font);
@@ -103,6 +107,10 @@ html[data-theme="light"] {
   --primary-btn-border: #005a82;
   --status-done: #087a50;
   --status-pending: #3d556d;
+  --ai-sum-heading: #9e1e38;
+  --ai-sum-heading-bg: rgba(201, 53, 82, 0.08);
+  --ai-sum-heading-border: rgba(201, 53, 82, 0.42);
+  --ai-sum-name: #7a182c;
   color-scheme: light;
 }
 
@@ -3536,56 +3544,41 @@ body.hub-page-ai #page-ai {
 }
 .ai-md-body.ai-result-md h2 {
   font-size: 1.02rem;
-  color: var(--red);
+  color: var(--ai-sum-heading);
+  font-weight: 700;
   margin: 14px 0 8px;
-  padding-bottom: 4px;
+  padding: 6px 0 6px 10px;
+  border-left: 3px solid var(--ai-sum-heading-border);
   border-bottom: 1px solid var(--border-soft);
-  -webkit-text-stroke: 0.45px #fff;
-  paint-order: stroke fill;
-  text-shadow:
-    0 0 1px #fff,
-    0 0 2px rgba(255, 255, 255, 0.9),
-    1px 0 0 #fff,
-    -1px 0 0 #fff,
-    0 1px 0 #fff,
-    0 -1px 0 #fff;
+  background: var(--ai-sum-heading-bg);
+  border-radius: 0 4px 4px 0;
 }
 .ai-md-body.ai-result-md h2:first-child {
   margin-top: 0;
 }
 .ai-md-body.ai-result-md h3 {
   font-size: 0.92rem;
-  color: var(--red);
+  color: var(--ai-sum-heading);
+  font-weight: 700;
   margin: 16px 0 8px;
-  padding-bottom: 4px;
+  padding: 5px 0 5px 10px;
+  border-left: 3px solid var(--ai-sum-heading-border);
   border-bottom: 1px solid var(--border-soft);
-  font-weight: 600;
-  -webkit-text-stroke: 0.45px #fff;
-  paint-order: stroke fill;
-  text-shadow:
-    0 0 1px #fff,
-    0 0 2px rgba(255, 255, 255, 0.9),
-    1px 0 0 #fff,
-    -1px 0 0 #fff,
-    0 1px 0 #fff,
-    0 -1px 0 #fff;
+  background: var(--ai-sum-heading-bg);
+  border-radius: 0 4px 4px 0;
 }
 .ai-md-body.ai-result-md h3:first-of-type {
   margin-top: 4px;
 }
 .ai-md-body.ai-result-md h4 {
   font-size: 0.92rem;
-  color: var(--red);
+  color: var(--ai-sum-heading);
+  font-weight: 700;
   margin: 10px 0 6px;
-  -webkit-text-stroke: 0.45px #fff;
-  paint-order: stroke fill;
-  text-shadow:
-    0 0 1px #fff,
-    0 0 2px rgba(255, 255, 255, 0.9),
-    1px 0 0 #fff,
-    -1px 0 0 #fff,
-    0 1px 0 #fff,
-    0 -1px 0 #fff;
+  padding: 4px 0 4px 8px;
+  border-left: 2px solid var(--ai-sum-heading-border);
+  background: var(--ai-sum-heading-bg);
+  border-radius: 0 4px 4px 0;
 }
 .ai-result-md h2 {
   font-size: 1.02rem;
@@ -3664,15 +3657,7 @@ body.hub-page-ai #page-ai {
 .ai-ac-name {
   min-width: 9rem;
   font-weight: 600;
-  color: var(--red);
-  -webkit-text-stroke: 0.35px #fff;
-  paint-order: stroke fill;
-  text-shadow:
-    0 0 1px #fff,
-    1px 0 0 #fff,
-    -1px 0 0 #fff,
-    0 1px 0 #fff,
-    0 -1px 0 #fff;
+  color: var(--ai-sum-name);
 }
 .ai-ac-remark {
   color: var(--muted);
@@ -3773,17 +3758,12 @@ body.hub-page-ai #page-ai {
 .ai-closed-trades-title {
   margin: 0 0 6px;
   font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--red);
-  -webkit-text-stroke: 0.45px #fff;
-  paint-order: stroke fill;
-  text-shadow:
-    0 0 1px #fff,
-    0 0 2px rgba(255, 255, 255, 0.9),
-    1px 0 0 #fff,
-    -1px 0 0 #fff,
-    0 1px 0 #fff,
-    0 -1px 0 #fff;
+  font-weight: 700;
+  color: var(--ai-sum-heading);
+  padding: 4px 0 4px 8px;
+  border-left: 2px solid var(--ai-sum-heading-border);
+  background: var(--ai-sum-heading-bg);
+  border-radius: 0 4px 4px 0;
 }
 .ai-msg-attachments {
   display: flex;
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index dcba08b..39832c0 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260607-hub-ai-v3" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260607-hub-ai-v4" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>