Pack plan summary into multi-column layout for ultrawide screens.

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

frontend/src/styles/app.css

@@ -210,6 +210,7 @@ input {
 .kv {
   display: flex;
   justify-content: space-between;
+  align-items: baseline;
   gap: 12px;
   padding: 8px 0;
   border-bottom: 1px solid var(--line);
@@ -220,8 +221,50 @@ input {
   border-bottom: 0;
 }
 
-.kv span:first-child {
+.kv > span:first-child {
   color: var(--muted);
+  flex: 0 0 auto;
+  min-width: 5.5em;
+}
+
+.kv > span:last-child {
+  text-align: right;
+  min-width: 0;
+}
+
+/* 计划摘要：宽屏多列紧凑排布，避免标签与数值被拉成整行空洞 */
+.plan-metrics {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 28px;
+  row-gap: 0;
+  justify-content: start;
+}
+
+.plan-metrics .kv {
+  min-width: 0;
+}
+
+.plan-metrics .kv-span {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 720px) {
+  .plan-metrics {
+    grid-template-columns: repeat(2, minmax(240px, 360px));
+  }
+}
+
+@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));
+  }
 }
 
 .login-wrap {