Align plan columns and put option countdown on title row.

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

frontend/src/pages/Plan.tsx

@@ -172,6 +172,7 @@ export default function PlanPage() {
       </div>
 
       <div className="plan-board">
+        <div className="plan-col">
           <div className="card plan-strategy">
             <h3 className="plan-panel-title">策略</h3>
             <div className="plan-metrics">
@@ -250,7 +251,24 @@ export default function PlanPage() {
             </div>
           </div>
 
-        <div className="plan-positions">
+          <div className="card">
+            <h3 className="plan-panel-title">永续行情</h3>
+            <div className="kv">
+              <span>买一</span>
+              <span className="mono">{fmt(snap?.perp?.bid)}</span>
+            </div>
+            <div className="kv">
+              <span>卖一</span>
+              <span className="mono">{fmt(snap?.perp?.ask)}</span>
+            </div>
+            <div className="kv">
+              <span>指数</span>
+              <span className="mono">{fmt(snap?.index_px)}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="plan-col plan-positions">
           {open ? (
             <>
               <div className="pos-card">
@@ -320,6 +338,12 @@ export default function PlanPage() {
                       {pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
                     </span>
                   </div>
+                  <div
+                    className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
+                    title="到期倒计时"
+                  >
+                    {countdown}
+                  </div>
                 </div>
                 <div className="pos-meta">
                   <span className="pos-meta-item">期权持仓</span>
@@ -330,14 +354,6 @@ export default function PlanPage() {
                   </span>
                 </div>
                 <div className="pos-grid">
-                  <div className="pos-cell pos-cell-wide">
-                    <span className="pos-label">到期倒计时</span>
-                    <span
-                      className={`pos-value mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
-                    >
-                      {countdown}
-                    </span>
-                  </div>
                   <div className="pos-cell">
                     <span className="pos-label">开仓均价</span>
                     <span className="pos-value mono">{fmt(pos?.option_entry_px)}</span>
@@ -365,27 +381,9 @@ export default function PlanPage() {
               <div className="pos-empty">期权持仓 · 暂无</div>
             </>
           )}
-        </div>
-      </div>
 
-      <div className="grid-2">
           <div className="card">
-          <h3 style={{ marginTop: 0 }}>永续</h3>
+            <h3 className="plan-panel-title">
-          <div className="kv">
-            <span>买一</span>
-            <span className="mono">{fmt(snap?.perp?.bid)}</span>
-          </div>
-          <div className="kv">
-            <span>卖一</span>
-            <span className="mono">{fmt(snap?.perp?.ask)}</span>
-          </div>
-          <div className="kv">
-            <span>指数</span>
-            <span className="mono">{fmt(snap?.index_px)}</span>
-          </div>
-        </div>
-        <div className="card">
-          <h3 style={{ marginTop: 0 }}>
               期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""}
             </h3>
             <div className="kv">
@@ -407,5 +405,6 @@ export default function PlanPage() {
           </div>
         </div>
       </div>
+    </div>
   );
 }

frontend/src/styles/app.css

@@ -232,15 +232,22 @@ input {
   min-width: 0;
 }
 
-/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
+/* 计划页：左右两列对齐（策略+行情 | 持仓+ATM） */
 .plan-board {
   display: grid;
-  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
+  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
   gap: 12px;
-  align-items: stretch;
+  align-items: start;
   margin-bottom: 12px;
 }
 
+.plan-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
 .plan-panel-title {
   margin: 0 0 10px;
   font-size: 14px;
@@ -251,14 +258,12 @@ input {
 .plan-strategy {
   display: flex;
   flex-direction: column;
-  height: 100%;
   min-height: 0;
 }
 
 .plan-metrics {
   display: flex;
   flex-direction: column;
-  flex: 1;
   min-height: 0;
 }
 
@@ -266,24 +271,20 @@ input {
   min-width: 0;
 }
 
-.plan-positions {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 0;
-  height: 100%;
-}
-
 .plan-positions .pos-card,
 .plan-positions .pos-empty {
-  flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.plan-positions .pos-grid {
+.pos-countdown {
-  margin-top: auto;
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #e8ecf4;
+  white-space: nowrap;
+  margin-left: auto;
 }
 
 @media (max-width: 960px) {
@@ -291,9 +292,9 @@ input {
     grid-template-columns: 1fr;
   }
 
-  .plan-positions .pos-card,
+  .pos-countdown {
-  .plan-positions .pos-empty {
+    margin-left: 0;
-    flex: 0 0 auto;
+    width: 100%;
   }
 }