Lay out plan as strategy left and stacked position cards right.

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

frontend/src/styles/app.css

@@ -232,38 +232,68 @@ input {
   min-width: 0;
 }
 
-/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */
-.plan-metrics {
+/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
+.plan-board {
   display: grid;
-  grid-template-columns: 1fr;
-  column-gap: 28px;
-  row-gap: 0;
-  justify-content: start;
+  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
+  gap: 12px;
+  align-items: stretch;
+  margin-bottom: 12px;
+}
+
+.plan-panel-title {
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.plan-strategy {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.plan-metrics {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
 
 .plan-metrics .kv {
   min-width: 0;
 }
 
-.plan-metrics .kv-span {
-  grid-column: 1 / -1;
+.plan-positions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  height: 100%;
 }
 
-@media (min-width: 720px) {
-  .plan-metrics {
-    grid-template-columns: repeat(2, minmax(240px, 360px));
+.plan-positions .pos-card,
+.plan-positions .pos-empty {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.plan-positions .pos-grid {
+  margin-top: auto;
+}
+
+@media (max-width: 960px) {
+  .plan-board {
+    grid-template-columns: 1fr;
   }
-}
 
-@media (min-width: 1200px) {
-  .plan-metrics {
-    grid-template-columns: repeat(3, minmax(240px, 340px));
-  }
-}
-
-@media (min-width: 1600px) {
-  .plan-metrics {
-    grid-template-columns: repeat(4, minmax(220px, 300px));
+  .plan-positions .pos-card,
+  .plan-positions .pos-empty {
+    flex: 0 0 auto;
   }
 }