.timeline{position:relative}
/* css/auto-dj.css */
#btnAutoDJ { border-color: #36b3ff; }
#btnAutoDJ:hover { box-shadow: 0 0 0 3px rgba(54,179,255,.18); }

#cardSys .hud-title{ margin-bottom:3px !important; }
#cardSys .sysstats{ gap:3px !important; }
#cardSys .sysline { margin:1px 0 !important; line-height:1.15 !important; }
#cardSys .sysline span { line-height:1.15 !important; }

/* === Smart-Übergang Popup === */
#ai-xfade-popup { 
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  background: rgba(20,20,20,0.95); border: 1px solid #ff8c00;
  border-radius: 12px; padding: 12px 14px; min-width: 260px; display: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
#ai-xfade-popup .ai-title { font-weight: 700; margin-bottom: 6px; color: #ffb357; }
#ai-xfade-popup .ai-lines { font-size: 13px; line-height: 1.25; color: #ddd; }
#ai-xfade-popup .ai-row { display: flex; gap: 6px; margin: 3px 0; }
#ai-xfade-popup .ai-row span { opacity: .8; min-width: 64px; }
#ai-xfade-popup .ai-bar { height: 6px; background: #333; border-radius: 6px; overflow: hidden; margin-top: 8px; }
#ai-xfade-popup .ai-bar-fill { height: 100%; width: 0%; background: #ff8c00; }



/* === Snap-to-Beat Markierung === */
.snapMark{position:absolute;top:0;bottom:0;width:2px;background:#36b3ff;box-shadow:0 0 8px rgba(54,179,255,.65);display:none;z-index:6}

.btn.active{outline:2px solid #36b3ff; box-shadow:0 0 0 3px rgba(54,179,255,.18)}

.track-analysis {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(11, 18, 34, 0.7);
    border-radius: 6px;
    border-left: 3px solid #58e1d3;
    font-size: 12px;
}

.analysis-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.analysis-info span {
    padding: 2px 6px;
    background: rgba(88, 225, 211, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(88, 225, 211, 0.3);
}

.bpm { color: #9fe8ff; font-weight: bold; }
.key { color: #a8ffa8; }
.duration { color: #ffa8a8; }
.loudness { color: #ffd700; }
.cached-badge { color: #00ff00; font-weight: bold; }

@media (max-width: 768px) {
    .analysis-info { gap: 8px; }
    .analysis-info span { font-size: 11px; padding: 1px 4px; }
}