* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --purple: #6b2fb3;
  --purple-d: #4a1f7a;
  --green: #1faa59;
  --red: #e23d4c;
  --ink: #1a1430;
}
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
  background: #e7e1f3; color: var(--purple-d);
}
.badge.p2p { background: #d8f5e3; color: var(--green); }
.badge.relay { background: #fde7c8; color: #b5701a; }
.badge.connecting { background: #fdf3c8; color: #9a7d1a; }