:root {
  --bg: #fafafa;
  --text: #111111;
  --muted: #555555;
  --border: #eeeeee;
  --card: #ffffff;
  --hover: #f5f5f5;
  --overlay: rgba(255, 255, 255, 0.9);
  --overlayText: #111111;
  --accent: #ffa31a; /* orange accent */
  --accentGlow: rgba(255, 163, 26, 0.35);
  --bgGradient: none; /* default no gradient in light mode */
  --bgTexture: none;  /* default no texture in light mode */
}

[data-theme="dark"] {
  --bg: #1b1b1b;        /* background */
  --text: #ffffff;      /* text */
  --muted: #808080;     /* muted text */
  --border: #292929;    /* borders */
  --card: #292929;      /* cards/panels */
  --hover: #292929;     /* hover backgrounds */
  --overlay: rgba(255, 255, 255, 0.80); /* play overlay derived from #ffffff */
  --overlayText: #292929; /* icon color over white overlay */
  --accent: #ffa31a;    /* accent */
  --accentGlow: rgba(255, 163, 26, 0.35); /* glow derived from accent */
  /* subtle radial gradient using accent glow */
  --bgGradient: radial-gradient(1000px circle at 50% -240px, var(--accentGlow), rgba(0,0,0,0) 60%),
                radial-gradient(800px circle at 50% 120%, var(--accentGlow), rgba(0,0,0,0) 65%);
  /* faint horizontal scanline texture */
  --bgTexture: repeating-linear-gradient(180deg,
                  rgba(255,255,255,0.02) 0px,
                  rgba(255,255,255,0.00) 2px,
                  rgba(0,0,0,0.00) 4px);
}

/* Overrides using variables */
body { color: var(--text); background: var(--bg); background-image: var(--bgGradient), var(--bgTexture); background-repeat: no-repeat, repeat; background-attachment: fixed; }
.site-header { background: var(--card); border-bottom: 1px solid var(--border); }
.site-header { flex-direction: column; align-items: center; text-align: center; }
/* Top nav theming */
.top-nav { background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 0 0 1px var(--border), 0 0 14px var(--accentGlow); }
.top-nav .title { color: var(--text); text-shadow: 0 0 6px var(--accentGlow); }
.top-nav .logo { filter: drop-shadow(0 0 6px var(--accentGlow)); }
.top-nav .stat { border-color: var(--accent); background: var(--card); color: var(--text); box-shadow: 0 0 0 2px var(--accent) inset, 0 0 16px var(--accentGlow), 0 8px 20px rgba(0,0,0,0.5); }
.top-nav .stat .label { color: var(--muted); }
.top-nav .stat .value { color: var(--text); text-shadow: 0 0 8px var(--accentGlow); }
.stat { border-color: var(--border); background: var(--card); color: var(--muted); }
.stat .value { color: var(--text); }
.video-card { background: var(--card); border: 1px solid var(--border); }
.card-info { background: var(--card); }
.badge-row .badge { color: var(--muted); }
.video-card { box-shadow: 0 0 0 1px var(--border), 0 12px 24px rgba(0,0,0,0.5); }
.video-card:hover { box-shadow: 0 0 0 1px var(--accent), 0 16px 28px var(--accentGlow); }
.btn:hover { background: var(--hover); box-shadow: 0 0 0 1px var(--border), 0 8px 16px rgba(0,0,0,0.4); }
.stat { box-shadow: 0 0 0 1px var(--border), 0 0 22px var(--accentGlow) inset, 0 8px 18px rgba(0,0,0,0.45); }
.video-card .desc { color: var(--muted); }
.site-footer { color: var(--muted); background: #0e0e10; border-top: 1px solid var(--border); box-shadow: inset 0 0 24px rgba(0,0,0,0.6); }
.footer-rule { background: linear-gradient(90deg, rgba(255,163,26,0), var(--accent), rgba(255,163,26,0)); opacity: 0.8; box-shadow: 0 0 14px var(--accentGlow); }
.footer-brand-link { color: var(--accent); text-decoration: none; }
.footer-brand-link:hover { text-decoration: underline; }
.btn { border-color: var(--border); background: var(--card); color: var(--text); }
.btn:hover { background: var(--hover); }
.gate { border-color: var(--border); background: var(--card); }
.notice { color: var(--muted); }
.thumb::after { background: var(--overlay); color: var(--overlayText); }

/* Accent glow styling for hero elements */
.brand .title { letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; font-size: 28px; text-shadow: 0 0 6px var(--accentGlow), 0 0 18px var(--accentGlow); }
.stats { justify-content: center; gap: 16px; margin-top: 12px; }
.stat { box-shadow: 0 0 0 1px var(--border), 0 0 22px var(--accentGlow) inset, 0 0 12px var(--accentGlow); }
.stat .label { letter-spacing: 0.5px; font-size: 12px; }
.section-title { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border), 0 0 20px var(--accentGlow) inset; }
.video-grid { margin-top: 10px; }

/* Load More button styling */
.load-more-wrap { display: flex; justify-content: center; margin: 24px 0; }
.load-more {
  font-weight: 700;
  font-size: 18px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 18px var(--accentGlow), 0 12px 24px rgba(0,0,0,0.5);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}
.load-more:hover {
  background: var(--hover);
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 24px var(--accentGlow), 0 16px 28px rgba(0,0,0,0.55);
  transform: translateY(-1px);
}
.load-more[aria-disabled="true"], .load-more:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

/* Dark theme variant for stronger pill look */
[data-theme="dark"] .load-more {
  background: #0e0e10;
  color: var(--accent);
}

/* Darker video tiles and accent titles in dark theme */
[data-theme="dark"] .video-card,
[data-theme="dark"] .card-info {
  background: #0e0e10; /* near-black for tiles */
}
[data-theme="dark"] .video-card .title,
[data-theme="dark"] .title-row .title {
  color: var(--accent); /* use provided orange #ffa31a */
}