/* Tracklist — now playing + numbered playlist */
.epg-tracks__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 34px; align-items: stretch; }
.epg-tracks__now { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, var(--accent), #5d00fe); color: #fff; }
.epg-tracks__cover { position: relative; display: block; aspect-ratio: 1 / 1; margin: 18px 18px 0; overflow: hidden; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
.epg-tracks__cover img, .epg-tracks__cover .epj-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.epg-tracks__now:hover .epg-tracks__cover img { transform: scale(1.04); }
.epg-tracks__play { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--accent-text, var(--accent)); font-size: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .25s; }
.epg-tracks__now:hover .epg-tracks__play { transform: scale(1.08); }
.epg-tracks__now-body { padding: 20px 24px 26px; }
.epg-tracks__badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; }
.epg-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.epg-eq i { display: block; width: 3px; height: 100%; background: currentColor; border-radius: 2px; animation: epg-eq 1s ease-in-out infinite; }
.epg-eq i:nth-child(2) { animation-delay: -.4s; } .epg-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes epg-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.epg-tracks__now-title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.epg-tracks__now-title a { color: #fff; }
.epg-tracks__now .epg-tracks__artist { color: rgba(255, 255, 255, .8); }
.epg-tracks__list { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.epg-tracks__row { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 12px; transition: background .2s; }
.epg-tracks__row::marker { content: none; }
.epg-tracks__row:hover { background: var(--bg-section-alt); }
.epg-tracks__n { font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--text-main) 66%, transparent); font-variant-numeric: tabular-nums; }
.epg-tracks__thumb { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; }
.epg-tracks__thumb img, .epg-tracks__thumb .epj-ph { width: 100%; height: 100%; object-fit: cover; }
.epg-tracks__thumb i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 75%, transparent); color: #fff; font-size: 24px; opacity: 0; transition: opacity .2s; }
.epg-tracks__row:hover .epg-tracks__thumb i { opacity: 1; }
.epg-tracks__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.epg-tracks__title { overflow: hidden; color: var(--text-main); font-size: 15.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.epg-tracks__title:hover { color: var(--accent-text, var(--accent)); }
.epg-tracks__artist { font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--text-main) 66%, transparent); }
.epg-tracks__dur { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--text-main) 66%, transparent); font-variant-numeric: tabular-nums; }
@media (max-width: 992px) { .epg-tracks__grid { grid-template-columns: minmax(0, 1fr); } .epg-tracks__now { flex-direction: row; align-items: center; } .epg-tracks__cover { flex: 0 0 180px; margin: 16px; } .epg-tracks__play { width: 44px; height: 44px; font-size: 22px; } }
@media (max-width: 560px) { .epg-tracks__now { flex-direction: column; align-items: stretch; } .epg-tracks__cover { flex: none; } .epg-tracks__row { grid-template-columns: 24px 52px minmax(0, 1fr) auto; gap: 12px; padding: 10px 6px; } .epg-tracks__thumb { width: 52px; height: 52px; } }
.epg-tracks__row + .epg-tracks__row { box-shadow: 0 -1px 0 var(--border); }
.epg-tracks__row:hover, .epg-tracks__row:hover + .epg-tracks__row { box-shadow: none; }