/* Enhanced styling for video content site */

.ui-style-0 body { --primary: #d32f2f; --primary-dark: #b71c1c; }
.ui-style-1 body { --primary: #1976d2; --primary-dark: #0d47a1; }
.ui-style-2 body { --primary: #388e3c; --primary-dark: #1b5e20; }
.ui-style-3 body { --primary: #f57c00; --primary-dark: #e65100; }
.ui-style-4 body { --primary: #7b1fa2; --primary-dark: #4a148c; }
.ui-style-5 body { --primary: #c2185b; --primary-dark: #880e4f; }
.ui-style-6 body { --primary: #0097a7; --primary-dark: #006064; }
.ui-style-7 body { --primary: #5d4037; --primary-dark: #3e2723; }
.ui-style-8 body { --primary: #455a64; --primary-dark: #263238; }
.ui-style-9 body { --primary: #e64a19; --primary-dark: #bf360c; }
.ui-style-10 body { --primary: #303f9f; --primary-dark: #1a237e; }
.ui-style-11 body { --primary: #00796b; --primary-dark: #004d40; }
.ui-style-12 body { --primary: #d32f2f; --primary-dark: #b71c1c; }
.ui-style-13 body { --primary: #512da8; --primary-dark: #311b92; }
.ui-style-14 body { --primary: #c62828; --primary-dark: #8e0000; }
.ui-style-15 body { --primary: #0288d1; --primary-dark: #01579b; }

body {
  --primary: #d32f2f;
  --primary-dark: #b71c1c;
}

h1, h2, h3 {
  color: var(--primary, #d32f2f);
}

nav a:hover,
nav a:first-child {
  color: var(--primary, #d32f2f);
}

.card:hover {
  border-color: var(--primary, #d32f2f);
}

.card h3,
.card a {
  color: var(--primary, #d32f2f);
}

.links a {
  background: var(--primary, #d32f2f);
}

.links a:hover {
  background: var(--primary-dark, #b71c1c);
}

.rank {
  background: var(--primary, #d32f2f);
}

section h2 {
  border-left-color: var(--primary, #d32f2f);
}

.topic-section h2 {
  border-left-color: var(--primary, #d32f2f);
}

.detail h1,
.detail .section h2,
.related h2 {
  color: var(--primary, #d32f2f);
  border-left-color: var(--primary, #d32f2f);
}

.oneline {
  color: var(--primary, #d32f2f);
}

.related-card h3,
.related-card a {
  color: var(--primary, #d32f2f);
}

/* Smooth transitions */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Back to top button */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary, #d32f2f);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: all 0.3s ease;
}

#backToTop:hover {
  background: var(--primary-dark, #b71c1c);
  transform: translateY(-4px);
}

#backToTop.show {
  display: flex;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  nav a {
    padding: 0.5rem 0.15rem;
    font-size: 0.75rem;
  }

  .container {
    padding: 1rem 0.5rem;
  }
}