/* market.css —— 市场行情组件样式（配色跟随 PaperMod 的 CSS 变量，自动适配明暗主题） */

.mq-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px 10px;
  margin: 24px 0;
  background: var(--entry, #fff);
}

/* ---------- ① 指数报价带 ---------- */
.mq-index {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin: 20px 0 24px;
  background: var(--entry, #fff);
}
.mq-idx-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}
.mq-idx-name { font-size: 1.05rem; font-weight: 600; color: var(--content, #24292f); }
.mq-idx-price {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mq-idx-chg { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-idx-time { margin-left: auto; font-size: 0.74rem; color: var(--secondary, #6b7280); }
.mq-idx-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px 8px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border, #e5e7eb);
  list-style: none;
}
.mq-idx-facts li { display: flex; flex-direction: column; gap: 2px; }
.mq-idx-facts li span { font-size: 0.72rem; color: var(--secondary, #6b7280); }
.mq-idx-facts li b {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--content, #24292f);
  font-variant-numeric: tabular-nums;
}

/* ---------- ② 主图 ---------- */
.mq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.mq-title { display: flex; align-items: baseline; gap: 8px; }
.mq-name { font-size: 1.05rem; font-weight: 600; color: var(--content, #24292f); }
.mq-code {
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: var(--secondary, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  padding: 0 5px;
}
.mq-quote { display: flex; align-items: baseline; gap: 10px; }
.mq-price { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-chg { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-meta { margin-left: auto; font-size: 0.75rem; color: var(--secondary, #6b7280); }
.mq-loading, .mq-error { color: var(--secondary, #6b7280); font-size: 0.9rem; }

/* 周期 / 区间按钮 */
.mq-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 6px 0 10px;
}
.mq-range { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mq-range button {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 0 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: transparent;
  color: var(--secondary, #6b7280);
  cursor: pointer;
  transition: all 0.15s;
}
.mq-range button:hover { border-color: var(--primary, #1f6feb); color: var(--primary, #1f6feb); }
.mq-range button.on {
  background: var(--primary, #1f6feb);
  border-color: var(--primary, #1f6feb);
  color: #fff;
}
.mq-periods button { font-weight: 600; }
.mq-ranges { border-left: 1px solid var(--border, #e5e7eb); padding-left: 14px; }
.mq-chart { width: 100%; }

/* ---------- ③ 相关资产横条 ---------- */
.mq-peers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin: 18px 0 24px;
}
.mq-peer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--entry, #fff);
}
.mq-peer-n { font-size: 0.74rem; color: var(--secondary, #6b7280); }
.mq-peer-v {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--content, #24292f);
  font-variant-numeric: tabular-nums;
}
.mq-peer-p { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- ④ 榜单 / ⑤ 报价表 ---------- */
.mq-quotes, .mq-movers { margin: 18px 0 24px; }
.mq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.mq-table th {
  text-align: right;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--secondary, #6b7280);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.mq-table th:first-child { text-align: left; }
.mq-table td {
  text-align: right;
  padding: 9px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.mq-table td:first-child { text-align: left; }
.mq-table .mq-t-name { font-weight: 600; color: var(--content, #24292f); }
.mq-table .mq-t-code {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--secondary, #6b7280);
}
.mq-quotes-note {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--secondary, #6b7280);
}

@media (max-width: 560px) {
  .mq-price { font-size: 1.25rem; }
  .mq-idx-price { font-size: 1.45rem; }
  .mq-meta, .mq-idx-time { width: 100%; margin-left: 0; }
  .mq-table { font-size: 0.85rem; }
  .mq-table th, .mq-table td { padding: 8px 4px; }
  .mq-ranges { border-left: 0; padding-left: 0; }
  .mq-peer { padding: 8px 10px; }
}