Add blog-style TOC to strategy doc; checklist as separate tab.

Strategy page uses 策略正文 (MD + sticky h2/h3 TOC) and 执行清单 tabs so full playbook detail stays readable with jump navigation.

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

manual_trading_hub/static/app.css

@@ -9659,6 +9659,26 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
   flex-wrap: wrap;
   margin-bottom: 12px;
 }
+.strategy-view-tabs {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.strategy-view-tab {
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface-2);
+  color: var(--text-soft);
+  cursor: pointer;
+  font-size: 0.88rem;
+}
+.strategy-view-tab.is-active {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--text);
+  font-weight: 600;
+}
 .strategy-tabs {
   display: flex;
   gap: 8px;
@@ -9678,6 +9698,86 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
   border-color: var(--accent);
   color: var(--text);
 }
+.strategy-doc-panel {
+  padding: 18px 20px 20px;
+  min-width: 0;
+}
+.strategy-blog-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
+  gap: 18px;
+  align-items: start;
+}
+.strategy-blog-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.strategy-toc-card {
+  padding: 14px 12px 16px;
+  position: sticky;
+  top: 72px;
+  max-height: calc(100vh - 96px);
+  overflow: auto;
+}
+.strategy-toc-title {
+  margin: 0 0 12px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--text-soft);
+  text-transform: uppercase;
+}
+.strategy-toc-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-left: 2px solid var(--border-soft);
+  padding-left: 2px;
+}
+.strategy-toc-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 0 8px 8px 0;
+  background: transparent;
+  color: var(--text-soft);
+  font-size: 0.84rem;
+  line-height: 1.35;
+  cursor: pointer;
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  margin-left: -2px;
+}
+.strategy-toc-item.level-3 {
+  padding-left: 18px;
+  font-size: 0.8rem;
+}
+.strategy-toc-item:hover {
+  background: var(--surface-2, rgba(255, 255, 255, 0.04));
+  color: var(--text);
+}
+.strategy-toc-item.is-active {
+  background: var(--accent-soft, rgba(0, 212, 255, 0.12));
+  color: var(--accent);
+  font-weight: 600;
+  border-left-color: var(--accent);
+}
+.strategy-toc-num {
+  flex: 0 0 auto;
+  min-width: 1.6em;
+  opacity: 0.85;
+  font-variant-numeric: tabular-nums;
+}
+.strategy-toc-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  word-break: break-word;
+}
 .strategy-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
@@ -9717,7 +9817,7 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
 .strategy-doc-body {
   flex: 1 1 auto;
   min-height: 0;
-  max-height: 100%;
+  max-height: min(70vh, 820px);
   font-size: 0.88rem;
   line-height: 1.55;
   color: var(--text);
@@ -9727,16 +9827,18 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
   scrollbar-gutter: stable;
 }
 .strategy-doc-body h2 {
-  font-size: 1rem;
-  margin: 0.6em 0 0.5em;
+  font-size: 1.05rem;
+  margin: 1.1em 0 0.55em;
   color: var(--text);
+  scroll-margin-top: 12px;
 }
 .strategy-doc-body h2:first-child {
   margin-top: 0;
 }
 .strategy-doc-body h3 {
-  font-size: 0.92rem;
+  font-size: 0.94rem;
   margin: 1em 0 0.4em;
+  scroll-margin-top: 12px;
 }
 .strategy-doc-body table {
   width: 100%;
@@ -9818,12 +9920,20 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
   .strategy-layout {
     grid-template-columns: 1fr;
   }
+  .strategy-blog-layout {
+    grid-template-columns: 1fr;
+  }
+  .strategy-toc-card {
+    position: static;
+    max-height: none;
+    order: -1;
+  }
   .strategy-doc-card,
   .strategy-checklist-card {
     align-self: stretch;
   }
   .strategy-doc-body {
-    max-height: min(50vh, 520px);
+    max-height: min(60vh, 640px);
   }
 }