/* ============================================================
   SPOVO — NEON layer (loaded last, overrides the base look).
   Goal: keep the existing glass structure, push it toward a
   vivid cyan→violet→magenta neon vibe with an animated aurora.
   Pure CSS, additive — safe to remove to revert.
   ============================================================ */

:root {
  /* deeper, cooler base */
  --bg: #050509;
  --bg-grad: #0a0a14;
  --panel: #0b0b13;
  --elev: #13131c;
  --elev2: #1c1c28;

  /* neon accents */
  --accent: #a274ff;          /* violet */
  --accent-press: #8b4dff;
  --accent2: #ff4d94;         /* magenta */
  --neon: #2fe6ff;            /* cyan highlight */
  --grad: linear-gradient(135deg, #2fe6ff 0%, #a274ff 52%, #ff4d94 100%);
  --glow: 150, 110, 255;      /* rgb for soft glows */
  --like: #ff4d7d;

  --range-fill: #b79bff;      /* neon-ish progress fill */

  /* glass: side/player stay translucent, but the MAIN reading area is kept
     nearly opaque so track text is always legible over the album-art blur */
  --glass-side: rgba(16,16,28,.66);
  --glass-main: rgba(11,11,20,.86);
  --glass-player: rgba(10,10,18,.7);
  --glass-card: rgba(26,26,42,.72);
  --glass-border: rgba(160,140,255,.18);
  --glass-sheen: rgba(255,255,255,.08);
}

html.light {
  --accent: #7a3cff;
  --accent2: #ff3d86;
  --neon: #00b8d4;
  --grad: linear-gradient(135deg, #00b8d4 0%, #7a3cff 52%, #ff3d86 100%);
  --range-fill: #7a3cff;
  --glass-border: rgba(122,60,255,.22);
  --glass-side: rgba(255,255,255,.82);
  --glass-main: rgba(248,248,253,.92);
  --glass-player: rgba(255,255,255,.86);
}

/* ---------- readability: tame the album-art blur ---------- */
/* It used to bleed huge dark blobs through the panel and kill the text.
   Now it's a faint, dim ambiance only — the opaque --glass-main does the rest. */
#bg-blur { filter: blur(72px) saturate(1.7) brightness(.5); transform: scale(1.25); }
#bg-blur.on { opacity: .28; }
html.light #bg-blur { filter: blur(72px) saturate(1.6) brightness(1.05); }
html.light #bg-blur.on { opacity: .35; }

/* ---------- animated aurora behind the glass ---------- */
body::after {
  content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 32% at 18% 22%, rgba(47,230,255,.20), transparent 62%),
    radial-gradient(40% 38% at 82% 18%, rgba(162,116,255,.22), transparent 64%),
    radial-gradient(46% 44% at 60% 92%, rgba(255,77,148,.18), transparent 64%);
  filter: blur(14px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(4%, 3%, 0)  scale(1.18) rotate(8deg); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.10) rotate(-6deg); }
}
html.light body::after { opacity: .7; }

/* keep real content above the aurora.
   NOTE: do NOT set position on .player / .bottom-nav — on mobile they must stay
   position:fixed. They already sit above the aurora via their own z-index. */
#app, .topbar, .view { position: relative; z-index: 1; }
.player, .bottom-nav { z-index: 6; }

/* ---------- logo: tighter neon glow ---------- */
.logo { filter: drop-shadow(0 0 14px rgba(var(--glow), .45)); }

/* ---------- sidebar nav: brighter active glow ---------- */
.sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(47,230,255,.20), rgba(162,116,255,.26) 55%, rgba(255,77,148,.18));
  border-color: rgba(var(--glow), .45);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 8px 26px rgba(var(--glow), .30);
}
.nav-item.active .ic { filter: drop-shadow(0 0 8px rgba(var(--glow), .6)); }

/* ---------- play button: neon gradient + glow ---------- */
.cbtn.play {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 26px rgba(var(--glow), .5);
}
.cbtn.play:hover { color: #fff; transform: scale(1.08); filter: brightness(1.08); }
.cbtn.active { color: var(--neon); filter: drop-shadow(0 0 6px rgba(47,230,255,.6)); }

/* ---------- now playing art: glowing ring while playing ---------- */
.np-art-wrap {
  box-shadow: 0 0 0 1px var(--glass-border);
  transition: box-shadow .3s ease;
}
body.playing .np-art-wrap {
  box-shadow: 0 0 0 1.5px rgba(var(--glow), .6), 0 0 24px rgba(var(--glow), .35);
}

/* ---------- search / filter focus: neon ring ---------- */
.search-box input:focus,
.search-bar-big input:focus,
.search-panel-head input:focus,
.lib-filter:focus,
.auth-card input:focus {
  border-color: rgba(var(--glow), .7);
  box-shadow: 0 0 0 3px rgba(var(--glow), .18);
}

/* ---------- source toggle "on": gradient pill ---------- */
.src.on {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--glow), .35);
}

/* ---------- track rows: subtle neon edge on playing ---------- */
.track.playing {
  background: linear-gradient(90deg, rgba(var(--glow), .16), rgba(var(--glow), .04));
  box-shadow: inset 2px 0 0 var(--accent);
}
.track.playing .t-title {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- home cards: lift on hover ---------- */
.home-card { transition: background .15s, transform .15s; }
.home-card:hover { transform: translateY(-4px); }
.home-card-art { transition: box-shadow .2s; }
.home-card:hover .home-card-art { box-shadow: 0 10px 30px rgba(var(--glow), .3); }
.home-card-play { background: var(--grad); box-shadow: 0 6px 20px rgba(var(--glow), .5); }

/* ---------- playlist cards ---------- */
.pl-card { transition: background .15s, transform .15s; }
.pl-card:hover { transform: translateY(-3px); }

/* ---------- toast: glassy neon ---------- */
#toast {
  background: var(--glass-card);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 10px 36px rgba(var(--glow), .25);
}

/* ---------- mini accent button & wave CTA glow ---------- */
.mini-btn.accent, .wave-start { box-shadow: 0 8px 28px rgba(var(--glow), .4); }

/* ---------- range thumb: neon ---------- */
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(var(--glow), .15), 0 1px 6px rgba(0,0,0,.5);
}

/* ---------- neon scrollbar ---------- */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--glow),.5), rgba(255,77,148,.4));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--glow),.75), rgba(255,77,148,.6));
  background-clip: padding-box;
}

/* ---------- search tab: quick-search chips ---------- */
.search-suggest { margin: 4px 0 18px; }
.sq-title {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted2); margin: 0 2px 10px;
}
.sq-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.sq-chip {
  background: var(--glass-input);
  border: 1px solid var(--glass-border);
  color: var(--txt); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: transform .1s, border-color .14s, background .14s, box-shadow .14s;
}
.sq-chip:hover {
  border-color: rgba(var(--glow), .55);
  background: linear-gradient(135deg, rgba(47,230,255,.14), rgba(162,116,255,.18));
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 6px 18px rgba(var(--glow), .25);
}
.sq-chip:active { transform: scale(.94); }

/* ---------- quality selector: modern glass pill (desktop + mobile) ---------- */
.quality-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--glass-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a274ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--txt);
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  padding: 7px 30px 7px 14px;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  cursor: pointer;
  transition: border-color .14s, background-color .14s, box-shadow .14s, transform .1s;
}
.quality-select:hover { border-color: rgba(var(--glow), .55); }
.quality-select:active { transform: scale(.95); }
.quality-select:focus {
  outline: none; border-color: rgba(var(--glow), .7);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 0 0 3px rgba(var(--glow), .18);
}
.quality-select option { background: #14141c; color: var(--txt); font-weight: 600; }

/* ---------- mobile: compact quality pill living in the top player row ---------- */
body.mobile .player-top .quality-select,
body.mobile .player-top .qsel {
  flex: 0 0 auto;
}

/* ---------- custom quality dropdown (themed, replaces native <select>) ---------- */
.qsel { position: relative; display: inline-flex; }
.qsel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-input); border: 1px solid var(--glass-border);
  color: var(--txt); font-size: 12px; font-weight: 700; letter-spacing: .2px;
  padding: 7px 12px 7px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: border-color .14s, transform .1s, background .14s;
}
.qsel-btn:hover { border-color: rgba(var(--glow), .55); }
.qsel-btn:active { transform: scale(.95); }
.qsel-btn svg { width: 13px; height: 13px; color: var(--accent); transition: transform .2s; }
.qsel.open .qsel-btn { border-color: rgba(var(--glow), .6); }
.qsel.open .qsel-btn svg { transform: rotate(180deg); }
.qsel-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 134px; padding: 6px; display: none; z-index: 80;
  background: var(--glass-card);
  backdrop-filter: blur(26px) saturate(2); -webkit-backdrop-filter: blur(26px) saturate(2);
  border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-sheen);
}
.qsel.open .qsel-menu { display: block; animation: kDrop .16s ease; }
.qsel-opt {
  padding: 11px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--txt); cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.qsel-opt:hover { background: var(--hover); }
.qsel-opt.on {
  background: linear-gradient(135deg, rgba(47,230,255,.16), rgba(162,116,255,.24));
  box-shadow: inset 0 0 0 1px rgba(var(--glow), .4);
}
body.mobile .qsel-btn { font-size: 11px; padding: 6px 9px 6px 12px; gap: 6px; }
body.mobile .qsel-menu { min-width: 124px; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
}