/* currency 专用，依赖 /home.css 变量与 /tool.css */
/* 第三列放互换按钮：竖跨「从 / 换成」两行，挨着它要互换的两个下拉框 */
.form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 4px 0 2px;
  margin-bottom: 12px;
}
.form > label { font: 500 12px/1 var(--mono); color: var(--ink-2); }
.form > .field { width: 100%; min-width: 0; }
.form > #amount { grid-column: 2 / 4; }
.form > .swap { grid-column: 3; grid-row: 2 / 4; align-self: center; min-width: 34px; padding: 0 10px; font-size: 18px; }
.kv td { font-variant-numeric: tabular-nums; }
.kv td .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; word-break: normal; overflow-wrap: break-word; }

/* 换算记录 */
/* 每条一行：时间 · 换算 · 汇率日期 · 操作；窄屏折成三行，不用横向滚动 */
.hist-wrap { margin-top: 28px; }
.hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); font: 13px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.hist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "when calc date ops";
  align-items: center;
  gap: 4px 18px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
.hist li:hover { background: var(--hover); }
.hist .when { grid-area: when; color: var(--ink-2); white-space: nowrap; }
.hist .calc { grid-area: calc; min-width: 0; overflow-wrap: anywhere; }
.hist .res { color: var(--result); font-weight: 600; }
.hist .calc .cbtn { margin-left: 10px; }
.hist .date { grid-area: date; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.hist .ops { grid-area: ops; display: flex; justify-content: flex-end; gap: 14px; }
@media (max-width: 560px) {
  .hist li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when ops" "calc calc" "date date"; }
}
.hint { margin: 8px 0 0; font: 12px/1.6 var(--sans); color: var(--ink-2); }

/* 使用说明 */
.guide { max-width: 76ch; margin-top: clamp(48px, 8vh, 72px); padding-top: 8px; border-top: 2px solid var(--ink); }
.guide h2 { margin: 28px 0 10px; font: 600 15px/1.4 var(--mono); }
.guide p { margin: 0 0 10px; font: 14px/1.75 var(--sans); color: var(--ink); }