/* ============================================================
   NOVAX · 交易终端（对齐 jzlx · 三栏布局 + 扁平 + 蓝涨红跌 · 增强丝滑）
   ============================================================ */

/* ===== 币种栏（多交易对） ===== */
.symbar{
  display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:thin;
}
.sym-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:140px;background:var(--bg2);border:0;padding:11px 18px;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  font:inherit;text-align:left;position:relative;
}
.sym-item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);
}
.sym-item:hover{background:var(--bg3)}
.sym-item.on{background:var(--bg3);border-bottom-color:var(--brand)}
.sym-item.on::after{transform:scaleX(1)}
.sym-item .s{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13px;font-weight:800}
.sym-item .s .sym-nm{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.sym-item .s i{font-style:normal;font-size:10px;color:var(--t3);font-weight:500}
.sym-item .zh{font-style:normal;font-size:10px;color:var(--t3);font-weight:500}
.sym-ico{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0}
.sym-ico.fb,.tk-ico.fb{display:inline-flex;align-items:center;justify-content:center;background:var(--brand-dim);color:var(--brand);font-size:14px;font-weight:800;border-radius:8px}
.tk.pair .sym{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:16px;font-weight:800}
.tk.pair .sym .sym-txt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tk-ico{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.tk.pair .sym .zh{font-style:normal;font-size:12px;color:var(--t3);font-weight:600}
.sym-item .p{font-size:13px;font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums}
.sym-item .c{font-size:11px;font-weight:800}
@media (max-width:960px){
  .sym-item{min-width:112px;padding:8px 12px}
}

/* ===== 顶栏行情条（对齐 jzlx：黑扁平 4px 圆角，无阴影） ===== */
.tickerbar{
  display:flex;align-items:stretch;gap:0;
  background:var(--bg2);border-bottom:1px solid var(--line);overflow-x:auto;
}
.tk{padding:11px 22px;border-right:1px solid var(--line);min-width:124px;transition:background var(--dur-fast) var(--ease)}
.tk:hover{background:var(--bg3)}
.tk .k{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;white-space:nowrap;font-weight:700}
.tk .v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tk.pair{display:flex;align-items:center;gap:14px;min-width:auto}
.tk.pair .px{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;transition:text-shadow var(--dur) var(--ease)}
.tk.pair .chgp{font-size:12px;font-weight:800;padding:4px 9px;border-radius:6px}

/* 手机端行情/交易分屏：电脑端不显示 */
.m-view-tabs,.m-trade-cta{display:none}

/* ===== 三栏布局（gap=1px 细线分割 · 对齐 jzlx 交易所分栏） ===== */
.terminal{display:grid;grid-template-columns:260px 1fr 320px;gap:1px;background:var(--line);min-height:calc(100vh - 140px)}
.terminal>section{background:var(--bg);transition:background-color var(--dur) var(--ease)}

/* ===== 左：盘口 ===== */
.ob{display:flex;flex-direction:column;height:100%;background:var(--bg2)}
.ob-hd{display:flex;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:.12em;background:var(--bg2);font-weight:800}
.ob-body{flex:1;overflow-y:auto;padding:6px 0}
.ob-cols{display:flex;padding:5px 16px 10px;font-size:10.5px;color:var(--t3);font-weight:700;letter-spacing:.06em}
.ob-cols span:first-child{flex:1}.ob-cols span:nth-child(2){width:78px;text-align:right}.ob-cols span:last-child{width:58px;text-align:right}
.ob-row{
  display:flex;align-items:center;position:relative;padding:4px 16px;cursor:pointer;
  font-size:12.5px;font-variant-numeric:tabular-nums;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.ob-row:hover{background:var(--bg3);transform:translateX(-1px)}
.ob-row .p{flex:1;font-weight:700}
.ob-row .a{width:78px;text-align:right;color:var(--t2)}
.ob-row .s{width:58px;text-align:right;color:var(--t3);font-weight:600}
.ob-row .bar{position:absolute;right:0;top:0;bottom:0;opacity:.2;pointer-events:none;transition:width var(--dur) var(--ease)}
.ob-row.ask .p{color:var(--dn)} .ob-row.ask .bar{background:var(--dn)}
.ob-row.bid .p{color:var(--up)} .ob-row.bid .bar{background:var(--up)}
.ob-mid{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);
}
.ob-mid .mp{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.ob-mid .sp{font-size:10.5px;color:var(--t3);text-align:right;line-height:1.6;font-weight:600}
.ob-fills{flex:0 0 auto;max-height:220px;overflow-y:auto;border-top:1px solid var(--line);background:var(--bg2)}
.fills-hd{display:flex;padding:11px 16px 5px;font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;background:var(--bg2);font-weight:700}
.fills-hd span:first-child{flex:1}.fills-hd span:nth-child(2){width:72px;text-align:right}.fills-hd span:last-child{width:64px;text-align:right}
.fills-row{display:flex;padding:4px 16px;font-size:12.5px;font-variant-numeric:tabular-nums;transition:background var(--dur-fast) var(--ease)}
.fills-row:hover{background:var(--bg3)}
.fills-row .p{flex:1;font-weight:700}
.fills-row .a{width:72px;text-align:right;color:var(--t2)}
.fills-row .t{width:64px;text-align:right;color:var(--t3);font-size:11px}

/* ===== 中：图表 + 底部表格 ===== */
.center{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);transition:background-color var(--dur) var(--ease)}
.chart-hd{
  display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);gap:4px;flex-wrap:wrap;
  background:var(--bg2);transition:background-color var(--dur) var(--ease);flex:0 0 auto;
}
.tf-btn{
  background:none;border:0;color:var(--t2);font-size:12.5px;padding:6px 11px;border-radius:6px;cursor:pointer;
  transition:all var(--dur-fast) var(--ease);font-weight:600;
}
.tf-btn:hover{color:var(--t1);background:var(--bg3)}
.tf-btn.on{color:var(--t1);background:var(--brand-dim);font-weight:800;box-shadow:inset 0 0 0 1px rgba(42,100,251,.28)}
.chart-live{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:11px;color:var(--t2)}
.chart-live .cd{font-variant-numeric:tabular-nums;color:var(--t1);font-weight:600}
.chart-tools{display:flex;align-items:center;gap:2px;margin-left:8px;flex-wrap:wrap}
.chart-stack{display:flex;flex-direction:column;flex:1 1 auto;min-height:380px;background:var(--chart-bg)}
#chartWrap{flex:1 1 auto;min-height:320px;position:relative;background:var(--chart-bg);transition:background-color var(--dur) var(--ease)}
.chart-split{
  flex:0 0 7px;height:7px;cursor:row-resize;background:var(--line);position:relative;z-index:5;
  touch-action:none;
}
.chart-split::after{
  content:"";position:absolute;left:50%;top:2px;width:36px;height:3px;margin-left:-18px;border-radius:99px;background:var(--line2);
}
.chart-split:hover,.chart-split.dragging{background:var(--brand-dim)}
.chart-split:hover::after,.chart-split.dragging::after{background:var(--brand)}
.osc-pane{display:none}
.osc-pane.on{display:block}
.ind-dd{position:relative}
.ind-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:80;min-width:176px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:8px 0;
  box-shadow:0 16px 32px rgba(0,0,0,.45);
}
.ind-panel .ind-group{padding:6px 12px 4px;font-size:10.5px;color:var(--t3);font-weight:800;letter-spacing:.08em}
.ind-panel label{
  display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;color:var(--t1);
  cursor:pointer;font-weight:600;
}
.ind-panel label:hover{background:var(--bg3)}
.ind-panel input{accent-color:var(--brand)}
.kline-legend{
  position:absolute;left:0;top:0;right:52px;z-index:6;pointer-events:none;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;
  padding:7px 10px 10px;margin:0;border:0;
  font-size:11px;line-height:1.45;color:var(--t2);
  font-variant-numeric:tabular-nums;
  background:rgba(11,14,19,.78);
  white-space:normal;overflow:visible;
}
html[data-theme="light"] .kline-legend,
body[data-theme="light"] .kline-legend{background:rgba(247,249,252,.86)}
.kline-legend .kl-i{white-space:nowrap}
.kline-legend .kl-i .k{opacity:.78;margin-right:3px}
.kline-legend b{color:var(--t1);font-weight:700;margin:0}
.kline-legend b.up{color:#22c55e}
.kline-legend b.dn{color:#ef4444}
#chartWrap > div:not(.kline-legend):not(.lwc-loader){position:relative;z-index:1}
#chartWrap .lwc-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:12px;letter-spacing:.1em}
#volWrap,#oscWrap,#kdjWrap{height:110px;position:relative;background:var(--chart-bg);flex:0 0 auto}
.ind-sep{
  display:flex;justify-content:space-between;align-items:center;padding:3px 12px;
  font-size:10.5px;color:var(--t3);font-weight:700;letter-spacing:.06em;
  border-top:1px solid var(--line);background:var(--bg2);flex:0 0 auto;
}
.ind-sep b{color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums}
.ob-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg2)}
.ob-tabs button{
  flex:1;background:none;border:0;color:var(--t2);font-size:12.5px;padding:11px 0;cursor:pointer;
  font-weight:700;border-bottom:2px solid transparent;
}
.ob-tabs button.on{color:var(--t1);border-bottom-color:var(--brand);background:var(--brand-dim)}
#obPaneBook{display:flex;flex-direction:column;flex:1;min-height:0}
#obPaneTrades{flex:1;min-height:0;flex-direction:column}
#obPaneTrades:not(.hide){display:flex}
.ob-fills-full{flex:1;overflow-y:auto}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.mode-tabs button{
  height:34px;border-radius:8px;border:1px solid var(--line2);background:var(--bg4);color:var(--t2);
  font-weight:700;cursor:pointer;font-size:13px;
}
.mode-tabs button.on{border-color:var(--brand);color:var(--t1);background:var(--brand-dim)}
.lev-custom{display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.lev-custom input[type=number]{
  width:64px;height:32px;background:var(--bg4);border:1px solid var(--line2);border-radius:8px;
  color:var(--t1);text-align:center;font-weight:800;
}
.lev-custom input[type=range]{flex:1;accent-color:var(--brand)}
.pnl-chip.up,.num.pnl-up{color:#22c55e !important}
.pnl-chip.dn,.num.pnl-dn{color:#ef4444 !important}

/* ===== 底部：持仓/委托 tabs ===== */
.bottom{border-top:1px solid var(--line);flex:0 0 240px;min-height:180px;max-height:38vh;overflow:auto;background:var(--bg2);transition:background-color var(--dur) var(--ease)}
.tpsl-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bottom .tbl td{padding:10px 16px;font-size:12.5px}
.pnl-chip{font-variant-numeric:tabular-nums;font-weight:800}
.pos-side{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12px}
.pos-side .lv{font-size:10px;color:var(--t3);font-weight:700;border:1px solid var(--line2);border-radius:4px;padding:1px 5px}
.cancel-link{
  color:var(--t2);font-size:12px;cursor:pointer;padding:4px 9px;border:1px solid var(--line2);border-radius:6px;background:var(--bg4);
  transition:all var(--dur-fast) var(--ease);font-weight:600;
}
.cancel-link:hover{color:var(--t1);border-color:var(--dn);background:var(--dn-dim)}
.tpsl-input{
  width:92px;height:28px;background:var(--bg4);border:1px solid var(--line2);border-radius:6px;
  color:var(--t1);font-size:12px;padding:0 8px;outline:none;text-align:right;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.tpsl-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);background:var(--bg3)}
.subtabs{display:flex;padding:0 16px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--bg2);transition:background-color var(--dur) var(--ease)}
.subtabs button{
  background:none;border:0;color:var(--t2);font-size:13px;padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  font-weight:600;position:relative;
}
.subtabs button:hover{color:var(--t1)}
.subtabs button.on{color:var(--t1);border-bottom-color:var(--brand);font-weight:800;background:var(--brand-dim)}

/* ===== 右：下单面板（对齐 jzlx：蓝色做多 / 红色做空） ===== */
.order-panel{display:flex;flex-direction:column;background:var(--bg2);transition:background-color var(--dur) var(--ease)}
.op-hd{padding:16px 18px;border-bottom:1px solid var(--line);background:var(--bg2);transition:background-color var(--dur) var(--ease)}
.op-balance{display:flex;justify-content:space-between;font-size:12px;color:var(--t3);margin-bottom:12px;font-weight:600}
.op-balance b{color:var(--t2);font-variant-numeric:tabular-nums;font-weight:700}
/* ===== 买入/卖出：斜切梯形 Tab（jzlx 风） ===== */
.side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:16px;position:relative}
.side-tabs button{
  height:44px;border:0;background:var(--bg4);
  font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--dur) var(--ease);letter-spacing:.03em;position:relative;overflow:visible;
}
/* 做多 Tab：右下斜边切角（左梯形） */
.side-tabs button.long{
  color:var(--brand);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
  background:var(--bg4);
  border-right:0;
}
.side-tabs button.long:hover{background:var(--bg3)}
.side-tabs button.long.on{
  background:linear-gradient(135deg, #2DD4BF 0%, #14b8a6 100%);
  color:#fff;
}
/* 做空 Tab：左下斜边切角（右梯形，与做多咬合） */
.side-tabs button.short{
  color:var(--dn);
  clip-path:polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  background:var(--bg4);
  margin-left:-1px;
}
.side-tabs button.short:hover{background:var(--bg3)}
.side-tabs button.short.on{
  background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color:#fff;
}
/* 选中态下方轻微描边（clip-path 不影响） */
.side-tabs button.long.on::after{content:"";position:absolute;right:0;bottom:-1px;height:2px;width:92%;background:linear-gradient(90deg,#2DD4BF,transparent)}
.side-tabs button.short.on::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:92%;background:linear-gradient(90deg,transparent,#ef4444)}
.type-tabs{display:flex;gap:16px;margin-bottom:16px;font-size:13px}
.type-tabs button{background:none;border:0;color:var(--t2);cursor:pointer;padding:2px 0;border-bottom:2px solid transparent;font-weight:600;transition:all var(--dur-fast) var(--ease)}
.type-tabs button:hover{color:var(--t1)}
.type-tabs button.on{color:var(--t1);border-bottom-color:var(--brand);font-weight:800}
.lev-row{display:flex;gap:5px;margin:6px 0 16px;flex-wrap:wrap}
.lev-row button{
  flex:1;min-width:40px;height:30px;background:var(--bg4);border:1px solid var(--line2);border-radius:6px;
  color:var(--t2);font-size:11.5px;font-weight:800;cursor:pointer;transition:all var(--dur-fast) var(--ease);
}
.lev-row button:hover{color:var(--t1);border-color:var(--brand)}
.lev-row button.on{background:var(--brand-dim);border-color:var(--brand);color:var(--t1);font-weight:800;box-shadow:inset 0 0 0 1px rgba(42,100,251,.3)}
.oi{position:relative;margin-bottom:16px}
.oi input{
  width:100%;height:42px;background:var(--bg4);border:1px solid var(--line2);border-radius:6px;
  padding:0 60px 0 14px;font-size:14px;font-variant-numeric:tabular-nums;outline:none;color:var(--t1);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.oi input:hover{background:var(--bg3);border-color:var(--line2)}
.oi input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring),inset 0 0 0 1px rgba(42,100,251,.08);background:var(--bg2)}
.oi input[disabled]{opacity:.55;cursor:not-allowed}
.oi .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.oi label{display:block;font-size:11px;color:var(--t2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
/* ===== 5列百分比：纯文字胶囊（jzlx 风） ===== */
.pct-slider{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.pct-slider button{
  height:30px;background:var(--bg4);border:1px solid var(--line2);border-radius:6px;color:var(--t2);
  font-size:11.5px;font-weight:700;cursor:pointer;
  transition:all var(--dur-fast) var(--ease);letter-spacing:.02em;
}
.pct-slider button:hover{color:var(--t1);border-color:var(--brand);background:var(--brand-dim)}
.pct-slider button.on{background:var(--brand-dim);border-color:var(--brand);color:var(--t1);font-weight:800;box-shadow:inset 0 0 0 1px rgba(42,100,251,.32)}
.pct-slider.pct-5 button{border-radius:8px}
.tp-sl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.tp-sl .oi input{padding-right:46px;height:36px;font-size:13px}
.tp-sl .oi .u{right:10px}
.est-box{
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:16px;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.est-box:hover{border-color:var(--line2);background:var(--bg4)}
.est-box .row{display:flex;justify-content:space-between;font-size:12px;color:var(--t3);padding:4px 0}
.est-box .row b{color:var(--t2);font-variant-numeric:tabular-nums;font-weight:700}
/* ===== 提交按钮：薄荷绿做多 / 红色做空，12px 圆角（jzlx 风） ===== */
.submit-btn{
  width:100%;height:50px;border:0;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;
  transition:all var(--dur) var(--ease);letter-spacing:.06em;color:#ffffff;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
}
.submit-btn .sb-l{flex:0 0 auto}
.submit-btn .sb-r{margin-left:10px;padding:2px 10px;border-radius:6px;background:rgba(255,255,255,.18);font-size:12px;font-weight:800}
.submit-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%);pointer-events:none}
.submit-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.submit-btn:active{transform:translateY(1px)}
.submit-btn.long{
  background:linear-gradient(135deg,#2DD4BF 0%,#14b8a6 55%,#0d9488 100%);
  box-shadow:0 14px 30px -12px rgba(45,212,191,.75), inset 0 0 0 1px rgba(255,255,255,.1);
}
.submit-btn.short{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 55%,#b91c1c 100%);
  box-shadow:0 14px 30px -12px rgba(239,68,68,.75), inset 0 0 0 1px rgba(255,255,255,.1);
}
.submit-btn[disabled]{opacity:.55;cursor:not-allowed;filter:saturate(.6);transform:none}
.op-note{padding:12px 18px;font-size:11.5px;color:var(--t3);line-height:1.8;border-top:1px solid var(--line)}

/* ===== 价格闪烁（蓝色上涨 / 红色下跌，柔化 0.45s） ===== */
@keyframes flashUp{0%{background:rgba(42,100,251,.26)}100%{background:transparent}}
@keyframes flashDn{0%{background:rgba(239,68,68,.26)}100%{background:transparent}}
.flash-up{animation:flashUp .45s var(--ease)}
.flash-dn{animation:flashDn .45s var(--ease)}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1200px){
  .terminal{grid-template-columns:220px 1fr 300px}
  #chartWrap{height:42vh;min-height:240px}
  #volWrap,#oscWrap,#kdjWrap{height:88px}
}
@media (max-width:960px){
  .terminal{grid-template-columns:1fr;min-height:auto}
  .terminal>section{background:var(--bg)}
  .ob-sec{display:none}
  .center{order:1}
  .order-panel{order:2}
  .bottom{order:3;min-height:auto}
  .nav-links{display:none}
  .tickerbar{flex-wrap:nowrap}
  .mobile-tabs{display:none!important}
  body.has-mtabs{padding-bottom:0}

  .m-view-tabs{
    display:flex;align-items:stretch;gap:0;
    background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:56px;z-index:50;
  }
  .m-view-tabs button{
    flex:1;height:42px;border:0;background:transparent;color:var(--t2);
    font-size:14px;font-weight:700;cursor:pointer;position:relative;
  }
  .m-view-tabs button.on{color:var(--t1)}
  .m-view-tabs button.on:after{
    content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;border-radius:2px;background:var(--brand);
  }
  .m-trade-cta{
    display:flex;gap:10px;padding:10px 12px;
    background:var(--bg2);
    border-top:1px solid var(--line);position:fixed;left:0;right:0;bottom:0;z-index:90;
  }
  .m-cta{
    flex:1;height:46px;border:0;border-radius:12px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;
  }
  .m-cta.long{background:linear-gradient(135deg,#2DD4BF 0%,#14b8a6 55%,#0d9488 100%)}
  .m-cta.short{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}

  /* 行情页：只留 K 线，图表尽量铺满 */
  body.m-view-chart .order-panel,
  body.m-view-chart .bottom{display:none!important}
  body.m-view-chart .terminal{min-height:0}
  body.m-view-chart .center{min-height:0}
  body.m-view-chart .chart-stack{min-height:0}
  body.m-view-chart #chartWrap{height:52vh;min-height:260px;max-height:none}
  body.m-view-chart #volWrap,body.m-view-chart #oscWrap,body.m-view-chart #kdjWrap{height:72px}
  body.m-view-chart .bottom{max-height:none}
  body.m-view-chart{padding-bottom:68px}

  /* 交易页：只留下单和持仓 */
  body.m-view-trade .chart-hd,
  body.m-view-trade .chart-stack,
  body.m-view-trade .m-trade-cta{display:none!important}
  body.m-view-trade .order-panel{display:flex}
  body.m-view-trade .bottom{display:block}
}
.mobile-tabs{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:color-mix(in srgb, var(--bg2) 92%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  border-top:1px solid var(--line);z-index:110;
}
@supports not (color:color-mix(in srgb, white 50%, black)){
  .mobile-tabs{background:var(--bg2)}
}
.mobile-tabs button{flex:1;background:none;border:0;color:var(--t2);font-size:11px;padding:9px 0 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:600;transition:all var(--dur-fast) var(--ease)}
.mobile-tabs button.on{color:var(--brand);font-weight:800}
.mobile-tabs button.on svg{transform:scale(1.08)}
.mobile-tabs button svg{width:18px;height:18px;transition:transform var(--dur) var(--ease)}
body.has-mtabs{padding-bottom:56px}

/* ===== 空状态 · 打印机插画（jzlx 风：SVG 内嵌，轻描边+轻量色） ===== */
.empty-box.trade-empty{
  padding:44px 24px;gap:18px;
}
.empty-box.trade-empty svg{width:120px;height:120px;opacity:.95}
.empty-box.trade-empty .e-title{font-size:14px;font-weight:800;color:var(--t1)}
.empty-box.trade-empty .e-desc{font-size:12px;color:var(--t3);line-height:1.7;max-width:360px}

/* ============================================================
   UICraft · trade.css 动效增强（交易终端专属）
   ============================================================ */

/* ---- 币种栏（symbar）：激活下划线滑入 + hover 微抬升 + 实时数字呼吸 ---- */
.symbar .sym-item .p {
  transition: color var(--dur-150) var(--ease-out-quart), transform var(--dur-200) var(--ease-out-quart);
}
.symbar .sym-item:hover .p { transform: translateY(-1px); }
.symbar .sym-item .p.flash-up { animation: priceFlashUp .6s var(--ease-out-quart); }
.symbar .sym-item .p.flash-dn { animation: priceFlashDn .6s var(--ease-out-quart); }
@keyframes priceFlashUp {
  0%   { color: var(--up); text-shadow: 0 0 12px rgba(42,100,251,.55); }
  100% { color: var(--t2); }
}
@keyframes priceFlashDn {
  0%   { color: var(--dn); text-shadow: 0 0 12px rgba(239,68,68,.55); }
  100% { color: var(--t2); }
}

/* ---- Ticker bar：入场 stagger（每格 40ms） + hover 详情出现 + 最新价数字发光 ---- */
.tickerbar .tk {
  animation: enterLift var(--dur-420) var(--ease-out-quart) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.tickerbar .tk:nth-child(n+12) { animation-delay: calc(11 * 40ms); }
.tk.pair .px { position: relative; display: inline-block; }
.tk.pair .px.flash-up { animation: bigPxUp .7s var(--ease-out-quart); }
.tk.pair .px.flash-dn { animation: bigPxDn .7s var(--ease-out-quart); }
@keyframes bigPxUp {
  0%   { color: var(--up);  text-shadow: 0 0 16px rgba(42,100,251,.55); transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes bigPxDn {
  0%   { color: var(--dn);  text-shadow: 0 0 16px rgba(239,68,68,.55); transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* ---- 盘口（Order Book）：深度条宽度滑入 + 行 hover 轻微位移 + 新行 slide-in ---- */
.ob-row .bar {
  transition: width var(--dur-420) var(--ease-out-quart), opacity var(--dur-300) var(--ease-out-quart);
  will-change: width;
}
.ob-row.new-row {
  animation: obRowIn var(--dur-420) var(--ease-out-quart) both;
}
@keyframes obRowIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: none; }
}
/* 中间价格行（当前成交价）：缩放微脉冲（每次价格变） */
.ob-mid .mp.flash-up { animation: midPulseUp .8s var(--ease-out-quart); }
.ob-mid .mp.flash-dn { animation: midPulseDn .8s var(--ease-out-quart); }
@keyframes midPulseUp {
  0%   { color: var(--up); transform: scale(1.04); }
  60%  { color: var(--up); }
  100% { transform: scale(1); }
}
@keyframes midPulseDn {
  0%   { color: var(--dn); transform: scale(1.04); }
  60%  { color: var(--dn); }
  100% { transform: scale(1); }
}

/* ---- Fills（最新成交）：新行淡入 + 侧偏色 ---- */
.fills-row.new-fill {
  animation: fillIn var(--dur-520) var(--ease-out-quart) both;
  position: relative;
  overflow: hidden;
}
.fills-row.new-fill::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  transform: scaleY(0); transform-origin: top;
  animation: sideGrow .5s var(--ease-out-quart) both;
}
.fills-row.new-fill.up::before   { background: var(--up); }
.fills-row.new-fill.down::before { background: var(--dn); }
@keyframes fillIn {
  from { opacity: 0; transform: translateX(-6px); background: transparent; }
  40%  { background: color-mix(in srgb, var(--up) 6%, transparent); }
  to   { opacity: 1; transform: none; background: transparent; }
}
.fills-row.new-fill.down {
  animation-name: fillInDn;
}
@keyframes fillInDn {
  from { opacity: 0; transform: translateX(-6px); background: transparent; }
  40%  { background: color-mix(in srgb, var(--dn) 6%, transparent); }
  to   { opacity: 1; transform: none; background: transparent; }
}
@keyframes sideGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---- 图表区：TimeFrame 按钮 on 态高亮 + live 点呼吸增强 ---- */
.tf-btn.on {
  position: relative;
}
.tf-btn.on::after { /* 外圈微动辉光 */
  content: "";
  position: absolute; inset: -2px;
  border-radius: 8px;
  box-shadow: 0 0 0 0 var(--brand-ring);
  animation: tfGlow 2.8s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes tfGlow {
  0%,100% { box-shadow: 0 0 0 0 var(--brand-ring); }
  50%     { box-shadow: 0 0 0 6px rgba(42,100,251,0); }
}
/* Live 实时标识 */
.chart-live .cd { transition: color var(--dur-200) var(--ease-out-quart); }
.chart-live .dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--up);
  display: inline-block; margin-right: 4px;
  box-shadow: 0 0 0 3px var(--up-dim);
  animation: livePulse 1.6s var(--ease-in-out) infinite;
  vertical-align: middle;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px var(--up-dim); }
  50%     { box-shadow: 0 0 0 6px rgba(42,100,251,0); }
}

/* ---- 下单面板（右侧）：stagger 进场 + side-tab 滑动指示 + submit 按压/loading ---- */
.op-hd              { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 80ms; }
.op-balance         { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 160ms; }
.side-tabs          { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 220ms; }
.type-tabs          { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 280ms; }
.lev-row            { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 330ms; }
#orderType_oi + .oi { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 380ms; }
.oi:not(#orderType_oi + .oi) { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 420ms; }
.pct-slider         { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 460ms; }
.tp-sl              { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 500ms; }
.est-box            { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 540ms; }
.submit-btn-wrap    { animation: enterLift var(--dur-420) var(--ease-out-quart) both; animation-delay: 580ms; }
.op-note            { animation: enterFade var(--dur-420) var(--ease-out-quart) both; animation-delay: 660ms; }

/* side-tabs：做多/做空切换的描边滑动 */
.side-tabs { position: relative; }
.side-tabs button.long.on  { animation: sideOn var(--dur-300) var(--ease-out-quart) both; }
.side-tabs button.short.on { animation: sideOn var(--dur-300) var(--ease-out-quart) both; }
@keyframes sideOn {
  0%   { transform: scale(.98); filter: brightness(.9); }
  60%  { filter: brightness(1.12); }
  100% { transform: scale(1); }
}

/* 杠杆按钮点击：on 态缩放 */
.lev-row button.on{background:var(--brand-dim);border-color:var(--brand);color:var(--t1);font-weight:800;box-shadow:inset 0 0 0 1px rgba(42,100,251,.3)}
.lev-row button:active:not(.on) { transform: scale(.96); transition-duration: var(--dur-100) !important; }

/* 提交按钮：loading spinner */
.submit-btn[loading] {
  pointer-events: none;
  filter: saturate(.7);
}
.submit-btn[loading]::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  vertical-align: middle;
  margin-right: 10px;
}
.submit-btn[loading] > *:not(::before) { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* TPSL 输入框：hover 抬升 */
.tpsl-input:hover { background: var(--bg3); }

/* ---- 底部 Subtabs + 表格：tab 激活滑动背景 + 行高亮 stripe ---- */
.subtabs button { position: relative; }
.subtabs button.on::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.7);
  width: 100%; height: 100%;
  opacity: 0;
  animation: subTabPop var(--dur-300) var(--ease-out-quart) forwards;
  pointer-events: none;
}
@keyframes subTabPop {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
/* 持仓/委托行：新出现的行侧偏色 */
.bottom .tbl tbody tr.new-pos,
.bottom .tbl tbody tr.new-ord {
  animation: rowSlideIn var(--dur-520) var(--ease-out-quart) both;
}
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateY(-4px); background: color-mix(in srgb, var(--brand) 8%, transparent); }
  to   { opacity: 1; transform: none; }
}
/* 盈亏数字：变化时轻微发光 */
.pnl-chip.flash-up { animation: pnlGlow .8s var(--ease-out-quart); color: var(--up); }
.pnl-chip.flash-dn { animation: pnlGlowDn .8s var(--ease-out-quart); color: var(--dn); }
@keyframes pnlGlow   { 0% { text-shadow: 0 0 14px rgba(42,100,251,.6); } 100% { text-shadow: none; } }
@keyframes pnlGlowDn { 0% { text-shadow: 0 0 14px rgba(239,68,68,.6); } 100% { text-shadow: none; } }

/* ---- 撤单按钮：点击时旋转 + 缩放入场（订单行新增时） ---- */
.cancel-link { position: relative; }
.cancel-link:hover { transform: translateY(-1px); }
.cancel-link:active { transform: translateY(1px) scale(.97); }

/* ---- 移动端底部 tabs：图标点击 bounce + 当前态呼吸 ---- */
.mobile-tabs button { position: relative; }
.mobile-tabs button:active svg {
  transform: scale(.88) !important;
  transition-duration: var(--dur-100) !important;
}
.mobile-tabs button.on {
  animation: mobileTabActive var(--dur-420) var(--ease-out-quart) both;
}
@keyframes mobileTabActive {
  0%   { transform: scale(.96); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.mobile-tabs button::after { /* 点击点波纹 */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 25%, transparent) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width var(--dur-520) var(--ease-out-quart), height var(--dur-520) var(--ease-out-quart), opacity var(--dur-520) var(--ease-out-quart);
  opacity: 0;
}
.mobile-tabs button.pulse::after {
  width: 120px; height: 120px;
  opacity: 1;
}

/* ============================================================
   UICraft · trade.css 动效增强 v2（深度补充）
   · 限价/市价切换：类型标签位移淡入 + 限价输入框脉冲
   · 止盈止损折叠展开：grid-rows 0fr→1fr + 箭头旋转
   · 订单回执 Modal：成功/部分成交/纯挂单 三态动效
   · 盘口/成交：新档替换高亮过渡
   · 币种切换：激活态扫光
   · Subtabs 内容切换：pane 淡入上移
   ============================================================ */

/* ---- 限价/市价切换 ---- */
.type-tabs { position: relative; }
.type-tabs button { position: relative; }
.type-tabs button::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-300) var(--ease-out-quart);
}
.type-tabs button.on::after { transform: scaleX(1); }
.oi.flash-limit input {
  animation: inputPulseBrand var(--dur-520) var(--ease-out-quart);
}
@keyframes inputPulseBrand {
  0%   { box-shadow: 0 0 0 0 var(--brand-ring); }
  100% { box-shadow: 0 0 0 8px rgba(42,100,251,0); }
}

/* ---- 止盈止损折叠 ---- */
.tpsl-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; color: var(--t2); cursor: pointer;
  font-size: 12px; font-weight: 700; padding: 4px 6px; border-radius: 6px;
  transition: color var(--dur-150) var(--ease-out-quart), background var(--dur-150) var(--ease-out-quart), transform var(--dur-100) var(--ease-out-quart);
}
.tpsl-toggle:hover { background: var(--bg3); color: var(--t1); }
.tpsl-toggle:active { transform: translateY(1px); }
.tpsl-toggle .caret { transition: transform var(--dur-300) var(--ease-out-quart); }
.tpsl-toggle.on .caret { transform: rotate(180deg); }
.tp-sl.collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: .5;
  margin-bottom: 0;
  transition: grid-template-rows var(--dur-420) var(--ease-out-quart),
              opacity var(--dur-300) var(--ease-out-quart),
              margin var(--dur-300) var(--ease-out-quart);
}
.tp-sl.collapse > .collapse-inner { overflow: hidden; }
.tp-sl.collapse.open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 16px; }

/* ---- 订单回执（Receipt）：三态 ---- */
.receipt {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; color: var(--t2);
  animation: enterLift var(--dur-420) var(--ease-out-quart) both;
}
.receipt .hd {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.receipt .seal {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--brand-dim); color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(42,100,251,.24);
  animation: sealPop var(--dur-420) var(--ease-out-quart) both;
}
.receipt .seal.ok   { background: var(--up-dim); color: var(--up); }
.receipt .seal.pend { background: var(--brand-dim); color: var(--brand); }
.receipt .seal.part { background: rgba(245,158,11,.14); color: #f59e0b; box-shadow: inset 0 0 0 1px rgba(245,158,11,.3); }
@keyframes sealPop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.receipt .hd .title { font-size: 15px; font-weight: 800; color: var(--t1); }
.receipt .hd .sub   { font-size: 12px; color: var(--t3); font-weight: 600; }
.receipt .r {
  display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px;
}
.receipt .r .k { color: var(--t3); font-weight: 600; font-size: 11.5px; letter-spacing: .04em; }
.receipt .r .v { color: var(--t1); font-weight: 700; }
.receipt .r .v.num { font-variant-numeric: tabular-nums; }
.receipt .warn {
  margin-top: 2px; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--dn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dn) 30%, transparent);
  color: var(--dn); font-size: 12px; line-height: 1.7; font-weight: 600;
}
.receipt .tips {
  font-size: 11.5px; color: var(--t3); line-height: 1.75;
  padding: 8px 10px; border-radius: 6px; background: var(--bg3);
}

/* ---- 持仓/委托行：新出现行左侧色条 ---- */
.bottom .tbl tbody tr.new-pos td:first-child,
.bottom .tbl tbody tr.new-ord td:first-child {
  position: relative;
}
.bottom .tbl tbody tr.new-pos td:first-child::before,
.bottom .tbl tbody tr.new-ord td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
  animation: sideGrow .5s var(--ease-out-quart) both;
}

/* ---- 盘口行新价高亮 + flash 价格 ---- */
.ob-row.flash-up { animation: obFlashUp .55s var(--ease-out-quart); }
.ob-row.flash-dn { animation: obFlashDn .55s var(--ease-out-quart); }
@keyframes obFlashUp { 0%{ background: color-mix(in srgb, var(--up) 14%, transparent);} 100%{ background: transparent;} }
@keyframes obFlashDn { 0%{ background: color-mix(in srgb, var(--dn) 14%, transparent);} 100%{ background: transparent;} }

/* ---- 币种栏：激活态扫光 ---- */
.symbar .sym-item.on::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 8%, transparent), transparent);
  transform: translateX(-100%);
  animation: symSweep 1.2s var(--ease-out-quart);
  pointer-events: none;
}
@keyframes symSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ---- 顶栏余额 flash ---- */
#navBal.flash-up { animation: balFlashUp .6s var(--ease-out-quart); }
#navBal.flash-dn { animation: balFlashDn .6s var(--ease-out-quart); }
@keyframes balFlashUp { 0%{ text-shadow: 0 0 14px rgba(42,100,251,.45); color: var(--up);} }
@keyframes balFlashDn { 0%{ text-shadow: 0 0 14px rgba(239,68,68,.45); color: var(--dn);} }

/* ---- Subtabs pane 淡入 ---- */
[id^="pane-"] { animation: paneIn var(--dur-420) var(--ease-out-quart) both; }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   超窄屏 ≤480px  竖屏真机精修（杜绝溢出/按钮重叠 · jzlx 风）
   ============================================================ */
@media (max-width:480px){
  .sym-item{min-width:96px;padding:7px 10px}
  .sym-item .s{font-size:12px}
  .sym-item .p{font-size:11.5px}
  .tickerbar .tk{padding:9px 12px;min-width:100px;border-right:1px solid var(--line)}
  .tickerbar .tk.pair{gap:8px;min-width:auto;flex:0 0 auto}
  .tickerbar .tk.pair .sym{font-size:14px}
  .tickerbar .tk.pair .px{font-size:19px}
  .tickerbar .tk .k{font-size:10px;letter-spacing:.06em;margin-bottom:3px}
  .tickerbar .tk .v{font-size:13px}
  /* K线高度由行情/交易分屏接管 */
  body.m-view-chart #chartWrap{height:50vh;min-height:240px;max-height:none}
  .kline-legend{font-size:10px;gap:2px 8px;padding:5px 8px 8px;right:44px}
  .chart-hd{padding:7px 10px;gap:2px}
  .tf-btn{font-size:12px;padding:6px 9px}
  .chart-live{gap:10px;font-size:10.5px;margin-left:auto}
  .op-hd{padding:11px 13px}
  .op-balance{font-size:11px;margin-bottom:10px}
  /* 买入/卖出 梯形 Tab（手机端切角角度稍小，避免文字被切） */
  .side-tabs{gap:0;margin-bottom:12px}
  .side-tabs button{height:40px;font-size:14px}
  .side-tabs button.long{clip-path:polygon(0 0, 100% 0, 95% 100%, 0 100%)}
  .side-tabs button.short{clip-path:polygon(5% 0, 100% 0, 100% 100%, 0 100%)}
  .side-tabs button.long.on::after{width:95%}
  .side-tabs button.short.on::after{width:95%}
  .type-tabs{gap:10px;margin-bottom:10px;font-size:12px}
  .lev-row{gap:4px;margin:3px 0 12px}
  .lev-row button{min-width:48px;flex:1 0 30%;height:28px;font-size:11px;border-radius:6px}
  .oi{margin-bottom:12px}
  .oi input{height:38px;font-size:13px;padding:0 50px 0 10px;border-radius:8px}
  .oi .u{right:10px;font-size:10px}
  .oi label{font-size:10px;letter-spacing:.06em;margin-bottom:5px}
  /* 5列百分比纯文字 */
  .pct-slider{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px}
  .pct-slider button{height:28px;font-size:10.5px;border-radius:8px;min-width:0;word-break:keep-all;letter-spacing:0}
  .tp-sl{grid-template-columns:1fr;gap:6px;margin-bottom:12px}
  .tp-sl .oi input{height:34px;font-size:12.5px;padding-right:40px;border-radius:8px}
  .est-box{padding:10px 12px;margin-bottom:12px;border-radius:10px}
  .est-box .row{font-size:11.5px;padding:3px 0}
  /* 提交按钮：薄荷绿+12px圆角（核心手机端 CTA） */
  .submit-btn{height:46px;font-size:14.5px;border-radius:12px;letter-spacing:.05em}
  .submit-btn .sb-r{font-size:11.5px;padding:2px 8px}
  .op-note{padding:10px 14px;font-size:11px;line-height:1.7}
  /* 持仓/委托 · 内嵌到图表下方（手机端不再用固定4项Tabs） */
  .bottom{min-height:auto;border-top:1px solid var(--line)}
  .subtabs{padding:0 8px}
  .subtabs button{font-size:12px;padding:10px 12px}
  .bottom .tbl th,.bottom .tbl td{padding:8px 10px;font-size:11.5px;white-space:nowrap}
  .bottom .tbl th.col-m-hide,.bottom .tbl td.col-m-hide{display:none}
  .tpsl-input{width:72px;height:24px;font-size:11px;padding:0 6px;border-radius:6px}
  .cancel-link{padding:4px 8px;font-size:11px;border-radius:6px}
  .bottom > div[id^="pane-"]{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 空状态打印机插画：手机端更紧凑 */
  .empty-box.trade-empty{padding:28px 18px;gap:14px}
  .empty-box.trade-empty svg{width:88px;height:88px}
  .empty-box.trade-empty .e-title{font-size:13px}
  .empty-box.trade-empty .e-desc{font-size:11.5px;max-width:260px}
  .ob-hd{padding:9px 12px;font-size:10px;letter-spacing:.06em}
  .ob-cols{padding:4px 12px 8px;font-size:10px}
  .ob-cols span:nth-child(2){width:62px}.ob-cols span:last-child{width:50px}
  .ob-row{padding:3px 12px;font-size:11.5px}
  .ob-row .a{width:62px}
  .ob-row .s{width:50px;font-size:10.5px}
  .ob-mid{padding:7px 12px}
  .ob-mid .mp{font-size:16px}
  .fills-hd{padding:8px 12px 4px;font-size:10px;letter-spacing:.06em}
  .fills-hd span:nth-child(2){width:58px}.fills-hd span:last-child{width:56px}
  .fills-row{padding:3px 12px;font-size:11.5px}
  .fills-row .a{width:58px;font-size:10.5px}
  .fills-row .t{width:56px;font-size:10px}
  .ob-fills{max-height:180px}
  /* 交易页：旧4项mobile-tabs 全隐藏；只保留全局 m-tabbar（nav.php） */
  body.has-mtabs{padding-bottom:0!important}
  .mobile-tabs{display:none!important}
  body.m-view-chart.has-m-tabbar{padding-bottom:140px!important}
  body.m-view-trade.has-m-tabbar{padding-bottom:78px!important}
  body.m-view-chart .m-trade-cta{
    display:grid;grid-template-columns:1fr 64px 1fr;gap:8px;
    bottom:62px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  body.m-view-chart .m-cta.long{grid-column:1}
  body.m-view-chart .m-cta.short{grid-column:3}
}

/* ============================================================
   UICraft · trade.css 动效增强 v3（终端体验精修）
   · 订单成交回执弹窗：三种状态（全成/挂单/部分成交）stamp 微抖动
   · 成交推送：右下角 toast 样式的 mini 推送
   · 订单簿：新出现 ask/bid 行 slideIn + 价格变动 row 呼吸
   · 持仓：PnL 转盈/转亏时瞬时 glow 脉冲
   · 杠杆按钮：on 态 1px 抬升 + 高光扫过
   · 下单提交按钮：提交时 .submitting 态收缩为 loading
   · 成交 fills-row：新行 slide-in 淡入
   ============================================================ */

/* ---- v3-1) 订单回执：ok/pend/part 三态 stamp 微抖动（stampPop 已存在，补 3 态的动效差别） ---- */
.receipt .seal.ok    { animation-name: sealPopOK; }
.receipt .seal.pend  { animation-name: sealPopPend; }
.receipt .seal.part  { animation-name: sealPopPart; }
@keyframes sealPopOK {
  0%   { transform: scale(.6) rotate(-6deg); opacity: 0; }
  55%  { transform: scale(1.10) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sealPopPend {
  0%   { transform: scale(.6); opacity: 0; }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sealPopPart {
  0%   { transform: scale(.6) translateX(-6px); opacity: 0; }
  55%  { transform: scale(1.07) translateX(3px); }
  100% { transform: scale(1) translateX(0); opacity: 1; }
}
.receipt .warn { animation: warnShake var(--dur-420) var(--ease-out-quart) both; animation-delay: 120ms; }
@keyframes warnShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(3px); }
}

/* ---- v3-2) 成交推送 mini：右下角固定的 trade-push（由 JS 创建 class trade-push 插入到 body 末尾） ---- */
.trade-push {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 8950;
  width: min(340px, calc(100vw - 44px));
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px 14px 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
  animation: tradePushIn var(--dur-420) var(--ease-out-quart) both;
}
html[data-theme="light"] .trade-push, body[data-theme="light"] .trade-push,
:root.nx-theme-light .trade-push, html.nx-theme-light .trade-push,
body.nx-theme-light .trade-push, [data-theme="light"] .trade-push,
.nx-theme-light .trade-push {
  box-shadow: 0 16px 36px rgba(15,23,34,.14);
}
.trade-push.out { animation: tradePushOut var(--dur-240) var(--ease-in-quart) forwards; }
.trade-push::before { /* 左侧色条 */
  content: ""; position: absolute;
  left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand);
}
.trade-push.long::before { background: var(--up); }
.trade-push.short::before { background: var(--dn); }
.trade-push .tp-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  background: var(--brand-dim); color: var(--brand);
  flex: 0 0 auto;
  animation: tpIconPop var(--dur-420) var(--ease-out-quart) both;
}
.trade-push.long .tp-ic  { background: var(--up-dim); color: var(--up); }
.trade-push.short .tp-ic { background: var(--dn-dim); color: var(--dn); }
.trade-push .tp-body { flex: 1 1 auto; min-width: 0; }
.trade-push .tp-t { font-size: 11.5px; color: var(--t3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trade-push .tp-v { font-size: 14px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; margin-top: 2px; }
.trade-push .tp-v .pnl-pos { color: var(--up); font-weight: 800; }
.trade-push .tp-v .pnl-neg { color: var(--dn); font-weight: 800; }
.trade-push .tp-x {
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--t3); cursor: pointer;
  transition: background var(--dur-150) var(--ease-out-quart), color var(--dur-150) var(--ease-out-quart);
}
.trade-push .tp-x:hover { background: var(--bg3); color: var(--t1); }
@keyframes tradePushIn {
  from { opacity: 0; transform: translateX(28px) translateY(10px); }
  65%  { transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes tradePushOut {
  to { opacity: 0; transform: translateX(40px); height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
@keyframes tpIconPop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 480px) {
  .trade-push { right: 10px; bottom: 68px; left: 10px; width: auto; }
}

/* ---- v3-3) 订单簿：新 ask/bid 行 slideIn，老行价格更新 flash（已有 obFlashUp/Dn，补 slide-in） ---- */
.ob-row.new-row {
  animation: obRowSlideIn var(--dur-420) var(--ease-out-quart) both;
}
@keyframes obRowSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* fills-row：新成交行淡入 */
.fills-row.new-fill {
  animation: fillRowIn var(--dur-420) var(--ease-out-quart) both;
}
@keyframes fillRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- v3-4) 持仓行 PnL 转盈/转亏时瞬时脉冲（由 JS 触发添加 pnl-pop-up / pnl-pop-dn） ---- */
.bottom .tbl tbody tr.pnl-pop-up .pnl-chip {
  animation: pnlPopUp var(--dur-520) var(--ease-out-quart);
}
.bottom .tbl tbody tr.pnl-pop-dn .pnl-chip {
  animation: pnlPopDn var(--dur-520) var(--ease-out-quart);
}
@keyframes pnlPopUp {
  0%   { transform: scale(1);   color: var(--up); text-shadow: 0 0 16px var(--up-dim); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes pnlPopDn {
  0%   { transform: scale(1);   color: var(--dn); text-shadow: 0 0 16px var(--dn-dim); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---- v3-5) 杠杆按钮：on 态微抬升 + 扫光（扫光用 ::after 伪元素渐变位移动画） ---- */
.lev-row button {
  position: relative; overflow: hidden;
}
.lev-row button::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 10%, transparent), transparent);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 1.1s var(--ease-out-expo);
}
.lev-row button.on::after {
  transform: translateX(100%);
}

/* ---- v3-6) 下单提交按钮 submitting：文字淡出 + spinner 居中（配合 .submit-btn[loading] 通用样式）
         已有 [loading] 的 base.css 通用 ::before 做 spinner，此处只做文本额外处理 + 宽度稳定 ---- */
.submit-btn[loading] {
  color: transparent !important; /* spinner 本身会通过 filter/bg 显示，文本隐藏 */
}
.submit-btn[loading]::after { display: none; } /* 隐藏表面渐变，避免影响 spinner */

/* ---- v3-7) 做多/做空按钮：切换方向时高亮脉冲（方向切换按钮 .side-tabs.on 补额外 pulse） ---- */
.side-tabs button.on {
  animation: sideOnPulse var(--dur-420) var(--ease-out-quart) both;
}
@keyframes sideOnPulse {
  0%   { box-shadow: 0 0 0 0 var(--brand-ring); }
  100% { box-shadow: 0 10px 26px -10px rgba(42,100,251,.8), 0 0 0 6px rgba(42,100,251,0); }
}
.side-tabs button.short.on {
  animation-name: sideOnPulseDn;
}
@keyframes sideOnPulseDn {
  0%   { box-shadow: 0 0 0 0 var(--dn-dim); }
  100% { box-shadow: 0 10px 26px -10px rgba(239,68,68,.8), 0 0 0 6px rgba(239,68,68,0); }
}

/* ---- v3-8) 撤销按钮：新增的 cancel-link 点击后立刻给出 disabled 抖动并加载态（防止重复点击） ---- */
.cancel-link[disabled], .cancel-link.cancelling {
  opacity: .55;
  cursor: not-allowed;
  animation: cancellingPulse 700ms var(--ease-in-out);
}
@keyframes cancellingPulse {
  0%,100% { filter: none; }
  50%     { filter: saturate(.7) brightness(.85); }
}

/* ============================================================
   END · UICraft trade.css v3 动效增强
   ============================================================ */