/* ==========================================================================
   汇率牌价单 — 凹版印刷 / 银行牌价设计语言
   纸：证券纸灰绿   墨：凹版墨   印：朱印红
   ========================================================================== */

:root{
  --paper:#F2F3F7;      /* 纸：冷调灰白 */
  --sheet:#FFFFFF;      /* 牌价单票面 */
  --ink:#121722;        /* 墨：冷近黑 */
  --ink-soft:#555C6B;   /* 次级文字 */
  --brand:#14505C;      /* 凹版青：可点项与结构线 */
  --seal:#A33A2F;       /* 朱印 */
  --rule:#DADDE5;       /* 分隔线 */

  --display:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,monospace;

  --w:980px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font:16px/1.8 var(--body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}

a{color:var(--brand);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline;text-decoration-thickness:1px}

:focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:2px}

/* ---------------------------------------------------------------- 报头 */
.hd{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.hd::after{
  content:"";display:block;height:2px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 14px,transparent 14px 21px);
  opacity:.5;
}
.hd .wrap{display:flex;align-items:center;gap:30px;height:58px;flex-wrap:wrap}

.logo{
  font:600 19px/1 var(--display);
  letter-spacing:.08em;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.logo::before{
  content:"";width:9px;height:9px;background:var(--seal);
  display:inline-block;transform:rotate(45deg);
}

.hd nav{display:flex;gap:6px;font-size:14px;flex-wrap:wrap}
.hd nav a{
  font:600 12.5px/1 var(--mono);
  letter-spacing:.06em;
  color:var(--brand);
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:2px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.hd nav a:hover{
  color:var(--ink);
  background:#fff;
  border-color:var(--brand);
  text-decoration:none;
}

/* ---------------------------------------------------------------- 主体 */
main.wrap{padding-top:42px;padding-bottom:64px}

.crumb{
  font:500 13px/1.7 var(--body);
  letter-spacing:.01em;
  color:var(--ink-soft);
  margin:0 0 22px;
}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--seal)}

h1{
  font:600 clamp(24px,3.6vw,34px)/1.35 var(--display);
  letter-spacing:.01em;
  margin:0 0 20px;
  text-wrap:balance;
}

h2{
  font:600 20px/1.5 var(--display);
  margin:44px 0 14px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  position:relative;
  letter-spacing:.02em;
}
/* 朱红短线压分隔线的起点，作为"钢印"细节，而不是另起一条线 */
h2::before{
  content:"";position:absolute;top:-1px;left:0;
  width:46px;height:1px;background:var(--seal);
}

h3{
  font:600 16px/1.6 var(--display);
  margin:28px 0 10px;
  letter-spacing:.02em;
}

p{margin:12px 0;color:var(--ink-soft)}

strong{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- 牌价单 */
.quote,.result{
  position:relative;
  margin:24px 0 10px;
  padding:28px 30px 22px;
  background:var(--sheet);
  border:1px solid var(--ink);
  box-shadow:
    inset 0 0 0 3px var(--sheet),
    inset 0 0 0 4px var(--rule);
  overflow:hidden;
}
/* 防伪底纹：同心弧线 */
.quote::before,.result::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 114% 132%,
    rgba(20,80,92,.07) 0 1px,transparent 1px 13px);
}

.quote-eyebrow{
  font:600 10px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);
  position:relative;
}

.quote-value{
  position:relative;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:12px 0 0;
}
.quote-value .num{
  font:700 clamp(36px,7vw,62px)/1 var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
  color:var(--ink);
}
.quote-value .unit{
  font:600 13px/1 var(--mono);
  letter-spacing:.16em;color:var(--ink-soft);
  padding-bottom:6px;
}

.quote-eq{
  position:relative;
  font:400 15px/1.7 var(--body);
  color:var(--ink-soft);
  margin-top:14px;
}
.quote-meta{
  position:relative;
  font:11px/1.7 var(--mono);
  letter-spacing:.04em;color:var(--ink-soft);
  margin-top:16px;padding-top:12px;
  border-top:1px dashed var(--rule);
}

/* 朱印 */
.seal{
  position:absolute;right:20px;top:18px;
  width:66px;height:66px;
  border:2px solid var(--seal);
  border-radius:2px;
  color:var(--seal);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  font:700 10px/1.15 var(--mono);
  letter-spacing:.04em;
  transform:rotate(-6deg);
  opacity:.9;
  animation:stamp .46s cubic-bezier(.22,.9,.25,1.15) both;
}
@keyframes stamp{
  from{transform:rotate(-6deg) scale(1.55);opacity:0}
  to{transform:rotate(-6deg) scale(1);opacity:.9}
}

/* ---------------------------------------------------------------- 表格 */
table{
  width:100%;border-collapse:collapse;
  background:var(--sheet);
  font-variant-numeric:tabular-nums;
  margin:16px 0;
}
thead th{
  font:600 10px/1.4 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:11px 12px;
  border-bottom:1px solid var(--ink);
  text-align:left;
  white-space:nowrap;
}
td{
  padding:11px 12px;
  border-bottom:1px solid var(--rule);
  font-size:15px;
  color:var(--ink);
}
tbody tr:last-child td{border-bottom:1px solid var(--ink)}
tbody tr:hover td{background:rgba(18,23,34,.03)}
td:first-child{color:var(--ink-soft)}

/* ---------------------------------------------------------------- 链接网格 */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px;
  margin:16px 0;
}
.grid a{
  position:relative;
  display:block;
  background:var(--sheet);
  border:1px solid var(--rule);
  padding:12px 30px 12px 13px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--brand);
  font-weight:500;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.grid a::after{
  content:"→";
  position:absolute;right:11px;top:50%;
  transform:translateY(-50%);
  font:600 13px/1 var(--mono);
  color:var(--brand);
  opacity:.55;
  transition:opacity .16s ease,transform .16s ease;
}
.grid a:hover{
  border-color:var(--brand);
  background:#fff;
  color:var(--ink);
  text-decoration:none;
}
.grid a:hover::after{opacity:1;transform:translate(2px,-50%)}

/* ---------------------------------------------------------------- 表单面板 */
.result{padding:24px 26px 20px}
.result .big{
  font:700 clamp(24px,4vw,34px)/1.25 var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  word-break:break-all;
}
.result .sub{
  font:11px/1.7 var(--mono);
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin-top:10px;
}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

input,select,button{
  font:400 15px/1 var(--body);
  padding:10px 12px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
  border-radius:2px;
}
input:focus,select:focus{border-color:var(--brand);outline:none}
button{
  cursor:pointer;
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  font-weight:500;
  letter-spacing:.04em;
  transition:background .16s ease;
}
button:hover{background:var(--ink)}

/* ---------------------------------------------------------------- 问答 */
.faq{margin:14px 0}
.faq dt{
  font:600 15px/1.6 var(--body);
  color:var(--ink);
  margin-top:20px;
  padding-left:16px;
  position:relative;
}
.faq dt::before{
  content:"";position:absolute;left:0;top:.7em;
  width:7px;height:1px;background:var(--seal);
}
.faq dd{margin:6px 0 0;color:var(--ink-soft);padding-left:16px}

/* ---------------------------------------------------------------- 页脚 */
.ft{
  border-top:1px solid var(--rule);
  margin-top:56px;
  padding:26px 0 40px;
  font:12px/1.9 var(--mono);
  letter-spacing:.03em;
  color:var(--ink-soft);
  background:rgba(255,255,255,.65);
}
.ft p{margin:4px 0;color:var(--ink-soft);font-size:12px}

/* ---------------------------------------------------------------- 响应式 */
@media(max-width:720px){
  .hd .wrap{height:auto;padding:12px 18px;gap:14px}
  .hd nav{gap:16px}
  .quote{padding:22px 18px 18px}
  .seal{width:54px;height:54px;right:12px;top:12px;font-size:9px}
  .quote-value .unit{padding-bottom:4px}
  h2{margin-top:38px}
  td,thead th{padding:9px 8px;font-size:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------- 打印 */
@media print{
  .hd,.ft{display:none}
  body{background:#fff}
  .quote{box-shadow:none;border:1px solid #999}
}

/* ---------------------------------------------------------------- 细节补丁 */
::selection{background:rgba(163,58,47,.14);color:var(--ink)}

p{text-wrap:pretty}

/* 内容层压在防伪底纹之上 */
.result>*,.quote>*:not(.seal){position:relative;z-index:1}
.quote>.seal{position:absolute;z-index:2}

/* 币种卡片里的小字 */
.grid small{
  display:inline-block;margin-top:5px;
  font:600 10.5px/1 var(--mono);
  letter-spacing:.1em;color:var(--ink-soft);
}

/* 换算器箭头 */
.row span{color:var(--ink-soft);font-family:var(--mono);font-size:13px}

/* 牌价单里的结果表 */
.quote table,.result table{margin:14px 0 4px}

/* 正文里的行内强调 */
.quote-eq strong,.quote-meta strong{color:var(--ink)}

/* 长数字不换行中断 */
.quote-value .num{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- 可点击性 */
/* 正文与表格里的链接：常态就带下划线，不靠 hover 才显形 */
main p a,
main li a,
main td a,
.ft a{
  color:var(--brand);
  text-decoration:underline;
  text-decoration-color:rgba(20,80,92,.38);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
main p a:hover,
main li a:hover,
main td a:hover,
.ft a:hover{text-decoration-color:var(--brand);color:var(--ink)}

/* 表格里第一列的链接不要被弱化 */
td a{font-weight:500}

/* 币种卡片里的链接文字 */
.grid a small{color:var(--ink-soft)}

/* 面包屑保持次级，但明确可点 */
.crumb a{
  text-decoration:underline;
  text-decoration-color:rgba(85,92,107,.38);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.crumb a:hover{text-decoration-color:var(--seal);color:var(--seal)}

/* 当前所在页面：实心，随页面切换 */
.hd nav a.is-active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.hd nav a.is-active:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}


/* 涨跌与分位判断：红涨青跌 */
.up{color:var(--seal)}
.down{color:var(--brand)}
td.up,td.down{font-weight:600}

/* 牌价板：主数字 + 一排辅助指标 */
.board{display:flex;flex-wrap:wrap;gap:12px 34px;margin:20px 0 2px;position:relative}
.board-item{display:flex;flex-direction:column;gap:3px;min-width:96px}
.board-item .k{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.board-item .v{font:700 20px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.board-item .u{font:11px/1.3 var(--mono);color:var(--ink-soft)}
@media(max-width:720px){
  .board{gap:14px 22px}
  .board-item .v{font-size:17px}
}

/* 问法标签：覆盖同义表述，视觉上不做成链接 */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tags .tag{
  display:inline-block;padding:6px 11px;
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:2px;font-size:13px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* 紧凑链接行：货币对分组 / 日期 / 互链块。
   做成可点的「小票」样式——比卡片网格紧凑，但保留可点击的视觉提示 */
.amt-groups{margin:16px 0 18px}
.amt-groups p{margin:0 0 6px;line-height:2.4;font-size:0}
.amt-groups .ag-h{
  display:inline-block;min-width:112px;margin:0 10px 0 0;
  font-weight:600;color:var(--ink);font-size:13.5px;
  vertical-align:middle;line-height:1.7;
}
.amt-groups a{
  display:inline-block;margin:3px 0;padding:2px 9px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:2px;
  color:var(--brand);text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:13px;line-height:1.7;
  vertical-align:middle;
  transition:border-color .15s,color .15s,background .15s;
}
.amt-groups a:hover{
  border-color:var(--brand);background:#FBFCFD;text-decoration:none;
}
.amt-groups .sep{display:none}     /* 小票之间有间距，不再需要圆点分隔 */
.amt-groups .more{
  color:var(--ink-soft);border-style:dashed;background:transparent;
}
.amt-groups .more:hover{color:var(--brand);border-color:var(--brand);border-style:solid}
@media(max-width:640px){
  .amt-groups p{line-height:2.2}
  .amt-groups .ag-h{display:block;min-width:0;margin:2px 0 0}
}

/* 数据口径说明：比正文小一号，弱化但可读 */
main p.note{
  margin:14px 0 0;padding:10px 12px;
  background:var(--sheet);border-left:2px solid var(--rule-strong);
  font-size:12.5px;line-height:1.75;color:var(--ink-soft);
}

/* 金额页：上一档 / 下一档 */
main p.stepnav{
  margin:10px 0 0;font-size:13px;color:var(--ink-soft);
}
main p.stepnav a{color:var(--brand);text-decoration:none}
main p.stepnav a:hover{text-decoration:underline}

/* 购买力卡片：这笔钱在当地能买什么 */
.worth{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;margin:16px 0;
}
.worth-item{
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:3px;padding:11px 13px;
}
.worth-item .wn{font-size:13.5px;color:var(--ink);font-weight:600}
.worth-item .wp{font:13px/1.7 var(--mono);color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:2px}
.worth-item .ws{font-size:12.5px;margin-top:4px}
.worth-item .ws.ok{color:#2F6B4F}
.worth-item .ws.mid{color:#8A6A1F}
.worth-item .ws.no{color:#9A9FA9}
@media(max-width:640px){.worth{grid-template-columns:1fr 1fr}}