@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════
   MUJIX — DEFAULT THEME
   Modern dark glass. Purple/violet accent. Soft depth.
   ═══════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg:            #08060f;
  --s1:            rgba(255,255,255,.038);
  --s2:            rgba(255,255,255,.07);
  --b1:            rgba(255,255,255,.08);
  --b2:            rgba(255,255,255,.16);

  /* Accent */
  --ac:            #a259ff;
  --ac-h:          #b474ff;
  --glow:          rgba(162,89,255,.22);
  --pk:            #ff3cac;
  --pk-h:          #ff5ebd;

  /* Text */
  --tx:            #f0edfb;
  --dm:            rgba(240,237,251,.50);
  --mt:            rgba(240,237,251,.24);

  /* Panels */
  --panel:         rgba(22,16,42,.94);
  --panel-border:  rgba(162,89,255,.18);

  /* Shape */
  --r:             12px;
  --rl:            20px;
  --rxl:           28px;

  /* Typography */
  --font-body:     'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:  'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'SF Mono', 'Fira Code', monospace;
  --fw-normal:     400;
  --fw-bold:       700;
  --fw-black:      900;
  --ls-tight:      -.025em;
  --ls-wide:       .09em;

  /* Animation */
  --anim-dur:      .32s;
  --anim-ease:     cubic-bezier(.4,0,.2,1);
  --anim-bounce:   cubic-bezier(.34,1.56,.64,1);

  /* Gradients / Shadows */
  --logo-gradient: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
  --grad-primary:  linear-gradient(135deg, var(--ac), var(--pk));
  --shadow-sm:     0 2px 10px rgba(0,0,0,.35);
  --shadow-md:     0 6px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(162,89,255,.1);
  --glass-blur:    28px;
  --glass-bg:      rgba(8,5,20,.92);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:           #f7f5fc;
  --s1:           rgba(0,0,0,.036);
  --s2:           rgba(0,0,0,.068);
  --b1:           rgba(0,0,0,.08);
  --b2:           rgba(0,0,0,.16);
  --ac:           #7c3aed;
  --ac-h:         #6d28d9;
  --glow:         rgba(124,58,237,.18);
  --pk:           #db2777;
  --tx:           #1a1025;
  --dm:           rgba(26,16,37,.50);
  --mt:           rgba(26,16,37,.24);
  --panel:        rgba(255,255,255,.96);
  --panel-border: rgba(124,58,237,.15);
  --glass-bg:     rgba(255,255,255,.80);
  --shadow-md:    0 6px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(124,58,237,.08);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; overflow: hidden; touch-action: manipulation; -webkit-overflow-scrolling: touch }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0; padding: 0;
  position: fixed; width: 100%; height: 100%; overflow: hidden;
}
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
#app { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch }
@media(display-mode:standalone),(display-mode:fullscreen),(display-mode:window-controls-overlay) {
  body { height: 100vh; padding-top: 0; padding-bottom: 0 }
}
@media(min-width:1280px) { :focus-visible { outline: 3px solid var(--ac) !important; outline-offset: 3px !important } }

/* ── Animations ── */
@keyframes au { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes asc { from { opacity:0; transform:scale(.93) } to { opacity:1; transform:scale(1) } }
@keyframes lp { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,10px) } to { opacity:1; transform:translate(-50%,0) } }
.au  { animation: au  var(--anim-dur) var(--anim-ease) both }
.au1 { animation: au  var(--anim-dur) .08s var(--anim-ease) both }
.au2 { animation: au  var(--anim-dur) .16s var(--anim-ease) both }
.asc { animation: asc .26s var(--anim-bounce) both }

/* ── Glass ── */
.gl {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--rl);
  transition: border-color var(--anim-dur), background var(--anim-dur), box-shadow var(--anim-dur);
}
.gl:hover {
  border-color: var(--b2);
  background: var(--s2);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.gl-d {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgba(162,89,255,.18);
  border-radius: var(--rl);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .gl { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.07) }
[data-theme="light"] .gl:hover { background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.12) }
[data-theme="light"] .gl-d { background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.09) }

/* ── Inputs ── */
.inp {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--b1);
  color: var(--tx);
  padding: 11px 15px;
  border-radius: var(--r);
  width: 100%; outline: none;
  font-family: var(--font-body);
  font-size: .925rem;
  transition: border-color var(--anim-dur), box-shadow var(--anim-dur), background var(--anim-dur);
}
.inp:focus {
  border-color: var(--ac);
  background: rgba(162,89,255,.06);
  box-shadow: 0 0 0 3px var(--glow);
}
.inp::placeholder { color: var(--mt) }
[data-theme="light"] .inp { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.12) }
[data-theme="light"] .inp:focus { background: #fff; border-color: var(--ac); box-shadow: 0 0 0 3px var(--glow) }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; font-family: var(--font-body); font-weight: var(--fw-bold);
  border: none; cursor: pointer;
  transition: all .18s;
  border-radius: var(--r);
  padding: 10px 20px; font-size: .875rem;
  text-decoration: none; letter-spacing: .01em; white-space: nowrap;
}
.btn:active { transform: scale(.96) }
.btn-p {
  background: var(--ac); color: #fff;
  box-shadow: 0 4px 14px var(--glow);
}
.btn-p:hover {
  background: var(--ac-h);
  box-shadow: 0 6px 22px rgba(162,89,255,.42);
  transform: translateY(-1px);
}
.btn-g {
  background: var(--s1); color: var(--dm);
  border: 1px solid var(--b1);
}
.btn-g:hover { color: var(--tx); background: var(--s2); border-color: var(--b2) }
.btn-r { background: rgba(239,68,68,.1); color: #fca5a5; border: 1px solid rgba(239,68,68,.2) }
.btn-r:hover { background: rgba(239,68,68,.18) }
.btn-pk {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(255,60,172,.22);
}
.btn-pk:hover { box-shadow: 0 6px 22px rgba(255,60,172,.38); transform: translateY(-1px) }
[data-theme="light"] .btn-g { background: rgba(0,0,0,.05); color: var(--dm); border-color: rgba(0,0,0,.12) }
[data-theme="light"] .btn-g:hover { background: rgba(0,0,0,.09); color: var(--tx); border-color: rgba(0,0,0,.18) }

/* ── Nav ── */
.nav-a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--r);
  font-size: .865rem; font-weight: 600;
  color: var(--dm); transition: all .15s;
  text-decoration: none; border: 1px solid transparent;
}
.nav-a:hover { color: var(--tx); background: var(--s1) }
.nav-a.on { color: #d8b4fe; background: rgba(162,89,255,.12); border-color: rgba(162,89,255,.22) }
[data-theme="light"] .nav-a.on { color: var(--ac); background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.18) }

/* ── Labels / Badges ── */
.lbl { font-size: .67rem; font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--mt); display: block; margin-bottom: 8px }
.logo {
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  background: var(--logo-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.badge { font-size: .64rem; font-weight: var(--fw-black); letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px }
.bp { background: rgba(162,89,255,.14); color: #d8b4fe; border: 1px solid rgba(162,89,255,.22) }
.bb { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.22) }
.bg2 { background: rgba(34,197,94,.1); color: #86efac; border: 1px solid rgba(34,197,94,.2) }
[data-theme="light"] .lbl { color: rgba(26,16,37,.48) }
[data-theme="light"] .bp { color: #7c3aed; background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.22) }
[data-theme="light"] .bb { color: #2563eb; background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.2) }
[data-theme="light"] .bg2 { color: #16a34a; background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.2) }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(162,89,255,.35); border-radius: 10px }
::-webkit-scrollbar-thumb:hover { background: rgba(162,89,255,.6) }

/* ── Song cards ── */
.song-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); transition: background .15s; cursor: default }
.song-row:hover { background: var(--s2) }
.song-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,.06); flex-shrink: 0 }
.song-title { font-size: .875rem; font-weight: var(--fw-bold); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.song-sub { font-size: .72rem; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
[data-theme="light"] .song-thumb { background: rgba(0,0,0,.08) }

/* ── Play Now button — default is already correct via base class ── */

/* ── Light misc ── */
[data-theme="light"] select { background: rgba(255,255,255,.9) !important; color: var(--tx) !important; border-color: rgba(0,0,0,.14) !important }
[data-theme="light"] input[type="number"] { background: rgba(255,255,255,.9) !important; border-color: rgba(0,0,0,.14) !important }