/* Base */
html, body { transition: background-color .3s ease, color .3s ease; }
body {
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(-45deg, #0f0f0f, #121212, #1a1a1a, #0f0f0f);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
header, footer { backdrop-filter: blur(10px); }

#channelList div { background: rgba(255,255,255,.05); }
#channelList div:hover { background: rgba(255,255,255,.15); }

.glow-text { text-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }
#searchBox::placeholder { color: #94a3b8; }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.animate-fadeIn { animation: fadeIn .5s ease-out; }

/* Sidebar scrollbar */
#channelSidebar::-webkit-scrollbar { width: 8px; }
#channelSidebar::-webkit-scrollbar-thumb { background: rgba(6,182,212,.7); border-radius: 4px; }
#channelSidebar::-webkit-scrollbar-track { background: transparent; }

/* Pages */
#pages { padding: 0 0 50px 0; }

/* Layout variables (JS updates these) */
:root{
  --banner-offset: 0px;
  --header-offset: 56px;
}

/* Main content offset is driven by JS now */
#mainContent { padding-top: 0; }

/* Notice bar collapse */
#noticeBar { transition: height .25s ease, opacity .2s ease, padding .2s ease, margin .2s ease; }
#noticeBar[data-collapsed="true"]{
  height:0; opacity:0; padding-top:0!important; padding-bottom:0!important; margin:0!important; overflow:hidden;
}

/* Article/prose cosmetics */
.prose-tvgl :where(h1,h2,h3,h4){ scroll-margin-top: 96px; } /* anchor-safe */
.prose-tvgl a{ text-decoration:none; }
.prose-tvgl a:hover{ text-decoration:underline; }
.prose-tvgl code{ background: rgb(2 132 199 / .08); border:1px solid rgb(6 182 212 / .25); padding:.15rem .35rem; border-radius:.375rem; }
.prose-tvgl pre{ background: rgb(2 6 23 / .7); border:1px solid rgb(6 182 212 / .25); border-radius:.75rem; padding:1rem; overflow:auto; }
.prose-tvgl table{ width:100%; border-collapse:collapse; }
.prose-tvgl table th, .prose-tvgl table td{ border:1px solid rgb(6 182 212 / .25); padding:.5rem .6rem; }
.prose-tvgl blockquote{ border-left:3px solid rgb(14 165 233); background: rgb(2 132 199 / .08); padding:.75rem 1rem; border-radius:.5rem; }
.prose-tvgl ul>li::marker{ color: rgb(34 211 238); }

/* Sticky filters that must sit below header + banner */
.sticky-filters{
  position: sticky;
  top: calc(var(--header-offset) + var(--banner-offset));
  z-index: 30;
  backdrop-filter: blur(6px);
}

/* Mobile drawer (positioned by JS) */
#mobileNav{
  top: 0;                     /* JS sets the real pixel top */
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
#mobileNav[data-open="true"]{
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}
#mobileNav .sheet{ max-height: min(60vh, 440px); overflow-y: auto; }
#mobileNav .sheet::-webkit-scrollbar{ width: 6px; }
#mobileNav .sheet::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 8px; }

/* Drawer row + quick pill */
.mrow{ padding:.45rem .7rem; border-radius:.6rem; line-height:1.1; }
.mrow[data-active="true"]{ background: rgba(255,255,255,.12); outline:1px solid rgba(59,211,255,.25); }
.chev{ opacity:.55; }

.qpill{
  display:inline-flex; align-items:center; gap:.45rem;
  height:2rem; padding:0 .6rem; border-radius:.6rem;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.qpill:hover, .qpill:focus{ background: rgba(255,255,255,.1); }

/* Lock page scroll when menu is open */
html[data-menu-open="true"], body[data-menu-open="true"]{ overflow: hidden; }

/* Compact top spacing on small screens */
@media (max-width:640px){
  .page-header, .page-breadcrumb, .page-first-block{ margin-top:.35rem !important; }
}
#controlHints {
  margin-left: auto;
  margin-right: auto;
}