:root {
    --bg-dark: #121212;
    --card-bg: #1a1a1a;
    --border-color: #333;
    --accent-blue: #007bff;
    --text-main: #fff;
    --text-sub: #aaa;
}

body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Segoe UI', sans-serif; margin: 0; padding: 20px; }

.track-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 8px;
}

/* Cover Art Overlay */
.cover-container { position: relative; width: 60px; height: 60px; cursor: pointer; }
.track-cover { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.play-overlay { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; 
    opacity: 0; transition: opacity 0.2s; border-radius: 4px; 
}
.cover-container:hover .play-overlay { opacity: 1; }
.play-icon { color: white; font-size: 20px; }

/* Text and Controls */
.track-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.track-title { margin: 0; font-size: 1rem; }
.track-id { margin: 0; color: var(--text-sub); font-size: 0.75rem; }

.download-controls { display: flex; gap: 10px; font-size: 0.8rem; color: var(--text-sub); }

.btn-download { background: var(--accent-blue); color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.view-details-link { color: var(--accent-blue); text-decoration: none; font-size: 0.9rem; margin-left: 10px; }