@layer base {
  .formContainer {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-lg);
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
  }

  .submitButton {
    margin-top: var(--spacing-4);
    align-self: flex-start;
  }

  /* Responsive design */
  @media (max-width: 768px) {
    .formContainer {
      padding: var(--spacing-6);
    }

    .row {
      grid-template-columns: 1fr;
      gap: var(--spacing-4);
    }

    .form {
      gap: var(--spacing-4);
    }

    .submitButton {
      width: 100%;
    }
  }
}