.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.display {
  margin: 0;
  font-size: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--text-secondary); font-size: var(--caption); }
.segments { display: flex; gap: 16px; height: 36px; align-items: center; }
.segments button {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: 600 15px/36px var(--font);
  padding: 0;
  cursor: pointer;
}
.segments button.on {
  color: var(--ocean);
  box-shadow: inset 0 -3px 0 var(--teal);
}