:root{
      --moon-green:#82e4ad;
      --moon-purple:#7b62ce;
      --moon-ink:#0f172a;
      --moon-border: rgba(15,23,42,.10);
    }

/* Alerts */
.alert-gradient{
  background-image: linear-gradient(to right, rgba(130,228,173,.95), rgba(123,98,206,.95));
  color: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(123,98,206,.18);
}
.alert-text{ white-space: pre-line; }

/* Inputs */
.form-control{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid var(--moon-border);
  background: rgba(255,255,255,.96);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.form-control:focus{
  border-color: rgba(123,98,206,.55);
  box-shadow: 0 0 0 .22rem rgba(123,98,206,.16);
  background: #fff;
}

/* Button */
.btn-custom{
  background-image: linear-gradient(to right, var(--moon-green), var(--moon-purple));
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 12px 14px;
  box-shadow: 0 14px 30px rgba(123,98,206,.18);
  transition: transform .12s ease, opacity .12s ease;
}
.btn-custom:hover{ opacity:.96; transform: translateY(-1px); color:#fff; }
.btn-custom:active{ transform: translateY(0); }

.register-link{
  color: var(--moon-purple);
  display: inline-block;
  margin-left: 6px;
  font-weight: 800;
  text-decoration: none;
}
.register-link:hover{ text-decoration: underline; }

/* Turnstile slot */
.turnstile-slot{
  display: flex;
  justify-content: center;
  margin: 14px 0 8px 0;
  padding: 10px 0;
  border-radius: 14px;      
}

/* Right image polish */
.oblique-image-custom{
  background-image: url('../img/curved-images/curved6.jpg');
  position: relative;
}
.oblique-image-custom::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(123,98,206,.22), rgba(130,228,173,.16));
  pointer-events:none;
}

/* Round ONLY the bottom corners and clip the image accordingly */
.oblique{
  border-radius: 0 0 24px 24px;   /* TL TR BR BL */
  overflow: hidden;
}

/* Make the image layer follow the same shape */
.oblique .oblique-image{
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

   /* Card polish (subtle) */
.card.card-plain{
  border-radius: 18px;
}