body {
  background-color: #f8f9fa;
}

#user-menu p {
  font-size: 0.9rem;
}

#role-block h4 {
  font-size: 1.2rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  #role-block h4 {
    font-size: 1rem;
    text-align: center;
  }

  #user-name {
    font-size: 1.1rem;
  }

  #user-photo {
    width: 36px;
    height: 36px;
  }

  #user-menu {
    min-width: 180px;
    font-size: 0.85rem;
  }
}
.animate-fade {
  animation: fadeIn 1s ease;
}

.animate-zoom {
  animation: zoomIn 0.8s ease;
}

.animate-slide-up {
  animation: slideUp 0.8s ease;
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes zoomIn {
  from { transform: scale(0.95); opacity: 0 }
  to { transform: scale(1); opacity: 1 }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0 }
  to { transform: translateY(0); opacity: 1 }
}