/* ==========================================================================
   YouTube Toolkit - High-End Red Brand Design System (Dark & Light Mode)
   ========================================================================== */

:root {
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-primary-light: rgba(220, 38, 38, 0.12);
  --color-primary-glow: rgba(220, 38, 38, 0.28);
  --color-primary-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  --color-accent: #ff0033;

  /* Default Light Mode */
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-hover: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --nav-glass: rgba(255, 255, 255, 0.92);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  --shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 16px 32px -8px rgba(220, 38, 38, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --card-glow: radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.06), transparent 70%);
  --font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html.dark, :root.dark {
  --color-primary: #ff0033;
  --color-primary-hover: #e0002d;
  --color-primary-light: rgba(255, 0, 51, 0.16);
  --color-primary-glow: rgba(255, 0, 51, 0.35);
  --color-primary-gradient: linear-gradient(135deg, #ff1a40 0%, #ff0033 50%, #cc0029 100%);
  --color-accent: #ff0033;

  /* Deep Obsidian Dark Mode */
  --bg-main: #09090b;
  --bg-surface: #101014;
  --bg-surface-elevated: #16161c;
  --bg-subtle: #181820;
  --bg-hover: #22222d;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --border-color: #22222c;
  --border-hover: #32323e;
  --nav-glass: rgba(9, 9, 11, 0.90);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 18px 36px -10px rgba(255, 0, 51, 0.28), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  --input-bg: #121217;
  --input-border: #262633;
  --card-glow: radial-gradient(circle at 50% 0%, rgba(255, 0, 51, 0.14), transparent 70%);
}

/* Base Body Styles & Smooth Transitions */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-family);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
}

header {
  width: 100% !important;
  flex-shrink: 0 !important;
}

main {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

footer {
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* Container responsive widths */
.container {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 640px) { .container { max-width: 640px !important; } }
@media (min-width: 768px) { .container { max-width: 768px !important; } }
@media (min-width: 1024px) { .container { max-width: 1024px !important; } }
@media (min-width: 1280px) { .container { max-width: 1280px !important; } }
@media (min-width: 1536px) { .container { max-width: 1400px !important; } }

/* Grid & Layout Responsive Safeguards */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:flex-row { flex-direction: row !important; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   Adaptive Utility Overrides (Automatic Compatibility for All Views)
   ========================================================================== */

.bg-background { background-color: var(--bg-main) !important; }
.bg-card {
  background-color: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}
.bg-muted { background-color: var(--bg-subtle) !important; }

/* Surfaces */
.bg-zinc-950,
.bg-zinc-950\/80,
.bg-zinc-950\/60,
.bg-zinc-950\/40 {
  background-color: var(--bg-surface) !important;
}

.bg-zinc-900,
.bg-zinc-900\/90,
.bg-zinc-900\/80,
.bg-zinc-900\/60,
.bg-zinc-900\/50,
.bg-zinc-900\/40 {
  background-color: var(--bg-subtle) !important;
}

/* Borders */
.border-border,
.border-zinc-800,
.border-zinc-800\/80,
.border-zinc-800\/60,
.border-zinc-800\/50,
.border-zinc-800\/40,
.border-zinc-800\/30,
.border-zinc-900 {
  border-color: var(--border-color) !important;
}

/* Typography Colors */
.text-foreground,
.text-zinc-100,
.text-zinc-200,
.text-zinc-300 {
  color: var(--text-main) !important;
}

.text-muted-foreground,
.text-zinc-400 {
  color: var(--text-muted) !important;
}

.text-zinc-500,
.text-zinc-600,
.text-zinc-700 {
  color: var(--text-subtle) !important;
}

/* Brand Primary Accent */
.text-primary {
  color: var(--color-primary) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.bg-primary:hover {
  background-color: var(--color-primary-hover) !important;
}

.border-primary {
  border-color: var(--color-primary) !important;
}

.bg-primary\/10 {
  background-color: var(--color-primary-light) !important;
}

.border-primary\/20 {
  border-color: var(--color-primary-light) !important;
}

/* ==========================================================================
   Header & Navigation (Ultra-responsive Glassmorphism)
   ========================================================================== */

.nav-glass {
  background: var(--nav-glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s ease, border-color 0.25s ease;
  height: 4rem !important;
}

.nav-glass > .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
}

/* Dropdown Mega Menu in Navbar */
.mega-dropdown-panel {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Hero & Background Glow Effects
   ========================================================================== */

.ytk-pattern-diagonal-bl {
  position: relative;
}

.ytk-pattern-diagonal-bl::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 50vh;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

.ytk-pattern-diagonal-bl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40vw;
  height: 40vh;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ==========================================================================
   Universal Search Box (Responsive Mobile & Desktop)
   ========================================================================== */

.hero-search-wrapper {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
  display: flex !important;
  gap: 0.625rem;
}

@media (max-width: 639px) {
  .hero-search-wrapper {
    flex-direction: column !important;
    padding: 0.75rem !important;
  }
}

@media (min-width: 640px) {
  .hero-search-wrapper {
    flex-direction: row !important;
    align-items: center !important;
  }
}

.hero-search-wrapper:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-primary-light), var(--shadow-hover);
}

/* Inputs & Form Controls */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background-color: var(--input-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

/* Touch Friendly Mobile Height */
@media (max-width: 639px) {
  .hero-search-wrapper {
    padding: 0.75rem !important;
  }
}

/* ==========================================================================
   Tool Cards & Micro-interactions
   ========================================================================== */

.tool-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.24s ease,
              box-shadow 0.24s ease,
              background-color 0.2s ease;
}

.tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary-gradient);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-hover);
}

.tool-card:hover::before {
  opacity: 1;
}

/* Card Icon Box */
.tool-icon-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--color-primary);
  transition: all 0.2s ease;
}

.tool-card:hover .tool-icon-box {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
  transform: scale(1.08);
}

/* Force icon child (e.g. <i class="text-primary">) to turn white on card hover */
.tool-card:hover .tool-icon-box i,
.tool-card:hover .tool-icon-box svg,
.tool-card:hover .tool-icon-box span {
  color: #ffffff !important;
}

/* ==========================================================================
   Pill Badges & Quick Action Chips
   ========================================================================== */

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

.badge-pill:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px var(--color-primary-light);
}

/* Active Category Pill */
.cat-filter-btn.active {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 14px -2px var(--color-primary-glow) !important;
}

/* Hide horizontal scrollbar for mobile pill carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Primary Buttons & CTA Action Styles
   ========================================================================== */

.btn-primary-yt {
  background: var(--color-primary-gradient) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px -4px var(--color-primary-glow);
  transition: all 0.2s ease;
  border: none;
}

.btn-primary-yt:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -4px var(--color-primary-glow);
  filter: brightness(1.08);
}

.btn-primary-yt:active {
  transform: translateY(0);
}

/* ==========================================================================
   Theme Switcher Button Styling
   ========================================================================== */

.btn-theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.05);
}

/* ==========================================================================
   Monetization Status Callouts
   ========================================================================== */

.monetized-box {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 2px solid rgba(16, 185, 129, 0.3) !important;
}

.not-monetized-box {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 2px solid rgba(245, 158, 11, 0.3) !important;
}

/* ==========================================================================
   Custom Scrollbars
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ==========================================================================
   Mobile Responsive Drawer
   ========================================================================== */

#mobile-menu > div {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* ==========================================================================
   Dynamic CMS Content & Prose Typography Adaptive Rules
   ========================================================================== */

html.light .prose,
html.light .prose-invert {
  color: var(--text-main) !important;
}

html.light .prose h1,
html.light .prose h2,
html.light .prose h3,
html.light .prose h4,
html.light .prose h5,
html.light .prose h6,
html.light .prose strong,
html.light .prose-invert h1,
html.light .prose-invert h2,
html.light .prose-invert h3,
html.light .prose-invert h4,
html.light .prose-invert h5,
html.light .prose-invert h6,
html.light .prose-invert strong {
  color: var(--text-main) !important;
}

html.light .prose p,
html.light .prose-invert p,
html.light .prose li,
html.light .prose-invert li {
  color: var(--text-muted) !important;
}

html.light .prose a,
html.light .prose-invert a {
  color: var(--color-primary) !important;
}

html.light .prose code,
html.light .prose-invert code {
  background-color: var(--bg-subtle) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   Comprehensive Light Mode Theme Legibility & High-Contrast Rules
   ========================================================================== */

html.light,
:root:not(.dark) {
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --bg-surface: #ffffff;
  --bg-main: #f8fafc;
}

/* Fix dark pills/badges in light mode */
html.light .bg-zinc-800,
html:not(.dark) .bg-zinc-800,
html.light #channel-handle,
html:not(.dark) #channel-handle {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html.light .bg-zinc-900,
html:not(.dark) .bg-zinc-900,
html.light .bg-zinc-900\/60,
html:not(.dark) .bg-zinc-900\/60,
html.light .bg-zinc-900\/70,
html:not(.dark) .bg-zinc-900\/70,
html.light .bg-zinc-900\/80,
html:not(.dark) .bg-zinc-900\/80 {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-zinc-950,
html:not(.dark) .bg-zinc-950,
html.light .bg-zinc-950\/70,
html:not(.dark) .bg-zinc-950\/70,
html.light .bg-zinc-950\/60,
html:not(.dark) .bg-zinc-950\/60,
html.light .bg-zinc-950\/80,
html:not(.dark) .bg-zinc-950\/80 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Specific fix for Confidence Badge & Percentage */
html.light #confidence-percentage,
html:not(.dark) #confidence-percentage {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light .text-zinc-200,
html:not(.dark) .text-zinc-200,
html.light .text-zinc-300,
html:not(.dark) .text-zinc-300 {
  color: #1e293b !important;
}

html.light .text-zinc-400,
html:not(.dark) .text-zinc-400 {
  color: #334155 !important;
}

html.light .text-zinc-500,
html:not(.dark) .text-zinc-500 {
  color: #475569 !important;
}

html.light .border-zinc-800,
html:not(.dark) .border-zinc-800,
html.light .border-zinc-800\/80,
html:not(.dark) .border-zinc-800\/80,
html.light .border-zinc-800\/60,
html:not(.dark) .border-zinc-800\/60,
html.light .border-zinc-800\/50,
html:not(.dark) .border-zinc-800\/50,
html.light .border-zinc-800\/40,
html:not(.dark) .border-zinc-800\/40,
html.light .border-zinc-700,
html:not(.dark) .border-zinc-700 {
  border-color: #e2e8f0 !important;
}

/* Success & Warning highlights in Light Mode */
html.light .text-emerald-400,
html:not(.dark) .text-emerald-400 {
  color: #059669 !important;
}

html.light .text-emerald-500,
html:not(.dark) .text-emerald-500 {
  color: #047857 !important;
}

html.light .text-amber-400,
html:not(.dark) .text-amber-400 {
  color: #d97706 !important;
}

html.light .text-amber-500,
html:not(.dark) .text-amber-500 {
  color: #b45309 !important;
}

/* Clean cards & inputs in Light Mode */
html.light .bg-card,
html:not(.dark) .bg-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

html.light input,
html.light textarea,
html.light select,
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light input:focus,
html.light textarea:focus,
html.light select:focus,
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* ==========================================================================
   Comprehensive Light Mode: Gradient Blocks, Hover States & All Edge Cases
   ========================================================================== */

/* Gradient containers that use from-zinc-900 to-zinc-950 */
html.light [class*="from-zinc-9"],
html:not(.dark) [class*="from-zinc-9"] {
  background: var(--bg-surface) !important;
  background-image: none !important;
}

/* hover:bg-zinc-800 & hover:bg-zinc-900 in light mode */
html.light .hover\:bg-zinc-800:hover,
html:not(.dark) .hover\:bg-zinc-800:hover {
  background-color: #e2e8f0 !important;
}

html.light .hover\:bg-zinc-900:hover,
html:not(.dark) .hover\:bg-zinc-900:hover {
  background-color: #f1f5f9 !important;
}

/* Pill/badge chips rendered via JS (region-restriction-checker, etc.) */
html.light .bg-zinc-950,
html:not(.dark) .bg-zinc-950 {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

/* All zinc text variants — make them readable */
html.light .text-zinc-100,
html:not(.dark) .text-zinc-100 {
  color: #0f172a !important;
}

html.light .text-zinc-200,
html:not(.dark) .text-zinc-200 {
  color: #1e293b !important;
}

html.light .text-zinc-300,
html:not(.dark) .text-zinc-300 {
  color: #334155 !important;
}

html.light .text-zinc-400,
html:not(.dark) .text-zinc-400 {
  color: #475569 !important;
}

html.light .text-zinc-500,
html:not(.dark) .text-zinc-500 {
  color: #64748b !important;
}

html.light .text-zinc-600,
html:not(.dark) .text-zinc-600 {
  color: #64748b !important;
}

/* Progress bars track in light mode */
html.light .bg-zinc-800,
html:not(.dark) .bg-zinc-800 {
  background-color: #e2e8f0 !important;
}

/* FAQ / details accordions */
html.light details,
html:not(.dark) details {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

html.light summary,
html:not(.dark) summary {
  color: var(--text-main) !important;
}

/* Inline mono / code badge elements */
html.light code,
html:not(.dark) code {
  background-color: #f1f5f9 !important;
  color: var(--color-primary) !important;
  border: 1px solid #e2e8f0 !important;
}

/* Horizon / tab toggle button groups (inactive state) */
html.light .horizon-btn,
html:not(.dark) .horizon-btn {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html.light .horizon-btn.active,
html:not(.dark) .horizon-btn.active,
html.light .horizon-btn[data-active="true"],
html:not(.dark) .horizon-btn[data-active="true"] {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* View preset quick-pick buttons */
html.light .view-preset,
html:not(.dark) .view-preset {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Niche selector cards */
html.light .niche-selector,
html:not(.dark) .niche-selector {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light .niche-selector:hover,
html:not(.dark) .niche-selector:hover {
  background-color: #f1f5f9 !important;
  border-color: var(--color-primary) !important;
}

/* Divider borders inside result cards */
html.light [class*="border-zinc-800\\/"],
html:not(.dark) [class*="border-zinc-800\\/"] {
  border-color: #e2e8f0 !important;
}

html.light [class*="border-zinc-900\\/"],
html:not(.dark) [class*="border-zinc-900\\/"] {
  border-color: #e2e8f0 !important;
}

/* Inline stat sub-boxes (bg-zinc-900/60, bg-zinc-900/40 etc.) */
html.light [class*="bg-zinc-9"],
html:not(.dark) [class*="bg-zinc-9"] {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

/* Tab-style toggle inside hero (grid tab selectors) */
html.light .tab-pill,
html:not(.dark) .tab-pill {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Ensure all dark-mode-centric border-zinc-700 stays light */
html.light .border-zinc-700,
html:not(.dark) .border-zinc-700 {
  border-color: #e2e8f0 !important;
}

/* Error box message text */
html.light [data-error-message],
html:not(.dark) [data-error-message] {
  color: #475569 !important;
}

/* Monospace / textarea outputs (subscribe-link-generator etc.) */
html.light .font-mono,
html:not(.dark) .font-mono {
  color: #1e293b;
}

/* Subscriber/stat badges shown in results */
html.light #channel-handle,
html:not(.dark) #channel-handle {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Confidence card wrapper */
html.light #confidence-percentage,
html:not(.dark) #confidence-percentage {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Success emerald tones always readable in light */
html.light .text-emerald-600,
html:not(.dark) .text-emerald-600 {
  color: #059669 !important;
}

html.light .text-emerald-700,
html:not(.dark) .text-emerald-700 {
  color: #047857 !important;
}

html.light .text-amber-600,
html:not(.dark) .text-amber-600 {
  color: #d97706 !important;
}

html.light .text-amber-700,
html:not(.dark) .text-amber-700 {
  color: #b45309 !important;
}

/* ─── Force the border separators in result sections ─── */
html.light .border-t,
html:not(.dark) .border-t {
  border-top-color: #e2e8f0 !important;
}

html.light .border-b,
html:not(.dark) .border-b {
  border-bottom-color: #e2e8f0 !important;
}

/* ==========================================================================
   Light Mode: Fix hover:text-white on light backgrounds
   ========================================================================== */

/* Override hover:text-white to be dark on light backgrounds (except on dark bg buttons) */
html.light .hover\:text-white:not(.bg-primary):not([class*="bg-rose"]):hover,
html:not(.dark) .hover\:text-white:not(.bg-primary):not([class*="bg-rose"]):hover {
  color: #0f172a !important;
}

/* Fixes for inline copy buttons that should show primary red on hover */
html.light .text-zinc-400.hover\:text-white,
html:not(.dark) .text-zinc-400.hover\:text-white {
  color: #475569;
}

html.light .text-zinc-400.hover\:text-white:hover,
html:not(.dark) .text-zinc-400.hover\:text-white:hover {
  color: var(--color-primary) !important;
}

html.light .text-zinc-500.hover\:text-white,
html:not(.dark) .text-zinc-500.hover\:text-white {
  color: #64748b;
}

html.light .text-zinc-500.hover\:text-white:hover,
html:not(.dark) .text-zinc-500.hover\:text-white:hover {
  color: var(--color-primary) !important;
}

/* Filter/tab buttons inactive state */
html.light .niche-tab,
html:not(.dark) .niche-tab,
html.light .type-tab,
html:not(.dark) .type-tab,
html.light .filter-hook-btn,
html:not(.dark) .filter-hook-btn {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html.light .niche-tab:hover,
html:not(.dark) .niche-tab:hover,
html.light .type-tab:hover,
html:not(.dark) .type-tab:hover,
html.light .filter-hook-btn:hover,
html:not(.dark) .filter-hook-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Active tab states via JS (add bg-primary/20 & border-primary) */
html.light .bg-primary\/20,
html:not(.dark) .bg-primary\/20 {
  background-color: rgba(220, 38, 38, 0.08) !important;
  color: var(--color-primary) !important;
}

/* ==========================================================================
   Light Mode Contrast & Hover Icon Fixes
   ========================================================================== */

/* Fix: Prevent white text / icon disappearance on light mode hover */
html.light .hover\:text-white:hover,
html:not(.dark) .hover\:text-white:hover,
html.light .group:hover .group-hover\:text-white,
html:not(.dark) .group:hover .group-hover\:text-white,
html.light [class*="hover:text-white"]:hover,
html:not(.dark) [class*="hover:text-white"]:hover {
  color: #0f172a !important;
}

html.light .hover\:bg-zinc-800:hover i,
html.light .hover\:bg-zinc-900:hover i,
html:not(.dark) .hover\:bg-zinc-800:hover i,
html:not(.dark) .hover\:bg-zinc-900:hover i {
  color: #0f172a !important;
}

/* Fix: High-contrast Channel Username, Handle & Confidence Text in Light Mode */
html.light #channel-handle,
html:not(.dark) #channel-handle,
html.light #prof-handle,
html:not(.dark) #prof-handle {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  font-weight: 700 !important;
}

html.light #channel-title,
html:not(.dark) #channel-title,
html.light #prof-nickname,
html:not(.dark) #prof-nickname {
  color: #0f172a !important;
}

html.light #confidence-percentage,
html:not(.dark) #confidence-percentage {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html.light span:has(> #confidence-percentage),
html:not(.dark) span:has(> #confidence-percentage) {
  color: #0f172a !important;
}

/* Form labels in light mode */
html.light label.text-zinc-300,
html:not(.dark) label.text-zinc-300,
html.light label.text-zinc-400,
html:not(.dark) label.text-zinc-400 {
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* Presets & Pill buttons in Light Mode */
html.light .view-preset,
html:not(.dark) .view-preset {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

html.light .view-preset:hover,
html:not(.dark) .view-preset:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .bg-zinc-900,
html:not(.dark) .bg-zinc-900 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}