diff --git a/crypto_monitor_binance/templates/index.html b/crypto_monitor_binance/templates/index.html
index 16a5381..29b02ca 100644
--- a/crypto_monitor_binance/templates/index.html
+++ b/crypto_monitor_binance/templates/index.html
@@ -834,6 +834,7 @@
 <script src="/static/ai_review_render.js?v=2"></script>
 <script src="/static/form_submit_guard.js?v=2"></script>
 <script src="/static/manual_order_rr_preview.js?v=4"></script>
+<script src="/static/strategy_roll.js?v=2"></script>
 <script>
 const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
 const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
diff --git a/crypto_monitor_gate/templates/index.html b/crypto_monitor_gate/templates/index.html
index 19bf159..cdb2424 100644
--- a/crypto_monitor_gate/templates/index.html
+++ b/crypto_monitor_gate/templates/index.html
@@ -801,6 +801,7 @@
 <script src="/static/ai_review_render.js?v=2"></script>
 <script src="/static/form_submit_guard.js?v=2"></script>
 <script src="/static/manual_order_rr_preview.js?v=4"></script>
+<script src="/static/strategy_roll.js?v=2"></script>
 <script>
 const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
 const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
diff --git a/crypto_monitor_gate_bot/templates/index.html b/crypto_monitor_gate_bot/templates/index.html
index 19bf159..cdb2424 100644
--- a/crypto_monitor_gate_bot/templates/index.html
+++ b/crypto_monitor_gate_bot/templates/index.html
@@ -801,6 +801,7 @@
 <script src="/static/ai_review_render.js?v=2"></script>
 <script src="/static/form_submit_guard.js?v=2"></script>
 <script src="/static/manual_order_rr_preview.js?v=4"></script>
+<script src="/static/strategy_roll.js?v=2"></script>
 <script>
 const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
 const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
diff --git a/crypto_monitor_okx/templates/index.html b/crypto_monitor_okx/templates/index.html
index aae4d57..b83eb3f 100644
--- a/crypto_monitor_okx/templates/index.html
+++ b/crypto_monitor_okx/templates/index.html
@@ -830,6 +830,7 @@
 <script src="/static/ai_review_render.js?v=2"></script>
 <script src="/static/form_submit_guard.js?v=2"></script>
 <script src="/static/manual_order_rr_preview.js?v=4"></script>
+<script src="/static/strategy_roll.js?v=2"></script>
 <script>
 const JOURNAL_ENTRY_REASON_OPTIONS = {{ entry_reason_options | tojson }};
 const JOURNAL_ENTRY_REASON_OTHER = {{ entry_reason_other_value | tojson }};
diff --git a/embed_templates/embed_shell.html b/embed_templates/embed_shell.html
index 218a073..4d4c67c 100644
--- a/embed_templates/embed_shell.html
+++ b/embed_templates/embed_shell.html
@@ -114,6 +114,7 @@
 <script src="/static/ai_review_render.js?v=2"></script>
 <script src="/static/form_submit_guard.js?v=2"></script>
 <script src="/static/manual_order_rr_preview.js?v=4"></script>
+<script src="/static/strategy_roll.js?v=2"></script>
 <script src="/static/key_monitor_form.js?v=1"></script>
 {% include 'embed_boot_scripts.html' %}
 <script src="/static/instance_embed.js?v=4"></script>
diff --git a/static/instance_theme.css b/static/instance_theme.css
index 3810061..c4dbed6 100644
--- a/static/instance_theme.css
+++ b/static/instance_theme.css
@@ -1281,3 +1281,274 @@ html[data-theme="light"] .detail-actions {
   border-top-color: #d0dae4 !important;
 }
 
+/* ── 顺势加仓：表单字段按模式显隐（CSS 兜底，不依赖 JS）── */
+#roll-form[data-add-mode="market"] .roll-field-fib,
+#roll-form[data-add-mode="market"] .roll-field-breakout {
+  display: none !important;
+}
+
+#roll-form[data-add-mode="fib_618"] .roll-field-breakout,
+#roll-form[data-add-mode="fib_786"] .roll-field-breakout {
+  display: none !important;
+}
+
+#roll-form[data-add-mode="breakout"] .roll-field-fib {
+  display: none !important;
+}
+
+#roll-form[data-add-mode="fib_618"] .roll-field-fib,
+#roll-form[data-add-mode="fib_786"] .roll-field-fib,
+#roll-form[data-add-mode="breakout"] .roll-field-breakout {
+  display: inline-flex !important;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.roll-field[hidden] {
+  display: none !important;
+}
+
+#strategy-roll-panel .roll-risk-banner {
+  margin-bottom: 8px;
+  color: #8fc8ff;
+}
+
+html[data-theme="light"] #strategy-roll-panel .roll-risk-banner {
+  color: #006e9a !important;
+}
+
+#strategy-roll-panel .roll-doc-link {
+  color: #8fc8ff;
+}
+
+html[data-theme="light"] #strategy-roll-panel .roll-doc-link {
+  color: #006e9a !important;
+}
+
+#strategy-roll-panel .roll-section-title {
+  margin: 14px 0 8px;
+  font-size: 0.95rem;
+  color: #b8c4ff;
+}
+
+html[data-theme="light"] #strategy-roll-panel .roll-section-title {
+  color: #006e9a !important;
+}
+
+#roll-preview-box.roll-preview-box {
+  margin: 8px 0;
+  padding: 10px;
+  border: 1px solid #3a5a8a;
+  border-radius: 8px;
+  background: #141a28;
+  color: #dde2ff;
+}
+
+html[data-theme="light"] #roll-preview-box.roll-preview-box {
+  background: #f6f9fc !important;
+  border-color: #b8c8d8 !important;
+  color: #1a2838 !important;
+}
+
+#roll-countdown.roll-countdown {
+  margin-top: 6px;
+  color: #ffb347;
+}
+
+html[data-theme="light"] #roll-countdown.roll-countdown {
+  color: #a06010 !important;
+}
+
+/* ── 顺势加仓说明页 ── */
+body.roll-doc-page {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+  padding: 16px;
+  background: #0f1117;
+  color: #e6e8ef;
+}
+
+html[data-theme="light"] body.roll-doc-page {
+  background: #eef3f8 !important;
+  color: #142232 !important;
+}
+
+.roll-doc-container {
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.roll-doc-nav {
+  margin-bottom: 14px;
+}
+
+.roll-doc-nav a {
+  color: #8fc8ff;
+  text-decoration: none;
+}
+
+html[data-theme="light"] .roll-doc-nav a {
+  color: #006e9a !important;
+}
+
+.roll-doc-body {
+  background: #151a2a;
+  border: 1px solid #2a3150;
+  border-radius: 10px;
+  padding: 18px 20px;
+  line-height: 1.65;
+  font-size: 0.92rem;
+}
+
+html[data-theme="light"] .roll-doc-body {
+  background: #fff !important;
+  border-color: #b8c8d8 !important;
+  color: #1a2838 !important;
+}
+
+.roll-doc-body h1 {
+  font-size: 1.35rem;
+  margin: 0 0 12px;
+  color: #f0f2ff;
+}
+
+html[data-theme="light"] .roll-doc-body h1 {
+  color: #142232 !important;
+}
+
+.roll-doc-body h2 {
+  font-size: 1.08rem;
+  margin: 22px 0 10px;
+  color: #b8c4ff;
+  border-bottom: 1px solid #2a3150;
+  padding-bottom: 6px;
+}
+
+html[data-theme="light"] .roll-doc-body h2 {
+  color: #006e9a !important;
+  border-bottom-color: #d0dae4 !important;
+}
+
+.roll-doc-body h3 {
+  font-size: 0.98rem;
+  margin: 16px 0 8px;
+  color: #c9d4ff;
+}
+
+html[data-theme="light"] .roll-doc-body h3 {
+  color: #142232 !important;
+}
+
+.roll-doc-body p,
+.roll-doc-body li {
+  color: #dde2ff;
+}
+
+html[data-theme="light"] .roll-doc-body p,
+html[data-theme="light"] .roll-doc-body li {
+  color: #1a2838 !important;
+}
+
+.roll-doc-body ul,
+.roll-doc-body ol {
+  margin: 8px 0 12px 1.25em;
+}
+
+.roll-doc-body code {
+  background: #252538;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 0.88em;
+}
+
+html[data-theme="light"] .roll-doc-body code {
+  background: #e8eef5 !important;
+  color: #142232 !important;
+}
+
+.roll-doc-body pre {
+  background: #0f1420;
+  border: 1px solid #2a3150;
+  border-radius: 8px;
+  padding: 12px;
+  overflow: auto;
+  font-size: 0.84rem;
+  line-height: 1.5;
+  color: #dde2ff;
+}
+
+html[data-theme="light"] .roll-doc-body pre {
+  background: #f6f9fc !important;
+  border-color: #b8c8d8 !important;
+  color: #142232 !important;
+}
+
+.roll-doc-body pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.roll-doc-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+  font-size: 0.86rem;
+}
+
+.roll-doc-body th,
+.roll-doc-body td {
+  border: 1px solid #2a3150;
+  padding: 6px 8px;
+  text-align: left;
+  color: #dde2ff;
+}
+
+html[data-theme="light"] .roll-doc-body th,
+html[data-theme="light"] .roll-doc-body td {
+  border-color: #b8c8d8 !important;
+  color: #1a2838 !important;
+}
+
+.roll-doc-body th {
+  background: #1a2030;
+  color: #b8c4ff;
+}
+
+html[data-theme="light"] .roll-doc-body th {
+  background: #e8eef5 !important;
+  color: #142232 !important;
+}
+
+.roll-doc-body hr {
+  border: none;
+  border-top: 1px solid #2a3150;
+  margin: 20px 0;
+}
+
+html[data-theme="light"] .roll-doc-body hr {
+  border-top-color: #d0dae4 !important;
+}
+
+/* ── 实盘下单：预估风险/盈利/盈亏比条 ── */
+html[data-theme="light"] .order-plan-preview {
+  background: #f6f9fc !important;
+  border-color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .order-preview-rr {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .order-preview-rr strong {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .order-preview-risk strong {
+  color: #b03030 !important;
+}
+
+html[data-theme="light"] .order-preview-profit strong {
+  color: #087a50 !important;
+}
+
diff --git a/static/strategy_roll.js b/static/strategy_roll.js
index 913e974..47b38ae 100644
--- a/static/strategy_roll.js
+++ b/static/strategy_roll.js
@@ -13,15 +13,16 @@
   const previewBox = document.getElementById("roll-preview-box");
   const previewText = document.getElementById("roll-preview-text");
   const countdownEl = document.getElementById("roll-countdown");
+  const fibWrap = form.querySelector(".roll-field-fib");
+  const breakoutWrap = form.querySelector(".roll-field-breakout");
+  const fibUpper = document.getElementById("roll-fib-upper");
+  const fibLower = document.getElementById("roll-fib-lower");
+  const breakoutInput = document.getElementById("roll-breakout");
 
   let countdownTimer = null;
   let previewOk = false;
   let lastPreviewMode = "";
 
-  function qs(sel) {
-    return form.querySelector(sel);
-  }
-
   function selectedOption() {
     return symbolSel.options[symbolSel.selectedIndex];
   }
@@ -35,31 +36,36 @@
     const dir = opt.getAttribute("data-direction") || "long";
     const rp = opt.getAttribute("data-risk-percent") || "—";
     dirInput.value = dir;
-    riskBanner.textContent = "当前风险：" + rp + "%（来自监控单 #" + (opt.getAttribute("data-monitor-id") || "?") + "）";
+    riskBanner.textContent =
+      "当前风险：" + rp + "%（来自监控单 #" + (opt.getAttribute("data-monitor-id") || "?") + "）";
+  }
+
+  function setFieldGroup(wrap, inputs, visible, required) {
+    if (!wrap) return;
+    wrap.hidden = !visible;
+    inputs.forEach(function (inp) {
+      if (!inp) return;
+      inp.disabled = !visible;
+      inp.required = !!required && visible;
+      if (!visible) inp.value = "";
+    });
   }
 
   function syncFieldVisibility() {
-    const mode = modeSel.value;
-    form.querySelectorAll(".roll-field-fib").forEach(function (el) {
-      el.style.display = mode === "fib_618" || mode === "fib_786" ? "inline-flex" : "none";
-    });
-    form.querySelectorAll(".roll-field-breakout").forEach(function (el) {
-      el.style.display = mode === "breakout" ? "inline-flex" : "none";
-    });
-    const fibInputs = [qs("#roll-fib-upper"), qs("#roll-fib-lower")];
-    const bpInput = qs("#roll-breakout");
-    fibInputs.forEach(function (inp) {
-      if (inp) inp.required = mode === "fib_618" || mode === "fib_786";
-    });
-    if (bpInput) bpInput.required = mode === "breakout";
+    const mode = modeSel.value || "market";
+    form.setAttribute("data-add-mode", mode);
+    const showFib = mode === "fib_618" || mode === "fib_786";
+    const showBreakout = mode === "breakout";
+    setFieldGroup(fibWrap, [fibUpper, fibLower], showFib, showFib);
+    setFieldGroup(breakoutWrap, [breakoutInput], showBreakout, showBreakout);
     resetPreview();
   }
 
   function resetPreview() {
     previewOk = false;
-    submitBtn.disabled = true;
-    previewBox.style.display = "none";
-    countdownEl.style.display = "none";
+    if (submitBtn) submitBtn.disabled = true;
+    if (previewBox) previewBox.style.display = "none";
+    if (countdownEl) countdownEl.style.display = "none";
     if (countdownTimer) {
       clearInterval(countdownTimer);
       countdownTimer = null;
@@ -70,7 +76,7 @@
     const fd = new FormData(form);
     const obj = {};
     fd.forEach(function (v, k) {
-      obj[k] = v;
+      if (v !== "") obj[k] = v;
     });
     return obj;
   }
@@ -121,7 +127,7 @@
         previewOk = true;
         if (lastPreviewMode === "market") {
           startCountdown(10);
-        } else {
+        } else if (submitBtn) {
           submitBtn.disabled = false;
           countdownEl.style.display = "none";
         }
@@ -134,7 +140,7 @@
 
   function startCountdown(sec) {
     let left = sec;
-    submitBtn.disabled = true;
+    if (submitBtn) submitBtn.disabled = true;
     countdownEl.style.display = "block";
     countdownEl.textContent = "市价加仓：" + left + " 秒后可执行（可取消刷新预览）";
     countdownTimer = setInterval(function () {
@@ -143,7 +149,7 @@
         clearInterval(countdownTimer);
         countdownTimer = null;
         countdownEl.textContent = "可以执行市价加仓";
-        submitBtn.disabled = false;
+        if (submitBtn) submitBtn.disabled = false;
         return;
       }
       countdownEl.textContent = "市价加仓：" + left + " 秒后可执行";
@@ -166,7 +172,7 @@
       alert("请先点击预览");
       return;
     }
-    if (lastPreviewMode === "market" && submitBtn.disabled) {
+    if (lastPreviewMode === "market" && submitBtn && submitBtn.disabled) {
       e.preventDefault();
       alert("请等待 10 秒确认倒计时结束");
       return;
diff --git a/strategy_templates/strategy_roll_docs.html b/strategy_templates/strategy_roll_docs.html
index ce5e6e2..50cc01b 100644
--- a/strategy_templates/strategy_roll_docs.html
+++ b/strategy_templates/strategy_roll_docs.html
@@ -1,39 +1,21 @@
 <!DOCTYPE html>
-<html lang="zh-CN" data-theme="dark">
+<html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <script src="/static/instance_theme.js?v=4"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>顺势加仓 · 详细说明 · {{ exchange_display }}</title>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=4">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=5">
     <meta name="theme-color" content="#0b0d14">
-    <style>
-        body{font-family:system-ui,sans-serif;background:#0f1117;color:#e6e8ef;margin:0;padding:16px}
-        .container{max-width:920px;margin:0 auto}
-        .doc-nav{margin-bottom:14px}
-        .doc-nav a{color:#8fc8ff;text-decoration:none}
-        .doc-body{background:#151a2a;border:1px solid #2a3150;border-radius:10px;padding:18px 20px;line-height:1.65;font-size:.92rem}
-        .doc-body h1{font-size:1.35rem;margin:0 0 12px;color:#f0f2ff}
-        .doc-body h2{font-size:1.08rem;margin:22px 0 10px;color:#b8c4ff;border-bottom:1px solid #2a3150;padding-bottom:6px}
-        .doc-body h3{font-size:.98rem;margin:16px 0 8px;color:#c9d4ff}
-        .doc-body p,.doc-body li{color:#dde2ff}
-        .doc-body ul,.doc-body ol{margin:8px 0 12px 1.25em}
-        .doc-body code{background:#252538;padding:1px 5px;border-radius:4px;font-size:.88em}
-        .doc-body pre{background:#0f1420;border:1px solid #2a3150;border-radius:8px;padding:12px;overflow:auto;font-size:.84rem;line-height:1.5}
-        .doc-body table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.86rem}
-        .doc-body th,.doc-body td{border:1px solid #2a3150;padding:6px 8px;text-align:left}
-        .doc-body th{background:#1a2030;color:#b8c4ff}
-        .doc-body hr{border:none;border-top:1px solid #2a3150;margin:20px 0}
-    </style>
 </head>
-<body>
-<div class="container">
-    <div class="doc-nav">
+<body class="roll-doc-page">
+<div class="container roll-doc-container">
+    <div class="doc-nav roll-doc-nav">
         <a href="/strategy">← 返回策略交易</a>
         &nbsp;·&nbsp;
         <a href="/strategy/roll">顺势加仓</a>
     </div>
-    <article class="doc-body">
+    <article class="doc-body roll-doc-body">
         {{ doc_html|safe }}
     </article>
 </div>
diff --git a/strategy_templates/strategy_roll_panel.html b/strategy_templates/strategy_roll_panel.html
index 9677321..791e3e7 100644
--- a/strategy_templates/strategy_roll_panel.html
+++ b/strategy_templates/strategy_roll_panel.html
@@ -8,16 +8,16 @@
             风险比例读取所选监控单，<strong>不可手改</strong>；打到新止损时合并持仓亏损 ≈ 1 个风险单位（当前基数 × 监控 risk%）。<br>
             斐波/突破为<strong>程序监控</strong>（mark 价穿越触发），触价后市价加仓；同时仅允许 <strong>1</strong> 条监控中腿，提交后<strong>不可修改</strong>，可删除。<br>
             手动平仓后滚仓监控自动结束；<strong>已成交腿历史保留</strong>供复盘。<br>
-            <a href="/strategy/roll/docs" target="_blank" rel="noopener" style="color:#8fc8ff">→ 顺势加仓完整逻辑说明</a><br>
+            <a href="/strategy/roll/docs" target="_blank" rel="noopener" class="roll-doc-link">→ 顺势加仓完整逻辑说明</a><br>
             {% if roll_trend_active %}<span style="color:#ff8f8f">当前有运行中的趋势回调计划，请先结束后再滚仓。</span>{% endif %}
         </div>
     </details>
 
-    <div id="roll-risk-banner" class="rule-tip" style="margin-bottom:8px;color:#8fc8ff">
+    <div id="roll-risk-banner" class="rule-tip roll-risk-banner">
         当前风险：请选择持仓币种
     </div>
 
-    <form id="roll-form" action="{{ url_for('strategy_roll_execute') }}" method="post" class="form-row">
+    <form id="roll-form" action="{{ url_for('strategy_roll_execute') }}" method="post" class="form-row" data-add-mode="market">
         <select name="symbol" id="roll-symbol" required>
             <option value="">选择持仓币种</option>
             {% for o in roll_monitors %}
@@ -30,30 +30,30 @@
             {% endfor %}
         </select>
         <input type="hidden" name="direction" id="roll-direction" value="long">
-        <select name="add_mode" id="roll-add-mode">
+        <select name="add_mode" id="roll-add-mode" onchange="var f=document.getElementById('roll-form');if(f){f.setAttribute('data-add-mode',this.value);}">
             <option value="market">市价加仓</option>
             <option value="fib_618">斐波 0.618</option>
             <option value="fib_786">斐波 0.786</option>
             <option value="breakout">突破加仓</option>
         </select>
-        <span class="roll-field roll-field-fib">
-            <input name="fib_upper" id="roll-fib-upper" step="any" placeholder="上沿 H">
-            <input name="fib_lower" id="roll-fib-lower" step="any" placeholder="下沿 L">
+        <span class="roll-field roll-field-fib" hidden>
+            <input name="fib_upper" id="roll-fib-upper" step="any" placeholder="上沿 H" disabled>
+            <input name="fib_lower" id="roll-fib-lower" step="any" placeholder="下沿 L" disabled>
         </span>
-        <span class="roll-field roll-field-breakout">
-            <input name="breakthrough_price" id="roll-breakout" step="any" placeholder="突破价">
+        <span class="roll-field roll-field-breakout" hidden>
+            <input name="breakthrough_price" id="roll-breakout" step="any" placeholder="突破价" disabled>
         </span>
         <input name="new_stop_loss" id="roll-stop-loss" type="number" min="0" step="any" placeholder="新止损价" required>
         <button type="button" id="roll-preview-btn" {% if roll_trend_active %}disabled{% endif %}>预览</button>
         <button type="submit" id="roll-submit-btn" {% if roll_trend_active %}disabled style="opacity:.5"{% endif %} disabled>执行滚仓</button>
     </form>
 
-    <div id="roll-preview-box" class="rule-tip" style="display:none;margin:8px 0;padding:10px;border:1px solid #3a5a8a;border-radius:8px;background:#141a28">
+    <div id="roll-preview-box" class="rule-tip roll-preview-box" style="display:none">
         <div id="roll-preview-text">—</div>
-        <div id="roll-countdown" style="margin-top:6px;color:#ffb347;display:none"></div>
+        <div id="roll-countdown" class="roll-countdown" style="display:none"></div>
     </div>
 
-    <h3 style="margin:14px 0 8px;font-size:.95rem;color:#b8c4ff">活跃滚仓组</h3>
+    <h3 class="roll-section-title">活跃滚仓组</h3>
     <div class="table-wrap">
     <table>
         <tr><th>ID</th><th>币种</th><th>方向</th><th>腿数</th><th>首仓TP</th><th>当前SL</th><th>当前均价</th><th>止盈盈利U</th></tr>
@@ -74,7 +74,7 @@
     </table>
     </div>
 
-    <h3 style="margin:14px 0 8px;font-size:.95rem;color:#b8c4ff">最近滚仓腿</h3>
+    <h3 class="roll-section-title">最近滚仓腿</h3>
     <div class="table-wrap">
     <table>
         <tr><th>#</th><th>组</th><th>方式</th><th>张数</th><th>触发/限价</th><th>新SL</th><th>状态</th><th>操作</th></tr>
@@ -101,4 +101,4 @@
     </table>
     </div>
 </div>
-<script src="/static/strategy_roll.js?v=1"></script>
+<script src="/static/strategy_roll.js?v=2"></script>