/*
  Neo frame — charcoal + lavender accent (html[data-theme="neoFrame"]).
  Loads after styles.css. Uses tokens so Accent / Background / Cards keep working.
  Accent cleared (no data-accent attr) → neo lavender defaults below.
*/

html[data-theme="neoFrame"] {
  --bg-dark: #000000;
  --bg-panel: rgba(18, 18, 20, 0.94);
  --bg-card: rgba(28, 28, 32, 0.92);
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --border: rgba(255, 255, 255, 0.09);
  --blue: #7dd3fc;
}

/* Default lavender accent only when user did not pick an accent */
html[data-theme="neoFrame"]:not([data-accent]) {
  --purple: #c57dff;
  --purple-glow: rgba(197, 125, 255, 0.5);
  --purple-light: #e9d4ff;
  --icon-tint-filter: brightness(0) saturate(100%) invert(0.72) sepia(0.45) saturate(6) hue-rotate(235deg);
}

/* ── Canvas: neo wash on every Background mode (does not replace preset bases) ── */
html[data-theme="neoFrame"] .bg-waves::after {
  opacity: 0.045;
  mix-blend-mode: screen;
}

html[data-theme="neoFrame"][data-background="waves"] .bg-waves {
  background: #000000;
}
html[data-theme="neoFrame"][data-background="waves"] .bg-waves::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 100% 58% at 50% -12%, rgba(197, 125, 255, 0.11) 0%, transparent 52%),
    linear-gradient(180deg, #050505 0%, #000000 100%);
}

/* Other Background presets keep full control from styles.css; ::after adds a light neo air */

html[data-theme="neoFrame"] .bg-orb-1 {
  background: radial-gradient(circle, rgba(197, 125, 255, 0.14) 0%, transparent 72%);
  opacity: 0.55;
}
html[data-theme="neoFrame"] .bg-orb-2 {
  background: radial-gradient(circle, rgba(125, 211, 252, 0.1) 0%, transparent 72%);
  opacity: 0.45;
}
html[data-theme="neoFrame"] .bg-orb-3 {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 72%);
  opacity: 0.4;
}

/* Sidebar / header: crisp charcoal + hairline */
html[data-theme="neoFrame"] .sidebar {
  background: color-mix(in srgb, var(--bg-panel) 97%, var(--purple) 3%);
  border-right: 1px solid color-mix(in srgb, var(--border) 60%, var(--purple) 40%);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.05),
    8px 0 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="neoFrame"] .main-header {
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--purple) 45%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="neoFrame"] .player-bar,
html[data-theme="neoFrame"] .player-bar.glass {
  background: color-mix(in srgb, var(--bg-panel) 90%, black) !important;
  border-top: 1px solid color-mix(in srgb, var(--purple) 25%, var(--border)) !important;
  box-shadow:
    0 -18px 56px rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(197, 125, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Active nav + filters — defined gradient pill */
html[data-theme="neoFrame"] .nav-item.active,
html[data-theme="neoFrame"] .browse-filter-pill.active,
html[data-theme="neoFrame"] .genre-filter.active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--purple) 55%, rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--blue) 35%, rgba(255, 255, 255, 0.06)));
  border: 1px solid color-mix(in srgb, var(--purple-light) 40%, transparent);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 28px color-mix(in srgb, var(--purple-glow) 45%, transparent);
}

/* ── Cards: all three modes (glass / flat / bordered) ── */
html[data-theme="neoFrame"][data-card-style="glass"] .glass {
  background: color-mix(in srgb, var(--bg-card) 92%, var(--purple) 8%);
  border: 1px solid color-mix(in srgb, var(--border) 50%, var(--purple) 50%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="neoFrame"][data-card-style="flat"] .glass {
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--purple) 30%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="neoFrame"][data-card-style="bordered"] .glass {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--border));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 14px 42px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Premium ◐ (body.snr-dark) uses !important — restore neo chrome when both are on */
html[data-theme="neoFrame"] body.snr-dark .sidebar {
  background: color-mix(in srgb, var(--bg-panel) 97%, var(--purple) 3%) !important;
  border-right: 1px solid color-mix(in srgb, var(--border) 60%, var(--purple) 40%) !important;
}

html[data-theme="neoFrame"] body.snr-dark .bg-waves {
  opacity: 1 !important;
}

html[data-theme="neoFrame"] body.snr-dark .bg-orb {
  opacity: 0.38 !important;
}

html[data-theme="neoFrame"] body.snr-dark .nav-item.active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--purple) 55%, rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--blue) 35%, rgba(255, 255, 255, 0.06))) !important;
  border: 1px solid color-mix(in srgb, var(--purple-light) 35%, transparent) !important;
  color: #fff !important;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--purple-glow) 40%, transparent) !important;
}

html[data-theme="neoFrame"] body.snr-dark .player-bar,
html[data-theme="neoFrame"] body.snr-dark .player-bar.glass {
  background: color-mix(in srgb, var(--bg-panel) 90%, black) !important;
  border-top: 1px solid color-mix(in srgb, var(--purple) 22%, var(--border)) !important;
}