/* ============================================================================
   BNtrade 图表终端 — 视觉重构覆盖层 v2 (2026-10-24)
   ----------------------------------------------------------------------------
   加载顺序关键：本文件必须排在 skin.css 之后（chart_refactor.html 已保证），
   否则 skin.css 在同一优先级上会赢。

   设计原则，每条都能对应到具体数值：
   1. 去装饰化 — body 删 3 段渐变光晕；panel 删 backdrop-filter 与重投影
   2. 收敛色彩 — 原 --accent #4db3ff(蓝) + --accent-2 #2bf0ff(青) 两个高饱和并存
                  新方案只留 1 个强调色，青色降为中性信息色
   3. 收紧圆角 — 原 --radius:16px 一刀切；改为 8/6/4 三级
   4. 提对比度 — 文字四级对 #0B0F15 实测 16.4 / 8.0 / 4.9，全部 ≥ WCAG AA
   5. 数字对齐 — 所有数值 tabular-nums
   ========================================================================= */

:root {
  --r-bg:      #0B0F15;
  --r-surface: #121821;
  --r-sunken:  #0A0E14;
  --r-raised:  #1A212C;

  --r-line-1: rgba(255,255,255,0.055);
  --r-line-2: rgba(255,255,255,0.10);
  --r-line-3: rgba(255,255,255,0.16);

  --r-text-1: #E6EBF2;
  --r-text-2: #9BA8BA;
  --r-text-3: #6F7C8F;

  --r-up:     #26C281;
  --r-down:   #F04B6A;
  --r-accent: #4C8DFF;

  --r-r-panel: 8px;
  --r-r-ctl:   6px;
  --r-r-tag:   4px;
  --r-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   1. 底色：单一纯色，删掉 gradient 光晕
   --------------------------------------------------------------------------- */
body {
  background: var(--r-bg) !important;
  background-image: none !important;
  color: var(--r-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* 面板：纯色 + 1px 描边，无模糊无重投影 */
.panel,
.chart-head,
.context-menu,
.quick-open-card,
.dw-panel,
.dw-fly,
.dw-float,
.dw-fav,
.dw-rail,
.fav-menu,
.smc-panel,
.mini-card,
.bn-drawer {
  background: var(--r-surface) !important;
  background-image: none !important;
  border: 1px solid var(--r-line-2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chart-head { border: none !important; border-bottom: 1px solid var(--r-line-1) !important; }

/* 浮层（菜单/抽屉/悬浮卡）保留极轻投影以表达"浮起"，一次性收到 2px/8px */
.context-menu,
.dw-panel,
.dw-fly,
.dw-float,
.dw-fav,
.fav-menu,
.bn-drawer,
.quick-open-card {
  box-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
  border-radius: var(--r-r-panel) !important;
}

/* 顶部导航条 .bn-nav 的 backdrop-filter 属于合理用法（内容滚动时保持可读），
   但把模糊半径从默认收到 8px，并压暗底色避免"雾面塑料感" */
.bn-nav {
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
}

/* ---------------------------------------------------------------------------
   2. 圆角：全部收紧到 8/6/4 三级
   --------------------------------------------------------------------------- */
.panel, .setting-card, .mini-card, .line-item, .preset-slot,
.row, .quote-row, .fav-menu, .fav-star-btn, .mini-btn, .context-menu,
.dw-panel, .dw-fly, .dw-float, .dw-fav, .smc-panel, .quick-open-card {
  border-radius: var(--r-r-ctl) !important;
}
.panel { border-radius: var(--r-r-panel) !important; }
.chip, .btn, .badge, .symbol-input, input, select, textarea {
  border-radius: var(--r-r-ctl) !important;
}
.chip.small, .chip.small.active { border-radius: var(--r-r-tag) !important; }
/* 药丸形只在"状态指示"上保留（countdown-pill），其余一律方形化 */
.countdown-pill { border-radius: var(--r-r-tag) !important; }

/* 第二轮：右栏/扫描面板里剩下的 10~12px 圆角 */
.mktscan-col, .streak-zone, .mktscan-panel, .streak-group,
.qo-field, .field, .line-list, .stack-panel, .cols-3 {
  border-radius: var(--r-r-ctl) !important;
}
/* 圆点（状态灯 / 散布点）保持 50% —— 那是形状语义，不是装饰 */
.bn-live, .smc-dot, .mktscan-dot, .streak-dot { border-radius: 50% !important; }

/* 第三轮：实测残留 10~12px 的容器 */
.mktscan-col, .streak-zone, [class*="mktscan"][class*="col"] {
  border-radius: var(--r-r-ctl) !important;
}

/* 星级图标原为 #5D708A (3.8:1), 提到 4.6:1 —— 它是可点击控件，不是装饰 */
.dw-star { color: #6E86A8 !important; }
.dw-star:hover { color: #D9A441 !important; }
.dw-star.on, .dw-star.is-fav, .fav-star-btn.on { color: #D9A441 !important; }

/* 工具栏激活小图标（.on）用的是深色文字压浅底，检查后若仍不可读则补 */
.dw-ico.on, .dw-tool.on {
  color: #FFFFFF !important;
  background: color-mix(in srgb, var(--r-accent) 70%, transparent) !important;
}

/* ---------------------------------------------------------------------------
   7. 统一"涨/跌"语义色 —— 原 chart.html 内联定义 #20d8a4 / #27dc8d / #ff6d8e
      与 tokens 的 --up #2BD98A 不一致，这里统一到 --r-up / --r-down
   --------------------------------------------------------------------------- */
[style*="color:#20d8a4"], [style*="color: #20d8a4"],
[style*="color:#27dc8d"], [style*="color: #27dc8d"] {
  color: var(--r-up) !important;
}

/* ---------------------------------------------------------------------------
   3. 控件
   ---------------------------------------------------------------------------
   ★ 踩坑记录（重要，别再犯）：
   下面这条 .btn 规则最初写成无差别的
       background: transparent !important; border: 1px solid ... !important;
       color: var(--r-text-2) !important;
   .btn 在 chart.html 里是一个"基类"，很多按钮靠**内联 style** 表达语义色
   （例如「突破挂单」按钮内联写了
       border-color:#d9a300; background:rgba(255,196,0,.14); color:#ffd166
   ）。CSS 的 !important 优先级高于内联样式，于是这些语义色被统统抹成
   灰底灰字 —— 表现就是「快速开仓面板里的突破挂单块底色变浅了」。
   结论：统一外观只能作用于"没有语义色"的按钮。
   用 :not([style*="..."]) 把带内联颜色的按钮排除掉，让语义色保留。
   --------------------------------------------------------------------------- */
.btn:not([style*="background"]):not([style*="color"]),
.chip:not([style*="background"]):not([style*="color"]) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--r-line-2) !important;
  color: var(--r-text-2) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
/* 圆角与过渡对所有按钮都生效（这两项不涉及语义，可以统一） */
.btn, .chip {
  border-radius: var(--r-r-ctl) !important;
  transition: background 120ms var(--r-ease), border-color 120ms var(--r-ease),
              color 120ms var(--r-ease) !important;
}
.btn:hover:not([style*="background"]), .chip:hover:not([style*="background"]),
.mini-btn:hover {
  background: var(--r-raised) !important;
  border-color: var(--r-line-3) !important;
  color: var(--r-text-1) !important;
}
/* ★ 同上一条的隐患：上面的 hover 规则特异性 0,3,0，会压住 .chip.active 的悬停表现。
   这里补一条：选中态悬停时背景不能被 hover 的 --r-raised 冲掉，
   否则鼠标划过选中项会"突然变灰"，看起来像取消选中了。 */
.chip.active:hover,
.chip:not([style*="background"]):not([style*="color"]).active:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--r-accent) 32%, transparent),
    color-mix(in srgb, var(--r-accent) 16%, transparent)) !important;
  border-color: color-mix(in srgb, var(--r-accent) 92%, transparent) !important;
  color: #FFFFFF !important;
}

/* 激活态：全页唯一允许出现强调色的位置
   ---------------------------------------------------------------------------
   ★ 这里踩过一个隐蔽的坑（老板反馈「这一排曾经是有发光的，选中的高亮怎么现在也是灰色不亮了」）：
     第 159 行那条去语义化规则写的是
       .chip:not([style*="background"]):not([style*="color"])
     它含两个 :not() 属性选择器，特异性 = 0,3,0；
     而原来这里写的是 .chip.active，特异性只有 0,2,0。
     两条都带 !important，同源同层下**特异性高的赢**，
     于是「激活态」被「普通态」覆盖，选中和未选中渲染成完全一样：
       背景 rgba(0,0,0,0) / 边框 rgba(255,255,255,.1) / 阴影 none / 字色 rgb(155,168,186)
     四个属性一模一样 —— 用户完全看不出当前在哪个周期。

   修法：把选择器也补成带 :not() 的双段式，特异性对齐到 0,3,0 后再靠**书写顺序**取胜
   （同特异性下后写的覆盖先写的）。同时恢复选中态的发光质感：
     内发光描边 + 轻微外发光 + 渐变底，替代原来的
       linear-gradient(180deg, rgba(32,108,183,.35), rgba(16,55,97,.5))
       + inset 0 0 0 1px rgba(77,179,255,.2)
   注意：这里恢复发光不违反前面「去发光」的原则 ——
   前面删的是面板/卡片那种大面积的装饰性泛光（20px 模糊、50px 扩散的阴影和径向渐变），
   而选中态是**唯一的当前状态指示**，必须靠亮度差撑起来，属于功能性高亮。 */
.chip:not([style*="background"]):not([style*="color"]).active,
.chip.active {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--r-accent) 26%, transparent),
      color-mix(in srgb, var(--r-accent) 12%, transparent)) !important;
  border-color: color-mix(in srgb, var(--r-accent) 78%, transparent) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  /* 内描边保证边框够实，外发光让它在深底上"立"起来 */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--r-accent) 42%, transparent),
    0 0 10px -2px color-mix(in srgb, var(--r-accent) 65%, transparent) !important;
}
/* 选中态的悬停不要变回普通态的灰边 */
.chip:not([style*="background"]):not([style*="color"]).active:hover,
.chip.active:hover {
  border-color: color-mix(in srgb, var(--r-accent) 92%, transparent) !important;
}

.mini-btn {
  background: transparent !important;
  border: 1px solid var(--r-line-2) !important;
  color: var(--r-text-2) !important;
  box-shadow: none !important;
}

/* 输入：凹陷靠底色，聚焦才出现强调色 */
.symbol-input, input, select, textarea {
  background: var(--r-sunken) !important;
  border: 1px solid var(--r-line-2) !important;
  color: var(--r-text-1) !important;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}
.symbol-input:focus, input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--r-accent) 60%, transparent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-accent) 14%, transparent) !important;
}

/* 徽标：去饱和，靠色值而非发光区分状态 */
.badge {
  background: transparent !important;
  border: 1px solid var(--r-line-2) !important;
  color: var(--r-text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 8px !important;
  box-shadow: none !important;
}
.badge.ok   { color: var(--r-up) !important;   border-color: color-mix(in srgb, var(--r-up) 40%, transparent) !important; }
.badge.warn { color: #D9A441 !important;       border-color: rgba(217,164,65,.38) !important; }
.badge.bad  { color: var(--r-down) !important; border-color: color-mix(in srgb, var(--r-down) 40%, transparent) !important; }

/* ---------------------------------------------------------------------------
   4. 数值排版 —— 专业感最直接的来源
   --------------------------------------------------------------------------- */
.meta, .name, .v, .val, .k, .line-item, .pos-metric, .streak-rows,
.setting-field, .qo-field, .mini-note, .badge, .chip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* 分组标题：小字 + 宽字距 + 低对比，靠"退后"建立层级 */
.setting-card > .head,
.stack-panel > .head,
.streak-grouph,
.streak-zonehead {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  color: var(--r-text-3) !important;
}

/* ---------------------------------------------------------------------------
   5. 图表区：更深底色，让 K 线浮起来
   --------------------------------------------------------------------------- */
#chart, .chart-wrap, .chart-area, #chartHost, #klineChart {
  background: var(--r-sunken) !important;
}

/* ---------------------------------------------------------------------------
   6. 导航条 Logo：原为 135° 蓝色渐变 + 发光，改为纯色块
   --------------------------------------------------------------------------- */
.bn-mark {
  background: var(--r-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
}
.bn-live {
  background: var(--r-up) !important;
  box-shadow: none !important;
}

/* ===========================================================================
   8. 图上右键下单 —— 实时价格读数（原底部说明卡，现移到图表抬头右上）
   ---------------------------------------------------------------------------
   为什么放这里：它不是"说明文字"，是"鼠标当前位置对应的可下单价格"，
   属于实时读数。放在离图表最近的地方（图表顶栏右上），视线不用下移就能看到。
   =========================================================================== */
.ctx-console {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 0;
  border: 1px solid var(--r-line-2);
  border-radius: var(--r-r-ctl);
  background: var(--r-sunken);
  white-space: nowrap;
  line-height: 1;
  /* 与左侧两个「K线更新 / 刷新延迟」徽标拉开，并让它成为这一行的视觉终点 */
  margin-left: 4px;
}

/* 左侧竖色条：用强调色标出"这里是可操作读数"，视觉上一眼定位 */
.ctx-console::before {
  content: '';
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--r-accent);
  opacity: 0.9;
  flex: none;
}

.ctx-console-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--r-text-3);
  text-transform: uppercase;
  cursor: help;
  padding-left: 2px;
}

/* 价格本体：等宽数字，字号比标签大一档，是这一小块里唯一抢眼的东西。
   ★ 曾经这里用的是 --r-text-3，与左侧标签同色，整块糊成一团；
     读数必须是本块最亮的元素。 */
.ctx-console .value {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--r-text-1);
  /* 固定宽度 + 等宽数字 = 价格跳动时不推挤左右元素 */
  min-width: 72px;
  text-align: right;
  line-height: 1.05;
}

/* ★ 这里曾经写成 .ctx-console .value:not([data-live]) 来弱化占位态。
   但 JS 只做 el('ctxPreviewPrice').textContent = ...，从不设置 data-live，
   于是 :not([data-live]) 永远命中 —— 真实价格也被压成 13px 灰色。
   这是「想当然假设 JS 会打属性」造成的 bug，已删除该规则。

   占位态本来显示 "--"（两个字符），在等宽 + min-width 下视觉上自然比 7 位价格轻得多，
   不需要额外的弱化规则。真实价格一律用上面的 text-1 白色粗体。 */

.ctx-console-hint {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--r-text-3);
  border: 1px solid var(--r-line-1);
  border-radius: var(--r-r-tag);
  padding: 2px 4px;
  flex: none;
  opacity: 0.75;
}

/* 图表抬头右侧：徽标与读数横向排一行，整体靠右，垂直居中 */
.chart-head-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* 取消占位的空底部栏 —— 用 hidden 属性即可，这里兜底防止 grid 仍分配高度 */
.chart-footer[hidden] {
  display: none !important;
  padding: 0 !important;
  border: none !important;
  min-height: 0 !important;
}

/* 窄屏：读数收窄，避免把标题挤掉 */
@media (max-width: 900px) {
  .chart-head-stats { flex-wrap: wrap; gap: 6px; }
  .ctx-console { padding: 5px 8px; gap: 6px; }
  .ctx-console-label { font-size: 10px; }
  .ctx-console .value { font-size: 13px; min-width: 54px; }
  .ctx-console-hint { display: none; }
}

/* ===========================================================================
   9. 侧栏信息架构：五个平级面板 → 三个语义层级
   ---------------------------------------------------------------------------
   分组依据是「用户此刻要回答的问题」，不是后端接口划分：
     01 正在观察   标的 / 周期 / 最新价       只读
     02 风险敞口   持仓 + 保护单 TP/SL        可选中、可拖拽
     03 待成交委托 图上挂单                   可撤销
     V1           独立开关模块，弱化排最后
   视觉手段：左侧 2px 色条 + 大号序号，一层只有一种颜色，
   替代原来 5 个重量相同的卡片标题（那让用户无从判断哪块更重要）。
   =========================================================================== */

.sidebar {
  /* 段与段之间 10px，段内子块 8px —— 用间距而不是边框来分组 */
  gap: 10px;
}

.ia-section {
  /* 去掉皮肤层给 panel 的通用内边距，改由子元素自己控制，便于色条贴边 */
  padding: 0 !important;
  border-radius: var(--r-r-panel) !important;
  overflow: hidden;
  position: relative;
  /* 层级色条：默认无，按 data-ia 赋值 */
  --ia-tone: var(--r-text-3);
}

/* 左侧色条：一层一色，宽度 2px，高度跟随整段 */
.ia-section::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--ia-tone);
  opacity: 0.55;
}

/* 每一层的主色：01 中性、02 强调蓝（唯一涉及钱的段）、03 偏黄（待办）、V1 灰 */
.ia-section[data-ia="context"]  { --ia-tone: var(--r-text-3); }
.ia-section[data-ia="exposure"] { --ia-tone: var(--r-accent); }
.ia-section[data-ia="orders"]   { --ia-tone: #C9A227; }
.ia-section[data-ia="strategy"] { --ia-tone: var(--r-text-3); }

/* 段标题：序号 + 标题同一基线，字号压到 11px 全大写，
   比原 h3 轻 —— 标题不该和数据抢注意力 */
.ia-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--r-line-1);
}

.ia-idx {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ia-tone);
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.ia-head h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--r-text-2);
  text-transform: uppercase;
}

/* 段内子块：持仓 / 保护单 */
.ia-sub {
  padding: 10px 12px 12px;
}

.ia-sub + .ia-sub {
  border-top: 1px solid var(--r-line-1);
}

.ia-sub-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-text-3);
}

.ia-foot {
  padding: 0 12px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--r-text-3);
}

/* 第一段（正在观察）里的 key-value 行。
   ★ 原 .row 自带 padding:8px 10px + 圆角 + 背景 + 描边，本身已经是一张小卡片；
     我先前在外面又套了一层 padding-left/right:12px，等于「panel 里套卡片再套卡片」，
     结果把 label 挤出可视区（截图里只剩右边三个值，左边标签全不见）。
     这里把 .row 放平：去掉自身卡片感和内边距，由父容器统一给 12px，
     行与行之间用细分割线而不是间距来分隔。 */
.ia-section[data-ia="context"] .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--r-line-1);
}
.ia-section[data-ia="context"] .row:first-of-type {
  border-top: none;
}
.ia-section[data-ia="context"] .row .label {
  flex: none;
  color: var(--r-text-3);
  font-size: 12px;
}
.ia-section[data-ia="context"] .row .val {
  color: var(--r-text-1);
  font-variant-numeric: tabular-nums;
}
/* 最新价那一行：价格与倒计时竖直排列，但仍靠右 */
.ia-section[data-ia="context"] .row.quote-row {
  align-items: center;
}
.ia-section[data-ia="context"] .row.quote-row .quote-val {
  justify-items: end;
}

/* V1 段弱化：色条降透明度，表示它不在主线上 */
.ia-section-aux { opacity: 0.82; }
.ia-section-aux::before { opacity: 0.28; }

/* 模式角标：紧跟在「保护单 TP/SL」标题后面，弱化成小字，
   只用来提示当前是独立分组还是混合持仓，不抢标题的主位。 */
.ia-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--r-line-2);
  border-radius: var(--r-r-tag);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--r-text-3);
  text-transform: none;
  vertical-align: 1px;
}
.ia-chip:empty { display: none; }

/* ★ 修「最新价」一行 label 与右侧数值的基线错位。
   右侧 .quote-val 是 display:grid（价格 + 倒计时两行），高度约 44px；
   左侧 .label 只有一行文字，align-items:center 会让它落在整个 44px 的垂直中点，
   视觉上比价格数字低一截。改用 align-items:flex-start + 给 label 补一个
   与价格首行等高的上内距，让两者的文字基线看起来在同一条线上。 */
.ia-section[data-ia="context"] .row.quote-row {
  align-items: flex-start;
}
.ia-section[data-ia="context"] .row.quote-row .label {
  padding-top: 3px;
}

/* ===========================================================================
   10. 行情卡（原「01 正在观察」）
   ---------------------------------------------------------------------------
   为什么原版简陋：它是一张 key-value 表，只回答「是什么」
   （交易对=ETHUSDT、周期=5m、最新价=2373.47），而交易者盯着这栏要回答的是
   「怎么样」——比开盘涨了还是跌了？在日内高低位哪一侧？量能是放大还是萎缩？
   三个静态标签给不出任何决策依据，所以看起来像后台管理的字段列表。

   重设计遵循「结论 → 证据 → 细节」的阅读顺序：
     1) 主视觉（结论）：大号价格 + 涨跌幅，整卡底色跟随涨跌
        —— 这是唯一需要 0.2 秒内看到的信息，所以给它最大的字号和唯一的有色底。
     2) 区间条（证据）：价格在当根高-低之间的位置
        —— 一根横条 + 一个点，用图形替代再写一遍 H/L 数字。
     3) 细节格（细节）：开/高/低/量，2x2 等宽对齐
        —— 到这里用户才开始读具体数字。
   色彩上只引入"涨绿跌红"一种语义色，其余保持中性，
   避免侧栏与图表抢注意力（图表才是主视觉区域）。
   =========================================================================== */

.ia-quote {
  padding: 0 !important;
  overflow: hidden;
  /* 涨跌色通过这个变量注入，JS 只改 --q-tone 一处 */
  --q-tone: var(--r-text-2);
  transition: background 200ms var(--r-ease);
}

/* 1) 标的行 */
.q-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 0;
}
.q-id {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.q-symbol {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--r-text-1);
}
/* 周期做成徽章，而不是另起一行 label —— 它和币种是同一个"我在看什么"的答案 */
.q-tf {
  padding: 1px 6px;
  border: 1px solid var(--r-line-2);
  border-radius: var(--r-r-tag);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--r-text-2);
  text-transform: uppercase;
}
/* 倒计时：K 线还有多久收线，是短线交易的节奏感来源，所以给它独立位置而非挤在价格旁 */
.q-countdown {
  font-size: 11px;
  font-weight: 700;
  color: var(--r-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* 2) 主视觉 */
.q-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px 2px;
}
.q-price {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--q-tone);
  font-variant-numeric: tabular-nums;
  /* 价格跳动时不改变布局宽度 */
  min-width: 0;
}
.q-change {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-tone);
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: var(--r-r-tag);
  background: color-mix(in srgb, var(--q-tone) 14%, transparent);
  white-space: nowrap;
}

/* 3) 区间位置条 */
.q-range { padding: 10px 12px 4px; }
.q-range-track {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--r-line-1);
  overflow: visible;
}
.q-range-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 2px;
  background: var(--q-tone);
  opacity: 0.45;
  transition: width 260ms var(--r-ease);
}
/* 当前价在白条上的位置点：比填充更亮更实，一眼定位 */
.q-range-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--q-tone);
  box-shadow: 0 0 0 2px var(--r-panel, #121821);
  transition: left 260ms var(--r-ease);
}
.q-range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10px;
  color: var(--r-text-3);
  font-variant-numeric: tabular-nums;
}

/* 4) 细节格 2x2 */
.q-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 6px;
  background: var(--r-line-1);
  border-top: 1px solid var(--r-line-1);
}
.q-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  background: var(--r-panel, #121821);
}
.q-k {
  font-size: 10px;
  color: var(--r-text-3);
  flex: none;
}
.q-v {
  font-size: 11px;
  font-weight: 600;
  color: var(--r-text-2);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 涨跌状态：JS 只切这一个 class，配色全在 CSS 里 */
.ia-quote.is-up   { --q-tone: var(--r-up); }
.ia-quote.is-down { --q-tone: var(--r-down); }
/* 涨跌时给整卡一层极淡的底色，作为「余光可见」的方向提示，
   透明度压到 4% 以内，保证不影响文字对比度 */
.ia-quote.is-up   { background: linear-gradient(180deg, color-mix(in srgb, var(--r-up) 5%, transparent), transparent 60%) !important; }
.ia-quote.is-down { background: linear-gradient(180deg, color-mix(in srgb, var(--r-down) 5%, transparent), transparent 60%) !important; }

/* --- 行情卡第二轮：大字号降饱和 ---
   实测发现 26px 粗体价格用满饱和的 --r-down #F04B6A 时，在深色底上像一块发光的警示，
   抢走了图表该有的注意力。原因不是对比度不够（5.02:1 完全合规），
   而是「同一颜色在大字号上的视觉重量是 12px 标签的数倍」——
   字号越大，越应该降饱和，否则会显得廉价刺眼。
   这个思路来自 Radix Colors 的「大文本用 11 号槽而非 12 号槽」做法。

   因此这里只在「大字号」场景把涨跌色降一档饱和度，小字号的
   涨跌幅徽章、区间条仍用原色，保证它在小面积上依然清晰。
   同时把整卡底色提示从 5% 降到 3%，且只在幅度显著时才出现（由 JS 加 class 控制）。 */
.ia-quote.is-up .q-price   { color: #3DD69B; }   /* 原 --r-up #26C281 提亮一档饱和度更低 */
.ia-quote.is-down .q-price { color: #E5657C; }   /* 原 --r-down #F04B6A 降饱和一档 */

/* 卡底方向提示：只有幅度 >= 0.1% 才铺色，避免 -0.03% 这种噪音也染红整卡 */
.ia-quote.is-up   { background: linear-gradient(180deg, color-mix(in srgb, var(--r-up) 3%, transparent), transparent 55%) !important; }
.ia-quote.is-down { background: linear-gradient(180deg, color-mix(in srgb, var(--r-down) 3%, transparent), transparent 55%) !important; }

/* 区间条下沿：低 / 振幅 / 高 三段式。
   原来只有 低和 高两个端点，中间是空的；补上振幅后，
   「价格贴在哪一侧」和「这段区间有多宽」可以同时读到。 */
.q-range-amp {
  color: var(--r-text-3);
  opacity: 0.85;
}

/* 幅度 <0.1% 时（噪音级波动）去掉卡底方向色，只保留价格数字的方向着色。
   理由：-0.03% 的贴水也整卡染红，会让「有变化」这个信号失效 ——
   用户会习惯性忽略它，等真的有 2% 波动时反而注意不到。 */
.ia-quote.is-flat-tone {
  background: var(--r-panel, #121821) !important;
}

/* ===========================================================================
   11. 空状态收缩（让布局跟着信息量走）
   ---------------------------------------------------------------------------
   实测出来的问题：侧栏四段高度是 171 / 271 / 153 / 330px，
   而 02 风险敞口和 03 待成交当时**完全为空**，V1 策略表单最不常用却最高。
   也就是「没内容的比有内容的占地方大 1.6 倍」—— 这是"简陋"的量化定义：
   不是元素少，而是布局权重和信息价值脱钩了。

   策略：空状态压成一两行，多出来的空间还给真正有内容的段。
   做法不碰 JS —— 用 :has() 检测容器里是否存在 .line-item / .pos-card，
   没有真实条目时自动收缩。JS 一旦渲染出真实持仓/挂单，:has() 立即失效，
   卡片自然恢复原高度，不需要任何额外状态变量。
   =========================================================================== */

/* --- 02 风险敞口：空态收缩 --- */
/* 两个子块都空时，整段压扁：去掉分隔线和大内边距 */
.ia-section[data-ia="exposure"] .ia-sub:not(:has(.pos-card)):not(:has(.line-item)) {
  padding-top: 2px;
  padding-bottom: 2px;
}
/* 空态的提示文案原来是两行大卡片，收成一行小字 */
.ia-section[data-ia="exposure"] .ia-sub:not(:has(.pos-card)) .line-item,
.ia-section[data-ia="exposure"] .ia-sub:not(:has(.pos-card)) .line-list {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
}
.ia-section[data-ia="exposure"] .ia-sub:not(:has(.pos-card)) .line-item .head {
  padding: 0;
}
.ia-section[data-ia="exposure"] .ia-sub:not(:has(.pos-card)) .line-item .name {
  font-size: 11px;
  color: var(--r-text-3);
  font-weight: 600;
}
/* 功能说明类文案（"解锁API后会显示..."）在空态下直接隐藏 ——
   它讲的是将来能做什么，不是现在是什么；空态只需要一句结论。 */
.ia-section[data-ia="exposure"] .ia-sub:not(:has(.pos-card)) .line-item .meta {
  display: none;
}

/* --- 03 待成交委托：同样收缩 ---
   注意实际类名：#pendingOrderList.line-list 装条目，.ia-foot 装功能说明。
   （第一版我凭印象写了 .orders-body / .hint，两个都和 markup 对不上，已改正。） */
.ia-section[data-ia="orders"]:not(:has(.line-item)):not(:has(.pos-card)) .ia-foot {
  padding-top: 4px;
  font-size: 11px;
  color: var(--r-text-3);
  line-height: 1.5;
}

/* --- V1 策略：最不常用，视觉重量压到最低 ---
   原来它有 6 个下拉 + 3 个输入 + 1 按钮，是整栏最重的一块，
   但它是"开启 V1 指标后才用"的附属模块。把内边距和控件高度收紧。 */
.ia-section-aux .ia-head {
  padding-bottom: 4px;
}
.ia-section-aux h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--r-text-3);
}
/* 表单控件整体收紧一档 */
.ia-section-aux select,
.ia-section-aux input {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-size: 11px !important;
}

/* ===========================================================================
   12. 买卖方向配色（用户明确要求：买统一色 / 卖统一色）
   ---------------------------------------------------------------------------
   背景：原来订单标题按**来源**上色 —— 蓝(终端保护单)/黄(守护挂)/绿(分批)/灰(外部)，
   而旁边的徽章按**持仓方向**上色。于是「BUY 保护止损」是蓝的、徽章是红的，
   同一张卡上买入动作和空头方向各说各话。
   用户要的是交易界面最基础的约定：绿色=买、红色=卖，一眼分清动作方向。

   现在的分工：
     · 颜色通道 → 只表达买卖（.is-buy 绿 / .is-sell 红）
     · 符号通道 → 表达来源（⊕终端 / ⚡守护 / ⋯分批 / ⊗外部），不占颜色
     · 徽章通道 → 保留原来的 LONG 绿 / SHORT 红（用户确认「挺好的，还能区分多空单」）
   三条通道互不干扰，任何一条失效另外两条仍然可读。
   =========================================================================== */

/* 买卖文字色：复用 tokens 里唯一的涨跌语义色，全站只有这一个绿/红来源 */
.line-item .name.is-buy  { color: var(--r-up) !important; }
.line-item .name.is-sell { color: var(--r-down) !important; }

/* 来源符号：小一号、等宽、半透明 ——
   它是次要信息，不能和买卖文字同权重抢注意力。
   font-family 用等宽保证 ⊕⚡⋯⊗ 四个字符宽度一致，标题不会因为符号变化而抖动。 */
.line-item .name .src-mark {
  display: inline-block;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.55;
  margin-right: 1px;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------------------
   13. 挂单卡片的数据行：三列定宽对齐
   ---------------------------------------------------------------------------
   用户要求「废话太多了，只需要有精确价格、数量、名义价值即可」。
   去掉标签词之后，靠**列位置**来区分字段：
     左列 = 价格（突破单是「触发/限价」两价）；右列 = 名义价值(USDT)；
     数量跟在价格后面用 middot 分隔。
   这样三张单上下并排时，价格和名义价值各自成一列，可以竖着直接比较，
   比「价格 xxx · 剩余 xxx · 名义 xxx」的三段文字流读得快得多。

   用 tabular-nums + 右对齐，保证小数点对齐 —— 这是金融表格的基本要求：
   小数点不对齐的数字列，扫视时需要逐位找小数点，眼睛很累。
   --------------------------------------------------------------------------- */
.line-item .meta .po-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* 数据行整体：两端对齐，名义价值靠右成一列 */
.ia-section[data-ia="orders"] .line-item .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.ia-section[data-ia="orders"] .line-item .meta .po-num:last-child {
  flex: none;
  color: var(--r-text-2);
}

/* ---------------------------------------------------------------------------
   14. 挂单卡片单行化
   ---------------------------------------------------------------------------
   去掉说明文字后，一张挂单其实只有 4 件事：
     [买卖动作] [方向徽章]
     [价格 · 数量]            [名义价值]
                            [撤销]
   上面截图里每条仍占 99px，中间有一大片空 —— 因为 .actions 是块级，
   独占一行后又加了 margin。把「撤销」并用绝对定位钉到右侧、数据行让位，
   每条降到 ~60px，一屏能多看 2~3 单。

   注意：不动 DOM 结构（.actions 还在原位置），只改布局，
   避免影响 data-pending-action="cancel" 的点击事件绑定。
   --------------------------------------------------------------------------- */
.ia-section[data-ia="orders"] .line-item {
  /* 卡片改成两行两列网格：
       行1: [标题+符号]        [方向徽章]
       行2: [价格 · 数量]      [名义]  [撤销]
     用 grid 而不是 flex/absolute —— 前三版分别栽在
       ① padding 挤掉 label（b8 教训）
       ② absolute bottom 钉到徽章行、和 SHORT 文字重叠（线上复现）
       ③ 撤销按钮 static 后独占一行、跑到左边
     grid 用 grid-template-areas 显式声明每个格子的位置，
     哪个元素在哪一格一眼可读，不依赖 margin/padding 凑。 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head   head   head"
    "data   data   act";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 7px 12px;
  position: static;
}
.ia-section[data-ia="orders"] .line-item .head {
  grid-area: head;
  min-width: 0;
}
.ia-section[data-ia="orders"] .line-item .meta {
  grid-area: data;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 0;
}
.ia-section[data-ia="orders"] .line-item .actions {
  grid-area: act;
  position: static;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.ia-section[data-ia="orders"] .line-item .meta .po-num:last-child {
  position: static;
  min-width: 56px;
  text-align: right;
  flex: none;
  color: var(--r-text-2);
}
/* 撤销按钮收窄 —— 破坏性操作，不需要大按钮抢注意力 */
.ia-section[data-ia="orders"] .line-item .actions .mini-btn {
  padding: 2px 8px;
  font-size: 11px;
}