body {
      background: #121212;
      color: #f8f9fa;
      font-family: "Segoe UI", Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #fff;
      text-align: center;
      font-weight: 600;
    }

    .container {
      max-width: 900px;
      margin: auto;
      padding: 15px;
    }

    .input-group {
      display: flex;
      flex-wrap: nowrap;
      gap: 5px;
    }

    #campoBusca {
      flex: 1;
      font-size: 1rem;
      border-radius: 8px;
      padding: 10px 12px;
    }

    #btnLimpar {
      border-radius: 8px;
      white-space: nowrap;
    }

    #lista-musicas {
      height: 70vh;
      overflow-y: auto;
      border: 1px solid #333;
      border-radius: 10px;
      padding: 10px;
      background: #1e1e1e;
      scroll-behavior: smooth;
    }

    .musica {
      padding: 10px;
      border-bottom: 1px solid #333;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 5px;
    }

    .musica strong, .musica small {
      word-break: break-word;
    }

    .musica:last-child {
      border-bottom: none;
    }

    #contador {
      text-align: right;
      font-size: 0.9rem;
      color: #aaa;
      margin: 8px 0;
    }

    .loading {
      text-align: center;
      padding: 15px;
      color: #aaa;
    }

    /* Layout adaptativo */
    @media (max-width: 768px) {
      h2 {
        font-size: 1.4rem;
      }
      #lista-musicas {
        height: 65vh;
      }
      .musica {
        flex-direction: column;
        align-items: flex-start;
      }
      .container {
        padding: 10px;
      }
      #campoBusca {
        font-size: 0.95rem;
      }
      #btnLimpar {
        font-size: 0.9rem;
      }
    }

    @media (max-width: 480px) {
      #lista-musicas {
        height: 60vh;
      }
      #campoBusca {
        padding: 8px;
      }
      .musica {
        padding: 8px 5px;
      }
    }
	
	.musica.selecionada {
	  background: #2a2a2a;
	  border-left: 4px solid #4caf50;
	}