body.ui-style-5 {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  min-height: 100vh;
}

.video-card:hover,
.video-list > div:hover,
.ranking-list > div:hover,
.latest-list > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2) !important;
  transition: all 0.3s ease;
}

.video-card h3 a:hover,
.video-list h3 a:hover,
.ranking-list h2 a:hover,
.latest-list h2 a:hover {
  color: #667eea !important;
  transition: color 0.3s ease;
}

.hero {
  border-left: 4px solid #667eea;
  transition: border-left-width 0.3s ease;
}

.hero:hover {
  border-left-width: 8px;
}

.info-grid {
  transition: background 0.3s ease;
}

.info-grid:hover {
  background: #f0f0f0 !important;
}

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

  .info-grid {
    grid-template-columns: 1fr !important;
  }

  .ranking-list > div {
    flex-direction: column !important;
  }

  .ranking-list > div > div:first-child {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }

  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.2rem !important;
  }

  .video-card,
  .video-list > div,
  .ranking-list > div,
  .latest-list > div,
  article {
    padding: 1rem !important;
  }
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.back-to-top.show {
  display: flex;
}

a {
  transition: color 0.3s ease;
}

button,
.btn {
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover,
.btn:hover {
  transform: scale(1.05);
}

.header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
  background: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}