.genre-btn {
  flex: 0 0 auto; /* para não encolher e manter o tamanho */
  background-color: #222;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 10px 20px 10px 20px;
  margin: 6px;
  ow  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  white-space: nowrap;
}

.genre-btn:hover {
  border-color: #10ac84;
  color: #fff;
  background-color: #10ac84;
}

.genre-btn.active {
  border-color: #10ac84;
  color: #fff;
  background-color: #10ac84;
  box-shadow: 0 0 8px 2px rgba(139, 0, 0, 0.4);
  pointer-events: none;
}
  @keyframes pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .offline {
    color: #f44336;
    font-weight: bold;
  }
  /* Popup */
        #vote-popup {
            display:none; 
            position:fixed; 
            top:0; left:0; right:0; bottom:0; 
            background:rgba(0,0,0,0.8); 
            justify-content:center; 
            align-items:center; 
            z-index:10000;
        }
        #vote-popup .popup-content {
            background:#111; 
            padding:20px; 
            border-radius:10px; 
            text-align:center; 
            color:#fff;
        }
        #vote-popup .vote-btn {
            margin:10px; 
            padding:10px 20px; 
            border:none; 
            border-radius:5px; 
            color:#fff; 
            cursor:pointer;
            font-weight: bold;
            font-size: 16px;
        }
        #vote-popup .vote-btn.gostei { background: #4CAF50; }
        #vote-popup .vote-btn.amei { background: #e50914; }
        #vote-popup .vote-btn.nao-gostei { background: #f44336; }
        #vote-popup #close-vote-popup {
            margin-top:15px; 
            padding:6px 12px; 
            background:#555; 
            border:none; 
            border-radius:5px; 
            color:#ccc; 
            cursor:pointer;
        }