.page-main {
  padding-top: 120px;
  padding-bottom: 80px;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}

.page-title {
  font-size: calc(32px * var(--sv-font-scale, 1));
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}

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

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  width: 320px;
  transition: all var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-soft);
}

.search-box svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  min-height: 42px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: calc(14px * var(--sv-font-scale, 1));
  font-family: var(--font-sans);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.market-board {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-tertiary);
  flex-wrap: wrap;
  gap: 16px;
}

.market-tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.market-tabs::-webkit-scrollbar { display: none; }

.market-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  font-size: calc(14px * var(--sv-font-scale, 1));
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}

.market-tab:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.market-tab.active {
  color: var(--bg-core);
  background: var(--text-main);
}

.board-filters {
  display: flex;
  gap: 8px;
}

.filter-btn {
  min-height: 44px;
  padding: 6px 14px;
  font-size: calc(13px * var(--sv-font-scale, 1));
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.filter-btn.active {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-soft);
}

.market-table-container {
  overflow-x: auto;
}

.market-table {
  width: 100%;
  border-collapse: collapse;
}

.market-table th,
.market-table td {
  padding: 16px 20px;
  text-align: left;
}

.market-table th {
  font-size: calc(12px * var(--sv-font-scale, 1));
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.th-star {
  width: 40px;
}

.th-go { width: 40px; }
.cell-go { width: 40px; text-align: right; }
.go-arrow {
  display: inline-block; color: var(--text-muted); font-size: calc(20px * var(--sv-font-scale, 1)); line-height: 1;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.market-table tbody tr:hover .go-arrow { color: var(--text-main); transform: translateX(2px); }

.market-table tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.market-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.market-table tbody tr:last-child {
  border-bottom: none;
}

.star-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  padding: 0;
}

.star-btn:hover {
  color: var(--accent-yellow);
  transform: scale(1.1);
}

.star-btn.active {
  color: var(--accent-yellow);
}

.symbol-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.symbol-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-cyan-soft);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--sv-font-scale, 1));
  font-weight: 700;
  color: var(--accent-cyan);
  flex-shrink: 0;
}

.symbol-info {
  min-width: 0;
}

.symbol-name {
  font-size: calc(14px * var(--sv-font-scale, 1));
  font-weight: 600;
  margin-bottom: 2px;
}

.symbol-tag {
  font-size: calc(12px * var(--sv-font-scale, 1));
  color: var(--text-muted);
}

.price-cell {
  font-family: var(--font-mono);
  font-size: calc(15px * var(--sv-font-scale, 1));
  font-weight: 600;
}

.change-cell {
  font-family: var(--font-mono);
  font-size: calc(14px * var(--sv-font-scale, 1));
  font-weight: 600;
}

.change-cell.up {
  color: var(--accent-green);
}

.change-cell.down {
  color: var(--accent-red);
}

.volume-cell {
  font-family: var(--font-mono);
  font-size: calc(14px * var(--sv-font-scale, 1));
  color: var(--text-secondary);
}

/* 按 tab 隐藏无数据的列(糖哥 2026-07-24:加密全有;美股缺走势图;全部/贵金属/自选缺成交额+市值+换手率+走势图。
   露空列满屏 — 看着像坏了,所以该 tab 没数据就整列(表头+单元格)隐藏,每个 tab 都是完整表。) */
/* 美股/全部/自选:有成交额/市值/换手率(全部/自选由 coins+新浪 merge 补齐),但无走势图 → 只隐藏走势图列 */
:is(.market-table-exchange[data-tab="stocks"], .market-table-exchange[data-tab="all"], .market-table-exchange[data-tab="watchlist"])
  :is(.th-spark, .spark-cell) { display: none; }
/* 贵金属:现货金属无成交额/市值/换手率/走势图 → 全隐藏,只留价/涨跌 */
.market-table-exchange[data-tab="metals"]
  :is(th[data-sort="volume"], .volume-cell, th[data-sort="marketcap"], .mcap-cell, th[data-sort="turnover"], .turnover-cell, .th-spark, .spark-cell) { display: none; }

/* ===== 交易所式行情表(糖哥 2026-07-24:PC 对齐行情列表布局) ===== */
/* ⚠️ .ex-table(交易所看板)与主表共享同一套列头/数字列规则(糖哥 2026-08-13 永久命令:
   新栏目的呈现形式必须与既有一致)——改这里两表一起变,不许各自为政。 */
.market-table-exchange .num, .market-table-exchange .th-num, .ex-table .num, .ex-table .th-num { text-align: right; font-variant-numeric: tabular-nums; }
.market-table-exchange .th-name, .ex-table .th-name { text-align: left; }
.market-table-exchange .th-rank, .market-table-exchange .rank-cell, .ex-table .th-rank, .ex-table .rank-cell { text-align: center; color: var(--text-muted); font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); width: 44px; }
/* 可排序列头:悬停变亮,当前排序列高亮 + 箭头 */
.market-table-exchange .th-sort, .ex-table .th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.market-table-exchange .th-sort:hover, .ex-table .th-sort:hover { color: var(--text-main); }
.market-table-exchange .th-sort.sorted, .ex-table .th-sort.sorted { color: var(--accent-cyan, #2ebd85); }
.market-table-exchange .th-sort.sorted::after, .ex-table .th-sort.sorted::after { content: '▼'; font-size: calc(9px * var(--sv-font-scale, 1)); margin-left: 4px; }
.market-table-exchange .th-sort.sorted[data-dir="asc"]::after, .ex-table .th-sort.sorted[data-dir="asc"]::after { content: '▲'; }
/* 24h 涨跌做成色块(交易所式,醒目)。⚠️色块必须是内层 span,不能把 td 设 inline-block——
   否则 td 脱离表格列布局,表头与值对不齐(糖哥 2026-07-24 报全部 tab 位移即此) */
.market-table-exchange .change-cell { text-align: right; }
.chg-pill {
  display: inline-block; min-width: 62px; text-align: center;
  padding: 3px 8px; border-radius: 6px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700;
}
.chg-pill.up { color: var(--accent-green); background: rgba(46,189,133,0.12); }
.chg-pill.down { color: var(--accent-red); background: rgba(246,70,93,0.12); }
/* 迷你走势图:折线 + 低透明面积填充(交易所式精致感) */
.market-table-exchange .th-spark { text-align: center; width: 112px; }
.spark-cell { text-align: center; }
.spark { display: inline-block; vertical-align: middle; }
.spark.up .spark-line { stroke: var(--accent-green, #2ebd85); }
.spark.down .spark-line { stroke: var(--accent-red, #f6465d); }
.spark.up .spark-area { fill: rgba(46,189,133,0.14); }
.spark.down .spark-area { fill: rgba(246,70,93,0.14); }
.spark-na { color: var(--text-muted, #8a8f9c); font-size: calc(12px * var(--sv-font-scale, 1)); }
.market-table-exchange .turnover-cell { font-family: var(--font-mono); }

/* ===== 行/列头/悬停精修(糖哥 2026-07-24:观感对齐交易所) ===== */
.market-table-exchange { border-collapse: separate; border-spacing: 0; }
.market-table-exchange thead th {
  padding: 12px 16px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600;
  color: var(--text-muted, #8a8f9c); letter-spacing: .02em;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  background: transparent;
}
.market-table-exchange tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.045)); vertical-align: middle; }
.market-table-exchange tbody tr, .ex-table tbody tr { transition: background .12s; cursor: pointer; }
.market-table-exchange tbody tr:hover, .ex-table tbody tr:hover { background: var(--bg-hover, rgba(255,255,255,0.035)); }
.market-table-exchange .name-td .symbol-cell, .ex-table .name-td .symbol-cell { display: flex; align-items: center; gap: 12px; }
.market-table-exchange .symbol-name, .ex-table .symbol-name { font-size: calc(14.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7); line-height: 1.25; }
.market-table-exchange .symbol-tag, .ex-table .symbol-tag { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); line-height: 1.25; }
.market-table-exchange .symbol-icon, .market-table-exchange .coin-logo, .ex-table .symbol-icon, .ex-table .coin-logo { width: 30px; height: 30px; }
.market-table-exchange .price-cell, .ex-table .price-cell { font-size: calc(14.5px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); font-weight: 600; }
.market-table-exchange .star-btn { color: var(--text-muted, #8a8f9c); }
.market-table-exchange .star-btn.active { color: var(--accent-yellow, #f0b90b); }
.market-table-exchange .cell-go .go-arrow { color: var(--text-muted, #6b7080); font-size: calc(18px * var(--sv-font-scale, 1)); }
.market-table-exchange tbody tr:hover .cell-go .go-arrow { color: var(--accent-green, #2ebd85); }
/* 市值列(交易所式) */
.market-table-exchange .mcap-cell { font-family: var(--font-mono); color: var(--text-secondary, #b0b4bd); }
/* 竖向渐变走势图:面积 fill 走 url(#sparkUp/Dn),这里只兜底折线色 */
.spark .spark-line { stroke: var(--accent-green, #2ebd85); }
.spark.down .spark-line { stroke: var(--accent-red, #f6465d); }

/* 换手率列(糖哥 2026-07-24):24h成交额÷流通市值,分档着色便于一眼扫热度 */
.turnover-cell { font-family: var(--font-mono); font-size: calc(14px * var(--sv-font-scale, 1)); }
.turnover-hot { color: var(--warn, #f0b90b); font-weight: 600; }
.turnover-mid { color: var(--text-secondary, #c9cdd6); }
.turnover-cold { color: var(--text-muted, #8a8f9c); }
.turnover-na { color: var(--text-muted, #8a8f9c); }

.table-actions {
  display: flex;
  gap: 8px;
}

.table-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--accent-cyan-soft);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  font-size: calc(13px * var(--sv-font-scale, 1));
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.table-link:hover {
  background: var(--accent-cyan);
  color: var(--bg-primary);
}

/* ===== header actions ===== */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 12px;
  font-size: calc(12px * var(--sv-font-scale, 1));
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.btn-small.btn-secondary { border-color: var(--line-strong); color: var(--text-main); background: transparent; }
.btn-small.btn-secondary:hover { background: var(--accent-soft); }
.btn-small.btn-text { color: var(--text-muted); background: transparent; }
.btn-small.btn-text:hover { color: var(--text-main); }


@media (max-width: 1024px) {
  .alerts-grid { grid-template-columns: repeat(2, 1fr); }
  .page-header-actions { width: 100%; }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-box {
    width: 100%;
  }
  
  .board-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 10px;
  }

  .board-filters {
    width: 100%;
    overflow-x: auto;
  }

  /* 窄屏资产 tabs:收紧字距让 5 个 tab 一行放下,不再把「全部」切一半 */
  .market-tabs { width: 100%; gap: 2px; }
  .market-tab { min-height: 38px; padding: 7px 10px; font-size: calc(13px * var(--sv-font-scale, 1)); }
}

@media (max-width: 768px) {
  .alerts-grid { grid-template-columns: 1fr; }
  .page-main {
    padding-top: 100px;
  }
  
  .page-title {
    font-size: calc(24px * var(--sv-font-scale, 1));
  }
  
  /* 手机端市场列表:交易所手机行情行卡(糖哥 2026-07-24 二版:把走势图/成交额放回来)。
     每行重排为 [★] [图标+名称·成交额] [走势图] [价格 / 涨跌色块] —— 纯 CSS 转 grid,不动表结构。
     成交额显示在名称下方(替下交易对),换手率/市值/交易按钮手机端仍收起(空间不够,进图表看全)。 */
  .market-table thead { display: none; }
  .market-table, .market-table tbody { display: block; }
  .market-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "star sym spark price"
      "star vol spark change";
    align-items: center;
    column-gap: 9px;
    row-gap: 2px;
    padding: 9px 12px; /* 紧凑:糖哥要求行情行密度向 AICoin 看齐 */
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  }
  .market-table tbody td { display: block; padding: 0; border: none; }
  /* 手机端收起的列:排名/交易对/市值/换手率/交易按钮(核心信息已在其余格) */
  .market-table tbody .rank-cell,
  .market-table tbody .mcap-cell,
  .market-table tbody .turnover-cell,
  .market-table tbody .cell-go,
  .market-table .symbol-tag { display: none; }
  .market-table tbody .star-td { grid-area: star; }
  .market-table tbody .name-td { grid-area: sym; min-width: 0; }
  /* 成交额:名称下方一行(替下交易对) */
  .market-table tbody .volume-cell { display: block; grid-area: vol; padding-left: 45px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-family: var(--font-mono); margin-top: -2px; }
  .market-table tbody .volume-cell::before { content: '额 '; opacity: .7; }
  /* 走势图:名称与价格之间 */
  .market-table tbody .spark-cell { display: flex; align-items: center; justify-content: center; grid-area: spark; }
  .market-table tbody .spark { width: 54px; height: 26px; }
  .market-table tbody .price-cell { grid-area: price; text-align: right; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; white-space: nowrap; align-self: end; }
  .market-table tbody .change-cell { grid-area: change; justify-self: end; align-self: start; }
  .market-table tbody .chg-pill { font-size: calc(12px * var(--sv-font-scale, 1)); min-width: 0; }
  /* 名称层级更清晰、图标更大,一眼可读 */
  .market-table .symbol-icon, .market-table .coin-logo { width: 34px; height: 34px; font-size: calc(11px * var(--sv-font-scale, 1)); }
  .market-table .name-td .symbol-cell { gap: 11px; }
  .market-table .symbol-name { font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; }
  .market-table .star-btn { width: 22px; height: 22px; }
}

/* ---- 币种 logo 与全网列表 ---- */
.coin-logo { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.04); }
.coins-more { display: block; margin: 14px auto 4px; padding: 8px 26px; }
.list-sentinel { height: 2px; } /* 无限滚动哨兵:进入视口即自动续载 */
.coins-empty { text-align: center; padding: 30px 0; color: var(--text-muted, #8a8f9c); }

/* ---- 信号/异动列真值样式 ---- */
.badge.sig-break { color: var(--up, #2ebd85); background: rgba(46,189,133,0.12); }
.badge.sig-ambush { color: #f0b90b; background: rgba(240,185,11,0.10); }
.badge.mv-up { color: var(--up, #2ebd85); background: rgba(46,189,133,0.12); }
.badge.mv-down { color: var(--down, #f6465d); background: rgba(246,70,93,0.12); }

/* ---- 价格变动闪烁 ---- */
@keyframes svFlashUp { 0% { background: rgba(46,189,133,0.28); } 100% { background: transparent; } }
@keyframes svFlashDown { 0% { background: rgba(246,70,93,0.28); } 100% { background: transparent; } }
.price-cell.flash-up { animation: svFlashUp 0.9s ease-out; }
.price-cell.flash-down { animation: svFlashDown 0.9s ease-out; }

/* ---- 搜索联想下拉 ---- */
.search-box { position: relative; }
/* 面板比搜索框宽(糖哥 2026-08-19:「做宽一点,不要将大类放两排」)——
   搜索框只有 320px,交易对分区的 7 个 chip 在那个宽度下必然折成两排。
   面板脱开框宽向左展开、右边与框对齐,窄屏收到 100vw-24px 以内,不出屏。 */
/* ⚠️底色/边框/阴影必须留在这条公共规则里:2026-08-19 我加宽度时把它们误挪进了
   :has(.sp-spot),结果输入态那张面板没了背景,底下的行情表和板块 chips 整个透上来,
   文字叠成一团(糖哥截图)。任何按状态分叉的规则只许覆盖差异项,不许带走公共项。 */
.search-ac {
  position: absolute; top: calc(100% + 6px); left: auto; right: 0; z-index: 60;
  width: min(560px, calc(100vw - 24px));
  background: var(--bg-panel, #141a24); border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,0.5); overflow: hidden;
}
/* 空态要摆三张卡,比输入态宽 —— 这里只改宽度,别的一概不碰 */
.search-ac:has(.sp-spot) { width: min(720px, calc(100vw - 24px)); }
.search-ac-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; }
.search-ac-row:hover { background: rgba(255,255,255,0.05); }
.sar-ic .coin-logo, .sar-ic .asset-icon { width: 24px; height: 24px; font-size: calc(8px * var(--sv-font-scale, 1)); }
.sar-sym { font-weight: 700; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.sar-name { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sar-px { font-size: calc(11.5px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace; }
.sar-px.up { color: var(--up, #2ebd85); } .sar-px.down { color: var(--down, #f6465d); }
.sar-star { flex-shrink: 0; }


/* 三态排序(糖哥 2026-08-04):未排序时给个淡提示,让人知道这列可点;
   已排序沿用既有的 ▼/▲,不另造一套符号语言 */
.market-table-exchange .th-sort::after, .ex-table .th-sort::after { content: "⇅"; font-size: calc(9px * var(--sv-font-scale, 1)); margin-left: 4px; opacity: .3; }
.market-table-exchange .th-sort:hover::after, .ex-table .th-sort:hover::after { opacity: .65; }
.market-table-exchange .th-sort.sorted::after, .ex-table .th-sort.sorted::after { content: "▼"; opacity: 1; }
.market-table-exchange .th-sort.sorted[data-dir="asc"]::after { content: "▲"; opacity: 1; }

/* ==== 板块细分(糖哥 2026-08-04 立;2026-08-17 重做为热力胶囊) ====
   底色 = 该板块真实平均涨跌的强度档,一排扫过去就知道钱往哪流;
   「全部」与排序键固定在两端不参与横滑,行业/异动两组同排。 */
.sector-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 10px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  /* ⚠️它自己是 .board-header 这个 flex 容器的子项,min-width 默认 auto=min-content,
     会被里面 22 个 chip 顶到 2500px+,再把下面的横滑容器一起带崩(横滑因此失效)。
     两个都要压:自身 min-width:0,以及占满父级可用宽而不是内容宽。 */
  min-width: 0; width: 100%; flex: 1 1 100%;
}
.sector-bar[hidden] { display: none; }

/* 板块条一律单行横滑,不换行(糖哥 2026-08-04:桌面端 20 个 chip 会 wrap 成三行,
   把下面的行情表挤下去半屏)。移动端本来就是这个行为,现在两端统一。
   右缘渐隐提示「还有更多,能滑」—— 纯横滑没有任何暗示时用户不会去试。 */
/* min-width:0 是关键:flex/grid 子项的隐含最小尺寸是 min-content,
   不显式压掉的话这一行会被 22 个 chip 撑到 2500px+,横滑不生效反而把整页撑出横向滚动条。
   同项目 v2.24.1 在数据页栅格上踩过同一个坑。 */
.sector-row-wrap { position: relative; min-width: 0; max-width: 100%; }
.sector-bar > .sector-row-wrap { flex: 1 1 auto; } /* 板块条改单行后,横滑区要吃掉两端固定键之外的全部宽度 */
.sector-row-wrap::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28px;
  pointer-events: none; opacity: 0;
  /* 不加 transition:板块条每次行情 tick 重渲染都会重启过渡,导致 opacity 永远停在 0、遮罩从不出现(2026-08-05 实测) */
  background: linear-gradient(to right, transparent, var(--bg-card, #12181f));
}
.sector-row-wrap.scrollable::after { opacity: 1; }
.sector-row {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  /* 不设 scroll-behavior:smooth —— 实测它会让程序化 scrollLeft 赋值失效(等 700ms 仍是 0),
     而这里的滚动本来就靠用户手动滑,平滑动画带不来价值,只会挡住将来想做的「点箭头滚一屏」 */
}
.sector-row::-webkit-scrollbar { display: none; } /* 隐藏滚动条但保留滚动能力 */
.sector-row > * { flex: 0 0 auto; } /* chip 之外还有分组标签与组间分隔,一并禁止压缩 */
.sector-row[hidden] { display: none; }

/* chip 基类被四处共用:板块条、自选分组条、交易所看板的所所/分组键。
   2026-08-17 由「描边空框」改「淡实底」—— 二十来个空框平铺时边框噪音比内容还重。
   ⚠️改这里等于同时改那三处,形态要一起看(新栏目呈现形式必须与既有一致)。 */
/* ⚠️底色一律走主题变量或 color-mix(--text-main),不能写死 rgba(255,255,255,.x):
   白叠白在浅色主题下整片隐形 —— 本项目 2026-08-09 已经栽过一次(见 global.css 里那段注释)。 */
.sec-chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  /* 方块不是胶囊(糖哥 2026-08-17 亲定):圆角只取 5px,与表格、卡片同一套直角语言 */
  padding: 5px 11px 6px; border-radius: 5px; cursor: pointer;
  font-size: calc(12px * var(--sv-font-scale, 1)); white-space: nowrap;
  background: var(--bg-hover, rgba(255,255,255,0.05)); color: var(--text-muted, #8a8f9c);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.sec-chip:hover {
  background: color-mix(in srgb, var(--text-main, #e8eaed) 10%, transparent);
  color: var(--text-main, #e8eaed);
}
/* 交易所看板用的是 .active(另两处用 .on),此前只有 .on 有样式 ——
   选中哪家所在界面上看不出来,这次一并收进同一条规则 */
.sec-chip.on, .sec-chip.active {
  color: var(--text-main, #e8eaed); font-weight: 700;
  background: color-mix(in srgb, var(--text-main, #e8eaed) 16%, transparent);
  border-color: color-mix(in srgb, var(--text-main, #e8eaed) 26%, transparent);
}
.sec-cnt {
  font-style: normal; font-size: calc(10.5px * var(--sv-font-scale, 1)); opacity: .7;
  padding: 0 4px; border-radius: 4px; background: var(--bg-hover, rgba(255,255,255,0.07));
}

/* —— 「全部」固定前缀键:不参与横滑,永远在最左 —— */
.sec-all {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 5px; cursor: pointer;
  font-size: calc(12px * var(--sv-font-scale, 1)); white-space: nowrap;
  background: var(--bg-hover, rgba(255,255,255,0.05)); color: var(--text-muted, #8a8f9c);
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.sec-all:hover { background: color-mix(in srgb, var(--text-main, #e8eaed) 10%, transparent); color: var(--text-main, #e8eaed); }
/* 反白态:文字色必须取自底色变量,写死 #0e1319 在浅色主题下就是黑底黑字(2026-08-17 实测到) */
.sec-all.on { background: var(--text-main, #e8eaed); color: var(--bg-elevated, #0e1319); font-weight: 700; }
.sec-vsep { flex: 0 0 auto; width: 1px; height: 16px; background: var(--line-strong, rgba(255,255,255,0.1)); }
.sec-vsep-in { display: inline-block; margin: 0 3px; vertical-align: middle; } /* 横滑行内的组间分隔 */
.sec-grp { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-dim, #6b717d); padding: 0 2px; align-self: center; }
.sec-sortbtn {
  flex: 0 0 auto; padding: 4px 9px; border-radius: 6px; cursor: pointer;
  font-size: calc(11.5px * var(--sv-font-scale, 1)); white-space: nowrap;
  background: transparent; color: var(--text-muted, #8a8f9c);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.1));
  transition: color .15s, border-color .15s;
}
.sec-sortbtn:hover { color: var(--text-main, #e8eaed); border-color: var(--accent, #f0b90b); }

/* —— 末尾展开键(糖哥 2026-08-20:板块多时右端被遮,点箭头原地展开全部)——
   默认仍是单行横滑(2026-08-04 他亲定"不换行",免得把行情表挤下半屏),
   展开是用户主动点出来的临时态,再点收回;选择记在本地,下次进来还是他要的样子。
   只有真的有内容被遮(或已处于展开态)时按钮才出现 —— 不溢出还摆个箭头是凭空的脏。 */
.sec-more {
  flex: 0 0 auto; width: 26px; height: 26px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted, #8a8f9c);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.1)); border-radius: 6px;
  transition: color .15s, border-color .15s;
}
.sec-more:hover { color: var(--text-main, #e8eaed); border-color: var(--accent, #f0b90b); }
.sec-more[hidden] { display: none; }
.sec-more::after { content: "▾"; font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1; transition: transform .18s; }
.sector-bar.expanded .sec-more::after { transform: rotate(180deg); }
/* 展开态:横滑行原地换行铺开,全部板块尽收眼底;不溢出了,右缘渐隐由 scrollable 判定自然消失。
   overflow 两轴一起放开:基类是 x:auto + y:hidden,只放 x 会被浏览器按规范算回 auto */
.sector-bar.expanded .sector-row {
  flex-wrap: wrap; overflow: visible;
}
/* 两端固定键在多行态下钉住第一行的高度线,不随整条拉伸 */
.sector-bar.expanded { align-items: flex-start; }
.sector-bar.expanded .sec-all, .sector-bar.expanded .sec-sortbtn, .sector-bar.expanded .sec-more { margin-top: 1px; }

/* —— 板块 chip 的涨跌呈现(糖哥 2026-08-20 定案:像交易所的筛选键)——
   涨跌色只落在百分比数字上;chip 底色一律走 .sec-chip 基类的中性底。
   此前的热力底色分档 / 分类圆点 / 上涨占比微条已按他的指令整体取消 ——
   名字灰、数字带色、底色安静,正是币安/OKX 行情页筛选键的形态。
   色走 --up/--down 语义变量:浅色主题与「红涨绿跌」地区偏好(data-cc="east")自动跟随,
   且与行情表格里的涨跌数字同源同色,两处永远一致。 */
.sec-name { overflow: hidden; text-overflow: ellipsis; }
.sec-val { font-weight: 600; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-variant-numeric: tabular-nums; }
.sec-chip[data-tone="up"] .sec-val { color: var(--up, #2ebd85); }
.sec-chip[data-tone="down"] .sec-val { color: var(--down, #f6465d); }
.sec-chip[data-tone="flat"] .sec-val, .sec-chip[data-tone="none"] .sec-val { color: var(--text-muted, #8a8f9c); }

@media (max-width: 720px) {
  .sector-bar { padding: 8px 10px 9px; gap: 6px; }
  /* 横滑规则已提升为两端通用,这里只收紧内距与字号 */
  .sec-chip { padding: 4px 9px 5px; font-size: calc(11.5px * var(--sv-font-scale, 1)); gap: 5px; }
  .sec-all { padding: 4px 10px; font-size: calc(11.5px * var(--sv-font-scale, 1)); }
  /* 展开态:窄屏上 chips 区被夹在「全部」与排序键之间只剩百来像素,一行摆不下一颗就成了
     23 行长条(2026-08-20 手机实测)。让它换行独占整宽:第一行是 全部|排序|箭头,chips 从第二行满宽铺开 */
  .sector-bar.expanded { flex-wrap: wrap; }
  .sector-bar.expanded > .sector-row-wrap { flex-basis: 100%; order: 9; }
  /* 手机上「按涨跌」三个字要吃掉一颗 chip 的宽度,收成图标态(% =按涨跌, # =按成分数) */
  .sec-sortbtn { padding: 4px 7px; font-size: 0; }
  .sec-sortbtn::after { content: "⇅ %"; font-size: calc(12px * var(--sv-font-scale, 1)); }
  .sec-sortbtn[data-sort="size"]::after { content: "⇅ #"; }
  .sec-val { font-size: calc(11px * var(--sv-font-scale, 1)); }
}

/* ==== 自选分组(糖哥 2026-08-05,对标 AICoin 自选分组) ==== */
.wl-group-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  /* 与 .sector-bar 同坑:自身是 board-header 的 flex 子项,必须压 min-width 否则被 chip 撑爆横滑失效 */
  min-width: 0; width: 100%; flex: 1 1 100%;
}
.wl-group-bar[hidden] { display: none; }
.wl-group-bar .sector-row-wrap { flex: 1 1 auto; min-width: 0; }
.wl-group-gear { flex: 0 0 auto; width: 30px; height: 30px; min-height: 30px; }

/* 锚定菜单(定位由 JS 设 left/top;样式对齐 square 的 postmenu 风格) */
.wl-menu {
  position: fixed; z-index: 10000; min-width: 178px; max-width: 260px; padding: 6px;
  border-radius: 12px;
  background: var(--bg-elevated, #16181f);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
}
.wl-mi {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; text-align: left;
  font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600;
  background: transparent; border: none; color: var(--text-main, #e8eaed);
  transition: background .12s;
}
.wl-mi:hover { background: var(--accent-soft, rgba(255,255,255,0.07)); }
.wl-mi-title {
  padding: 7px 12px 5px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c);
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06)); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-check i {
  width: 16px; height: 16px; flex: 0 0 auto; font-style: normal; font-size: calc(12px * var(--sv-font-scale, 1));
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong, rgba(255,255,255,0.18)); border-radius: 4px;
  color: var(--accent, #f0b90b);
}
.wl-check.on i { border-color: var(--accent, #f0b90b); background: rgba(240,185,11,0.12); }

/* 分组列表下方的「添加品种」页脚(对标 AICoin「⊞ 添加自选」,左对齐、方框加号) */
.wl-addfoot-tr td { padding: 0; border: none; background: transparent; }
.wl-addfoot {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 2px; padding: 9px 14px;
  border: none; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--text-secondary, #b0b4bd); font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 600;
  transition: background .12s, color .12s;
}
.wl-addfoot svg { flex: 0 0 auto; opacity: .9; }
.wl-addfoot:hover { background: var(--accent-soft, rgba(255,255,255,0.08)); color: var(--accent, #f0b90b); }

/* ===== 指数 / 板块 tab(对标 AICoin) ===== */
.mk-panel { padding: 8px 4px 16px; }
.mk-loading, .mk-empty { padding: 40px 16px; text-align: center; color: var(--text-muted, #8a8f9c); font-size: calc(13.5px * var(--sv-font-scale, 1)); }
/* 指数:按类别分组的列表 */
.idx-group { margin-bottom: 14px; }
.idx-group-h { padding: 8px 12px 6px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted, #8a8f9c); letter-spacing: .5px; }
.idx-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; }
.idx-row:hover { background: var(--accent-soft, rgba(255,255,255,0.05)); }
.idx-name-c { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.idx-name { font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main, #e8eaed); white-space: nowrap; }
.idx-tag { font-size: calc(11px * var(--sv-font-scale, 1)); font-style: normal; padding: 1px 6px; border-radius: 5px; background: rgba(246,70,93,0.14); color: var(--accent-red, #f6465d); }
.idx-sym { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; }
.idx-val { flex: 0 0 auto; min-width: 110px; text-align: right; font-family: var(--font-mono); font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main, #e8eaed); }
.idx-pct { flex: 0 0 auto; min-width: 78px; text-align: right; font-family: var(--font-mono); font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 600; }
.idx-nopct { flex: 0 0 auto; min-width: 78px; text-align: right; color: var(--text-muted, #8a8f9c); }
.idx-val.up, .idx-pct.up, .sec-tile-avg.up, .scr-pct.up { color: var(--accent-green, #2ebd85); }
.idx-val.down, .idx-pct.down, .sec-tile-avg.down, .scr-pct.down { color: var(--accent-red, #f6465d); }
/* 板块:标签网格 */
/* ===== 板块热力图(2026-08-06 糖哥拍板 A 方案):面积=24H成交额,颜色=涨跌深浅 ===== */
.sec-view-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px 0; flex-wrap: wrap; }
.sec-mkt-sw { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg-panel, rgba(255,255,255,0.04)); border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.sec-scope { flex: 1 1 auto; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); padding-left: 2px; }
.sec-view-sw { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg-panel, rgba(255,255,255,0.04)); border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.sec-view-btn { appearance: none; border: none; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; padding: 4px 12px; border-radius: 6px; background: transparent; color: var(--text-muted, #8a8f9c); }
.sec-view-btn:hover { color: var(--text-main, #e8eaed); }
.sec-view-btn.on { background: var(--bg-elevated, rgba(255,255,255,0.09)); color: var(--text-main, #e8eaed); }
.sec-heatmap { position: relative; height: 380px; margin: 10px 10px 0; border-radius: 10px; overflow: hidden; }
.hm-cell { position: absolute; appearance: none; border: 1px solid var(--bg-page, #0b0e14); border-radius: 0; padding: 0; margin: 0; background: var(--bg-panel, rgba(255,255,255,0.04)); cursor: pointer; overflow: hidden; }
.hm-cell:hover .hm-fill { filter: brightness(1.18); }
.hm-cell.on { outline: 2px solid var(--accent, #f0b90b); outline-offset: -2px; z-index: 2; }
.hm-fill { position: absolute; inset: 0; display: block; }
.hm-fill.up { background: var(--accent-green, #2ebd85); }
.hm-fill.down { background: var(--accent-red, #f6465d); }
.hm-fill.flat { background: var(--text-muted, #8a8f9c); }
.hm-txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 2px; overflow: hidden; }
.hm-name { font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-name.sm { font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 600; }
.hm-pct { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.hm-cnt { font-size: calc(11px * var(--sv-font-scale, 1)); color: rgba(255,255,255,0.75); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.hm-tip { position: absolute; z-index: 5; width: 185px; padding: 9px 11px; border-radius: 9px; background: var(--bg-elevated, #171b24); border: 1px solid var(--line-strong, rgba(255,255,255,0.16)); box-shadow: 0 8px 24px rgba(0,0,0,0.4); pointer-events: none; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-dim, #9aa0aa); }
.hm-tip b { color: var(--text-main, #e8eaed); font-size: calc(13px * var(--sv-font-scale, 1)); margin-right: 8px; }
.hm-tip > .up { color: var(--accent-green, #2ebd85); font-weight: 700; }
.hm-tip > .down { color: var(--accent-red, #f6465d); font-weight: 700; }
.hm-tip-row { margin-top: 4px; line-height: 1.45; }
.hm-legend { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 0 4px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.hm-legend i { width: 22px; height: 8px; border-radius: 3px; }
.hm-legend i.up { background: var(--accent-green, #2ebd85); }
.hm-legend i.down { background: var(--accent-red, #f6465d); }
.hm-legend i.flat { background: var(--text-muted, #8a8f9c); opacity: 0.3; }
.hm-legend em { font-style: normal; margin-left: 12px; }
@media (max-width: 720px) { .sec-heatmap { height: 300px; } .hm-name { font-size: calc(12px * var(--sv-font-scale, 1)); } }

/* 强弱对阵榜(「列表」视图=B 方案,2026-08-06):领涨/领跌对垒 + 幅度条 */
.sec-battle { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 12px 14px 4px; }
.sb-h { font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700; margin-bottom: 9px; }
.sb-h.up { color: var(--accent-green, #2ebd85); }
.sb-h.down { color: var(--accent-red, #f6465d); }
.sb-row { display: flex; align-items: center; gap: 9px; width: 100%; appearance: none; background: none; border: none; border-radius: 7px; padding: 5px 6px; cursor: pointer; }
.sb-row:hover { background: var(--bg-panel, rgba(255,255,255,0.04)); }
.sb-row.on { background: var(--accent-soft, rgba(240,185,11,0.08)); outline: 1px solid var(--accent, #f0b90b); }
.sb-name { flex: 0 0 64px; text-align: left; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main, #e8eaed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-track { flex: 1 1 auto; height: 13px; border-radius: 3px; background: var(--bg-panel, rgba(255,255,255,0.05)); overflow: hidden; }
.sb-bar { display: block; height: 100%; border-radius: 3px; }
.sb-bar.up { background: var(--accent-green, #2ebd85); }
.sb-bar.down { background: var(--accent-red, #f6465d); }
.sb-pct { flex: 0 0 52px; text-align: right; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; }
.sb-pct.up { color: var(--accent-green, #2ebd85); }
.sb-pct.down { color: var(--accent-red, #f6465d); }
.sb-movers { margin-top: 8px; padding: 0 6px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sb-empty { padding: 14px 6px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sb-nodata { padding: 6px 20px 2px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
@media (max-width: 720px) { .sec-battle { grid-template-columns: 1fr; gap: 14px; } }

.sec-tab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 8px 10px 4px; }
.sec-tile {
  display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 11px; cursor: pointer; text-align: left;
  background: var(--bg-elevated, rgba(255,255,255,0.04)); border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
  color: var(--text-main, #e8eaed); font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 600; transition: border-color .12s, background .12s;
}
.sec-tile:hover { border-color: var(--line-strong, rgba(255,255,255,0.2)); }
.sec-tile.on { border-color: var(--accent, #f0b90b); background: var(--accent-soft, rgba(240,185,11,0.08)); }
.sec-tile-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-tile-cnt { flex: 0 0 auto; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); background: var(--accent-soft, rgba(255,255,255,0.06)); border-radius: 6px; padding: 1px 6px; }
.sec-tile-avg { flex: 0 0 auto; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; }
.sec-cons { margin-top: 12px; border-top: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.sec-cons-h { padding: 12px 14px 6px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #e8eaed); }
.sec-con-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 9px; cursor: pointer; }
.sec-con-row:hover { background: var(--accent-soft, rgba(255,255,255,0.05)); }
.scr-ic { flex: 0 0 auto; display: inline-flex; }
.scr-ic img, .scr-ic svg { width: 24px; height: 24px; border-radius: 50%; }
.scr-sym { flex: 0 0 auto; font-weight: 700; font-size: calc(13.5px * var(--sv-font-scale, 1)); }
.scr-name { flex: 1 1 auto; min-width: 0; color: var(--text-secondary, #b0b4bd); font-size: calc(12px * var(--sv-font-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-px { flex: 0 0 auto; min-width: 90px; text-align: right; font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); }
.scr-pct { flex: 0 0 auto; min-width: 72px; text-align: right; font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; }
/* 添加品种搜索选择弹层(复用 .wl-menu 定位/底色) */
.wl-add-picker { width: 300px; max-width: calc(100vw - 16px); padding: 8px; }
.wl-add-search {
  width: 100%; height: 34px; margin: 4px 0 6px; padding: 0 10px; border-radius: 8px;
  background: var(--bg-base, rgba(0,0,0,0.18)); color: var(--text-main, #e8eaed);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.14)); font-size: calc(13px * var(--sv-font-scale, 1));
}
.wl-add-results { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.wl-add-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: none; border-radius: 8px; cursor: pointer; text-align: left; background: transparent;
  color: var(--text-main, #e8eaed); font-size: calc(13px * var(--sv-font-scale, 1)); transition: background .12s;
}
.wl-add-row:hover { background: var(--accent-soft, rgba(255,255,255,0.07)); }
.wl-add-row.in, .wl-add-row[disabled] { cursor: default; opacity: .55; }
.wl-add-row.in:hover { background: transparent; }
.war-sym { font-weight: 700; flex: 0 0 auto; }
.war-name { color: var(--text-secondary, #b0b4bd); font-size: calc(12px * var(--sv-font-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-act { margin-left: auto; flex: 0 0 auto; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--accent, #f0b90b); }
.wl-add-row.in .war-act { color: var(--text-muted, #8a8f9c); }
.wl-add-empty { padding: 14px 10px; text-align: center; color: var(--text-muted, #8a8f9c); font-size: calc(12.5px * var(--sv-font-scale, 1)); }

/* 可选时段的列头(涨跌幅/成交额/换手率):标签 + 悬停下拉的时间段选择 */
.th-winsel { position: relative; }
.th-win-caret {
  display: inline-block; margin-left: 4px; vertical-align: middle; opacity: .55;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
}
.th-winsel:hover .th-win-caret { opacity: 1; }
/* 当前列在排序高亮时,别让 ::after 的 ▼ 和自定义 caret 挤一起 */
.market-table-exchange .th-winsel.sorted::after { margin-left: 2px; }
.chg-menu .chg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px 2px 2px; }
.chg-cell {
  padding: 8px 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  background: var(--accent-soft, rgba(255,255,255,0.05)); color: var(--text-main, #e8eaed);
  font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 600; text-align: center; transition: background .12s, border-color .12s, color .12s;
}
.chg-cell:hover { background: var(--accent-soft, rgba(255,255,255,0.14)); }
.chg-cell.active { border-color: var(--accent, #f0b90b); color: var(--accent, #f0b90b); }
/* 自定义:滚动窗口 + 绝对区间 */
.chg-cus { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 4px 2px; margin-top: 6px; border-top: 1px solid var(--line-soft, rgba(255,255,255,0.06)); }
.chg-cus-lbl { flex: 0 0 100%; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-weight: 600; }
.chg-cus.active .chg-cus-lbl { color: var(--accent, #f0b90b); }
.chg-cus input, .chg-cus select {
  height: 30px; border-radius: 7px; padding: 0 8px; font-size: calc(12.5px * var(--sv-font-scale, 1));
  background: var(--bg-base, rgba(0,0,0,0.18)); color: var(--text-main, #e8eaed);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
}
.chg-dur-n { width: 56px; }
.chg-dur-u { width: 52px; }
.chg-range-inputs { display: flex; flex-direction: column; gap: 5px; flex: 1 1 100%; }
.chg-r-row { display: flex; align-items: center; gap: 6px; }
.chg-r-row > span { flex: 0 0 18px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.chg-r-row input { flex: 1 1 auto; min-width: 0; }
/* 「应用」按钮:用 accent 底 + bg-elevated 字,两个主题都是深底浅字/浅底深字,清晰可读
   (此前用了写死的深色字,浅色主题下 accent 恰是近黑,深字压深底几乎看不见)。 */
.chg-cus-go {
  height: 30px; padding: 0 14px; border-radius: 7px; cursor: pointer; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700;
  background: var(--accent, #0f1115); color: var(--bg-elevated, #fff); border: none; margin-left: auto;
}
.chg-cus-go:hover { filter: brightness(1.12); }
.chg-cus-go:active { transform: translateY(1px); }

/* 管理分组弹窗 */
.wlg-mask {
  position: fixed; inset: 0; z-index: 10001;
  background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wlg-modal {
  width: 100%; max-width: 400px; border-radius: 14px; overflow: hidden;
  background: var(--bg-elevated, #16181f);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.wlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7);
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.wlg-x {
  background: none; border: none; cursor: pointer; font-size: calc(14px * var(--sv-font-scale, 1));
  color: var(--text-muted, #8a8f9c); padding: 4px 6px; border-radius: 6px;
}
.wlg-x:hover { color: var(--text-main, #f4f5f7); background: rgba(255,255,255,0.06); }
.wlg-list { padding: 8px; max-height: 60vh; overflow-y: auto; }
.wlg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px;
}
.wlg-row:hover { background: rgba(255,255,255,0.04); }
.wlg-name { flex: 1 1 auto; min-width: 0; font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main, #f4f5f7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlg-cnt { font-style: normal; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.wlg-op {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1));
  background: transparent; border: 1px solid var(--line-soft, rgba(255,255,255,0.12));
  color: var(--text-main, #e8eaed);
}
.wlg-op:hover { border-color: var(--line-strong, rgba(255,255,255,0.25)); }
.wlg-op.danger { color: var(--down, #f6465d); border-color: rgba(246,70,93,0.35); }
.wlg-op.danger:hover { background: rgba(246,70,93,0.1); }

@media (max-width: 768px) {
  .wl-group-bar { padding: 8px 12px; }
  .wlg-op { min-height: 34px; }
}

/* 自定义列(仅自选 tab 生效;th 按 data-sort/类名对应,td 按单元格类名) */
.market-table[data-tab="watchlist"].hide-c-volume th[data-sort="volume"], .market-table[data-tab="watchlist"].hide-c-volume .volume-cell { display: none; }
.market-table[data-tab="watchlist"].hide-c-mcap th[data-sort="marketcap"], .market-table[data-tab="watchlist"].hide-c-mcap .mcap-cell { display: none; }
.market-table[data-tab="watchlist"].hide-c-turnover th[data-sort="turnover"], .market-table[data-tab="watchlist"].hide-c-turnover .turnover-cell { display: none; }
.market-table[data-tab="watchlist"].hide-c-spark th.th-spark, .market-table[data-tab="watchlist"].hide-c-spark .spark-cell { display: none; }

/* 管理分组:拖拽手柄与拖动中的行 */
.wlg-hint { margin-left: auto; margin-right: 10px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 400; color: var(--text-muted, #8a8f9c); }
.wlg-drag {
  flex: 0 0 auto; cursor: grab; user-select: none; touch-action: none;
  font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); padding: 2px 4px;
}
.wlg-drag:active { cursor: grabbing; }
.wlg-row.dragging { opacity: 0.55; background: rgba(240,185,11,0.08); }

/* ===== 交易所行情看板(糖哥 2026-08-13:BN/OK/BG 三所五组) ===== */
/* ==== 交易所选择条(糖哥 2026-08-17 选定 B 案:主副两级) ====
   所 = 带 logo 的主选择(品牌色只在选中那一家身上出现,不选中一律中性);
   产品组 = 下划线 tab,下划线取当前所的品牌色。两种格式差异本身就说清了「先选所、再选组」。 */
.ex-board-bars { display: grid; gap: 10px; padding: 12px 12px 0; }
.ex-row { align-items: stretch; }
.ex-pick {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 8px; border-radius: 6px; cursor: pointer;
  background: var(--bg-hover, rgba(255,255,255,.05));
  border: 1px solid transparent; text-align: left;
  transition: background .15s, border-color .15s;
}
.ex-pick:hover { background: color-mix(in srgb, var(--text-main, #e8eaed) 10%, transparent); }
.ex-logo {
  width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: .02em; overflow: hidden;
}
.ex-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 图标包缺图时的字母回落:各家仍用自己的品牌色,不至于退成三个一样的灰块 */
.ex-logo-bn { background: rgba(240,185,11,.16); color: #f0b90b; }
.ex-logo-ok { background: color-mix(in srgb, var(--text-main, #eaecef) 12%, transparent); color: var(--text-main, #eaecef); }
.ex-logo-bg { background: rgba(0,194,203,.16); color: #00c2cb; }
.ex-name { display: flex; flex-direction: column; line-height: 1.25; }
.ex-name b { font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 500; color: var(--text-muted, #8a8f9c); }
.ex-name i { font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); letter-spacing: .05em; color: var(--text-dim, #6b717d); }
.ex-pick.active .ex-name b { color: var(--text-main, #fff); }
.ex-pick[data-ex-pick="bn"].active { background: rgba(240,185,11,.10); border-color: rgba(240,185,11,.45); }
.ex-pick[data-ex-pick="ok"].active { background: color-mix(in srgb, var(--text-main, #eaecef) 10%, transparent); border-color: color-mix(in srgb, var(--text-main, #eaecef) 38%, transparent); }
.ex-pick[data-ex-pick="bg"].active { background: rgba(0,194,203,.10); border-color: rgba(0,194,203,.45); }

.ex-gtabs { gap: 20px; padding: 0 2px; }
.ex-gtab {
  padding: 0 0 7px; cursor: pointer; white-space: nowrap;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c);
  transition: color .15s, border-color .15s;
}
.ex-gtab:hover { color: var(--text-main, #e8eaed); }
.ex-gtab.active { color: var(--text-main, #e8eaed); font-weight: 500; }
/* 下划线跟着当前所的品牌色走 —— 「在哪家所看哪类产品」两级信息一眼串起来 */
.ex-board-bars[data-ex="bn"] .ex-gtab.active { border-bottom-color: #f0b90b; }
.ex-board-bars[data-ex="ok"] .ex-gtab.active { border-bottom-color: var(--text-main, #eaecef); }
.ex-board-bars[data-ex="bg"] .ex-gtab.active { border-bottom-color: #00c2cb; }
.ex-gtab.off { color: var(--text-disabled, #4d525c); cursor: not-allowed; }
.ex-gtab.off:hover { color: var(--text-disabled, #4d525c); }
.ex-board-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; }
.ex-board-search { flex: 0 1 260px; min-width: 160px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.09)); background: var(--bg-sunken, rgba(0,0,0,.18)); color: var(--text-main, #eaecef); font-size: calc(12.5px * var(--sv-font-scale, 1)); }
.ex-board-search:focus { outline: none; border-color: rgba(240,185,11,.55); }
.ex-board-note { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
/* 表基础:列头/名称格/排序/涨跌等全部复用主表共享规则(见 .market-table-exchange 各条),
   这里只留看板独有的容器与列宽 */
.ex-table-wrap { overflow-x: auto; padding: 0 4px 10px; }
.ex-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.ex-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel, #10141d); padding: 10px 12px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-muted, #8a8f9c); border-bottom: 1px solid var(--line, rgba(255,255,255,.07)); }
.ex-table td { padding: 9px 12px; border-bottom: 1px solid var(--line, rgba(255,255,255,.05)); white-space: nowrap; }
.ex-empty { text-align: center !important; padding: 28px 10px !important; color: var(--text-muted, #8a8f9c) !important; }
@media (max-width: 768px) {
  .ex-opt { display: none; }           /* 窄屏收起 24H 高/低两列,表内其余横向滚动 */
  .ex-table { min-width: 430px; }
  .ex-board-search { flex-basis: 100%; }
}

/* 美股时段标签(名称后小徽标):盘中绿 / 盘前盘后琥珀 / 休市灰 */
.ex-session { margin-left: 6px; padding: 1px 5px; border-radius: 4px; font-style: normal; font-size: calc(9.5px * var(--sv-font-scale, 1)); font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.ex-session-regular { color: #2ebd85; background: rgba(46, 189, 133, .12); }
.ex-session-pre, .ex-session-post { color: #f0b90b; background: rgba(240, 185, 11, .13); }
.ex-session-closed { color: var(--text-muted, #8a8f9c); background: rgba(128, 134, 147, .14); }

/* 有真 logo 时不要底衬:透明 PNG 压在品牌色块上会脏,底色只留给字母回落态 */
.ex-logo:has(img) { background: transparent; }

/* ===== 搜索联想「交易对」分区(糖哥 2026-08-19,与图表页左抽屉同一形态) =====
   ⚠️图表页 chart.css 有同名类的一份镜像(两页不共享样式表),改这里必须同步过去。
   同一资产在 BN/OK/BG 各所、现货与永续各条线的真实价与量。 */
.sp-pair { border-top: 1px solid var(--line-soft, rgba(255,255,255,0.07)); margin-top: 4px; }
.sp-pair-title { padding: 8px 12px 4px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted, #8a8f9c); letter-spacing: 0.03em; }
/* 一排放下:面板 560px 足够,不许再折行(图表页侧栏窄,那边仍是两排,互不影响) */
/* ⚠️这里不许有 overflow:auto/hidden —— 「全部平台▾」的下拉是绝对定位的子元素,
   一旦这条上有滚动容器,菜单就会被裁在这一行里,看起来像被下面的价差条盖住
   (2026-08-19 糖哥截图报的就是这个)。筛选只有四个元素,560px 本来就排得下,不需要横向滚动。 */
.sp-pair-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding: 0 12px 7px; }
.sp-pair-bar .spx-chip { flex: none; }
.spx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,0.1)); background: transparent; color: var(--text-muted, #8a8f9c); font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; }
.spx-chip:hover { color: var(--text-main, #f4f5f7); }
.spx-chip.active { color: var(--text-main, #f4f5f7); border-color: rgba(240,185,11,0.6); background: rgba(240,185,11,0.08); }
/* 行高写死:中文 chip 与拉丁字母 chip(OKX/Bitget)的默认行高不同,同一排会差出 1px 台阶 */
.spx-chip { line-height: 16px; }
.spx-chip.sm { padding: 3px 8px; font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 15px; }
.sp-pair-sep { width: 1px; height: 14px; margin: 0 3px; background: var(--line, rgba(255,255,255,0.12)); }
/* ===== 交易对表(AICoin 同构,糖哥 2026-08-19 拍板):带列头的五列 =====
   交易对 | 交易平台 | 最新价 | 今日涨跌 | 成交额。平台名写全(「币安 USDT永续」),
   不再套灰底胶囊 —— 它是一列独立信息,不是名称的附注。 */
.sp-pair-head, .sp-pair-row {
  display: grid;
  grid-template-columns: 26px minmax(88px, 1fr) minmax(104px, 1.1fr) minmax(84px, .9fr) 64px 74px;
  align-items: center; gap: 10px; padding: 7px 12px;
}
.sp-pair-head { padding-top: 2px; padding-bottom: 5px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06)); }
.sp-pair-head .ppr-pair { grid-column: 2; }
.sp-pair-row { cursor: pointer; }
.sp-pair-row:hover { background: rgba(255,255,255,0.05); }
.ppr-ic { grid-column: 1; display: grid; place-items: center; }
.ppr-ic .coin-logo, .ppr-ic .asset-icon { width: 22px; height: 22px; font-size: calc(8px * var(--sv-font-scale, 1)); }
.ppr-pair { grid-column: 2; font-weight: 700; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); white-space: nowrap; }
.ppr-venue { grid-column: 3; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppr-price { grid-column: 4; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.ppr-chg { grid-column: 5; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: calc(11.5px * var(--sv-font-scale, 1)); }
.ppr-chg.up { color: var(--up, #2ebd85); } .ppr-chg.down { color: var(--down, #f6465d); }
.ppr-vol { grid-column: 6; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
/* 平台下拉(AICoin 的「全部平台 ▾」):所收进这里,市场留 chip 一排 */
.sp-venue-sel { position: relative; }
.sp-venue-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,0.1)); background: transparent; color: var(--text-muted, #8a8f9c); font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 15px; cursor: pointer; }
.sp-venue-btn:hover { color: var(--text-main, #f4f5f7); }
.sp-venue-btn.active { color: var(--text-main, #f4f5f7); border-color: rgba(240,185,11,0.6); background: rgba(240,185,11,0.08); }
.sp-venue-caret { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); opacity: .7; }
.sp-venue-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 108px; padding: 4px; border-radius: 8px; border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); background: var(--bg-elevated, #1a1f2a); box-shadow: 0 10px 26px rgba(0,0,0,0.45); }
.sp-venue-item { display: block; width: 100%; padding: 6px 9px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary, #b0b4bd); font-size: calc(11.5px * var(--sv-font-scale, 1)); text-align: left; cursor: pointer; }
.sp-venue-item:hover { background: rgba(255,255,255,0.06); color: var(--text-main, #f4f5f7); }
.sp-venue-item.on { color: var(--warn, #f0b90b); }
/* 价差条:数值永远显示(常态就是 0.0x%),超阈值才高亮 */
/* 光标不用 help(问号):问号自己不解释自己,用户先愣一下才明白。
   改成常规光标 + 行尾一个 ⓘ,一眼就知道「这里有说明」(糖哥 2026-08-19 问「那个问号是啥意思」)。 */
.sp-spread { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 0 12px 7px; padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid transparent; }
.sps-info { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--text-muted, #8a8f9c); color: var(--text-muted, #8a8f9c); font-size: calc(9.5px * var(--sv-font-scale, 1)); font-style: normal; line-height: 1; cursor: pointer; }
.sps-info:hover { color: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); }
.sp-spread.hot { border-color: rgba(240,185,11,0.45); background: rgba(240,185,11,0.1); }
.sps-lbl { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sps-val { font-family: 'JetBrains Mono', monospace; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7); }
.sp-spread.hot .sps-val { color: var(--warn, #f0b90b); }
.sps-way { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pair-more { width: 100%; padding: 7px 12px; background: none; border: none; color: var(--text-muted, #8a8f9c); font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; text-align: center; }
.sp-pair-more:hover { color: var(--text-main, #f4f5f7); }
.sp-pair-note { padding: 2px 12px 7px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }

/* ===== 搜索空态「站内速览」(糖哥 2026-08-19) =====
   六块:最近看过 / 我的自选 / 今日异动 / 跨所价差 / 形态命中 / 快讯。
   宽面板两列排,块内最多三行 —— 搜索框里堆满反而找不到东西。 */
/* 纵向榜单(糖哥 2026-08-19 拍板:照图表页那一版) —— 两列网格把每块压得太扁,
   块与块之间也失了主次;改成一列一块从上到下读,与图表页逐字一致。 */
.sp-spot { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 8px; }
.sps-block { min-width: 0; padding: 8px 14px; }
.sps-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted, #8a8f9c); letter-spacing: .03em; }

/* 形态命中的 K 线级别徽标(糖哥 2026-09-01)。sps-head 是 flex,
   徽标跟在标题后面;.sps-info(说明 i)自带 margin-left:auto 仍会被推到最右,不冲突。 */
/* 币种标签里的 K 线级别(糖哥 2026-09-02「比如:BTC(4H)」)。
   比币名小一号、淡一档:级别是限定语不是主体,读的时候不该跟币名抢眼。
   inherit 颜色 + 不换行,免得在窄侧栏里被拆到下一行。 */
.sps-tag .sps-tag-tf { font-size: calc(9px * var(--sv-font-scale, 1)); font-style: normal; opacity: .62; margin-left: 1px; white-space: nowrap; }

.sps-head .sps-tf {
  font-size: calc(10px * var(--sv-font-scale, 1));
  font-weight: 600;
  letter-spacing: 0;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--hair-stroke, rgba(140,140,150,.35));
  color: var(--text-muted, #8a8f9c);
}
.sps-clear { margin-left: auto; padding: 0; border: 0; background: none; color: var(--text-muted, #8a8f9c); font-size: calc(10.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.sps-clear:hover { color: var(--text-main, #f4f5f7); }
.sps-head .sps-info { width: 13px; height: 13px; margin-left: auto; display: inline-grid; place-items: center; border: 1px solid var(--text-muted, #8a8f9c); border-radius: 50%; font-size: calc(9px * var(--sv-font-scale, 1)); font-style: normal; cursor: pointer; }
.sps-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sps-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line, rgba(255,255,255,0.08)); background: rgba(255,255,255,0.04); color: var(--text-main, #f4f5f7); font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 600; cursor: pointer; }
.sps-chip:hover { border-color: rgba(240,185,11,0.5); }
.sps-chip i { font-style: normal; font-size: calc(9.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
/* 三竖条并排(糖哥 2026-08-19 照 AICoin:「根据这三个大的竖条框排列」):
   今日异动 / 跨所价差 / 形态命中 各占一张卡,卡内竖排;上面是 chips,下面是快讯整宽。
   一列到底那版面板又高又空,得一路往下扫 —— 三条并排一屏就看完。
   ⚠️只改市场页:图表页侧栏 240px 排不下三列,糖哥明确要求那边不动。 */
/* 三卡等高(align-items:stretch):内容行数不同(异动 6 行、另两张 3 行),
   不拉齐就会高低参差,像没排版过。列宽按内容需要分:价差要放「OKX 高·Bitget 低」,
   形态要放三个标的名,都比异动那列吃宽。 */
.sps-cols { display: grid; grid-template-columns: minmax(136px, .78fr) minmax(190px, 1.1fr) minmax(188px, 1.12fr); gap: 8px; padding: 2px 12px 4px; align-items: stretch; }
.sps-cols .sps-block { padding: 9px 10px; background: rgba(255,255,255,0.035); border: 1px solid var(--line-soft, rgba(255,255,255,0.05)); border-radius: 10px; }
.sps-cols .sps-head { margin-bottom: 4px; }
.sps-cols .sps-row { gap: 6px; padding: 3px 0; }
.sps-cols .sps-sym { min-width: 0; }
/* 卡内一行放得下就不折:符号/附注/数值三段,附注可省略号 */
.sps-cols .sps-note { font-size: calc(10px * var(--sv-font-scale, 1)); }
.sps-cols .sps-pct, .sps-cols .sps-cnt { font-size: calc(10.5px * var(--sv-font-scale, 1)); }
.sps-list { display: flex; flex-direction: column; }
.sps-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.sps-row .sps-sym { min-width: 62px; }
.sps-row.static { cursor: default; }
.sps-row:not(.static):hover .sps-sym { color: var(--warn, #f0b90b); }
.sps-sym { font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7); white-space: nowrap; }
.sps-note { flex: 1; min-width: 0; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sps-pct { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); }
.sps-pct.up { color: var(--up, #2ebd85); } .sps-pct.down { color: var(--down, #f6465d); }
.sps-pct.hot { color: var(--warn, #f0b90b); }
.sps-cnt { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sps-idx { flex: none; width: 12px; font-family: 'JetBrains Mono', monospace; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sps-block .sps-list:has(.sps-row.link) { max-width: none; }
.sps-news { flex: 1; min-width: 0; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sps-row.link:hover .sps-news { color: var(--text-main, #f4f5f7); }

/* 形态命中里的标的名可点进 K 线(糖哥 2026-08-19):
   行本身不可点(点形态名没有明确去处),但每个标的是独立入口。 */
.sps-tag { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sps-tag:hover { color: var(--warn, #f0b90b); text-decoration: underline; }
.sps-dot { font-style: normal; margin: 0 3px; opacity: .5; }

/* 搜索面板:站内速览加载占位(2026-08-21 先出壳再填肉) */
.sps-loading { padding: 14px 12px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a94a1); text-align: center; }

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