/* Retu 官网 · r48 · 即时报价:总览 + 涨跌幅榜 + 迷你图
 *
 * 只用设计令牌(--c-* / --s-* / --fs-*),不写死颜色,所以深色与浅色主题都不需要另写规则。
 * 不碰 theme-light-r45.css 等别人维护的浅色文件:浅色下若有需要补的,写在本文件末尾。
 * 回退 = 删页头里引用本文件的那一行。
 */

/* ── 模式切换:总览 / 下钻(完整表) ─────────────────────────────── */
#quotes[data-qmode="overview"] [data-q-table],
#quotes[data-qmode="overview"] .qpage,
#quotes[data-qmode="overview"] .qpending { display: none !important; }
#quotes[data-qmode="table"] .qov,
#quotes[data-qmode="table"] .qrank { display: none; }
#quotes:not([data-qmode="table"]) .qback { display: none; }

/* 页签顺序:总览 · 外汇 · 加密货币 · 指数 · 大宗商品 · 自选;「全部」只在选中(搜索)时出现 */
.qtabs > li[data-o="0"] { order: 0; }
.qtabs > li[data-o="1"] { order: 1; }
.qtabs > li[data-o="2"] { order: 2; }
.qtabs > li[data-o="3"] { order: 3; }
.qtabs > li[data-o="4"] { order: 4; }
.qtabs > li[data-o="5"] { order: 5; }
.qtabs > li[data-o="6"] { order: 6; }
#quotes:not([data-qcat="all"]) .qtabs > li[data-q-alltab] { display: none; }

.qback {
  display: inline-flex; align-items: center; gap: var(--s-1);
  margin-block-start: var(--s-6); padding: var(--s-1) var(--s-2);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-primary-700); background: none; border: 0; cursor: pointer;
  border-radius: var(--r-xs);
}
.qback:hover { color: var(--c-text); }
.qback + .qtools { margin-block-start: var(--s-3); }
.qtools { scroll-margin-block-start: 96px; }

/* ── 共用零件 ─────────────────────────────────────────────────── */
.qov h3, .qov h4, .qrank h3, .qrank h4 {
  margin: 0; font-family: inherit; letter-spacing: normal; text-transform: none;
}
.qv-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.qv-name b { font-weight: 600; color: var(--c-text); white-space: nowrap; }
.qv-name i {
  font-style: normal; font-size: var(--fs-eyebrow); color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qv-tag {
  margin-inline-start: var(--s-1); padding: 0 6px; font-style: normal; font-size: 11px; font-weight: 500;
  color: var(--c-text-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); vertical-align: 1px;
}
.qv-price { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--c-text); white-space: nowrap; }
.qv-unit {
  display: block; font-family: var(--font-sans); font-size: var(--fs-eyebrow);
  color: var(--c-text-3); white-space: nowrap;
}
.qv-chg { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.qv-chg[data-dir="up"] { color: var(--c-success-700); }
.qv-chg[data-dir="down"] { color: var(--c-danger-700); }
.qv-chg[data-dir="flat"] { color: var(--c-text-3); }

.qv-pill {
  display: inline-block; padding: 2px var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.qv-pill[data-dir="up"]   { color: var(--c-success-700); background: var(--c-success-50); }
.qv-pill[data-dir="down"] { color: var(--c-danger-700);  background: var(--c-danger-50); }
.qv-pill[data-dir="flat"] { color: var(--c-text-3); background: var(--c-surface-subtle); }

/* 迷你图:线宽 1.5、实心终点、无面积/箭头/坐标轴;每条线各自缩放,只表示形状 */
.qv-spark { display: block; overflow: visible; }
.qv-line {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.qv-dot {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.qv-spark[data-dir="up"] { color: var(--c-success-700); }
.qv-spark[data-dir="down"] { color: var(--c-danger-700); }
.qv-spark[data-dir="flat"] { color: var(--c-text-3); }
.qv-spark--card { width: 100%; height: 48px; }
.qv-spark--row { width: 80px; height: 24px; }
.qv-spark--rank { width: 72px; height: 24px; }
.qv-spark-slot { display: block; flex: none; }

.qov-empty, .qrank__empty {
  margin: 0; padding: var(--s-5) 0; color: var(--c-text-3); font-size: var(--fs-sm);
}
.qov-note {
  margin: var(--s-2) 0 0; font-size: var(--fs-eyebrow); line-height: 1.5; color: var(--c-text-3);
}
.qov-note + .qov-note { margin-block-start: 2px; }

/* ── 总览 ─────────────────────────────────────────────────────── */
.qov { margin-block-start: var(--s-2); }
.qov-block { padding-block: var(--s-7); border-block-end: 1px solid var(--c-divider); }
.qov-block:last-child { border-block-end: 0; }
.qov-block__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin-block-end: var(--s-4);
}
.qov-block__title { font-size: var(--fs-h4); font-weight: 600; }
.qov-block__title a { color: var(--c-text); text-decoration: none; }
.qov-block__title a:hover, .qov-block__title a:focus-visible { color: var(--c-primary-700); }
.qov-all {
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary-700);
  text-decoration: none; white-space: nowrap;
}
.qov-all:hover, .qov-all:focus-visible { text-decoration: underline; }

.qov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.qov-card {
  display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding: var(--s-4) var(--s-5);
  color: inherit; text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-divider); border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
a.qov-card:hover, a.qov-card:focus-visible { border-color: var(--c-border-strong); background: var(--c-surface-subtle); }
.qov-card__top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.qov-card__price {
  font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: 600; color: var(--c-text);
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; line-height: 1.2;
}
.qov-card__chart { display: block; height: 48px; }
.qov-card__cap { min-height: 1.4em; font-size: var(--fs-eyebrow); color: var(--c-text-3); }
.qov-card--skel { min-height: 148px; }

.qov-rows {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-7);
  margin: var(--s-3) 0 0; padding: 0; list-style: none;
}
.qov-row a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-1); min-height: 56px;
  color: inherit; text-decoration: none;
  border-block-end: 1px solid var(--c-divider);
}
.qov-row a:hover, .qov-row a:focus-visible { background: var(--c-surface-subtle); }
.qov-row .qsym { flex: none; }
.qv-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: end; }
.qov-row--alt { display: none; }
.qov-row--skel { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-block-end: 1px solid var(--c-divider); }
.qskel--chart { width: 100%; height: 48px; }

.qov-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.qov-group { min-width: 0; }
.qov-group__title {
  margin-block-end: var(--s-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2);
}
.qov-groups .qov-cards { grid-template-columns: minmax(0, 1fr); }
.qov-groups .qov-rows { grid-template-columns: minmax(0, 1fr); }

/* ── 涨跌幅榜 ─────────────────────────────────────────────────── */
.qrank { margin-block-start: var(--s-8); padding-block-start: var(--s-7); border-block-start: 1px solid var(--c-divider); }
.qrank__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); }
.qrank__title { font-size: var(--fs-h4); font-weight: 600; }
.qrank__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.qrank__chip {
  padding: var(--s-2) var(--s-4);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-text-3); background: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.qrank__chip:hover { color: var(--c-text); background: var(--c-surface-subtle); }
.qrank__chip[aria-pressed="true"] {
  color: var(--c-primary-700); background: var(--c-primary-50); border-color: var(--c-primary-600);
}
.qrank__basis { margin-block: var(--s-3) var(--s-4); }
.qrank__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
.qrank__col h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); margin-block-end: var(--s-2); }
.qrank__col[data-dir="up"] h4::before, .qrank__col[data-dir="down"] h4::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--s-2);
  border-radius: 50%; vertical-align: 1px;
}
.qrank__col[data-dir="up"] h4::before { background: var(--c-success-700); }
.qrank__col[data-dir="down"] h4::before { background: var(--c-danger-700); }
.qrank__list { margin: 0; padding: 0; list-style: none; }
.qrank-row a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-1); min-height: 56px;
  color: inherit; text-decoration: none;
  border-block-end: 1px solid var(--c-divider);
}
.qrank-row a:hover, .qrank-row a:focus-visible { background: var(--c-surface-subtle); }
.qrank-row__n { flex: none; width: 1.2em; font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--c-text-3); }
.qrank-row__end { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.qrank__empty { list-style: none; border-block-end: 1px solid var(--c-divider); }

/* ── 窄屏 ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .qov-rows { column-gap: var(--s-5); }
  .qov-groups { gap: var(--s-5); }
  .qov-card { padding: var(--s-4); }
  .qrank__cols { gap: var(--s-5); }
}
@media (max-width: 860px) {
  .qrank__cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 720px) {
  .qov-block { padding-block: var(--s-6); }
  .qov-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .qov-block:not(.qov-block--commodity) .qov-card:nth-child(3) { display: none; }
  .qov-block--commodity .qov-cards { display: none; }
  .qov-rows { grid-template-columns: minmax(0, 1fr); }
  .qov-row--alt { display: block; }
  .qov-groups { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .qv-spark--card { height: 36px; }
  .qov-card__chart { height: 36px; }
  .qov-card__top .qsym { display: none; }
  .qov-card__price { font-size: var(--fs-body); }
  .qov-card { padding: var(--s-3); }
  .qv-spark--row { width: 64px; }
  .qv-spark--rank { width: 64px; }
  .qrank-row__end { flex-direction: column; align-items: flex-end; gap: 2px; }
}
@media (max-width: 359px) {
  .qov-row .qv-spark-slot, .qrank-row .qv-spark-slot { display: none; }
}

/* ── 完整表在手机上的修正(≤560)───────────────────────────────────
   旧表在这一档仍是 table 布局:名称列被「名称 + 星标 + 图标 + 中文名」撑宽,指数/大宗商品/英文页
   的整表比容器宽 30–230px,涨跌幅被挤出屏幕右缘,用户不知道还能横拉。
   改成每行一个两列网格:左 = 名称,右 = 价格在上、涨跌幅(含口径)在下,右对齐。
   迷你图 / 价格区间 / 操作三列在这一档本来就隐藏,这里不变。 */
@media (max-width: 560px) {
  .qtable-wrap { overflow-x: visible; }
  .qtable, .qtable thead, .qtable tbody { display: block; width: 100%; }
  .qtable thead tr {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--s-3); background: var(--c-surface-sunken);
    border-block-end: 1px solid var(--c-border-strong);
  }
  .qtable thead th { display: block; position: static; padding: 0; border: 0; background: none; }
  .qtable thead th:first-child { margin-inline-end: auto; padding-inline-start: 0; }
  .qtable tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-3); align-items: center;
    padding: var(--s-3);
    border-block-end: 1px solid var(--c-divider);
  }
  .qtable tbody tr:last-child { border-block-end: 0; }
  .qtable tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .qtable tbody td:first-child { grid-row: 1 / span 2; grid-column: 1; padding-inline-start: 0; }
  .qtable tbody td.qprice { grid-column: 2; grid-row: 1; text-align: end; padding: 0; }
  .qtable tbody td.qchg { grid-column: 2; grid-row: 2; text-align: end; padding: 0; }
  .qtable tbody td.qempty { grid-column: 1 / -1; grid-row: auto; text-align: center; }
  .qtable .qname__zh { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qtable .qname > a { min-width: 0; }
}

/* 英文页 360 宽时「全部」视图的分页条比屏幕宽 3px,允许换行 */
@media (max-width: 420px) {
  .qpage__nav { flex-wrap: wrap; justify-content: center; }
}