/* ===== 顶部标题 ===== */
.hero {
  padding: 16rpx 8rpx 24rpx;
}

.hero-title {
  font-size: 48rpx;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 2rpx;
}

.hero-desc {
  font-size: 24rpx;
  color: #94A3B8;
  margin-top: 8rpx;
}

/* ===== 换算主卡片 ===== */
.converter-card {
  padding: 40rpx 36rpx;
}

.currency-block {
  border-radius: 20rpx;
  padding: 28rpx;
}

.from-block {
  background: #F8FAFC;
  border: 2rpx solid #E2E8F0;
}

.to-block {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 2rpx solid #C7D2FE;
}

.currency-tag {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 10rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.currency-tag-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #334155;
}

.tag-arrow {
  font-size: 18rpx;
  color: #94A3B8;
  margin-left: 10rpx;
}

.amount-input {
  width: 100%;
  margin-top: 20rpx;
  font-size: 56rpx;
  font-weight: 800;
  color: #1E293B;
  text-align: right;
}

.amount-placeholder {
  color: #CBD5E1;
  font-weight: 400;
}

.result-display {
  margin-top: 20rpx;
  font-size: 56rpx;
  font-weight: 800;
  color: #4F46E5;
  text-align: right;
}

/* ===== 互换按钮 ===== */
.swap-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 0;
}

.swap-line {
  flex: 1;
  height: 2rpx;
  background: #E2E8F0;
}

.swap-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(79, 70, 229, 0.3);
}

.swap-icon {
  font-size: 36rpx;
  color: #FFFFFF;
}

/* ===== 单位汇率 ===== */
.rate-card {
  padding: 28rpx 36rpx;
}

.rate-row {
  display: flex;
  align-items: center;
  padding: 8rpx 0;
}

.rate-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.from-dot {
  background: #64748B;
}

.to-dot {
  background: #4F46E5;
}

.rate-text {
  font-size: 26rpx;
  color: #64748B;
  font-weight: 500;
}

/* ===== 错误提示 ===== */
.error-card {
  display: flex;
  align-items: center;
  padding: 28rpx 36rpx;
  background: #FEF2F2;
}

.error-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
}

.error-text {
  font-size: 26rpx;
  color: #DC2626;
}

/* ===== 汇率总览入口 ===== */
.overview-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36rpx;
}

.overview-left {
  display: flex;
  align-items: center;
}

.overview-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.overview-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #334155;
}

.overview-arrow {
  font-size: 40rpx;
  color: #CBD5E1;
  font-weight: 300;
}