.video-card { transition: all 0.3s ease; }
.video-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

.detail-page h2 { position: relative; padding-left: 1rem; }
.detail-page h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; background: #3498db; }

footer a:hover { color: #3498db; }

@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 1rem; }
  .container { padding: 0 0.8rem; }
  article, section { padding: 1.5rem; }
}

.ui-style-11 {
  --primary-color: #2980b9;
}

.ui-style-11 a:hover { color: var(--primary-color); }