:root{--bg:#0a0a0f;--p:#00e5ff;--s:#ff4dd8;--t:#e8f1ff;--m:#a6b0cf;--r:16px}
body{margin:0;font-family:system-ui;background:var(--bg);color:var(--t)}
.container{width:min(1100px,92%);margin:auto}
header,footer{text-align:center;padding:24px 0}
.brand{font-size:1.9rem;color:var(--p);text-shadow:0 0 10px rgba(0,229,255,.9)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:#111;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.35)}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover}
.meta{padding:12px}
.btn{display:inline-block;padding:9px 14px;border-radius:12px;text-decoration:none;color:#021217;background:linear-gradient(90deg,var(--p),var(--s));font-weight:700}
footer{color:var(--m)}
.song-card{display:grid;grid-template-columns:360px 1fr;gap:18px;padding:18px;background:#111;border-radius:var(--r)}
@media(max-width:768px){.song-card{grid-template-columns:1fr}.cover{margin-bottom:12px}}
.cover{width:100%;border-radius:14px}
.breadcrumb{padding:12px 0}.breadcrumb ol{display:flex;gap:8px;list-style:none;padding:0;margin:0;color:var(--m)}.breadcrumb a{color:var(--p);text-decoration:none}.breadcrumb li::after{content:'›';margin-left:8px;opacity:.6}.breadcrumb li:last-child::after{content:''}
.pagination{display:flex;gap:6px;justify-content:center;margin:20px 0}.page{background:linear-gradient(90deg,var(--p),var(--s));border:none;border-radius:8px;color:#021217;font-weight:700;padding:6px 12px;cursor:pointer}.page.active{filter:brightness(1.2)}
.related{margin-top:30px}.related h3{margin-bottom:10px}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}



.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.cat-card {
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(255,77,216,0.1));
  border: 2px solid rgba(0,229,255,0.6);
  text-align: center;
  padding: 40px 20px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--p);
  cursor: pointer;
  transition: .3s;
  text-shadow: 0 0 8px rgba(0,229,255,.8), 0 0 18px rgba(255,77,216,.6);
}
.cat-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 0 25px rgba(0,229,255,.8), 0 0 35px rgba(255,77,216,.6);
}
.cat-card a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.brand a{color:inherit;text-decoration:none}
.brand a:hover{text-shadow:0 0 8px rgba(0,229,255,.8)}

.brand a{color:var(--p);text-decoration:none}
.brand a:hover{text-shadow:0 0 12px rgba(0,229,255,.8),0 0 22px rgba(255,77,216,.6)}
audio{width:100%;margin:15px 0;filter:drop-shadow(0 0 8px rgba(0,229,255,.6)) drop-shadow(0 0 16px rgba(255,77,216,.4))}
.download-info{margin:20px 0;font-size:1rem;line-height:1.6}
.download-btn{display:inline-block;padding:12px 24px;background:#0ff;color:#000;font-weight:700;
border-radius:var(--r);box-shadow:0 0 12px #0ff;transition:.3s;text-decoration:none}
.download-btn:hover{box-shadow:0 0 20px #ff4dd8,0 0 30px #0ff}
.related{margin-top:40px}
.related h3{margin-bottom:12px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px}
.related-card{background:#111;border:1px solid rgba(0,229,255,.4);border-radius:var(--r);padding:12px;text-align:center;
transition:.3s}
.related-card:hover{transform:translateY(-4px);box-shadow:0 0 16px rgba(0,229,255,.6)}
.related-card a{color:var(--p);text-decoration:none;font-weight:600}

header .brand a { color: var(--p); text-decoration: none; }
.neon-player audio { width: 100%; outline: none; filter: drop-shadow(0 0 8px rgba(0,229,255,.8)); margin: 20px 0; }
.related {margin-top:40px;}
.related h3 {margin-bottom:12px;color:var(--p);text-shadow:0 0 6px rgba(0,229,255,.8);}
.related-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;}
.related-card {background:#111;border:1px solid rgba(0,229,255,.3);border-radius:var(--r);padding:10px;text-align:center;
 transition:.3s;cursor:pointer;}
.related-card:hover {box-shadow:0 0 15px rgba(0,229,255,.6);transform:translateY(-4px);}
.related-card a {color:var(--p);text-decoration:none;font-weight:600;}
.neon-player {display:flex;align-items:center;gap:12px;margin:20px 0;color:#fff;}
.neon-btn {
  background: linear-gradient(135deg,#00e5ff,#ff4dd8);
  border: none;
  color: #fff;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  text-shadow: 0 0 8px #fff;
  box-shadow: 0 0 12px rgba(0,229,255,.7),0 0 18px rgba(255,77,216,.6);
  transition:.2s;
}
.neon-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(0,229,255,.9),0 0 35px rgba(255,77,216,.8);
}
.progress-bar {
  flex:1;
  height:6px;
  background:rgba(255,255,255,.2);
  border-radius:5px;
  overflow:hidden;
}
#progress {
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#00e5ff,#ff4dd8);
  box-shadow:0 0 12px #00e5ff,0 0 18px #ff4dd8;
}
#time {
  font-size:.9rem;
  text-shadow:0 0 6px #00e5ff,0 0 8px #ff4dd8;
}







@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

.site-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: 2px;
  text-align: center;
  margin: 10px 0;
}
.site-logo a {
  text-decoration: none;
}
.site-logo .pink {
  color: #ff4dd8;
  font-weight: 900;
  text-shadow: 
    0 0 10px #ff4dd8,
    0 0 20px #ffffff,
    0 0 30px #ff4dd8;
}
.site-logo .blue {
  color: #00e5ff;
  font-weight: 900;
  text-shadow: 
    0 0 10px #00e5ff,
    0 0 20px #ffffff,
    0 0 30px #00e5ff;
}
.site-logo span:hover {
  text-shadow:
    0 0 15px #fff,
    0 0 30px currentColor,
    0 0 45px currentColor;
}