/* =========================================================
   exchange.styles.css — page-specific rules
   ========================================================= */

.trade-wheel--value { padding: 0 12px; }
.exchange-value {
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 22px;
  min-width: 220px;
}
.exchange-value__caption {
  font-size: 12px; color: var(--muted);
  margin-bottom: 10px; line-height: 1.4;
}
.exchange-value__amt {
  font-size: 30px; font-weight: 800; color: var(--blue-hi);
}

.exchange-panels {
  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  gap: 20px;
  align-items: start;
}

.inv-item.is-active {
  border-color: var(--blue-hi);
  box-shadow: 0 0 0 1px var(--blue-hi), var(--shadow);
}

@media (max-width: 1200px) {
  .exchange-panels { grid-template-columns: 1fr 1fr; }
  .filter-panel { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 700px) {
  .exchange-panels { grid-template-columns: 1fr; }
  .filter-panel { order: 0; }
}