/* ==========================================================================
   OVERPLAY COMIC BOOK & POP-ART THEME STYLESHEET (comic-home.css v3)
   Bespoke, vibrant, funky pop-art comic aesthetic with high contrast & zero dark mud.
   Engineered for silky-smooth 60/120fps scrolling & instant card visibility.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:ital,wght@0,400;0,700;1,700&family=Inter:wght@400;600;800;900&display=swap');

:root {
  --comic-paper: #FFFDF2;
  --comic-paper-warm: #FFFBE6;
  --comic-card-bg: #FFFFFF;
  --comic-ink: #000000;
  --comic-yellow: #FFE600;
  --comic-yellow-hover: #FFF04D;
  --comic-cyan: #00F0FF;
  --comic-cyan-hover: #5CF6FF;
  --comic-pink: #FF2E63;
  --comic-pink-hover: #FF5A82;
  --comic-green: #10E761;
  --comic-purple: #A855F7;
  --comic-orange: #FF8800;
  --comic-border: 3px solid #000000;
  --comic-border-sm: 2px solid #000000;
  --comic-border-thick: 3.5px solid #000000;
  --comic-shadow: 4px 4px 0px #000000;
  --comic-shadow-sm: 2.5px 2.5px 0px #000000;
  --comic-shadow-lg: 6px 6px 0px #000000;
  --comic-shadow-xl: 9px 9px 0px #000000;
  --primary-nav-height: 64px;
  --secondary-nav-gap: 12px;
  --accent: #FF2E63;
  --accent-rgb: 255, 46, 99;
}

/* ──────────────────────────────────────────────────────────────────────────
   1. LENIS SMOOTH SCROLL INTEGRATION & PERFORMANCE (ELIMINATES ALL SCROLL LAG)
   ────────────────────────────────────────────────────────────────────────── */
html {
  background-color: var(--comic-paper);
}

html.lenis,
html.lenis body {
  height: auto !important;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. GLOBAL CANVAS & HIGH-PERFORMANCE FIXED HALFTONE BEN-DAY BACKGROUND
   ────────────────────────────────────────────────────────────────────────── */
body#mainBody {
  background-color: var(--comic-paper) !important;
  color: var(--comic-ink) !important;
  font-family: 'Comic Neue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  overflow-x: clip;
  position: relative;
}

/* White Content Area: Halftone Ben-Day dots + Low-Opacity Manga Page Background */
#mainContentWrapper {
  background-color: #FFFDF2 !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.075) 1.3px, transparent 1.3px) !important;
  background-size: 18px 18px !important;
  background-position: 0 0 !important;
  position: relative !important;
  z-index: 10 !important;
  color: var(--comic-ink) !important;
  animation: none !important;
}

#mainContentWrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('/images/manga-nav-bg.jpg') !important;
  background-repeat: repeat !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  opacity: 0.14 !important; /* Authentic, clearly visible manga panel background texture */
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
}

#mainContentWrapper > * {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes comicDotsDrift {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 36px 36px;
  }
}

/* Halftone screen-tone overlay printed ON TOP of Creator Cards, Clips & Spotlight Carousel */
.glow-card,
#calendarContent > div,
#twitchCalendarContent > div,
#kickCalendarContent > div,
.creator-grid-card,
#creatorsRealContent a,
#carouselTrack {
  position: relative !important;
}

.glow-card::after,
#calendarContent > div::after,
#twitchCalendarContent > div::after,
#kickCalendarContent > div::after,
.creator-grid-card::after,
#creatorsRealContent a::after,
#carouselTrack::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 25 !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1.5px, transparent 1.5px) !important;
  background-size: 14px 14px !important;
  background-position: 0 0 !important;
  mix-blend-mode: multiply !important;
  border-radius: inherit !important;
  transition: opacity 0.25s ease !important;
}

/* YouTube, Twitch, Kick Highlight Clips: Dots ONLY appear on hover! */
.glow-card::after,
#calendarContent > div::after,
#twitchCalendarContent > div::after,
#kickCalendarContent > div::after {
  opacity: 0 !important;
}

.glow-card:hover::after,
#calendarContent > div:hover::after,
#twitchCalendarContent > div:hover::after,
#kickCalendarContent > div:hover::after {
  opacity: 1 !important;
}

/* Creator cards & carousel keep subtle light overlay */
.creator-grid-card::after,
#creatorsRealContent a::after,
#carouselTrack::after {
  opacity: 1 !important;
}

#mainSite {
  background: transparent !important;
  color: var(--comic-ink) !important;
  position: relative;
  z-index: 10;
}

/* Comic Fonts Helpers */
.font-comic-punch {
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.8px;
}
.font-comic-body {
  font-family: 'Comic Neue', cursive, sans-serif !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. VISIBILITY & REVEAL ENFORCEMENT (FIXES HIGHLIGHTS & PODIUM DISPLAY)
   ────────────────────────────────────────────────────────────────────────── */
/* Instant section visibility: no delayed animation blocking the user */
.reveal,
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Ensure highlights calendar and creators content are always 100% visible */
.loaded,
#calendarContent,
#calendarContent.loaded,
#twitchCalendarContent,
#twitchCalendarContent.loaded,
#kickCalendarContent,
#kickCalendarContent.loaded,
#creatorsRealContent {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

#calendarSkeleton.hidden,
#twitchCalendarSkeleton.hidden,
#kickCalendarSkeleton.hidden,
#creatorsSkeleton.hidden {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. PRIMARY NAVBAR (#homepageNav)
   ────────────────────────────────────────────────────────────────────────── */
#homepageNav {
  background: var(--comic-paper) !important;
  border: none !important;
  border-bottom: 3.5px solid #000000 !important;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 60 !important;
  overflow: visible !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Manga Page Background Texture across Navbar */
.manga-nav-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/images/manga-nav-bg.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  opacity: 0.14 !important; /* Authentic, clearly visible manga sketch texture */
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
}

#homepageNav .max-w-7xl {
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Hard disable any underlines or pseudoelements on navbar links */
#homepageNav a::after,
#homepageNav a:hover::after,
#homepageNav a::before,
#homepageNav a:hover::before,
.nav-links a::after,
.nav-links a:hover::after,
nav a::after,
nav a:hover::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: none !important;
  text-decoration: none !important;
}

#homepageNav a.logo-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  overflow: visible !important;
}

#homepageNav a.logo-link span {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 2px !important;
  line-height: 1.1 !important;
  color: #000000 !important;
  text-shadow: 2.5px 2.5px 0px #FFE600 !important;
  -webkit-text-stroke: 1px #000000;
  display: inline-flex !important;
  align-items: center !important;
}

#homepageNav a.logo-link .brand-accent {
  color: #ED1D24 !important; /* Marvel Red */
  text-shadow: 2.5px 2.5px 0px #000000 !important;
  -webkit-text-stroke: 1px #000000;
  font-weight: 900 !important;
  font-style: italic !important;
  margin-left: 5px !important;
}

#homepageNav a.logo-link img,
nav a.logo-link img,
.logo-link img {
  height: clamp(48px, 5.5vw, 56px) !important;
  max-height: 58px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
  transform: scale(1.06) !important;
  transform-origin: left center !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#homepageNav a.logo-link:hover img,
nav a.logo-link:hover img,
.logo-link:hover img {
  transform: scale(1.18) !important;
}


/* Comic Sticker Navigation Pills - No cropping */
#homepageNav .nav-links {
  gap: 10px !important;
  overflow: visible !important;
  padding: 8px 4px !important;
}

#homepageNav .nav-links a {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  color: #000000 !important;
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  padding: 5px 16px !important;
  border-radius: 9999px !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transform: rotate(0deg) !important;
  margin: 4px 2px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

#homepageNav .nav-links a:hover {
  background: #FFE600 !important; /* Marvel Yellow */
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
  transform: translateY(-2px) scale(1.05) rotate(-1.5deg) !important;
}

#homepageNav a.nav-link-active,
#homepageNav .nav-links a[href="/"] {
  background: #00F0FF !important; /* Marvel Comic Cyan */
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

#homepageNav a.nav-link-active:hover,
#homepageNav .nav-links a[href="/"]:hover {
  background: #00F0FF !important;
  box-shadow: 5px 5px 0px #000000 !important;
  transform: translateY(-2px) scale(1.05) rotate(1.5deg) !important;
}

/* Sign In Button — Marvel Comic Pop-Art Style - No Cropping */
#homepageNav #authNavWrapper {
  overflow: visible !important;
  padding: 6px 0 !important;
}

#googleAuthBtn,
#googleAuthBtn:not(.rounded-full),
.comic-signin-btn,
a#googleAuthBtn {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  border-radius: 9999px !important;
  padding: 5px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transform: rotate(-1deg) !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  margin: 4px 0 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

#googleAuthBtn span,
#googleAuthBtn:not(.rounded-full) span,
.comic-signin-btn span,
a#googleAuthBtn span {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

.comic-google-icon-wrapper {
  background: #FFFFFF !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 1px 1px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.comic-google-icon-wrapper svg,
#googleAuthBtn svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

#googleAuthBtn:hover,
#googleAuthBtn:not(.rounded-full):hover,
.comic-signin-btn:hover,
a#googleAuthBtn:hover {
  background: #00F0FF !important;
  color: #000000 !important;
  transform: translateY(-2px) scale(1.05) rotate(1.5deg) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

#googleAuthBtn:active,
#googleAuthBtn:not(.rounded-full):active,
.comic-signin-btn:active,
a#googleAuthBtn:active {
  transform: translate(2px, 2px) scale(0.98) !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
}

/* If user is authenticated, style profile avatar */
#homepageNav #googleAuthBtn[href="/profile"],
#homepageNav a[href="/profile"]#googleAuthBtn {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  width: 42px !important;
  height: 42px !important;
}

#homepageNav #googleAuthBtn[href="/profile"]:hover,
#homepageNav a[href="/profile"]#googleAuthBtn:hover {
  transform: scale(1.1) rotate(2deg) !important;
  box-shadow: 5px 5px 0px #FFE600, 7px 7px 0px #000000 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. HERO SPONSOR BANNER (#sponsorBanner) — VIBRANT COMIC SPLASH
   ────────────────────────────────────────────────────────────────────────── */
#sponsorBanner {
  background: linear-gradient(135deg, #FFE600 0%, #FFF388 40%, #FFDD00 100%) !important;
  border-bottom: var(--comic-border-thick) !important;
  position: relative !important;
  box-shadow: inset 0 -6px 0px rgba(0, 0, 0, 0.12) !important;
  transform: translateZ(0);
}

/* Comic Action Rays Overlay */
#sponsorBackground {
  opacity: 0.15 !important;
  mix-blend-mode: multiply !important;
  filter: contrast(1.4) grayscale(0.2) !important;
}

/* Comic Action Burst Layer */
#sponsorBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.12) 2.5px, transparent 2.5px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}

/* Centered Background Watermark Overplay Logo covering full sponsor banner */
.sponsor-watermark-wrapper {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 5 !important;
  overflow: hidden !important;
  padding: clamp(0.25rem, 1vw, 1rem) !important;
}

.sponsor-watermark-img {
  width: 98% !important;
  max-width: 1850px !important;
  height: auto !important;
  max-height: 95% !important;
  object-fit: contain !important;
  opacity: 0.20 !important;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.10)) !important;
  pointer-events: none !important;
  user-select: none !important;
  transform: translateZ(0) !important;
}

#sponsorTitle {
  display: none !important;
}

#sponsorSnipSpan {
  color: #FF2E63 !important;
  -webkit-text-stroke: 3px #000000 !important;
  text-shadow: 6px 6px 0px #000000, 9px 9px 0px #00F0FF !important;
}

#sponsorContentBox {
  background: transparent !important;
  display: none !important;
}

#sponsorSubtitle2 {
  display: none !important;
}

#sponsorSubtitle2 code {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-weight: 900 !important;
  font-family: ui-monospace, monospace !important;
}

#sponsorSubtitle2 strong {
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-weight: 900 !important;
  color: #000000 !important;
}

#sponsorShortsLine {
  background: #00F0FF !important;
  border: 3px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  color: #000000 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  transform: skewX(-3deg) rotate(-0.5deg) !important;
  max-width: 550px !important;
  text-shadow: none !important;
  margin-top: 10px !important;
}

#sponsorDownloadBtn {
  background: #FF2E63 !important;
  color: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 14px !important;
  padding: 10px 22px !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transform: skewX(-3deg) rotate(-1deg) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: 1.5px 1.5px 0px #000000 !important;
  margin-top: 8px !important;
  display: inline-flex !important;
}

#sponsorDownloadBtn svg {
  stroke-width: 3.5 !important;
  filter: drop-shadow(1.5px 1.5px 0px #000000);
}

#sponsorDownloadBtn:hover {
  background: #00F0FF !important;
  color: #000000 !important;
  border-color: #000000 !important;
  transform: skewX(-3deg) rotate(-1deg) scale(1.05) translate(-2px, -2px) !important;
  box-shadow: 9px 9px 0px #000000 !important;
  text-shadow: none !important;
}

#sponsorDownloadBtn:active {
  transform: skewX(-3deg) rotate(-1deg) translate(3px, 3px) !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. SHORTS 9:16 VERTICAL VIDEO CARD & NAVIGATION
   ────────────────────────────────────────────────────────────────────────── */
#sponsorShortCard {
  border: 4px solid #000000 !important;
  box-shadow: 8px 8px 0px #000000, 13px 13px 0px #FFE600 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #000000 !important;
}

#sponsorShortTopTag {
  background: #FFE600 !important;
  border: 3px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  color: #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
  padding: 6px 20px !important;
  top: -44px !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#sponsorShortTopTag:hover {
  background: #00F0FF !important;
  transform: translateX(-50%) scale(1.08) rotate(1deg) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

.short-nav-arrow {
  background: #FFE600 !important;
  border: 3px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 9999px !important;
  color: #000000 !important;
  opacity: 1 !important;
  width: 44px !important;
  height: 44px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.short-nav-arrow svg {
  stroke: #000000 !important;
  stroke-width: 3.2 !important;
}

.short-nav-arrow:hover {
  background: #00F0FF !important;
  color: #000000 !important;
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.15) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   7. SECONDARY NAVIGATION & COMIC SEARCH BAR
   ────────────────────────────────────────────────────────────────────────── */
.secondary-nav-sticky {
  background: #FFFFFF !important;
  border: var(--comic-border-thick) !important;
  box-shadow: var(--comic-shadow-lg) !important;
  border-radius: 18px !important;
  color: #000000 !important;
  height: 56px !important;
  padding: 0 16px !important;
  margin-top: 24px !important;
  margin-bottom: 32px !important;
}

.secondary-nav-sticky a,
.secondary-nav-sticky button,
.secondary-nav-sticky span {
  color: #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.secondary-nav-sticky a:hover {
  color: #FF2E63 !important;
  transform: scale(1.06) !important;
}

#searchContainer {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#searchInput {
  background: transparent !important;
  color: #000000 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

#searchInput::placeholder {
  color: #64748b !important;
  font-weight: 600 !important;
}

#searchContainer button {
  background: #FFE600 !important;
  color: #000000 !important;
  border-left: 2px solid #000000 !important;
  transition: all 0.18s ease !important;
}

#searchContainer button:hover {
  background: #00F0FF !important;
}

#searchDropdown {
  background: #FFFFFF !important;
  border-top: 2px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

#specialDropdownMenu {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  border-radius: 12px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   8. SECTION HEADINGS — COMIC BADGES & RIBBONS
   ────────────────────────────────────────────────────────────────────────── */
h2.text-white,
.text-white.text-sm.tracking-widest.uppercase {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 1.2px !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  padding: 4px 14px !important;
  background: #FFE600 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 8px !important;
  transform: rotate(-0.8deg) !important;
}

p.text-\[11px\].text-\[\#94a3b8\],
p.text-xs.text-neutral-400 {
  color: #334155 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}

/* Comic Section Header 'View All' Pill Button */
.view-all-comic-btn,
a[href="/creators"].text-accent {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 5px 16px !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transform: rotate(0.8deg) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.view-all-comic-btn span,
a[href="/creators"].text-accent span {
  color: #000000 !important;
  font-weight: 900 !important;
}

.view-all-comic-btn .comic-arrow,
a[href="/creators"].text-accent span:last-child {
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  transition: transform 0.18s ease !important;
}

.view-all-comic-btn:hover,
a[href="/creators"].text-accent:hover {
  background: #00F0FF !important;
  color: #000000 !important;
  transform: translate(-2px, -2px) scale(1.06) rotate(-1deg) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

.view-all-comic-btn:hover .comic-arrow,
a[href="/creators"].text-accent:hover span:last-child {
  transform: translateX(3px) !important;
}

.view-all-comic-btn:active,
a[href="/creators"].text-accent:active {
  transform: translate(2px, 2px) scale(0.98) !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   9. FEATURED & RECOMMENDED 3D SPOTLIGHT CAROUSEL
   ────────────────────────────────────────────────────────────────────────── */
#carouselTrack {
  background: #FFFFFF !important;
  border: 4px solid #000000 !important;
  box-shadow: 8px 8px 0px #000000 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

#mainCarouselBigThumb {
  border-right: 3px solid #000000 !important;
}

.carousel-sidebar {
  background: #FFFFFF !important;
  border-left: 3px solid #000000 !important;
}

#mainVideoTitle {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 26px !important;
  color: #000000 !important;
  letter-spacing: 0.6px !important;
}

#creatorLabelLink {
  background: #00F0FF !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  color: #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
}

#creatorLabelLink:hover {
  background: #FFE600 !important;
  transform: scale(1.05) !important;
}

#thumbnailsContainer > div,
#thumbnailsContainer img {
  border: 2px solid #000000 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
}

#carouselTagsContainer span,
#carouselTagsContainer div {
  background: #FFE600 !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
  color: #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
}

#peekLeftImg,
#peekRightImg {
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 16px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   10. STREAM & HIGHLIGHT CARDS (.glow-card / #calendarContent > div)
   ────────────────────────────────────────────────────────────────────────── */
.glow-card,
#calendarContent > div,
#twitchCalendarContent > div,
#kickCalendarContent > div {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
  will-change: transform;
}

.glow-card:hover,
#calendarContent > div:hover,
#twitchCalendarContent > div:hover,
#kickCalendarContent > div:hover {
  transform: translateY(-5px) rotate(-0.5deg) scale(1.01) !important;
  border-color: #000000 !important;
  box-shadow: 9px 9px 0px #000000, 9px 9px 0px #FFE600 !important;
}

.glow-card > div:first-child,
#calendarContent > div > div:first-child {
  border-bottom: 2.5px solid #000000 !important;
}

.glow-card h4,
#calendarContent h4 {
  color: #000000 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.glow-card:hover h4 {
  color: #FF2E63 !important;
}

.glow-card .text-\[9px\] {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
  border-radius: 6px !important;
}

.glow-card button,
#calendarContent button {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  border-radius: 8px !important;
  padding: 4px 14px !important;
  transition: all 0.18s ease !important;
}

.glow-card button:hover,
#calendarContent button:hover {
  background: #00F0FF !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

.glow-card a {
  color: #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   11. WEEKLY PODIUM / TOP CREATORS (#creatorsRealContent)
   ────────────────────────────────────────────────────────────────────────── */
#creatorsRealContent a,
.creator-grid-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateZ(0);
  will-change: transform;
}

#creatorsRealContent a:hover,
.creator-grid-card:hover {
  transform: translateY(-6px) rotate(-0.8deg) !important;
  box-shadow: 10px 10px 0px #000000 !important;
}

.clean-rank-badge {
  background: #FFE600 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  border-radius: 8px !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.8px !important;
  color: #000000 !important;
  padding: 3px 10px !important;
}

.clean-rank-badge span {
  color: #000000 !important;
}

#creatorsRealContent .card-rank-1,
#creatorsRealContent a:nth-child(1) {
  border: 4px solid #000000 !important;
  box-shadow: 7px 7px 0px #FFE600, 11px 11px 0px #000000 !important;
}

#creatorsRealContent .card-rank-2,
#creatorsRealContent a:nth-child(2) {
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #00F0FF, 10px 10px 0px #000000 !important;
}

#creatorsRealContent .card-rank-3,
#creatorsRealContent a:nth-child(3) {
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #FF2E63, 10px 10px 0px #000000 !important;
}

.info-text-area {
  background: #FFFFFF !important;
  border-top: 3px solid #000000 !important;
}

.info-text-area h4 {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.8px !important;
  color: #000000 !important;
}

.info-text-area p {
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

.steam-green-tag {
  background: #10E761 !important;
  color: #000000 !important;
  border: 1.5px solid #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
}

.steam-dark-tag {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 1.5px solid #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   12. COMIC FOOTER
   ────────────────────────────────────────────────────────────────────────── */
footer {
  background: #FFFFFF !important;
  border-top: 4.5px solid #000000 !important;
  color: #000000 !important;
  box-shadow: 0 -4px 0px rgba(0, 0, 0, 0.08) !important;
}

footer h4 {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  color: #000000 !important;
  border-bottom: 2.5px solid #FFE600 !important;
  display: inline-block !important;
  padding-bottom: 2px !important;
}

footer a {
  color: #1e293b !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  transition: all 0.18s ease !important;
}

footer a:hover {
  color: #FF2E63 !important;
  transform: translateX(4px) !important;
}

footer .text-neutral-500,
footer .text-neutral-400 {
  color: #334155 !important;
  font-weight: 600 !important;
}

footer .flex.items-center.space-x-2 span.w-2.h-2 {
  border: 1.5px solid #000000 !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
}

.skeleton-pulse {
  background: #e2e8f0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   13. VIDEO MODAL (POP-UP THEATRE)
   ────────────────────────────────────────────────────────────────────────── */
#videoModal {
  backdrop-filter: blur(8px) !important;
}

#videoModal > div {
  border: 4px solid #000000 !important;
  box-shadow: 12px 12px 0px #000000 !important;
  border-radius: 20px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   14. SECONDARY COMIC PAGES (CREATORS, SETUP, FEEDBACK, OVERLAYS, DOWNLOADS)
   ────────────────────────────────────────────────────────────────────────── */

/* Comic Theme Body for all secondary pages & channel page */
body.comic-page {
  background-color: var(--comic-paper) !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.075) 1.3px, transparent 1.3px) !important;
  background-size: 18px 18px !important;
  background-position: 0 0 !important;
  color: var(--comic-ink) !important;
  font-family: 'Comic Neue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  position: relative !important;
  min-height: 100vh !important;
  animation: none !important;
}

/* Full background manga texture covering 100% full rectangular area to every edge - completely flat, NO circle border-radius, NO blur */
body.comic-page::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0px !important; /* CRITICAL FIX: Erases 9999px circle inherited from style.css / channel.css! */
  filter: none !important;        /* CRITICAL FIX: Erases blur(80px) inherited from style.css / channel.css! */
  -webkit-filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  background-image: url('/images/manga-nav-bg.jpg') !important;
  background-repeat: repeat !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  opacity: 0.14 !important; /* Authentic, clearly visible manga panel background texture */
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
}

/* Kill any running animations, circles, or ambient blobs from style.css / channel.css body::after */
body.comic-page::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  border-radius: 0 !important;
  width: 0 !important;
  height: 0 !important;
  filter: none !important;
}

/* Kill any fixed background radial-gradients from style.css html::before */
html:has(body.comic-page)::before {
  display: none !important;
  content: none !important;
}





body.comic-page > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Active Navbar Tab Highlighting Per Page */
body.page-creators #homepageNav .nav-links a[href="/creators"],
body.page-setup #homepageNav .nav-links a[href="/setup"],
body.page-feedback #homepageNav .nav-links a[href="/feedback"],
body.page-overlays #homepageNav .nav-links a[href="/overlays"],
body.page-overlays #homepageNav .nav-links a[href="/overlays"],
body.page-downloads #homepageNav .nav-links a[href="/downloads"],
body.page-downloads #homepageNav .nav-links a[href="/download"] {
  background: #00F0FF !important; /* Marvel Cyan */
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

body.page-creators #homepageNav .nav-links a[href="/"]:not(:hover),
body.page-setup #homepageNav .nav-links a[href="/"]:not(:hover),
body.page-feedback #homepageNav .nav-links a[href="/"]:not(:hover),
body.page-overlays #homepageNav .nav-links a[href="/"]:not(:hover),
body.page-downloads #homepageNav .nav-links a[href="/"]:not(:hover) {
  background: #FFFFFF !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: #000000 !important;
}

/* Comic Headings */
body.comic-page h1,
body.comic-page h2,
body.comic-page h3,
body.comic-page .brand-font {
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 1px !important;
  color: #000000 !important;
}

/* Comic Page Containers & Panels */
body.comic-page .comic-card,
body.comic-page .overlay-card,
body.comic-page .creator-grid-card,
body.comic-page details,
body.comic-page .glass-card {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  border-radius: 16px !important;
  color: #000000 !important;
}

/* Creators Page Comic Styling */
body.page-creators .creator-grid-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-creators #registryRealContent,
body.page-creators #directoryView {
  overflow: visible !important;
  padding-bottom: 3.5rem !important;
  margin-bottom: 2rem !important;
}

body.page-creators .creator-grid-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 8px 8px 0px #FFE600, 12px 12px 0px #000000 !important;
}

/* Top 3 Podium Cards on Creators Page */
body.page-creators #podiumShowcase a.comic-podium-card-1,
body.page-creators #podiumShowcase a:nth-child(1) {
  border: 4px solid #000000 !important;
  box-shadow: 8px 8px 0px #FFE600, 14px 14px 0px #000000 !important;
  background: #FFFFFF !important;
}

body.page-creators #podiumShowcase a.comic-podium-card-2,
body.page-creators #podiumShowcase a:nth-child(2) {
  border: 3.5px solid #000000 !important;
  box-shadow: 7px 7px 0px #00F0FF, 12px 12px 0px #000000 !important;
  background: #FFFFFF !important;
}

body.page-creators #podiumShowcase a.comic-podium-card-3,
body.page-creators #podiumShowcase a:nth-child(3) {
  border: 3.5px solid #000000 !important;
  box-shadow: 7px 7px 0px #FF0055, 12px 12px 0px #000000 !important;
  background: #FFFFFF !important;
}

/* Avatar container: white comic panel backing instead of dark black */
body.page-creators .comic-avatar-box,
body.page-creators .creator-grid-card > div:first-child,
body.page-creators .creator-grid-card .aspect-square,
body.page-creators .creator-grid-card .bg-\[\#070709\] {
  background: #FFFFFF !important;
  border-bottom: 3.5px solid #000000 !important;
}

/* Comic Rank Badges (Pop-Art Pills) */
body.page-creators .comic-rank-badge,
body.page-creators .clean-rank-badge {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  padding: 3px 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 20 !important;
}

@media (min-width: 768px) {
  body.page-creators .comic-rank-badge,
  body.page-creators .clean-rank-badge {
    font-size: 15px !important;
    padding: 4px 12px !important;
    box-shadow: 3px 3px 0px #000000 !important;
  }
}

/* Rank 1: Gold Champion */
body.page-creators .comic-rank-badge.rank-1-badge,
body.page-creators .creator-grid-card [class*="bg-yellow-500"] {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

/* Rank 2: Cyan Silver Contender */
body.page-creators .comic-rank-badge.rank-2-badge,
body.page-creators .creator-grid-card [class*="bg-slate-300"] {
  background: #00F0FF !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

/* Rank 3: Red Hero */
body.page-creators .comic-rank-badge.rank-3-badge,
body.page-creators .creator-grid-card [class*="bg-amber-700"] {
  background: #FF0055 !important;
  color: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

/* Rank 4+: Crisp White Badge */
body.page-creators .comic-rank-badge.rank-other-badge,
body.page-creators .clean-rank-badge {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

/* Creator Card Info Area */
body.page-creators .info-text-area,
body.page-creators .spotlight-card-live,
body.page-creators .spotlight-card-offline {
  background: #FFFFFF !important;
  color: #000000 !important;
  padding: 16px 16px 24px 16px !important;
  box-sizing: border-box !important;
}

body.page-creators .creator-grid-card h4,
body.page-creators .creator-grid-card h3 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  letter-spacing: 0.8px !important;
  font-size: 1.25rem !important;
}

body.page-creators .info-text-area p.brand-accent {
  color: #DC2626 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

body.page-creators .info-text-area p.text-\[\#94a3b8\],
body.page-creators .info-text-area p[class*="text-[#94a3b8]"] {
  color: #475569 !important;
  font-weight: 700 !important;
}

/* Live / Offline & Total Clips Tags */
body.page-creators .steam-green-tag {
  background: #10E761 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
}

body.page-creators .info-text-area .bg-\[\#26262b\] {
  background: #000000 !important;
  color: #FFFFFF !important;
  border: 2px solid #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
}

body.page-creators .steam-dark-tag {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
}

/* Weekly Reset & Search Bar on Creators Page (Image 2 Style) */
body.page-creators .filter-card-container,
body.page-creators .mb-6.backdrop-blur-md,
body.page-creators div[class*="backdrop-blur-md"] {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 20px !important;
  color: #000000 !important;
}

body.page-creators .filter-label-text {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 16px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

body.page-creators .filter-pill-input {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 9999px !important;
  height: 38px !important;
  width: 240px !important;
  max-width: 240px !important;
  flex: 0 0 240px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  body.page-creators .filter-pill-input {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}

body.page-creators .filter-pill-input input,
body.page-creators #creatorSearchInput {
  color: #000000 !important;
  font-weight: 700 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-size: 13.5px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

body.page-creators .filter-pill-input input::placeholder,
body.page-creators #creatorSearchInput::placeholder {
  color: #64748b !important;
  font-weight: 600 !important;
}

body.page-creators .sort-pill-container {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 3px 5px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

body.page-creators .sort-pill-container::-webkit-scrollbar {
  display: none !important;
}

body.page-creators .sort-pill-btn {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13.5px !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  color: #64748b !important;
  padding: 4px 12px !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

body.page-creators .sort-pill-btn:not(.active):hover {
  color: #000000 !important;
  background: #FFFBE6 !important;
}

body.page-creators .sort-pill-btn.active {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

body.page-creators div[class*="backdrop-blur-md"] span,
body.page-creators div[class*="backdrop-blur-md"] svg {
  color: #000000 !important;
}

body.page-creators #btnNormalClips,
body.page-creators #btnCollabClips {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 9999px !important;
}

body.page-creators #btnNormalClips.bg-accent,
body.page-creators #btnCollabClips.bg-accent {
  background: #FFE600 !important;
  color: #000000 !important;
}

body.page-creators #resetCountdown {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-weight: 900 !important;
}

/* Setup Page Comic Styling */
body.page-setup h1 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  text-shadow: 3px 3px 0px #FFE600, 5px 5px 0px #000000 !important;
  letter-spacing: 1.5px !important;
}

body.page-setup .text-center.max-w-3xl.mx-auto.mb-10 p {
  color: #334155 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-weight: 700 !important;
}

body.page-setup .flex.flex-wrap.items-center.justify-center.gap-3.mb-10 {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 20px !important;
}

body.page-setup button[id^="setupTab"] {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: 0.8px !important;
  border-radius: 12px !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  transition: all 0.16s ease !important;
}

body.page-setup button[id^="setupTab"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
}

body.page-setup #setupTabYT.shadow-lg,
body.page-setup #setupTabTwitch.shadow-lg,
body.page-setup #setupTabKick.shadow-lg,
body.page-setup #setupTabDiscord.shadow-lg {
  background: #FFE600 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body.page-setup #setupContentArea > div {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-setup #setupContentArea h2 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 1.85rem !important;
  letter-spacing: 0.8px !important;
}

body.page-setup #setupContentArea h3 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.5px !important;
}

body.page-setup #setupContentArea p,
body.page-setup #setupContentArea li {
  color: #1e293b !important;
  font-weight: 600 !important;
}

body.page-setup #setupContentArea .bg-slate-950\/60 {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 14px !important;
}

body.page-setup #setupContentArea .w-6.h-6.rounded-full {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.page-setup #setupContentArea .w-10.h-10 {
  background: #FFE600 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  color: #000000 !important;
}

body.page-setup .command-box,
body.page-setup #setupContentArea .bg-black {
  background: #FFFBE6 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: inset 2px 2px 0px rgba(0,0,0,0.06), 3px 3px 0px #000000 !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

body.page-setup details {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  border-radius: 16px !important;
  margin-bottom: 1.25rem !important;
}

body.page-setup summary {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.5px !important;
  color: #000000 !important;
  padding: 1.25rem !important;
}

body.page-setup summary:hover {
  background: #FFFBE6 !important;
}

body.page-setup .copy-btn,
body.page-setup button.copy-command {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  transition: all 0.16s ease !important;
}

body.page-setup .copy-btn:hover,
body.page-setup button.copy-command:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
}

/* Feedback Page Comic Styling */
body.page-feedback h1 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  text-shadow: 3px 3px 0px #FFE600, 5px 5px 0px #000000 !important;
  letter-spacing: 1px !important;
}

body.page-feedback h2 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  letter-spacing: 0.8px !important;
  font-size: 1.75rem !important;
}

body.page-feedback p {
  color: #334155 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
  font-weight: 700 !important;
}

body.page-feedback .feedback-card-bg,
body.page-feedback .feedback-container,
body.page-feedback form {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-feedback input,
body.page-feedback textarea,
body.page-feedback select {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  border-radius: 12px !important;
  color: #000000 !important;
  font-weight: 700 !important;
  padding: 0.85rem 1rem !important;
}

body.page-feedback input:focus,
body.page-feedback textarea:focus,
body.page-feedback select:focus {
  border-color: #000000 !important;
  box-shadow: 4px 4px 0px #FFE600, 6px 6px 0px #000000 !important;
  outline: none !important;
}

body.page-feedback button[type="submit"] {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 1.3rem !important;
  letter-spacing: 1px !important;
  border-radius: 9999px !important;
  transition: all 0.16s ease !important;
  cursor: pointer !important;
}

body.page-feedback button[type="submit"]:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

body.page-feedback .feedback-discord-btn {
  background: #5865F2 !important;
  color: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
}

body.page-feedback .feedback-discord-btn:hover {
  background: #4752C4 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

body.page-feedback footer .social-link-discord {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline !important;
  transform: none !important;
}

body.page-feedback footer .social-link-discord:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Overlays Page Comic Styling */
body.page-overlays h1 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  text-shadow: 3px 3px 0px #FFE600, 5px 5px 0px #000000 !important;
  letter-spacing: 1.5px !important;
}

body.page-overlays h1 span.text-white {
  color: #000000 !important;
}

body.page-overlays .max-w-5xl.mx-auto.mb-8 {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-overlays .bg-amber-500\/10 {
  background: #FFFBE6 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: #000000 !important;
}

body.page-overlays .step-pill {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: #000000 !important;
  border-radius: 14px !important;
}

body.page-overlays .step-pill strong {
  color: #000000 !important;
}

body.page-overlays .step-pill span.text-slate-300,
body.page-overlays .step-pill span.text-slate-200 {
  color: #1e293b !important;
}

body.page-overlays .overlay-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-overlays .overlay-card:hover {
  border-color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 8px 8px 0px #FFE600, 12px 12px 0px #000000 !important;
}

body.page-overlays .overlay-card h3 {
  font-family: 'Bangers', cursive !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.5px !important;
  color: #000000 !important;
}

body.page-overlays .overlay-card a {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

body.page-overlays .preview-stage {
  border-bottom: 3.5px solid #000000 !important;
}

body.page-overlays .overlay-card .bg-\[\#070709\] {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 12px !important;
}

body.page-overlays .overlay-card input {
  color: #000000 !important;
  font-weight: 700 !important;
}

body.page-overlays .copy-btn {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  padding: 4px 12px !important;
}

body.page-overlays .copy-btn:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

/* Downloads Page Comic Styling */
body.page-downloads h1 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  text-shadow: 3px 3px 0px #FFE600, 5px 5px 0px #000000 !important;
  letter-spacing: 1.5px !important;
}

body.page-downloads h2,
body.page-downloads h3 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  letter-spacing: 0.8px !important;
}

body.page-downloads p,
body.page-downloads li {
  color: #334155 !important;
  font-weight: 600 !important;
}

body.page-downloads .download-hero-card,
body.page-downloads .glass-card,
body.page-downloads .quote-box {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-downloads .glass-card:hover {
  border-color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 8px 8px 0px #FFE600, 12px 12px 0px #000000 !important;
}

body.page-downloads .badge-certified {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 13px !important;
  letter-spacing: 0.8px !important;
}

body.page-downloads .icon-box {
  background: #FFE600 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  color: #000000 !important;
  border-radius: 12px !important;
}

body.page-downloads .btn-ms-store,
body.page-downloads .download-btn,
body.page-downloads a[download],
body.page-downloads a.btn-primary {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 1.25rem !important;
  letter-spacing: 1px !important;
  border-radius: 9999px !important;
  transition: all 0.16s ease !important;
  text-decoration: none !important;
}

body.page-downloads .btn-ms-store:hover,
body.page-downloads .download-btn:hover,
body.page-downloads a[download]:hover,
body.page-downloads a.btn-primary:hover {
  background: #00F0FF !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 7px 7px 0px #000000 !important;
  color: #000000 !important;
}

/* ==========================================================================
   Channel Page Comic Styling
   ========================================================================== */
body.page-channel #profileHeaderArea {
  border-bottom: 3.5px solid #000000 !important;
}

body.page-channel #profileHeaderArea button[onclick*="/creators"] {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  transition: all 0.16s ease !important;
}

body.page-channel #profileHeaderArea button[onclick*="/creators"]:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
}

body.page-channel #profAvatarContainer {
  border: 3.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  background: #FFE600 !important;
}

body.page-channel #profName {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #FFFFFF !important;
  text-shadow: 3px 3px 0px #000000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000 !important;
  letter-spacing: 1.5px !important;
}

body.page-channel #creatorPoints,
#creatorPoints {
  display: none !important;
}

body.page-channel #tabBtnYT,
body.page-channel #tabBtnTwitch,
body.page-channel #tabBtnKick {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  transition: all 0.16s ease !important;
}

body.page-channel #tabBtnYT:hover,
body.page-channel #tabBtnTwitch:hover,
body.page-channel #tabBtnKick:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
}

body.page-channel #channelRedirectBtn,
body.page-channel #openStatsBtn {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
  transition: all 0.16s ease !important;
}

body.page-channel #channelRedirectBtn:hover,
body.page-channel #openStatsBtn:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
}

body.page-channel .filter-card-container {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 20px !important;
}

body.page-channel .filter-label-text {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 13px !important;
  letter-spacing: 0.8px !important;
}

body.page-channel .filter-pill-input {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 12px !important;
}

body.page-channel .filter-pill-input input,
body.page-channel #datePickerBtnText,
body.page-channel #levelPickerBtnText {
  color: #000000 !important;
  font-weight: 700 !important;
  font-family: 'Comic Neue', cursive, sans-serif !important;
}

body.page-channel .calendar-popover,
body.page-channel .level-dropdown-popover {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 18px !important;
  color: #000000 !important;
}

body.page-channel .calendar-title {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 1.25rem !important;
}

body.page-channel .cal-day.current-month {
  color: #000000 !important;
  font-weight: 700 !important;
}

body.page-channel .cal-day.selected {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: 900 !important;
}

body.page-channel .level-dropdown-item {
  color: #000000 !important;
  font-weight: 700 !important;
}

body.page-channel .level-dropdown-item:hover {
  background: #FFFBE6 !important;
}

body.page-channel .level-dropdown-item.active {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: 900 !important;
}

body.page-channel .sort-pill-container {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  border-radius: 12px !important;
}

body.page-channel .sort-pill-btn {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  color: #64748b !important;
  transition: all 0.16s ease !important;
}

body.page-channel .sort-pill-btn.active {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

body.page-channel .sort-pill-btn:not(.active):hover {
  color: #000000 !important;
  background: #FFFBE6 !important;
}

body.page-channel .toggle-text {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
}

body.page-channel .toggle-slider {
  border: 2px solid #000000 !important;
  background-color: #e2e8f0 !important;
}

body.page-channel .toggle-switch input:checked + .toggle-slider {
  background-color: #FFE600 !important;
  border-color: #000000 !important;
}

body.page-channel .premium-clip-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 20px !important;
  color: #000000 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-channel .premium-clip-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 8px 8px 0px var(--level-color, #FFE600), 12px 12px 0px #000000 !important;
}

body.page-channel .premium-clip-card .clip-thumb {
  border-bottom: 3.5px solid #000000 !important;
}

body.page-channel .premium-clip-card h4 {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.5px !important;
}

body.page-channel .premium-clip-card span,
body.page-channel .premium-clip-card p {
  color: #334155 !important;
  font-weight: 600 !important;
}

body.page-channel .premium-clip-card button {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 8px !important;
  color: #000000 !important;
}

body.page-channel .premium-clip-card button:hover {
  background: #FFE600 !important;
}

/* YouTube & Platform Action Buttons on Channel Clips */
body.page-channel .comic-platform-btn.comic-yt-btn,
body.page-channel a[title="Watch on YouTube"],
body.page-channel .premium-clip-card a[title="Watch on YouTube"] {
  background: #FF0000 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 8px !important;
  transition: all 0.16s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

body.page-channel .comic-platform-btn.comic-yt-btn:hover,
body.page-channel a[title="Watch on YouTube"]:hover,
body.page-channel .premium-clip-card a[title="Watch on YouTube"]:hover {
  background: #CC0000 !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

body.page-channel .comic-platform-btn.comic-yt-btn svg,
body.page-channel a[title="Watch on YouTube"] svg {
  width: 22px !important;
  height: 16px !important;
  display: block !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) !important;
}

body.page-channel .comic-platform-btn.comic-twitch-btn,
body.page-channel a[title="Watch on Twitch"] {
  background: #9146FF !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 8px !important;
  transition: all 0.16s ease !important;
  cursor: pointer !important;
}

body.page-channel .comic-platform-btn.comic-twitch-btn svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

body.page-channel .comic-platform-btn.comic-kick-btn,
body.page-channel a[title="Watch on Kick"] {
  background: #00E701 !important;
  color: #000000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 8px !important;
  transition: all 0.16s ease !important;
  cursor: pointer !important;
}

body.page-channel .comic-platform-btn.comic-kick-btn svg {
  color: #000000 !important;
  fill: #000000 !important;
}

body.page-channel .copy-clip-btn {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 8px !important;
  padding: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.16s ease !important;
}

body.page-channel .copy-clip-btn:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

body.page-channel .copy-clip-btn svg {
  stroke: #000000 !important;
  color: #000000 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Collab Deck Styling on Creators Page */
body.page-creators .collab-deck .deck-card {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
}

body.page-creators .collab-deck .deck-card .bg-\[\#070709\] {
  background: #FFFFFF !important;
  border-bottom: 2.5px solid #000000 !important;
}

body.page-creators .collab-deck .deck-card .bg-\[\#0a0a0f\] {
  background: #FFFFFF !important;
  color: #000000 !important;
}

body.page-creators .collab-deck .deck-count-badge {
  font-family: 'Bangers', cursive, sans-serif !important;
  background: #FF0055 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
  letter-spacing: 0.5px !important;
}






/* ==========================================================================
   Profile Page Comic Styling (body.page-profile)
   ========================================================================== */
body.page-profile {
  background-color: var(--comic-paper) !important;
  color: var(--comic-ink) !important;
  font-family: 'Comic Neue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Active Profile Avatar Pill in Comic Navbar */
body.page-profile #homepageNav #googleAuthBtn[href="/profile"],
body.page-profile #homepageNav a[href="/profile"]#googleAuthBtn {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #FFE600, 5px 5px 0px #000000 !important;
  transform: scale(1.08) !important;
}

/* Unauthenticated Card */
body.page-profile #unauthCard {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-profile #unauthCard h2 {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 2rem !important;
  letter-spacing: 1px !important;
  color: #000000 !important;
  text-shadow: 2px 2px 0px #FFE600 !important;
}

body.page-profile #unauthCard p {
  color: #334155 !important;
  font-weight: 600 !important;
}

body.page-profile #unauthCard button {
  background: #ED1D24 !important;
  color: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.15rem !important;
  letter-spacing: 1px !important;
  border-radius: 9999px !important;
  transition: all 0.16s ease !important;
}

body.page-profile #unauthCard button:hover {
  background: #00F0FF !important;
  color: #000000 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

/* Profile Header Card */
body.page-profile #profileContainer > div:first-child,
body.page-profile .profile-header-card,
body.page-profile #profileContainer > .profile-header-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

body.page-profile #profileBanner {
  border-bottom: 3.5px solid #000000 !important;
  background-color: transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

body.page-profile #profileBanner > div.absolute.inset-0,
body.page-profile #profileBannerOverlay {
  display: none !important;
}

body.page-profile #profileBannerImg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Overplay Studio OBS Overlays Callout Button */
body.page-profile #profileBanner a[href*="studio.overplay.in"] {
  background: #00F0FF !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  transition: all 0.15s ease !important;
}

body.page-profile #profileBanner a[href*="studio.overplay.in"]:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

body.page-profile #profileBanner a[href*="studio.overplay.in"] span {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Platform Preview Tabs in Banner */
body.page-profile #profileBanner .flex.items-center.gap-1\.5 {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 16px !important;
  padding: 4px !important;
}

body.page-profile #tabBtnYT,
body.page-profile #tabBtnTwitch,
body.page-profile #tabBtnKick {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.6px !important;
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  color: #000000 !important;
  transition: all 0.15s ease !important;
}

body.page-profile #tabBtnYT:hover,
body.page-profile #tabBtnTwitch:hover,
body.page-profile #tabBtnKick:hover {
  background: #FFFBE6 !important;
  border-color: #000000 !important;
}

body.page-profile #tabBtnYT.bg-red-600\/20,
body.page-profile [data-platform="youtube"] #tabBtnYT {
  background: #ED1D24 !important;
  color: #FFFFFF !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}
body.page-profile [data-platform="youtube"] #tabBtnYT svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

body.page-profile [data-platform="twitch"] #tabBtnTwitch {
  background: #9146FF !important;
  color: #FFFFFF !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}
body.page-profile [data-platform="twitch"] #tabBtnTwitch svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

body.page-profile [data-platform="kick"] #tabBtnKick {
  background: #00E701 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}
body.page-profile [data-platform="kick"] #tabBtnKick svg {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Avatar Frame & Glow */
body.page-profile #profileAvatarImg {
  border: 4px solid #000000 !important;
  box-shadow: 5px 5px 0px #000000 !important;
  background-color: #FFFDF2 !important;
}

body.page-profile #avatarGlow {
  display: none !important;
}

/* Profile Name & Handle */
body.page-profile #profileName {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #000000 !important;
  font-size: 2.25rem !important;
  letter-spacing: 1.5px !important;
  text-shadow: 2.5px 2.5px 0px #FFE600 !important;
  -webkit-text-stroke: 1px #000000 !important;
  line-height: 1.1 !important;
}

body.page-profile #profileHandle {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  color: #475569 !important;
  font-size: 14px !important;
}

body.page-profile #profileLiveBadge.hidden,
body.page-profile #profileLiveBadge:empty {
  display: none !important;
}

body.page-profile #profileLiveBadge:not(.hidden) {
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
  background: #FF0000 !important;
  color: #FFFFFF !important;
}

body.page-profile #profileTotalClipsBadge,
body.page-profile #profileSubscribersBadge {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
  color: #000000 !important;
}

body.page-profile #profileSubscribersBadge {
  color: #dc2626 !important;
}

body.page-profile #subDot {
  display: none !important;
}

/* Public Page & Sign Out Buttons */
body.page-profile #publicChannelBtn {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.6px !important;
  font-size: 14px !important;
  border-radius: 9999px !important;
  transition: all 0.15s ease !important;
}

body.page-profile #publicChannelBtn:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

body.page-profile #publicChannelBtn svg {
  color: #000000 !important;
}

body.page-profile #signOutBtn {
  background: #FFFFFF !important;
  color: #dc2626 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.6px !important;
  font-size: 14px !important;
  border-radius: 9999px !important;
  transition: all 0.15s ease !important;
}

body.page-profile #signOutBtn:hover {
  background: #dc2626 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

body.page-profile #signOutBtn:hover svg {
  color: #FFFFFF !important;
}

/* Dashboard Cards (Channel Overview, Preferences, Rewind, Partners, Stream Automation, etc.) */
body.page-profile .dash-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-profile .sub-card {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 14px !important;
  color: #000000 !important;
}

body.page-profile .dash-card h3,
body.page-profile .dash-card h4,
body.page-profile #overviewTitle,
body.page-profile #nightbotCardTitle,
body.page-profile #unlinkedTitle {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.8px !important;
  color: #000000 !important;
}

body.page-profile .dash-card p,
body.page-profile .dash-card li,
body.page-profile #unlinkedDesc {
  color: #334155 !important;
  font-weight: 600 !important;
}

body.page-profile .dash-card .text-slate-400,
body.page-profile .dash-card .text-slate-300,
body.page-profile .dash-card .text-slate-200 {
  color: #1e293b !important;
}

body.page-profile .dash-card .bg-white\/\[0\.015\],
body.page-profile .dash-card .bg-white\/5 {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
}

body.page-profile .dash-card .bg-white\/\[0\.015\] span,
body.page-profile .dash-card .bg-white\/5 span {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Card Icon Badges */
body.page-profile .dash-card .w-9.h-9,
body.page-profile .dash-card .w-8.h-8,
body.page-profile .dash-card .w-7.h-7,
body.page-profile #nightbotIconBox,
body.page-profile #overviewTitleIcon,
body.page-profile #discordIconBox,
body.page-profile #teamIconBox,
body.page-profile #collabIconContainer {
  background: #FFE600 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 10px !important;
  color: #000000 !important;
}

body.page-profile .dash-card .w-9.h-9 svg,
body.page-profile .dash-card .w-8.h-8 svg,
body.page-profile .dash-card .w-7.h-7 svg {
  color: #000000 !important;
}

/* Status & Role Badges */
body.page-profile #overviewStatusBadge,
body.page-profile #nightbotBadge,
body.page-profile #webhookBadge,
body.page-profile #teamCountBadge,
body.page-profile #collabBadge,
body.page-profile #detailAuthBadge {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
}

/* Stat numbers */
body.page-profile #detailTotalClips,
body.page-profile #detailSubscribers,
body.page-profile #sliderValNum,
body.page-profile #rewindCalcResult {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.6rem !important;
  color: #ED1D24 !important;
  letter-spacing: 1px !important;
}

/* Input Fields & Selects */
body.page-profile .dash-input,
body.page-profile input[type="text"],
body.page-profile input[type="url"],
body.page-profile select {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: inset 2px 2px 0px rgba(0,0,0,0.06), 2.5px 2.5px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

body.page-profile input::placeholder {
  color: #94a3b8 !important;
}

/* Platform preference buttons inside preferences card */
body.page-profile #settingsCard .flex.items-center.gap-1 {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 12px !important;
}

body.page-profile #prefBtnYT,
body.page-profile #prefBtnTwitch,
body.page-profile #prefBtnKick {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  color: #000000 !important;
  transition: all 0.15s ease !important;
}

body.page-profile #prefBtnYT:hover,
body.page-profile #prefBtnTwitch:hover,
body.page-profile #prefBtnKick:hover {
  background: #FFFBE6 !important;
  border-color: #000000 !important;
}

/* Stream Automation & Bot Selection Cards */
body.page-profile .bot-card-row {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 14px !important;
  transition: all 0.18s ease !important;
}

body.page-profile .bot-card-row.is-active {
  background: #FFFBE6 !important;
  border: 3px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #FFE600, 5.5px 5.5px 0px #000000 !important;
}

body.page-profile .bot-card-row span.text-white {
  color: #000000 !important;
  font-weight: 800 !important;
}

body.page-profile .bot-card-row p.text-slate-400 {
  color: #475569 !important;
}

body.page-profile .bot-toggle-track {
  background-color: #cbd5e1 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

body.page-profile .bot-real-toggle input:checked + .bot-toggle-track {
  background-color: #22c55e !important;
}

/* Action Buttons & Copy Buttons */
body.page-profile button[id^="copy"],
body.page-profile #SaveDelayBTN,
body.page-profile #saveWebhookBtn,
body.page-profile #testOverlayBtn,
body.page-profile #collabInviteBtn,
body.page-profile #unlinkedActionBtn,
body.page-profile button.copy-btn,
body.page-profile button.copy-command {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.6px !important;
  font-size: 14px !important;
  border-radius: 9999px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

body.page-profile button[id^="copy"]:hover,
body.page-profile #SaveDelayBTN:hover,
body.page-profile #saveWebhookBtn:hover,
body.page-profile #testOverlayBtn:hover,
body.page-profile #collabInviteBtn:hover,
body.page-profile #unlinkedActionBtn:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

/* Rewind presets */
body.page-profile .rewind-preset-btn {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  color: #000000 !important;
  border-radius: 8px !important;
}

body.page-profile .rewind-preset-btn:hover {
  background: #FFFBE6 !important;
}

body.page-profile .rewind-preset-btn.active-preset {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

/* Partner Cards */
body.page-profile .partner-banner-btn {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 14px !important;
}

body.page-profile .partner-banner-btn:hover {
  background: #FFFBE6 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

/* Modals */
body.page-profile #platformModal > div.relative,
body.page-profile #clientDownloadModal > div.relative {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 8px 8px 0px #000000 !important;
  border-radius: 22px !important;
  color: #000000 !important;
}

body.page-profile #platformModal h3,
body.page-profile #clientDownloadModal h3 {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.5rem !important;
  color: #000000 !important;
}



/* Text Color Corrections for Light Comic Backgrounds */
body.page-profile .dash-card .text-white,
body.page-profile .dash-card span.text-white,
body.page-profile .dash-card div.text-white,
body.page-profile .dash-card p.text-white,
body.page-profile .dash-card label.text-white,
body.page-profile .dash-card h3.text-white,
body.page-profile .dash-card h4.text-white {
  color: #000000 !important;
}

body.page-profile .profile-header-card .text-white,
body.page-profile #profileContainer > div:first-child .text-white {
  color: #000000 !important;
}

body.page-profile .dash-card .bg-slate-900\/90,
body.page-profile .dash-card .bg-slate-900 {
  background: #FFFBE6 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  color: #000000 !important;
}

body.page-profile .dash-card .bg-slate-900\/90 strong,
body.page-profile .dash-card .bg-slate-900 strong {
  color: #000000 !important;
}

body.page-profile code {
  background: #FFFBE6 !important;
  border: 1.5px solid #000000 !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
}

/* Team Members List in Comic Style */
body.page-profile #teamMembersList > div {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
}

body.page-profile #teamMembersList > div span.text-slate-200 {
  color: #000000 !important;
  font-weight: 800 !important;
}

body.page-profile #teamMembersList > div p.text-slate-400 {
  color: #475569 !important;
}

body.page-profile #teamMembersList img {
  border: 2px solid #000000 !important;
}

/* Collab Friends Lists in Comic Style */
body.page-profile #acceptedCollabList > div,
body.page-profile #pendingCollabList > div {
  background: #FFFDF2 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 12px !important;
}

body.page-profile #acceptedCollabList > div .text-white,
body.page-profile #pendingCollabList > div .text-white {
  color: #000000 !important;
  font-weight: 800 !important;
}

body.page-profile #acceptedCollabList > div .text-slate-400,
body.page-profile #pendingCollabList > div .text-slate-400 {
  color: #475569 !important;
}

body.page-profile #acceptedCollabList img,
body.page-profile #pendingCollabList img {
  border: 2px solid #000000 !important;
}



/* ==========================================================================
   PROFILE PAGE HIGH-CONTRAST READABILITY & VISIBILITY BOOST
   ========================================================================== */

/* Card Headings & Titles */
body.page-profile .dash-card h3,
body.page-profile .dash-card h4,
body.page-profile #overviewTitle,
body.page-profile #nightbotCardTitle,
body.page-profile #unlinkedTitle {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.55rem !important;
  letter-spacing: 1px !important;
  color: #000000 !important;
  line-height: 1.2 !important;
  text-shadow: 1.5px 1.5px 0px #FFE600 !important;
}

/* Subheadings & descriptions - deep dark charcoal, bold, easily readable */
body.page-profile .dash-card p,
body.page-profile .dash-card li,
body.page-profile #unlinkedDesc,
body.page-profile #nightbotCardDesc {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body.page-profile .dash-card .text-slate-400,
body.page-profile .dash-card .text-slate-300,
body.page-profile .dash-card .text-slate-200 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Stat Highlights (Clips & Subscribers) */
body.page-profile .dash-card .sub-card {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

body.page-profile #rowSubscribers,
body.page-profile .grid-cols-2 .sub-card {
  background: #FFFBE6 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

body.page-profile .grid-cols-2 .sub-card span.text-\[11px\],
body.page-profile #labelSubscribers {
  color: #000000 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.page-profile #detailTotalClips,
body.page-profile #detailSubscribers {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 2.35rem !important;
  color: #ED1D24 !important;
  letter-spacing: 1.5px !important;
  text-shadow: 2px 2px 0px #FFE600 !important;
  line-height: 1.1 !important;
}

/* Table Rows & Details List */
body.page-profile .dash-card .space-y-1\.5 > div,
body.page-profile .dash-card .bg-white\/\[0\.015\],
body.page-profile .dash-card .bg-white\/5 {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
}

/* Left label: Crisp black */
body.page-profile .dash-card .space-y-1\.5 span.text-slate-400,
body.page-profile .dash-card span.text-slate-400 {
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* Right value: Crisp black */
body.page-profile #detailChannelName,
body.page-profile .dash-card span.text-white {
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* Channel ID */
body.page-profile #detailChannelId {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  background: #FFFBE6 !important;
  border: 1.5px solid #000000 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* Discord integration status */
body.page-profile #detailWebhookStatus {
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* Bot Setup Area */
body.page-profile #nightbotCommandArea .bg-red-500\/15 {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-family: 'Bangers' !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
}

body.page-profile #nightbotCommandArea label {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.page-profile #nightbotCommandArea p {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Bot card rows */
body.page-profile .bot-card-row {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

body.page-profile .bot-card-row.is-active {
  background: #FFFBE6 !important;
  border: 3px solid #000000 !important;
  box-shadow: 4px 4px 0px #FFE600, 6px 6px 0px #000000 !important;
}

body.page-profile .bot-card-row .w-8.h-8 {
  background: #FFE600 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  flex-shrink: 0 !important;
}

body.page-profile .bot-card-row .w-8.h-8 img {
  width: 22px !important;
  height: 22px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.page-profile #activeBotIconBadge {
  background: #FFE600 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 8px !important;
  padding: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

body.page-profile #activeBotIconBadge img {
  width: 18px !important;
  height: 18px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.page-profile .bot-card-row .text-xs.font-bold {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.8px !important;
  color: #000000 !important;
}

body.page-profile .bot-card-row p {
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.page-profile .bot-card-row span.rounded-full {
  font-family: 'Bangers' !important;
  font-size: 12px !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
  color: #000000 !important;
}

/* Bot command box */
body.page-profile #nightbotInput,
body.page-profile #obsOverlayInput,
body.page-profile #nightbotCommandArea input {
  background: #FFFBE6 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: inset 2px 2px 0px rgba(0,0,0,0.06), 2.5px 2.5px 0px #000000 !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

body.page-profile #copyNightbotBtn,
body.page-profile #copyObsOverlayBtn,
body.page-profile button[id^="copy"] {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 15px !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
}

/* Profile Preferences Card */
body.page-profile #settingsCard .sub-card {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

body.page-profile #settingsCard .text-xs.font-bold {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.page-profile #settingsCard .text-\[11px\] {
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.page-profile #prefBtnYT,
body.page-profile #prefBtnTwitch,
body.page-profile #prefBtnKick {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

/* Rewind Card */
body.page-profile #clipRewindCard p {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.page-profile #clipRewindCard .rewind-preset-btn {
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  font-family: 'Bangers' !important;
  font-size: 14px !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Top Banner Profile Stats & Badges */
body.page-profile #profileTotalClipsBadge,
body.page-profile #profileSubscribersBadge {
  background: #FFFBE6 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #000000 !important;
}

body.page-profile #headerClipCount {
  color: #000000 !important;
  font-weight: 900 !important;
}

body.page-profile #headerSubCount {
  color: #ED1D24 !important;
  font-weight: 900 !important;
}

body.page-profile #profileHandle {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  color: #000000 !important;
  font-size: 15px !important;
  background: #FFFBE6 !important;
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

body.page-profile #profileLiveBadge.hidden,
body.page-profile #profileLiveBadge[style*="display: none"],
body.page-profile #profileLiveBadge:empty {
  display: none !important;
}

body.page-profile #profileLiveBadge:not(.hidden) {
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.8px !important;
  background: #FF0000 !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  padding: 4px 12px !important;
}

/* Symmetrical Sub-Cards & Grids Across All Tabs (Overview, Bot Setup, Rewind, Team, Collab) */
body.page-profile .grid-cols-1.lg\:grid-cols-2 .sub-card {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  min-height: 100% !important;
}

body.page-profile .grid-cols-1.lg\:grid-cols-2 .sub-card .text-xs.font-bold {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.8px !important;
  color: #000000 !important;
}

body.page-profile .grid-cols-1.lg\:grid-cols-2 .sub-card p {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Rewind Card Symmetrical Layout */
body.page-profile #sliderValNum,
body.page-profile #sliderValNum2 {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 2rem !important;
  color: #ED1D24 !important;
  letter-spacing: 1px !important;
  text-shadow: 1.5px 1.5px 0px #FFE600 !important;
}

body.page-profile #rewindCalcResult {
  font-family: 'JetBrains Mono', monospace !important;
  color: #dc2626 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

body.page-profile .rewind-slider {
  background: #000000 !important;
  border: 1.5px solid #000000 !important;
  height: 8px !important;
}

body.page-profile .rewind-slider::-webkit-slider-thumb {
  background: #FFE600 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  width: 20px !important;
  height: 20px !important;
}

/* Team Management & Collab Inputs & Buttons */
body.page-profile #teamMemberRole,
body.page-profile #teamMemberEmail,
body.page-profile #collabHandleInput,
body.page-profile #discordWebhookInput {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  box-shadow: inset 2px 2px 0px rgba(0,0,0,0.06), 2.5px 2.5px 0px #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

body.page-profile #addMemberBtn,
body.page-profile #SaveDelayBTN,
body.page-profile #saveWebhookBtn,
body.page-profile #collabInviteBtn {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.8px !important;
  font-size: 15px !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  transition: all 0.15s ease !important;
}

body.page-profile #addMemberBtn:hover,
body.page-profile #SaveDelayBTN:hover,
body.page-profile #saveWebhookBtn:hover,
body.page-profile #collabInviteBtn:hover {
  background: #00F0FF !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}

/* Active Bot Showcase Box Comic Styling */
body.page-profile #activeBotShowcaseBox {
  background: #0d1117 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 16px !important;
}




/* Floating particles removed from sponsor banner */
#sponsorParticles,
#sponsorParticlesCanvas {
  display: none !important;
}