/* ===== SafeFBAR Retro (Chroma-like) Theme ===== */
:root{
  --ink:#111; --paper:#f7f7f7; --card:#fff; --bar:#1e1b1b; --ring:#9aa1a6;
  --accent:#0f7f3a;           /* Excel 深绿（强调色） */
  --accent-50:#eaf7ef;        /* 很浅的背景绿 */
  --accent-80:#d6f0e0;        /* 略深的背景绿 */
  --radius:12px; --gap:.9rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.07) 1px, transparent 1.5px) 0 0/6px 6px,
    linear-gradient(#efefef,#f9f9f9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  line-height:1.45;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:underline}
a:hover{opacity:.9}

/* 可访问性跳转：默认隐藏，聚焦才显示 */
.skip-link{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{
  left:12px; top:8px; width:auto; height:auto; padding:.3rem .5rem;
  background:#fff; border:2px solid var(--ink); border-radius:8px;
}

/* 外框 + 头部 */
.site-frame{
  max-width:1100px; margin:8px auto; padding:10px;
  border:3px solid var(--ink); border-radius:12px;
  background:linear-gradient(#fbfbfb,#f4f4f4);
  box-shadow:0 0 0 3px #d5d5d5 inset;
}
.site-frame.wide{ max-width:1200px; }
@media (min-width:1700px){ .site-frame.wide{ max-width:1280px; } }

.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:2px solid var(--ink); border-radius:10px; padding:12px; background:#fff;
  position:sticky; top:6px; z-index:10;
}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:900;letter-spacing:.2px;text-decoration:none}
.site-header nav a{padding:.35rem .7rem; border-radius:8px}
.site-header nav a[aria-current="page"]{background:#eee; text-decoration:none; font-weight:800}

/* 面板 */
.site-main{display:flex; flex-direction:column; gap:1rem; margin-top:10px}
.panel{
  position:relative; background:var(--card);
  border:3px solid var(--ink); border-radius:var(--radius);
  padding:1.1rem; box-shadow:6px 6px 0 0 #c9c9c9;
}
.panel + .panel{margin-top:.7rem}
.panel-title{
  position:absolute; left:12px; top:-14px;
  padding:.2rem .6rem; background:var(--paper); border:3px solid var(--ink);
  border-radius:8px; font-weight:900; letter-spacing:.3px;
}

/* 黑色分区条（默认） */
.panel .bar{
  display:inline-block;
  margin:.2rem 0 .6rem 0; background:var(--bar); color:#fff;
  padding:.6rem .7rem; border-radius:8px; font-weight:900;
  max-width:780px;             /* 自适应宽度（与 FAQ 一致） */
}
/* 更轻的标题样式：给 Rates 页的 Filter/Download 使用 */
.panel .bar.slim{
  background:#242222;
  padding:.45rem .6rem;
  font-weight:800;
  font-size:.98rem;
}

.list{list-style:none; padding:0 .6rem; margin:.2rem 0 .9rem}
.list li{padding:.35rem 0; border-bottom:1px solid #eee}
.list li:last-child{border-bottom:none}

/* 栅格 */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)}
.equal{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.9rem; align-items:stretch; }
@media(max-width:900px){ .grid-2,.equal{grid-template-columns:1fr; grid-auto-flow:row} }
.equal > div{ display:grid; }
.equal > div .card{ height:100%; } /* 两栏等高 */

/* 卡片/按钮/输入 */
.card{
  border:2px solid var(--ink); border-radius:12px; padding:1rem; background:#fff;
}
.ctas{ display:flex; flex-direction:column; gap:.9rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.62rem 1.05rem; border-radius:12px;
  border:2px solid var(--ink); background:var(--accent-50);
  font-weight:900; text-decoration:underline;
  box-shadow:0 2px 0 #000; transition:transform .03s, box-shadow .12s, background .12s;
}
.btn:hover{ background:var(--accent-80); }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 #000; }
.btn.ghost{ border-style:dashed; background:#fff; }
.btn-lg{ font-size:1.05rem; padding:.75rem 1.2rem; }

.stat,.note,.muted{opacity:.8; font-size:.92rem}

.input{
  width:100%; height:40px; padding:.6rem .7rem;
  border:1px solid var(--ring); border-radius:10px; background:#fff; outline:none
}
.input:focus{box-shadow:0 0 0 3px #e6ecf3}
.input.tinted{ background:var(--accent-50); border-color:#bcd9c7; }

/* 表格 */
.table-wrap{
  margin-top:1rem; overflow:auto; border:2px solid var(--ink); border-radius:10px; background:#fff;
}
table{width:100%; border-collapse:collapse; font-size:15px}
thead th{position:sticky; top:0; background:#eee; text-align:left; padding:.6rem; border-bottom:2px solid var(--ink)}
th,td{padding:.55rem .6rem; border-bottom:1px solid #efefef; white-space:nowrap}
tbody tr:nth-child(even){background:#f6f6f6}
.table-condensed thead th, .table-condensed td{ padding:.38rem .45rem; font-size:14px; }

/* FAQ (refined: lighter dash + zebra rows + Q/A backgrounds) */
.faq{
  border:1px dashed #bbb;          /* 虚线更浅 */
  border-radius:10px;
  margin:.6rem 0;
  padding:.2rem;                    /* 外层留薄边，让内层更干净 */
  background:#fafafa;               /* 默认浅灰底 */
}

/* 隔行底色（放在 .panel 容器下更稳） */
.panel .faq:nth-of-type(odd){  background:#f9f9f9; }
.panel .faq:nth-of-type(even){ background:#fefefe; }

/* 问题（summary）底色更突出、可点 */
.faq summary{
  cursor:pointer;
  font-weight:800;
  padding:.55rem .7rem;
  background:#f0f4f8;              /* 提问：浅蓝 */
  border-radius:8px;
}

/* 展开时可以稍微加深（可选） */
.faq[open] summary{
  background:#eaf2f9;
}

/* 回答（details 内的正文）白底 + 左侧竖线区分 */
.faq > *:not(summary){
  margin:.5rem 0 0;
  padding:.6rem .75rem;
  background:#fff;                 /* 回答：白底 */
  border-left:3px solid #bbb;      /* 细竖线区分层次 */
  border-radius:8px;
}


/* 蓝色外链（仅特定链接使用） */
.link-blue{ color:#0645ad; text-decoration:underline; }
.link-blue:hover{ color:#0b57d0; }

/* Rates：按钮与更新时间的间距更舒服 */
#downloadCard .note{ margin-top:.9rem; }

/* 页脚 */
.site-footer{padding:18px; text-align:center}

/* ===== Forms（全站可复用，中文注释） ===== */

/* 通用字段块：留出上下间距 */
.field { margin: .75rem 0; }

/* label 统一为块级 + 粗体 + 微距 */
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
}

/* 复选框行：图标紧贴文字（任何页面都能用） */
label.checkbox {
  display: inline-flex;          /* 如果被别处覆盖，可在这里加 !important */
  align-items: center;
  gap: 8px;
  margin-bottom: .25rem;
}
label.checkbox input { margin: 0; }
label.checkbox span  { white-space: nowrap; } /* 默认不换行；窄屏可在局部覆盖 */


.md-article { margin: 1.5rem 0 2rem; }
.article-title { margin: 0 0 .5rem; line-height: 1.3; }

/* ===== Calculator Layout (2x3 Grid) ===== */
.grid-calculator {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap, 1rem);
  align-items: end; /* 垂直对齐：元素在单元格底部 */
}

/* 在小屏幕上，栅格变为单列堆叠 */
@media (max-width: 900px) {
  .grid-calculator {
    grid-template-columns: 1fr;
  }
}

/* 汇率和美元结果的只读显示框 */
.display-box {
  background: #f5f5f5;
  padding: .6rem .7rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.2rem;
  border: 1px solid #ddd;
  min-height: 40px; /* 与输入框高度对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 美元结果容器，包含数字和复制按钮 */
.result-container {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding-left: .7rem; /* 左侧留白 */
  padding-right: .3rem; /* 右侧给按钮留空间 */
  min-height: 40px;
}

.result-container h3 {
  margin: 0;
  flex-grow: 1; /* 数字占据剩余空间 */
  font-size: 1.4rem;
  font-weight: 800;
}

/* 小巧的复制按钮 */
.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  border: none;
  background: #e9e9e9;
  border-radius: 8px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .1s, background .1s;
}
.btn-copy:hover {
  background: #dcdcdc;
  opacity: 1;
}
.btn-copy svg {
  width: 16px;
  height: 16px;
  fill: #333;
}


/* ===== FBAR Guides (scoped) ===== */

/* 目录页根容器（/guides/index.html） */
.guides-root {
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem .8rem 2rem;
}

/* 目录页顶部文案 */
.guides-hero {
  margin: .6rem 0 1.2rem;
}
.guides-hero h1 {
  margin: 0 0 .4rem;
  line-height: 1.25;
}
.guides-hero p { margin: .2rem 0 0; opacity: .9; }

/* 目录列表（卡片式，可两列栅格） */
.guides-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
@media (max-width: 900px) {
  .guides-list { grid-template-columns: 1fr; }
}
.guides-item {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  padding: .85rem .9rem;
  box-shadow: 4px 4px 0 #c9c9c9;
}
.guides-item a {
  text-decoration: none;
  font-weight: 800;
  display: inline-block;
  margin-bottom: .2rem;
}
.guides-item .desc {
  font-size: .94rem;
  opacity: .9;
}

/* 面包屑（文章页顶部） */
.guide-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  font-size: .92rem;
  opacity: .9;
  margin: .3rem 0 1rem;
}
.guide-breadcrumb a { text-decoration: underline; }

/* 文章页根容器 */
.guide-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 1rem .8rem 2rem;
}
.guide-article h1 {
  margin: 0 0 .6rem;
  line-height: 1.25;
}
.guide-intro {
  margin: 0 0 1rem;
  opacity: .95;
}

/* 正文排版（仅文章页内生效） */
.guide-article article {
  font-size: 1rem;
  line-height: 1.7;
}
.guide-article h2 { margin: 1.1rem 0 .4rem; }
.guide-article h3 { margin: .9rem 0 .35rem; }
.guide-article p  { margin: .5rem 0; }
.guide-article ul, .guide-article ol {
  padding-left: 1.25rem;
  margin: .45rem 0 .6rem;
}
.guide-article blockquote {
  margin: .7rem 0;
  padding: .6rem .8rem;
  border-left: 3px solid var(--ring);
  background: #fff;
  border-radius: 8px;
}

/* 相关文章（文章页侧栏或文末） */
.guide-related {
  margin-top: 1.2rem;
  border: 2px dashed var(--ring);
  border-radius: 12px;
  padding: .8rem .9rem;
  background: var(--accent-50);
}
.guide-related h3 { margin: 0 0 .4rem; }
.guide-related ul {
  margin: 0; padding-left: 1.1rem;
}
.guide-related li { margin: .25rem 0; }

/* 内文表格在文章页内的细化（不影响全局 table 规则） */
.guide-article .table-wrap { margin-top: .8rem; }
.guide-article table { font-size: 15px; }

/* 图片说明（可选） */
.guide-figure { margin: .8rem 0; }
.guide-figcaption {
  font-size: .9rem;
  opacity: .85;
  margin-top: .25rem;
}

/* 返回顶部 / 次要操作 */
.guide-actions {
  margin-top: 1.2rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}


/* 3列自适应栅格：>=240px 自动排布为 1~3 列 */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.price {
  font-weight: 700;
  font-size: 1.25rem;
  margin: .25rem 0 .75rem;
}