body {
  background-color: rgb(18, 20, 25);
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.auth-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 30px;
  background-color: rgb(30, 33, 40);
  border-radius: 10px;
}
.btn-custom {
  background-color: rgb(242, 195, 68);
  border: none;
  color: rgb(18, 20, 25);
  font-weight: bold;
  width: 100%;
}
.btn-custom:hover {
  background-color: rgb(230, 185, 60);
  color: rgb(18, 20, 25);
}
.form-control {
  background-color: rgb(50, 53, 60);
  border: 1px solid rgb(70, 73, 80);
  color: white;
}
.form-control:focus {
  background-color: rgb(50, 53, 60);
  border-color: rgb(242, 195, 68);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(242, 195, 68, 0.25);
}
.auth-footer {
  margin-top: 20px;
  text-align: center;
}
.auth-link {
  color: rgb(242, 195, 68);
  text-decoration: none;
}
.auth-link:hover {
  text-decoration: underline;
}
.password-strength {
  height: 5px;
  margin-top: 5px;
  background-color: rgb(70, 73, 80);
  border-radius: 5px;
  overflow: hidden;
}
.password-strength-bar {
  height: 100%;
  width: 0%;
  transition: width 0.3s;
}
.invalid-feedback {
  display: none;
  color: #ff6b6b;
  font-size: 0.875em;
  margin-top: 0.25rem;
}
.is-invalid {
  border-color: #ff6b6b !important;
}
.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25) !important;
}