@charset "UTF-8";
/* Retu 官网 · r19 · 市场下拉导航 + 即时报价页
 *
 * 照着 site.css 抬头那三条规矩写:
 *   1. 不含任何硬编码色值,颜色一律 var(--c-*)(来源 brand/tokens-dark.css)。
 *   2. 间距只用 --s-*,圆角只用 --r-*,时长只用 --dur-*。
 *   3. 动效走 --dur-*,reduced-motion 由 :root 把 --dur-* 压到 1ms,这里不另写。
 */

/* ══════════════════════════════════════════════════════════════════
   1. 主导航下拉(桌面)
   「市场」从一个链接变成一个开关,底下挂两页:我们的市场 / 即时报价。
   父项自己不再是可跳转链接 —— 两个子项都是具体页面,父项再指一个就重复了。
   ══════════════════════════════════════════════════════════════════ */
.nav__group { position: relative; display: flex; }

.nav__link--menu {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: inherit; font-size: var(--fs-body); line-height: inherit;
  border: 0; background: none; cursor: pointer;
}
.nav__link--menu .nav__caret {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-1) var(--ease);
}
.nav__link--menu[aria-expanded="true"] { color: var(--c-text); background: var(--c-surface-subtle); }
.nav__link--menu[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* 停在子页上时,父项与其它一级项用同一套「当前」标记(颜色 + 2px 下划线) */
.nav__link--menu[data-branch="current"] { color: var(--c-text); font-weight: 600; }
.nav__link--menu[data-branch="current"]::after {
  content: ''; position: absolute; inset-inline: var(--s-3); inset-block-end: 0;
  height: 2px; background: var(--c-primary-600);
}

.navmenu {
  position: absolute; inset-block-start: calc(100% + var(--s-2)); inset-inline-start: 0;
  z-index: 60; min-width: 264px;
  padding: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px -12px var(--c-canvas);
}
.navmenu[hidden] { display: none; }

.navmenu__item {
  display: block; padding: var(--s-3);
  border-radius: var(--r-sm); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.navmenu__item:hover,
.navmenu__item:focus-visible { background: var(--c-surface-subtle); }
.navmenu__item[aria-current="page"] { background: var(--c-primary-50); }

.navmenu__zh {
  display: block; font-size: var(--fs-body); font-weight: 600; color: var(--c-text);
}
.navmenu__item[aria-current="page"] .navmenu__zh { color: var(--c-primary-700); }

/* 2026-09-23 · 下拉里只留页面标题一行,跟着语言切换走。
   ⚠️ 去掉的是**英文副标那一行**和**那两句说明**:
   英文页上 .navmenu__zh 本来就已被译成英文,再叠一行等宽 "Our Markets"
   就是同一个词印两遍(`en-r18.css:107` 早已单独把它藏起来,这里把这条推到全站);
   说明文字属于落地页自己的活,菜单里复述一遍只是让人在选路时多读两句。
   用 display:none 而不是删标记:它同时把这两段从读屏的朗读序列里摘掉,
   而且 24 个页面此刻另有会话在改,动标记会撞车。 */
.navmenu__en,
.navmenu__desc { display: none; }

/* ── 抽屉(手机):不做二级展开,直接把两页平铺在「市场」小标题下 ── */
.drawer__subtitle {
  margin: var(--s-4) 0 var(--s-1);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-text-3);
}
.drawer__link--sub { padding-inline-start: var(--s-5); }

/* ══════════════════════════════════════════════════════════════════
   2. 即时报价页
   ══════════════════════════════════════════════════════════════════ */

/* ── 2.1 数据来源条 ──────────────────────────────────────────────
   它在表格「下面」,只报两件事:数据源、更新时间。不做成一个抢眼的框 ——
   读表的人先看价格,来源是回头查证时才找的。 */
.qsource {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin-block-start: var(--s-4);
  padding-inline: var(--s-1);
}
.qsource__dot {
  width: var(--s-2); height: var(--s-2); flex: none;
  border-radius: var(--r-pill); background: var(--c-success-700);
}
.qsource[data-state="stale"] .qsource__dot { background: var(--c-warning-700); }
.qsource[data-state="error"] .qsource__dot { background: var(--c-danger-700); }
.qsource__text { font-size: var(--fs-eyebrow); color: var(--c-text-3); margin: 0; }
.qsource__time { font-family: var(--font-mono); margin-inline-start: var(--s-3); }
.qsource__refresh { margin-inline-start: auto; }

.qdisclaimer {
  margin-block-start: var(--s-2); padding-inline: var(--s-1);
  font-size: var(--fs-eyebrow); color: var(--c-text-3);
}

/* ── 2.2 工具条:分类页签 + 搜索 ────────────────────────────────── */
.qtools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-block: var(--s-6) var(--s-5);
}
.qtabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.qtab {
  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;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.qtab:hover { color: var(--c-text); background: var(--c-surface-subtle); }
.qtab[aria-selected="true"] {
  color: var(--c-primary-700); background: var(--c-primary-50);
  border-color: var(--c-primary-600);
}
.qtab__count { font-family: var(--font-mono); font-weight: 400; margin-inline-start: var(--s-1); }

.qsearch { position: relative; margin-inline-start: auto; }
.qsearch__icon {
  position: absolute; inset-block-start: 50%; inset-inline-start: var(--s-3);
  transform: translateY(-50%);
  width: var(--icon-sm); height: var(--icon-sm);
  fill: none; stroke: var(--c-text-3); stroke-width: 1.6; stroke-linecap: round;
  pointer-events: none;
}
.qsearch__input {
  width: 240px; max-width: 100%;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-8);
  font-family: inherit; font-size: var(--fs-sm); color: var(--c-text);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
}
.qsearch__input::placeholder { color: var(--c-text-3); }

/* ── 2.3 报价表 ─────────────────────────────────────────────────── */
.qtable-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface);
}
.qtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.qtable caption { text-align: start; padding: var(--s-4) var(--s-5); color: var(--c-text-3); }

.qtable th, .qtable td {
  padding: var(--s-4) var(--s-4);
  text-align: end; white-space: nowrap;
  border-block-end: 1px solid var(--c-divider);
}
.qtable th:first-child, .qtable td:first-child { text-align: start; padding-inline-start: var(--s-5); }
.qtable th:last-child,  .qtable td:last-child  { padding-inline-end: var(--s-5); }
.qtable tbody tr:last-child td { border-block-end: 0; }
.qtable tbody tr { transition: background-color var(--dur-1) var(--ease); }
.qtable tbody tr:hover { background: var(--c-surface-subtle); }

.qtable thead th {
  position: sticky; inset-block-start: 0; z-index: 2;
  font-size: var(--fs-eyebrow); font-weight: 600; color: var(--c-text-3);
  background: var(--c-surface-sunken);
  border-block-end: 1px solid var(--c-border-strong);
}
.qsort {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0;
}
.qsort:hover { color: var(--c-text); }
.qsort__arrow { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.qsort[aria-sort="ascending"], .qsort[aria-sort="descending"] { color: var(--c-primary-700); }
.qsort[aria-sort="ascending"] .qsort__arrow,
.qsort[aria-sort="descending"] .qsort__arrow { opacity: 1; }
.qsort[aria-sort="ascending"] .qsort__arrow { transform: rotate(180deg); }

/* 名称格 */
.qname { display: flex; align-items: center; gap: var(--s-3); }
.qstar {
  flex: none; width: var(--icon-md); height: var(--icon-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--c-text-3);
}
.qstar svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: 1.5; }
.qstar[aria-pressed="true"] { color: var(--c-warning-700); }
.qstar[aria-pressed="true"] svg { fill: currentColor; }
.qsym {
  flex: none; width: var(--icon-xl); height: var(--icon-xl);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 700;
  color: var(--c-text-2);
  background: var(--c-surface-subtle);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
}
.qname__link { text-decoration: none; }
.qname__link:hover .qname__code,
.qname__link:focus-visible .qname__code { color: var(--c-primary-700); }
.qname__code { display: block; font-weight: 600; color: var(--c-text); }
.qname__zh { display: block; font-size: var(--fs-eyebrow); color: var(--c-text-3); }

.qprice { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--c-text); }
/* 计价单位:期货不写单位会被误读 —— 小麦 707 是美分/蒲式耳,不是 707 美元 */
.qprice__unit {
  display: block; font-family: var(--font-sans);
  font-size: var(--fs-eyebrow); color: var(--c-text-3);
}
.qchg { font-family: var(--font-mono); font-weight: 600; }
.qchg[data-dir="up"] { color: var(--c-success-700); }
.qchg[data-dir="down"] { color: var(--c-danger-700); }
.qchg[data-dir="flat"] { color: var(--c-text-3); }
/* 口径窗口贴在数字下面:三类品种的涨跌幅窗口不一样,不能只在表头写一次 */
.qchg__win {
  display: block; font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-eyebrow); color: var(--c-text-3);
}

/* 操作:两个文字入口,不用按钮 —— 一行里放两个实心按钮会把表压得很挤 */
.qact { display: inline-flex; align-items: center; gap: var(--s-3); }
.qact__link {
  font-size: var(--fs-sm); color: var(--c-text-2); text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.qact__link:hover, .qact__link:focus-visible { color: var(--c-text); }
.qact__link--go { color: var(--c-primary-700); font-weight: 600; }
.qrange { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--c-text-3); }

.qspark { display: block; width: 96px; height: 28px; margin-inline-start: auto; overflow: visible; }
.qspark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qspark[data-dir="up"] { color: var(--c-success-700); }
.qspark[data-dir="down"] { color: var(--c-danger-700); }
.qspark[data-dir="flat"] { color: var(--c-text-3); }

.qempty { padding: var(--s-9) var(--s-5); text-align: center; color: var(--c-text-3); }

/* 骨架屏:数据还没到的时候占位,不显示任何数字 */
.qskel {
  display: inline-block; height: var(--s-4); width: 72px; border-radius: var(--r-xs);
  background: var(--c-surface-subtle);
}
.qskel--wide { width: 120px; }

/* ── 2.4 未接报价源的品类 ───────────────────────────────────────── */
.qpending { padding: var(--s-6) var(--s-5); }
.qpending__list {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-5) 0 0; padding: 0; list-style: none;
}
.qpending__chip {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--c-surface-subtle);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
}
.qpending__code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text); }
.qpending__zh { font-size: var(--fs-eyebrow); color: var(--c-text-3); }

/* ══════════════════════════════════════════════════════════════════
   3. 品种详情页
   ══════════════════════════════════════════════════════════════════ */
.qd__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--c-text-3);
  margin-block-end: var(--s-6);
}
.qd__crumbs a { color: var(--c-text-3); text-decoration: none; }
.qd__crumbs a:hover, .qd__crumbs a:focus-visible { color: var(--c-text); }

.qd__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); align-items: start; }

/* ── 3.1 头部:名称 + 当前价 ────────────────────────────────────── */
.qd__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); padding-block-end: var(--s-6);
  border-block-end: 1px solid var(--c-divider);
}
.qd__ident { display: flex; align-items: center; gap: var(--s-4); }
.qd__badge { width: var(--icon-xl); height: var(--icon-xl); }
.qd__head h1 { margin: 0; }
.qd__code {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin: var(--s-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.qd__cat {
  padding: 0 var(--s-2); font-family: var(--font-sans); font-size: var(--fs-eyebrow);
  color: var(--c-text-2); background: var(--c-surface-subtle);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
}
.qd__quote { text-align: end; }
.qd__price {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-h2);
  font-weight: 600; color: var(--c-text); line-height: 1.1;
}
.qd__chg { margin: var(--s-2) 0 0; font-family: var(--font-mono); font-weight: 600; }
.qd__chg[data-dir="up"] { color: var(--c-success-700); }
.qd__chg[data-dir="down"] { color: var(--c-danger-700); }
.qd__chg[data-dir="flat"] { color: var(--c-text-3); }
.qd__win {
  margin-inline-start: var(--s-3); font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-eyebrow); color: var(--c-text-3);
}

/* ── 3.2 走势图 ─────────────────────────────────────────────────── */
.qd__chart { margin: var(--s-7) 0 0; }
.qdchart {
  display: block; width: 100%; height: 260px;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
}
.qdchart__line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.qdchart__area { fill: currentColor; opacity: .08; stroke: none; }
.qdchart[data-dir="up"] { color: var(--c-success-700); }
.qdchart[data-dir="down"] { color: var(--c-danger-700); }
.qdchart[data-dir="flat"] { color: var(--c-text-3); }
/* 数据不够画线时不留一个空框在那儿装样子 */
.qd__chart[data-empty="1"] .qdchart,
.qd__chart[data-empty="1"] .qdchart__axis { display: none; }
.qdchart__axis {
  display: flex; justify-content: space-between;
  margin-block-start: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--c-text-3);
}
.qd__cap { margin: var(--s-3) 0 0; font-size: var(--fs-eyebrow); color: var(--c-text-3); }

/* ── 3.3 正文两块 ───────────────────────────────────────────────── */
.qd__block { margin-block-start: var(--s-9); }
.qd__block h2 { margin: 0 0 var(--s-4); }
.qd__lead { font-size: var(--fs-sm); color: var(--c-text-3); margin: 0 0 var(--s-5); }
.qd__note {
  margin: var(--s-4) 0 0; padding: var(--s-4);
  font-size: var(--fs-sm); color: var(--c-text-2);
  background: var(--c-surface-subtle);
  border-inline-start: 2px solid var(--c-border-strong); border-radius: var(--r-sm);
}
.qd__drivers { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.qd__driver {
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
}
.qd__driver h3 { margin: 0 0 var(--s-2); font-size: var(--fs-body); }
.qd__driver p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }

.qd__src { margin: var(--s-8) 0 0; font-size: var(--fs-eyebrow); color: var(--c-text-3); }

/* ── 3.4 右栏:APP 下载 + 注册 ──────────────────────────────────── */
.qd__rail { display: grid; gap: var(--s-5); position: sticky; inset-block-start: var(--s-8); }
.qd__card {
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
}
.qd__card-title { margin: var(--s-2) 0 var(--s-3); font-size: var(--fs-h4); }
.qd__card-body { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }

.qd__qr { position: relative; display: grid; place-items: center; margin-block-start: var(--s-5); }
/* 二维码是示意图:重度模糊 + 明写「即将上线」,免得有人真去扫 */
.qd__qr-img { width: 148px; height: 148px; filter: blur(5px); opacity: .55; }
.qd__qr-bg { fill: var(--c-text); }
.qd__qr-fg { fill: var(--c-surface); }
.qd__qr-tag {
  position: absolute; margin: 0;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
}
.qd__qr-hint { margin: var(--s-4) 0 0; font-size: var(--fs-eyebrow); color: var(--c-text-3); }

.qd__card--join .btn { margin-block-start: var(--s-4); }
.btn--block { display: flex; width: 100%; justify-content: center; }

@media (max-width: 1024px) {
  .qd__grid { grid-template-columns: minmax(0, 1fr); }
  .qd__rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .qd__rail { grid-template-columns: minmax(0, 1fr); }
  .qd__head { align-items: flex-start; }
  .qd__quote { text-align: start; }
}

/* ── 2.5 窄屏:表格横滚,收掉两列信息密度最低的 ─────────────────── */
@media (max-width: 820px) {
  .qsearch { margin-inline-start: 0; width: 100%; }
  .qsearch__input { width: 100%; }
  .qtable .qcol--range { display: none; }
}
@media (max-width: 560px) {
  .qtable .qcol--spark { display: none; }
  /* 再留着「操作」列,涨跌幅会被挤出屏幕右缘 —— 手机上没人知道表格还能横拉,
     价格看着就是缺一截。详情改点品种名进,交易入口在页首和页尾都有。 */
  .qtable .qcol--act { display: none; }
  .qtable th, .qtable td { padding: var(--s-3); }
  .qtable th:first-child, .qtable td:first-child { padding-inline-start: var(--s-3); }
  .qtable th:last-child,  .qtable td:last-child  { padding-inline-end: var(--s-3); }
  .qname { gap: var(--s-2); }
}

/* ══════════════════════════════════════════════════════════════════
   窄桌面(1024–1279)的导航收紧 —— 2026-09-24
   英文站在这一档会折行:六个菜单项文字合计 463px,加内边距和间距要 628px,
   而这个宽度给得出的只有约 530px。链接已设 white-space:nowrap(site.css),
   所以这里必须把宽度真正收回来,否则会撑出横向滚动。
   ⚠️ 必须写在这个文件里:上面的 .nav__link--menu 重设了 font-size,
      同样的规则写在 site.css 会被它盖掉(后加载者胜)。
   ⚠️ 改了 padding-inline 就要同步改「当前项」下划线的 inset-inline,
      否则下划线比文字宽出一截。
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__inner { gap: var(--s-2); }
  .nav { margin-inline-start: var(--s-3); gap: 2px; }
  .nav__link, .nav__link--menu { padding-inline: 7px; font-size: 15px; }
  .nav__link[aria-current="page"]::after,
  .nav__link--menu[data-branch="current"]::after { inset-inline: 7px; }
  .header__tools { gap: var(--s-1); }
  .header__tools .btn { --btn-pad-x: var(--s-4); }
}