/* =====================================================================
   Automatic dark mode — follows the phone / laptop setting.
   Loaded LAST in base.html and admin_base.html so it overrides the rest.
   (Nothing changes for users whose device is in light mode.)
===================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121212;
    --bg-soft: #1a1a1a;
    --card: #1e1e1e;
    --card-border: #333333;
    --text: #e6e6e6;
    --text-dim: #a0a0a0;
    --navy: #f2f2f2;   /* headings + brand-name gradient were near-black (#111116) = invisible on dark */
    --accent-a: #5b8def;
    --accent-b: #7aa5ff;
    --accent-c: #8fb2ff;
    --sky: #2a2a2a;
    --green: #2fc274;
    --red: #ff6b70;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7);
    --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.8);
  }

  html, body, .adm-body { background: var(--bg); color: var(--text); }
  html .bg-blob { opacity: .35; }
  /* ---------- Navbar / drawer ---------- */
  html .nav-inner::before { background: rgba(22,22,22,.92) !important; }
  html .nav-links { background: #161616 !important; border-color: var(--card-border) !important; }
  html .nav-links-scroll a.active { background: #2a2a2a !important; color: var(--accent-b) !important; box-shadow: inset 0 0 0 1px rgba(122,165,255,.25) !important; }
  html .nav-toggle,
  html .nav-inner .btn-ghost,
  html .notif-btn { background: #242424 !important; border-color: var(--card-border) !important; color: var(--text) !important; }
  html .nav-wallet { background: #2a2a2a; border-color: #3d3d3d; }
  html .nav-wallet:hover,
  html .nav-wallet.active { background: #333333; }
  html .nav-avatar,
  html .drawer-profile { background: #242424 !important; }
  html .logo-badge.eq-badge { background: #242424; }
  html .nav-logout.btn-ghost,
  html .nav-inner .nav-logout.btn-ghost { background: #242424 !important; border-color: #5a2d30 !important; color: var(--red) !important; }
  html .nav-inner .nav-logout.btn-ghost:hover { background: #2a1a1d !important; }
  html .notif-panel { background: #1e1e1e; border-color: var(--card-border); }
  html .notif-item.is-new { background: #262626; }
  /* ---------- Buttons / badges / pills ---------- */
  html .btn-ghost { background: #242424; color: var(--text); border-color: var(--card-border); }
  html .btn-ghost:hover { background: #2c2c2c; }
  html .btn-danger-ghost,
  html .auth-alert-err,
  html .admin-error { background: #2a1a1d; color: #ff9a9e; border-color: rgba(255,107,112,.35); }
  html .btn-danger-ghost:hover,
  html .plan-cancel-btn:hover { background: #3a2124; }
  html .pill,
  html .song-rank { background: #2a2a2a; color: var(--accent-b); }
  html .badge-gray { background: #2c2c2c; color: var(--text-dim); }
  html .hero-badge { background: rgba(30,30,30,.85); }
  html .google-btn { background: #242424; color: var(--text); border-color: var(--card-border); }
  html .slider-arrow:hover { background: #2c2c2c; }
  html .pricing-dot { background: #3d3d3d; }
  /* ---------- Hero / home ---------- */
  html .hero-wrap {
    /* frameless: full-width, no rounded card / shadow, fades into the page */
    width: 100%; margin: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(180deg, #1c1c1c 0%, #181818 65%, var(--bg) 100%);   /* charcoal black */
  }
  /* Equalizer: all bars white (drops the rainbow eqColor animation, keeps the bounce) */
  html .eq i {
    background: #ffffff;
    animation: eqBar var(--dur, 1s) ease-in-out var(--del, 0s) infinite alternate;
  }
  html .float-chip { background: rgba(30,30,30,.85); border-color: rgba(255,255,255,.08); color: var(--text); }
  html .marquee { background: rgba(30,30,30,.7); }
  html .bot-promo-inner { background: linear-gradient(135deg, #1e1e1e 0%, #1f1f1f 60%, #2a2a2a 100%); }
  html .step-num { border-color: var(--bg); }
  html .feature-card .feature-icon:not(.icon-svg),
  html .feature-card:nth-child(3n) .feature-icon:not(.icon-svg) { background: linear-gradient(135deg, #2a2a2a, #333333); border-color: #3d3d3d; color: var(--accent-b); }
  /* ---------- Footer / social ---------- */
  html .site-footer { background: #161616; }
  html .dash-socials a,
  html .footer-socials a { background: #242424; }
  html .dash-socials a:hover,
  html .footer-socials a:hover { background: #2c2c2c; }
  /* ---------- Forms ---------- */
  html .auth-input,
  html .admin-input,
  html .input,
  html .select,
  html .textarea,
  html input,
  html select,
  html textarea { background-color: #161616; color: var(--text); border-color: var(--card-border); }
  html .input::placeholder,
  html .textarea::placeholder { color: #7a7a7a; }
  html input::placeholder,
  html textarea::placeholder { color: #7a7a7a; }
  html .auth-tab.active { background: #2c2c2c; color: var(--accent-b); }
  html .guide-keypick select { background: #161616; color: var(--text); }
  html .amount-input input { color: #fff; }
  html .auth-card .auth-note.spam-hint { background: #3a3200; color: #ffe600; }
  html .auth-card .auth-note.spam-hint strong { color: #fff3a0; }
  /* ---------- Plans / pricing / billing ---------- */
  html .price-card.best,
  html .plan-card.best { background: linear-gradient(180deg, #2a2a2a, var(--card) 55%); }
  html .price-icon,
  html .plan-icon { background: linear-gradient(135deg, #2a2a2a, #333333); border-color: #3d3d3d; }
  html .price-card.best .price-icon,
  html .plan-card.best .plan-icon { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); }
  html .my-sub,
  html .sub-card { background: var(--card); }
  html .plan-hint { background: #2e2410; color: #f5c56a; border-color: rgba(245,165,36,.35); }
  html .plan-hint.ok { background: #11271b; color: #5fd68f; border-color: rgba(47,194,116,.35); }
  html .bill-banner { color: var(--text); }
  /* ---------- Legal pages (were hard-coded black) ---------- */
  html .legal-plain h1,
  html .legal-plain h2,
  html .legal-plain p,
  html .legal-plain li,
  html .legal-plain strong,
  html .legal-plain ul,
  html .legal-plain .legal-intro,
  html .legal-plain .legal-updated { color: var(--text); }
  /* ---------- Admin panel ---------- */
  html .adm-side { background: rgba(22,22,22,.94); border-color: var(--card-border); }
  html .tbl th { background: #242424; }
  html .tbl tbody tr:hover td,
  html .tbl tbody tr:hover td.act { background: #242424; }
  html .callout { background: #2e2410; color: #f5c56a; border-color: rgba(245,165,36,.4); }
  html .rank { background: #3a2124; color: #ff9a9e; }

  /* ---------- Hero text (colours were fixed to dark navy) ---------- */
  html .hero h1, html .hero-typed { color: var(--text); }
  html .adm-side { background: #161616; }

  /* ---------- Headings / low-contrast text that stayed dark ---------- */
  html .section-title,
  html .bot-promo-text h2,
  html .dash-header h1,
  html .docs h1, html .settings h1, html .help h1, html .legal h1,
  html .bill h1, html .notif-body h1 { color: var(--navy); }
  html .legal-plain .legal-crumb,
  html .legal-plain .legal-crumb a,
  html .legal-plain .legal-crumb span,
  html .legal-plain a { color: var(--accent-c); }
  html .badge-blue { background: rgba(56,189,248,.16); color: #7dd3fc; }
  html .kind-video { background: rgba(122,165,255,.16); color: var(--accent-c); }
  html .kind-audio { color: var(--accent-c); }
  html .pill-tg { color: #5ac8fa; }
  html .badge-green, html .method-tag, html .amt.pos { color: #4ade80; }
  html .plan-owned, html .bill-toast.ok, html .toast.ok,
  html .auth-alert-ok, html .callout.ok { color: #5fd68f; }
  html .callout.ok { background: #11271b; }
}