<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style>
    form {
      padding: 2rem;
      border-radius: 10px;
      div {
        padding: 10px;
        padding-bottom: 15px
      }
    }
    label { font-weight: bold; display: flex; align-items: center; gap: 0.5rem;}
    button {
      background: #0d6efd; color: #fff;
      border: none; border-radius: 5px; padding: 0.6rem 1rem;
      cursor: pointer;
      font-size: 1rem; display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .cancel {
      background: #6c757d;
    }
      @media (max-width: 600px) {
      .container { max-width: 98vw; }
      form { padding: 1rem; }
      }

    </style>


