Options: loosen order dialog spacing and stack mode/note rows.

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

lib/common/static/instance_theme.css

@@ -3937,14 +3937,14 @@ html[data-theme="light"] .options-strike-table--t .opt-strike-row-atm td {
   display: none !important;
 }
 .opt-order-dialog {
-  width: min(96vw, 720px);
+  width: min(96vw, 760px);
   max-height: 92vh;
   overflow: auto;
   background: var(--card-bg, #121726);
   color: inherit;
   border: 1px solid rgba(127, 127, 127, 0.35);
-  border-radius: 12px;
+  border-radius: 14px;
-  padding: 14px 16px 16px;
+  padding: 18px 20px 20px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
 }
 .opt-order-layout {
@@ -3952,6 +3952,18 @@ html[data-theme="light"] .options-strike-table--t .opt-strike-row-atm td {
 }
 .opt-order-main {
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.opt-order-dialog #opt-order-inst,
+.opt-order-dialog .options-order-inst {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  word-break: break-all;
+  margin: 0;
 }
 .opt-order-pending-head {
   display: flex;
@@ -4040,48 +4052,73 @@ html[data-theme="light"] .opt-pending-item {
   gap: 8px;
   margin-bottom: 10px;
 }
+.opt-order-dialog-head {
+  margin-bottom: 4px;
+}
 .opt-order-dialog-head .opt-order-title {
   margin: 0;
   margin-right: auto;
-  font-size: 0.95rem;
+  font-size: 1.02rem;
   color: #9ec0ff;
   font-weight: 650;
 }
 .opt-order-dialog-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
-  margin-top: 10px;
+  margin-top: 4px;
 }
 .opt-order-dialog-actions .btn-primary,
 .opt-order-dialog-actions .btn-secondary {
   flex: 1 1 140px;
+  min-height: 38px;
+  font-size: 0.86rem;
+  padding: 8px 14px;
+}
+.opt-order-dialog #opt-order-msg {
+  margin-top: 2px;
+  min-height: 1.2em;
+  line-height: 1.4;
 }
 .options-order-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
-  gap: 10px;
+  gap: 12px 14px;
-  margin: 10px 0;
+  margin: 0;
+  padding: 12px 12px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
 }
 .options-order-grid .k {
   display: block;
-  font-size: 0.68rem;
+  font-size: 0.7rem;
   color: #8892b0;
+  margin-bottom: 3px;
 }
+.options-order-grid .v,
 .options-page-wrap .options-order-grid .v {
-  font-size: 0.8rem;
+  font-size: 0.86rem;
+  font-weight: 600;
+  line-height: 1.35;
 }
 .options-estimate-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  font-size: 0.78rem;
+}
+.opt-est-main {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px 12px;
+  gap: 10px 12px;
-  margin: 8px 0 10px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px dashed rgba(255, 255, 255, 0.08);
-  font-size: 0.74rem;
 }
 .opt-order-chip {
   display: inline-flex;
@@ -4090,11 +4127,20 @@ html[data-theme="light"] .opt-pending-item {
   margin: 0;
   cursor: pointer;
   user-select: none;
-  font-size: 0.72rem;
+  font-size: 0.76rem;
-  padding: 3px 10px;
+  padding: 6px 12px;
-  min-height: 26px;
+  min-height: 32px;
   line-height: 1.2;
   white-space: nowrap;
+  border: 1px solid rgba(140, 160, 200, 0.35);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  color: inherit;
+  box-sizing: border-box;
+}
+.opt-order-chip:hover {
+  border-color: rgba(140, 170, 230, 0.55);
+  background: rgba(255, 255, 255, 0.07);
 }
 .opt-size-mode-chip {
   position: relative;
@@ -4116,40 +4162,52 @@ html[data-theme="light"] .opt-pending-item {
   box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.45);
 }
 .options-estimate-row .opt-target-idx {
-  width: 120px;
+  width: 140px;
-  font-size: 0.74rem;
+  font-size: 0.8rem;
-  padding: 3px 6px;
+  padding: 6px 8px;
+  min-height: 32px;
+  box-sizing: border-box;
 }
 .options-estimate-row .k {
   color: #8892b0;
 }
 .options-estimate-row .v {
-  font-size: 0.82rem;
+  font-size: 0.86rem;
   font-weight: 600;
 }
 .options-estimate-row .opt-est-note {
-  font-size: 0.66rem;
+  display: block;
+  font-size: 0.7rem;
+  line-height: 1.45;
+  opacity: 0.85;
 }
-html[data-theme="light"] .options-estimate-row {
+html[data-theme="light"] .options-estimate-row,
+html[data-theme="light"] .options-order-grid {
   background: rgba(0, 0, 0, 0.02);
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+html[data-theme="light"] .opt-order-chip {
+  border-color: rgba(0, 0, 0, 0.16);
+  background: #fff;
 }
 .options-hint {
   font-size: 0.75rem;
   margin-bottom: 6px;
 }
 .options-page-wrap .options-order-mode-row {
-  font-size: 0.74rem;
+  font-size: 0.78rem;
-  gap: 6px;
+  gap: 10px;
 }
 .options-page-wrap .options-order-mode-row input[type="number"],
 .options-page-wrap .options-order-mode-row input[type="text"] {
-  font-size: 0.74rem;
+  font-size: 0.8rem;
-  padding: 3px 6px;
+  padding: 6px 8px;
+  min-height: 32px;
+  box-sizing: border-box;
 }
 .options-page-wrap .options-order-mode-row .btn-primary {
-  font-size: 0.74rem;
+  font-size: 0.8rem;
-  padding: 4px 10px;
+  padding: 6px 12px;
 }
 .options-page-wrap .opt-row-actions .btn-primary,
 .options-page-wrap .opt-row-actions .btn-secondary {
@@ -4191,13 +4249,26 @@ html[data-theme="light"] .options-estimate-row {
   background: rgba(255, 209, 102, 0.12);
 }
 .options-order-mode-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  margin: 0;
+}
+.opt-size-mode-bar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 .options-order-mode-row input[type="number"] {
-  width: 88px;
+  width: 96px;
+}
+.options-order-mode-row .opt-signal-note,
+.options-order-mode-row #opt-signal-note {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .options-order-mode-row .opt-order-chip {
   flex: 0 0 auto;

lib/instance/templates/embed_shell.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
     <link rel="stylesheet" href="/static/instance_page.css?v=11">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=100">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=101">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">
     <title>{{ pwa_app_name }}</title>

lib/instance/templates/index.html

@@ -17,7 +17,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ pwa_app_name }}</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=11">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=100">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=101">
 
 </head>
 <body

lib/options/templates/options_panel.html

@@ -85,6 +85,7 @@
                                 <div><span class="k">距平衡</span><span id="opt-order-dist-be" class="v">—</span></div>
                             </div>
                             <div class="options-estimate-row">
+                                <div class="opt-est-main">
                                     <label class="btn-secondary opt-order-chip" for="opt-target-idx">目标位(指数)</label>
                                     <input type="number" id="opt-target-idx" class="opt-target-idx" step="0.1" min="0" placeholder="达价限价平仓">
                                     <span class="k">预计价值</span>
@@ -93,9 +94,11 @@
                                     <span id="opt-est-profit" class="v">—</span>
                                     <span class="k">目标杠杆</span>
                                     <span id="opt-est-leverage" class="v" title="目标位名义价值÷权利金">—</span>
+                                </div>
                                 <span class="muted opt-est-note">目标价=监控指数;到位后按买一限价平仓;无止损,到期即止损</span>
                             </div>
                             <div class="form-row options-order-mode-row">
+                                <div class="opt-size-mode-bar">
                                     <label class="btn-secondary opt-order-chip opt-size-mode-chip">
                                         <input type="radio" name="opt-size-mode" value="sheets" checked>
                                         <span>指定张数</span>
@@ -112,7 +115,8 @@
                                     </label>
                                     <input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none"
                                            autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
-                                <input type="text" id="opt-signal-note" name="opt_signal_note" placeholder="备注(关键位说明)"
+                                </div>
+                                <input type="text" id="opt-signal-note" name="opt_signal_note" class="opt-signal-note" placeholder="备注(关键位说明)"
                                        autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                                        data-lpignore="true" data-1p-ignore="true" data-form-type="other" readonly>
                             </div>
@@ -295,4 +299,4 @@
     </div>
 </div>
 <script src="/static/options_expiry_countdown.js?v=1"></script>
-<script src="/static/options_panel.js?v=44"></script>
+<script src="/static/options_panel.js?v=45"></script>