:root {
  --color-accent: #6874e8;
  --color-primary-dark: #d4d9d4;
  --color-primary-darker: #b6b4b5;
  --color-primary: #f9ebe0;
  --color-text: #2d2327;
  --color-text-light: #513e46;
}

/* Auth form container */
.auth-form {
  padding: var(--gap-lg) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  flex-grow: 1;

  form {
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);
    align-items: end;

    @media (width < 900px) {
      flex-grow: 1;
      width: 100%;
      align-items: stretch;
      flex-direction: column;
    }
  }
}

/* Auth link */
.auth-link {
  text-align: center;
  font-size: var(--font-sm);
}

/* Error message */
.error-msg {
  font-size: 13px;
  color: #c62828;
  margin-bottom: 0.25rem;
  border-left: 3px solid #c62828;
  padding-left: 0.6rem;
}

/* console */
.console {
  .app-links {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;

    a {
      text-decoration: none;
      border: var(--border);
      padding: var(--gap-xxs) var(--gap-xs);
    }
  }
}

/* Share link row */
.share-link {
  padding: 0;

  input {
    font-family: var(--font-accent);
    cursor: text;
    border: 0;
  }
}