body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #0f0f0f;
  color: #fff;
}

.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-box {
  background: #1a1a1a;
  padding: 32px;
  border-radius: 14px;
  width: 360px;
  box-shadow: 0 0 40px rgba(255, 40, 40, 0.15);
  text-align: center;
}

.auth-box input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: none;
  background: #0f0f0f;
  color: #fff;
  box-sizing: border-box;
}

.auth-box input:focus {
  outline: none;
  border: 1px solid #ff2b2b;
  box-shadow: 0 0 10px #ff2b2b;
}

.auth-box button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border-radius: 10px;
  border: none;
  background: #ff2b2b;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

.auth-box button:hover {
  background: #ff4b4b;
  transform: scale(1.03);
}

.error-text {
  color: #ff4b4b;
  font-size: 0.9em;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.error-text.show {
  opacity: 1;
}

/* œil */
.password-field {
  position: relative;
  width: 100%;
}

.password-field input {
  width: 100%;
  padding-right: 42px;
}

.eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.6;
}

.eye:hover {
  opacity: 1;
}

.eye svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: opacity 0.2s ease;
}

.hidden {
  display: none;
}


.nav-profile {
  font-weight: 600;
  cursor: pointer;
}