fix: 优化界面

app/static/style.css

@@ -1,11 +1,12 @@
 :root {
-  --bg: #f3f7f5;
+  --bg: #ecfeff;
   --panel: #ffffff;
-  --line: #d7e3dd;
-  --text: #1a3128;
-  --muted: #5e7a6f;
-  --accent: #18794e;
-  --accent-2: #0f5f3d;
+  --line: #d9eef2;
+  --text: #164e63;
+  --muted: #457386;
+  --accent: #0891b2;
+  --accent-2: #0e7490;
+  --accent-soft: #f0fdff;
 }
 
 * {
@@ -14,17 +15,18 @@
 
 body {
   margin: 0;
-  background: radial-gradient(circle at 10% 20%, #e6f4ec, transparent 35%),
-    radial-gradient(circle at 90% 80%, #dff0ff, transparent 30%),
-    var(--bg);
+  background: var(--bg);
   color: var(--text);
-  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  font-family: Inter, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .topbar {
-  max-width: 1280px;
-  margin: 20px auto 0;
-  padding: 0 16px;
+  max-width: 1240px;
+  height: 72px;
+  margin: 0 auto;
+  padding: 0 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -32,42 +34,43 @@ body {
 
 .brand h1 {
   margin: 0;
+  font-size: 32px;
+  letter-spacing: -0.02em;
 }
 
 .brand .muted {
   margin: 6px 0 0;
 }
 
-.backend-config {
-  margin: 8px 0 0;
-  line-height: 1.5;
-}
-
 .badge {
   font-size: 12px;
   font-weight: 700;
-  color: #0f5f3d;
-  background: #eaf7f0;
-  border: 1px solid #cde6d7;
+  color: #fafafa;
+  background: var(--accent-2);
+  border: 1px solid var(--accent-2);
   padding: 5px 10px;
   border-radius: 999px;
 }
 
 .layout {
-  max-width: 1280px;
-  margin: 14px auto 24px;
-  padding: 0 16px;
+  max-width: 1240px;
+  height: calc(100vh - 72px);
+  margin: 0 auto;
+  padding: 0 20px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  grid-template-columns: minmax(320px, 42%) 1fr;
+  gap: 12px;
+  overflow: hidden;
 }
 
 .panel {
   background: var(--panel);
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 18px;
-  box-shadow: 0 8px 24px rgba(32, 84, 55, 0.07);
+  border-radius: 12px;
+  padding: 14px;
+  box-shadow: 0 6px 24px rgba(8, 145, 178, 0.08);
+  min-height: 0;
+  overflow: hidden;
 }
 
 h1,
@@ -75,16 +78,25 @@ h2 {
   margin-top: 0;
 }
 
+.panel-head {
+  margin-bottom: 10px;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
 .muted {
   color: var(--muted);
-  margin-top: -6px;
+  margin-top: 2px;
 }
 
 label {
   display: block;
-  margin-top: 10px;
-  margin-bottom: 6px;
-  font-size: 14px;
+  margin-top: 8px;
+  margin-bottom: 4px;
+  font-size: 13px;
   font-weight: 600;
 }
 
@@ -105,8 +117,8 @@ button {
   width: 100%;
   border-radius: 10px;
   border: 1px solid var(--line);
-  padding: 10px 12px;
-  font-size: 14px;
+  padding: 8px 10px;
+  font-size: 13px;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
 
@@ -118,13 +130,13 @@ textarea {
 input:focus,
 textarea:focus {
   outline: none;
-  border-color: #8ec6aa;
-  box-shadow: 0 0 0 3px rgba(24, 121, 78, 0.12);
+  border-color: #7dd3e7;
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
 }
 
 button {
   cursor: pointer;
-  margin-top: 12px;
+  margin-top: 8px;
   font-weight: 700;
 }
 
@@ -142,6 +154,22 @@ button.primary:hover {
   background: var(--accent-2);
 }
 
+button.secondary {
+  background: #fff;
+  color: var(--text);
+  border-color: var(--line);
+}
+
+button.secondary:hover {
+  background: #f8fdff;
+}
+
+.subtle-btn {
+  background: #fff;
+  border-color: #a5dae6;
+  color: var(--accent-2);
+}
+
 button:disabled {
   cursor: not-allowed;
   opacity: 0.65;
@@ -173,67 +201,29 @@ button:disabled {
 }
 
 .status {
-  min-height: 22px;
-  margin-top: 8px;
+  min-height: 18px;
+  margin-top: 6px;
   color: var(--accent-2);
-  font-weight: 600;
+  font-weight: 500;
+  font-size: 12px;
 }
 
 .small {
-  font-size: 13px;
-  margin: 0 0 12px;
-}
-
-.flow-hint {
-  margin: 0 0 14px 18px;
-  padding: 0;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.trace-wrap {
-  margin-top: 12px;
-  padding: 10px 12px;
-  border: 1px dashed var(--line);
-  border-radius: 10px;
-  background: #f9fbf9;
-}
-
-.trace-wrap summary {
-  cursor: pointer;
-  font-weight: 700;
-  color: var(--text);
-}
-
-.trace-badge {
-  margin-left: 8px;
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-weight: 700;
-}
-
-.trace-badge.is-ai {
-  background: #eaf7f0;
-  color: #0f5f3d;
-  border: 1px solid #cde6d7;
-}
-
-.trace-badge.is-fallback {
-  background: #fff4e6;
-  color: #9a3412;
-  border: 1px solid #fed7aa;
+  font-size: 12px;
+  margin: 0 0 6px;
 }
 
 .body-split {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  grid-template-columns: 1fr 0.9fr;
+  gap: 10px;
   align-items: stretch;
+  min-height: 0;
 }
 
 .body-split textarea {
-  min-height: 280px;
+  min-height: 170px;
+  max-height: 240px;
 }
 
 .preview-panel {
@@ -244,10 +234,10 @@ button:disabled {
 
 .markdown-preview {
   flex: 1;
-  min-height: 280px;
-  max-height: 480px;
+  min-height: 170px;
+  max-height: 240px;
   overflow: auto;
-  padding: 12px 14px;
+  padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: #fafcfb;
@@ -258,7 +248,7 @@ button:disabled {
 .markdown-preview h2 {
   font-size: 1.15rem;
   margin: 1em 0 0.5em;
-  color: var(--accent-2);
+  color: #111827;
 }
 
 .markdown-preview h3 {
@@ -280,23 +270,14 @@ button:disabled {
   margin: 0.25em 0;
 }
 
-.trace-json {
-  margin: 10px 0 0;
-  padding: 10px;
-  max-height: 220px;
-  overflow: auto;
-  font-size: 11px;
-  line-height: 1.45;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid var(--line);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
 @media (max-width: 960px) {
+  body {
+    overflow: auto;
+  }
+
   .layout {
     grid-template-columns: 1fr;
+    height: auto;
   }
 
   .body-split {