/* ============================================================================
   RemoveVocals — theme-midnight.css  (ADDITIVE, CSS-ONLY dark re-skin)  v3
   Loads alongside style.css. Appearance only — no markup/JS/CSP changes.
   Override list is grounded in the ACTUAL selectors that hardcode a light
   background in style.css + the pages' inline <style> blocks (enumerated),
   so no white-on-dark / dark-on-dark leaks remain.
   Remove the <link> / delete this file to revert instantly.
   ============================================================================ */

/* ── 1. Token flip (!important → wins regardless of cascade position) ─────── */
:root{
  --bg:#08080b !important; --bg-deep:#0d0d13 !important; --surface:#111118 !important;
  --surface-2:#16161f !important; --surface-3:#1d1d27 !important;
  --border:rgba(255,255,255,.10) !important; --border-focus:#7c5cff !important;
  --text:#f3f1ea !important; --text-2:#c6c6cf !important; --text-muted:#8f8f9b !important;
  --icon:#8f8f9b !important;
  --purple:#7c5cff !important; --purple-2:#5a3df0 !important; --purple-light:#a890ff !important;
  --signal:#d7ff3e !important;
}

/* ── 2. Atmosphere (strengthen the existing body::before mesh) ───────────── */
body::before{
  background:
    radial-gradient(40% 38% at 62% 22%, rgba(124,92,255,.20), transparent 70%),
    radial-gradient(36% 32% at 30% 60%, rgba(215,255,62,.045), transparent 70%),
    radial-gradient(60% 50% at 50% 0%, rgba(90,61,240,.13), transparent 72%) !important;
}

/* ── 3. EXACT hardcoded-white surfaces → dark (the leak fix) ─────────────── */
.card, .card:hover,
.upload-card, body.logged-in .upload-card,
.related-card,
.seo-faq details,
.tool-card, .feature-card, .about-tool-card,
.user-dropdown,
.rv-modal,
.proc-viz{
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text);
}
/* ghost button hardcodes #f5f5f7 / #e5e5e7 */
.btn-ghost{ background:var(--surface-2) !important; color:var(--text-2) !important; border-color:var(--border) !important; }
.btn-ghost:hover{ background:var(--surface-3) !important; color:var(--text) !important; }
/* FAQ open/hover state + summary stay legible (text reads var(--text)) */
.seo-faq summary:hover, .seo-faq details[open] summary{ background:var(--surface-2) !important; }
/* dropdown hover used rgba(0,0,0,.04) (invisible on dark) → light tint */
.user-dropdown-links a:hover{ background:rgba(255,255,255,.06) !important; }

/* ── 3b. Header / nav bar / footer (topbar hardcodes rgba(255,255,255,.92)) ─ */
header, .header, .topbar, nav.navbar, .navbar,
footer, .footer, .footer-rich, .site-footer{
  background:rgba(8,8,11,.92) !important;
  border-color:var(--border) !important;
}
.topbar{ backdrop-filter:blur(10px); }

/* ── 4. Cloud announce banner — JS-injected with classes .rv-announce*
   (light violet gradient + #1a1a2e dark text). Recolour for dark. ────────── */
.rv-announce{
  background:linear-gradient(90deg, rgba(124,92,255,.16), rgba(124,92,255,.05)) !important;
  border-bottom:1px solid var(--border) !important;
}
.rv-announce, .rv-announce-inner, .rv-announce-msg, .rv-announce-msg *{ color:var(--text) !important; }
.rv-announce-msg strong, .rv-announce-msg b{ color:var(--purple-light) !important; }
.rv-announce-cta{ background:var(--purple) !important; color:#fff !important; border:none !important; }
.rv-announce-cta:hover{ background:var(--purple-2) !important; }
.rv-announce-close{ color:var(--text-muted) !important; }
.rv-announce-close:hover{ background:rgba(255,255,255,.08) !important; color:var(--text) !important; }

/* ── 5. Tool tabs / pills: inactive hardcode white → dark, active = violet ─ */
.tool-tab, .pill, .tab{
  background:var(--surface-2) !important; color:var(--text-2) !important; border:1px solid var(--border) !important;
}
.tool-tab.active, .pill.active, .tab.active, .nav a.active, .nav-link.active{
  background:var(--purple) !important; color:#fff !important; border-color:var(--purple) !important;
}

/* ── 6. Accent system — keep primary CTAs VIOLET + white (already legible via
   the --purple flip). Forcing lime risked white-text-on-lime on CTAs whose
   text colour is set by a more-specific rule, so lime is reserved for the
   logo accent only. ─────────────────────────────────────────────────────── */
/* eyebrow-pill badge removed (generic "AI landing" trope) — the "no signup"
   message already lives in the subtitle. Hidden, not deleted from HTML. */
.hero-badge{ display:none !important; }
.badge{
  background:rgba(124,92,255,.12) !important; color:var(--purple-light) !important;
  border:1px solid rgba(124,92,255,.3) !important;
}
a:hover{ color:var(--purple-light); }
.logo svg rect:last-child{ fill:var(--signal) !important; }
/* CTAs that hardcode dark text on a faint tint (invisible on dark) */
.blog-link, .blog-link *{ color:var(--purple-light) !important; }
.blog-link{ background:rgba(124,92,255,.12) !important; border-color:rgba(124,92,255,.3) !important; }
/* processing-ring % (JS-shown during processing) hardcodes near-black text */
.ring-pct{ color:var(--text) !important; }
/* legal pages (terms/privacy/dmca/mentions) hardcode h1/h2 color:#1a1a1a */
.legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4,
.legal-content strong, .prose h1, .prose h2, .prose h3{ color:var(--text) !important; }

/* ── Template-specific leaks found by full-site static sweep ────────────── */
.lf-export-list{ background:var(--surface) !important; border-color:var(--border) !important; }   /* lyrics-finder export menu (#fff) */
.mode-tab.active{ background:var(--purple) !important; color:#fff !important; box-shadow:none !important; } /* noise-reducer active tab was #fff → invisible light text */
.m-ring-pct{ color:var(--text) !important; }                                                       /* mastering progress ring % (dark text) */
/* NOTE: .oauth-btn (login) is intentionally a white Google button w/ dark text — left as-is. */

/* ── SEO content uses INLINE style="" with hardcoded #fff bg / #111113 text.
   A stylesheet !important beats inline non-important declarations, so attribute
   selectors fix every inline-styled content block site-wide in one shot. ───── */
[style*="background-color: #ffffff"], [style*="background-color:#ffffff"],
[style*="background-color: #fff;"], [style*="background-color:#fff;"],
[style*="background: #fff"], [style*="background:#fff"],
[style*="background-color: #fafafc"], [style*="background-color:#fafafc"],
[style*="background-color: #f5f5f7"], [style*="background-color: #f0f0f2"]{
  background-color:var(--surface) !important; border-color:var(--border) !important;
}
[style*="color: #111113"], [style*="color:#111113"],
[style*="color: #1a1a2e"], [style*="color:#1a1a2e"],
[style*="color: #1a1a1a"], [style*="color:#1a1a1a"],
[style*="color: #222"], [style*="color:#222"], [style*="color: #333"], [style*="color:#333"]{
  color:var(--text) !important;
}
.site-header{ background:rgba(8,8,11,.92) !important; }
.box{ background:var(--surface) !important; border-color:var(--border) !important; }
/* SEO content section classes (defensive, in case styled via class not inline) */
.eeat-authors, .key-takeaways, .comparison{ background:var(--surface) !important; border-color:var(--border) !important; }
.eeat-authors h1,.eeat-authors h2,.eeat-authors h3,.eeat-authors p,.eeat-authors span,
.key-takeaways h2,.key-takeaways h3,.key-takeaways li,.key-takeaways p,
.comparison h2,.comparison h3,.comparison td,.comparison th, strong{ color:var(--text) !important; }

/* ── 7. Inputs / drop zones / canvases legible on dark ──────────────────── */
input, select, textarea{
  background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border) !important;
}
.upload-zone, #dropZone{ background:rgba(124,92,255,.05) !important; border-color:rgba(124,92,255,.35) !important; }
canvas.waveform, .waveform-canvas, canvas.chroma{ background:var(--bg-deep) !important; }
hr, .divider{ border-color:var(--border) !important; }