.container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        padding: 50px 20px;
      }

      .left,
      .right {
        flex: 1 1 400px;
        padding: 20px;
        box-sizing: border-box;
      }

      .left h2 {
        font-weight: 400;
        font-size: 28px;
        margin-bottom: 30px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 6px;
      }

      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="number"] {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .signup-btn {
        padding: 10px 25px;
        font-size: 14px;
        border-radius: 25px;
        border: 1px solid #000;
        background: none;
        cursor: pointer;
        margin-top: 10px;
      }

      .right h3 {
        font-weight: 400;
        font-size: 28px;
      }

      .right img {
        max-width: 100%;
        margin: 20px 0;
      }

      .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        font-size: 14px;
        margin-bottom: 20px;
      }

      .join-btn {
        padding: 12px 25px;
        font-size: 14px;
        background-color: #555;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      @media (max-width: 900px) {
        .container {
          flex-direction: column;
          align-items: center;
        }

        .left,
        .right {
          width: 100%;
          max-width: 500px;
        }
      }

      #captchaBox {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }
      canvas {
        border: 1px solid #999;
        border-radius: 6px;
        cursor: pointer;
      }
      .lo {
        padding: 0.4rem 0.9rem;
        border: none;
        border-radius: 4px;
        background: linear-gradient(135deg, #ff0080, #7928ca);
        color: #fefefe;
        font-weight: 600;
        cursor: pointer;
      }
      .lo:hover {
        background: linear-gradient(135deg, #7928ca, #ff0080);
        color: #000;
      }
      .refresh {
        padding: 0.4rem 0.9rem;
        border: none;
        border-radius: 4px;
        background: linear-gradient(135deg, #ff0080, #7928ca);
        color: #fefefe;
        font-weight: 600;
        cursor: pointer;
      }
      .refresh:hover {
        background: linear-gradient(135deg, #7928ca, #ff0080);
        color: #000;
      }
      input {
        padding: 0.45rem 0.6rem;
        width: 130px;
      }
      #msg {
        font-weight: 600;
      }
      .signup-btn {
        background: linear-gradient(135deg, #ff0080, #7928ca);
        border: none;
        color: #ffffff;
        border-radius: 4px;
      }
      .signup-btn:hover {
        background: linear-gradient(135deg, #7928ca, #ff0080);
        color: #000;
      }