/* Файл: assets/css/tracklist.css (Baseline v3.9 - Форсированный ярко-желтый цвет иконок) */

.upload-form-container h3, #boosted-tracks-container h2, .tracklist h2 {
    text-align: center; width: 100%; margin-bottom: 2rem !important; display: block; color: #fff;
}
.tracklist-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; width: 100%; position: relative; min-height: 50px;
}
.tracklist-header h2 { margin: 0 !important; color: #fff; flex: 1; text-align: left; }

.track-search-input {
    background: #11111e; border: 1px solid #363377; padding: 10px 15px; border-radius: 4px;
    color: #fff; width: 220px; outline: none; transition: 0.3s; font-size: 0.85rem; z-index: 5;
}
.track-search-input:focus { border-color: var(--accent-color); box-shadow: 0 0 10px rgba(187, 134, 252, 0.2); }

.tracklist-scroll-container { 
    max-height: 590px; 
    overflow-y: auto; 
    padding: 15px; 
    background: rgba(20,20,40,0.4); 
    border-radius: 8px; 
    border: 2px solid #363377; 
}
.tracklist-scroll-container::-webkit-scrollbar { width: 10px; }
.tracklist-scroll-container::-webkit-scrollbar-track { background: #0c0c14; }
.tracklist-scroll-container::-webkit-scrollbar-thumb { background: #4a4a8a; border-radius: 5px; border: 2px solid #0c0c14; }
.tracklist-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

.track-item { display: flex; align-items: center; background-color: #1a1a2e; border-radius: 8px; margin-bottom: 12px; padding: 0 20px; height: 85px; border: 1px solid #282845; gap: 15px; position: relative; transition: all 0.3s ease; }
.track-item.boosted { background: linear-gradient(145deg, #1e1e36, #2a2a4a); border: 1px solid #FFD700; }

.track-item.highlighted {
    border: 1.5px solid #00f2ff !important;
    background: linear-gradient(145deg, #1a1a2e, #102e33) !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.25);
    animation: pulse-cyan 3s infinite;
}
@keyframes pulse-cyan {
    0% { box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 242, 255, 0.4); }
    100% { box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); }
}

.track-play-button {
    width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--accent-color); background: rgba(187, 134, 252, 0.1);
    color: var(--accent-color); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.track-play-button:hover { background-color: var(--accent-color); color: #000; box-shadow: 0 0 10px var(--accent-color); }

.track-info-zone { flex: 1; min-width: 0; }
.track-title-row { font-weight: bold; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.track-author-row { font-size: 0.85rem; color: #FFD54F; margin-top: 2px; }
.track-author-row a { color: inherit; text-decoration: none; }

/* ФОРСИРОВАННЫЙ ЯРКО-ЖЕЛТЫЙ ЦВЕТ ДЛЯ ИКОНОК */
.track-details-link-new i, 
.download-button-new i,
.legend-item i { 
    color: #FFD700 !important; 
}

.track-details-link-new:hover, 
.download-button-new:hover { 
    transform: scale(1.2); 
    text-shadow: 0 0 10px #FFD700; 
}

.download-button-new { font-size: 1.2rem; display: flex; align-items: center; }

.track-media-core {
    position: absolute; right: 400px; width: 120px; height: 65px; background: rgba(0,0,0,0.6);
    border: 1px solid #334; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; color: #88e5ff; text-align: center; text-decoration: none; overflow: hidden; transition: 0.2s; line-height: 1.3; padding: 2px;
}
.track-media-core:hover { border-color: var(--accent-color); }
.track-media-core.has-video { padding: 0; cursor: pointer; }
.track-media-core.has-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: 0.3s; }
.track-media-core.has-video:hover img { opacity: 0.9; }

.track-rating-zone { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.vote-count { color: #fff; font-weight: bold; }
.vote-button { background: none; border: 1px solid #444; width: 38px; height: 38px; border-radius: 50%; color: #777; cursor: pointer; transition: 0.2s; }
.vote-button.voted { background: #ff7b7b; border-color: #ff7b7b; color: #fff; }

/* Уведомления (Alerts) */
.alert {
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
}
.alert.success { background-color: #2e7d32; color: #fff; border: 1px solid #4caf50; }
.alert.error { background-color: #c62828; color: #fff; border: 1px solid #f44336; }

/* Расшифровка иконок (Легенда в Футере) */
.icon-legend-footer {
    margin-top: 20px; padding-top: 15px; border-top: 1px solid #333;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; color: #888; font-size: 0.85rem; }
.legend-item b { color: #ccc; }

@media (max-width: 768px) {
    .tracklist-header { flex-direction: column; gap: 15px; align-items: center; text-align: center; }
    .tracklist-header h2 { text-align: center; width: 100%; margin-bottom: 5px !important; }
    .track-search-input { width: 90%; margin-left: 0; order: 2; }
    .track-item { height: auto; flex-direction: column; padding: 20px; text-align: center; }
    .track-play-button { order: 1; margin: 0 auto 10px; width: 60px; height: 60px; }
    .track-info-zone { order: 2; width: 100%; }
    .track-title-row { justify-content: center; }
    .track-media-core { position: static; order: 3; width: 100%; height: 110px; margin: 15px 0; }
    .track-rating-zone { order: 4; width: 100%; display: grid; grid-template-columns: 1fr 1.5fr 1fr; margin-left: 0; padding-top: 15px; border-top: 1px solid #334; }
    .mobile-likes-wrap { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 5px; }
    .mobile-plays-wrap { grid-column: 2; font-size: 0.8rem; }
    .mobile-downloads-wrap { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
}