/* 品类行情板样式：金融终端的「专业模式」与独立的「全球市场行情」两页共用一份。
   两页的行、标签、迷你走势与脉冲条必须长得一模一样——同一份数据的同一种呈现，
   不该因为换了个页面就变成两套样子。颜色令牌由各自页面的 :root 提供。 */

/* 品类行情板：六类标签页 + 可折叠列表。整行本身是按钮，触控目标不低于44px；
   涨跌同时用箭头、正负号与文字表达，颜色只是第三重编码。 */
.board-note {
  max-width: 92ch;
  margin: 13px 0 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.85;
}
.board-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.board-search {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 420px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink);
  background: rgba(12, 18, 27, 0.7);
  font-family: var(--sans);
  font-size: 13px;
}
.board-search::placeholder { color: var(--faint); }
.board-search:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.board-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.board-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 64px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--muted);
  background: rgba(12, 18, 27, 0.7);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}
.board-tab b { font-weight: 600; }
.board-tab i { color: var(--faint); font-family: var(--mono); font-size: 10px; font-style: normal; }
/* 六个品类各带一条强调色：标签上的圆点、选中态、面板描边与脉冲条都跟着它走，
   「现在看的是哪一类」不用靠记忆。颜色只做品类标识，涨跌另有箭头与文字，不靠颜色编码。 */
.board-tab[data-category="commodity"], [data-board-category="commodity"] { --accent: #f2bd5c; --accent-soft: rgba(242, 189, 92, 0.12); }
.board-tab[data-category="index"], [data-board-category="index"] { --accent: #54d8ff; --accent-soft: rgba(84, 216, 255, 0.12); }
.board-tab[data-category="stock"], [data-board-category="stock"] { --accent: #a78bfa; --accent-soft: rgba(167, 139, 250, 0.13); }
.board-tab[data-category="fx"], [data-board-category="fx"] { --accent: #4fd1c5; --accent-soft: rgba(79, 209, 197, 0.12); }
.board-tab[data-category="crypto"], [data-board-category="crypto"] { --accent: #ff9f45; --accent-soft: rgba(255, 159, 69, 0.12); }
.board-tab[data-category="bond"], [data-board-category="bond"] { --accent: #7aa2ff; --accent-soft: rgba(122, 162, 255, 0.13); }
.board-tab::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--cyan));
  box-shadow: 0 0 7px var(--accent, var(--cyan));
  content: "";
  opacity: 0.75;
}
.board-tab:hover { border-color: var(--accent, var(--cyan)); color: var(--ink); }
.board-tab[aria-selected="true"] {
  border-color: var(--accent, var(--cyan));
  color: var(--accent, var(--cyan));
  background: var(--accent-soft, var(--cyan-soft));
}
.board-tab[aria-selected="true"]::before { opacity: 1; }
.board-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* 二级分组条：品类之下再分一层（目前只有商品分了「能源 / 贵金属 / 工业金属 / 农产品 /
   软商品 / 畜牧 / 商品指数」七组）。它是筛选芯片而不是第二组标签页——面板仍是同一个
   品类的 tabpanel，状态由 aria-pressed 表达，触控目标同样不低于44px。 */
.board-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.board-groups[hidden] { display: none; }
.board-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.board-group-chip b { font-weight: 500; }
.board-group-chip i { color: var(--faint); font-family: var(--mono); font-size: 10px; font-style: normal; }
.board-group-chip:hover { border-color: var(--accent, var(--cyan)); color: var(--ink); }
.board-group-chip[aria-pressed="true"] {
  border-color: var(--accent, var(--cyan));
  color: var(--accent, var(--cyan));
  background: var(--accent-soft, var(--cyan-soft));
}
.board-group-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* 列表里的分组小标题：它不是数据行，因此不带 .board-row，也不参与逐行的自选、
   迷你走势与盘中覆盖——那些只发生在真正的行情行上。 */
.board-group-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid var(--accent, var(--cyan));
  color: var(--muted);
  background: rgba(12, 18, 27, 0.55);
  font-family: var(--sans);
  font-size: 12px;
}
.board-group-head b { font-weight: 600; letter-spacing: 0.04em; }
.board-group-head i { color: var(--faint); font-family: var(--mono); font-size: 10px; font-style: normal; }

.board-panel {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent, var(--cyan));
  border-radius: 4px;
  background:
    linear-gradient(180deg, var(--accent-soft, var(--cyan-soft)), transparent 96px);
}
.board-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 10px 0 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: var(--accent-soft, var(--cyan-soft)); }
.board-open,
.board-head-cells {
  display: grid;
  /* 标的 · 走势 · 最新价 · 变 · 涨跌 · 每周 · 月度 · 年初至今 · 同比 · 口径 · 数据日 */
  grid-template-columns:
    minmax(0, 1fr) 68px 104px 84px 104px 76px 76px 82px 76px 96px 88px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.board-open:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.board-open:hover .board-cell-name b { color: var(--cyan); }
.board-cell-watch { color: var(--faint); font-family: var(--mono); font-size: 10px; text-align: center; }
.board-row-head {
  min-height: 34px;
  color: var(--faint);
  background: rgba(12, 18, 27, 0.82);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.board-head-cells { min-height: 34px; padding: 6px 10px; cursor: default; }
.board-cell-name { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.board-cell-name b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.board-cell-name i { color: var(--faint); font-family: var(--mono); font-size: 10px; font-style: normal; }
.board-cell-price { font-family: var(--mono); font-size: 14px; text-align: right; }
.board-cell-currency { margin-left: 4px; color: var(--faint); font-size: 10px; font-style: normal; }
.board-cell-change {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-family: var(--mono);
  font-size: 13px;
}
.board-arrow { font-size: 10px; font-style: normal; }
.board-cell-extra { color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: right; }
/* 绝对变化与四个区间列：正负同时用符号与颜色表达，缺值一律「—」。 */
.board-cell-abs,
.board-cell-period {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.board-cell-abs[data-direction="up"], .board-cell-period[data-direction="up"] { color: var(--up); }
.board-cell-abs[data-direction="down"], .board-cell-period[data-direction="down"] { color: var(--down); }
.board-cell-asof {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}
.board-row-head .board-cell-abs,
.board-row-head .board-cell-period,
.board-row-head .board-cell-asof { color: var(--faint); }
.board-cell-spark {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 22px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
}
.board-spark { width: 100%; height: 22px; }
.board-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px currentColor);
}
.board-spark-area { fill: currentColor; opacity: 0.13; stroke: none; }
.board-spark-up { color: var(--up); }
.board-spark-down { color: var(--down); }
.board-spark-flat, .board-spark-unknown { color: var(--faint); }
.board-spark-empty { color: var(--faint); font-size: 9px; font-style: normal; }
.board-pulse { display: inline-flex; align-items: center; gap: 8px; }
.board-pulse-bar {
  display: flex;
  overflow: hidden;
  width: 84px;
  height: 6px;
  border-radius: 3px;
  background: rgba(151, 169, 196, 0.16);
}
.board-pulse-seg { height: 100%; }
.board-pulse-up { background: var(--up); }
.board-pulse-down { background: var(--down); }
.board-pulse-flat, .board-pulse-unknown { background: var(--faint); }
.board-pulse-text { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; }
/* 涨跌用底色块托一下，长列表里更容易一眼扫到；方向仍由箭头与正负号决定，
   颜色只是加强，不是唯一编码。 */
.board-cell-change b { padding: 2px 6px; border-radius: 3px; }
.board-change-up .board-cell-change { color: var(--up); }
.board-change-up .board-cell-change b { background: var(--up-soft); }
.board-change-down .board-cell-change { color: var(--down); }
.board-change-down .board-cell-change b { background: var(--down-soft); }
.board-change-flat .board-cell-change,
.board-change-unknown .board-cell-change { color: var(--faint); }
.board-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--cyan);
  background: rgba(12, 18, 27, 0.62);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.board-toggle:hover { background: var(--cyan-soft); }
.board-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.board-empty { margin: 0; padding: 16px 14px; color: var(--faint); font-size: 12px; }
.board-failures { margin: 10px 0 0; color: var(--amber); font-size: 12px; }
.board-range-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.board-range-tab {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--muted);
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}
.board-range-tab[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); }

/* 末端光点与数值闪动：两者都只在「有真实新数据」时才有意义——
   光点标的是序列画到哪一天为止，闪动只由取到的新数值与当前显示不同触发。
   两者都尊重系统的「减少动态效果」设置。 */
.board-spark-dot {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
  animation: board-spark-pulse 2.6s ease-in-out infinite;
}

@keyframes board-spark-pulse {
  0%, 100% { opacity: 0.55; r: 1.7; }
  50% { opacity: 1; r: 2.6; }
}

.board-cell-price.live-tick-up,
.board-cell-price.live-tick-down {
  border-radius: 3px;
  animation: board-tick 0.9s ease-out;
}

@keyframes board-tick {
  0% { background: currentColor; color: #050a11; }
  100% { background: transparent; }
}

.board-cell-price.live-tick-up { color: var(--up); }
.board-cell-price.live-tick-down { color: var(--down); }

.board-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.board-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 6px var(--up);
  animation: board-live-blink 2.2s ease-in-out infinite;
}

.board-live[data-live-state="stale"] i,
.board-live[data-live-state="error"] i { background: var(--faint); box-shadow: none; animation: none; }

@keyframes board-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .board-spark-dot, .board-live i { animation: none; }
  .board-cell-price.live-tick-up, .board-cell-price.live-tick-down { animation: none; }
}