style(risk): polish account status badge for light and dark themes

Extract shared account_risk_badge.css with theme-aware contrast, dot indicator, and hub/instance layout fixes.

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

manual_trading_hub/hub.py

@@ -518,6 +518,18 @@ app = FastAPI(title="复盘系统中控", docs_url=None, redoc_url=None, lifespa
 STATIC_DIR = DIR / "static"
 _REPO_STATIC = _REPO_ROOT / "static"
 _AI_REVIEW_RENDER_JS = _REPO_STATIC / "ai_review_render.js"
+_ACCOUNT_RISK_BADGE_CSS = _REPO_STATIC / "account_risk_badge.css"
+
+
+@app.get("/assets/account_risk_badge.css")
+def hub_account_risk_badge_css():
+    """与四所实例共用仓库根 static/account_risk_badge.css。"""
+    if not _ACCOUNT_RISK_BADGE_CSS.is_file():
+        raise HTTPException(status_code=404, detail="account_risk_badge.css not found")
+    return FileResponse(
+        str(_ACCOUNT_RISK_BADGE_CSS),
+        media_type="text/css; charset=utf-8",
+    )
 
 
 @app.get("/assets/ai_review_render.js")

manual_trading_hub/static/app.css

@@ -596,35 +596,6 @@ button:disabled {
   flex-wrap: wrap;
 }
 
-.risk-status-badge {
-  font-size: 0.72rem;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-.risk-status-normal {
-  color: #b8f5d0;
-  background: #14241e;
-  border-color: #2d6a4f;
-}
-.risk-status-freeze_1h {
-  color: #ffd89a;
-  background: #2a2210;
-  border-color: #8a6a20;
-}
-.risk-status-freeze_4h {
-  color: #ffb4a0;
-  background: #2a1410;
-  border-color: #8a4020;
-}
-.risk-status-freeze_daily {
-  color: #ffb0c8;
-  background: #2a1020;
-  border-color: #8a3050;
-}
-
 .status-dot {
   width: 8px;
   height: 8px;
@@ -962,6 +933,7 @@ html[data-theme="light"] .host-metric-bar {
   align-items: center;
   gap: 8px;
   min-width: 0;
+  flex-wrap: wrap;
 }
 
 .hub-tile-name {
@@ -1024,6 +996,10 @@ html[data-theme="light"] .host-metric-bar {
   font-weight: 600;
   letter-spacing: 0.05em;
   margin: 0 0 4px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .card-sub {

manual_trading_hub/static/app.js

@@ -513,7 +513,7 @@
     const st = riskStatus.status || "normal";
     const label = esc(riskStatus.status_label || "正常");
     const title = esc(riskStatus.reason || "");
-    return `<span class="risk-status-badge risk-status-${esc(st)}" title="${title}">${label}</span>`;
+    return `<span class="risk-status-badge risk-status-${esc(st)}" role="status" title="${title}">${label}</span>`;
   }
 
   function fmt(n, d) {
@@ -3248,7 +3248,8 @@
       <div class="hub-tile-body card-expand-zone" title="点击进入全屏详情">
         <div class="hub-tile-top">
           <span class="status-dot ${dotCls}" aria-hidden="true"></span>
-          <span class="hub-tile-name">${esc(row.name)}${formatRiskStatusBadge(hm.risk_status)}</span>
+          <span class="hub-tile-name">${esc(row.name)}</span>
+          ${formatRiskStatusBadge(hm.risk_status)}
         </div>
         ${
           showAccountPnlPref()
@@ -3301,7 +3302,7 @@
         <div>
           <div class="card-title-row">
             <span class="status-dot ${dotCls}" title="${online ? "在线" : "离线"}"></span>
-            <div class="card-title">${esc(row.name)}${formatRiskStatusBadge(hm.risk_status)}</div>
+            <div class="card-title"><span>${esc(row.name)}</span>${formatRiskStatusBadge(hm.risk_status)}</div>
           </div>
           <div class="card-sub">${esc(flaskOpen || "")}</div>
         </div>

manual_trading_hub/static/index.html

@@ -16,6 +16,7 @@
   <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=20260613-host-status-tone" />
+  <link rel="stylesheet" href="/assets/account_risk_badge.css?v=1" />
   <link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
 </head>
 <body>