Add desktop calculator tabs.

Show one strategy calculator at a time while preserving the existing mobile tab experience.

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

manual_trading_hub/static/app.css

@@ -9359,6 +9359,64 @@ body.funds-fullscreen-open {
   }
 }
 
+/* 电脑端计算器改为单页 Tab；手机继续使用原有紧凑 Tab 样式 */
+.calc-tab-label-desktop {
+  display: none;
+}
+
+body:not(.hub-phone) #page-calculator .calc-mobile-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  max-width: 640px;
+  margin: 0 auto 14px;
+  padding: 5px;
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  background: var(--nav-bg);
+}
+
+body:not(.hub-phone) #page-calculator .calc-m-tab {
+  min-height: 42px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+body:not(.hub-phone) #page-calculator .calc-m-tab:hover {
+  color: var(--text);
+  border-color: var(--border-soft);
+}
+
+body:not(.hub-phone) #page-calculator .calc-m-tab.is-active {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
+  background: var(--accent-dim);
+  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
+body:not(.hub-phone) #page-calculator .calc-tab-label-mobile {
+  display: none;
+}
+
+body:not(.hub-phone) #page-calculator .calc-tab-label-desktop {
+  display: inline;
+}
+
+body:not(.hub-phone) #page-calculator .calc-layout {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="trend"] [data-calc-pane="roll"],
+body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-calc-pane="trend"] {
+  display: none;
+}
+
 /* --- 策略说明 --- */
 .strategy-page-head {
   display: flex;