/* Stock Board — 工具自带样式（自选 + 行情榜单，2026-10-12 两份合并）
   ─────────────────────────────────────────────────────────────
   只写"这个工具特有"的东西。通用外观（toolbox / field / field__input / hint /
   alert / mono）来自外壳的全局样式，这里不重复。

   ★★ 本文件是 tools/watchlist/styles.css 与 tools/marketboard/styles.css
      两份**原样拼接**出来的，所以里面同时存在 `wl-` 与 `mb-` 两套前缀。
      **这是刻意的，不是漏改**：
        ① 统一成一个前缀（例如 `sb-`）会让两套 CSS 的同名类相撞
           （两边都有 `.row` / `.chip` / `.tabs` 这类通用名），
           撞上之后是"样式看着还在、其实被另一条覆盖了"的静默故障；
        ② 两个前缀都归本工具所有 —— 项目里"借别的工具的类名 = 没有样式"
           那条坑的前提是**别的工具**，这里是同一个工具的两个区块。
      ⇒ 真要统一前缀，必须逐个类核对撞车，那是独立的一次重构，不夹在合并里做。

   ★ 两块各自都自带一份 `.btn` / `.btn--ghost`（不上全局）—— 同形重复，
     与 timezone / weather 一样是**有意接受的重复**，别去重。
   ★ 不写裸色值：结构规则一律走主题变量；只有"涨跌语义色"两处例外，
     各自的理由写在下面两块自己的文件头里（仍在各自块内，未删）。
   ★ 自选侧：红涨绿跌 / 绿涨红跌 **可切换**（`--wl-up` / `--wl-down`）。
     榜单侧：**固定**红涨绿跌（A 股事实标准）。
     于是两个区块的语义色变量是**两套**（`--wl-*` 与 `--mb-*`），互不干扰。
   ★ 末尾第 3 节是**外壳**（页签条 + 视图容器），前缀 `sb-`。
*/

/* ══════════════════════════════════════════════════════════════
 * 1. 自选侧（原 tools/watchlist/styles.css，逐字保留）
 * ══════════════════════════════════════════════════════════════ */
/* ── 1. 语义色映射 ───────────────────────────────────────────── */

.wl {
  --wl-red: #c62828;
  --wl-green: #178553;
  /* 兜底 = 红涨绿跌；syncColor() 一定会挂上 .wl--cn 或 .wl--us，这只是保险 */
  --wl-up: var(--wl-red);
  --wl-down: var(--wl-green);
}
.wl--cn {
  --wl-up: var(--wl-red);
  --wl-down: var(--wl-green);
}
.wl--us {
  --wl-up: var(--wl-green);
  --wl-down: var(--wl-red);
}

html[data-theme='dark'] .wl {
  --wl-red: #f07a72;
  --wl-green: #4fc48d;
}

/* 涨跌格（表格里的价格 / 涨跌幅 / 涨跌额） */
.wl-up { color: var(--wl-up); }
.wl-down { color: var(--wl-down); }
.wl-flat { color: var(--fg-muted); }

/* ── 2. 按钮（全局样式表里没有 .btn，必须自带） ───────────────── */

.btn {
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fg);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { background: var(--bg-soft); }

.btn--ghost {
  background: var(--bg-soft);
  color: var(--fg-muted);
}

/* ── 3. 控制条 ───────────────────────────────────────────────── */

.wl-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.wl-bar + .wl-bar { margin-top: 10px; }

.wl-grow {
  flex: 1 1 auto;
  min-width: 0;
}

/* 配色选择器占位固定，右侧两个按钮贴右边（"设置"与"动作"分区） */
.wl-colorsel {
  flex: 0 0 auto;
  margin-right: auto;
}
.wl-colorsel .field__input { min-width: 150px; }

/* 搜索框本身没有 field__label，单独给它一点节奏 */
.wl-bar--find { margin-top: 12px; }

/* ── 4. 搜索候选 ─────────────────────────────────────────────── */

.wl-sug {
  margin-top: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.wl-sug__i {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.wl-sug__i:last-child { border-bottom: 0; }
.wl-sug__i:hover { background: var(--accent-soft); }

.wl-sug__n {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-sug__c {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-faint);
}
.wl-sug__k {
  padding: 1px 7px;
  font-size: 11px;
  color: var(--fg-muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

/* ── 5. 提示条 ───────────────────────────────────────────────── */

.wl-note {
  margin-top: 12px;
  padding: 10px 13px;
  font-size: 14px;
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.wl-note--err {
  color: var(--err-fg);
  background: var(--err-bg);
  border-color: var(--err-line);
}
.wl-note--info {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* ★ 显式兜住 [hidden]：上面若有规则写了 display，UA 的 hidden 会被盖掉，
     那正是"元素该消失却没消失"的静默故障。 */
.wl-sug[hidden],
.wl-note[hidden],
.wl-chartbox[hidden] { display: none; }

/* ── 6. 行情表 ───────────────────────────────────────────────── */

.wl-list { margin-top: 14px; }

.wl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wl-th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.wl-th--name { text-align: left; }
.wl-th--code { width: 1%; text-align: left; }
.wl-th--act { width: 1%; text-align: right; }

/* 数字列：等宽 + 表格数字，位数对齐才不会"跳" */
.wl-num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* ★ 不许换行 —— 见 .wl-td--name 处的说明（同一条理由）。
     "44.53 亿" / "1.58 万亿" 在列宽吃紧时会被拆成两行，读起来像两个数。 */
  white-space: nowrap;
}
/* 表头的中文/字母标题不该用等宽体压住可读性 —— 只保留右对齐 */
.wl-th.wl-num {
  font-family: inherit;
}

.wl-row { cursor: pointer; }
.wl-row:hover { background: var(--accent-soft); }

.wl-td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.wl-row:last-child .wl-td { border-bottom: 0; }

.wl-td--name {
  font-weight: 600;
  cursor: grab;
  /* ★★ 股票名**一个字都不许拆行**（2026-10-11 真数据实测暴露）。
     没有它的时候，"贵州茅台"会被逐字竖着排成四行 ——
     因为 CJK 文本**在任何字符之间都可断行**（这与英文按单词断行不同），
     列宽一紧就必然竖排。市场条那一次也见过同样的形状。
     ★ 为什么单测与 §50 都没发现：mock 里的名字是 ASCII 的 "Maotai"/"PingAn"，
       按单词断行、且宽度比 4 个汉字窄 ⇒ 症状根本不出现。
       **只有真数据 + 真渲染才会暴露它** —— 这正是"跑起来看看"不可替代的地方。
     ★ 放不下怎么办：外层 `.wl-scroll` 已有 `overflow-x: auto`，
       所以这里宁可横向滚动，也**不要**把名字竖着排（横滚可用，竖排不可读）。 */
  white-space: nowrap;
}
.wl-td--name:active { cursor: grabbing; }

.wl-td--code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-faint);
}

.wl-del {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* 这里是"删除"，用的是**错误色**，不是涨跌语义色 —— 两者语义无关 */
.wl-del:hover {
  color: var(--err-fg);
  background: var(--err-bg);
  border-color: var(--err-line);
}

/* ── 7. 空态 ─────────────────────────────────────────────────── */

.wl-empty {
  padding: 30px 0 26px;
  text-align: center;
}
.wl-empty__t {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-muted);
}

/* ── 8. K 线 ─────────────────────────────────────────────────── */

.wl-chartbox {
  margin-top: 14px;
  padding: 12px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* ★ 用 grid 让"坐标轴标注"与 "svg" 落在同一格里叠放 ——
       比 absolute + 猜一个 top 值稳（头部高度会随标题换行变）。 */
  display: grid;
  grid-template-columns: 1fr;
}
.wl-chartbox > .wl-chart__head { grid-row: 1; }
.wl-chartbox > .wl-plot,
.wl-chartbox > .wl-svg,
.wl-chartbox > .wl-chart__axis,
.wl-chartbox > .hint,
.wl-chartbox > .alert {
  grid-row: 2;
  grid-column: 1;
}
/* 分时图的图例另占一行（K 线没有图例，那条规则对它自然不生效） */
.wl-chartbox > .wl-chart__legend {
  grid-row: 3;
  grid-column: 1;
}

.wl-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wl-chart__name { font-size: 15px; font-weight: 600; }
.wl-chart__id {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-faint);
}

.wl-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.wl-tab {
  padding: 4px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--fg-muted);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.wl-tab:hover { border-color: var(--accent); color: var(--accent); }
.wl-tab.is-on {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.wl-x {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.wl-x:hover { color: var(--fg); border-color: var(--line-strong); }

/* ── 缩放 / 平移（2026-10-12 补） ────────────────────────────────
   ★ 徽标与复位按钮跟在周期标签后面（标签那一组用了 margin-left:auto 把整组推到最右，
     这里只需依次排下去）。徽标用等宽字体 —— "37–96 / 共 240" 这类数字串对齐才看得清。 */
.wl-chart__zoom {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.wl-chart__reset {
  padding: 3px 9px;
  font: inherit;
  font-size: 11.5px;
  color: var(--fg-muted);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.wl-chart__reset:hover { color: var(--accent); border-color: var(--accent-line); }

/* 操作提示：压在图下方、居中、很淡 —— 它是"第一次用得到、熟了就当不存在"的东西，
   所以既不占头部那块（头部已经挤了名称/代码/标签/徽标/关闭），也不抢视线。 */
.wl-chart__hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--fg-faint);
  text-align: center;
}

/* 抓手光标只在"真能拖"的时候出现（.is-zoomable 由 renderChart 按根数挂上）；
   拖动中用 :active 手感切成抓牢态。 */
.wl-chartbox.is-zoomable .wl-plot { cursor: grab; touch-action: none; }
.wl-chartbox.is-panning .wl-plot { cursor: grabbing; }

.wl-svg {
  display: block;
  width: 100%;
  height: auto;
}
.wl-svg__bg { fill: var(--surface); }

/* ── 悬停读数：十字光标 + 浮层 ──────────────────────────────────
   ★ 为什么要 .wl-plot 这一层：浮层必须相对**图**定位，不是相对整页 ——
     否则页面一滚、或标题多占一行，浮层就飘到跟图对不上的地方去了。
     （坐标由 ui.js 的 onChartMove 算，这里只管摆法。） */
.wl-plot {
  position: relative;
}
/* 光标是"读数的延伸"，它自己不该截走鼠标事件 */
.wl-cross { pointer-events: none; }
.wl-cross__v,
.wl-cross__h {
  stroke: var(--fg-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
/* 描一个"扣掉背景色"的圆点：压在蜡烛上也能看见它在哪一根 */
.wl-cross__dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.wl-tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  /* ★ 不换行：这是"一格读数"，折行会让它看起来像两段文字 */
  white-space: nowrap;
}
.wl-tip__date {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  color: var(--fg-muted);
}
.wl-tip__grid {
  display: grid;
  /* 标签 值 标签 值 —— 两对一行，读起来是"两个数"，不是四个词 */
  grid-template-columns: auto auto auto auto;
  column-gap: 8px;
}
.wl-tip__k { color: var(--fg-faint); }
.wl-tip__v {
  font-family: var(--mono);
  color: var(--fg);
  text-align: right;
}

/* 影线 */
.wl-wick { stroke-width: 1; }
/* 实体 */
.wl-body { stroke-width: 1; }

/* ★ 涨/跌 用"空心 vs 实心"再加一层形状差异（不只靠颜色）。 */
.wl-wick.wl-cup,
.wl-body.wl-cup { stroke: var(--wl-up); }
.wl-body.wl-cup { fill: none; }

.wl-wick.wl-cdn,
.wl-body.wl-cdn { stroke: var(--wl-down); }
.wl-body.wl-cdn { fill: var(--wl-down); }

/* 均线三条：5 / 20 / 60 —— 颜色各取一个已存在的主题变量，不另造色 */
.wl-ma {
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0.9;
}
.wl-ma--0 { stroke: var(--fg-faint); }
.wl-ma--1 { stroke: var(--accent); }
.wl-ma--2 { stroke: var(--warn-fg); }

/* 纵轴标注：与 svg 同格叠放，上下贴边 */
.wl-chart__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  padding: 2px 2px 2px 0;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
}

/* ── 9. 顶部市场条（指数一览 + 涨跌家数） ───────────────────── */

.wl-mkt {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* 指数一览：**等宽网格平铺**（2026-10-12 改）。
   ★ 原设计是"不换行 + 横向滚动"，理由是"一行看完大盘" ——
     但 6 个指数实测内容宽 1188px、容器只有 706px，必然爆出**左右滚动条**：
     "一眼看完"反而变成了"得先横滑才看得全"（师傅 2026-10-12 当场指出）。
   ★ 改成爱盯盘那样的等宽卡片：一屏铺满、无需滚动、窄屏自动降列。
   ★ 用 auto-fit + minmax 而不是写死 repeat(6, 1fr) —— 指数条目增减都不用改 CSS
     （上游换组合、或将来允许用户自定义指数卡）。 */
.wl-idx {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

/* 单个指数卡：名在上、点位与涨跌幅在下（竖排），底色随涨跌轻微着色。
   ★ 底色用 color-mix 把语义色兑进底色 —— 换个主题（亮/暗/暖）都跟着走，
     不需要新造一组"涨跌背景色"变量；不支持 color-mix 时退化成纯 --bg-soft（仍可用）。 */
.wl-mkt__i {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 9px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.wl-mkt__i.wl-up {
  background: color-mix(in srgb, var(--wl-up) 10%, var(--bg-soft));
}
.wl-mkt__i.wl-down {
  background: color-mix(in srgb, var(--wl-down) 10%, var(--bg-soft));
}
.wl-mkt__n {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-mkt__v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  white-space: nowrap;
}
.wl-mkt__p {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
}

/* 涨跌家数：用一条分隔线与指数拉开层次，别和指数挤成一片 */
.wl-breadth {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.wl-breadth__t {
  font-weight: 600;
  color: var(--fg-muted);
}
.wl-breadth__c {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* 市场条自己取数失败：说一句就够，不把整条撤掉（撤掉会连指数一起藏了） */
.wl-mkt__err {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--err-fg);
}

/* 第二行：全球指数 / 商品。★ 用一条细线把"国内大盘"与"外部锚"分层 ——
   它们数据源不同、更新节奏也不同，视觉上不该是同一排 */
.wl-idx--global {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ── 10. 控制条上的勾选项（缩略图开关） ─────────────────────── */

.wl-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--fg-muted);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.wl-check:hover { border-color: var(--accent); color: var(--fg); }
.wl-check input {
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── 11. 分组标签条 ─────────────────────────────────────────── */

.wl-lists { margin-top: 12px; }

.wl-lists__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wl-listtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.wl-listtab:hover { border-color: var(--accent); color: var(--accent); }
.wl-listtab.is-on {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.wl-listtab__name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-listtab__n {
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  background: var(--bg-soft);
  border-radius: 999px;
}
.wl-listtab.is-on .wl-listtab__n { color: var(--accent); }

/* 删除分组的小叉 —— 用错误色（"删"这件事与涨跌语义无关） */
.wl-listtab__x {
  font-size: 14px;
  line-height: 1;
  color: var(--fg-faint);
  border-radius: 999px;
}
.wl-listtab__x:hover { color: var(--err-fg); }

/* 双击改名时就地换成的输入框 */
.wl-listtab__edit {
  width: 130px;
  padding: 2px 6px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--control);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

.wl-listtab--add {
  padding: 4px 12px;
  font-size: 16px;
  line-height: 1;
}

/* ── 12. 表格：横向滚动 / 排序 / 后加的列 ────────────────────── */

/* ★ 列从 7 个长到 12 个之后，窄屏**靠横滑兜住，不再砍列** ——
     砍列是把信息丢掉，横滑只是换个看法。 */
.wl-scroll { overflow-x: auto; }

.wl-sortbtn {
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.wl-sortbtn:hover { color: var(--accent); }
.wl-sortbtn.is-on { color: var(--accent); }

.wl-th--note { text-align: left; }

.wl-td--spark {
  width: 1%;
  padding: 4px 8px;
}
.wl-td--note { width: 1%; }
.wl-td--act { width: 1%; text-align: right; }

/* 行内缩略图：颜色走 --wl-up/--wl-down（与表格其它涨跌格同一套语义色），
   所以这里只写"怎么用 currentColor"，不写任何具体颜色。 */
.wl-spark {
  display: block;
  width: 96px;
  height: 26px;
  color: var(--fg-faint); /* 兜底：还没取到行情时不至于没有颜色 */
}
.wl-spark.wl-up { color: var(--wl-up); }
.wl-spark.wl-down { color: var(--wl-down); }
.wl-spark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* 备注输入：平时看着像文本（边框透明），hover/focus 才显出是输入框 */
.wl-noteinput {
  width: 130px;
  padding: 4px 7px;
  font: inherit;
  font-size: 12.5px;
  color: var(--fg);
  background: var(--control);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.wl-noteinput::placeholder { color: var(--fg-faint); }
.wl-noteinput:hover { border-color: var(--line-strong); }
.wl-noteinput:focus {
  border-color: var(--accent);
  outline: none;
}

/* 行内的"移到哪个分组"下拉 —— 只有多于一个分组时才出现 */
.wl-gsel {
  height: 26px;
  margin-right: 6px;
  padding: 0 4px;
  font: inherit;
  font-size: 12px;
  color: var(--fg-muted);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ── 13. 分时图（曲线 + 均价 + 昨收基准） ────────────────────── */

/* 价格线的颜色跟着涨跌走，用与蜡烛同一套 --wl-up/--wl-down */
.wl-svg--trend { color: var(--fg-faint); }
.wl-svg--trend.wl-up { color: var(--wl-up); }
.wl-svg--trend.wl-down { color: var(--wl-down); }

.wl-tprice {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
/* 均价线取一个已存在的主题变量（--warn-fg），不另造颜色 */
.wl-tavg {
  fill: none;
  stroke: var(--warn-fg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: 0.9;
}
/* 昨收基准：虚线，只作参照，不抢价格线 */
.wl-base {
  stroke: var(--fg-faint);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.8;
}

.wl-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}
.wl-chart__lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wl-chart__lg::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--fg-faint);
}
/* 图例的三段：颜色必须与图里的线一一对上，否则图例就是误导。
   ★ 价格线的涨跌色由 legend 容器上的 .wl-up/.wl-down 带进来（见 ui.js）。 */
.wl-chart__legend.wl-up .wl-chart__lg--price::before { background: var(--wl-up); }
.wl-chart__legend.wl-down .wl-chart__lg--price::before { background: var(--wl-down); }
.wl-chart__lg--avg::before { background: var(--warn-fg); }
.wl-chart__lg--base::before {
  height: 0;
  background: none;
  border-top: 2px dashed var(--fg-faint);
}

/* ── 15. 持仓一览 ────────────────────────────────────────────── */

.wl-hold {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.wl-hold__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}
.wl-hold__tg {
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: none;
  border: 0;
  cursor: pointer;
}
.wl-hold__caret {
  display: inline-block;
  width: 12px;
  color: var(--fg-muted);
}
.wl-hold__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 13px;
}
.wl-hold__k {
  margin-right: 4px;
  color: var(--fg-muted);
}
.wl-hold__hint {
  margin: 8px 0 0;
}
.wl-hold__table {
  margin-top: 10px;
}

/* ── 16. 价格提醒（横幅 + 越线行） ──────────────────────────── */

.wl-alerts {
  margin-bottom: 12px;
}
.wl-alertbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.wl-alertbar__t {
  font-weight: 600;
  color: var(--warn-fg);
}
.wl-alertbar__i {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--control);
}
.wl-alertbar__n {
  font-weight: 600;
}
.wl-alertbar__k {
  color: var(--fg-muted);
}
/* ★ 上限越线 / 下限越线用**符号**区分，不只靠颜色（色盲用户也读得出）
   —— 与既有做法一致：涨跌既有颜色也有 +/- 号，K 线用空心/实心。 */
.wl-alertbar__i--hi .wl-alertbar__k::before { content: '▲ '; }
.wl-alertbar__i--lo .wl-alertbar__k::before { content: '▼ '; }
.wl-alertbar__x {
  margin-left: auto;
  padding: 0 6px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

/* 越线的行：左侧一条竖线 + 淡底。★ 不用整行换色 —— 那会把涨跌色（另一种信息）盖掉 */
.wl-row.is-alert > td {
  background: var(--warn-bg);
}
.wl-row.is-alert > td:first-child {
  box-shadow: inset 3px 0 0 var(--warn-fg);
}

/* ── 17. 行内面板（持仓 / 提醒的输入） ──────────────────────── */

.wl-editrow > td {
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.wl-editform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.wl-edit__f {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wl-edit__k {
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.wl-edit__i {
  width: 96px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
}
.wl-edit__hint {
  font-size: 12.5px;
  color: var(--fg-muted);
}
.wl-edit__clear {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* 操作列里的"⋯"：窄的方形按钮，与删除的 × 并排但不抢眼 */
button.wl-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
button.wl-edit:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}
button.wl-edit.is-on {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── 14. 窄屏 ────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .wl-bar { flex-wrap: wrap; }
  .wl-colorsel { margin-right: 0; }
  .wl-grow { flex-basis: 100%; }
  .wl-check { flex-basis: 100%; justify-content: center; }

  /* 7 列在窄屏放不下：先砍「涨跌额」「成交额」，保留 名称/代码/现价/涨跌幅
     （前六列的顺序是验收脚本钉死的，砍的是位置、不是顺序） */
  .wl-table .wl-th:nth-child(5),
  .wl-table .wl-td:nth-child(5),
  .wl-table .wl-th:nth-child(6),
  .wl-table .wl-td:nth-child(6) {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════════
 * 2. 榜单侧（原 tools/marketboard/styles.css，逐字保留）
 * ══════════════════════════════════════════════════════════════ */
/* ── 1. 语义色 ─────────────────────────────────────────────────── */

/*
 * ★ 2026-10-13 按师傅「仿照爱盯盘来做」对齐涨跌色：
 *   爱盯盘用 涨 #f22423 / 跌 #00a000（很亮的一对），我们原来是 #c62828 / #178553（偏暗）。
 *   ⇒ 采它的色值：行情软件里"亮红亮绿"是行业习惯，暗红暗绿看着发闷。
 * ★ 但**代价要写在明处**（这是取舍，不是白捡）：
 *   在 light 主题的白底上，对比度从 5.6:1 / 4.7:1 降到约 **4.2:1 / 3.5:1**
 *   （WCAG 正文 AA 要求 4.5:1）⇒ #00a000 的绿字在白底上是**不达标**的。
 *   判断：涨跌幅是表格里最主要的数字、字重不低，实际读起来可以接受；
 *   若师傅觉得白底上绿字发飘，**只改下面这两个值**（所有涨跌色都从它们派生）。
 * ★ 深色主题**不跟着改**：爱盯盘没有深色模式，无从对照；
 *   而 #00a000 压在深底上会明显偏暗，故保留原先为深色调过的一对。
 */
.mb {
  --mb-red: #f22423;
  --mb-green: #00a000;
  --mb-up: var(--mb-red);
  --mb-down: var(--mb-green);
  /* 堆叠条段内的文字色：段底是**饱和**的语义色，亮/暗两种主题下都得用浅色字才读得清，
     而主题变量里只有"页面底色/前景色"这一对（会随主题翻转），没有"压在强调色上的字"。
     ⇒ 所以这里承认第二处定值。★ 不散落在结构规则里，收进色板块，
       将来要改只改这一处（与 --mb-red/--mb-green 同一处管理）。 */
  --mb-seg-fg: #fff;
}
html[data-theme='dark'] .mb {
  --mb-red: #f07a72;
  --mb-green: #4fc48d;
}

.mb-up { color: var(--mb-up); }
.mb-down { color: var(--mb-down); }
.mb-flat { color: var(--fg-muted); }

/* ── 2. 按钮（全局样式表里没有 .btn，必须自带） ───────────────── */

.btn {
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fg);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { background: var(--bg-soft); }

.btn--ghost {
  background: var(--bg-soft);
  color: var(--fg-muted);
}

/* ── 3. 顶部：页签（2026-10-13 起这里只剩页签）────────────────
   ★ 原来这里还有"排序下拉 + 刷新按钮"一组（.mb-bar__right / .mb-sort），已随两处改动删掉：
     ① 排序 —— 天梯那个下拉删了，**所有页签的排序入口都只剩表头**（见 ui.js sortsFor）
     ② 刷新 —— 撤了按钮，改由自动刷新（盘中 10s / 盘后 5 分钟）承担
   ⇒ 这一节现在只剩页签条本身。 */

.mb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.mb-tab {
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.mb-tab:hover { border-color: var(--accent); color: var(--accent); }
.mb-tab.is-active {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.mb-lede {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--fg-muted);
}

.mb-body { margin-top: 14px; }

.mb-foot { margin-top: 14px; }

.mb-state { padding: 26px 0; }

/* ── 4. 表格 ───────────────────────────────────────────────────── */

/* ★ 列宽不够时**横滑兜住，不砍列** —— 砍列是把信息丢掉，横滑只是换个看法。
   （摘要表 7 列在 744px 的可视宽里大概率放不下。） */
.mb-scroll { overflow-x: auto; }

.mb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mb-table--slim { margin-top: 12px; }

/* ★ 板块表（行业 / 概念）比个股表宽得多 —— 10 列，比原来多 3 列。
   学爱盯盘的 `size="small"`：**靠每列更窄**把列装下，而不是把字号调小
   （它自己的字号其实更大，14.3px）。所以这里只收内边距，字号保持。
   ★ 仍然横滑兜底（.mb-scroll）—— 列宽不够时宁可横滑，也不砍列。 */
.mb-table--wide .mb-th,
.mb-table--wide .mb-td { padding-left: 8px; padding-right: 8px; }

.mb-th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

/* 数字列：等宽 + 表格数字，位数对齐才不会"跳" */
.mb-num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* ★ 不许换行 —— "44.53 亿" / "1.58 万亿" 在列宽吃紧时会被拆成两行，读起来像两个数 */
  white-space: nowrap;
}
/* 表头的中文/字母标题不该用等宽体压住可读性 —— 只保留右对齐 */
.mb-th.mb-num { font-family: inherit; }

/* ── 表头排序（2026-10-12 按师傅「一个排序还搞个下拉列表，不能放表头吗」改）──
   ★ 双三角**常显**（不是悬停才出现）：爱盯盘的 Ant 表也是常显的 ——
     ① 它先把"**这一列可点**"这件事告诉人（可点性得先看得见，否则等于没做）；
     ② 当前列的高亮才有地方落（只用文字加粗表达，弱得多）。
   ★ 未排序列的两个三角压到 45% 透明，当前列只把**正在用的那个方向**点亮。 */
.mb-th--sortable {
  cursor: pointer;
  user-select: none;
}
.mb-th--sortable:hover { color: var(--fg); }
/* 键盘可达：表头是 tabindex="0" 的，焦点必须看得见（否则 Tab 过去像断了） */
.mb-th--sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.mb-th__label { vertical-align: middle; }

.mb-sorter {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 0; /* 让它不撑高行盒 */
}

/* 三角用 border 画，**不用 ▲▼ 字符** —— 字符的字形高度与基线随字体变，
   而表头是等宽体与比例体混排的地方，用字符会出现列与列之间高低不齐。 */
.mb-caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  opacity: 0.45;
}
.mb-caret--up { border-bottom: 4.5px solid var(--fg-faint); }
.mb-caret--down { border-top: 4.5px solid var(--fg-faint); }

.mb-sorter.is-asc .mb-caret--up { opacity: 1; border-bottom-color: var(--fg); }
.mb-sorter.is-desc .mb-caret--down { opacity: 1; border-top-color: var(--fg); }

.mb-row:hover { background: var(--accent-soft); }

.mb-td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.mb-table tbody tr:last-child .mb-td { border-bottom: 0; }

/* ★ 股票名**一个字都不许拆行**（watchlist 真数据实测暴露过）：
   CJK 文本在任何字符之间都可断行，列宽一紧"贵州茅台"会竖着排成四行。
   外层 .mb-scroll 已有 overflow-x: auto，宁可横滑也不要竖排。 */
.mb-td--name { font-weight: 600; white-space: nowrap; }
.mb-td--leader { white-space: nowrap; }

.mb-name { margin-right: 8px; }
.mb-code {
  font-size: 12.5px;
  color: var(--fg-faint);
}

/* ── 5. 指数卡片（页签 1） ───────────────────────────────────── */

/* 分组（2026-10-13 按爱盯盘「指数行情」页的"6 组、每组一行"）。
   组标题 = 大类名（中国指数 / 大盘指数 / …），标题下就是一排卡片。 */
.mb-ixgroup {
  margin-bottom: 14px;
}
.mb-ixgroup:last-child {
  margin-bottom: 0;
}
.mb-ixgroup__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* ★ 固定 6 列（2026-10-13 随分组一起改）。
   原来用 `auto-fit + minmax(140px, 1fr)`（"条目增减不用改 CSS"），那个理由在
   **平铺一排**时成立；但分组之后每组的语义就是"**一行 6 格**"（爱盯盘原样：
   卡片 `w-14.95%` + `ml-1.5%`），auto-fit 会按容器宽度自己塞 5 或 6 个 ⇒
   每组最后 1 格掉到第二行，六组全都缺一角。
   ⇒ 改成固定 6 列。窄屏用媒体查询逐档降列（不是 auto-fit —— 那样列数随宽度乱漂，
     同一组在不同窗口下换行位置不同，看着就是没做完）。
   ★ minmax(0, 1fr) 而不是 1fr：1fr 的最小尺寸是 auto，长指数名会把列撑宽、挤破网格。 */
.mb-idxgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .mb-idxgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .mb-idxgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mb-idx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  /* 爱盯盘那张卡 hover 会微微抬起（`translateY(-3px) scale(1.015)`），
     这里照做 —— 但只做过渡，位移放在 :hover 里，免得静止时就占着 GPU。 */
  transition: transform 0.12s ease;
}

.mb-idx:hover {
  transform: translateY(-3px) scale(1.015);
}

/* ★ 整卡浅色底（爱盯盘是**整卡**着色，不只是给数字上色）——
   兑色用 color-mix 把语义色混进 --bg-soft，换主题（亮/暗）自动跟着走，
   不必再新造一组"涨跌背景色"变量；不支持 color-mix 的浏览器整条作废，
   退回到上面 .mb-idx 的 --bg-soft（仍是可用的，只是不着色）。
   涨红跌绿 = A 股口径，与 --mb-up / --mb-down 同一套。 */
.mb-idx--up {
  background: color-mix(in srgb, var(--mb-up) 10%, var(--bg-soft));
}
.mb-idx--down {
  background: color-mix(in srgb, var(--mb-down) 10%, var(--bg-soft));
}

/* 无障碍：系统设了"减少动态效果"就不抬起 */
@media (prefers-reduced-motion: reduce) {
  .mb-idx,
  .mb-idx:hover {
    transition: none;
    transform: none;
  }
}

.mb-idx__name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-idx__px {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  white-space: nowrap;
}
.mb-idx__pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
}

/* 指数内部的涨跌家数：三个数一排，各自用语义色，但整体压得很轻 */
.mb-idx__bd {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* ── 6. 涨跌分布（页签 2） ───────────────────────────────────── */

.mb-breadth {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.mb-breadth__total {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mb-breadth__k {
  font-size: 12px;
  color: var(--fg-muted);
}
.mb-breadth__v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  color: var(--fg);
}

/* 堆叠条：三段按家数比例分配宽度（flex 值由 ui.js 内联给）。
   ★ 名字刻意不叫 .mb-bar__* —— `.mb-bar` 已经是顶部工具条那个块，
     同一个块名指两样东西，将来维护必然踩坑。 */
.mb-dist__track {
  display: flex;
  height: 22px;
  margin: 10px 0 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.mb-dist__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 6px;
  color: var(--mb-seg-fg);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}
.mb-dist__seg > i { font-style: normal; opacity: 0.9; }
.mb-dist__seg > b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mb-dist__seg--up { background: var(--mb-up); }
.mb-dist__seg--down { background: var(--mb-down); }
/* 平盘用中性色，别抢涨跌的视线 */
.mb-dist__seg--flat {
  background: var(--fg-faint);
  color: var(--fg);
}

.mb-breadth__note { margin: 10px 0 0; }

/* ── 6b. 涨跌分布 · 同花顺细节（2026-10-13 接同花顺后按爱盯盘补的版式） ─────────
 *
 * 版面：五数卡 → 涨跌比例条（上面那条 .mb-dist__track）→ 11 档直方图 → 合计与口径说明
 *       → 家数双折线 → 成交额四数 → 各指数明细表。
 *
 * ★★ 直方图的配色口径 —— **这里刻意与爱盯盘不同**，理由写在 ui.js 的 renderBreadth 上面：
 *   爱盯盘同一页里两条图的配色是**相反**的（折线 涨红跌绿 / 直方图 跌红涨绿），
 *   我们两份都按 **A 股口径**（涨=红 / 跌=绿 / 平=灰）。
 *   ⇒ 想换成爱盯盘那套，**只改下面 --mb-hist-up / --mb-hist-down 两个变量**。
 * ★ 两个 fade 值用 color-mix 从上面那两个色**派生**，所以换色时不存在"改了主色漏了渐变"。
 *   color-mix 不被支持的浏览器会**整条声明作废** ⇒ 自动退回上一行的实色（下面每处都写了
 *   一条实色在前）。这是渐进增强，不是"赌浏览器支持"。
 */
.mb {
  --mb-hist-up: var(--mb-up);
  --mb-hist-down: var(--mb-down);
  --mb-hist-flat: var(--fg-faint);
}

.mb-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.mb-stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.mb-stat__k {
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.mb-stat__v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}

/* 11 档直方图：横向 11 格，高的一格占满，其余按比例。
   ★ 窄屏可横向滚动（11 列 × 34px 比手机宽度大）—— 挤成一团比滚动更糟。 */
.mb-hist {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 132px;
  margin: 4px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.mb-hist__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  min-width: 34px;
  /* ★ 这一截是给"值标签浮在最高那根柱子上方"留的位置 ——
     不留的话，100% 高的柱子会把标签顶出列外（被 .mb-hist 的 overflow-y:hidden 裁掉）。 */
  padding-top: 15px;
}
.mb-hist__slot {
  position: relative;
  flex: 1 1 auto;
  background: var(--bg-soft);
  border-radius: 3px 3px 0 0;
}
.mb-hist__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px 3px 0 0;
}
/* ★ 实色在前、渐变在后：不认识 color-mix 的浏览器整条丢掉第二行，落到实色 */
.mb-hist__bar--up {
  background: var(--mb-hist-up);
  background: linear-gradient(180deg, var(--mb-hist-up), color-mix(in srgb, var(--mb-hist-up) 30%, transparent));
}
.mb-hist__bar--down {
  background: var(--mb-hist-down);
  background: linear-gradient(180deg, var(--mb-hist-down), color-mix(in srgb, var(--mb-hist-down) 30%, transparent));
}
.mb-hist__bar--flat {
  background: var(--mb-hist-flat);
  background: linear-gradient(180deg, var(--mb-hist-flat), color-mix(in srgb, var(--mb-hist-flat) 30%, transparent));
}
/* 值标签**浮在柱子顶上**（bottom 由 ui.js 内联给成柱高）。
   ★ translateY(-100%) 让它整个待在标注点上方，配合 .mb-hist__col 的 padding-top 留位。 */
.mb-hist__val {
  position: absolute;
  right: 0;
  left: 0;
  transform: translateY(-100%);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  color: var(--fg-muted);
}
.mb-hist__key {
  font-size: 10.5px;
  line-height: 13px;
  text-align: center;
  color: var(--fg-faint);
  white-space: nowrap;
  overflow: hidden;
}

/* 家数双折线 */
.mb-line {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.mb-line__legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}
.mb-line__lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mb-line__lg::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.mb-line__lg--up { color: var(--mb-up); }
.mb-line__lg--down { color: var(--mb-down); }
.mb-line__svg {
  display: block;
  width: 100%;
  height: auto;
}
.mb-line__bg { fill: var(--bg-soft); }
.mb-line__p {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mb-line__p--up { stroke: var(--mb-up); }
.mb-line__p--down { stroke: var(--mb-down); }

/* 成交额四数 */
.mb-turnover {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.mb-turnover__title {
  font-size: 13px;
  color: var(--fg-muted);
}
.mb-turnover .mb-stats { margin-bottom: 0; }

/* 明细表的小标题 */
.mb-sub { margin-top: 16px; }
.mb-sub__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
}

/* ── 7. 涨停天梯（页签 4） ───────────────────────────────────── */

.mb-ladder__sum {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--fg-muted);
}

.mb-rung { margin-bottom: 14px; }

.mb-rung__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.mb-rung__b {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.mb-rung__c {
  font-size: 12px;
  color: var(--fg-faint);
}

.mb-rung__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 一只股票一个小块：名称 / 代码 / 涨跌幅 / 封板时间 / 封板资金 / 行业 */
.mb-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
  padding: 5px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  white-space: nowrap;
}
.mb-chip__n { font-weight: 600; }
.mb-chip__c {
  font-size: 11.5px;
  color: var(--fg-faint);
}
.mb-chip__p {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.mb-chip__t {
  font-size: 11.5px;
  color: var(--fg-muted);
}
.mb-chip__f {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--fg-muted);
}
.mb-chip__s {
  padding: 0 6px;
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg-soft);
  border-radius: 999px;
}

/* ── 8. 窄屏 ───────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .mb-bar { align-items: stretch; }
  .mb-tabs { flex-basis: 100%; }
  .btn { flex: 0 0 auto; }

  /* 分布条的段内标签在窄屏会互相挤压，只留数字 */
  .mb-dist__seg > i { display: none; }
}


/* ══════════════════════════════════════════════════════════════
 * 3. 外壳：页签条 + 两个视图容器（本文件新增，前缀 `sb-`）
 * ══════════════════════════════════════════════════════════════
 * ★ 外壳自己**不用 `.toolbox`**：那是全局的"卡片"（边框 + 底 + 阴影 + 内边距），
 *   而两个视图内部各自已经有一张卡片 —— 套两层会得到"卡中卡"的双层边框。
 *   所以页签条摆在卡片**外面**（上面），卡片归各自的视图。
 * ★ 页签样式与 `.mb-tab` 同形（同一个工具里两排按钮长得一样才对），
 *   但**必须另写一份**而不是复用 `.mb-tab`：视图二的 CSS 只在该视图存在时才有意义，
 *   让外壳去借它的类名，就是项目里那条"借别人的类名 = 没样式"的原样重演。
 */

.sb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.sb-tab {
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.sb-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sb-tab.is-active {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* ★ 显式兜住 [hidden]：视图容器上若将来有规则写了 display，UA 的 hidden 会被盖掉，
     那正是"该消失的那个视图没消失"的静默故障（两个视图叠在一起）。 */
.sb-view[hidden] {
  display: none;
}

/* ── 8b. 笔记：`.mb-bar--sub` 已删（2026-10-13）─────────────────────
   hideTabRow 时整条 `.mb-bar` 不再渲染（里面已空无一物），
   于是"嵌进来时要抹掉上边距"这条规则也随之没有对象了。 */