/* ============================================================================
 * 两腿价差套利 · 网页看板样式
 *   设计取向：深色为主、信息密度高但不拥挤；数字用等宽字体对齐；
 *   层次靠「底色深浅 + 1px 描边 + 极轻阴影」建立，而不是靠粗边框。
 *   只保留实盘，因此配色语义固定为：绿=正常/盈利，黄=等待，红=异常。
 * ==========================================================================*/
:root{
  /* 色彩令牌：bg 最底，panel 卡片，panel2 卡片内嵌块，line 描边 */
  --bg:#0b1117;
  --panel:#121a23;
  --panel2:#18222d;
  --panel3:#1e2a37;
  --line:#223040;
  --line2:#2b3b4d;
  --fg:#e8eff6;
  --fg2:#c2ceda;
  --dim:#7f92a5;
  --acc:#4c9aff;
  --acc2:#a371f7;
  --ok:#3fb950;
  --ok-bg:#0f2a17;
  --warn:#e3b341;
  --warn-bg:#2e2410;
  --err:#f85149;
  --err-bg:#2e1416;
  --cyan:#39c5cf;
  --chart-bg:#0d151d;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -12px rgba(0,0,0,.6);
  --r-sm:6px; --r:9px; --r-lg:13px;
  --topbar-h:58px;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"SF Mono",monospace;
  --sans:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI",system-ui,-apple-system,sans-serif;
}
/* ★ 2026-11-06：背景色挂在 <html> 上。
 *   否则 body.light 只改了 body，body 之外的区域（页面不满一屏时的空白、橡皮筋滚动）
 *   仍然是 :root 的深色 —— 这就是「切了浅色主题，背景还是黑的」。 */
html.light{--bg:#f2f5f9;color-scheme:light}
html:not(.light){color-scheme:dark}
body.light{
  --bg:#f2f5f9;
  --panel:#ffffff;
  --panel2:#f5f8fb;
  --panel3:#eaf0f6;
  --line:#dde5ee;
  --line2:#c9d5e2;
  --fg:#16202b;
  --fg2:#33475c;
  --dim:#647889;
  --acc:#1f6feb;
  --ok:#1a7f37; --ok-bg:#e8f6ec;
  --warn:#9a6700; --warn-bg:#fdf6e3;
  --err:#cf222e; --err-bg:#fdeceb;
  --chart-bg:#fbfdff;
  --shadow:0 1px 2px rgba(20,40,70,.06), 0 8px 24px -16px rgba(20,40,70,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{font-size:13px;line-height:1.5}
button,input,select{font-family:var(--sans)}
/* 数字统一等宽 + 表格数字对齐，读起来稳 */
.kpi b,.stat b,.bignum b,.bignum i,.kv b,.acct b,.acct .pnl,.posbox b,.params b,
td,.logitem .t,.latline,.sidecount,.feedbar .fmeta,.statusbar .smeta,.drift .val{
  font-variant-numeric:tabular-nums}
::selection{background:rgba(76,154,255,.3)}

/* ---------------- 顶栏 ---------------- */
#topbar{
  display:flex;align-items:center;gap:20px;height:var(--topbar-h);
  padding:0 18px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.02), var(--shadow);
  backdrop-filter:saturate(140%) blur(8px);
}
body.light #topbar{background:rgba(255,255,255,.92)}
.brand{display:flex;align-items:center;gap:10px;min-width:300px}
.logo{
  font-size:17px;color:#0b1117;background:linear-gradient(135deg,var(--acc),var(--acc2));
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  box-shadow:0 4px 12px -6px var(--acc);
}
.title{font-size:15px;font-weight:700;letter-spacing:.2px}
.title em{color:var(--acc2);font-style:normal}
.title .sub{font-weight:400;font-size:11.5px;color:var(--dim);margin-left:6px}

.conn{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg2);flex:1;
  min-width:0;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line2);display:inline-block;
  flex:0 0 auto;transition:background .2s}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(63,185,80,.16)}
.dot.off{background:var(--err);box-shadow:0 0 0 3px rgba(248,81,73,.16)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(227,179,65,.16)}
.badge{padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);
  color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:.2px}
.badge.drift{color:var(--warn);border-color:rgba(227,179,65,.4);background:var(--warn-bg)}

/* H 腿账户切换下拉（2026-11-06）：跟徽标并排，颜色语汇与 .badge 一致。
   用原生 select 而不是自绘弹层 —— 看板是给人快速操作的工具，
   原生的键盘/触屏/无障碍行为比自绘省事且不易出错。 */
.ctpsel{appearance:none;-webkit-appearance:none;background:var(--panel2);color:var(--fg2);
  border:1px solid var(--line);border-radius:999px;font:inherit;font-size:11px;font-weight:600;
  padding:3px 22px 3px 10px;margin-left:-4px;cursor:pointer;max-width:190px;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),
                   linear-gradient(135deg,var(--fg2) 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.ctpsel:hover{border-color:var(--cyan);color:var(--fg)}
.ctpsel:disabled{opacity:.45;cursor:progress}
.ctpsel option{background:var(--panel);color:var(--fg)}

.kpis{display:flex;gap:10px}
.kpi{
  text-align:right;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);padding:5px 12px;min-width:92px;
}
.kpi label{display:block;font-size:9.5px;color:var(--dim);letter-spacing:.4px;
  text-transform:uppercase;white-space:nowrap}
.kpi b{font-family:var(--mono);font-size:15px;font-weight:700;white-space:nowrap}
.alarms{display:flex;gap:5px;justify-content:flex-end;padding-top:1px}
.alarms .lv{font-style:normal;font-family:var(--mono);padding:2px 7px;border-radius:999px;
  font-size:10.5px;font-weight:600}
.alarms .err{background:var(--err-bg);color:#ff8a80}
.alarms .warn{background:var(--warn-bg);color:var(--warn)}
.alarms .info{background:rgba(76,154,255,.14);color:var(--acc)}
.actions{display:flex;gap:8px;align-items:center}

/* ---------------- 运行状态横幅（等待开盘 / 等待行情 / 运行中）---------------- */
.statusbar{
  display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:12.5px;
  border-bottom:1px solid var(--line);border-left:3px solid var(--line);
  background:var(--panel2);color:var(--fg2);
}
.statusbar .sicon{font-size:13px;line-height:1}
.statusbar .stitle{font-weight:700;white-space:nowrap;letter-spacing:.3px}
.statusbar .snote{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0}
.statusbar .sgap{flex:1}
.statusbar .smeta{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.statusbar .smeta b{color:var(--fg2)}
.statusbar.running{background:linear-gradient(90deg,var(--ok-bg),var(--panel2));
  border-left-color:var(--ok)}
.statusbar.running .sicon,.statusbar.running .stitle{color:var(--ok)}
.statusbar.wait{background:linear-gradient(90deg,var(--warn-bg),var(--panel2));
  border-left-color:var(--warn)}
.statusbar.wait .sicon,.statusbar.wait .stitle{color:var(--warn)}
.statusbar.down{background:linear-gradient(90deg,var(--err-bg),var(--panel2));
  border-left-color:var(--err)}
.statusbar.down .sicon,.statusbar.down .stitle{color:var(--err)}
body.light .statusbar.running{background:linear-gradient(90deg,var(--ok-bg),#fff)}
body.light .statusbar.wait{background:linear-gradient(90deg,var(--warn-bg),#fff)}
body.light .statusbar.down{background:linear-gradient(90deg,var(--err-bg),#fff)}

/* ---------------- 崩溃横幅（P0：只在有崩溃时显示）---------------- */
.crashbar{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:12px;
  border-bottom:1px solid var(--line);border-left:3px solid var(--err);
  background:linear-gradient(90deg,var(--err-bg),var(--bg))}
.crashbar .cicon{font-size:13px;line-height:1;color:var(--err)}
.crashbar .ctitle{font-weight:700;white-space:nowrap;color:var(--err)}
.crashbar .cnote{color:var(--err);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:.9}
.crashbar .cgap{flex:1}
.crashbar .cmeta{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.crashbar.stale{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-bg),var(--bg))}
.crashbar.stale .cicon,.crashbar.stale .ctitle,.crashbar.stale .cnote{color:var(--warn)}
body.light .crashbar{background:linear-gradient(90deg,var(--err-bg),#fff)}
body.light .crashbar.stale{background:linear-gradient(90deg,var(--warn-bg),#fff)}

/* ---------------- 行情真实性横幅 ---------------- */
.feedbar{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:12px;
  border-bottom:1px solid var(--line);border-left:3px solid var(--line)}
.feedbar .ficon{font-size:13px;line-height:1}
.feedbar .ftitle{font-weight:700;white-space:nowrap}
.feedbar .fnote{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feedbar .fgap{flex:1}
.feedbar .fmeta{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.feedbar .fswitch{display:flex;gap:6px}
.feedbar.live{background:linear-gradient(90deg,var(--ok-bg),var(--bg));border-left-color:var(--ok)}
.feedbar.live .ficon,.feedbar.live .ftitle{color:var(--ok)}
.feedbar.replay{background:linear-gradient(90deg,var(--warn-bg),var(--bg));border-left-color:var(--warn)}
.feedbar.replay .ficon,.feedbar.replay .ftitle{color:var(--warn)}
.feedbar.frozen{background:var(--panel2);border-left-color:var(--dim)}
.feedbar.frozen .ficon,.feedbar.frozen .ftitle{color:var(--dim)}
.feedbar.mixed{background:linear-gradient(90deg,var(--err-bg),var(--bg));border-left-color:var(--err)}
.feedbar.closed{background:var(--panel2);border-left-color:var(--warn)}
.feedbar.closed .ficon,.feedbar.closed .ftitle{color:var(--warn)}
.feedbar.mixed .ficon,.feedbar.mixed .ftitle{color:var(--err)}
.feedbar.unknown{background:var(--panel2);border-left-color:var(--line)}
body.light .feedbar.live{background:linear-gradient(90deg,var(--ok-bg),#fff)}
body.light .feedbar.replay{background:linear-gradient(90deg,var(--warn-bg),#fff)}
body.light .feedbar.mixed{background:linear-gradient(90deg,var(--err-bg),#fff)}
body.light .feedbar.closed{background:var(--panel2)}
body.light .feedbar.frozen,body.light .feedbar.unknown{background:var(--panel2)}

.btn.tiny{padding:4px 11px;font-size:11px;border-radius:var(--r-sm);font-weight:600}

/* 1s 级实时指标行（延迟 / 采样节奏 / 策略关键量） */
.latline{font-family:var(--mono);font-size:11px;color:var(--dim);margin:8px 0 3px}
.latline b{color:var(--fg)}
.sidecount{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;color:var(--dim);margin-bottom:10px}
.sidecount b{color:var(--fg)}

/* ---------------- 页签 ---------------- */
#tabs{display:flex;align-items:center;gap:2px;padding:0 14px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:var(--topbar-h);z-index:40}
.tab{background:none;border:none;color:var(--dim);padding:12px 18px;font-size:13px;
  cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  font-weight:500}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--acc);border-bottom-color:var(--acc);font-weight:700}
.tab.internal{color:var(--acc2)}
.tab.internal.active{color:var(--acc2);border-bottom-color:var(--acc2)}
.tab-hint{margin-left:auto;font-size:11px;color:var(--dim);padding-right:6px}

main{padding:14px}
.tabpane{display:none}
.tabpane.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}

/* ---------------- 布局 ---------------- */
.grid-board{display:grid;grid-template-columns:300px minmax(420px,1fr) 330px;gap:14px}
.grid-kline{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.grid-detail{display:grid;grid-template-columns:minmax(520px,1.6fr) minmax(330px,1fr);gap:14px}
.qwrap{display:grid;grid-template-columns:minmax(560px,1.5fr) 360px;gap:14px}
@media (max-width:1400px){
  .grid-board{grid-template-columns:1fr 1fr}
  .grid-board .col:last-child{grid-column:1/-1}
}
@media (max-width:1000px){
  .grid-board,.grid-kline,.grid-detail,.qwrap{grid-template-columns:1fr}
  #topbar{height:auto;flex-wrap:wrap;padding:10px 14px;gap:12px}
  .brand{min-width:0}
  .kpis{flex-wrap:wrap}
}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.col.narrow{max-width:420px}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 15px;display:flex;flex-direction:column;min-width:0;box-shadow:var(--shadow);
  transition:border-color .15s;
}
.card:hover{border-color:var(--line2)}
.card.grow{flex:1}
.card h3{
  margin:0 0 11px;font-size:12.5px;font-weight:700;color:var(--fg);letter-spacing:.3px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.card h3::before{
  content:"";width:3px;height:13px;border-radius:2px;background:var(--acc);
  box-shadow:0 0 8px -1px var(--acc);flex:0 0 auto;
}
.card h3 .mut{color:var(--dim);font-weight:400;font-size:11px}
.card h3 .mut b{color:var(--fg2)}
.mut{color:var(--dim)}
.small{font-size:11px}

/* ---------------- 漂移三件套 ---------------- */
.drift{display:flex;flex-direction:column;gap:11px}
.drow{display:grid;grid-template-columns:24px 1fr 78px;align-items:center;gap:9px}
.drow .idx{width:22px;height:22px;border-radius:50%;background:var(--panel2);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font-size:11px;
  border:1px solid var(--line);font-weight:600}
.drow .bar{height:8px;background:var(--panel3);border-radius:999px;position:relative;
  overflow:hidden;border:1px solid var(--line)}
.drow .bar i{position:absolute;top:0;bottom:0;left:50%;background:linear-gradient(90deg,var(--acc),var(--cyan));
  border-radius:999px;transition:width .3s,left .3s}
.drow .bar i.neg{background:linear-gradient(90deg,var(--err),var(--warn))}
.drow .val{font-family:var(--mono);text-align:right;font-size:12.5px;font-weight:600}
.drow .lbl{font-size:11.5px;color:var(--dim)}

/* ---------------- 账户/风险 ---------------- */
.acct{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;margin-bottom:9px}
.acct .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;
  gap:10px}
.acct .hd b{font-size:12.5px;color:var(--fg2)}
.acct .hd .pnl{font-family:var(--mono);font-size:15px;font-weight:700}
.acct .rows{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:11.5px}
.acct .rows span{color:var(--dim)}
.acct .rows b{font-family:var(--mono);font-weight:600}
.mbar{height:6px;background:var(--panel3);border-radius:999px;margin-top:9px;overflow:hidden}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--warn))}
.mbar i.hot{background:linear-gradient(90deg,var(--warn),var(--err))}
.riskline{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;
  border-top:1px solid var(--line);padding-top:9px;margin-top:5px;flex-wrap:wrap}
.riskline b{font-family:var(--mono);font-weight:600}

/* ---------------- 数值 & 表格 ---------------- */
.bignum{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.bignum b{font-family:var(--mono);font-size:29px;line-height:1;font-weight:700;
  letter-spacing:-.5px}
.bignum i{font-family:var(--mono);font-style:normal}
.kv{display:flex;justify-content:space-between;font-size:11.5px;padding:5px 0;
  border-top:1px solid var(--line)}
.kv b{font-family:var(--mono);font-weight:600}
.kv b.naked{color:var(--err)}
.kv b.ok{color:var(--ok)}

.posbox{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;margin-bottom:9px}
.posbox .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
  gap:10px}
.posbox .side{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.3px}
.posbox .side.long{background:var(--ok-bg);color:#56d364}
.posbox .side.short{background:var(--err-bg);color:#ff8a80}
.posbox .side.flat{background:var(--panel3);color:var(--dim)}
.posbox .rows{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:11.5px}
.posbox .rows span{color:var(--dim)}
.posbox .rows b{font-family:var(--mono);font-weight:600}

/* ---------------- 图表 ---------------- */
.chart{width:100%;display:block;border-radius:var(--r);background:var(--chart-bg);
  border:1px solid var(--line)}
.h280{height:280px}.h240{height:240px}.h200{height:200px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:8px}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;
  vertical-align:middle}

/* ---------------- 日志 ---------------- */
.loglist{overflow-y:auto;max-height:250px;display:flex;flex-direction:column;gap:6px}
.loglist.tall{max-height:340px}
.logitem{display:grid;grid-template-columns:60px 48px 1fr;gap:8px;font-size:11.5px;
  padding:6px 9px;border-radius:var(--r-sm);background:var(--panel2);
  align-items:start;border-left:2px solid transparent}
.logitem .t{font-family:var(--mono);color:var(--dim)}
.logitem .lv{text-align:center;border-radius:999px;font-size:10px;padding:1px 0;font-weight:600}
.logitem.err{background:var(--err-bg);border-left-color:var(--err)}
.logitem.err .lv{background:rgba(248,81,73,.18);color:#ff8a80}
.logitem.warn{background:var(--warn-bg);border-left-color:var(--warn)}
.logitem.warn .lv{background:rgba(227,179,65,.18);color:var(--warn)}
.logitem.info{border-left-color:var(--acc)}
.logitem.info .lv{background:rgba(76,154,255,.16);color:var(--acc)}

/* ---------------- 表格 ---------------- */
.tablewrap{overflow:auto;max-height:420px;border-radius:var(--r);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:11.5px}
th{position:sticky;top:0;background:var(--panel3);color:var(--fg2);font-weight:700;
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;
  font-size:11px;letter-spacing:.3px;z-index:1}
td{padding:7px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);
  white-space:nowrap}
tbody tr:nth-child(even){background:rgba(255,255,255,.014)}
tbody tr:hover{background:var(--panel2)}
tbody tr:last-child td{border-bottom:none}
td.pos{color:var(--ok);font-weight:600}
td.neg{color:var(--err);font-weight:600}
td.note{font-family:var(--sans);color:var(--dim);max-width:280px;overflow:hidden;
  text-overflow:ellipsis}
.pill{padding:2px 8px;border-radius:999px;font-size:10px;background:var(--panel3);
  border:1px solid var(--line);color:var(--fg2);font-weight:600}

/* ---------------- 绩效统计 ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;transition:border-color .15s,transform .15s}
.stat:hover{border-color:var(--line2);transform:translateY(-1px)}
.stat label{display:block;font-size:10.5px;color:var(--dim);margin-bottom:4px;
  letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-.3px}
.stat b.g{color:var(--ok)}.stat b.r{color:var(--err)}
.statsnote{margin-top:8px;font-size:11.5px;color:var(--warn)}

/* 账本对账行：让「开仓数 ≠ 显示笔数」自解释 */
.recon{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
  font-family:var(--mono)}
.recon b{color:var(--fg2);font-weight:700}
.recon span:first-child{color:var(--acc)}

/* 三类流水行的状态徽标 */
.pill.ok-pill{background:var(--ok-bg);color:#56d364;border-color:rgba(63,185,80,.35)}
.pill.warn-pill{background:var(--warn-bg);color:var(--warn);border-color:rgba(227,179,65,.35)}
.pill.err-pill{background:var(--err-bg);color:#ff8a80;border-color:rgba(248,81,73,.35)}
tr.row-open td{background:rgba(227,179,65,.05)}
tr.row-orphan td{background:rgba(248,81,73,.05)}

/* ---------------- 参数展示 ---------------- */
.params{display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:11.5px}
.params span{color:var(--dim)}
.params b{font-family:var(--mono);text-align:right;font-weight:600}

/* ---------------- 记忆 ---------------- */
.memrow{display:flex;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.memrow input{flex:1;min-width:240px;background:var(--panel2);border:1px solid var(--line);
  color:var(--fg);border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;
  transition:border-color .15s,box-shadow .15s}
.memrow input:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(76,154,255,.14)}
.memlist{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.memitem{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--acc2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 11px;font-size:11.5px}
.memitem .hd{color:var(--dim);font-size:10.5px;margin-bottom:3px;font-family:var(--mono)}
.memitem .tag{color:var(--cyan);margin-left:6px}

/* ---------------- 量化师面板 ---------------- */
.qgrid{display:grid;grid-template-columns:150px 1fr 96px 150px 58px;gap:6px 10px;
  align-items:center}
.qgrid .lbl{font-size:11.5px;color:var(--fg2)}
.qgrid .hint{font-size:10.5px;color:var(--dim)}
.qgrid input[type=range]{width:100%;accent-color:var(--acc)}
.qgrid input[type=text],.qgrid input[type=number]{background:var(--bg);
  border:1px solid var(--line);color:var(--acc);border-radius:var(--r-sm);
  padding:5px 8px;font-family:var(--mono);font-size:11.5px;width:100%;
  transition:border-color .15s,box-shadow .15s}
.qgrid input:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(76,154,255,.14)}
.qgrid .dirty{color:var(--warn);font-size:10.5px}
.qgrid .bad{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(248,81,73,.14)!important}
.qbool{display:flex;flex-wrap:wrap;gap:10px 24px}
.qbool label{display:flex;align-items:center;gap:8px;font-size:11.5px;cursor:pointer}
.qbool .hint{display:block;color:var(--dim);font-size:10.5px;margin-left:24px}
select{background:var(--bg);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--r-sm);padding:5px 8px;font-family:var(--mono);font-size:11.5px}
.preview{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:11px;font-family:var(--mono);font-size:11px;line-height:1.6;
  white-space:pre-wrap;margin:0;max-height:330px;overflow:auto;color:var(--fg)}
.danger-zone{background:var(--err-bg);border-color:rgba(248,81,73,.35)}
.danger-zone h3{color:var(--err)}
.danger-zone h3::before{background:var(--err);box-shadow:0 0 8px -1px var(--err)}
.chk{display:flex;align-items:center;gap:9px;font-size:12px;cursor:pointer;color:var(--err)}

/* ---------------- 按钮 ---------------- */
.btn{
  background:linear-gradient(180deg,#3d87e8,#1f6feb);color:#fff;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);padding:8px 15px;font-size:12px;font-weight:600;cursor:pointer;
  transition:filter .15s,transform .1s,box-shadow .15s;white-space:nowrap;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(76,154,255,.3)}
.btn.ok{background:linear-gradient(180deg,#2ea043,#238636);border-color:rgba(255,255,255,.08)}
.btn.purple{background:linear-gradient(180deg,#9a6bf0,#8957e5)}
.btn.danger{background:linear-gradient(180deg,#d13b3c,#b62324)}
.btn.danger2{background:linear-gradient(180deg,#94302f,#7d1a1a)}
.btn.ghost{background:var(--panel2);color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--panel3);filter:none;border-color:var(--line2)}
/* ★ 2026-11-06：按钮行默认允许换行。原来 nowrap 时「平 H 腿 / 平 L 腿 / 平两腿 /
   撤挂单 / 恢复自动」5 个按钮会撑出 300px 的左栏，溢出到中列卡片下面被盖住、
   文字看不见（用户截图反馈）。现在改成可换行 + 等宽分栏，窄栏里自动排成多行。 */
.btnrow{display:flex;gap:9px;flex-wrap:wrap}
.btnrow.wrap{flex-wrap:wrap}
.btnrow>.btn{min-width:0;white-space:normal;text-align:center;line-height:1.3}
.btnrow>.w2{flex:1 1 calc(50% - 5px)}
.btnrow>.w3{flex:1 1 calc(33.333% - 6px);padding-left:8px;padding-right:8px;font-size:11.5px}
.btn .bsub{display:block;font-size:10.5px;font-weight:500;opacity:.82;margin-top:1px;letter-spacing:.2px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
/* 交易流水：时间列带日期（月-日 时:分:秒）后很长，禁止换行才不会把表格撑歪 */
.nowrap{white-space:nowrap}
#tbl-trades td:first-child{font-variant-numeric:tabular-nums}

/* ---------------- 推送事件勾选（2026-11-02 新增） ---------------- */
.chip{padding:3px 9px;font-size:11px;line-height:1.5;border-radius:999px;cursor:pointer;
  background:var(--panel2);color:var(--dim);border:1px solid var(--line);
  font-family:var(--mono);transition:background .12s,border-color .12s,color .12s}
.chip:hover{border-color:var(--line2);color:var(--fg)}
.chip.on{background:rgba(76,154,255,.15);border-color:rgba(76,154,255,.55);
  color:#7fb4ff;font-weight:600}
.loglist.small{gap:3px}

/* ---------------- 滚动条 ---------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* Customer narrow-screen layout: prevent account badges from compressing vertically. */
@media(max-width:700px){
 #topbar{position:relative;display:flex;align-items:flex-start}
 #topbar .brand,#topbar .conn,#topbar .kpis{flex:1 0 100%;min-width:0}
 #topbar .conn{flex-wrap:wrap;white-space:normal}
 #topbar .kpis{flex-wrap:wrap}
 .statusbar,.feedbar{flex-wrap:wrap}
 .grid-board,.grid-kline,.grid-detail{min-width:0}
 .col,.card{min-width:0}
}

/* Remote account controls: visible scope and an operation-only password dialog. */
.account-controls {display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:14px 20px;padding:14px 18px;border:1px solid var(--line,#d6dfeb);border-radius:12px;background:var(--card,#fff);}
.account-controls label {display:flex;align-items:center;gap:8px;}
.account-controls select {max-width:340px;padding:8px;border:1px solid var(--line,#ccd6e4);border-radius:8px;background:var(--card,#fff);color:inherit;}
#account-switch-status {flex-basis:100%;font-size:13px;}
#account-switch-dialog {max-width:540px;width:calc(100% - 36px);box-sizing:border-box;padding:24px;border:1px solid var(--line,#ccd6e4);border-radius:16px;background:var(--card,#fff);color:var(--text,#182435);}
#account-switch-dialog::backdrop {background:rgba(0,0,0,.4);}
#account-switch-dialog p {line-height:1.65;}
#account-switch-password {box-sizing:border-box;display:block;width:100%;margin-top:8px;padding:10px;border:1px solid #aebdd0;border-radius:7px;background:var(--card,#fff);color:inherit;}
#account-switch-error {color:#be3131;min-height:1.4em;}
.account-dialog-actions {display:flex;justify-content:flex-end;gap:12px;}
@media(max-width:600px) {.account-controls {margin:10px;padding:12px;}.account-controls label {width:100%;}.account-controls select {min-width:0;flex:1;}}

#cloud-connection{position:sticky;top:0;z-index:9999;padding:9px 16px;text-align:center;font-size:14px;font-weight:600}#cloud-connection.connected{background:#dff6e8;color:#165930}#cloud-connection.disconnected{background:#ffe5b4;color:#743d00}