/* Блок «Избранное» — DUROV MUSIC LAB */

.tracks-section {
  background:  #0d0d0d;
  padding:     56px clamp(12px, 1.2vw, 20px) 64px;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  border-top:  1px solid rgba(255, 255, 255, 0.04);
}

.tracks-section__header {
  margin-bottom: 32px;
  padding:       0 clamp(8px, 1vw, 28px);
}

.tracks-section__tag {
  font-size:      clamp(16px, 1.35vw, 20px);
  font-weight:    700;
  letter-spacing: 0.14em;
  color:          rgba(201, 168, 76, 0.85);
  display:        flex;
  align-items:    center;
  gap:            16px;
}
.tracks-section__tag::before {
  content:    '';
  width:      36px;
  height:     2px;
  background: rgba(201, 168, 76, 0.7);
  flex-shrink: 0;
}

.tracks-artist {
  margin-bottom: 48px;
  max-width:     100%;
  padding:       0 clamp(8px, 1vw, 28px);
}
.tracks-artist:last-child { margin-bottom: 0; }

.tracks-artist__label {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      clamp(13px, 1.05vw, 16px);
  font-weight:    600;
  letter-spacing: 0.22em;
  color:          rgba(255, 255, 255, 0.45);
  margin-bottom:  16px;
  padding-bottom: 12px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.06);
}

#tracks-stefany .tracks-artist__label { color: #e83ca8; }
#tracks-kant    .tracks-artist__label { color: #c9a84c; }
#tracks-romani  .tracks-artist__label { color: #cc823c; }

.tracks-artist__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}

.tr {
  display:       grid;
  grid-template-columns: 28px 40px 1fr auto;
  align-items:   center;
  gap:           0 16px;
  padding:       12px 12px 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor:        pointer;
  border-radius: 4px;
  transition:    background 0.18s;
}
.tr:last-child  { border-bottom: none; }
.tr:hover       { background: rgba(255, 255, 255, 0.03); padding-left: 12px; }
.tr.is-playing  { background: rgba(255, 255, 255, 0.04); padding-left: 12px; }

.tr__num {
  font-size:            clamp(12px, 0.95vw, 14px);
  color:                rgba(255, 255, 255, 0.28);
  text-align:           right;
  font-variant-numeric: tabular-nums;
  user-select:          none;
  transition:           opacity 0.15s;
}
.tr:hover .tr__num,
.tr.is-playing .tr__num { opacity: 0; }

.tr__play-btn {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      transparent;
  border:          1px solid rgba(255, 255, 255, 0.15);
  color:           rgba(255, 255, 255, 0.60);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.18s, border-color 0.18s, color 0.18s;
  flex-shrink:     0;
  opacity:         0;
}
.tr:hover .tr__play-btn,
.tr.is-playing .tr__play-btn { opacity: 1; }

.tr__play-btn:hover {
  background:    rgba(255, 255, 255, 0.08);
  border-color:  rgba(255, 255, 255, 0.35);
  color:         #fff;
}
.tr__play-btn svg {
  width:  15px;
  height: 15px;
  fill:   currentColor;
}
.tr__play-btn .icon-play  { margin-left: 1px; }
.tr__play-btn .icon-pause { display: none; }
.tr__play-btn.is-playing .icon-play  { display: none; }
.tr__play-btn.is-playing .icon-pause { display: block; }

#tracks-stefany .tr__play-btn.is-playing { border-color: #e83ca8; color: #e83ca8; }
#tracks-kant    .tr__play-btn.is-playing { border-color: #c9a84c; color: #c9a84c; }
#tracks-romani  .tr__play-btn.is-playing { border-color: #cc823c; color: #cc823c; }

.tr__info { min-width: 0; }

.tr__title {
  font-size:      clamp(18px, 1.4vw, 22px);
  font-weight:    600;
  color:          rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.35;
  transition:     color 0.18s;
}
.tr:hover .tr__title,
.tr.is-playing .tr__title { color: #fff; }

.tr__subtitle {
  font-weight:    400;
  color:          rgba(255, 255, 255, 0.52);
  font-size:      clamp(13px, 1.05vw, 16px);
}

.tr__progress-wrap {
  height:        3px;
  background:    rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top:    8px;
  overflow:      hidden;
}
.tr__progress-fill {
  height:     100%;
  width:      0%;
  transition: width 0.3s linear;
}
.tr__progress-fill--stefany { background: #e83ca8; }
.tr__progress-fill--kant    { background: #c9a84c; }
.tr__progress-fill--romani  { background: #cc823c; }

.tr__platforms {
  display:               grid;
  grid-template-columns: repeat(3, max-content);
  gap:                   8px;
  flex-shrink:           0;
  align-items:           center;
}

.tr__plat--placeholder {
  visibility:     hidden;
  pointer-events: none;
}

.tr__plat {
  display:         inline-flex;
  align-items:     center;
  padding:         8px 12px;
  border-radius:   3px;
  font-size:       clamp(12px, 0.95vw, 14px);
  letter-spacing:  0.12em;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background 0.18s, color 0.18s, border-color 0.18s;
  border:          1px solid transparent;
}

.tr__plat--ym {
  background: rgba(255, 76, 0, 0.10);
  color:      rgba(255, 120, 60, 0.85);
  border-color: rgba(255, 76, 0, 0.20);
}
.tr__plat--ym:hover {
  background:   rgba(255, 76, 0, 0.18);
  color:        rgba(255, 140, 80, 1);
  border-color: rgba(255, 76, 0, 0.40);
}

.tr__plat--vk {
  background: rgba(71, 121, 200, 0.10);
  color:      rgba(100, 150, 220, 0.85);
  border-color: rgba(71, 121, 200, 0.20);
}
.tr__plat--vk:hover {
  background:   rgba(71, 121, 200, 0.18);
  color:        rgba(120, 170, 240, 1);
  border-color: rgba(71, 121, 200, 0.40);
}

.tr__plat--sp {
  background: rgba(30, 215, 96, 0.08);
  color:      rgba(60, 200, 100, 0.80);
  border-color: rgba(30, 215, 96, 0.18);
}
.tr__plat--sp:hover {
  background:   rgba(30, 215, 96, 0.15);
  color:        rgba(80, 220, 120, 1);
  border-color: rgba(30, 215, 96, 0.38);
}

@media (max-width: 1100px) {
  .tracks-section { padding: 48px clamp(12px, 1.2vw, 20px) 56px; }
}

@media (max-width: 768px) {
  .tracks-section { padding: 40px clamp(12px, 1.2vw, 20px) 48px; }

  .tr {
    grid-template-columns: 24px 40px 1fr;
    grid-template-rows:    auto auto;
  }
  .tr__platforms {
    display:     none;
    grid-column: 1 / -1;
    padding:     8px 0 4px 80px;
    gap:         8px;
    flex-wrap:   wrap;
  }
  .tr.is-playing .tr__platforms { display: flex; }
}

@media (max-width: 480px) {
  .tr { gap: 0 12px; }
}