/* MY-Tradeview — 视觉规格逐项对齐 cn.tradingview.com
 * 取证方式：真实 TV 截图（1920×1246，实为 1512×982 CSS 放大 1.2698 倍）
 * 换算后 CSS 尺寸：顶栏38 / 左工具条52 / 右图标条46 / 自选面板300 / 底栏38 / 列表行30
 * 配色实测：面板与工具栏 #0f0f0f · 图表 #131722 · 分隔线 #2a2a2a · 网格 #1e222d
 *           次要文字 #b2b5be / #8c8c8c · 涨 #26a69a · 跌 #ef5350 · 蓝 #2962ff
 */
:root {
  --tv-panel: #0f0f0f;
  --tv-chart: #131722;
  --tv-border: #2a2a2a;
  --tv-line: #2d2d2d;
  --tv-grid: #1e222d;
  --tv-text: #d1d4dc;
  --tv-text2: #b2b5be;
  --tv-dim: #8c8c8c;
  --tv-axistext: #8b8f9b;
  --tv-up: #26a69a;
  --tv-down: #ef5350;
  /* 图表绿：蜡烛 / 萬如圆点 / 图例开高低收 共用这一个绿（用户要求三者一致） */
  --c-up: #4caf50;
  --c-down: #ef5350;
  --tv-blue: #2962ff;
  --tv-yellow: #f5b942;
  --tb-h: 38px;
  --rail-l: 52px;
  --rail-r: 46px;
  --wl-w: 320px;
  --rb-h: 38px;
  --row-h: 30px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--tv-panel); color: var(--tv-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', 'Segoe UI', Roboto,
    'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 13px; user-select: none; -webkit-font-smoothing: antialiased;
}
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.hidden { display: none !important; }
/* TV 的展开箭头一律是细描边 V 形（非实心三角） */
.caret {
  font-size: 0; width: 5.5px; height: 5.5px; display: inline-block; flex-shrink: 0;
  border-right: 1.3px solid #b2b5be; border-bottom: 1.3px solid #b2b5be;
  transform: rotate(45deg); margin-left: 5px; position: relative; top: -1.5px;
}

#app { display: flex; flex-direction: column; height: 100vh; }
#main { display: flex; flex: 1; min-height: 0; }
#center { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ===== 顶部工具栏（38px） ===== */
#topbar {
  position: relative;
  height: var(--tb-h); background: var(--tv-panel); border-bottom: 1px solid var(--tv-border);
  display: flex; align-items: center; padding: 0 4px 0 13px; gap: 2px; flex-shrink: 0;
}
.tb-group { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.tb-center { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tb-center::-webkit-scrollbar { display: none; }
.tb-right { gap: 3px; margin-left: auto; }

.tb-icon {
  width: 30px; height: 30px; border-radius: 4px; color: var(--tv-text);
  display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
}
.tb-icon:hover { background: rgba(255,255,255,.08); }
.tb-icon svg { pointer-events: none; width: 21px; height: 21px; }
.tb-icon.tb-hide { display: none !important; }
.tb-icon .star-off { fill: none; }
#btnStar.active svg { fill: var(--tv-yellow); stroke: var(--tv-yellow); }
.fx { font-size: 12px; font-weight: 600; font-style: italic; letter-spacing: -.5px; }

/* TV 顶栏品种胶囊：外层圆角胶囊 + 币种圆标 */
.tb-symbol {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px;
  border-radius: 15px; background: #3d3d3d; white-space: nowrap;
}
.tb-symbol:hover { background: #4a4a4a; }
.tb-symbol b { font-weight: 700; font-size: 14px; }
.tb-badge {
  width: 22px; height: 22px; border-radius: 50%;
  background: #2a2e39; color: #e6e8ef;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tb-badge svg { width: 13px; height: 13px; stroke-width: 1.6; }
.tb-plus {
  width: 30px; height: 30px; margin-left: 8px; border-radius: 50%; border: 1px solid #565b68;
  color: var(--tv-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tb-plus:hover { background: rgba(255,255,255,.08); }
.tb-plus svg { width: 15px; height: 15px; }
/* 顶栏「永续 / 现货」切换胶囊：当前品种的市场，点击切换 */
.tb-mkt {
  display: flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; margin-left: 6px;
  border-radius: 12px; border: 1px solid #3d4250; background: rgba(41,98,255,.14);
  color: #7aa2ff; font-size: 11.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.tb-mkt:hover { background: rgba(41,98,255,.26); color: #a8c2ff; }
.tb-mkt.spot { background: rgba(38,166,154,.16); border-color: #2e5f5a; color: #4fd1c5; }
.tb-mkt.spot:hover { background: rgba(38,166,154,.28); color: #7ee6dc; }
.tb-mkt .caret { font-style: normal; font-size: 8px; opacity: .8; }
/* 外汇/贵金属：身份胶囊（commodity cfd · FOREXCOM），不可切换，故去掉可点暗示 */
.tb-mkt.fx { cursor: default; background: rgba(217,164,65,.14); border-color: #5c4a22; color: #d9a441; }
.tb-mkt.fx:hover { background: rgba(217,164,65,.14); color: #d9a441; }
.tb-mkt.fx .caret { display: none; }
.tb-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #1c9c72; color: #fff;
  margin-right: 5px;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.tb-avatar i {
  position: absolute; top: -6px; right: -4px; background: #ef5350; color: #fff;
  font-size: 10px; font-style: normal; font-weight: 700; padding: 0 4px; border-radius: 9px; line-height: 15px; min-width: 15px; text-align: center;
}

.tb-search {
  position: absolute; right: 10px; top: 40px; width: 240px; z-index: 130;
  background: #1b1f2a; border: 1px solid var(--tv-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.7); padding: 6px;
}
.tb-search input {
  background: #16191f; border: 1px solid var(--tv-border); border-radius: 4px;
  color: var(--tv-text); padding: 6px 9px; width: 100%; font: inherit; outline: none;
}
.tb-search input:focus { border-color: var(--tv-blue); }
#searchResults {
  position: absolute; top: 100%; left: 0; right: 0; max-height: 300px; overflow-y: auto;
  background: #1b1f2a; border: 1px solid var(--tv-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.7); margin-top: 4px;
}
.sr-item { display: flex; justify-content: space-between; padding: 7px 11px; cursor: pointer; }
.sr-item:hover { background: rgba(255,255,255,.06); }

#timeframes { display: flex; align-items: center; }
#timeframes button {
  height: 30px; padding: 0 5px; border-radius: 5px; color: var(--tv-text); white-space: nowrap;
  font-size: 13px; display: inline-flex; align-items: center;
}
#timeframes button:hover { background: rgba(255,255,255,.08); }
#timeframes button.active { background: #3d3d3d; color: #fff; font-weight: 500; }

.tb-sep { width: 1px; height: 24px; background: var(--tv-border); margin: 0 6px; flex-shrink: 0; }

.tb-layout { padding: 4px 6px; border-radius: 4px; color: var(--tv-text); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tb-layout:hover { background: rgba(255,255,255,.08); }
/* 周期列表末尾的「更多周期」小箭头（TV：12月 右侧的 ▾） */
.tb-more { width: 22px; }
.tb-more .caret { margin: 0; }
/* TV：K线式样按钮无底色（普通图标按钮） */
#chartTypeBtn { width: 28px; height: 30px; background: none; border-radius: 5px; }
#chartTypeBtn:hover { background: rgba(255,255,255,.08); }
/* TV：指标按钮常驻 #2e2e2e 高亮方块（实测 40×33，圆角 3px），展开箭头在方块外侧 */
#btnIndicators { width: 40px; height: 33px; background: #2e2e2e; border-radius: 3px; }
#btnIndicators:hover { background: #363636; }
.tb-group > .caret { margin-left: 6px; margin-right: 8px; }
.menu-sep { height: 1px; background: var(--tv-border); margin: 5px 0; }
.menu-act { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.menu-act:hover { background: rgba(255,255,255,.08); }
.menu-act svg { width: 15px; height: 15px; }
.tb-btn { height: 30px; padding: 0 16px; border-radius: 15px; font-weight: 600; white-space: nowrap; font-size: 13px; display: flex; align-items: center; }
.tb-btn.trade { border: 1px solid #3a3d47; color: #e6e8ef; }
.tb-btn.trade:hover { background: rgba(255,255,255,.08); }
.tb-btn.upgrade { background: #e9eaee; color: #131722; }
.tb-btn.upgrade:hover { background: #fff; }

/* 窄窗口渐进收起右组次要图标：优先保住「指标」「多图表布局」与 交易/升级 完整可见 */
@media (max-width: 1480px) { #btnTree { display: none; } }
@media (max-width: 1400px) { #btnUndo, #btnRedo { display: none; } }
@media (max-width: 1330px) { #btnLayout { display: none; } }
@media (max-width: 1240px) { #btnIdea { display: none; } }

.menu {
  position: absolute; top: 31px; left: 0; min-width: 150px; z-index: 100;
  background: #1b1f2a; border: 1px solid var(--tv-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.7); padding: 4px 0;
}
.menu div, .menu label { display: flex; align-items: center; gap: 9px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.menu div:hover, .menu label:hover { background: rgba(255,255,255,.07); }
.menu .mi { width: 15px; height: 15px; }
.menu input { accent-color: var(--tv-blue); }

/* 顶栏下拉菜单：移出 tb-center 后用 fixed 定位，避开顶栏 overflow 裁剪 */
#tfMenu, #typeMenu, #indMenu { position: fixed; z-index: 350; top: auto; left: auto; }

/* ===== 左/右工具条 ===== */
#drawbar, #rightbar {
  background: var(--tv-chart); display: flex; flex-direction: column;
  align-items: center; padding: 4px 0; gap: 2px; flex-shrink: 0;
}
#drawbar { padding-top: 9px; }
#rightbar { padding-top: 8px; }
#drawbar { width: var(--rail-l); border-right: 1px solid var(--tv-border); }
#rightbar { width: var(--rail-r); border-left: 1px solid var(--tv-border); }
#drawbar button, #rightbar button {
  width: 36px; height: 36px; border-radius: 6px; color: #c9ccd6;
  display: flex; align-items: center; justify-content: center; position: relative;
}
#rightbar button { width: 42px; height: 42px; }
#drawbar button:hover, #rightbar button:hover { background: rgba(255,255,255,.08); color: #fff; }
#drawbar button.on, #rightbar button.on { color: #fff; background: #3d3d3d; }
#drawbar button[data-toggle].on { background: none; color: #c9ccd6; }
#drawbar button[data-toggle].on:hover { background: rgba(255,255,255,.08); color: #fff; }
#drawbar button svg { width: 27px; height: 27px; stroke-width: 1.2; }
#rightbar button svg { width: 27px; height: 27px; stroke-width: 1.2; }
/* TV 实测：分组分隔线 36px 宽 · #434343 */
.db-sep { width: 36px; height: 1px; background: #434343; margin: 5px 0; flex-shrink: 0; }
#rightbar .db-sep { width: 34px; margin: 6px 0; }

/* ===== 工具栏名称气泡（TV：鼠标移到左侧工具上会浮出该工具名称） ===== */
/* 用 absolute（页面不滚动，坐标与 fixed 等价）：headless 截图下 fixed 层偶发不绘制 */
.rail-tip {
  position: absolute; z-index: 3000; pointer-events: none; display: none;
  padding: 5px 9px; border-radius: 5px;
  background: #2a2e39; color: #e6e8ee;
  border: 1px solid #3a3f4b;
  box-shadow: 0 3px 12px rgba(0,0,0,.55);
  font-size: 12px; line-height: 1.35; white-space: nowrap;
}
.rail-tip.show { display: block; }
/* 右栏底部浮动圆钮（TV：市场雷达 / 通知 / 更多） */
.rb-bottom {
  margin-top: auto; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 4px 0 14px;
}
#rightbar #rbCalendar { margin-bottom: 6px; }
/* TV 实测：右栏底部图标 27px，白色圆钮 34px（市场雷达 40px） */
#rightbar .rb-bottom button svg { width: 27px; height: 27px; }
#rightbar .rb-bottom .rb-round svg { width: 23px; height: 23px; }
#rightbar #rbRadar { width: 40px; height: 40px; }
/* TV 实测：白色圆钮直径 34px（非 42px） */
#rightbar .rb-round {
  width: 34px; height: 34px; border-radius: 50%; background: #2a2e39; color: #d1d4dc;
}
#rightbar .rb-round:hover, #rightbar .rb-round.on { background: #363a45; color: #fff; }
#rightbar .rb-round.light, #rightbar .rb-round.light:hover { background: #fff; color: #131722; }
/* TV 实测：市场雷达为浅灰圆底 #cfcfcf，其余圆钮为白 */
#rightbar #rbRadar, #rightbar #rbRadar:hover { background: #cfcfcf; }
#rightbar .rb-round svg { width: 21px; height: 21px; }
#rightbar .rb-quest {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #4c4f58; color: #b2b5be;
}
#rightbar .rb-quest svg { width: 17px; height: 17px; }
.rb-badge {
  position: absolute; top: -1px; right: -1px; min-width: 15px; height: 15px; padding: 0 4px;
  background: #ef5350; color: #fff; font-size: 9px; font-weight: 700; line-height: 15px;
  border-radius: 8px; text-align: center; font-style: normal; pointer-events: none;
}

/* ===== 图表区 ===== */
/* 图表面板底色 = 纵向渐变（实测原版：顶部 rgb(25,27,39) → 底部 rgb(14,17,24)）。
   图表库画布已设为透明，此渐变即为真正的图表底色，自绘蜡烛/色带叠在其上。 */
#chartwrap { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--tv-chart); }
#chartMain, #chartMacd, #chartInd2 { background: linear-gradient(180deg, rgb(25,27,39) 0%, rgb(14,17,24) 100%); }
#chartMain { flex: 1 1 100%; position: relative; min-height: 0; }
#chartMacd, #chartInd2 { flex: 0 0 29%; position: relative; min-height: 84px; border-top: 1px dashed #4a4c56; }
#chartMain > div:not(#lastMarker), #chartMacd > div, #chartInd2 > div { position: absolute; inset: 0; }

/* 图表合规声明已改为「左下角品牌标右侧」一行（见 #brand .brand-disc）。
   2026-10-24：用户要求只在那一处显示，原先每个窗格右下角的三份 .chart-disc 全部移除。 */


/* 副图分隔条：浮在副图上边沿的 9px 命中带（同 TV，可上下拖动改高度）
   z-index 高于 #drawCanvas(12) 与 .overlay(20)，低于菜单(100+)，画线工具激活时也能拖 */
.pane-split {
  position: absolute; left: 0; right: 0; height: 9px; z-index: 26;
  cursor: row-resize; background: transparent; touch-action: none;
}
.pane-split::after {
  content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: transparent; transition: background .12s, box-shadow .12s;
}
.pane-split:hover::after { background: #8a91a3; height: 2px; }
.pane-split.dragging::after { background: #b2b5be; height: 2px; box-shadow: 0 0 0 1px rgba(178,181,190,.25); }
.pane-split.dragging { background: rgba(120,123,134,.12); }
.pane-split.hidden { display: none; }
/* 拖动分隔条时锁住整页光标，避免掠过图表变成十字/抓手 */
#chartwrap.resizing, #chartwrap.resizing * { cursor: row-resize !important; }

.overlay { position: absolute; z-index: 20; pointer-events: none; }

/* 左上角图例：TV 为「名称 + 周期 + 交易所 + 状态图标 + 开高低收」同一行，其下为指标行、买卖价片行。
   right 由 syncBrandMark() 按「价格轴宽度 + 品牌标宽度」动态给，给右上角「萬如量化」让位 —— 
   否则长名称（Bitcoin / TetherUS PERPETUAL CONTRACT）会把开高低收顶到标志底下。 */
#legend { top: 7px; left: 8px; right: 110px; max-width: none; }
/* 常驻浮动绘图工具栏停在图表顶部时，图例整体下移，避免被压住（同 TV） */
#chartwrap.fb-top #legend { top: calc(var(--fb-h, 34px) + 12px); }
/* TV：名称/周期/交易所/图标/开高低收始终同一行——窗口窄时开高低收直接被右边界截断，不换行 */
.lg-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; row-gap: 2px; }
.lg-coin {
  width: 20px; height: 20px; border-radius: 50%; background: #f7931a; color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* TV 实测：图例名称行字号明显大于开高低收行（cap 12px vs 10px，约 1.2 倍） */
/* 名称让位优先级最低：空间不够时先省略名称（完整名称顶栏和右侧面板都有），
   绝不能让开高低收被裁 —— 此前 .lg-name 不收缩、.lg-ohlc 可收缩，导致「收=xxx」被品牌标盖住。 */
.lg-name {
  font-size: 15.5px; color: var(--tv-text); white-space: nowrap;
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
}
.lg-time { font-size: 15.5px; color: var(--tv-text); white-space: nowrap; }
/* 外汇历史源滞后：图例上标「数据截至 MM-DD」，用琥珀色提示这是数据现状而非 bug */
.lg-time.gap { color: #d9a441; }
.lg-flag {
  width: 12px; height: 15px; background: var(--tv-down); flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}
/* TV 实测：名称行右侧是「主图 + 萬如指标」两格胶囊——左格暗绿底+绿色圆点，
   右格暗洋红底+洋红波浪线；关掉萬如指标时只剩左格 */
.lg-pill {
  display: flex; align-items: stretch; height: 16px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0;
}
.lg-pill i { display: flex; align-items: center; justify-content: center; width: 20px; height: 16px; }
.lg-pill i.dot { background: var(--lg-dot-bg, rgba(38,166,154,.22)); border-radius: 8px 0 0 8px; }
.lg-pill i.dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--lg-dot, #26a69a); display: block; }
.lg-pill i.sq { background: rgba(214,32,102,.22); border-radius: 0 8px 8px 0; }
.lg-pill i.sq svg { width: 14px; height: 10px; stroke: #e0245e; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.lg-pill.solo i.dot { border-radius: 8px; }
/* TV：开高低收独占第二行，与名称行同为 13px */
.lg-ohlc { display: inline; margin-left: 18px; line-height: 17px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--tv-text); white-space: nowrap; flex: 0 0 auto; min-width: 0; overflow: hidden; }
.lg-ohlc b { font-weight: 400; color: var(--tv-text); margin: 0 0 0 10px; }
.lg-ohlc b:first-child { margin-left: 0; }
/* 开高低收的涨色必须与蜡烛/圆点同一个绿（--c-up），不跟轴上的 #26a69a 走 */
.lg-ohlc .up { color: var(--c-up); }
.lg-ohlc .down { color: var(--tv-down); }
.lg-ohlc b.up { color: var(--c-up); }
.lg-ohlc b.down { color: var(--tv-down); }
.lg-ma { margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; display: flex; gap: 12px; }
.lg-ma:empty { display: none; }
.lg-chips { display: flex; gap: 10px; margin-top: 5px; align-items: center; }
.chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2px 9px; border-radius: 2px; font-size: 13px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; min-width: 72px;
}
.chip small { font-weight: 400; font-size: 10px; line-height: 1.2; }
.chip.sell { border: 1px solid rgba(239,83,80,.85); color: var(--tv-down); }
.chip.buy { border: 1px solid rgba(41,98,255,.9); color: #4d8bff; }
.lg-spread { font-size: 11px; color: var(--tv-dim); }

#macdLegend { left: 8px; display: flex; align-items: baseline; gap: 10px; }
/* 副图图例（动态生成，每个副图一个） */
.pane-legend {
  left: 8px; right: 78px; z-index: 20; display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; font-size: 12px; pointer-events: none;
}
.pl-title { font-weight: 700; font-size: 12px; color: var(--tv-text2); }
.pl-title em { font-style: normal; color: var(--tv-dim); font-weight: 400; }
.pl-v { font-variant-numeric: tabular-nums; font-size: 12px; }
.pl-v.up { color: var(--tv-up); }
.pl-v.down { color: var(--tv-down); }
.ml-title { font-weight: 700; font-size: 12px; color: var(--tv-text2); }
.ml-title em { font-style: normal; color: var(--tv-dim); font-weight: 400; }
.ml-val { font-variant-numeric: tabular-nums; font-size: 12px; }
.ml-val.dif { color: #089981; }
.ml-val.dea { color: #f5b942; }
.ml-val.hist.up { color: var(--tv-up); }
.ml-val.hist.down { color: var(--tv-down); }

/* 图内浮动属性工具条（TV：选中画线时出现的横向属性栏，可拖动） */
#floatbar {
  position: absolute; z-index: 30; left: 40px; top: 12px;
  display: flex; flex-direction: column; gap: 3px; padding: 4px 6px;
  align-items: stretch;
  background: #2a2e39; border: 1px solid #3a3f4b; border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.55); max-width: calc(100% - 20px);
}
/* 两排布局（用户要求）：第一排 = 拖柄 + 绘图工具；第二排 = 颜色 / 线宽 / 线型 / 字号。
   原来挤成一排约 1140px，会把大半个图表挡住。 */
#floatbar .fb-row { display: flex; align-items: center; gap: 2px; }
#floatbar .fb-row-tools { flex-wrap: wrap; row-gap: 2px; }
#floatbar .fb-row-style {
  flex-wrap: wrap; row-gap: 2px; padding-top: 3px; border-top: 1px solid #3a3f4b;
}
#floatbar.hidden { display: none; }
#floatbar .fb-grip {
  color: var(--tv-dim); font-size: 14px; line-height: 1; padding: 0 4px 0 1px;
  cursor: grab; display: flex; align-items: center; user-select: none;
}
#floatbar .fb-grip:active { cursor: grabbing; }
.fb-group { display: flex; align-items: center; gap: 1px; }
.fb-div { width: 1px; height: 22px; background: #43485a; margin: 0 3px; flex-shrink: 0; }
.fb-div.hidden { display: none; }
#floatbar .fb-tools button {
  width: 26px; height: 26px; border-radius: 4px; color: #c9ccd6;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#floatbar .fb-tools button:hover, #floatbar .fb-tools button.on { background: rgba(255,255,255,.12); color: #fff; }
#floatbar .fb-tools button svg { width: 16px; height: 16px; stroke-width: 1.3; }
/* 颜色色板 */
.fb-colors { gap: 2px; }
.fb-colors .swatch {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  flex-shrink: 0; padding: 0; position: relative;
}
.fb-colors .swatch:hover { transform: scale(1.12); }
.fb-colors .swatch.on { border-color: #fff; box-shadow: 0 0 0 1.5px #2962ff; }
/* 线宽 */
.fb-width button, .fb-style button, .fb-font button {
  width: 26px; height: 26px; border-radius: 4px; color: #c9ccd6;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fb-width button:hover, .fb-style button:hover, .fb-font button:hover,
.fb-width button.on, .fb-style button.on, .fb-font button.on { background: rgba(255,255,255,.12); color: #fff; }
.fb-width .wbar { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.fb-width .wbar.w2 { height: 3px; }
.fb-width .wbar.w3 { height: 5px; }
.fb-width .wbar.w4 { height: 7px; }
.fb-style .lstyle { display: block; width: 16px; height: 0; border-top: 2px solid currentColor; }
.fb-style .lstyle.ldash { border-top-style: dashed; }
.fb-style .lstyle.ldot { border-top-style: dotted; border-top-width: 3px; }
.fb-font .fz { font-style: normal; color: currentColor; line-height: 1; font-weight: 700; }
.fb-font .fz-s { font-size: 10px; }
.fb-font .fz-m { font-size: 13px; }
.fb-font .fz-l { font-size: 17px; }
.fb-font.hidden { display: none; }

/* 末值标签：TV 原版 —— 左边「品种名」小片，右边「价格 / 倒计时」两行，两块同色拼成药丸。
   右块宽度 = 价格轴宽度（由 JS 写入），右边贴图表右沿；左块往左伸出并盖住最后一根 K 线的位置。 */
#lastMarker {
  /* z-index 要高过画线画布(#drawCanvas 12)、价格轴自绘层(#axLayer 11) 与提醒层(16)：
     实时价色块永远压在其它价签之上，绝不被画线的价签盖住 */
  position: absolute; right: 0; top: 0; bottom: auto; left: auto; z-index: 17;
  pointer-events: none; display: none; align-items: stretch; box-sizing: border-box;
  /* 总高 30px = 价格行 16 + 倒计时行 14（TV 实测：374..403 共 30 行） */
  height: 30px; border-radius: 2px; --lm-bg: var(--c-up);
  background: var(--lm-bg); color: #fff; font-variant-numeric: tabular-nums;
  transition: background .12s ease;
}
#lastMarker .lm-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 0; padding: 0 6px;
}
#lastMarker .lm-px { font-size: 12px; font-weight: 600; line-height: 16px; text-align: right; color: #fff; }
#lastMarker .lm-cd { font-size: 11px; font-weight: 400; line-height: 14px; text-align: right; color: rgba(255,255,255,.82); }
#lastMarker .lm-sym {
  position: absolute; right: 100%; top: 0; height: 16px; line-height: 16px;
  padding: 0 6px; border-radius: 2px 0 0 2px; background: var(--lm-bg);
  font-size: 11px; font-weight: 500; color: #fff; white-space: nowrap;
}
#lastMarker.flash-up { animation: tagFlashUp .42s ease-out; }
#lastMarker.flash-down { animation: tagFlashDown .42s ease-out; }
@keyframes tagFlashUp { 0% { filter: brightness(1.45); } 100% { filter: none; } }
@keyframes tagFlashDown { 0% { filter: brightness(1.45); } 100% { filter: none; } }

/* 价格轴标签（最高价 / 最低价）：与 TV 一致 —— 整条价格轴宽、17px 高、2px 圆角，
   框内「名称」靠左、「价格」靠右 */
.ax-tag {
  position: absolute; right: 0; height: 17px; padding: 0 6px; border-radius: 2px;
  display: none; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 12px; line-height: 17px; white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums; pointer-events: none; box-sizing: border-box;
}
.ax-tag .ax-name { opacity: .92; }
.ax-tag .ax-val { color: #fff; font-weight: 600; }
.ax-tag.hi, .ax-tag.lo { background: rgba(19,88,230,.32); color: #d7e2fb; }

/* 副图折叠控件（TV：位于成交量/指标窗格左上角） */
#paneCtl {
  position: absolute; z-index: 27; left: 1px; top: 84px;
  display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 5px;
  border: 1px solid #3a3f4b; border-radius: 3px; background: rgba(24,28,39,.85);
  color: var(--tv-text2); font-size: 11px; cursor: pointer; pointer-events: auto;
}
#paneCtl:hover { color: #fff; border-color: #565c6b; }

/* 图表左下角品牌角标（TV：位于时间轴上方，约 20px 粗体） */
#brand {
  position: absolute; z-index: 19; left: 34px; bottom: 32px;
  font-size: 24px; font-weight: 700; letter-spacing: .2px; color: #eef0f4;
  display: flex; align-items: center; gap: 7px;
  pointer-events: none; opacity: .92;
}
/* 方形徽标：站点改名后放「MY」两个字母（单字母 M 那是 Manyu 时代的旧标）。
   方框仍 26px，字号要压到 11px 才放得下，字重 800 + 极小字距保证读成一体。 */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: 12px; font-weight: 800; letter-spacing: .2px;
  background: #eef0f4; color: #131722; border-radius: 3px;
}
/* 网站名后的「（内测版）」注记：比主名小两档、压淡，读作同一个名字的括号说明 */
.brand-beta {
  font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1;
  color: rgba(232, 237, 246, .48);
  align-self: center; margin-left: -1px;
}
/* 合规声明：紧跟在「MY-Tradeview」右侧同一行（全图唯一一处）。
   字号比品牌名小两档、颜色压淡，保持水印观感；不参与命中测试。 */
.brand-disc {
  margin-left: 14px; align-self: center;
  font-size: 10px; font-weight: 400; letter-spacing: .1px;
  color: rgba(232, 237, 246, 0.58);
  white-space: nowrap;
  /* 这一条带正好会被主图末端的均线/趋势线扫过（TV 水印同样如此）。
     底衬必须够实（0.86）+ 文字够亮，否则红线会从半透明字里透出来糊成一片。 */
  background: rgba(10, 13, 20, 0.86);
  padding: 1px 7px; border-radius: 3px;
}
@media (max-width: 1080px) { .brand-disc { display: none; } }

/* 图表右上角计价币种胶囊（TV：紧贴价格轴右侧） */
#quotePill {
  position: absolute; z-index: 22; right: 8px; top: 8px;
  display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border: 1px solid #363a45; border-radius: 4px; background: #1b1f2a;
  font-size: 12px; color: var(--tv-text); pointer-events: auto; cursor: pointer;
}
#quotePill:hover { background: #22262f; }

/* ===== 图表右上角品牌标「MY-Tradeview」 =====
 * 位置：贴着价格轴左边缘（right 由 JS 按 axAxisW() 动态给，轴宽 56~94 会变）。
 * 观感对齐 TV 水印：整串（含「」括注）统一金色系，整体 1px 暗投影保证压在蜡烛上也读得清。
 * 层级 14：高于蜡烛自绘层(12)与价格轴自绘层(11)，但**低于最高/最低价签(16)**。
 *   下移到价格轴价签那一条带之后，价签向左溢出时必然碰到标志右端；让价签压在标志上
 *   才能读成「水印被标签盖住」，反过来（标志压在蓝签上）就是两种颜色互相糊。
 * 纯展示，绝不能吃掉鼠标事件（否则右上角没法拖图/悬停）。 */
#brandMark {
  position: absolute; z-index: 14; top: 40px; right: 86px;
  display: flex; align-items: baseline; gap: 0;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* 尺寸对齐参考图实测：TV 四字宽 119px、字高 23px（1920 视口）→ 按 1512 视口等比 ≈ 22px；
     参考的字距明显比默认松（单字步进 29.75px / 字高 23px），所以 letter-spacing 给到 .1em。
     垂直位置：在原始 top:4px 基础上整体下移 1.5 个行高（24px × 1.5 = 36px）。 */
  font-size: 22px; line-height: 24px; font-weight: 500; letter-spacing: .1em;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
  transition: opacity .18s;
}
/* 金色渐变统一给到「文字 + 括号」：before/after 各自裁自己的文字，颜色系一致。
   字号 22px 时 PingFang SC 的 Medium(500) 就是细一点的那档，Semibold 会显胖，故不加描边。 */
#brandMark b, #brandMark .bm-q {
  background: linear-gradient(180deg, #ffe873 0%, #ffd93a 42%, #ffd029 72%, #efb81a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#brandMark b { font-weight: 500; }
#brandMark .bm-q {
  font-style: normal; font-weight: 400; font-size: 20px; opacity: .92;
}
/* 窄窗口下让位给图例/价签，避免挤在一起 */
@media (max-width: 720px) { #brandMark { display: none; } }

/* ===== 底部区间栏（38px） ===== */
#rangebar {
  height: var(--rb-h); border-top: 1px solid var(--tv-border); background: var(--tv-panel);
  display: flex; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0;
}
.rb-left { display: flex; gap: 0; align-items: center; }
.rb-left button { padding: 5px 8px; border-radius: 4px; color: var(--tv-text); font-size: 13.5px; }
.rb-left button:hover { background: rgba(255,255,255,.08); }
.rb-left button.on { color: var(--tv-blue); font-weight: 600; }
/* TV：收藏按钮在左侧工具栏最底部，与底栏同一水平带（选中态也保持白底） */
#drawbar .rb-star, #drawbar .rb-star.on {
  margin-top: auto; margin-bottom: 19px;
  width: 34px; height: 34px; border-radius: 8px; padding: 0;
  background: #e9eaee; color: #131722;
  display: flex; align-items: center; justify-content: center;
}
#drawbar .rb-star svg { width: 22px; height: 22px; fill: none; stroke: #131722; stroke-width: 1.3; }
#drawbar .rb-star:hover, #drawbar .rb-star.on:hover { background: #fff; }
.rb-cal { display: flex; padding: 5px 8px !important; margin-left: 4px; color: var(--tv-text2); }
.rb-cal svg { width: 18px; height: 18px; }
.rb-right { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tv-dim); }
#clock { margin-left: 6px; color: var(--tv-text); font-variant-numeric: tabular-nums; font-size: 13px; }
.rb-help {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid #565963; color: var(--tv-text2);
  display: flex; align-items: center; justify-content: center; font-size: 14px; margin-left: 10px;
}
.rb-help:hover { background: rgba(255,255,255,.08); }

/* ===== 右侧自选面板（300px） ===== */
#watchpanel {
  width: var(--wl-w); background: var(--tv-panel); border-left: 1px solid var(--tv-border);
  display: flex; flex-direction: column; flex-shrink: 0; position: relative;
}
.wp-head {
  height: 50px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 12px; flex-shrink: 0;
}
.wp-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wp-tools { display: flex; gap: 4px; }
.wp-tools button { color: var(--tv-text2); padding: 7px; border-radius: 4px; display: flex; }
.wp-tools button:hover { background: rgba(255,255,255,.08); color: #fff; }
.wp-tools svg { width: 20px; height: 20px; }

/* TV 列头：◀ 折叠三角 + 商品/最新价/涨跌/涨跌% */
.wp-cols {
  display: grid; align-items: center; min-height: 32px;
  grid-template-columns: 1fr 68px 72px 56px;
  padding: 0 8px 0 16px; color: #787b86; font-size: 12.5px; flex-shrink: 0;
  position: relative;
}
.wp-cols > span { white-space: nowrap; }
.wp-cols::before {
  content: ''; position: absolute; left: 3px; top: 50%; margin-top: -7px;
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 9px solid #4a4a4a;
}
.wp-cols span:nth-child(1) { text-align: left; }
.wp-cols span:nth-child(n+2) { text-align: right; padding-right: 12px; }
.wp-cols span:nth-child(4) { padding-right: 9px; }

.wp-body { flex: 1; overflow-y: auto; min-height: 0; }
.wp-body::-webkit-scrollbar { width: 6px; }
.wp-body::-webkit-scrollbar-thumb { background: #363a45; border-radius: 3px; }
.wp-group-head {
  height: 40px; display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px 0 14px;
  color: #787b86; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid var(--tv-border);
}
.wp-group-head i { color: #787b86; font-style: normal; font-size: 0; width: 10px; height: 10px; margin-top: 3px; position: relative; }
.wp-group-head i::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 8px; height: 8px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
}
.wp-group-head:hover { color: var(--tv-text2); background: rgba(255,255,255,.03); }
.wp-group-head.closed i::before { transform: rotate(-45deg); top: 0; }

/* 行内市场标签：紧跟代码，青色「现货」/ 蓝色「永续」；点它切换该品种的市场 */
.wp-ico { position: relative; overflow: visible; }
.wp-tag {
  flex: 0 0 auto; font-style: normal; font-size: 9.5px; line-height: 1;
  padding: 1.5px 3px; border-radius: 2px; cursor: pointer; letter-spacing: 0;
}
.wp-tag.fut { color: #8fb0ff; background: rgba(41, 98, 255, .20); }
.wp-tag.spot { color: #5fd8c8; background: rgba(38, 166, 154, .20); }
.wp-tag:hover { filter: brightness(1.45); }

/* 代码后缀 .P = 永续合约（同 TV 的 BINANCE:BTCUSDT.P）；后面的 ⇄ 用来换市场 */
.wp-p { color: #8fb0ff; font-weight: 600; font-size: 12px; letter-spacing: .2px; margin-left: 1px; }
.wp-sw {
  font-style: normal; font-size: 11px; line-height: 1; color: #787b86;
  margin-left: 5px; padding: 1px 3px; border-radius: 3px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.wp-body ul li:hover .wp-sw { opacity: 1; }
.wp-sw:hover { color: #fff; background: #2a2e39; }

/* 分组头：名称 + 计数 + 悬停出现的「＋ / ⋯」 */
.wp-group-head { gap: 0; }
.wg-name {
  flex: 1 1 auto; min-width: 0; margin-left: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-n { font-style: normal; font-size: 11px; color: #5d606b; margin-left: 6px; }
/* 常驻半透明可见：重命名 / 删除就藏在「⋯」里，不能等悬停才出现 */
.wg-acts { display: flex; gap: 4px; align-items: center; opacity: .55; transition: opacity .12s; }
.wp-group-head:hover .wg-acts { opacity: 1; }
.wg-name:hover { color: #d1d4dc; }
.wg-acts b {
  font-weight: 400; font-size: 14px; line-height: 1; color: #787b86;
  padding: 1px 4px; border-radius: 3px; cursor: pointer;
}
.wg-acts b:hover { color: #fff; background: #2a2e39; }
.wp-group-head.editing { align-items: center; padding-top: 9px; }
.wg-inp {
  height: 20px; width: 130px; margin-left: 8px; padding: 0 4px; font-size: 12.5px;
  background: #131722; border: 1px solid #2962ff; border-radius: 3px; color: #e6e8ec; outline: none;
}

/* 浮层菜单（右键行情行 / 分组 ⋯ 共用） */
.ctx-menu {
  position: fixed; z-index: 600; min-width: 172px; padding: 4px;
  background: #1e222d; border: 1px solid #363a45; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.ctx-item {
  height: 28px; display: flex; align-items: center; padding: 0 10px;
  font-size: 12.5px; color: #d1d4dc; border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.ctx-item:hover { background: #2a2e39; color: #fff; }
.ctx-item.head { height: 24px; cursor: default; color: #787b86; font-size: 11.5px; }
.ctx-item.head:hover { background: none; color: #787b86; }
.ctx-item.danger { color: #ff7b72; }
.ctx-item.danger:hover { background: rgba(242, 54, 69, .16); color: #ff9a94; }
.ctx-sep { height: 1px; margin: 4px 6px; background: #2f333e; }

/* ===== 商品代码搜索（TV 模式模态：图表上敲字母即唤起） ===== */
#symSearch { position: fixed; inset: 0; z-index: 420; }
#symSearch.hidden { display: none; }
.ss-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.ss-box {
  position: relative; width: 568px; max-width: calc(100vw - 32px); margin: 9vh auto 0;
  display: flex; flex-direction: column; max-height: 76vh; padding: 14px 14px 9px;
  background: #1e222d; border: 1px solid #363a45; border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62);
}
.ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ss-head b { font-size: 16px; font-weight: 600; color: #e6e8ec; letter-spacing: .2px; }
.ss-head i { font-style: normal; cursor: pointer; color: #8a8f9c; font-size: 20px; line-height: 1; padding: 0 2px; }
.ss-head i:hover { color: #fff; }
.ss-field { position: relative; display: flex; align-items: center; }
.ss-lens {
  position: absolute; left: 12px; width: 16px; height: 16px; pointer-events: none;
  fill: none; stroke: #787b86; stroke-width: 1.8; stroke-linecap: round;
}
#ssInput {
  width: 100%; height: 38px; padding: 0 34px 0 36px; border-radius: 6px;
  background: #131722; border: 1px solid #363a45; color: #e6e8ec; font-size: 14px;
}
#ssInput::placeholder { color: #5d606b; }
#ssInput:focus { outline: none; border-color: #2962ff; box-shadow: 0 0 0 1px rgba(41, 98, 255, .45); }
.ss-clear {
  position: absolute; right: 10px; font-style: normal; cursor: pointer; color: #787b86;
  font-size: 15px; line-height: 1; padding: 3px; border-radius: 3px;
}
.ss-clear:hover { color: #fff; background: #2a2e39; }
.ss-clear.hidden { display: none; }
.ss-tabs { display: flex; gap: 6px; margin: 11px 0 8px; }
.ss-tabs button {
  height: 24px; padding: 0 12px; border-radius: 12px; font-size: 12px;
  border: 1px solid #363a45; background: transparent; color: #b2b5be;
}
.ss-tabs button:hover { background: #2a2e39; color: #e6e8ec; }
.ss-tabs button.on { background: #2a2e39; border-color: #5d606b; color: #e6e8ec; }
.ss-meta {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 11.5px; color: #787b86;
}
.ss-meta i { font-style: normal; }
.ss-meta b { margin-left: auto; font-weight: 400; }
.ss-res { flex: 1; min-height: 56px; overflow-y: auto; }
.ss-res::-webkit-scrollbar { width: 8px; }
.ss-res::-webkit-scrollbar-thumb { background: #363a45; border-radius: 4px; }
.ss-row {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px;
  border-radius: 6px; cursor: pointer; user-select: none;
}
.ss-row:hover, .ss-row.sel { background: #2a2e39; }
.ss-star {
  flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: #5d606b;
  line-height: 1; font-style: normal;
}
.ss-star:hover { color: #f0b90b; }
.ss-star.on { color: #f0b90b; }
.ss-ico {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.ss-name { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.ss-name b { font-size: 13.5px; font-weight: 600; color: #e6e8ec; }
.ss-name b em { font-style: normal; color: #ffd54f; }
.ss-name i {
  font-style: normal; font-size: 11px; color: #787b86;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-kind { flex: 0 0 auto; font-size: 11px; padding: 1.5px 6px; border-radius: 3px; }
.ss-kind.fut { color: #8fb0ff; background: rgba(41, 98, 255, .18); }
.ss-kind.spot { color: #5fd8c8; background: rgba(38, 166, 154, .18); }
.ss-cls { flex: 0 0 auto; font-size: 11px; color: #787b86; }
.ss-exch {
  flex: 0 0 92px; display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  font-size: 11.5px; color: #b2b5be;
}
.ss-logo {
  width: 14px; height: 14px; border-radius: 3px; background: #f0b90b; color: #1a1d26;
  font-size: 9px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.ss-empty { padding: 26px 8px; text-align: center; font-size: 12.5px; color: #787b86; }
.ss-foot {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; padding-top: 8px;
  border-top: 1px solid #2a2e39; font-size: 11px; color: #787b86;
}
.ss-foot kbd {
  display: inline-block; min-width: 14px; padding: 0 3px; margin-right: 2px;
  border: 1px solid #3a3f4b; border-radius: 3px; background: #23262f;
  font-family: inherit; font-size: 10px; line-height: 14px; text-align: center; color: #9aa0ad;
}

#watchlist, #marketlist, #grp-large, #grp-btc, #grp-sol, #grp-l1 { list-style: none; }
.wp-body ul { list-style: none; margin: 0; padding: 0; }
#watchlist li, #marketlist li, .wp-body ul li {
  display: grid; align-items: center;
  grid-template-columns: 20px 1fr 68px 72px 56px;
  height: var(--row-h); padding: 0 8px 0 16px; cursor: pointer; position: relative;
  border-bottom: 1px solid var(--tv-border);
}
#watchlist li:hover, #marketlist li:hover, .wp-body ul li:hover { background: rgba(255,255,255,.05); }
/* TV 选中态：整行描边高亮 */
#watchlist li.active::after, #marketlist li.active::after, .wp-body ul li.active::after {
  content: ''; position: absolute; inset: 0; border: 1px solid #6a6f7d; border-radius: 3px; pointer-events: none;
}
/* 行首彩色书签旗标 */
.wp-flag { display: none; }
/* 自选行「点中」态：蓝框标出，此时按 Delete 即从自选移除 */
.wp-body ul li.sel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid #2962ff; border-radius: 3px; background: rgba(41,98,255,.10);
}
.wp-ico {
  width: 20px; height: 20px; border-radius: 50%; color: #fff !important; justify-self: start;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.wp-name {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-weight: 400; font-size: 13px; color: #dcdcdc; margin-left: 6px;
}
.wp-name b { flex: 0 1 auto; min-width: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-px, .wp-chg, .wp-c4 {
  text-align: right; font-variant-numeric: tabular-nums; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
/* 小价品种的「涨跌」是 -0.0002 这种长串，字号再降 0.5px 并压紧内边距，
 * 否则会和后面的「涨跌%」挤在一起连成一片（实测 PYTH / JUP 会出现）。 */
/* 最新价 / 涨跌 / 涨跌% 三列字号统一（用户要求：右侧列表同一行字号一致） */
.wp-px { font-size: 13.6px; }
.wp-chg { font-size: 13.6px; padding-left: 4px; padding-right: 4px; }
.wp-c4 { font-size: 13.6px; padding-left: 2px; }
.wp-px { padding-right: 2px; }
.wp-c4 { color: var(--tv-text); }
.wp-px { color: #dcdcdc; }
/* TV 自选列表：与上次报价逐位比较——未变动的高位数字恒白，
 * 变动的低位数字按本次跳动方向着色（涨=绿 / 跌=红，与 24h 涨跌色无关） */
.wp-px .pz { font-weight: inherit; }
.wp-px .pz-up { color: var(--tv-up); }
.wp-px .pz-down { color: var(--tv-down); }
.up { color: var(--tv-up); }
.down { color: var(--tv-down); }

/* ===================== I1 价格跳动闪烁 =====================
 * TV 原版：跳动只「高亮」变动的数字 —— 保留涨绿/跌红主色，
 * 仅短暂提亮一下；**绝不变白、绝无缩放/放大**（用户明确要求：不需要数字放大）。 */
@keyframes numFlashUp {
  0%   { filter: brightness(2.4); }
  100% { filter: brightness(1); }
}
@keyframes numFlashDown {
  0%   { filter: brightness(2.4); }
  100% { filter: brightness(1); }
}
/* wp-px 的闪烁只作用于「变动的数字」（.pz），未变动位保持白色不动；提亮而非变白 */
.wp-px.flash-up .pz { animation: numFlashUp .5s ease-out; }
.wp-px.flash-down .pz { animation: numFlashDown .5s ease-out; }
.wp-chg.flash-up, .wp-c4.flash-up { animation: numFlashUp .5s ease-out; }
.wp-chg.flash-down, .wp-c4.flash-down { animation: numFlashDown .5s ease-out; }

/* 图表面板里的实时价（右侧价格轴标签 + 图例收盘价）：同样的「数字跳动」 */
@keyframes pxTick { 0% { filter: brightness(2.2); } }
#lgOhlc .ohlc-c.tick-up, #lgOhlc .ohlc-c.tick-down { animation: pxTick .5s ease-out; }
#legend .tick-up, #legend .tick-down { animation: pxTick .5s ease-out; }
/* 右侧价格轴标签：数字只变色不缩放（同 TV：无任何放大动画） */
#lastMarker .lm-px { font-variant-numeric: tabular-nums; }

/* 顶部买卖价片：用「变色」而非底色闪烁，避免整块大色块跳动 */
@keyframes chipFlashUp { 0% { color: var(--tv-up); } }
@keyframes chipFlashDown { 0% { color: var(--tv-down); } }
#chipSell.flash-up, #chipBuy.flash-up { animation: chipFlashUp .55s ease-out; }
#chipSell.flash-down, #chipBuy.flash-down { animation: chipFlashDown .55s ease-out; }

/* ===================== I2 列表 24h 迷你走势图 ===================== */
.wp-sparkcell {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 2px 0 5px; overflow: hidden; color: var(--tv-text2);
}
.wp-sparkcell.up { color: var(--tv-up); }
.wp-sparkcell.down { color: var(--tv-down); }
.wp-spark { width: 100%; height: 16px; display: block; overflow: visible; }
.wp-spark path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.wp-spark .sp-hi { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 2; opacity: .45; }
.wp-spark .sp-lo { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 2; opacity: .45; }

.row-star {
  position: absolute; right: 1px; top: 50%; transform: translateY(-50%);
  color: var(--tv-yellow); font-size: 12px; opacity: 0; padding: 2px; line-height: 1;
}
#watchlist li:hover .row-star, #marketlist li:hover .row-star, .wp-body ul li:hover .row-star { opacity: 1; }

/* 面板底部：交易所 / 合约信息（TV：位于自选面板底部，而非底部区间栏） */
.wp-foot { flex-shrink: 0; border-top: 1px solid var(--tv-line); padding: 6px 8px 7px; }
.wp-foot-row1 { display: flex; align-items: center; gap: 6px; }
.wp-foot-row1 .wp-ico { width: 18px; height: 18px; }
.wp-foot-sym { font-weight: 700; font-size: 13px; color: #dcdcdc; }
.wp-foot-acts { margin-left: auto; display: flex; gap: 8px; color: var(--tv-text2); font-size: 12px; }
.wp-foot-full { margin: 3px 0 0 13px; font-size: 12.4px; color: #9da0aa; display: flex; align-items: center; gap: 8px; }
.wp-foot-full > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-foot-ext {
  width: 13px; height: 13px; flex-shrink: 0;
  fill: none; stroke: #9da0aa; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block;
}
.wp-foot-exch { margin: 3px 0 0 13px; font-size: 11.5px; color: var(--tv-dim); display: flex; align-items: center; gap: 5px; }
.wp-foot-dot { color: var(--tv-dim); }
.wp-foot-exch b { color: var(--tv-text2); font-weight: 600; letter-spacing: .3px; }

@media (max-width: 1280px) { #watchpanel { display: none; } }
@media (max-width: 900px) { #rightbar, #drawbar { display: none; } }

/* ===================== 涨跌色反向（设置项） ===================== */
body.reverse .up { color: var(--tv-down); }
body.reverse .down { color: var(--tv-up); }

/* ===================== 绘图图层 ===================== */
#drawCanvas {
  position: absolute; inset: 0; z-index: 12; pointer-events: none;
  width: 100%; height: 100%;
}
#drawCanvas.active { pointer-events: auto; cursor: crosshair; }
#drawCanvas.picking { pointer-events: auto; cursor: crosshair; }

/* 图中已画对象被选中时手柄 */
#chartwrap.tool-active #chartMain { cursor: crosshair; }

/* 按住空格（或 Alt）时进入平移手势，光标换成抓手，与 TV 一致 */
#chartwrap.pan-hold #drawCanvas,
#chartwrap.pan-hold #chartMain { cursor: grab; }
#chartwrap.pan-hold #drawCanvas.active { cursor: grab; }

/* 文字标注行内编辑框 */
.draw-textedit {
  position: absolute; z-index: 60; min-width: 70px; max-width: 320px;
  padding: 2px 5px; background: rgba(24,28,39,.94); border: 1px solid var(--tv-blue);
  border-radius: 3px; color: var(--tv-text); font-size: 12px; outline: none;
  white-space: pre; cursor: text;
}

/* 提醒价签（贴合价格轴） */
/* z-index 必须高于价格轴自绘层(#axLayer 11)，否则提醒价签会被轴底盖住 */
#alertLayer { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.al-tag {
  position: absolute; right: 0; display: flex; align-items: center; gap: 4px;
  height: 17px; padding: 0 5px; border-radius: 3px 0 0 3px; transform: translateY(-50%);
  background: #2962ff; color: #fff; font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: auto; cursor: pointer;
}
.al-tag.done { background: #5f5e5a; }
.al-tag svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ===================== 轻提示 ===================== */
#toastBox {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
  z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: #22262f; border: 1px solid #363a45; border-radius: 6px;
  color: var(--tv-text); font-size: 12.5px; padding: 8px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease; max-width: 460px;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast.warn { border-color: #7a6420; color: #f5b942; }
.toast.err { border-color: #7a2a2a; color: #ef5350; }
.toast.ok { border-color: #245a52; color: #26a69a; }

/* ===================== 连接状态横幅 ===================== */
#connBanner {
  position: absolute; z-index: 26; left: 50%; top: 8px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px;
  background: rgba(122,100,32,.22); border: 1px solid #7a6420; border-radius: 4px;
  color: #f5b942; font-size: 12px; pointer-events: none;
}
#connBanner i {
  width: 7px; height: 7px; border-radius: 50%; background: #f5b942; flex-shrink: 0;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* 连接状态指示灯（底栏）：绿=WS 实时 / 黄=轮询降级 / 红=中断 */
.conn-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #6b7280; margin-right: 7px; transition: background .2s;
}
.conn-dot.ok { background: #26a69a; box-shadow: 0 0 5px rgba(38,166,154,.7); }
.conn-dot.err { background: #ef5350; }
.conn-dot.poll { background: #f5b942; }

/* ===================== 通用浮层面板 ===================== */
.panel {
  position: fixed; z-index: 300; width: 292px; max-height: calc(100vh - 90px);
  background: #1b1f2a; border: 1px solid var(--tv-border); border-radius: 8px;
  box-shadow: 0 16px 44px rgba(0,0,0,.75); display: flex; flex-direction: column;
  overflow: hidden; font-size: 12.5px;
}
.panel.wide { width: 340px; }
.pn-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--tv-line);
  font-size: 13px; font-weight: 600; color: var(--tv-text);
}
.pn-x { font-style: normal; color: var(--tv-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.pn-x:hover { color: #fff; }
.pn-body { padding: 4px 0 8px; overflow-y: auto; }
.pn-sec {
  padding: 9px 12px 5px; color: var(--tv-dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px;
}
.pn-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; cursor: pointer;
}
.pn-row:hover { background: rgba(255,255,255,.05); }
.pn-hint { padding: 0 12px 6px; color: var(--tv-dim); font-size: 11px; line-height: 1.5; }
.pn-foot { padding: 8px 12px 12px; border-top: 1px solid var(--tv-line); }
.pn-btn {
  width: 100%; height: 30px; border-radius: 4px; border: 1px solid #363a45;
  background: #22262f; color: var(--tv-text); font-size: 12.5px;
}
.pn-btn:hover { background: #2b303a; border-color: #464c59; }

/* 开关 */
.sw {
  width: 34px; height: 19px; border-radius: 10px; background: #3a3f4b;
  position: relative; flex-shrink: 0; transition: background .16s ease;
}
.sw b {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #9aa0ac; transition: transform .16s ease, background .16s ease;
}
.sw.on { background: rgba(41,98,255,.55); }
.sw.on b { transform: translateX(15px); background: #fff; }

/* 分段选择 */
.pn-seg { display: flex; gap: 0; padding: 0 12px 8px; }
.pn-seg button {
  flex: 1; height: 28px; border: 1px solid #363a45; background: #191d26;
  color: var(--tv-text2); font-size: 12px;
}
.pn-seg button:first-child { border-radius: 4px 0 0 4px; }
.pn-seg button:last-child { border-radius: 0 4px 4px 0; }
.pn-seg button + button { border-left: none; }
.pn-seg button.on { background: #2f3542; color: #fff; }

/* 快捷键行 */
.kb { display: flex; align-items: center; gap: 6px; padding: 5px 12px; color: var(--tv-text2); }
.kb span { color: var(--tv-dim); font-size: 12px; line-height: 1.5; }
.kb kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px;
  padding: 0 5px; border: 1px solid #464c59; border-bottom-width: 2px; border-radius: 4px;
  background: #22262f; color: var(--tv-text); font-family: inherit; font-size: 11px;
}

/* ===================== 价格提醒 ===================== */
.al-add { display: flex; gap: 6px; padding: 10px 12px 6px; }
.al-add input {
  flex: 1; min-width: 0; height: 30px; padding: 0 9px; border-radius: 4px;
  border: 1px solid #363a45; background: #14181f; color: var(--tv-text);
  font: inherit; font-variant-numeric: tabular-nums; outline: none;
}
.al-add input:focus { border-color: var(--tv-blue); }
.al-add select {
  height: 30px; border-radius: 4px; border: 1px solid #363a45; background: #14181f;
  color: var(--tv-text); font: inherit; outline: none; padding: 0 4px;
}
.al-add button {
  height: 30px; padding: 0 12px; border-radius: 4px; background: var(--tv-blue);
  color: #fff; font-size: 12.5px; flex-shrink: 0;
}
.al-add button:hover { background: #1e4fd8; }
.al-note { padding: 0 12px 8px; color: var(--tv-dim); font-size: 11px; line-height: 1.5; }
#alertsList { list-style: none; }
#alertsList li {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--tv-line);
}
#alertsList li:hover { background: rgba(255,255,255,.05); }
#alertsList .al-body { flex: 1; min-width: 0; }
#alertsList .al-px { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tv-text); }
#alertsList .al-sub { color: var(--tv-dim); font-size: 11px; margin-top: 1px; }
#alertsList .al-act { display: flex; gap: 6px; flex-shrink: 0; }
#alertsList .al-act button { color: var(--tv-dim); font-size: 12px; padding: 2px 4px; border-radius: 3px; }
#alertsList .al-act button:hover { color: #fff; background: rgba(255,255,255,.08); }
#alertsList li.done .al-px { color: var(--tv-dim); text-decoration: line-through; }
.al-empty { padding: 14px 12px; color: var(--tv-dim); text-align: center; }

/* ===================== 数据窗口 ===================== */
#dataWindow {
  position: absolute; z-index: 24; left: 8px; top: 96px; width: 208px;
  background: rgba(27,31,42,.95); border: 1px solid var(--tv-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.6); font-size: 11.5px; pointer-events: auto;
}
#dataWindow .dw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 9px; border-bottom: 1px solid var(--tv-line);
  color: var(--tv-text); font-weight: 600; font-size: 12px;
}
#dataWindow .dw-head i { font-style: normal; color: var(--tv-dim); cursor: pointer; font-size: 14px; line-height: 1; }
#dataWindow .dw-head i:hover { color: #fff; }
#dataWindow .dw-body { padding: 4px 0 6px; max-height: 300px; overflow-y: auto; }
.dw-sec { padding: 6px 9px 2px; color: var(--tv-dim); font-size: 10.5px; letter-spacing: .5px; }
.dw-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 9px; gap: 8px; }
.dw-row span:first-child { color: var(--tv-dim); white-space: nowrap; }
.dw-row span:last-child { color: var(--tv-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===================== 对比叠加图例（位于主图例内） ===================== */
#compareLegend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; pointer-events: auto; }
#compareLegend:empty { display: none; }
.cmp-item {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tv-text2);
}
.cmp-item i { width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.cmp-item b { font-weight: 400; font-variant-numeric: tabular-nums; }
.cmp-item u { text-decoration: none; color: var(--tv-dim); cursor: pointer; padding: 0 1px; }
.cmp-item u:hover { color: #fff; }

/* ===================== 菜单补充 ===================== */
.menu-sep { height: 1px; background: var(--tv-line); margin: 4px 0; }
#chartMenu { position: fixed; top: 0; left: 0; z-index: 350; }
#moreMenu { position: fixed; z-index: 350; }

/* ===================== 自选面板：榜单与列 ===================== */
#wpTitle { cursor: pointer; }
#wpTitle:hover { color: #fff; }
.wp-cols span.sortable { cursor: pointer; }
.wp-cols span.sortable:hover { color: var(--tv-text); }
.wp-cols span.sortable.on { color: var(--tv-text); }
.wp-cols span em { font-style: normal; }
.wp-cols span em.dir { font-size: 8px; margin-left: 1px; color: var(--tv-dim); }
.wp-cols span.on em.dir { color: var(--tv-text); }
#wpTitle em { font-style: normal; }
#wpTitle b, #wpTitle em { font-weight: 600; }
#colMenu { position: fixed; z-index: 350; }
#listMenu { position: fixed; z-index: 350; }

/* 榜单模式：非分组列表时隐藏分组标题 */
#watchpanel.listmode .wp-group-head,
#watchpanel.listmode ul[data-group] { display: none; }
#watchpanel.listmode #watchlist li:nth-child(n) { display: grid; }
#watchpanel .wp-body ul li.empty { display: block; padding: 10px 8px; color: var(--tv-dim); cursor: default; }
#watchpanel .wp-body ul li.empty:hover { background: none; }

/* ===================== 历史加载提示（B6） ===================== */
#histHint {
  position: absolute; z-index: 26; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px;
  background: rgba(27,31,42,.94); border: 1px solid var(--tv-border); border-radius: 4px;
  color: var(--tv-text2); font-size: 11.5px; pointer-events: none;
}
#histHint i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tv-blue); flex-shrink: 0;
  animation: blink 1s ease-in-out infinite;
}

/* ===================== 回放控制条（A7） ===================== */
#replayBar {
  height: 34px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: #14181f; border-top: 1px solid var(--tv-border); font-size: 12.5px;
}
#replayBar button, #replayBar .rp-btn {
  height: 24px; min-width: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid #363a45;
  background: #22262f; color: var(--tv-text); display: flex; align-items: center; justify-content: center;
}
#replayBar button:hover, #replayBar .rp-btn:hover { background: #2b303a; border-color: #464c59; }
#replayBar #rpPlay { background: rgba(41,98,255,.22); border-color: #2f5bd0; color: #fff; }
#rpInfo { color: var(--tv-text2); font-variant-numeric: tabular-nums; }
#rpInfo b { color: #fff; font-weight: 600; }
.rp-sep { width: 1px; height: 16px; background: var(--tv-border); }
.rp-grow { flex: 1; }
.rp-spd { display: flex; align-items: center; gap: 5px; color: var(--tv-dim); }
#rpSpeed {
  height: 24px; border-radius: 4px; border: 1px solid #363a45; background: #14181f;
  color: var(--tv-text); font: inherit; outline: none; padding: 0 3px;
}
#chartwrap.picking { cursor: crosshair; }
#chartwrap.picking::after {
  content: '点击图表选择回放起点'; position: absolute; z-index: 40; left: 50%; top: 12px;
  transform: translateX(-50%); padding: 6px 12px; border-radius: 4px;
  background: rgba(41,98,255,.92); color: #fff; font-size: 12px; pointer-events: none;
}

/* ===================== 指标参数面板（A5） ===================== */
.ip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12px 4px; }
.ip-grid label { display: flex; flex-direction: column; gap: 3px; color: var(--tv-dim); font-size: 11px; }
.ip-grid input {
  height: 28px; width: 100%; padding: 0 7px; border-radius: 4px; border: 1px solid #363a45;
  background: #14181f; color: var(--tv-text); font: inherit; outline: none;
  font-variant-numeric: tabular-nums;
}
.ip-grid input:focus { border-color: var(--tv-blue); }

/* ===================== 列表菜单 / 布局菜单 ===================== */
.lm-sec { padding: 2px 0; }
.lm-sec .lm-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 13px; cursor: pointer;
}
.lm-sec .lm-item:hover { background: rgba(255,255,255,.07); }
.lm-sec .lm-item.on { color: #fff; }
.lm-sec .lm-item .lm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-sec .lm-item .lm-n { color: var(--tv-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.lm-sec .lm-item .lm-x { color: var(--tv-dim); font-style: normal; padding: 0 2px; border-radius: 3px; }
.lm-sec .lm-item .lm-x:hover { color: #fff; background: rgba(255,255,255,.1); }
.lm-sec .lm-cap { padding: 5px 13px 3px; color: var(--tv-dim); font-size: 10.5px; letter-spacing: .5px; }
.lm-new { display: flex; gap: 5px; padding: 5px 9px 7px; }
.lm-new input {
  flex: 1; min-width: 0; height: 27px; padding: 0 8px; border-radius: 4px;
  border: 1px solid #363a45; background: #14181f; color: var(--tv-text); font: inherit; outline: none;
}
.lm-new input:focus { border-color: var(--tv-blue); }
.lm-new button { height: 27px; padding: 0 10px; border-radius: 4px; background: var(--tv-blue); color: #fff; font-size: 12px; }
.lym-save { display: flex; gap: 5px; padding: 6px 9px; }
.lym-save input {
  flex: 1; min-width: 0; height: 27px; padding: 0 8px; border-radius: 4px;
  border: 1px solid #363a45; background: #14181f; color: var(--tv-text); font: inherit; outline: none;
}
.lym-save input:focus { border-color: var(--tv-blue); }
.lym-save button { height: 27px; padding: 0 10px; border-radius: 4px; background: var(--tv-blue); color: #fff; font-size: 12px; }
#layoutMenu { position: fixed; z-index: 350; min-width: 214px; }
#lyList .empty { padding: 8px 13px; color: var(--tv-dim); }

/* ===================== 自选行拖拽排序（C2） ===================== */
#watchlist li[draggable="true"] { cursor: grab; }
#watchlist li.dragging { opacity: .45; }
#watchlist li.drop-above { box-shadow: inset 0 2px 0 var(--tv-blue); }
#watchlist li.drop-below { box-shadow: inset 0 -2px 0 var(--tv-blue); }

/* ===================== 交易面板（本地模拟盘） ===================== */
.tp-sym { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.tp-sym b { font-size: 15px; }
.tp-px { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.tp-sides button { height: 30px; border-radius: 5px; border: 1px solid #2a2e39; font-size: 13px; color: var(--tv-text2); }
.tp-sides button.on[data-side="buy"] { background: rgba(38,166,154,.18); border-color: #26a69a; color: #26a69a; font-weight: 600; }
.tp-sides button.on[data-side="sell"] { background: rgba(239,83,80,.18); border-color: #ef5350; color: #ef5350; font-weight: 600; }
.tp-row { display: flex; align-items: center; justify-content: space-between; height: 30px; font-size: 13px; }
.tp-row > span { color: var(--tv-dim); }
.tp-row input { width: 140px; background: #16191f; border: 1px solid var(--tv-border); border-radius: 4px; color: var(--tv-text); padding: 5px 8px; font: inherit; outline: none; }
.tp-row input:focus { border-color: var(--tv-blue); }
.tp-ro b { font-variant-numeric: tabular-nums; }
.tp-submit { width: 100%; height: 34px; border-radius: 5px; font-weight: 700; font-size: 13px; margin: 10px 0 4px; color: #fff; }
.tp-submit.buy { background: #26a69a; }
.tp-submit.sell { background: #ef5350; }
.tp-submit:hover { filter: brightness(1.12); }
.tp-pos { min-height: 34px; }
.tp-empty { color: var(--tv-dim); font-size: 12px; padding: 8px 0; }
.tp-item { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 7px 0; border-bottom: 1px solid var(--tv-line); font-size: 12px; }
.tp-item b { font-size: 13px; }
.tp-item .tp-close { color: var(--tv-dim); cursor: pointer; font-size: 11px; }
.tp-item .tp-close:hover { color: #fff; }
.tp-pnl { grid-column: 1 / -1; font-variant-numeric: tabular-nums; }
.tp-stat { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; }

/* ===================== TV 同款取色器（画线 / 文字颜色） ===================== */
#colorPop {
  position: fixed; z-index: 320; width: 268px; padding: 12px 12px 10px;
  background: #1e222d; border: 1px solid #363a45; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
#colorPop.hidden { display: none; }
.cp-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.cp-sw {
  width: 100%; aspect-ratio: 1 / 1; min-height: 18px; border-radius: 3px; padding: 0;
  border: 1px solid rgba(255,255,255,.12); cursor: pointer;
}
.cp-sw:hover { transform: scale(1.1); }
.cp-sw.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(41,98,255,.85); }
.cp-sw-gray { border-radius: 2px; }
.cp-recent-wrap { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.cp-recent { display: flex; gap: 4px; flex: 1; min-height: 18px; }
.cp-sw-rec { width: 18px; height: 18px; flex: 0 0 18px; }
.cp-add {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #b2b5be; font-size: 14px;
  position: relative; overflow: hidden;
}
.cp-add:hover { background: rgba(255,255,255,.12); color: #fff; }
.cp-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.cp-sep { height: 1px; background: #363a45; margin: 10px 0 8px; }
.cp-op-label { color: #787b86; font-size: 12px; }
.cp-op-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cp-op-row input[type="range"] {
  flex: 1; height: 4px; border-radius: 2px; outline: none;
  -webkit-appearance: none; appearance: none; background-color: transparent;
  background-image: linear-gradient(to right, rgba(var(--cp-c, 255,255,255), 0), rgba(var(--cp-c, 255,255,255), 1));
}
.cp-op-row input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #1e222d; box-shadow: 0 0 0 1px rgba(255,255,255,.5); cursor: pointer;
}
.cp-op-val {
  display: flex; align-items: center; gap: 2px; color: #d1d4dc; font-size: 12px;
  border: 1px solid #434651; border-radius: 4px; padding: 2px 5px;
}
.cp-op-val input {
  width: 30px; background: transparent; border: 0; outline: none; color: #d1d4dc;
  font-size: 12px; text-align: right; font-family: inherit;
}
/* 「＋」自定义颜色按钮：未选中常用色时用它显示当前自定义色 */
.fb-colors .swatch.fb-more {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px dashed rgba(255,255,255,.45);
  color: #c9ccd6; font-size: 11px; line-height: 1;
}
.fb-colors .swatch.fb-more i { font-style: normal; pointer-events: none; }
.fb-colors .swatch.fb-more.filled { border-style: solid; }
.fb-colors .swatch.fb-more.filled i { opacity: 0; }
.fb-colors .swatch.fb-more.on { box-shadow: 0 0 0 1.5px #2962ff; }

/* ===================== 时间轴日期标签（十字光标处，TV 同款） ===================== */
#timeTag {
  position: absolute; bottom: 3px; z-index: 18; pointer-events: none;
  transform: translateX(-50%);
  height: 20px; padding: 0 7px; border-radius: 2px;
  display: flex; align-items: center; white-space: nowrap;
  background: #363a45; color: #e8eaf0; font-size: 12px; line-height: 20px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
#timeTag.hidden { display: none; }