/* —— VÉU NEGRO • UI padrão (hover glow + transições) —— */

/* Base de transição para elementos interativos */
.btn,
.chip,
.card,
a {
  transition: all .25s ease;
}

/* Botões principais */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1rem;
  border-radius:12px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
  border:none;
  font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.btn:hover{
  box-shadow:0 0 14px rgba(231,29,54,.45), 0 10px 30px rgba(0,0,0,.45);
  transform:translateY(-1px);
}

/* Botão fantasma */
.btn.ghost{
  background:transparent;
  border:1px solid #2a2a2a;
  color:#fff;
}
.btn.ghost:hover{
  background:rgba(231,29,54,.08);
  box-shadow:0 0 12px rgba(231,29,54,.35), 0 10px 30px rgba(0,0,0,.45);
  transform:translateY(-1px);
}

/* Botão + (página da música) */
.btn.plus{
  font-size:1.1rem;
  font-weight:800;
  color:var(--accent-2);
  border:1px solid #2a2a2a;
  background:transparent;
  border-radius:12px;
  width:40px;
  justify-content:center;
}
.btn.plus:hover{
  background:rgba(231,29,54,.08);
  box-shadow:0 0 12px rgba(231,29,54,.40);
  transform:translateY(-1px);
}

/* Chips */
.chip{
  padding:.35rem .7rem;
  border:1px solid #2b2b2b;
  border-radius:999px;
  color:var(--muted);
  font-size:.8rem;
}
.chip:hover{
  border-color:var(--accent-2);
  color:#fff;
  box-shadow:0 0 10px rgba(231,29,54,.3);
}

/* Cards (leve glow no hover, sem mudar o fundo) */
.card{
  background:linear-gradient(180deg,#0e0e10,#0b0b0b);
  border:1px solid #1c1c1f;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.card:hover{
  box-shadow:0 0 14px rgba(231,29,54,.18), 0 10px 30px rgba(0,0,0,.45);
}

/* —— Listagem de músicas (mesmo hover da página Vídeos) —— */
.track{
  background:linear-gradient(180deg,#0e0e10,#0b0b0b);
  border:1px solid #1c1c1f;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.track:hover{
  box-shadow:0 0 14px rgba(231,29,54,.18), 0 10px 30px rgba(0,0,0,.45);
}

/* —— Ações no mobile: rolagem horizontal sem quebrar linha —— */
@media (max-width: 900px){
  .actions{
    display:flex;
    flex-wrap:nowrap;
    gap:.5rem;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .actions::-webkit-scrollbar{ display:none }
  .actions .btn{ flex:0 0 auto; white-space:nowrap }
}