.auth-panel {
  display: grid;
  gap: 10px;
}

.auth-form,
.auth-signed-in {
  display: grid;
  gap: 10px;
}

.auth-form label {
  display: grid;
  gap: 7px;
}

.auth-form span {
  color: var(--brand-dark);
  font-weight: 850;
}

.auth-panel .quiet-button,
.auth-panel .primary-button {
  width: 100%;
}

.auth-status {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-status[data-state="ok"] {
  color: var(--brand-dark);
  font-weight: 750;
}

.auth-status[data-state="warn"] {
  color: var(--amber);
  font-weight: 750;
}

.auth-signed-in p {
  margin: 0;
  color: var(--brand-dark);
  font-weight: 750;
}

.role-management {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.role-management h3 {
  margin: 0;
}

.role-rows,
.role-row,
.role-row label {
  display: grid;
  gap: 8px;
}

.role-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.role-row span {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}