:root {
  --yellow: #ffcc00;
  --yellow-dark: #e6b800;
  --bg: #0a0a0a;
  --text: #f0f0f0;
  --muted: #b3b3b3;
}
body { background-color: var(--bg); color: var(--text); }
#mainNav { background-color: #000000 !important; border-bottom: 2px solid var(--yellow); }
#mainNav .navbar-brand { color: var(--yellow) !important; font-weight: 700; }
#mainNav .nav-link { color: #ffffff !important; }
#mainNav .nav-link:hover { color: var(--yellow) !important; }
#mainNav .navbar-toggler { color: var(--yellow); border-color: var(--yellow); }
.site-heading, .page-heading { background: rgba(0,0,0,.55); padding: 24px; border-radius: 8px; }
.site-heading h1, .page-heading h1 { color: var(--yellow) !important; }
.site-heading .subheading, .page-heading .subheading { color: #ffffff !important; }
a { color: var(--yellow); }
a:hover { color: var(--yellow-dark); }
.post-preview a:hover .post-title,
.post-preview a:hover .post-subtitle { color: var(--yellow) !important; }
.post-title, .post-subtitle, h2, h3 { color: #ffffff; }
.btn-primary { background-color: var(--yellow) !important; border-color: var(--yellow) !important; color: #000000 !important; }
.btn-primary:hover { background-color: var(--yellow-dark) !important; border-color: var(--yellow-dark) !important; }
.post-meta { color: var(--muted); }
footer, .footer { background-color: #000000 !important; }
footer a, .footer a { color: var(--yellow) !important; }
hr.custom-divider { border-top-color: var(--yellow); }

.mini-player {
  position: relative;
  margin-top: 1.1rem;
  aspect-ratio: 16 / 9;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--yellow);
}
.mini-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-credit {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.video-credit strong {
  color: var(--yellow);
  font-weight: 600;
}