/*
  Neo frame — appearance preset (html[data-theme="neoFrame"]).

  IMPORTANT: Rules must NOT beat Appearance → Accent / Background / Cards.
  Those use html[data-accent], html[data-background], html[data-card-style]
  with the same specificity as naive [data-theme="neoFrame"] selectors.
  Because this file loads AFTER styles.css, unscoped neo rules were winning
  and hiding accent/background/card options. Scoped below.
*/

/* Shell tokens (never conflict with accent — accent overrides --purple via styles.css) */
[data-theme="neoFrame"] {
  --bg-dark: #050712;
  --bg-panel: rgba(20, 23, 49, 0.88);
  --bg-card: rgba(30, 35, 72, 0.78);
  --blue: #77c5ff;
  --text: #f0f3ff;
  --text-muted: #b7bee3;
  --border: rgba(190, 200, 255, 0.22);
}

/* Neo default lavender accent only when Accent = "Theme default" */
html[data-theme="neoFrame"]:not([data-accent]),
html[data-theme="neoFrame"][data-accent=""] {
  --purple: #c57dff;
  --purple-glow: rgba(197, 125, 255, 0.52);
  --purple-light: #dfc4ff;
  --icon-tint-filter: brightness(0) saturate(100%) invert(0.72) sepia(0.45) saturate(6) hue-rotate(235deg);
}

/*
  Neo wave background only when Background = Waves (same as app default).
  Other background modes keep full control from styles.css.
*/
html[data-theme="neoFrame"][data-background="waves"] .bg-waves {
  background:
    radial-gradient(70% 50% at 18% 15%, rgba(177, 114, 255, 0.35), transparent 58%),
    radial-gradient(65% 45% at 88% 12%, rgba(101, 166, 255, 0.28), transparent 55%),
    radial-gradient(80% 60% at 50% 95%, rgba(80, 60, 140, 0.2), transparent 65%),
    linear-gradient(165deg, #050712 0%, #0a1128 48%, #070a16 100%);
}

html[data-theme="neoFrame"][data-background="waves"] .bg-waves::before {
  opacity: 0.42;
}

[data-theme="neoFrame"] .sidebar {
  background: linear-gradient(180deg, rgba(35, 38, 72, 0.88), rgba(14, 16, 34, 0.94));
  border-right-color: rgba(188, 208, 255, 0.16);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

[data-theme="neoFrame"] .main-header {
  background: rgba(19, 23, 46, 0.82);
  border-color: rgba(188, 208, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="neoFrame"] .player-bar,
[data-theme="neoFrame"] .player-bar.glass {
  background: linear-gradient(165deg, rgba(16, 21, 42, 0.96), rgba(10, 13, 29, 0.98));
  border-color: rgba(188, 208, 255, 0.18);
  box-shadow:
    0 -8px 36px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(136, 100, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/*
  Glass card skin only when Cards = Glass (default).
  Flat / bordered must use rules from styles.css without neo fighting them.
*/
html[data-theme="neoFrame"][data-card-style="glass"] .glass {
  background: linear-gradient(165deg, rgba(26, 30, 58, 0.82), rgba(18, 22, 44, 0.88));
  border-color: rgba(188, 208, 255, 0.16);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="neoFrame"] .nav-item.active,
[data-theme="neoFrame"] .browse-filter-pill.active,
[data-theme="neoFrame"] .genre-filter.active {
  background: linear-gradient(135deg, rgba(179, 106, 255, 0.55), rgba(117, 199, 255, 0.42));
  border-color: rgba(232, 191, 255, 0.45);
  box-shadow: 0 8px 22px rgba(140, 97, 255, 0.35);
}