/* Space Music - shared styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#000105;
  --text:#eaeaf9;
  --muted:#b8b8d4;
  --purple:#7c3aed;
  --purple-2:#a78bfa;
  --card:#0a0a18;
  --card-2:#0f0f26;
  --glow: 0 0 0 rgba(124,58,237,0.0);
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(ellipse 60% 30% at 50% 100%, rgba(124,58,237,0.35), rgba(124,58,237,0) 60%),
              radial-gradient(ellipse 35% 18% at 50% 100%, rgba(124,58,237,0.45), rgba(124,58,237,0) 60%),
              #000105;
  overflow-x:hidden;
}

/* star field */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 20%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 60%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 10% 80%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 90% 70%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 60% 10%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 30% 15%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 15% 55%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 55% 85%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 85% 40%, rgba(255,255,255,0.7) 50%, transparent 51%);
  background-repeat:no-repeat;
  animation: twinkle 8s linear infinite;
  z-index:0;
}

@keyframes twinkle{
  0%,100%{ opacity:0.8; }
  50%{ opacity:0.4; }
}

/* buttons */
.btn{
  --ring:0 0 0 rgba(124,58,237,0);
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  color:white;
  font-weight:600;
  border:0;
  border-radius:999px;
  padding:14px 22px;
  box-shadow: 0 8px 25px rgba(124,58,237,0.45);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(124,58,237,0.65);
}
.btn:active{ transform: translateY(0px) scale(.98); }

/* header bar (for library page) */
.header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  padding:18px 18px 12px;
  background:linear-gradient(180deg, rgba(0,0,10,0.9), rgba(0,0,10,0.65) 40%, rgba(0,0,10,0));
  backdrop-filter: blur(6px);
}
.logo{
  position:absolute; left:18px;
  display:flex; align-items:center; gap:10px; color:#ddd;
  font-weight:700;
  letter-spacing:.4px;
  text-decoration:none;
}
.logo .dot{ width:8px; height:8px; border-radius:999px; background:#8b5cf6; box-shadow:0 0 18px #8b5cf6; }

.search{
  width:min(720px, 92vw);
  position:relative;
}
.search input{
  width:100%;
  padding:14px 48px 14px 18px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,0.2);
  background:rgba(10,10,30,0.7);
  color:#EDEAFF;
  outline:none;
  font-weight:500;
  letter-spacing:.2px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.search input::placeholder{ color:#9ca3af; }
.search input:focus{
  border-color: rgba(167,139,250,0.6);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.25);
}
.search .icon{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  opacity:.7;
}

/* grid */
.grid{
  width:min(1160px, 92vw);
  margin: 18px auto 80px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
  z-index:1;
  position:relative;
}

/* Cards (thumbnails) */
.card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:var(--card);
  border:1px solid rgba(167,139,250,0.15);
  height:160px;
  cursor:pointer;
  transform: translateZ(0); /* create stacking context */
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.card img, .card .thumb{
  width:100%; height:100%; object-fit:cover; display:block;
}
.card .title{
  position:absolute; left:12px; bottom:10px;
  font-weight:800; font-size:22px; letter-spacing:.4px;
  color:#111; 
  padding:6px 10px; border-radius:14px;
  background:rgba(255,255,255,.82);
}

/* glow + scale up on hover */
.card::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:19px;
  box-shadow:0 0 0 0 rgba(124,58,237,0);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(167,139,250,0.45);
  box-shadow: 0 14px 35px rgba(124,58,237,0.35), 0 10px 25px rgba(0,0,0,0.45);
}
.card:hover::after{
  box-shadow: 0 0 22px 0 rgba(124,58,237,0.8), 0 0 44px 4px rgba(124,58,237,0.35) inset;
}

/* footer spacing */
.footer-space{ height:72px; }