.exchange-wrap { padding: 40px 0; }
.exchange-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.exchange-card { border: 1px solid #e5e5e5; background: #fff; padding: 20px; box-sizing: border-box; }
.exchange-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 22px; font-weight: 700; }
.exchange-rate-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 20px; margin-bottom: 10px; }
.exchange-rate-line .rate { font-size: 26px; font-weight: 700; line-height: 1.2; }
.exchange-rate-line .diff { font-size: 22px; font-weight: 700; }
.exchange-rate-line .diff.up { color: #3d3f8f; }
.exchange-rate-line .diff.down { color: #1e73d8; }
.exchange-rate-line .diff.same { color: #777; }
.exchange-date { color: #777; font-size: 14px; margin-bottom: 20px; }
.exchange-tabs { display: flex; justify-content: space-between; margin-bottom: 18px; border-bottom: 1px solid #ddd; }
.exchange-tabs button { border: 0; background: none; font-size: 16px; padding: 0 0 5px; cursor: pointer; color: #555; }
.exchange-tabs button.on { font-weight: 700; color: #111; border-bottom: 2px solid #111; }
.exchange-chart { position: relative; height: 180px; }
.exchange-title .flag img { width: 50px; height: 34px; object-fit: cover; display: block; }
.quote-wrap { display: inline-flex; align-items: center; gap: 6px; }
.quote-wrap img { width: 24px; height: 16px; object-fit: cover; display: block; }
span.label, span.badge {color: #000;}
@media (max-width:991px) {
    .exchange-grid { grid-template-columns: 1fr; }
    .exchange-title { font-size: 18px; }
    .exchange-rate-line { font-size: 16px; }
    .exchange-rate-line .rate { font-size: 26px; }
    .exchange-rate-line .diff { font-size: 18px; }
    .exchange-tabs button { font-size: 15px; }
    .exchange-chart { height: 150px; }
}