styles.css

.progress-bar {
  transition: width 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-hover {
  transition: all 0.3s ease;
}

.flashing-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

.tab-button.active {
  background-color: rgb(219 234 254);
  color: rgb(29 78 216);
}

.tab-button:not(.active) {
  background-color: rgb(243 244 246);
  color: rgb(55 65 81);
}

.tab-button:hover {
  background-color: rgb(229 231 235);
}

.os-image-card {
  transition: all 0.2s ease;
}

.os-image-card:hover {
  border-color: rgb(147 197 253);
  background-color: rgb(248 250 252);
}

.os-image-card.selected {
  border-color: rgb(59 130 246);
  background-color: rgb(239 246 255);
}

.device-card {
  transition: all 0.2s ease;
}

.device-card:hover {
  background-color: rgb(243 244 246);
}

.device-card.selected {
  background-color: rgb(219 234 254);
  border-color: rgb(59 130 246);
}

.rotate-animation {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bounce-animation {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Custom scrollbar for OS list */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Loading skeleton animations */
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

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

.slide-up {
  animation: slideUp 0.3s ease-out;
}

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