Add open-instance to trade page and mobile/tablet responsive layouts.

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

manual_trading_hub/static/app.css

@@ -1288,6 +1288,23 @@ body.market-chart-fs-open {
   justify-content: flex-end;
 }
 
+.fs-head-actions .btn-open-trade {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  font-weight: 600;
+}
+
+.fs-head-actions .btn-open-trade:hover {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.card-actions .btn-open-trade {
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+
 .card-expand-hint {
   margin-top: 12px;
   padding: 8px 10px;
@@ -1393,6 +1410,45 @@ body.market-chart-fs-open {
   }
 }
 
+/* 平板横屏：持仓与区块双列 */
+@media (min-width: 641px) and (max-width: 1200px) and (orientation: landscape) {
+  .exchange-fullscreen .hub-pos-list.count-2,
+  .exchange-fullscreen .hub-pos-list.count-3,
+  .exchange-fullscreen .hub-pos-list.count-4,
+  .exchange-fullscreen .hub-pos-list.count-many {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .exchange-fullscreen .hub-section-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .hub-fs-sections-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    align-items: start;
+  }
+}
+
+/* 手机竖屏：全屏顶栏与持仓单列 */
+@media (max-width: 720px), (max-width: 900px) and (orientation: portrait) {
+  .exchange-fullscreen .hub-pos-list {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}
+
+.hub-fs-sections-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+@media (max-width: 720px), (max-width: 900px) and (orientation: portrait) {
+  .hub-fs-sections-grid {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 /* 对齐实盘「实时持仓」pos-card */
 .hub-pos-card.pos-card {
   background: var(--pos-card-bg);
@@ -3073,6 +3129,27 @@ body.login-page {
     font-size: 9px;
   }
 
+  .instance-frame-toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .instance-frame-title {
+    flex: 1 1 100%;
+    order: -1;
+    font-size: 0.82rem;
+  }
+
+  .instance-frame-actions {
+    flex: 1 1 auto;
+    justify-content: flex-end;
+  }
+
+  .instance-frame {
+    height: calc(100dvh - 96px);
+  }
+
   .exchange-fullscreen {
     padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
       max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
@@ -3099,6 +3176,10 @@ body.login-page {
     grid-column: 1 / -1;
   }
 
+  .fs-head-actions .btn-open-trade {
+    grid-column: 1 / -1;
+  }
+
   .fs-head-actions .btn-link,
   .fs-head-actions button {
     min-height: 44px;