.form-signin {
  max-width: 370px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-floating > .form-control:focus ~ label, 
.form-floating > .form-control:not(:placeholder-shown) ~ label, 
.form-floating > .form-control-plaintext ~ label, 
.form-floating > .form-select ~ label {
  color: rgba(255, 171, 45, 0.8);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating input {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.form-floating input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ff9800;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
  color: white;
}

.btn-amber {
  background-color: #ae490e;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

.btn-amber:hover {
  background-color: #d95c14;
  color: rgb(255, 255, 255);
}

.btn-outline-amber {
  border-color: #d35b16;
  color: #ae490e;
}

.btn-outline-amber:hover {
  background-color: #c4500d;
  color: rgb(255, 255, 255);
}

.centred {
  width: 120px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#nArea {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}