/* ═══════════════════════════════════════════════════════════════════════
 * S2 — css/modules/trade-panel.css 交易页（Minara V2 全量重做）
 *
 * 依据：docs/DESIGN-MINARA-V2.md（Minara 交易页实拍 1984×1277 OCR+PIL）。
 * 核心语言：整页白底平面分区 —— 禁用「浅灰底+白卡+圆角+描边+阴影」，
 * 面板 #f7f7f7 灰底直接嵌入（纯色块拼接，无边框无阴影）；分隔走
 * #f0f0f0/#f6f6f6 细线；主字 #141416 / 次字 #424242/#757575。
 * 涨 #07b66a / 跌 #f05351（数字色）；蜡烛涨 #27a69a 青绿 / 跌 #f05351；
 * 订单簿卖档浅红带 #ffeff0 / 买档浅绿带 #ecf7f1。
 * 主题 #7c3aed 紫（Minara 原绿全换紫）：启动实底 / 选中高亮；
 * 次按钮白底灰边。Tab 选中=白底黑字加粗，无底色无胶囊。
 * 密度：订单簿行 ~22px、表格行 24-28px、字号 12-13px、tabular-nums；
 * 实底按钮高 28px 圆角 6px。
 * ═══════════════════════════════════════════════════════════════════════ */

.view-trade-panel {
  /* ── 满幅终端布局（PIL 实测 Minara 内容占视口 99%）：覆盖 .thread 808px/96px 聊天容器约束 ── */
  width: auto;
  max-width: none;
  margin: 0;
  font-variant-numeric: tabular-nums;   /* 数字等宽对齐（替代等宽字体，笔画更细） */
  /* ── 零滚动终端（2026-09-27 审美升级）：原自然流 wrap 高 1062px > 视口 945px，
   * 整页滚动 117px —— 交易终端大忌。改为填满 .transcript 视口的 flex 链：
   * thread(本容器) → wrap → body-grid → chart 全部 flex 吃满，K 线吸收剩余高度
   * （K 线 svg 有 ResizeObserver，高度变化自动重绘 viewBox，无拉伸）。── */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ── Minara V2 tokens（PIL 实测；2026-09-27 审美升级对齐全站口径）── */
  --tp-bg: #ffffff;            /* 整页白底 */
  --tp-panel: #f7f7f7;         /* 面板灰底（直接嵌入，无边框无阴影） */
  --tp-divider: #ededed;       /* 分隔细线（原 #f0f0f0 在白底近不可见 → 加深一档） */
  --tp-divider-soft: #f4f4f4;  /* 次级分隔 */
  --tp-ink: #141416;           /* 主字近黑 */
  --tp-ink-2: #424242;         /* 次字 */
  --tp-ink-3: #757575;         /* 弱次字 */
  --tp-up: #00834d;            /* 涨（数字色，对齐全站 tokens —— DESIGN-TRADE-PERPS §2 规定） */
  --tp-down: #c2402f;          /* 跌（数字色，对齐全站 tokens —— 同上） */
  --tp-candle-up: #27a69a;     /* 蜡烛涨青绿（Minara 特色，保留） */
  --tp-candle-down: #f05351;   /* 蜡烛跌红（Minara 蜡烛双色独立于数字色，保留） */
  --tp-ask: #ffe8ea;           /* 订单簿卖档浅红带（原 #ffeff0 在 #f7f7f7 底上近不可见 → 提饱和） */
  --tp-bid: #e2f3e9;           /* 订单簿买档浅绿带（原 #ecf7f1 同上） */
  --tp-brand: #7c3aed;         /* R25 紫（Minara 原绿处） */
  --tp-btn-border: #d9d9d9;    /* 次按钮灰边 */
  /* 数字字体（用户 09-25 三轮反馈"交易的字很粗/很傻"）：Menlo 等宽在 10-13px 下
   * 笔画明显重于 SF Pro，是交易页数字笨重的主因 → 改系统 sans，配合下方全局
   * tabular-nums 保持数字等宽对齐（Minara 即 sans + tabular-nums 观感） */
  --tp-num: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

/* ── 骨架：整页白底平面分区（无卡片化：无圆角无描边无阴影）── */
.view-trade-panel .tp-wrap {
  background: var(--tp-bg);
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 12px 16px;                    /* 原 10/16/20 上下不对称 → 统一 12（节奏一致） */
  font-family: var(--am-font-family);
  font-size: var(--type-caption-size);
  color: var(--tp-ink);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 0;                           /* 零滚动链：吃满 thread 剩余高 */
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-num,
.view-trade-panel .tp-ob-price,
.view-trade-panel .tp-ob-qty,
.view-trade-panel .tp-ob-total,
.view-trade-panel .tp-qh-mark-price,
.view-trade-panel .tp-m-value,
.view-trade-panel .tp-qh-sym,
.view-trade-panel .tp-ohlc,
.view-trade-panel .tp-ohlc-bar,
.view-trade-panel .tp-size-btn,
.view-trade-panel .tp-pos-table td {
  font-variant-numeric: tabular-nums;   /* 规格：数字等宽 */
}

/* ═══ ① 顶栏已移除（用户指令：不区分预测市场/永续合约，页面直接以行情头开始）═══ */

/* ═══ ② 行情头（白底 + 底部细线；大字黑标记价 + 指标横排）═══ */
.view-trade-panel .tp-qh {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;                       /* 原 16px：紧凑终端密度（垂直预算让给 K 线） */
  border-bottom: 1px solid var(--tp-divider);
  flex-wrap: wrap;
}
.view-trade-panel .tp-qh-sym-row { display: flex; align-items: baseline; gap: 8px; }
.view-trade-panel .tp-qh-sym {
  font-family: var(--tp-num);
  font-size: var(--type-page-size);
  font-weight: 500;
  color: var(--tp-ink);
 line-height: var(--type-page-line); }
.view-trade-panel .tp-qh-perp {
  font-size: var(--type-caption-size);
  color: var(--tp-ink-3);
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-qh-mark { display: flex; flex-direction: column; gap: 2px; }
.view-trade-panel .tp-qh-mark-label { font-size: var(--type-caption-size); color: var(--tp-ink-3);  line-height: var(--type-caption-line); }
.view-trade-panel .tp-qh-mark-price {
  font-family: var(--tp-num);
  font-size: var(--type-metric-size);                       /* 28→30：大数字是页面唯一视觉锚点，放大一档（字重仍 500） */
  font-weight: 500;                      /* 700→600→500 三轮下调：用户 09-25 连续反馈"字粗"，
                                            且实测用户浏览器为 120% 缩放（截图 1525px / 视口 1267px），
                                            非整数缩放会额外加重视重感 → 全站强调字统一 500 */
  
  color: var(--tp-ink);                  /* 大字黑（Minara 实拍） */
 line-height: var(--type-metric-line); }
.view-trade-panel .tp-qh-metrics {
  display: flex;
  margin-left: auto;
  flex-wrap: wrap;
}
.view-trade-panel .tp-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 16px;
  border-left: 1px solid var(--tp-divider);
}
.view-trade-panel .tp-metric[data-m="oracle"] { border-left: none; }
.view-trade-panel .tp-metric.tp-metric-right { border-left: none; padding-left: 0; }
.view-trade-panel .tp-m-label { font-size: var(--type-caption-size); color: var(--tp-ink-3); white-space: nowrap;  line-height: var(--type-caption-line); }
.view-trade-panel .tp-m-value {
  font-family: var(--tp-num);
  font-size: var(--type-caption-size);
  font-weight: 500;                      /* 400→500：12px sans 的 500 恰好，label(11/400灰) 与值形成层级；
                                            用户嫌粗的是 600/700 与等宽字体，500 sans 无此问题 */
  color: var(--tp-ink);
  white-space: nowrap;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-change.down { color: var(--tp-down); }   /* 24h 跌红 */
.view-trade-panel .tp-change.up   { color: var(--tp-up); }
.view-trade-panel .tp-countdown { font-family: var(--tp-num); color: var(--tp-ink-2); }

/* ═══ ③ 模式行（聊天 Beta / 行情 / 交易 / 策略 / 工作流；黑粗选中无胶囊）═══ */
.view-trade-panel .tp-mode-row {
  display: flex;
  gap: 2px;
  padding: 6px 0;
}
.view-trade-panel .tp-wmode {
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: 400;
  color: var(--tp-ink-3);
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s ease;
 line-height: var(--type-body-line); }
.view-trade-panel .tp-wmode:hover { color: var(--tp-ink); }
.view-trade-panel .tp-wmode.active {
  color: var(--tp-ink);                  /* 黑粗选中，无底色无胶囊 */
  font-weight: 500;
  transition: none;                      /* 选中态瞬时反馈（渲染中 clientWidth 强制 layout 会固化过渡基线，致同步断言/首帧读到灰） */
}
.view-trade-panel .tp-beta {
  font-size: var(--type-caption-size);
  font-weight: 400;
  color: var(--tp-ink-3);
  background: var(--tp-divider-soft);
  border-radius: 999px;
  padding: 0 5px;
 line-height: var(--type-caption-line); }

/* ═══ 主区网格：左 K 线 ~68% + 右栏 ~32%（纯色块拼接，gap 0）═══ */
.view-trade-panel .tp-body-grid {
  display: grid;
  /* 用户 09-25 指令「交易挪到订单右侧」：三栏并排 = K线 | 订单簿 | 下单区
   * （原为 K线 68% + 右栏 32%，右栏内部订单簿/下单区上下堆叠）。
   * 右栏固定 460px → 订单簿 230 + 下单区 230，对齐 Minara 实测比例（K线 ~55%）。 */
  grid-template-columns: minmax(360px, 1fr) 460px;
  gap: 0;
  align-items: stretch;
  flex: 1 1 0;                           /* 零滚动链：吃满 wrap 剩余高（K 线吸收） */
  min-height: 0;
}
.view-trade-panel .tp-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.view-trade-panel .tp-right {
  min-width: 0;                          /* 宽度交由 grid 列控制（原 340px 会撑破三栏） */
  display: flex;
  flex-direction: row;                   /* column → row：订单簿左、下单区右 */
  border-left: 1px solid var(--tp-divider);   /* 白底区细线分隔 */
}

/* ═══ ④ K 线区（白底无卡片，直画）═══ */
.view-trade-panel .tp-chart {
  background: var(--tp-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 12px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;                           /* 零滚动链：吃满左列剩余高 */
  min-height: 0;
}
.view-trade-panel .tp-chart-tools { display: flex; align-items: center; gap: 8px; }
.view-trade-panel .tp-periods { display: flex; gap: 0; flex-wrap: wrap; }
.view-trade-panel .tp-period {
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 400;
  color: var(--tp-ink-3);
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .15s ease;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-period:hover { color: var(--tp-ink); }
.view-trade-panel .tp-period.active {
  color: var(--tp-ink);                  /* 选中黑粗，无底色 */
  font-weight: 500;
  transition: none;                      /* 选中瞬时（防过渡基线固化） */
}
.view-trade-panel .tp-ind-btn {          /* 指标按钮：白底灰边次按钮 */
  font-family: inherit;
  font-size: var(--type-caption-size);
  color: var(--tp-ink-2);
  background: var(--tp-bg);
  border: 1px solid var(--tp-btn-border);
  border-radius: 6px;
  height: 24px;
  padding: 0 12px;
  margin-left: auto;
  cursor: pointer;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-ind-btn:hover { color: var(--tp-ink); border-color: var(--tp-ink-3); }
.view-trade-panel .tp-ohlc {
  font-family: var(--tp-num);
  font-size: var(--type-caption-size);
  font-weight: 400;
  color: var(--tp-ink-3);
  white-space: normal;          /* TV 式两行：OHLC 主行 + MA 图例行 */
  
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-ohlc-main { display: inline-block; white-space: nowrap; }
.view-trade-panel .tp-ma-legend { display: block; }   /* 图例整体独占一行（TV 式指标行） */
.view-trade-panel .tp-ohlc-chg.up   { color: var(--tp-up); }
.view-trade-panel .tp-ohlc-chg.down { color: var(--tp-down); }
/* 原 clamp(520px, calc(100vh-430px), 780px) 固定高：是整页滚动 117px 的根因之一。
 * 零滚动链下改为 flex 吃满剩余（视口大 K 线大、视口小 K 线小，永不出滚动条）；
 * svg viewBox 由 ResizeObserver 按容器实测像素重绘（trade-panel.js observeChartResize）。 */
.view-trade-panel .tp-chart-svg { width: 100%; flex: 1 1 0; min-height: 320px; }
.view-trade-panel .tp-chart-empty {
  padding: 60px 0 70px;
  text-align: center;
  font-size: var(--type-caption-size);
  color: var(--tp-ink-3);
 line-height: var(--type-caption-line); }
/* SVG：白底直画；涨 #27a69a 青绿 / 跌 #f05351 */
.view-trade-panel .tp-kline-svg { display: block; height: 100%; width: 100%; }
.view-trade-panel .tp-grid { stroke: #f2f2f2; stroke-width: 1; vector-effect: non-scaling-stroke; }  /* 白底网格减淡（轴字第四轮配套） */
/* 轴文字（用户 09-25 反馈"又粗又小"）：10px 等宽 Menlo 在 macOS 小字号 hinting 下
 * 笔画偏重 → 换系统 sans + tabular-nums（Minara 同款观感）、字号 11.5px、
 * 字重显式 400、geometricPrecision 关闭 hinting 加粗 */
/* 轴文字（用户 09-25 第 6 轮反馈，红框标价格轴 + VOL：「还是有问题，主要是粗细」）
 * 两处根因：
 *  ① 字重 500 仍偏重 —— 用户说的"普通黑色字体"是 normal(400)，不是"1小时"选中态的 500；
 *  ② SVG <text> 不继承 body 的 -webkit-font-smoothing:antialiased → 走次像素渲染，
 *     同样字号同样字重下笔画明显比 HTML 文字粗（这就是"1小时好看、价格轴粗"的原因）。
 * 故：400 + 10.5px + 黑色 + 显式 antialiased。 */
.view-trade-panel .tp-axis {
  /* 2026-09-27 轴字第四轮（参考 TradingView 实测规格）：前几轮只调字重（500→400）
   * 治不了"粗"的根因 —— 颜色。近黑 #141416 在 10-11px 小字号下笔画糊作一团，
   * 视觉重量 ≈ 灰字的 2 倍（PIL 对比：我们轴字笔画 2.5 逻辑px/近黑 vs TV 参考
   * 1 逻辑px/中灰）。TradingView 浅色主题轴字 = #787b86 + 11px + 400，
   * 黑→中灰的减重效果远大于字重微调。 */
  fill: #787b86;                        /* TV 标准轴字灰 */
  stroke: none;                         /* 终极根因：styles.css L33 全局 `svg{stroke:currentColor;
                                           stroke-width:2}`（lucide 图标用）被 K 线 svg 继承 → 11px 轴字
                                           被 2px 近黑描边撑成实心块。前几轮字重/fill 调整全被描边
                                           盖住，必须显式中断继承。 */
  font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 400;
  font-family: var(--tp-num); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.view-trade-panel .tp-vol-label { font-size: var(--type-caption-size);  line-height: var(--type-caption-line); }   /* 同灰，略小一档 */
.view-trade-panel .tp-candle-up   { fill: var(--tp-candle-up);   stroke: var(--tp-candle-up); }
.view-trade-panel .tp-candle-down { fill: var(--tp-candle-down); stroke: var(--tp-candle-down); }

/* ═══ 专业度升级（参考 OKX/TV 终端，2026-09-27）：MA 均线 / 当前价格线 /
 *    右轴价格胶囊 / 时间轴竖网格。所有 SVG 元素显式声明 stroke/fill ——
 *    styles.css L33 全局 `svg{stroke:currentColor;stroke-width:2}` 会命中全部
 *    SVG 子元素（轴字描边事故同源），一律显式中断。 ═══ */
.view-trade-panel .tp-ma { fill: none; stroke-width: 1.2; }
.view-trade-panel .tp-ma.ma5  { stroke: #e8a511; }   /* 金黄（OKX MA5 口径） */
.view-trade-panel .tp-ma.ma10 { stroke: #1d7afc; }   /* 蓝（站点 --am-blue-9 系） */
.view-trade-panel .tp-ma.ma20 { stroke: #a855f7; }   /* 紫 */
.view-trade-panel .tp-vgrid { stroke: #f2f2f2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.view-trade-panel .tp-axis.tp-time { text-anchor: middle; }
.view-trade-panel .tp-last-line { stroke-width: 1; stroke-dasharray: 4 3; }
.view-trade-panel .tp-last-line.up   { stroke: var(--tp-candle-up); }
.view-trade-panel .tp-last-line.down { stroke: var(--tp-candle-down); }
.view-trade-panel .tp-last-tag rect { stroke: none; }
.view-trade-panel .tp-last-tag.up   rect { fill: var(--tp-candle-up); }
.view-trade-panel .tp-last-tag.down rect { fill: var(--tp-candle-down); }
.view-trade-panel .tp-last-tag text {
  fill: #fff; stroke: none;
  font: 500 10.5px/1 var(--tp-num);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}
/* OHLC 条内 MA 图例（OKX 口径：色点 + MA(n) + 实时值彩色） */
.view-trade-panel .tp-ma-leg { margin-left: 10px; white-space: nowrap; }
.view-trade-panel .tp-ma-leg .tp-ma-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 4px; vertical-align: 1px;
}
.view-trade-panel .tp-ma-dot.ma5  { background: #e8a511; }
.view-trade-panel .tp-ma-dot.ma10 { background: #1d7afc; }
.view-trade-panel .tp-ma-dot.ma20 { background: #a855f7; }
.view-trade-panel .tp-ma-leg b { font-weight: 500; }
.view-trade-panel .tp-ma-leg b.ma5  { color: #e8a511; }
.view-trade-panel .tp-ma-leg b.ma10 { color: #1d7afc; }
.view-trade-panel .tp-ma-leg b.ma20 { color: #a855f7; }
.view-trade-panel .tp-wick { stroke-width: 1; vector-effect: non-scaling-stroke; }
.view-trade-panel .tp-body { stroke-width: 0; }
.view-trade-panel .tp-vol  { stroke-width: 0; opacity: .5; }  /* .45→.5：白底上成交量柱更实（Minara 实拍为实色系） */

/* ═══ ⑤ 订单簿（#f7f7f7 面板直接嵌入：无边框无阴影无圆角；行 ~22px）═══ */
.view-trade-panel .tp-ob {
  background: var(--tp-panel);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 10px;
  flex: 1 1 0;                           /* 与下单区等分右栏（各 230px） */
  min-width: 0;
}
.view-trade-panel .tp-ob-head,
.view-trade-panel .tp-ob-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;    /* 价格 / 数量 / 总计 */
  align-items: center;
}
.view-trade-panel .tp-ob-head {
  font-size: var(--type-caption-size);
  color: var(--tp-ink-3);
  padding: 2px 6px 6px;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-ob-head span:nth-child(2),
.view-trade-panel .tp-ob-head span:nth-child(3) { text-align: right; }
.view-trade-panel .tp-ob-row {
  position: relative;
  height: 28px;                          /* 规格：Minara 实测 ~29px/行（22 档占 668px 高） */
  font-family: var(--tp-num);
  font-size: var(--type-caption-size);
  
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-ob-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;                               /* Minara 实测：价格带自右栏左边缘向右延伸（x1341 起） */
  z-index: 0;
}
.view-trade-panel .tp-ob-row.sell .tp-ob-bar { background: var(--tp-ask); }
.view-trade-panel .tp-ob-row.buy  .tp-ob-bar { background: var(--tp-bid); }
.view-trade-panel .tp-ob-row span { position: relative; z-index: 1; padding: 0 6px; }
.view-trade-panel .tp-ob-row:hover span { background: rgba(0,0,0,.03); }   /* 行 hover：专业终端标配（色带之上轻微加深） */
.view-trade-panel .tp-ob-qty,
.view-trade-panel .tp-ob-total { text-align: right; }
.view-trade-panel .tp-ob-row .tp-ob-qty,
.view-trade-panel .tp-ob-row .tp-ob-total { color: var(--tp-ink); white-space: nowrap; }
.view-trade-panel .tp-ob-row.sell .tp-ob-price { color: var(--tp-down); }  /* 卖红 */
.view-trade-panel .tp-ob-row.buy  .tp-ob-price { color: var(--tp-up); }    /* 买绿 */
.view-trade-panel .tp-ob-price { white-space: nowrap; }
.view-trade-panel .tp-ob-mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px;
  margin: 3px 0;
  border-top: 1px solid var(--tp-divider);
  border-bottom: 1px solid var(--tp-divider);
}
.view-trade-panel .tp-ob-mid-price {
  font-family: var(--tp-num);
  font-size: var(--type-body-size);
  font-weight: 500;
  color: var(--tp-ink);
 line-height: var(--type-body-line); }
.view-trade-panel .tp-ob-spread {
  font-size: var(--type-caption-size);
  color: var(--tp-ink-3);
  font-family: var(--tp-num);
 line-height: var(--type-caption-line); }

/* ═══ ⑥ 下单区（白底）═══ */
.view-trade-panel .tp-order {
  background: var(--tp-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;                           /* 与订单簿等分右栏 */
  min-width: 0;
  border-left: 1px solid var(--tp-divider);   /* 订单簿 | 下单区 细线分隔（用户指令：交易在订单右侧） */
}
.view-trade-panel .tp-size-row { display: flex; align-items: center; gap: 6px; }
.view-trade-panel .tp-size-label { font-size: var(--type-caption-size); color: var(--tp-ink-3); margin-right: auto;  line-height: var(--type-caption-line); }
.view-trade-panel .tp-size-btn {
  font-family: var(--tp-num);
  font-size: var(--type-caption-size);
  color: var(--tp-ink-2);
  background: var(--tp-bg);              /* 白底灰边次按钮 */
  border: 1px solid var(--tp-btn-border);
  border-radius: 6px;
  height: 24px;
  padding: 0 12px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-size-btn:hover { color: var(--tp-ink); }
.view-trade-panel .tp-size-btn.active {
  color: var(--tp-brand);                /* 选中高亮：R25 紫 */
  border-color: var(--tp-brand);
  font-weight: 500;
}

.view-trade-panel .tp-modes { display: flex; gap: 2px; flex-wrap: wrap; }
.view-trade-panel .tp-mode-btn {
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 400;
  color: var(--tp-ink-3);
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-mode-btn:hover { color: var(--tp-ink); }
.view-trade-panel .tp-mode-btn.active {
  color: var(--tp-ink);                  /* 选中黑粗，无底色无胶囊 */
  font-weight: 500;
}

.view-trade-panel .tp-ready {
  border-top: 1px solid var(--tp-divider);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.view-trade-panel .tp-ready-title {
  font-size: var(--type-body-size);
  font-weight: 500;
  color: var(--tp-ink);
 line-height: var(--type-body-line); }
.view-trade-panel .tp-ready-list { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.view-trade-panel .tp-rl-row { display: flex; justify-content: space-between; gap: 10px; }
.view-trade-panel .tp-rl-row dt { font-size: var(--type-caption-size); color: var(--tp-ink-3);  line-height: var(--type-caption-line); }
.view-trade-panel .tp-rl-row dd {
  margin: 0;
  font-family: var(--tp-num);
  font-size: var(--type-caption-size);
  color: var(--tp-ink-2);
  text-align: right;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-ready-actions { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.view-trade-panel .tp-launch {
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: 500;
  color: #ffffff;
  background: var(--tp-brand);           /* 启动：紫 #7c3aed 实底 */
  border: none;
  border-radius: 6px;                    /* 规格：实底按钮 28px/6-8px */
  height: 28px;
  cursor: pointer;
  transition: background .15s ease;
 line-height: var(--type-body-line); }
.view-trade-panel .tp-launch:hover { background: #6d28d9; }
.view-trade-panel .tp-transfer {
  font-family: inherit;
  font-size: var(--type-body-size);
  color: var(--tp-ink);
  background: var(--tp-bg);              /* 转账：白底灰边 ghost */
  border: 1px solid var(--tp-btn-border);
  border-radius: 6px;
  height: 28px;
  cursor: pointer;
  transition: border-color .15s ease;
 line-height: var(--type-body-line); }
.view-trade-panel .tp-transfer:hover { border-color: var(--tp-ink-3); }
.view-trade-panel .tp-disclaimer {
  margin: 0;
  font-size: var(--type-caption-size);
  color: var(--tp-ink-3);                /* 灰小字免责 */
 line-height: var(--type-caption-line); }

/* ═══ ⑦ 持仓表（白底 + #f0f0f0 细线行；六 Tab + 9 列）═══ */
.view-trade-panel .tp-positions {
  background: var(--tp-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--tp-divider);
  padding: 6px 0 10px;
  flex: 0 0 auto;                        /* 零滚动链：持仓表内容自然高，不参与压缩 */
}
.view-trade-panel .tp-pos-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.view-trade-panel .tp-pos-tabs { display: flex; gap: 0; flex-wrap: wrap; }
.view-trade-panel .tp-ptab2 {
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 400;
  color: var(--tp-ink-3);
  background: none;
  border: none;
  border-radius: 0;
  padding: 5px 12px;
  cursor: pointer;
  transition: color .15s ease;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-ptab2:hover { color: var(--tp-ink); }
.view-trade-panel .tp-ptab2.active {
  color: var(--tp-ink);                  /* 选中黑粗，无底色无胶囊 */
  font-weight: 500;
}
.view-trade-panel .tp-pos-toolbar { margin-left: auto; display: flex; gap: 8px; }
.view-trade-panel .tp-close-all,
.view-trade-panel .tp-tpsl {             /* 白底灰边小按钮 */
  font-family: inherit;
  font-size: var(--type-caption-size);
  color: var(--tp-ink-2);
  background: var(--tp-bg);
  border: 1px solid var(--tp-btn-border);
  border-radius: 6px;
  height: 24px;
  padding: 0 12px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-close-all:hover,
.view-trade-panel .tp-tpsl:hover { color: var(--tp-ink); border-color: var(--tp-ink-3); }

.view-trade-panel .tp-pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-caption-size);
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-pos-table th {
  text-align: right;
  font-weight: 500;
  font-size: var(--type-caption-size);
  color: var(--tp-ink-3);
  padding: 6px 10px;
  border-bottom: 1px solid var(--tp-divider);
  white-space: nowrap;
 line-height: var(--type-caption-line); }
.view-trade-panel .tp-pos-table th:first-child { text-align: left; }
.view-trade-panel .tp-pos-table td {
  padding: 4px 10px;                     /* 行高 24-28px 密度（5→4 紧凑） */
  border-bottom: 1px solid var(--tp-divider);
  color: var(--tp-ink);
  font-family: var(--tp-num);
  white-space: nowrap;
}
.view-trade-panel .tp-pos-table tbody tr:hover td { background: #f7f7f7; }  /* 行 hover */
.view-trade-panel .tp-pos-table tr:last-child td { border-bottom: none; }
.view-trade-panel .tp-pos-table .tp-sym { font-weight: 500; font-family: var(--am-font-family); }
.view-trade-panel .tp-pos-table .tp-num { text-align: right; }
.view-trade-panel .tp-pos-table .tp-pos-up   { color: var(--tp-up); }
.view-trade-panel .tp-pos-table .tp-pos-down { color: var(--tp-down); }
.view-trade-panel .tp-pos-table .tp-fee { color: var(--tp-ink-3); }
.view-trade-panel .tp-pos-table .tp-empty {
  text-align: center;
  color: var(--tp-ink-3);
  padding: 22px 10px;
  font-family: var(--am-font-family);
}
.view-trade-panel .tp-pos-soon { padding: 14px 10px; text-align: center; }
.view-trade-panel .tp-pos-soon-title {
  font-size: var(--type-body-size);
  font-weight: 500;
  color: var(--tp-ink);
  margin-bottom: 4px;
 line-height: var(--type-body-line); }
.view-trade-panel .tp-pos-soon-sub { font-size: var(--type-caption-size); color: var(--tp-ink-3);  line-height: var(--type-caption-line); }

/* ═══ 响应式（三栏并排为桌面终态；中等宽度收窄右栏，极窄才折行——用户指令）═══ */
@media (max-width: 1180px) {
  .view-trade-panel .tp-body-grid { grid-template-columns: minmax(320px, 1fr) 400px; }
}
@media (max-width: 640px) {
  .view-trade-panel .tp-body-grid { grid-template-columns: 1fr; }
  .view-trade-panel .tp-right {
    border-left: none; border-top: 1px solid var(--tp-divider);
    flex-direction: column;              /* 极窄回落：订单簿/下单区重新上下堆叠 */
  }
  .view-trade-panel .tp-order { border-left: none; border-top: 1px solid var(--tp-divider); }
  .view-trade-panel .tp-qh-metrics { margin-left: 0; }
}