feat(hub): mobile 2x2 exchange alert dashboard tiles

Phone monitor list shows per-exchange tiles with offline, >10% float loss, and missing SL alerts; tap opens full desktop-style detail view.

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

manual_trading_hub/static/app.css

@@ -471,6 +471,129 @@ button:disabled {
   box-shadow: 0 0 8px var(--red);
 }
 
+.status-dot.warn {
+  background: #ffb020;
+  box-shadow: 0 0 8px rgba(255, 176, 32, 0.45);
+}
+
+/* —— 手机监控总览瓦片 —— */
+.monitor-alert-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px 10px;
+  margin: 0 0 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-soft);
+  background: var(--panel);
+  font-size: 12px;
+}
+
+.monitor-alert-summary.hidden {
+  display: none !important;
+}
+
+.mas-item.mas-ok {
+  color: var(--green);
+}
+
+.mas-item.mas-warn {
+  color: #ffb020;
+}
+
+.mas-item.mas-err {
+  color: var(--red);
+}
+
+.mas-sep {
+  color: var(--muted);
+}
+
+.grid-monitor.grid-monitor-tiles {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  gap: 10px;
+  align-content: start;
+}
+
+.hub-tile {
+  margin: 0;
+  padding: 0;
+  min-height: 118px;
+  overflow: hidden;
+}
+
+.hub-tile .hub-tile-body {
+  cursor: pointer;
+  padding: 12px 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 118px;
+}
+
+.hub-tile-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.hub-tile-name {
+  font-family: var(--display);
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hub-tile-pnl {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.hub-tile-pnl small {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.hub-tile-meta {
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hub-tile-foot {
+  margin-top: auto;
+  font-size: 10px;
+  color: var(--muted);
+}
+
+.hub-tile-error {
+  border-color: rgba(255, 77, 109, 0.45);
+  box-shadow: 0 0 0 1px rgba(255, 77, 109, 0.12);
+}
+
+.hub-tile-warn {
+  border-color: rgba(255, 176, 32, 0.45);
+  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.1);
+}
+
+.hub-tile-ok {
+  border-color: var(--border-soft);
+}
+
+.hub-tile-body:hover .hub-tile-name {
+  color: var(--accent);
+}
+
 .card-title {
   font-family: var(--display);
   font-size: 13px;
@@ -1784,12 +1907,34 @@ body.login-page {
     min-height: 44px;
   }
 
-  .grid-monitor,
+  .grid-monitor:not(.grid-monitor-tiles),
   .settings-grid-wrap {
     grid-template-columns: minmax(0, 1fr) !important;
     gap: 12px;
   }
 
+  .grid-monitor.grid-monitor-tiles {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 10px;
+  }
+
+  #page-monitor .hint-box,
+  #page-monitor .page-desc {
+    display: none;
+  }
+
+  #page-monitor .page-head {
+    margin-bottom: 8px;
+  }
+
+  #page-monitor .page-head h1 {
+    margin-bottom: 0;
+  }
+
+  .monitor-alert-summary {
+    margin-bottom: 8px;
+  }
+
   .card-head {
     flex-direction: column;
     align-items: stretch;