:root{
  --bg:#0b0d12;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.10);
  --text:#e9edf7;
  --muted:#98a2b3;
  --accent:#ffd54a;
  --accent2:#7c3aed;
  --danger:#ef4444;
  --radius:22px;
}

html,body{height:100%}
body{
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 700px at 90% 15%, rgba(255,213,74,.18), transparent 55%),
    radial-gradient(700px 700px at 50% 100%, rgba(59,130,246,.12), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* Bootstrap overrides */
.bg-body-tertiary{ background-color: rgba(12,14,20,.65) !important; }
.navbar{ backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke) !important; }
.nav-link, .navbar-brand{ color: var(--text) !important; }
.nav-link{ opacity:.85 }
.nav-link:hover{ opacity:1 }

.container{ max-width: 1140px; }

.mm-card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,0.03));
  border: 1px solid var(--stroke);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.mm-soft{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}

.mm-title{
  letter-spacing: .2px;
}

.mm-muted{ color: var(--muted); }
.mm-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color: var(--text);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mm-chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }

.mm-btn{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 12px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mm-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.mm-btn-primary{
  background: linear-gradient(135deg, rgba(255,213,74,.95), rgba(255,213,74,.55));
  color: #111827;
  border-color: rgba(255,213,74,.6);
}
.mm-btn-primary:hover{ background: linear-gradient(135deg, rgba(255,213,74,1), rgba(255,213,74,.7)); }

.mm-iconbtn{
  width: 42px; height: 42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mm-iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.mm-iconbtn.active{ border-color: rgba(255,213,74,.65); box-shadow: 0 0 0 3px rgba(255,213,74,.12); }

.mm-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
@media (max-width: 992px){ .mm-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 576px){ .mm-grid{ grid-template-columns: repeat(2, 1fr); } }

.track-card{
  grid-column: span 4;
  padding: 14px;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
@media (max-width: 992px){ .track-card{ grid-column: span 3; } }
@media (max-width: 576px){ .track-card{ grid-column: span 2; } }

.track-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}

.cover{
  width: 56px; height: 56px; border-radius: 16px; overflow:hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 56px;
}
.cover img{ width:100%; height:100%; object-fit:cover; }
.cover-lg{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.cover-lg img{ width:100%; height:100%; object-fit:cover; }

.mm-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-size: 12px;
}

a{ color: var(--text); }
a:hover{ color: #fff; }

/* inputs */
.form-control, .form-select{
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
}
.form-control::placeholder{ color: rgba(233,237,247,.55); }
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,213,74,.55);
  box-shadow: 0 0 0 .25rem rgba(255,213,74,.12);
  color: var(--text);
}

hr{ border-color: rgba(255,255,255,0.10); }

/* Sticky mini player */
.mini-player{
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 1030;
  border-radius: 22px;
  background: rgba(12,14,20,.72);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 10px 12px;
  display: none;
}
.mini-player.show{ display:block; }
.mini-meta{ min-width: 0; }
.mini-title{ font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub{ color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-audio{ width: 100%; height: 38px; }

.toast-container{ position: fixed; top: 76px; right: 16px; z-index: 2000; }