:root{
  --card-bg-1: linear-gradient(145deg,#e8f4ff,#fff0f6);
  --card-bg-2: linear-gradient(145deg,#f0fff4,#fffaf0);
  --primary:#1a237e;
  --muted:#666;
  --glass: rgba(255,255,255,0.75);
  --accent:#3949ab;
  --success:#2e7d32;
  --danger:#c62828;
  --shadow: 0 6px 18px rgba(20,30,60,0.06);
  --radius:12px;
  --gap:14px;
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #eaf3ff, #fff6f8);
  color: #222;
  text-align: center;
  margin: 0;
  padding: 36px 16px 60px; /* 增加顶部空间 */
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

header h1 {
  font-size: 2.2em;
  margin: 6px 0 14px; /* 与计算器拉开距离 */
  color: var(--primary);
  letter-spacing: .5px;
}

.meta-row {
  display:flex;
  justify-content:center;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.meta-box {
  background: var(--glass);
  padding:10px 14px;
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  font-size:0.95rem;
  color:var(--muted);
  min-width:160px;
}

/* 主区域：选择中心货币 + 计算器 */
/* 在宽屏上让右侧计算器占比更大，左侧中心选择较窄；同时保持等高（align-items:stretch） */
.top-grid {
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:stretch; /* 关键：强制子项等高 */
  flex-wrap:wrap;
  margin-bottom:20px;
}

/* 宽屏布局：左 32% 右 自适应增长（更宽）。在中小屏保留换行 100% */
.center-select {
  flex: 0 0 32%;
  min-width: 260px;
  background: var(--card-bg-1);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.calculator {
  flex: 1 1 60%;
  min-width: 320px;
  background: var(--card-bg-2);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  position:relative;
}

/* 当屏幕过窄（例如手机或窄窗）允许换行并改为 100% 宽度 */
@media (max-width:920px){
  .center-select, .calculator { flex: 0 0 100%; min-width: unset; }
  .top-grid { gap:12px; }
}

/* 中心选择样式 */
.center-select label {
  display:block;
  font-weight:600;
  color:var(--primary);
  text-align:left;
  font-size:0.95rem;
}

.center-select .info-row {
  text-align:left;
  color:var(--muted);
  font-size:0.9rem;
}

/* 中心国旗行 */
.center-flag-row {
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
}
.center-flag-row img {
  width:48px;
  height:32px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.04);
  background: #fff;
}
.center-flag-row .info-row { font-size:0.9rem; color:var(--muted); }

/* calc layout */
.calc-block {
  flex:0 0 240px;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}

.calc-block label {
  display:block;
  margin-bottom:2px;
  font-weight:600;
  color:#0f2b66;
  text-align:left;
  font-size:0.95rem;
}

.full-control {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d0d8e8;
  font-size:1rem;
  background:#fff;
  outline:none;
  transition: box-shadow .12s ease, transform .08s ease;
  height:44px;
}

.full-control:focus {
  box-shadow: 0 6px 18px rgba(57,73,171,0.12);
  transform: translateY(-1px);
}

/* swap */
.swap-block {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 4px;
  min-width:64px;
}
.swap-btn {
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
  font-size:18px;
  cursor:pointer;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
}
.swap-hint { font-size:0.8rem; color:var(--muted); }

/* actions vertical */
.calc-actions-vertical {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  min-width:130px;
}

.amount-input { font-size:1rem; }

/* actions */
.btn {
  width:140px;
  padding:10px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 14px rgba(15,30,80,0.12);
  transition:transform .12s ease, box-shadow .12s ease;
  height:44px;
}

.btn:hover{ transform: translateY(-3px); }

.btn-primary { background: linear-gradient(145deg,var(--primary),var(--accent)); }
.btn-danger { background: linear-gradient(145deg,var(--danger),#e53935); }

.calc-meta {
  width:100%;
  text-align:center;
  margin-top:6px;
  color:var(--muted);
  font-size:0.95rem;
}

/* 计算器错误提示样式 */
.calc-error {
  width:100%;
  margin-top:8px;
  color: var(--danger);
  font-weight:700;
  font-size:0.95rem;
  text-align:center;
}

/* 搜索栏 */
.search-row {
  margin: 6px auto 8px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  max-width:1100px;
  padding:0 6px;
}

#rate-search {
  width:260px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #d0d8e8;
  font-size:0.95rem;
  background:#fff;
  height:44px;
}

#clear-search {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size:16px;
  color:var(--muted);
  padding:6px 8px;
  border-radius:8px;
}
#clear-search:hover { background: rgba(0,0,0,0.04); }

/* 汇率卡片区域 */
h2.section-title {
  font-size:1.2rem;
  margin: 16px 0 12px;
  color:#234;
  text-align:left;
}

/* 最大 4 列展示，自动适配 */
.rate-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:var(--gap);
  align-items:stretch;
  margin:0 auto;
}

/* 中等屏 3 列，窄屏 2 列，超小屏 1 列 */
@media (max-width:1100px){
  .rate-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:760px){
  .rate-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-actions-vertical { flex-direction:row; gap:8px; width:100%; justify-content:center; }
}
@media (max-width:420px){
  .rate-grid { grid-template-columns: repeat(1, 1fr); }
  .btn { width:120px; }
}

/* 单张卡片样式 */
.rate-card {
  background: linear-gradient(145deg,#ffffff,#f8fbff);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  text-align:left;
  display:flex;
  gap:10px;
  align-items:center;
  min-height:76px;
  transition: transform .12s ease, box-shadow .12s ease;
}

.rate-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(10,20,50,0.12);
}

.rate-flag {
  width:56px;
  height:40px;
  flex:0 0 56px;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f4f7ff,#ffffff);
  border:1px solid rgba(0,0,0,0.03);
}

.rate-flag img { width:100%; height:100%; object-fit:cover; display:block; }

.rate-body { flex:1; display:flex; flex-direction:column; justify-content:center; }

.rate-body .code { font-weight:800; color:#0d47a1; font-size:1rem; letter-spacing:0.6px; }
.rate-body .value { margin-top:6px; font-size:1.05rem; font-weight:700; color:#111; }
.rate-body .inverse { margin-top:6px; font-size:0.85rem; color:var(--muted); }

/* 无结果时提示 */
.no-results {
  margin-top:12px;
  color:var(--muted);
  font-size:1rem;
  text-align:center;
}

/* 小细节 */
input::placeholder { color: #b8bfd0; }
select:focus, input:focus { outline: none; }