.music-list{display:grid;gap:14px;max-width:720px;margin:0 auto}
.track{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid rgba(148,163,184,.25);border-radius:16px;background:rgba(15,23,42,.6)}
html[data-theme="light"] .track{background:#fff;border-color:#d5deea}
.track button{width:46px;height:46px;border-radius:50%;border:0;background:#00d4ff;color:#0a0f1a;font-size:18px;cursor:pointer;flex:none}
.track h3{margin:0 0 4px;font-size:17px}
.track p{margin:0;font-size:13px;opacity:.7}
.track audio{display:none}
.track.playing{border-color:#00d4ff}
.hero-slider{position:relative;max-width:920px;margin:0 auto 32px;padding:12px;border-radius:24px;border:1px solid rgba(0,212,255,.25);background:rgba(15,23,42,.55);box-shadow:0 20px 60px rgba(0,212,255,.12);overflow:hidden}
html[data-theme="light"] .hero-slider{background:#fff;border-color:#d5deea}
.slides{position:relative;aspect-ratio:16/8;border-radius:16px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.cap{position:absolute;right:16px;bottom:14px;padding:6px 14px;border-radius:999px;background:rgba(10,15,26,.7);color:#a5f3fc;font-size:14px}
.nav-arr{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,212,255,.5);background:rgba(10,15,26,.6);color:#00d4ff;font-size:24px;cursor:pointer;line-height:1}
.nav-arr.prev{right:22px}.nav-arr.next{left:22px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(148,163,184,.5);cursor:pointer;padding:0}
.dot.on{background:#00d4ff;width:24px;border-radius:6px}