.video-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

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

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

a {
  transition: all 0.3s ease;
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #d32f2f;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 80%;
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr !important;
  }
  
  .container {
    padding: 10px;
  }
}

.ui-style-0 { --accent: #d32f2f; }
.ui-style-1 { --accent: #c62828; }
.ui-style-2 { --accent: #b71c1c; }
.ui-style-3 { --accent: #d84315; }
.ui-style-4 { --accent: #e64a19; }
.ui-style-5 { --accent: #c2185b; }
.ui-style-6 { --accent: #ad1457; }
.ui-style-7 { --accent: #880e4f; }
.ui-style-8 { --accent: #6a1b9a; }
.ui-style-9 { --accent: #4a148c; }
.ui-style-10 { --accent: #1976d2; }
.ui-style-11 { --accent: #0d47a1; }
.ui-style-12 { --accent: #00695c; }
.ui-style-13 { --accent: #004d40; }
.ui-style-14 { --accent: #e65100; }
.ui-style-15 { --accent: #bf360c; }