/* ==========================================================================
   汇兑区 · 白底巨标题 + 两张币种卡 + 底部币种圆点带
   ========================================================================== */

.currency-exchange {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4svh, 48px);
  padding-block: clamp(70px, 10svh, 130px) 0;
  min-height: 138svh;
  background: var(--bg);
  color: var(--fg);
  overflow: clip;
}

.fx {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 1.6svh, 20px);
  width: 100%;
  padding-inline: var(--grid-margin);
  z-index: 1;
}

.fx__title {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 5vw, 82px);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-primary);
}

.fx__note {
  max-width: min(24vw, 30em);
  text-align: center;
  font-size: clamp(11px, 1.05vw, 16px);
  line-height: 1.45;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}

/* ---------- 收益演算器 ---------- */
.fx__calc {
  position: relative;
  z-index: 1;
  width: min(var(--cols-6), 520px);
  margin-top: clamp(12px, 2svh, 24px);
  display: grid;
  gap: clamp(8px, 1.2svh, 14px);
}

.fx-field {
  display: grid;
  gap: 4px;
  padding: clamp(11px, 1.2vw, 18px) clamp(13px, 1.5vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surf);
}

.fx-field__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.fx-field__input {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* 期限权重：五档，选中那档走主绿 */
.fx-terms {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.fx-term {
  display: grid;
  gap: 2px;
  padding: clamp(7px, 0.8vw, 12px) 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surf);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.82vw, 13px);
  transition: border-color var(--dur-fast) var(--ease-std),
    background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.fx-term b { font-weight: 500; }
.fx-term i { font-style: normal; opacity: 0.65; }
.fx-term:hover { border-color: rgba(5, 150, 105, 0.5); }
.fx-term.is-on {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-ink);
}
.fx-term.is-on i { opacity: 0.8; }

/* 7228 拆分：绿是质押本金，紫是国库底仓——语义锁 */
.fx-split {
  display: grid;
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line-d);
}
.fx-split__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: clamp(9px, 1vw, 14px) clamp(13px, 1.5vw, 22px);
  background: var(--bg-2);
  font-size: clamp(11px, 1vw, 15px);
  color: var(--fg-muted);
}
.fx-split__row output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(14px, 1.35vw, 21px);
  font-weight: 500;
}
.fx-split__row em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.85vw, 13px);
  opacity: 0.7;
}
.fx-split__row--xo output,
.fx-split__row--xo em { color: var(--c-primary-light); }
.fx-split__row--exon output,
.fx-split__row--exon em { color: var(--c-accent); }

/* 三格产出 */
.fx-out {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.fx-out__cell {
  display: grid;
  gap: 3px;
  padding: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surf);
}
.fx-out__cell span {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.8vw, 12px);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.fx-out__cell output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.fx-out__cell--hi { border-color: rgba(5, 150, 105, 0.55); background: var(--c-primary-a14); }
.fx-out__cell--hi output { color: var(--c-primary-light); }

/* 赎回三档 */
.fx-burn {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.fx-burn__label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.8vw, 12px);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.fx-burn__opt {
  display: grid;
  gap: 3px;
  padding: clamp(8px, 0.9vw, 13px) clamp(9px, 1vw, 14px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surf);
  color: var(--fg-muted);
  text-align: left;
  font-size: clamp(10px, 0.9vw, 14px);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.fx-burn__opt b { font-weight: 500; color: var(--fg); }
.fx-burn__opt i {
  font-style: normal;
  font-size: 0.9em;
  color: var(--c-accent);
}
.fx-burn__opt:hover { border-color: rgba(139, 92, 246, 0.5); }
.fx-burn__opt.is-on { border-color: rgba(5, 150, 105, 0.55); background: var(--c-primary-a14); }
.fx-burn__opt.is-on i { color: var(--c-primary-light); }

/* ---------- 底部参数芯片堆：铺满宽度、压在演算器下面的一条不规则带 ---------- */
.fx__flags {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 236;
  max-width: none;                /* base.css 的 svg{max-width:100%} 会把放大的带子钳回去 */
  overflow: visible;              /* 落下途中要露在带子上方 */
  pointer-events: none;
  user-select: none;
}
.fx__flags .ff { will-change: transform; }

@media (max-width: 743px) {
  .fx__calc { width: 100%; }
  .fx__note { max-width: 26em; }
  .fx-terms { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .fx-out { grid-template-columns: 1fr 1fr; }
  .fx-out__cell--hi { grid-column: 1 / -1; }
  .fx-burn { grid-template-columns: 1fr; }
  /* 窄屏内容比 138svh 还高，锁死高度会被裁；改成按内容撑开 */
  .currency-exchange {
    min-height: auto;
    justify-content: flex-start;
    padding-block: clamp(60px, 10svh, 100px) clamp(150px, 26svh, 240px);
    gap: clamp(16px, 3svh, 30px);
  }
  .fx__title { font-size: clamp(28px, 8.4vw, 44px); }
  .fx-out { grid-template-columns: 1fr 1fr; }
  .fx-out__cell--hi { grid-column: 1 / -1; }
  /* 窄屏放大芯片带，单枚才看得清，落差也才明显 */
  .fx__flags { width: 235%; left: -68%; right: auto; }
}