/* ============================================================
   数据库 · 市场数据面板
   ============================================================ */
.main-content { padding-top: 40px; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px; /* 与市场/信号/复盘页统一 */
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.page-description { color: var(--text-secondary); font-size: calc(15px * var(--sv-font-scale, 1)); margin-top: 6px; }

.page-header-actions { display: flex; align-items: center; gap: 14px; }

.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--sv-font-scale, 1));
  color: var(--text-secondary);
}

.snapshot-title { font-family: var(--font-display); font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; }
.snapshot-sub { font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.snapshot-sub b { color: var(--text-main); }

.db-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.stat-label { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-bottom: 10px; }
.stat-value {
  font-family: var(--font-mono);
  font-size: calc(24px * var(--sv-font-scale, 1));
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-value.up { color: var(--up); }
.stat-value.down { color: var(--down); }
.stat-value.live-text { color: var(--up); font-size: calc(20px * var(--sv-font-scale, 1)); }
.stat-sub { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-top: 8px; }

/* ===== generic panel ===== */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.panel-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-title { font-family: var(--font-display); font-size: calc(18px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.panel-sub { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-left: 10px; }

.btn-textlink { font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-main); text-decoration: none; }
.btn-textlink:hover { color: var(--up); }

/* ===== 综合多空比 ===== */
.ls-dominant {
  font-family: var(--font-mono);
  font-size: calc(14px * var(--sv-font-scale, 1));
  font-weight: 700;
}
.ls-dominant.up { color: var(--up); }
.ls-dominant.down { color: var(--down); }

/* 多空比与涨跌分布 2026-08-17 拆成两块独立面板(糖哥:「不要连在一起」)。
   拆开后这块不必再让出横向空间,仪表盘居中即可 —— 它本来就是一眼看方向的东西。 */
.ls-body { display: flex; justify-content: center; }
.ls-panel .ls-gauge { width: 100%; max-width: 340px; }

.ls-gauge { height: 132px; }

.ls-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }   /* 三块改竖排,省出横向空间 */
.ls-card {
  padding: 10px 14px;
  background: var(--bg-core);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ls-k { display: block; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.ls-v { font-family: var(--font-mono); font-size: calc(19px * var(--sv-font-scale, 1)); font-weight: 700; }
.ls-v.up { color: var(--up); }
.ls-v.down { color: var(--down); }

/* ===== 涨跌分布(并入多空比卡片右侧) ===== */
.ls-dist { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dist-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dist-title { font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main); }
.dist-cats { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-core); border: 1px solid var(--line-soft); border-radius: 999px; }
.dist-cat {
  padding: 4px 12px; font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.4; cursor: pointer;
  color: var(--text-muted); background: transparent; border: 0; border-radius: 999px;
}
.dist-cat:hover { color: var(--text-main); }
.dist-cat.active { color: var(--bg-core); background: var(--text-main); font-weight: 600; }
.dist-top .dist-sub { margin-left: auto; }

/* ===== 热力图 ===== */
.heat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.heat-cats, .heat-tfs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-core);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}

.heat-cat, .heat-tf {
  padding: 7px 16px;
  font-size: calc(13px * var(--sv-font-scale, 1));
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.heat-tf { padding: 7px 12px; font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); }
.heat-cat:hover, .heat-tf:hover { color: var(--text-main); }
.heat-cat.active, .heat-tf.active { color: var(--bg-core); background: var(--text-main); }

.heat-right { display: flex; align-items: center; gap: 16px; }
/* 分类撤走后左侧空了:整条右对齐,不留一块无缘无故的空白 */
.heat-toolbar-solo { justify-content: flex-end; }
.heat-legend { display: inline-flex; gap: 6px; }
.heat-legend .lg {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--sv-font-scale, 1));
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.heat-legend .lg.down { background: var(--down); color: #fff; }
.heat-legend .lg.mid { background: var(--bg-tertiary); color: var(--text-secondary); }
.heat-legend .lg.up { background: var(--up); color: #04140c; }

.heat-metaline { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.heat-h2 { font-family: var(--font-display); font-size: calc(16px * var(--sv-font-scale, 1)); font-weight: 700; }
.heat-meta { font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); }

.heatmap {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-core);
}

.heat-tile {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 4px;
  outline: 1px solid var(--bg-core);
  color: #fff;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  transition: filter var(--transition-fast);
}
.heat-tile:hover { filter: brightness(1.18); z-index: 2; }

.ht-inner { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ht-sym { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.ht-pct { font-family: var(--font-mono); font-weight: 600; opacity: 0.92; margin-top: 2px; }

/* ===== 涨跌分布(2026-08-10 起并入多空比卡片,原来的三张小卡已撤) ===== */
.dist-ratio {
  display: flex;
  gap: 3px;
  height: 22px;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--sv-font-scale, 1));
  font-weight: 700;
}
.dr-long, .dr-short {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
}
.dr-long { background: var(--up-soft); color: var(--up); border: 1px solid rgba(46,189,133,0.3); }
.dr-short { background: var(--down-soft); color: var(--down); border: 1px solid rgba(246,70,93,0.3); justify-content: flex-end; }

.dist-sub { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }

.dist-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 116px;   /* 合并成一张图之后给足高度:原来三张挤在一行,柱子矮到看不出形状 */
}
.dist-bar {
  position: relative;
  flex: 1;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
}
.dist-bar.up { background: var(--up); }
.dist-bar.down { background: var(--down); }
.dist-bar i {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--sv-font-scale, 1));
  font-style: normal;
  color: var(--text-secondary);
}
/* 旧的三端点刻度规则(justify-content: space-between)已删:
   现在是逐档刻度,与柱子等宽对齐,规则见文件末尾的 .dist-axis。
   两份同名规则留着迟早打架 —— 后一份胜出纯属顺序侥幸。 */

/* ===== 榜单 ===== */
.rank-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.rank-card {
  padding: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.rank-title {
  font-family: var(--font-display);
  font-size: calc(15px * var(--sv-font-scale, 1));
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.rank-row-item { }
/* 榜单行整行可点直达 K线(糖哥 2026-07-24):a 需显式 grid 才保持原排版 */
.rank-card .rank-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: background .12s;
  padding: 9px 0;
  margin: 0;
}
.rank-card .rank-row:hover { background: var(--accent-soft, rgba(240,185,11,0.10)); }
.rank-card .rank-row:hover .rank-sym { color: var(--warn, #f0b90b); }
.rank-i { font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-disabled); }
.rank-sym { font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 600; }
.rank-val { font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; }
.rank-val.up { color: var(--up); }
.rank-val.down { color: var(--down); }

/* ===== K线概览 ===== */
.ov-list { display: flex; flex-direction: column; }
.ov-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr 1fr 1.2fr;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: calc(13px * var(--sv-font-scale, 1));
}
.ov-row:first-child { border-top: none; }
.ov-sym { font-family: var(--font-display); font-weight: 800; font-size: calc(15px * var(--sv-font-scale, 1)); }
.ov-price, .ov-d { color: var(--text-secondary); }
.ov-chg.up { color: var(--up); }
.ov-chg.down { color: var(--down); }
.ov-dd { color: var(--text-muted); }

/* ===== responsive ===== */
@media (max-width: 1024px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); }
  /* 窄屏:仪表盘与数字块并排一行,分布图整行放到下面(它最需要宽度) */
  .ls-body { grid-template-columns: 200px 1fr; }
  .ls-dist { grid-column: 1 / -1; }
  .rank-row { grid-template-columns: 1fr; }
  .heatmap { height: 400px; }
}

@media (max-width: 768px) {
  .page-header { flex-direction: column; align-items: flex-start; }
  .db-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .heatmap { height: 340px; }
  .ov-row { grid-template-columns: 60px 1fr 1fr; font-size: calc(12px * var(--sv-font-scale, 1)); }
  .ov-d, .ov-dd { display: none; }
  /* 面板头窄屏:标题整行、徽章不再被挤成两行畸形椭圆 */
  .panel-bar { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .panel-title { font-size: calc(16px * var(--sv-font-scale, 1)); }
  .panel-sub { display: block; margin-left: 0; margin-top: 2px; }
  .ahr-panel .ahr-zone { flex: none; white-space: nowrap; }
}

/* 综合多空比窄屏(糖哥 2026-07-24 报"数据页综合多空比这一块"):
   grid 轨道 1fr 的隐含最小值是 min-content,3 列卡片(padding 20)撑到 388px > 面板宽 → 被裁。
   给整条链补 min-width:0 让轨道能收缩,并把卡片内距收小,仪表盘 SVG 按宽自适应。 */
@media (max-width: 640px) {
  .ls-body { min-width: 0; gap: 16px; }
  .ls-gauge { min-width: 0; }
  .ls-gauge svg { width: 100%; height: auto; }
  .ls-cards { gap: 8px; min-width: 0; }
  .ls-card { min-width: 0; padding: 10px 10px; }
  .ls-card .ls-v { font-size: calc(17px * var(--sv-font-scale, 1)); }
  .ls-body { grid-template-columns: 1fr; }   /* 再窄就三块全部竖着堆 */
  .dist-bars { height: 96px; }
  .dist-cats { flex-wrap: wrap; }
}

/* ---- 突破式 / 埋伏式扫描面板 ---- */
/* 突破式 / 埋伏式左右并排(糖哥 2026-07-24);窄屏自动上下堆叠 */
@media (max-width: 1100px) { .scr-duo { grid-template-columns: 1fr; } }
/* 并排后列变窄:压缩列宽,长文本省略,避免横向溢出 */
/* 可点标题 */
/* 历史胜率弹窗 —— .il-mask/.il-modal 原定义在 chart.css,数据页不加载它,
   这里补一份自带的遮罩与窗体基样式(否则弹窗变成页面底部的静态块,屏幕上看不见) */
.il-mask {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */
}
.il-modal {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px;
  background: var(--bg-elevated, #14181f);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.il-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 600;
  color: var(--text-main, #f4f5f7);
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.il-close {
  margin-left: auto; width: 28px; height: 28px; line-height: 1;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--text-muted, #8a8f9c); font-size: calc(20px * var(--sv-font-scale, 1));
}
.il-close:hover { background: rgba(255,255,255,0.07); color: var(--text-main, #f4f5f7); }
.il-body { overflow-y: auto; }

/* 突破式数据整行可点直达 K线(糖哥 2026-07-24) */
@media (max-width: 720px) {
  .main-content { overflow-x: hidden; } /* 收口极小的子像素横向溢出 */
}

/* ---- 合约衍生品 ---- */
/* ===== 清算热力图 / 期权 / CVD(三期)=====
   清算图复用订单簿深度那套横向柱(.obd-*),只多一个「推算」徽标和双向配色:
   高价档=空头爆仓(跌破谁先爆按方向来)、低价档=多头爆仓。 */
.liq-badge {
  font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 600; padding: 2px 9px; border-radius: 999px;
  color: var(--warn-text, #8a6410); background: rgba(240,185,11,.14); border: 1px solid rgba(240,185,11,.3);
}
.liq-body { padding: 12px 16px 16px; }
.liq-note { margin-top: 10px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); line-height: 1.6; }

.opt-body { padding: 12px 16px 16px; }
.opt-row { display: grid; grid-template-columns: 108px 108px 1fr 92px 92px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); font-size: calc(12px * var(--sv-font-scale, 1)); }
.opt-row:last-child { border-bottom: none; }
.opt-head { color: var(--text-muted, #8a8f9c); font-size: calc(11px * var(--sv-font-scale, 1)); border-bottom: 1px solid var(--line-strong, rgba(255,255,255,.1)); padding-bottom: 6px; }
.opt-num { font-family: 'JetBrains Mono', monospace; color: var(--text-main, #f4f5f7); }
/* P/C > 1 = 看跌持仓更重,用 down 色;< 1 用 up 色。两个变量在东亚模式会对调,这里要跟着对调 */
.opt-pc.bear { color: var(--down, #f6465d); }
.opt-pc.bull { color: var(--up, #2ebd85); }
.opt-note { margin-top: 10px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); line-height: 1.6; }

/* ===== 全市场排行:山寨季 + RSI 榜(2026-09-03)=====
   左右两栏,窄屏落成上下。字号一律走 --sv-font-scale。 */
.rank-body { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 18px; padding: 14px 16px 16px; }
@media (max-width: 860px) { .rank-body { grid-template-columns: 1fr; } }
.rank-alt-num { font-family: 'JetBrains Mono', monospace; font-size: calc(38px * var(--sv-font-scale, 1)); font-weight: 700; line-height: 1.05; color: var(--text-main, #f4f5f7); }
.rank-alt-zone { display: inline-block; margin-left: 10px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
/* ⚠️ 这三档配色**固定**不跟 --up/--down:那两个变量在东亚模式下会红绿对调,
   而「山寨季/比特币季」不是涨跌,对调了图例与刻度就自相矛盾(ahr999 那块踩过同样的坑)。 */
.rank-alt-zone.altseason { color: #2ebd85; background: rgba(46,189,133,.14); }
.rank-alt-zone.bitcoin_season { color: #f0b90b; background: rgba(240,185,11,.14); }
.rank-alt-zone.neutral { color: #8a8f9c; background: rgba(148,163,184,.14); }
.rank-alt-track { position: relative; height: 8px; border-radius: 999px; margin: 12px 0 8px; background: linear-gradient(90deg, #f0b90b 0%, #f0b90b 25%, #8a8f9c 25%, #8a8f9c 75%, #2ebd85 75%, #2ebd85 100%); }
.rank-alt-mark { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--text-main, #f4f5f7); }
.rank-alt-note { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); line-height: 1.6; }
.rank-rsi-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .rank-rsi-cols { grid-template-columns: 1fr; } }
.rank-rsi-h { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); margin-bottom: 6px; }
.rank-rsi-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: calc(12.5px * var(--sv-font-scale, 1)); border-bottom: 1px solid var(--line, rgba(255,255,255,.05)); }
.rank-rsi-row:last-child { border-bottom: none; }
.rank-rsi-v { font-family: 'JetBrains Mono', monospace; }
.rank-rsi-v.hot { color: #f6465d; }
.rank-rsi-v.cold { color: #2ebd85; }

/* ===== 视图切换:全市场 / 单标的(2026-09-03 二期)=====
   起因很具体:L1 有七块、L2 六块全堆在它们后面,整页一万八千像素,
   二期新加的订单簿深度落在六成往下 —— 不滚很久根本看不到,等于白做。

   ⚠️ 与顶部大类栏**不是一回事**:那排选市场大类(币圈/美股/贵金属),这排选看哪一层。
   两者正交、可任意组合,所以没有违反「整页只有一个分类入口」那条规矩。

   ⚠️ 显隐用 display:none 而不是改 hidden 属性:大类隔离(syncCryptoOnlyPanels)本来就在
   用 hidden,两套机制各管各的,合起来是 AND —— 既要大类允许、又要当前视图允许才显示。
   写成互相覆盖的话,切个视图就把大类隔离冲掉了。 */
.db-views { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.db-view {
  padding: 6px 16px; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 600;
  color: var(--text-muted, #8a8f9c); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong, rgba(148,163,184,.24)); border-radius: 999px;
}
.db-view:hover { color: var(--text-main, #f4f5f7); }
.db-view.on { color: var(--accent-contrast, #1c2530); background: var(--accent, #f0b90b); border-color: var(--accent, #f0b90b); }
/* 三视图各显各的。⚠️ 标的条(.sym-bar)**不带层级标记**,单独一条规则管它 ——
   它在「单标的」和「实时」下都要在(流水是跟着当前标的的),只在「全市场」下收起。
   写成在 sv-l2/sv-l3 里各挂一份的话,两条规则会互相把它藏掉。 */
body[data-dbview="market"] .sv-l2,
body[data-dbview="market"] .sv-l3,
body[data-dbview="market"] .sym-bar { display: none !important; }
body[data-dbview="symbol"] .sv-l1,
body[data-dbview="symbol"] .sv-l3 { display: none !important; }
body[data-dbview="live"] .sv-l1,
body[data-dbview="live"] .sv-l2 { display: none !important; }

/* ===== 订单簿深度 + 大额挂单(数据页二期,自采数据)=====
   ⚠️ 字号一律 calc(Npx * var(--sv-font-scale,1)),否则全站三档字号在这里失效。
   ⚠️ 买用 --up、卖用 --down:这两个变量在东亚模式(data-cc=east)下会对调,
      而买盘=支撑=红、卖盘=压力=绿正是东亚习惯 —— 这里**要**跟着对调,不能写死颜色。 */
.obd-ex, .lgo-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.obd-body, .lgo-body { padding: 12px 16px 16px; }

.obd-row { display: grid; grid-template-columns: 92px 1fr 104px; align-items: center; gap: 10px; height: 19px; }
.obd-px { font-family: 'JetBrains Mono', monospace; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); text-align: right; }
.obd-track { position: relative; height: 11px; }
/* 棱角柱,不做圆角:站内既有的横向柱(筹码峰)就是这个调子 */
.obd-bar { position: absolute; top: 0; height: 11px; border-radius: 2px; opacity: .85; }
.obd-bar.bid { right: 0; background: var(--up, #2ebd85); }
.obd-bar.ask { left: 0; background: var(--down, #f6465d); }
.obd-usd { font-family: 'JetBrains Mono', monospace; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.obd-mid { display: flex; align-items: center; gap: 8px; margin: 7px 0; padding: 4px 0; border-top: 1px dashed var(--line-strong, rgba(255,255,255,.12)); border-bottom: 1px dashed var(--line-strong, rgba(255,255,255,.12)); }
.obd-mid b { font-family: 'JetBrains Mono', monospace; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.obd-mid span { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }

/* 列宽按**译文**留量,不是按中文:「方向」两字 46px 够,英文 Direction 就溢出压到下一列
   (2026-09-03 首版实测表头挤成「Direction Price」)。去向同理,Still resting 比「仍挂着」长一倍。 */
.lgo-row { display: grid; grid-template-columns: 76px 74px 100px 104px 1fr 104px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); font-size: calc(12px * var(--sv-font-scale, 1)); }
.lgo-row:last-child { border-bottom: none; }
.lgo-head { color: var(--text-muted, #8a8f9c); font-size: calc(11px * var(--sv-font-scale, 1)); border-bottom: 1px solid var(--line-strong, rgba(255,255,255,.1)); padding-bottom: 6px; }
.lgo-ex { color: var(--text-muted, #8a8f9c); }
.lgo-side.bid { color: var(--up, #2ebd85); }
.lgo-side.ask { color: var(--down, #f6465d); }
.lgo-num { font-family: 'JetBrains Mono', monospace; color: var(--text-main, #f4f5f7); }
.lgo-out { font-size: calc(11px * var(--sv-font-scale, 1)); padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.lgo-out.cancelled { color: var(--text-muted, #8a8f9c); background: rgba(148,163,184,.12); }
.lgo-out.eaten { color: var(--accent, #f0b90b); background: rgba(240,185,11,.12); }
.lgo-out.active { color: var(--up, #2ebd85); background: rgba(46,189,133,.12); }
/* L3 流水的表头第一列是**时间**不是交易所,列宽要另给:
   复用 .lgo-row 的 76px 放不下英文时间(实测 "06:28:33 PM" 折成两行)。
   ⚠️ 只在 .sv-l3 里覆盖,不动大额挂单那张表的列宽。 */
/* ⚠️ 1fr 要放在**倒数第二列**(离盘口),不是最后一列 —— 放最后会把「去向」那个小标签
   拉成半个屏幕宽。大额挂单那张表就是 `... 1fr 104px`,这里照它的分配来。 */
.sv-l3 .lgo-row { grid-template-columns: 104px 76px 62px 100px 1fr 104px; }
.sv-l3 .lgo-ex:first-child { font-family: 'JetBrains Mono', monospace; white-space: nowrap; }

.lgo-note { margin-top: 10px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); line-height: 1.6; }

/* 数据源不可用:与「没有数据」必须长得不一样 —— 前者要让人知道是数据源的问题,不是这个币没墙 */
.cd-down { padding: 20px 16px; text-align: center; color: var(--text-muted, #8a8f9c); font-size: calc(12.5px * var(--sv-font-scale, 1)); }
.cd-down b { display: block; margin-bottom: 4px; color: var(--text-main, #f4f5f7); }

/* ===== 单标的深度 · 统一标的条 =====
   下面三块(标的概览 / ahr999 / 合约衍生品)共用一个「当前标的」。
   按钮直接复用 .deriv-sym 的既有胶囊样式,不另造一套 —— 那排按钮本来就是从
   合约衍生品面板里收上来的,样式跟着一起搬,视觉上用户认得出是同一个东西。
   ⚠️ 字号一律走 --sv-font-scale,否则全站三档字号在这里失效。 */
.sym-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
/* 🔴 这条不能省。浏览器默认样式表里 [hidden] 是 display:none,但那只有 UA 级优先级 ——
   上面这个类选择器的 display:flex 会直接盖掉它,于是 el.hidden = true 设了也照样显示,
   而且 DOM 上属性明明在,只有量 rect 才看得出来。站内已因此踩过两次。 */
.sym-bar[hidden] { display: none; }
.sym-bar-label {
  font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600;
  color: var(--text-muted, #8a8f9c); letter-spacing: .02em;
}
.sym-picker { display: flex; gap: 6px; flex-wrap: wrap; }

.deriv-syms { display: flex; gap: 6px; }
.deriv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 14px 16px; }
.deriv-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--bg-elevated, rgba(255,255,255,0.02)); border: 1px solid var(--line-strong, rgba(255,255,255,0.08)); }
.deriv-k { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.deriv-v { font-size: calc(20px * var(--sv-font-scale, 1)); font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text-main, #f4f5f7); }
.deriv-v.up { color: var(--up, #2ebd85); }
.deriv-v.down { color: var(--down, #f6465d); }
.deriv-s { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.deriv-empty { padding: 22px 16px; text-align: center; color: var(--text-muted, #8a8f9c); font-size: calc(12.5px * var(--sv-font-scale, 1)); }
.deriv-sym {
  padding: 5px 14px; border-radius: 999px; font-size: calc(12px * var(--sv-font-scale, 1)); cursor: pointer;
  color: var(--text-muted, #8a8f9c); background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.deriv-sym.active { color: var(--accent-contrast, #1c2530); background: var(--accent, #f0b90b); border-color: var(--accent, #f0b90b); font-weight: 600; }

/* ===== BTC ahr999 囤币指数(糖哥 2026-08-04):长线定投择时参考 =====
   ⚠️配色固定绿=便宜/红=偏热,不可改用 var(--up)/var(--down):
   那两个变量在东亚模式(data-cc=east)下会红绿对调,会让图例与刻度条自相矛盾。 */
.ahr-panel .ahr-zone { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.ahr-panel .ahr-zone.z-buy { color: #2ebd85; background: rgba(46, 189, 133, 0.12); border-color: rgba(46, 189, 133, 0.32); }
.ahr-panel .ahr-zone.z-dca { color: #f0b90b; background: rgba(240, 185, 11, 0.12); border-color: rgba(240, 185, 11, 0.32); }
.ahr-panel .ahr-zone.z-wait { color: #f6465d; background: rgba(246, 70, 93, 0.12); border-color: rgba(246, 70, 93, 0.32); }

.ahr-main { display: flex; align-items: center; gap: 22px; padding: 14px 16px 6px; }
.ahr-num { font-size: calc(34px * var(--sv-font-scale, 1)); font-weight: 700; line-height: 1; letter-spacing: -0.5px; color: var(--text-main, #f4f5f7); font-variant-numeric: tabular-nums; min-width: 108px; }
.ahr-scale { flex: 1; min-width: 0; }
.ahr-track { position: relative; display: flex; height: 8px; border-radius: 999px; overflow: visible; }
.ahr-seg { flex: 1; height: 8px; }
.ahr-seg.seg-buy { background: rgba(46, 189, 133, 0.55); border-radius: 999px 0 0 999px; }
.ahr-seg.seg-dca { background: rgba(240, 185, 11, 0.55); }
.ahr-seg.seg-wait { background: rgba(246, 70, 93, 0.55); border-radius: 0 999px 999px 0; }
.ahr-marker { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--text-main, #fff); box-shadow: 0 0 0 2px var(--bg-panel, #08090c); transform: translateX(-2px); transition: left 0.35s ease; }
.ahr-legend { display: flex; gap: 16px; margin-top: 9px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); flex-wrap: wrap; }
.ahr-legend i.ahr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ahr-dot.buy { background: #2ebd85; }
.ahr-dot.dca { background: #f0b90b; }
.ahr-dot.wait { background: #f6465d; }

.ahr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 16px 4px; }
.ahr-card { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-radius: 8px; background: var(--bg-tertiary, #101217); border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.07)); }
.ahr-k { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.ahr-v { font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main, #f4f5f7); font-variant-numeric: tabular-nums; }
.ahr-note { padding: 8px 16px 14px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-muted, #8a8f9c); }

@media (max-width: 720px) {
  .ahr-main { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 12px 4px; }
  .ahr-num { font-size: calc(28px * var(--sv-font-scale, 1)); min-width: 0; }
  .ahr-cards { grid-template-columns: repeat(2, 1fr); padding: 8px 12px 4px; }
  .ahr-note { padding: 8px 12px 12px; }
}

/* 双轨显示:校准版大字 + 原版小字(糖哥 2026-08-04) */
.ahr-numwrap { min-width: 108px; }
.ahr-numwrap .ahr-num { min-width: 0; }
.ahr-raw { margin-top: 4px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-variant-numeric: tabular-nums; }


/* ===== 页面级大类(糖哥 2026-08-17:整页唯一的分类入口) =====
   下方所有面板都跟着它走,各面板一律不再自带分类按钮。
   形态照抄站内既有的 tab 条(市场页/图表页同款),不另起一套。 */
.db-cats {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.db-cat {
  padding: 8px 20px;
  font-size: calc(13.5px * var(--sv-font-scale, 1));
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.db-cat:hover { color: var(--text-main); border-color: var(--line-strong, rgba(148,163,184,.34)); }
.db-cat.on {
  color: var(--bg-core, #0b0e11);
  background: var(--text-main, #eaecef);
  border-color: var(--text-main, #eaecef);
}

/* 概览:当前这一类的关键数字。只报数,不承担切换(切换归上面那一排),
   所以是静态格子 —— 不给 hover/选中态,免得看着像可点却点不动。 */
/* 固定 5 列(布局建议 C):auto-fit 会让「全部」的 5 格和「币圈」的 7 格宽度乱跳,
   同一个页面切一下大类,格子尺寸就变一次,读起来很晃。多出来的格子换行,宽度始终一致。 */
/* .mkt-overview 概览带已撤(2026-08-21),网格样式随之删除 */
.mo-cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.mo-k { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.mo-v { font-family: var(--font-mono); font-size: calc(22px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: .5px; }
.mo-v.up { color: var(--up); }
.mo-v.down { color: var(--down); }
.mo-empty {
  grid-column: 1 / -1;
  padding: 22px;
  text-align: center;
  color: var(--text-muted);
  font-size: calc(12.5px * var(--sv-font-scale, 1));
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

/* 仪表盘下的读数:空在左、多在右,与表盘、与翻转后的分布图同向 */
.ls-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: calc(17px * var(--sv-font-scale, 1));
  font-weight: 700;
  margin-top: 2px;
}
.ls-readout i { font-style: normal; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 500; color: var(--text-muted); }
.lsr-short { color: var(--down); }
.lsr-long { color: var(--up); }
.ls-sample {
  margin-top: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: calc(11.5px * var(--sv-font-scale, 1));
  color: var(--text-muted);
}

/* 榜单撤走后的去处(撤功能必须给去处) */
.db-more-markets {
  display: block;
  padding: 14px 18px;
  margin-bottom: 28px;
  text-align: center;
  font-size: calc(13px * var(--sv-font-scale, 1));
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.db-more-markets:hover { color: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); }

/* BTC 区块:四张卡(换手率那张常常拿不到数据,会被 JS 藏起来,所以用自适应列而不是写死 5 列) */
.btc-panel .db-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 0; }

@media (max-width: 900px) {
  .db-cat { padding: 7px 15px; font-size: calc(13px * var(--sv-font-scale, 1)); }
  .ls-body { grid-template-columns: 1fr; }
}

/* ===== 各市场专属结构(糖哥 2026-08-17:三个市场不必求同) =====
   同一块地方随大类换内容,所以样式要能同时装下:币圈的多列交易所对比、
   美股的行业排行、贵金属的几个比值。用自适应列而不是写死栅格。 */
.mp-body { display: flex; flex-direction: column; gap: 16px; }
.mp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.mp-cell {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px;
  background: var(--bg-core, rgba(0,0,0,.18));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.mp-k { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.mp-v { font-family: var(--font-mono); font-size: calc(18px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-v.up { color: var(--up); } .mp-v.down { color: var(--down); } .mp-v.acc { color: var(--warn, #f0b90b); }
.mp-sub { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }

.mp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.mp-col {
  padding: 13px 15px;
  background: var(--bg-core, rgba(0,0,0,.18));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.mp-col-h { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-bottom: 9px; }
.mp-col-h.up { color: var(--up); } .mp-col-h.down { color: var(--down); }
.mp-ex {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: calc(12.5px * var(--sv-font-scale, 1));
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.mp-ex span:first-child { color: var(--text-muted); font-family: var(--font-sans, inherit); }

.mp-sector { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; flex-wrap: wrap; }
.mp-sec-name { font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; min-width: 62px; }
.mp-sec-avg { font-family: var(--font-mono); font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-sec-avg.up { color: var(--up); } .mp-sec-avg.down { color: var(--down); }
.mp-sec-meta { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-left: auto; }

/* 数据来源必须写在脸上:回退到免费源时用弱化色 + 明说,不冒充聚合口径 */
.mp-src { font-family: var(--font-mono); font-size: calc(11.5px * var(--sv-font-scale, 1)); }
.mp-src.ok { color: var(--text-muted); }
.mp-src.degraded { color: var(--warn, #f0b90b); }
.mp-note { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); line-height: 1.6; }
.mp-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: calc(12.5px * var(--sv-font-scale, 1)); }

/* ===== 全市场指数带(蓝图①) =====
   放在大类与概览之间:先看全局温度(恐惧贪婪/市占/大盘),再看当前这一类的家数。
   格子比概览矮一档 —— 它是背景信息,不该跟主数据抢视线。
   2026-08-17 按含义分组(情绪/加密规模/外部市场):一排平铺时权重相同,
   眼睛不知道哪几个该一起读。 */
.idx-band { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; }
.idx-group { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.idx-group-name {
  flex: none;
  writing-mode: vertical-rl;
  font-size: calc(10.5px * var(--sv-font-scale, 1));
  letter-spacing: .18em;
  color: var(--text-muted);
  opacity: .75;
  padding: 2px 0;
  border-left: 2px solid var(--line-soft);
  padding-left: 6px;
}
.idx-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.idx-band:empty { display: none; margin: 0; }
.idx-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.idx-k { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.idx-v { font-family: var(--font-mono); font-size: calc(15.5px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.idx-v.up { color: var(--up); } .idx-v.down { color: var(--down); } .idx-v.acc { color: var(--warn, #f0b90b); }
.idx-sub { font-family: var(--font-mono); font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
/* 概览格的口径小字(高波动/触及极值那两格要标明算法) */
.mo-sub { font-family: var(--font-mono); font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }

/* ===== 市场异动(蓝图⑥) ===== */
.pulse-body { display: flex; flex-direction: column; gap: 14px; }
.pulse-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 6px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
}
.pulse-row:last-child { border-bottom: 0; }
.pulse-name { font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; min-width: 68px; }
.pulse-count { font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.pulse-count.up { color: var(--up); } .pulse-count.down { color: var(--down); }
.pulse-syms { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-left: auto; }
.pulse-total { font-family: var(--font-mono); font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-left: 8px; font-weight: 400; }
.pulse-big { font-family: var(--font-mono); font-size: calc(22px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--warn, #f0b90b); margin: 4px 0 8px; }


/* ===== 涨跌分布(独立成块) ===== */
.dist-panel .dist-ratio { margin-bottom: 14px; }
.dist-panel .dist-bars { height: 168px; }        /* 独立成块后给足高度,柱子形状才读得出来 */

/* 逐档刻度(参考 AICoin 的格式):一根柱子一个档位。
   ⚠️gap 必须与 .dist-bars 的 5px 一致 —— 差 2px,11 根柱子累计下来刻度就会整体偏出去半格。 */
.dist-axis {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}
.dist-axis span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--sv-font-scale, 1));
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  /* 窄屏 11 个刻度会挤成一团:隔一个显示一个,保住可读性 */
  .dist-axis span:nth-child(even) { visibility: hidden; }
}


/* 多空比 + 涨跌分布并排一行(糖哥 2026-08-17:「不要作为两行显示,这样太占地方」)。
   左窄右宽:仪表盘只要放得下一个半圆,分布图要吃下 11 根柱子和 11 个刻度。
   两张卡各自有边框,视觉上仍是分开的两块 —— 拆块是为了不连在一起,不是为了多占一行。 */
.ls-row {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);   /* 296px 时「综合多空比 · 基于全部品种涨跌占比估算」会折三行 */
  gap: 14px;
  margin-bottom: 22px;
}
.ls-row > .panel { margin-bottom: 0; }
.ls-row .ls-panel .ls-gauge { max-width: 250px; }
.ls-row .dist-panel .dist-bars { height: 150px; }
@media (max-width: 1000px) {
  /* 放不下就退回上下两块 —— 挤成两列反而两边都看不清 */
  .ls-row { grid-template-columns: 1fr; }
}
/* 各交易所爆仓:总额右对齐,多空拆分跟在后面用弱化色 —— 一行里两级信息 */
.mp-liq-split { font-style: normal; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-left: 8px; }

/* ===== 交易所份额 + 跨所价差并排(糖哥 2026-08-21:两组数据并排省一整卡高度) =====
   auto-fit:大类切到美股/贵金属时两卡都 hidden(display:none 不生成 grid item),
   只剩一卡可见时自动占满整行,不留半边空洞。窄屏退回单列,小屏并排只会两边都挤扁。 */
.exs-xsp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.exs-xsp-row > .panel { min-width: 0; }
@media (max-width: 1100px) { .exs-xsp-row { grid-template-columns: 1fr; } }

/* ===== 交易所份额(统计形态;2026-08-21 糖哥拍板改环形占比图) =====
   现货/永续拆分与交易对数收进行级 title(悬停出),文字只留 名称+占比+金额 —— 繁琐数字变图形。 */
/* 图例移到环下方横排(糖哥 2026-08-21:文字移至下方),环居中放大一档 */
.exs-body { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* OKX 品牌是黑白:深色主题用白,浅色主题用近黑,否则白段在浅底上隐形 */
:root { --exs-okx: #ffffff; }
:root[data-theme="light"] { --exs-okx: #1e2329; }
.exs-donut-wrap { position: relative; width: 156px; height: 156px; flex: none; }
.exs-donut { width: 100%; height: 100%; border-radius: 50%; }
.exs-donut-center { position: absolute; inset: 22px; border-radius: 50%; background: var(--bg-panel, #12161c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.exs-donut-center b { font-family: var(--font-mono); font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.exs-donut-center span { font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.exs-legend { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.exs-lg-row { display: flex; align-items: center; gap: 7px; }
.exs-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.exs-name { font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 650; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.exs-miss { font-family: var(--font-mono); font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--warn, #f0b90b); font-weight: 400; }
.exs-pct { margin-left: 2px; font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.exs-val { font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.exs-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.07)); display: flex; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.exs-foot .exs-hint { margin-left: auto; }

/* ===== 跨所价差(糖哥 2026-08-19「在数据栏里再单独做一个板块」) =====
   行结构照抄同页「交易所份额」那张卡(grid-areas 同一套),数据页里不另起一种形态。 */
.xsp-tabs { display: inline-flex; gap: 4px; }
.xsp-tab { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.1)); background: transparent; color: var(--text-muted); font-size: calc(11.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.xsp-tab:hover { color: var(--text-main); }
.xsp-tab.on { color: var(--text-main); border-color: rgba(240,185,11,.6); background: rgba(240,185,11,.08); }
.xsp-body { display: flex; flex-direction: column; gap: 12px; }
/* 2026-08-21 糖哥拍板收成单行:名称|条|价差|净差|高低对比;
   "N 所 · 成交额"进行级 title(悬停出),高低对比去掉市场后缀与"高/低"字(› = 从高到低)。
   净价差是"值不值得做"的那个数(2026-08-19 拍板),单行版必须保留。 */
.xsp-row {
  display: grid;
  grid-template-columns: 56px minmax(36px, 1fr) 56px 68px auto;
  grid-template-areas: "name bar pct net way";
  align-items: center;
  gap: 4px 10px;
  cursor: pointer;
}
.xsp-row:hover .xsp-name { color: var(--warn, #f0b90b); }
.xsp-name { grid-area: name; font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.xsp-bar { grid-area: bar; height: 8px; background: var(--bg-core, rgba(0,0,0,.25)); border-radius: 999px; overflow: hidden; }
.xsp-bar i { display: block; height: 100%; background: var(--warn, #f0b90b); opacity: .8; border-radius: 999px; }
.xsp-pct { grid-area: pct; font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* 超阈值才上暖色:常态价差就是 0.0x%,全标红等于天天喊狼来了 */
.xsp-pct.hot { color: var(--warn, #f0b90b); }
.xsp-way { grid-area: way; font-family: var(--font-mono); font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
/* 免责与口径:必须在板块里看得见,不能只藏在 title 里 */
.xsp-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.07)); font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-muted); }

/* 市场异动里的标的名可点进 K 线(糖哥 2026-08-19) */
.db-sym-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.db-sym-go:hover { color: var(--warn, #f0b90b); text-decoration: underline; }
.db-sym-dot { font-style: normal; margin: 0 4px; opacity: .5; }

/* 跨所价差:标题后的展开开关(默认只露前三行) */
.xsp-more { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text-muted); font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; vertical-align: middle; }
.xsp-more:hover { color: var(--text-main); border-color: var(--warn, #f0b90b); }
.xsp-more.on { color: var(--warn, #f0b90b); border-color: rgba(240,185,11,.55); }
.xsp-more i { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); transition: transform .15s; }
.xsp-more.on i { transform: rotate(180deg); }

/* 面板折叠开关(通用组件 sv-collapse.js;样式各页各留一份,类名一致) */
.sv-collapse-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; border-radius: 7px; border: 1px solid var(--line, rgba(255,255,255,.1)); background: transparent; color: var(--text-muted); cursor: pointer; flex: none; }
.sv-collapse-btn:hover { color: var(--text-main); border-color: var(--warn, #f0b90b); }
.sv-collapse-btn i { font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); transition: transform .15s; }
.panel.sv-collapsed .sv-collapse-btn i { transform: rotate(-90deg); }
/* 收起 = 只留标题条,面板里其余内容全隐;不动内容本身,展开还是那一份 */
.panel.sv-collapsed > *:not(.panel-bar):not(.heat-toolbar):not(.snapshot-head) { display: none; }
/* ⚠️宽度必须钉住:面板是 grid/flex 子项,内容一藏宽度就由内容决定 ——
   实测收起后整块塌成 42px、标题被压成竖排(2026-08-19)。 */
.panel.sv-collapsed { padding-bottom: 8px; width: 100%; justify-self: stretch; align-self: start; box-sizing: border-box; }
.panel.sv-collapsed > .panel-bar, .panel.sv-collapsed > .heat-toolbar { width: 100%; flex-wrap: nowrap; }
.panel.sv-collapsed .panel-title, .panel.sv-collapsed .panel-sub { white-space: nowrap; }
.panel .panel-bar, .panel .heat-toolbar { position: relative; }
/* 热力图工具条是 flex 排的,开关顶到最右免得夹在控件中间 */
.heat-toolbar .sv-collapse-btn { margin-left: auto; }

/* 细分项「全部 N / 收起」开关(市场异动的六张子卡) */
.pulse-more { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text-muted); font-size: calc(10.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.pulse-more:hover { color: var(--text-main); border-color: var(--warn, #f0b90b); }
.pulse-more.on { color: var(--warn, #f0b90b); border-color: rgba(240,185,11,.55); }
.pulse-more i { font-style: normal; font-size: calc(8px * var(--sv-font-scale, 1)); transition: transform .15s; }
.pulse-more.on i { transform: rotate(180deg); }
/* 展开后:已突破 / 逼近中 分组列全名单 */
.pulse-sub { margin-top: 8px; }
.pulse-sub-h { display: block; margin-bottom: 4px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.pulse-syms-wrap { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pulse-syms-wrap .pulse-syms { white-space: nowrap; }

/* 细分项「全部 N / 收起」(糖哥 2026-08-19:每张子卡都要能看全名单) */
.pulse-more { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text-muted); font-size: calc(10.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.pulse-more:hover { color: var(--text-main); border-color: var(--warn, #f0b90b); }
.pulse-more.on { color: var(--warn, #f0b90b); border-color: rgba(240,185,11,.55); }
.pulse-more i { font-style: normal; font-size: calc(8px * var(--sv-font-scale, 1)); transition: transform .15s; }
.pulse-more.on i { transform: rotate(180deg); }
/* 展开后的分组:已突破 / 逼近中 各列一组,不混成一串 */
.pulse-sub { margin-top: 8px; }
.pulse-sub-h { display: block; margin-bottom: 4px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.pulse-syms-wrap { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pulse-syms-wrap .pulse-syms { white-space: nowrap; }
.db-sym-rest { font-style: normal; margin-left: 5px; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted); }
/* 跨所价差:去全量页的入口(数据页只报前几名,全量在 /spread) */
.xsp-all { margin-left: 8px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.xsp-all:hover { color: var(--warn, #f0b90b); }
.xsp-way i { font-style: normal; }
.xsp-way b { font-weight: 500; }
.xsp-way b { font-weight: 500; }

/* 跨所价差·净价差(糖哥 2026-08-19):最新价差只是参考,扣完双边手续费还为正才是真机会 */
.xsp-net { grid-area: net; font-family: var(--font-mono); font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.xsp-net.good { color: var(--up, #2ebd85); }
.xsp-net.bad { color: var(--text-dim, #9aa0aa); }
.xsp-net.na { color: var(--text-dim, #9aa0aa); opacity: .7; font-weight: 500; }

/* ---- 说明文字的阅读宽度(糖哥 2026-08-24「让网站在每个用户的屏幕上显得协调」)----
   页面副标题/小字说明原本没有宽度上限,一路横跨整个版心。1280 屏上就已经 1216px 一行,
   版心放宽后到 1768px —— 一行装得下四十多个汉字还有富余,眼睛扫到行尾就找不回行首了。
   给一个上限,靠左不动,只是不再无限伸长。 */
.page-description { max-width: min(100%, 860px); }