Improve hub and instance navigation contrast for light and dark themes.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/instance_theme.css

@@ -1,4 +1,21 @@
 /* 实例页手机端:与中控一致,桌面专属区块隐藏;下载仅电脑端 */
+:root,
+html[data-theme="dark"] {
+  --inst-label: #8892b0;
+  --inst-muted: #9aa3bf;
+  --inst-text: #e8ecff;
+  --inst-nav-idle: #8fc8ff;
+  --inst-nav-active-fg: #dbe4ff;
+}
+
+html[data-theme="light"] {
+  --inst-label: #4a6078;
+  --inst-muted: #5a6f85;
+  --inst-text: #142232;
+  --inst-nav-idle: #006e9a;
+  --inst-nav-active-fg: #004d6e;
+}
+
 @media (max-width: 720px) {
   .instance-desktop-only {
     display: none !important;
@@ -362,13 +379,23 @@ html[data-theme="light"] .exchange-tag {
 
 html[data-theme="light"] .top-nav a {
   background: #fff !important;
-  color: #006e9a !important;
+  color: var(--inst-nav-idle) !important;
   border-color: rgba(0, 95, 140, 0.22) !important;
 }
 
-html[data-theme="light"] .top-nav a.active {
+html[data-theme="light"] .top-nav a:hover,
+html[data-theme="light"] .embed-top-nav a:hover,
+html[data-theme="light"] .strategy-subnav a:hover {
+  background: rgba(0, 110, 154, 0.1) !important;
+  color: var(--inst-nav-active-fg) !important;
+}
+
+html[data-theme="light"] .top-nav a.active,
+html[data-theme="light"] .embed-top-nav a.active {
   background: rgba(0, 110, 154, 0.12) !important;
-  color: #142232 !important;
+  color: var(--inst-nav-active-fg) !important;
+  border: 1px solid rgba(0, 95, 140, 0.28) !important;
+  font-weight: 600;
 }
 
 html[data-theme="light"] .stat-item,
@@ -581,7 +608,7 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: #9aa;
+  color: var(--inst-label);
   margin: 0;
 }
 
@@ -590,13 +617,13 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
 }
 
 .list-window-label {
-  color: #cfd3ef;
+  color: var(--inst-text);
   font-size: 0.82rem;
   white-space: nowrap;
 }
 
 .list-window-hint {
-  color: #8892b0;
+  color: var(--inst-muted);
   font-size: 0.72rem;
   white-space: nowrap;
 }
@@ -650,7 +677,7 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
 
 .stat-strip-item .label {
   font-size: 0.72rem;
-  color: #8892b0;
+  color: var(--inst-label);
   margin-bottom: 6px;
   white-space: nowrap;
 }
@@ -658,7 +685,7 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
 .stat-strip-item .value {
   font-size: 0.88rem;
   font-weight: 600;
-  color: #e8ecff;
+  color: var(--inst-text);
   line-height: 1.3;
   white-space: nowrap;
 }
@@ -726,7 +753,16 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
 }
 
 html[data-theme="light"] .stat-strip-item .value {
-  color: #142232;
+  color: var(--inst-text);
+}
+
+html[data-theme="light"] .stat-strip-item .label,
+html[data-theme="light"] .instance-header-toolbar-filter label {
+  color: var(--inst-label) !important;
+}
+
+html[data-theme="light"] .list-window-hint {
+  color: var(--inst-muted) !important;
 }
 
 html[data-theme="light"] .instance-header-stats {
@@ -1067,6 +1103,19 @@ html[data-theme="light"] .strategy-subnav {
   border-bottom-color: #d0dae4 !important;
 }
 
+html[data-theme="light"] .strategy-subnav a {
+  background: #fff !important;
+  color: var(--inst-nav-idle) !important;
+  border-color: rgba(0, 95, 140, 0.22) !important;
+}
+
+html[data-theme="light"] .strategy-subnav a.active {
+  background: rgba(0, 110, 154, 0.12) !important;
+  color: var(--inst-nav-active-fg) !important;
+  border: 1px solid rgba(0, 95, 140, 0.28) !important;
+  font-weight: 600;
+}
+
 /* ── 策略交易 / 策略记录(strategy_templates 内联)── */
 html[data-theme="dark"] .strategy-records-page .sr-summary,
 html[data-theme="dark"] .strategy-records-page .sr-detail {

lib/common/static/instance_theme_early.css

@@ -24,16 +24,27 @@ html[data-theme="light"] .header h1 {
 }
 
 html[data-theme="light"] .top-nav a,
+html[data-theme="light"] .embed-top-nav a,
 html[data-theme="light"] .strategy-subnav a {
   background: #fff !important;
   color: #006e9a !important;
   border-color: rgba(0, 95, 140, 0.22) !important;
 }
 
+html[data-theme="light"] .top-nav a:hover,
+html[data-theme="light"] .embed-top-nav a:hover,
+html[data-theme="light"] .strategy-subnav a:hover {
+  background: rgba(0, 110, 154, 0.1) !important;
+  color: #004d6e !important;
+}
+
 html[data-theme="light"] .top-nav a.active,
+html[data-theme="light"] .embed-top-nav a.active,
 html[data-theme="light"] .strategy-subnav a.active {
   background: rgba(0, 110, 154, 0.12) !important;
-  color: #142232 !important;
+  color: #004d6e !important;
+  border: 1px solid rgba(0, 95, 140, 0.28) !important;
+  font-weight: 600;
 }
 
 html[data-theme="light"] .card,

lib/instance/templates/embed_shell.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
     <link rel="stylesheet" href="/static/instance_page.css?v=4">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=76">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=77">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">
     <title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>

lib/instance/templates/index.html

@@ -17,7 +17,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=1">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=76">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=77">
 
 </head>
 <body

manual_trading_hub/static/app.css

@@ -68,6 +68,9 @@ html[data-theme="dark"] {
   --archive-viz-mid-line: rgba(255, 255, 255, 0.2);
   --archive-profit: #4cd97f;
   --archive-loss: #ff6b6b;
+  --nav-link-idle: var(--muted);
+  --nav-link-hover-bg: var(--panel-hover);
+  --nav-link-active-fg: var(--accent);
   color-scheme: dark;
 }
 
@@ -135,6 +138,9 @@ html[data-theme="light"] {
   --archive-viz-mid-line: rgba(20, 34, 50, 0.22);
   --archive-profit: var(--green);
   --archive-loss: var(--red);
+  --nav-link-idle: #3a5068;
+  --nav-link-hover-bg: rgba(0, 110, 154, 0.08);
+  --nav-link-active-fg: #004d6e;
   color-scheme: light;
 }
 
@@ -343,11 +349,12 @@ a:hover {
   padding: 8px 16px;
   border-radius: 7px;
   text-decoration: none;
-  color: var(--muted);
+  color: var(--nav-link-idle);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+  border: 1px solid transparent;
 }
 
 .top-nav a.nav-hidden {
@@ -356,15 +363,16 @@ a:hover {
 
 .top-nav a:hover {
   color: var(--text);
-  background: var(--panel-hover);
+  background: var(--nav-link-hover-bg);
   text-decoration: none;
 }
 
 .top-nav a.active {
   background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 97, 255, 0.15));
-  color: var(--accent);
+  color: var(--nav-link-active-fg);
-  border: 1px solid var(--border);
+  border-color: var(--border);
   box-shadow: var(--glow);
+  font-weight: 600;
 }
 
 button.ghost {
@@ -5122,11 +5130,47 @@ html[data-theme="light"] .side-short {
   text-shadow: none;
 }
 
+html[data-theme="light"] .top-nav {
+  background: rgba(255, 255, 255, 0.96);
+  border-color: rgba(0, 75, 115, 0.18);
+  box-shadow: 0 1px 4px rgba(30, 60, 100, 0.08);
+}
+
 html[data-theme="light"] .top-nav a.active {
   background: linear-gradient(135deg, rgba(0, 110, 154, 0.14), rgba(91, 79, 199, 0.08));
+  color: var(--nav-link-active-fg);
+  border-color: rgba(0, 95, 140, 0.28);
   box-shadow: none;
 }
 
+html[data-theme="light"] .theme-toggle {
+  background: rgba(255, 255, 255, 0.96);
+  border-color: rgba(0, 75, 115, 0.18);
+}
+
+html[data-theme="light"] .theme-toggle-btn.is-active {
+  color: var(--nav-link-active-fg);
+  background: rgba(0, 110, 154, 0.12);
+}
+
+html[data-theme="light"] .header-right #btn-logout {
+  color: var(--nav-link-idle);
+  border-color: rgba(0, 75, 115, 0.18);
+}
+
+html[data-theme="light"] .instance-frame-toolbar {
+  background: #fff;
+}
+
+html[data-theme="light"] .instance-frame-toolbar .ghost {
+  color: var(--nav-link-idle);
+  border-color: rgba(0, 75, 115, 0.18);
+}
+
+html[data-theme="light"] .instance-frame-title {
+  color: var(--text);
+}
+
 html[data-theme="light"] .mkt-exchange-tag {
   background: rgba(10, 143, 92, 0.1);
   border-color: rgba(10, 143, 92, 0.32);

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=20260708-hub-ai-env" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260710-nav-theme" />
   <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=3" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
   <script src="/assets/account_risk_badge.js?v=4"></script>