/* The pairing screen; colours come from the app's own --text / --accent / --warning. */

.pairing {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 22em;
  margin: 4em auto 0;
  padding: 0 1em;
}

.pairing-title {
  margin: 0;
  font-size: 1.6em;
  text-align: center;
  color: var(--text);
}

.pairing-button {
  font: inherit;
  font-size: 1.15em;
  padding: 0.7em;
  border: none;
  border-radius: 0.4em;
  background: var(--accent);
  color: var(--on-accent);
}

.pairing-message {
  margin: 0;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--warning);
}