.card {
  background: var(--surface);
  border: .1rem solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); }

.card--interactive {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card--interactive:hover {
  transform: translateY(-.3rem);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--fs-lg);
  font-weight: 800;
}