/* 跨所价差全量页(糖哥 2026-08-19)
   表格形态照站内既有行情表(市场页 .market-table / 数据页 .panel),不另起一套观感。 */
@import url('global.css');

.sp-back { font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted); text-decoration: none; }
.sp-back:hover { color: var(--text-main); }

/* 口径条:市场档 + 流动性下限。两者都决定榜单含义,所以摆在表前面而不是塞进表头 */
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 14px; }
.sp-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg-sunken, rgba(255,255,255,.04)); }
.sp-seg-btn { padding: 5px 12px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-size: calc(12.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.sp-seg-btn:hover { color: var(--text-main); }
.sp-seg-btn.on { background: var(--bg-card, rgba(255,255,255,.08)); color: var(--text-main); font-weight: 600; }
.sp-meta { margin-left: auto; font-family: var(--font-mono, monospace); font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }

.sp-sort { display: inline-flex; gap: 4px; }
.sp-sort-btn { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: transparent; color: var(--text-muted); font-size: calc(11.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.sp-sort-btn:hover { color: var(--text-main); }
.sp-sort-btn.on { color: var(--warn, #f0b90b); border-color: rgba(240,185,11,.55); }

.sp-table-wrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th { padding: 9px 12px; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 500; color: var(--text-muted); text-align: left; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.07)); white-space: nowrap; }
.sp-table th.th-num { text-align: right; }
.sp-table th.th-rank { width: 46px; text-align: center; }
.sp-table td { padding: 10px 12px; font-size: calc(13px * var(--sv-font-scale, 1)); border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.05)); }
.sp-table tbody tr { cursor: pointer; transition: background .12s; }
.sp-table tbody tr:hover { background: var(--bg-hover, rgba(255,255,255,.035)); }
.sp-table .rank-cell { text-align: center; font-family: var(--font-mono, monospace); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.sp-table .name-cell { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--text-main); }
.sp-table tbody tr:hover .name-cell { color: var(--warn, #f0b90b); }
.sp-table .num { text-align: right; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
/* 价差数值是这张表的主角:超阈值上暖色,常态保持中性 —— 全标红等于天天喊狼来了 */
.sp-table .pct-cell { font-weight: 700; color: var(--text-main); }
.sp-table .pct-cell.hot { color: var(--warn, #f0b90b); }
/* 净价差(糖哥 2026-08-19):扣掉双边手续费后还剩多少 —— 只有绿的那几行才值得做,
   灰的是"看着有差、实际做完是亏的"。这一列比左边的价差列更该被看见。 */
.sp-table .net-cell { font-weight: 700; }
.sp-table .net-cell.good { color: var(--up, #2ebd85); }
.sp-table .net-cell.bad { color: var(--text-dim, #9aa0aa); }
.sp-table .net-cell.na { color: var(--text-dim, #9aa0aa); opacity: .7; font-weight: 500; }
.sp-table .way-cell { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted); white-space: nowrap; }
.sp-table .way-hi { color: var(--text-secondary, #b0b4bd); }
.sp-table .way-sep { margin: 0 6px; opacity: .5; }
.sp-table .vol-cell { color: var(--text-muted); }
.sp-empty { padding: 28px 12px; text-align: center; color: var(--text-muted); font-size: calc(13px * var(--sv-font-scale, 1)); }

/* 口径与免责:必须看得见,不能只藏在 tooltip 里 */
.sp-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.07)); font-size: calc(11.5px * var(--sv-font-scale, 1)); line-height: 1.65; color: var(--text-muted); }

@media (max-width: 720px) {
  .sp-bar { gap: 8px; }
  .sp-meta { margin-left: 0; flex-basis: 100%; }
  .sp-table .way-cell { white-space: normal; }
}
/* 价格用 <i> 单独包住(为了给它挂 data-i18n-skip),不要斜体 */
.sp-table .way-cell i { font-style: normal; }
/* 高/低单独成节点(单字词条只有整节点匹配才会被翻译),不要加粗 */
.sp-table .way-cell b { font-weight: 500; }
/* 高/低单独成节点(单字词条只有整节点匹配才会被翻译),不要加粗 */
.sp-table .way-cell b { font-weight: 500; }

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