/* ==========================================================================
   OVERPLAY DYNAMIC THEME SYSTEM (theme-dynamic.css)
   Binds database-driven active color palette to site components via CSS variables.
   ========================================================================== */

:root {
  --theme-base: #1A1A1F;
  --theme-card: #2D2B55;
  --theme-primary: #6A5ACD;
  --theme-secondary: #A678B9;
  --theme-cream: #F0D9B5;
  --theme-cta: #F4A62A;
  --theme-subtext: #cbd5e1;

  --bg: var(--theme-base);
  --accent: var(--theme-primary);
  --accent-dark: var(--theme-card);
  --accent-light: var(--theme-secondary);
  --accent-amber: var(--theme-cta);
  --accent-cream: var(--theme-cream);
  --accent-rgb: 106, 90, 205;

  --comic-paper: var(--theme-base);
  --comic-card-bg: var(--theme-card);
  --comic-paper-warm: var(--theme-card);
  --comic-ink: var(--theme-cream);
  --comic-ink-light: #FFFFFF;
  --comic-text-sub: var(--theme-secondary);
  --comic-yellow: var(--theme-cta);
  --comic-yellow-hover: var(--theme-cta);
  --comic-cyan: var(--theme-primary);
  --comic-cyan-hover: var(--theme-primary);
  --comic-pink: var(--theme-secondary);
  --comic-pink-hover: var(--theme-secondary);
  --comic-green: var(--theme-primary);
  --comic-purple: var(--theme-primary);
  --comic-orange: var(--theme-cta);
  --color-base: var(--theme-base);
  --color-surface: var(--theme-card);
  --color-primary: var(--theme-primary);
  --color-secondary: var(--theme-secondary);
  --color-cream: var(--theme-cream);
  --color-amber: var(--theme-cta);
}

/* Page Base */
body,
body.comic-page,
body.page-setup,
body.page-overlays,
body.page-about,
body.page-creators,
body.page-clippers,
body.page-feedback,
body.page-profile,
body.page-channel {
  background-color: var(--theme-base) !important;
  color: var(--theme-cream) !important;
}

/* Primary Site Navbar - MATCHES HOMEPAGE ON ALL PAGES */
#homepageNav,
nav#homepageNav,
nav.sticky {
  background: var(--theme-card) !important;
  border-bottom: 3.5px solid #000000 !important;
}

#homepageNav .nav-links a {
  background: var(--theme-base) !important;
  color: var(--theme-cream) !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 5px 16px !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Universal Navbar State across ALL pages */
#homepageNav .nav-links a:not(.nav-link-active) {
  background: var(--theme-base) !important;
  color: var(--theme-cream) !important;
  box-shadow: 3px 3px 0px #000000 !important;
  transform: none !important;
}

#homepageNav .nav-links a:not(.nav-link-active):hover {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
  transform: translateY(-2px) scale(1.05) !important;
}

#homepageNav .nav-links a.nav-link-active {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  transform: translateY(-1px) !important;
}

#homepageNav .nav-links a.nav-link-active:hover {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 4.5px 4.5px 0px #000000 !important;
  transform: translateY(-2px) scale(1.05) !important;
}

/* When on /profile, highlight Profile avatar */
body.page-profile #homepageNav #googleAuthBtn[href="/profile"] {
  border: 2.5px solid var(--theme-cta) !important;
  box-shadow: 0 0 0 2px #000000, 3px 3px 0px #000000 !important;
}

/* Sign In & CTA Buttons */
.comic-signin-btn,
.hero-comic-btn-primary,
button.comic-action-btn-primary,
.cta-button-primary {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

.comic-signin-btn:hover,
.hero-comic-btn-primary:hover {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
}

.hero-comic-btn-secondary {
  background: var(--theme-card) !important;
  color: var(--theme-cream) !important;
}

/* Hero Pill & Headings */
.hero-comic-pill {
  background: var(--theme-base) !important;
  color: var(--theme-cta) !important;
  border-color: var(--theme-cta) !important;
}

.hero-comic-heading,
.comic-hero-card h1,
body.page-setup h1,
body.page-overlays h1,
body.page-about h1 {
  color: var(--theme-cream) !important;
  text-shadow: 2.5px 2.5px 0px var(--theme-primary), 5px 5px 0px #000000 !important;
}

body.page-overlays h1 span.text-white {
  color: var(--theme-cream) !important;
}

.hero-comic-subtext,
.comic-hero-card p {
  color: var(--theme-subtext) !important;
}

/* Homepage Sponsor Banner & Hero Bot Chips */
#sponsorBanner {
  background: linear-gradient(135deg, var(--theme-card) 0%, var(--theme-base) 45%, var(--theme-card) 100%) !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

#sponsorBanner::after {
  background: radial-gradient(circle at 10% 50%, var(--theme-cta) 0%, transparent 45%), radial-gradient(circle at 90% 50%, var(--theme-primary) 0%, transparent 45%) !important;
  opacity: 0.16 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

.hero-bot-chip {
  background: var(--theme-card) !important;
  color: var(--theme-cream) !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
}

.hero-bot-chip:hover {
  background: var(--theme-base) !important;
}

.hero-bot-chip-label {
  color: var(--theme-cream) !important;
}

/* Container Cards & Panels */
.comic-glow-card,
.creator-card-comic,
.comic-hero-card,
.about-section-card,
.setup-main-card,
body.page-setup #setupContentArea > div,
body.page-overlays .max-w-5xl,
body.page-overlays .overlay-card,
.auth-box-comic,
body.page-profile .dash-card,
body.page-profile #profileContainer > div:first-child,
body.page-profile .profile-header-card {
  background: var(--theme-card) !important;
  color: var(--theme-cream) !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

/* Sub-Cards, Step Boxes, Inner Pills */
.setup-step-box,
.about-sub-card,
body.page-overlays .step-pill,
body.page-overlays .bg-amber-500\/10,
body.page-overlays .overlay-card .bg-\[\#070709\],
body.page-profile .sub-card,
body.page-profile .bot-card-row {
  background: var(--theme-base) !important;
  color: var(--theme-cream) !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
}

/* OBS Overlays Page Setup Guide & Tips Box High-Contrast Visibility */
body.page-overlays .max-w-5xl {
  background: var(--theme-card) !important;
}

body.page-overlays .max-w-5xl > div:first-child {
  background: var(--theme-base) !important;
  border: 2px solid var(--theme-cta) !important;
  color: var(--theme-cream) !important;
}

body.page-overlays .max-w-5xl > div:first-child div,
/* Overlays Page Setup Guide Box High Contrast */
.overlay-guide-container,
body.page-overlays .max-w-5xl,
body.page-overlays .overlay-guide-container {
  background: var(--theme-card) !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  color: var(--theme-cream) !important;
}

.overlay-tip-box,
body.page-overlays .overlay-tip-box,
body.page-overlays .max-w-5xl > div:first-child {
  background: var(--theme-base) !important;
  border: 2.5px solid var(--theme-cta) !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: var(--theme-cream) !important;
}

.overlay-tip-title,
body.page-overlays .overlay-tip-title,
body.page-overlays .max-w-5xl > div:first-child span.font-bold {
  color: var(--theme-cta) !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 0.8px !important;
  font-size: 15px !important;
}

.overlay-tip-text,
body.page-overlays .overlay-tip-text,
body.page-overlays .max-w-5xl > div:first-child p,
body.page-overlays .max-w-5xl > div:first-child span {
  color: var(--theme-cream) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.overlay-badge,
body.page-overlays .overlay-badge,
body.page-overlays .max-w-5xl > div:first-child strong {
  background: var(--theme-card) !important;
  color: var(--theme-cta) !important;
  border: 1.5px solid var(--theme-primary) !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

.step-pill,
body.page-overlays .step-pill {
  background: var(--theme-base) !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  color: var(--theme-cream) !important;
}

.step-pill .step-num,
body.page-overlays .step-pill .step-num,
body.page-overlays .step-pill span.w-5.h-5 {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  border: 1.5px solid #000000 !important;
  font-weight: 900 !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
}

.step-pill .step-desc,
body.page-overlays .step-pill .step-desc,
body.page-overlays .step-pill span:not(.w-5):not(.step-num) {
  color: var(--theme-cream) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

.step-pill .step-desc strong,
body.page-overlays .step-pill strong {
  color: var(--theme-cta) !important;
  font-weight: 800 !important;
}

.step-pill .step-dim,
body.page-overlays .step-pill .step-dim,
body.page-overlays .step-pill span.text-slate-400 {
  color: var(--theme-subtext) !important;
  font-weight: 500 !important;
}
  color: var(--theme-base) !important;
  border: 1.5px solid #000000 !important;
  font-weight: 900 !important;
}

/* Streamer Setup Guide Page Step Box High-Contrast Visibility */
body.page-setup #setupContentArea .setup-step-box,
body.page-setup .setup-step-box {
  background: var(--theme-base) !important;
  border: 2.5px solid #000000 !important;
}

body.page-setup #setupContentArea .setup-step-box p,
body.page-setup #setupContentArea .setup-step-desc,
body.page-setup .setup-step-desc,
body.page-setup .setup-step-box p,
body.page-setup #setupContentArea p {
  color: var(--theme-subtext) !important;
  font-weight: 700 !important;
}

body.page-setup #setupContentArea .setup-step-box li,
body.page-setup .setup-step-box li,
body.page-setup #setupContentArea li {
  color: var(--theme-subtext) !important;
  font-weight: 600 !important;
}

body.page-setup #setupContentArea .setup-step-box strong,
body.page-setup .setup-step-box strong,
body.page-setup #setupContentArea strong {
  color: var(--theme-cream) !important;
  font-weight: 800 !important;
}

body.page-setup .setup-step-num,
body.page-setup #setupContentArea .setup-step-num {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  border: 2px solid #000000 !important;
  font-weight: 900 !important;
}

body.page-setup .setup-badge-tag,
body.page-setup #setupContentArea .setup-badge-tag {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #000000 !important;
}

body.page-setup #setupContentArea h2,
body.page-setup #setupContentArea h3,
body.page-setup .setup-step-title {
  color: var(--theme-cream) !important;
}

/* Tabs & Action Toggles */
.setup-tab-btn,
.comic-tab-btn {
  background: var(--theme-base) !important;
  color: var(--theme-cream) !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

.setup-tab-btn:hover,
.comic-tab-btn:hover {
  background: var(--theme-card) !important;
  color: var(--theme-cream) !important;
}

.setup-tab-btn.active-tab,
.setup-tab-btn.active,
.comic-tab-btn.active,
button[aria-selected="true"].comic-tab-btn {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
}

/* Copy Buttons */
body.page-overlays .copy-btn,
.copy-btn,
button.copy-command,
body.page-profile button[id^="copy"] {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

body.page-overlays .copy-btn:hover,
.copy-btn:hover,
button.copy-command:hover,
body.page-profile button[id^="copy"]:hover {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
}

/* Creator Dashboard: Overview Tab Symmetrical Highlight Boxes & Details */
body.page-profile #rowTotalClips,
body.page-profile #rowSubscribers {
  background: var(--theme-base) !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  min-height: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body.page-profile #labelTotalClips,
body.page-profile #labelSubscribers {
  color: var(--theme-cream) !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

body.page-profile .dash-detail-row {
  background: var(--theme-base) !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

body.page-profile .dash-detail-label {
  color: var(--theme-subtext) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body.page-profile #detailChannelName,
body.page-profile #detailWebhookStatus {
  color: var(--theme-cream) !important;
}

body.page-profile #detailChannelId {
  background: var(--theme-card) !important;
  color: var(--theme-cta) !important;
}

/* Channel Page Clip Cards & Text Legibility */
body.page-channel .premium-clip-card {
  background: var(--theme-card) !important;
  border: 3px solid #000000 !important;
}

body.page-channel .premium-clip-card h4,
body.page-channel .premium-clip-card .clip-title {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: var(--theme-cream) !important;
}

body.page-channel .premium-clip-card span,
body.page-channel .premium-clip-card p {
  color: var(--theme-subtext) !important;
}

/* Creators Page Cards */
body.page-creators .creator-grid-card {
  background: var(--theme-card) !important;
  border: 3.5px solid #000000 !important;
}

body.page-creators .creator-grid-card h3,
body.page-creators .creator-grid-card .creator-name {
  color: var(--theme-cream) !important;
}

body.page-creators .creator-grid-card p,
body.page-creators .creator-grid-card span {
  color: var(--theme-subtext) !important;
}

/* Code Boxes & Inputs */
code,
.setup-code-box,
.command-box,
body.page-setup #setupContentArea code,
body.page-overlays .bg-amber-500\/10 strong,
body.page-profile #nightbotInput,
body.page-profile #obsOverlayInput,
body.page-profile #nightbotCommandArea input,
body.page-profile .dash-input {
  background: var(--theme-base) !important;
  color: var(--theme-cta) !important;
  border: 2px solid var(--theme-primary) !important;
}

/* Highlight Links */
.setup-step-box a,
.about-sub-card a,
body.page-setup #setupContentArea a,
body.page-overlays .overlay-card a,
body.page-profile .dash-card a {
  color: var(--theme-cta) !important;
}

.setup-step-box a:hover,
body.page-overlays .overlay-card a:hover,
body.page-profile .dash-card a:hover {
  color: var(--theme-cream) !important;
}

/* Badges & Tags */
.setup-badge-tag,
.badge-tag-primary,
body.page-profile #detailAuthBadge {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
}

/* Site Footer */
footer,
footer.bg-\[\#050507\],
footer.bg-\[\#070709\] {
  background: var(--theme-base) !important;
  border-top: 1px solid var(--theme-card) !important;
}


/* ==========================================================================
   TAILWIND UTILITY CLASSES AUTO-BINDING TO DYNAMIC PALETTE TOKENS
   Ensures HTML files with inline Tailwind arbitrary color classes react dynamically
   ========================================================================== */
.bg-\[\#2D2B55\],
.bg-\[\#2d2b55\],
.bg-\[\#242345\],
.bg-\[\#1f1e38\] {
  background-color: var(--theme-card) !important;
}

.bg-\[\#1A1A1F\],
.bg-\[\#1a1a1f\],
.bg-\[\#121217\],
.bg-\[\#0d0d12\] {
  background-color: var(--theme-base) !important;
}

.bg-\[\#6A5ACD\],
.bg-\[\#6a5acd\] {
  background-color: var(--theme-primary) !important;
}

.bg-\[\#F4A62A\],
.bg-\[\#f4a62a\] {
  background-color: var(--theme-cta) !important;
}

.bg-\[\#A678B9\],
.bg-\[\#a678b9\] {
  background-color: var(--theme-secondary) !important;
}

.text-\[\#F0D9B5\],
.text-\[\#f0d9b5\] {
  color: var(--theme-cream) !important;
}

.text-\[\#F4A62A\],
.text-\[\#f4a62a\] {
  color: var(--theme-cta) !important;
}

.text-\[\#6A5ACD\],
.text-\[\#6a5acd\] {
  color: var(--theme-primary) !important;
}

.text-\[\#A678B9\],
.text-\[\#a678b9\] {
  color: var(--theme-secondary) !important;
}

.text-\[\#cbd5e1\],
.text-\[\#cbd5e1\] {
  color: var(--theme-subtext) !important;
}

.border-\[\#F4A62A\],
.border-\[\#f4a62a\] {
  border-color: var(--theme-cta) !important;
}

.border-\[\#6A5ACD\],
.border-\[\#6a5acd\] {
  border-color: var(--theme-primary) !important;
}

.border-\[\#2D2B55\],
.border-\[\#2d2b55\] {
  border-color: var(--theme-card) !important;
}

.border-\[\#1A1A1F\],
.border-\[\#1a1a1f\] {
  border-color: var(--theme-base) !important;
}

/* Feedback Page Specific Cards & Headings */
body.page-feedback .feedback-card-bg,
body.page-feedback .feedback-container,
body.page-feedback form {
  background: var(--theme-card) !important;
  color: var(--theme-cream) !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 20px !important;
}

body.page-feedback .feedback-card-bg h1,
body.page-feedback .feedback-card-bg h2 {
  color: var(--theme-cream) !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 1px !important;
}

body.page-feedback .feedback-card-bg p,
body.page-feedback .feedback-card-bg span.text-slate-400 {
  color: var(--theme-subtext) !important;
}

body.page-feedback label {
  color: var(--theme-cream) !important;
  font-weight: 700 !important;
}

body.page-feedback input,
body.page-feedback textarea,
body.page-feedback select {
  background: var(--theme-base) !important;
  color: var(--theme-cream) !important;
  border: 2px solid #000000 !important;
}

body.page-feedback button[type="submit"] {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  letter-spacing: 1px !important;
  font-size: 16px !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

body.page-feedback button[type="submit"]:hover {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
}

body.page-feedback .feedback-discord-btn {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
  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;
  font-size: 14px !important;
}

body.page-feedback .feedback-discord-btn:hover {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
}

/* Creators Page Symmetrical Header Bar & Mode Toggle */
#creatorsHeaderBar,
body.page-creators #directoryView > div:first-child,
body.page-creators #creatorsHeaderBar {
  background: var(--theme-card) !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 20px !important;
  padding: 14px 24px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.page-creators #clipModeToggleGroup {
  background: var(--theme-base) !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !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;
  padding: 6px 20px !important;
  border-radius: 9999px !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

body.page-creators #btnNormalClips.bg-accent,
body.page-creators #btnCollabClips.bg-accent {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

body.page-creators #btnNormalClips:not(.bg-accent),
body.page-creators #btnCollabClips:not(.bg-accent) {
  background: transparent !important;
  color: var(--theme-cream) !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
}

body.page-creators #btnNormalClips:not(.bg-accent):hover,
body.page-creators #btnCollabClips:not(.bg-accent):hover {
  color: var(--theme-cta) !important;
}

/* Creators Page Search Filter & Badges */
body.page-creators .search-filter-card,
body.page-creators .bg-\[\#2D2B55\] {
  background: var(--theme-card) !important;
}

body.page-creators #allCommunityCreatorsBadge,
body.page-creators .badge-community-creators,
body.page-creators span.bg-\[\#6A5ACD\] {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
}

body.page-creators .creator-grid-card {
  background: var(--theme-card) !important;
}

body.page-creators .creator-grid-card:hover {
  box-shadow: 8px 8px 0px #000000, 12px 12px 0px var(--theme-primary) !important;
}

/* Setup Page Platform Bar Container */
body.page-setup .flex.flex-wrap.items-center.justify-center.gap-3.mb-10,
body.page-setup .platform-bar-container {
  background: var(--theme-card) !important;
}

/* Overlays Page Quick Guide Box & Cards */
body.page-overlays .max-w-5xl,
body.page-overlays .overlay-card {
  background: var(--theme-card) !important;
}

body.page-overlays .overlay-card:hover {
  box-shadow: 8px 8px 0px #000000, 12px 12px 0px var(--theme-primary) !important;
}


.hover\:bg-\[\#2D2B55\]:hover,
.hover\:bg-\[\#2d2b55\]:hover {
  background-color: var(--theme-card) !important;
}

.hover\:bg-\[\#1A1A1F\]:hover,
.hover\:bg-\[\#1a1a1f\]:hover {
  background-color: var(--theme-base) !important;
}

.hover\:bg-\[\#6A5ACD\]:hover,
.hover\:bg-\[\#6a5acd\]:hover {
  background-color: var(--theme-primary) !important;
}

.hover\:bg-\[\#F4A62A\]:hover,
.hover\:bg-\[\#f4a62a\]:hover {
  background-color: var(--theme-cta) !important;
}

.hover\:text-\[\#F0D9B5\]:hover,
.hover\:text-\[\#f0d9b5\]:hover {
  color: var(--theme-cream) !important;
}

.hover\:text-\[\#F4A62A\]:hover,
.hover\:text-\[\#f4a62a\]:hover {
  color: var(--theme-cta) !important;
}


/* Home button hover on non-home pages: Matches palette CTA */
#homepageNav .nav-links a[href="/"]:hover:not(.nav-link-active),
body.page-channel #homepageNav .nav-links a[href="/"]:hover,
body.page-creators #homepageNav .nav-links a[href="/"]:hover,
body.page-profile #homepageNav .nav-links a[href="/"]:hover,
body.page-setup #homepageNav .nav-links a[href="/"]:hover,
body.page-overlays #homepageNav .nav-links a[href="/"]:hover,
body.page-feedback #homepageNav .nav-links a[href="/"]:hover,
body.page-about #homepageNav .nav-links a[href="/"]:hover {
  background: var(--theme-cta) !important;
  color: var(--theme-base) !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  transform: translateY(-2px) scale(1.05) !important;
}


/* ==========================================================================
   CREATOR DASHBOARD COMPLETE HIGH-CONTRAST TEXT & VISIBILITY
   ========================================================================== */
body.page-profile #labelTotalClips,
body.page-profile #labelSubscribers,
body.page-profile #rowTotalClips span:first-child,
body.page-profile #rowSubscribers span:first-child {
  color: var(--theme-cream) !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  display: block !important;
}

body.page-profile .dash-detail-label,
body.page-profile #labelChannelId,
body.page-profile .dash-detail-row span:first-child {
  color: var(--theme-cream) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

body.page-profile #settingsCard h3,
body.page-profile #settingsCard .text-xs.font-bold,
body.page-profile #settingsCard .font-bold {
  color: var(--theme-cream) !important;
}

body.page-profile #settingsCard p,
body.page-profile #settingsCard .text-\[11px\],
body.page-profile #settingsCard .text-slate-500 {
  color: var(--theme-subtext) !important;
}

body.page-profile #settingsCard .bg-white,
body.page-profile #settingsCard .bg-slate-100 {
  background: var(--theme-base) !important;
  border-color: #000000 !important;
}

body.page-profile #settingsCard button {
  color: var(--theme-cream) !important;
}

/* Ensure no text-slate-800 or text-slate-500 stays dark in dash-card */
body.page-profile .dash-card .text-slate-800,
body.page-profile .dash-card .text-slate-700,
body.page-profile .dash-card .text-slate-900,
body.page-profile .dash-card div.font-bold,
body.page-profile .sub-card .text-slate-800,
body.page-profile .sub-card .text-slate-700,
body.page-profile .sub-card .text-slate-900 {
  color: var(--theme-cream) !important;
}

body.page-profile .dash-card .text-slate-500,
body.page-profile .dash-card .text-slate-600,
body.page-profile .sub-card .text-slate-500,
body.page-profile .sub-card .text-slate-600 {
  color: var(--theme-subtext) !important;
}